feat: add basic Checkbox component

src/components/checkbox/checkbox.tsx

@@ -0,0 +1,43 @@
+import './style.scss';
+import * as React from 'react';
+import { ComponentProps } from 'react';
+import { prefixClaName, classNames, getBEMElement } from 'mo/common/className';
+
+export interface ICheckbox extends ComponentProps<any> {
+    id: string;
+    value?: string;
+    children?: ReactNode;
+    onChange?(e: React.ChangeEvent, options?: ICheckbox): void;
+}
+
+export const checkboxClassName = prefixClaName('checkbox');
+const checkboxLabelClassName = getBEMElement(checkboxClassName, 'label');
+const checkboxInputClassName = getBEMElement(checkboxClassName, 'input');
+
+export function Checkbox(props: ICheckbox) {
+    const { className, id, children, value, onChange, ...custom } = props;
+
+    const claNames = classNames(checkboxClassName, className);
+
+    const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e, { id, value: e.target.value });
+    };
+
+    return (
+        <div className={claNames} {...(custom as any)}>
+            <input
+                id={id}
+                type="checkbox"
+                className={checkboxInputClassName}
+                value={value}
+                onChange={handleCheckboxChange}
+            ></input>
+            <label
+                htmlFor={id}
+                className={classNames(checkboxLabelClassName, 'codicon')}
+            >
+                {children}
+            </label>
+        </div>
+    );
+}

src/components/checkbox/index.tsx

@@ -0,0 +1 @@
+export * from './checkbox';

src/components/checkbox/style.scss

@@ -0,0 +1,44 @@
+@import 'mo/style/common';
+$checkbox: prefix('checkbox');
+
+#{$checkbox} {
+    user-select: none;
+
+    &__input {
+        height: 0;
+        visibility: hidden;
+        width: 0;
+
+        &[type='checkbox']:checked + label::before {
+            content: '\eab2';
+        }
+    }
+
+    &__label {
+        cursor: pointer;
+        outline: none;
+        padding-left: 26px;
+        position: relative;
+
+        &::before {
+            border: 1px solid transparent;
+            border-radius: 3px;
+            box-sizing: border-box;
+            content: ' ';
+            display: inline-block;
+            font: normal normal normal 16px/1 codicon;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            height: 18px;
+            left: 0;
+            outline: 1px solid transparent;
+            position: absolute;
+            text-align: center;
+            text-decoration: none;
+            text-rendering: auto;
+            top: 0;
+            user-select: none;
+            width: 18px;
+        }
+    }
+}

src/style/common.scss

@@ -18,6 +18,7 @@ $prefix: 'mo';
 
 .#{$prefix} {
     bottom: 0;
+    box-sizing: border-box;
     font-size: 13px;
     height: 100%;
     left: 0;

src/style/theme.scss

@@ -25,6 +25,7 @@
 @import 'mo/components/button/style';
 @import 'mo/components/input/style';
 @import 'mo/components/select/style';
+@import 'mo/components/checkbox/style';
 
 // =============== Workbench =============== //
 #{prefix($workbench)} {
@@ -251,3 +252,20 @@
         border-top-color: rgba(255, 255, 255, 0.4);
     }
 }
+
+// =============== Checkbox =============== //
+
+#{$checkbox} {
+    &--focus + label::before {
+        outline-color: rgba(14, 99, 156, 0.8);
+    }
+
+    &__label {
+        color: #f0f0f0;
+
+        &::before {
+            background-color: #3c3c3c;
+            border-color: #3c3c3c;
+        }
+    }
+}

stories/components/16-Checkbox.stories.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import { propsTable } from '../common/propsTable';
+import { Checkbox } from 'mo/components/checkbox';
+
+const stories = storiesOf('Checkbox', module);
+stories.addDecorator(withKnobs);
+
+const propDefinitions = [
+    {
+        property: 'render',
+        propType: '() => React.ReactNode',
+        required: false,
+        description: 'Default render content',
+        defaultValue: null,
+    },
+];
+
+stories.add(
+    'Basic Usage',
+    () => {
+        const onSelectOption = (e, option) => {
+            console.log('onSelectOption', e, option);
+        };
+        return (
+            <div
+                style={{
+                    backgroundColor: 'rgb(37, 37, 38)',
+                    color: 'rgb(240, 240, 240)',
+                    height: 500,
+                    padding: 20,
+                }}
+            >
+                <h2>简述</h2>
+                <p>Checkbox component.</p>
+
+                <h3>使用示例 1</h3>
+                <div>
+                    <Checkbox
+                        id="checkbox1"
+                        value="1"
+                        style={{
+                            color: 'rgba(255, 255, 255, 0.4)',
+                            background: '#252526',
+                        }}
+                        onChange={onSelectOption}
+                    >
+                        Controls whether and how files path are shown in the
+                        breadcrumbs view.
+                    </Checkbox>
+                </div>
+                <div style={{ marginTop: 20 }}>
+                    <Checkbox
+                        id="checkbox2"
+                        value="2"
+                        style={{
+                            color: 'rgba(255, 255, 255, 0.4)',
+                            background: '#252526',
+                        }}
+                        onChange={onSelectOption}
+                    >
+                        Render breadcrumb items with icons.
+                    </Checkbox>
+                </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>
+            );
+            ～～
+        `,
+        },
+    }
+);