feat: add Button component

Author: wewoor

src/components/button/index.tsx

@@ -0,0 +1,29 @@
+import './style.scss';
+import * as React from 'react';
+import { classNames, prefixClaName } from 'mo/common/className';
+
+type BtnSizeType = 'normal' | 'large';
+export interface IButton extends React.ComponentProps<'a'> {
+    /**
+     * Default size is normal
+     */
+    size?: BtnSizeType;
+}
+
+export const defaultButtonClassName = 'btn';
+
+export function Button(props: React.PropsWithChildren<IButton>) {
+    const { className, children, size = 'normal', ...others } = props;
+
+    const claNames = classNames(
+        prefixClaName(defaultButtonClassName),
+        size,
+        className
+    );
+
+    return (
+        <a className={claNames} {...others}>
+            {children}
+        </a>
+    );
+}

src/components/button/style.scss

@@ -0,0 +1,28 @@
+@import 'mo/style/common';
+$btn: 'btn';
+
+#{prefix($btn)} {
+    align-items: center;
+    border: 0;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    margin: 10px;
+    outline-offset: 2px;
+    text-align: center;
+    width: 100%;
+
+    &.normal {
+        padding: 4px;
+    }
+
+    &.large {
+        font-size: 16px;
+        padding: 8px;
+    }
+
+    &:hover {
+        opacity: 0.9;
+    }
+}

src/style/theme.scss

@@ -21,6 +21,7 @@
 @import 'mo/components/menu/style';
 @import 'mo/components/toolbar/style';
 @import 'mo/components/tree/style';
+@import 'mo/components/button/style';
 
 // =============== Workbench =============== //
 #{prefix($workbench)} {
@@ -167,3 +168,9 @@
         background: rgba(0, 0, 0, 0.1);
     }
 }
+
+// =============== Button =============== //
+#{prefix($btn)} {
+    background-color: #316ac5;
+    color: rgb(255, 255, 255);
+}

stories/components/12-Button.stories.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { propsTable } from '../common/propsTable';
+
+import { Button } from 'mo/components/button';
+import { Icon } from 'mo/components/icon';
+
+const stories = storiesOf('Button', module);
+stories.addDecorator(withKnobs);
+
+const propDefinitions = [
+    {
+        property: 'render',
+        propType: '() => React.ReactNode',
+        required: false,
+        description: 'Default render content',
+        defaultValue: null,
+    },
+];
+
+stories.add(
+    'Basic Usage',
+    () => {
+        return (
+            <div>
+                <h2>简述</h2>
+                <p>Button Component</p>
+                <div>
+                    <h3>使用示例 1</h3>
+                    <Button>Btn</Button>
+                </div>
+                <div>
+                    <h3>使用示例 2 - size</h3>
+                    <Button>Normal Button</Button>
+                    <Button size="large">Large Button</Button>
+                </div>
+                <div>
+                    <h3>使用示例 2 - Icon</h3>
+                    <Button>
+                        <Icon type="refresh" />
+                    </Button>
+                    <Button
+                        style={{
+                            width: 100,
+                        }}
+                    >
+                        <Icon type="play" /> <span>Play</span>
+                    </Button>
+                </div>
+            </div>
+        );
+    },
+    {
+        info: {
+            inline: true,
+            TableComponent: () => propsTable({ propDefinitions }),
+            // propTablesExclude: [],
+            text: `
+            代码示例：
+            ~~~js
+            import { useContextView } from 'mo/components/contextview';
+
+            const contextView = useContextView();
+
+            const mouseMove = (event: React.MouseEvent): void => {
+                contextView.show({
+                    x: event.clientX,
+                    y: event.clientY,
+                }, () => {
+                    return (
+                        <h1>Hello World</h1>
+                    );
+                });
+            };
+
+            return (
+                <div>
+                    <div id="topLeft"
+                        onMouseMove={mouseMove}
+                        style={
+                            {
+                                position: 'absolute',
+                                width: 200,
+                                height: 200,
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                background: '#dddddd',
+                            }
+                        }>
+                            Hover me!
+                    </div>
+                </div>
+            );
+            ～～
+        `,
+        },
+    }
+);