mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2025-01-18 16:54:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #11 from webzard-io/feat/demo

Browse Source 
add button demo
This commit is contained in:
xzdry 2022-01-21 15:57:50 +08:00 committed by Bowen Tan
parent 31a8c74a7c
commit 7847a36587
16 changed files with 889 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/arco-lib/examples.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SunmaoUI Arco Examples</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/examples/index.tsx"></script>
</body>
</html>

2
packages/arco-lib/index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<title>SunmaoUI Arco Editor</title>
</head>
<body>
<div id="root"></div>

3
packages/arco-lib/src/components/Button.tsx
View File

@ -12,7 +12,7 @@ const ButtonPropsSchema = Type.Object({
const ButtonStateSchema = Type.Object({});
const ButtonImpl: ComponentImpl<Static<typeof ButtonPropsSchema>> = (props) => {
const { slotsElements, customStyle, callbackMap } = props;
const { slotsElements, customStyle, text, callbackMap } = props;
const { className, ...cProps } = getComponentProps(props);
return (
@ -22,6 +22,7 @@ const ButtonImpl: ComponentImpl<Static<typeof ButtonPropsSchema>> = (props) => {
{...cProps}
>
{slotsElements.content}
{text}
</BaseButton>
);
};

60
packages/arco-lib/src/examples/DemoWrapper/index.tsx Normal file
View File

@ -0,0 +1,60 @@
import { Button } from "@arco-design/web-react";
import { css } from "@emotion/css";
import { Application } from "@sunmao-ui/core";
import { initSunmaoUI } from "@sunmao-ui/runtime";
import { useState } from "react";
import { components } from "../../lib";
type Props = {
application: Application;
};
const containerStyle = css``;
const demoStyle = css`
margin-top: 12px;
margin-bottom: 12px;
padding: 48px;
background-color: white;
border: 1px solid var(--color-border);
border-radius: 2px;
.App {
height: auto !important;
}
`;
const codeStyle = css`
margin-top: 12px;
font-size: 13px;
padding: 28px 48px;
width: 100%;
background-color: var(--color-fill-1);
`;
export const DemoWrapper: React.FC<Props> = (props) => {
const { application } = props;
const ui = initSunmaoUI();
const [isShowCode, setIsShowCode] = useState(false);
const App = ui.App;
const registry = ui.registry;
components.forEach((c) => registry.registerComponent(c));
const sunmaoApp = (
<App options={application} debugEvent={false} debugStore={false}></App>
);
const codeArea = (
<pre className={codeStyle}>{JSON.stringify(application, null, 2)}</pre>
);
return (
<div className={containerStyle}>
<div className={demoStyle}>{sunmaoApp}</div>
<div>
<Button onClick={() => setIsShowCode(!isShowCode)}>Show Code</Button>
</div>
{isShowCode ? codeArea : null}
</div>
);
};

38
packages/arco-lib/src/examples/ExampleIndexPage.tsx Normal file
View File

@ -0,0 +1,38 @@
import { Layout, Menu, Typography } from "@arco-design/web-react";
import React, { useState } from "react";
import { ButtonDemoPage } from "./pages/button";
const { Sider, Content, Header } = Layout;
const ContentMap: Record<string, React.FC> = {
Button: ButtonDemoPage,
};
export const ExampleIndexPage: React.FC = () => {
const [selectedKey, setSelectedKey] = useState("Button");
const ContentComponent: React.FC = ContentMap[selectedKey];
return (
<Layout>
<Sider collapsed={false}>
<Menu selectedKeys={[selectedKey]}>
{Object.keys(ContentMap).map((name) => {
return (
<Menu.Item key={name} onClick={() => setSelectedKey(name)}>
{name}
</Menu.Item>
);
})}
</Menu>
</Sider>
<Layout>
<Header style={{ paddingLeft: 20 }}>
<Typography.Title>{selectedKey}</Typography.Title>
</Header>
<Layout style={{ padding: "0 24px" }}>
<Content>
{ContentComponent ? <ContentComponent /> : undefined}
</Content>
</Layout>
</Layout>
</Layout>
);
};

4
packages/arco-lib/src/examples/index.tsx Normal file
View File

@ -0,0 +1,4 @@
import ReactDOM from "react-dom";
import { ExampleIndexPage } from "./ExampleIndexPage";
ReactDOM.render(<ExampleIndexPage />, document.getElementById("root"));

157
packages/arco-lib/src/examples/pages/button/basicUsage.ts Normal file
View File

@ -0,0 +1,157 @@
import { Application } from "@sunmao-ui/core";
const basicUsage: Application = {
kind: "Application",
version: "example/v1",
metadata: {
name: "buttonBasicUsage",
description: "buttonBasicUsage",
},
spec: {
components: [
{
id: "space",
type: "arco/v1/space",
properties: {},
traits: [],
},
{
id: "button1",
type: "arco/v1/button",
properties: {
text: "primary",
type: "primary",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "button2",
type: "arco/v1/button",
properties: {
text: "secondary",
type: "secondary",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "button3",
type: "arco/v1/button",
properties: {
text: "dashed",
type: "dashed",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "button4",
type: "arco/v1/button",
properties: {
text: "outline",
type: "outline",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "button5",
type: "arco/v1/button",
properties: {
text: "text",
type: "text",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "button6",
type: "arco/v1/button",
properties: {
text: "disabled",
type: "primary",
disabled: true,
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "button7",
type: "arco/v1/button",
properties: {
text: "loading",
type: "primary",
loading: true,
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
],
},
};
export default basicUsage;

82
packages/arco-lib/src/examples/pages/button/buttonEvent.ts Normal file
View File

@ -0,0 +1,82 @@
import { Application } from "@sunmao-ui/core";
const buttonEvent: Application = {
kind: "Application",
version: "example/v1",
metadata: {
name: "buttonEvent",
description: "buttonEvent",
},
spec: {
components: [
{
id: "space",
type: "arco/v1/space",
properties: {},
traits: [],
},
{
id: "button1",
type: "arco/v1/button",
properties: {
text: "Click",
type: "primary",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: { id: "space", slot: "content" },
},
},
{
type: "core/v1/event",
properties: {
handlers: [
{
type: "onClick",
componentId: "count",
method: {
name: "setValue",
parameters: {
key: "value",
value: "{{count.value + 1}}",
},
},
},
],
},
},
],
},
{
id: "text1",
type: "core/v1/text",
properties: {
value: { raw: "click count: {{count.value}}", format: "plain" },
},
traits: [
{
type: "core/v1/slot",
properties: {
container: { id: "space", slot: "content" },
},
},
],
},
{
id: "count",
type: "core/v1/dummy",
properties: {},
traits: [
{
type: "core/v1/state",
properties: { key: "value", initialValue: 0 },
},
],
},
],
},
};
export default buttonEvent;

133
packages/arco-lib/src/examples/pages/button/buttonShape.ts Normal file
View File

@ -0,0 +1,133 @@
import { Application } from "@sunmao-ui/core";
const buttonShape: Application = {
kind: "Application",
version: "example/v1",
metadata: {
name: "buttonShape",
description: "buttonShape",
},
spec: {
components: [
{
id: "space",
type: "arco/v1/space",
properties: {},
traits: [],
},
{
id: "button1",
type: "arco/v1/button",
properties: {
type: "primary",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "iconplus",
type: "arco/v1/icon",
properties: {
name: "IconPlus",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "button1",
slot: "content",
},
},
},
],
},
{
id: "button2",
type: "arco/v1/button",
properties: {
type: "primary",
shape: "circle",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "iconplus2",
type: "arco/v1/icon",
properties: {
name: "IconPlus",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "button2",
slot: "content",
},
},
},
],
},
{
id: "button3",
type: "arco/v1/button",
properties: {
text: "delete",
type: "primary",
shape: "round",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "iconplus3",
type: "arco/v1/icon",
properties: {
name: "IconDelete",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "button3",
slot: "content",
},
},
},
],
},
],
},
};
export default buttonShape;

101
packages/arco-lib/src/examples/pages/button/buttonSize.ts Normal file
View File

@ -0,0 +1,101 @@
import { Application } from "@sunmao-ui/core";
const buttonSize: Application = {
kind: "Application",
version: "example/v1",
metadata: {
name: "buttonSize",
description: "buttonSize",
},
spec: {
components: [
{
id: "space",
type: "arco/v1/space",
properties: {},
traits: [],
},
{
id: "button1",
type: "arco/v1/button",
properties: {
text: "primary",
type: "primary",
size: "mini",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "button2",
type: "arco/v1/button",
properties: {
text: "primary",
type: "primary",
size: "small",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "button3",
type: "arco/v1/button",
properties: {
text: "primary",
type: "primary",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "button4",
type: "arco/v1/button",
properties: {
text: "primary",
type: "primary",
size: "large",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
],
},
};
export default buttonSize;

79
packages/arco-lib/src/examples/pages/button/buttonStatus.ts Normal file
View File

@ -0,0 +1,79 @@
import { Application } from "@sunmao-ui/core";
const buttonStatus: Application = {
kind: "Application",
version: "example/v1",
metadata: {
name: "buttonStatus",
description: "buttonStatus",
},
spec: {
components: [
{
id: "space",
type: "arco/v1/space",
properties: {},
traits: [],
},
{
id: "button1",
type: "arco/v1/button",
properties: {
text: "warning",
status: "warning",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "button2",
type: "arco/v1/button",
properties: {
text: "danger",
status: "danger",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "button3",
type: "arco/v1/button",
properties: {
text: "success",
status: "success",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
],
},
};
export default buttonStatus;

95
packages/arco-lib/src/examples/pages/button/buttonWithIcon.ts Normal file
View File

@ -0,0 +1,95 @@
import { Application } from "@sunmao-ui/core";
const buttonWithIcon: Application = {
kind: "Application",
version: "example/v1",
metadata: {
name: "buttonWithIcon",
description: "buttonWithIcon",
},
spec: {
components: [
{
id: "space",
type: "arco/v1/space",
properties: {},
traits: [],
},
{
id: "button1",
type: "arco/v1/button",
properties: {
type: "primary",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "iconplus",
type: "arco/v1/icon",
properties: {
name: "IconPlus",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "button1",
slot: "content",
},
},
},
],
},
{
id: "button2",
type: "arco/v1/button",
properties: {
text: "delete",
type: "primary",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "iconplus2",
type: "arco/v1/icon",
properties: {
name: "IconDelete",
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "button2",
slot: "content",
},
},
},
],
},
],
},
};
export default buttonWithIcon;

37
packages/arco-lib/src/examples/pages/button/index.tsx Normal file
View File

@ -0,0 +1,37 @@
import { Divider, Typography } from "@arco-design/web-react";
import { DemoWrapper } from "../../DemoWrapper";
import basicUsage from "./basicUsage";
import buttonEvent from "./buttonEvent";
import buttonWithIcon from "./buttonWithIcon";
import buttonSize from "./buttonSize";
import buttonShape from "./buttonShape";
import buttonStatus from "./buttonStatus";
import longButton from "./longButton";
export const ButtonDemoPage: React.FC = () => {
return (
<div>
<Typography.Title heading={3}>Basic Usage</Typography.Title>
<DemoWrapper application={basicUsage} />
<Divider />
<Typography.Title heading={3}>Basic Event</Typography.Title>
<DemoWrapper application={buttonEvent as any} />
<Divider />
<Typography.Title heading={3}>Button Sizes</Typography.Title>
<DemoWrapper application={buttonSize as any} />
<Divider />
<Typography.Title heading={3}>Button With Icon</Typography.Title>
<DemoWrapper application={buttonWithIcon as any} />
<Divider />
<Typography.Title heading={3}>Button Shape</Typography.Title>
<DemoWrapper application={buttonShape as any} />
<Divider />
<Typography.Title heading={3}>Button Status</Typography.Title>
<DemoWrapper application={buttonStatus as any} />
<Divider />
<Typography.Title heading={3}>Long Button</Typography.Title>
<DemoWrapper application={longButton as any} />
<Divider />
</div>
);
};

76
packages/arco-lib/src/examples/pages/button/longButton.ts Normal file
View File

@ -0,0 +1,76 @@
import { Application } from "@sunmao-ui/core";
const longButton: Application = {
kind: "Application",
version: "example/v1",
metadata: {
name: "longButton",
description: "longButton",
},
spec: {
components: [
{
id: "space",
type: "arco/v1/space",
properties: {
direction: "vertical",
},
traits: [
{
type: "core/v1/style",
properties: {
styles: [
{
styleSlot: "content",
style: "width: 360px; border: 1px solid #ddd; padding: 32px",
},
],
},
},
],
},
{
id: "button1",
type: "arco/v1/button",
properties: {
text: "primary",
type: "primary",
long: true,
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
{
id: "button2",
type: "arco/v1/button",
properties: {
text: "primary",
type: "primary",
long: true,
},
traits: [
{
type: "core/v1/slot",
properties: {
container: {
id: "space",
slot: "content",
},
},
},
],
},
],
},
};
export default longButton;

3
packages/arco-lib/src/generated/types/Button.ts
View File

@ -1,8 +1,9 @@
import { Type } from "@sinclair/typebox";
import { IntoStringUnion, StringUnion } from '../../sunmao-helper';
import { StringUnion } from '../../sunmao-helper';
export const ButtonPropsSchema = {
'text': Type.Optional(Type.String()),
'htmlType': Type.Optional(StringUnion(['button', 'submit', 'reset'])),
'type': Type.Optional(StringUnion(['default', 'primary', 'secondary', 'dashed', 'text', 'outline'])),
'status': Type.Optional(StringUnion(['default', 'warning', 'danger', 'success'])),

9
packages/arco-lib/vite.config.ts
View File

@ -1,7 +1,16 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
input: {
index: resolve(__dirname, "index.html"),
examples: resolve(__dirname, "examples.html"),
},
},
},
});