feat: sync code

Author: mumiao

.gitignore

@@ -2,4 +2,5 @@
 node_modules
 dist
 coverage
-.DS_Store
+.DS_Store
+.yarn-error.log

.gitlab-ci.yml

@@ -17,7 +17,7 @@ static-checking:
     stage: static-checking
     script:
         - yarn eslint
-        - yarn prettier
+        - yarn prettier --check # If you want autofix --write option
         - yarn stylelint
     only:
         - merge_requests

.prettierignore

@@ -3,4 +3,5 @@ dist
 .history
 node_modules
 yarn.lock
-coverage
+coverage
+storybook-static

.yarnclean

@@ -0,0 +1,45 @@
+# test directories
+__tests__
+test
+tests
+powered-test
+
+# asset directories
+docs
+doc
+website
+images
+assets
+
+# examples
+example
+examples
+
+# code coverage directories
+coverage
+.nyc_output
+
+# build scripts
+Makefile
+Gulpfile.js
+Gruntfile.js
+
+# configs
+appveyor.yml
+circle.yml
+codeship-services.yml
+codeship-steps.yml
+wercker.yml
+.tern-project
+.gitattributes
+.editorconfig
+.*ignore
+.eslintrc
+.jshintrc
+.flowconfig
+.documentup.json
+.yarn-metadata.json
+.travis.yml
+
+# misc
+*.md

package.json

@@ -12,7 +12,7 @@
         "build": "tsc --project tsconfig.build.json",
         "eslint": "eslint ./src/**/*.ts ./src/**/*.tsx",
         "stylelint": "stylelint ./src/**/*.scss",
-        "prettier": "prettier --ignore-unknown --write . ",
+        "prettier": "prettier --ignore-unknown .",
         "release": "standard-version",
         "web": "webpack serve --env prod --config ./build/web.js"
     },
@@ -33,7 +33,9 @@
         "monaco-editor": "^0.21.2",
         "rc-collapse": "^2.0.1",
         "rc-dialog": "^8.4.5",
+        "rc-textarea": "^0.3.1",
         "rc-tree": "^3.10.0",
+        "rc-util": "^5.5.0",
         "react": "^16.13.1",
         "react-dnd": "^9.3.4",
         "react-dnd-html5-backend": "^9.3.4",
@@ -47,12 +49,12 @@
     "devDependencies": {
         "@commitlint/cli": "^11.0.0",
         "@commitlint/config-conventional": "^11.0.0",
-        "@storybook/addon-actions": "6.1.2",
-        "@storybook/addon-knobs": "^6.1.2",
-        "@storybook/addon-links": "6.1.2",
+        "@storybook/addon-actions": "6.1.10",
+        "@storybook/addon-knobs": "^6.1.10",
+        "@storybook/addon-links": "6.1.10",
         "@storybook/addon-notes": "^5.3.21",
-        "@storybook/addons": "6.1.2",
-        "@storybook/react": "6.1.2",
+        "@storybook/addons": "6.1.10",
+        "@storybook/react": "6.1.10",
         "@types/jest": "^26.0.0",
         "@typescript-eslint/eslint-plugin": "^3.1.0",
         "@typescript-eslint/parser": "^3.1.0",
@@ -74,15 +76,15 @@
         "stylelint-config-sass-guidelines": "^7.1.0",
         "ts-jest": "^26.1.0",
         "ts-loader": "^7.0.5",
-        "typescript": "^3.9.5",
+        "typescript": "^4.0.5",
         "webpack-cli": "^4.0.0",
         "webpack-dev-server": "^3.11.0",
         "webpack-merge": "^5.2.0"
     },
     "husky": {
         "hooks": {
             "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-            "pre-push": "prettier --ignore-unknown --check ."
+            "pre-push": "yarn prettier --write"
         }
     },
     "config": {

src/common/className.ts

@@ -1,3 +1,4 @@
+import { isEmpty } from 'loadsh';
 import { APP_PREFIX } from 'mo/common/const';
 /**
  * This function help you prefix a css class name, default is molecule.
@@ -10,6 +11,47 @@ export function prefixClaName(name: string, prefix: string = APP_PREFIX) {
     return name ? `${prefix}-${name}` : '';
 }
 
-export function classNames(...names) {
-    return names.filter((name) => !!name).join(' ');
+export function classNames(...args) {
+    if (isEmpty(args)) return;
+    const classList: string[] = [];
+    for (const arg of args) {
+        if (!arg) continue;
+        const argType = typeof arg;
+        if (argType === 'string' || argType === 'number') {
+            classList.push(`${arg}`);
+            continue;
+        }
+        if (argType === 'object') {
+            if (arg.toString !== Object.prototype.toString) {
+                classList.push(arg.toString());
+                continue;
+            }
+            for (const key in arg) {
+                if (Object.hasOwnProperty.call(arg, key) && arg[key]) {
+                    classList.push(key);
+                }
+            }
+        }
+    }
+    return classList.join(' ');
+}
+/**
+ * Element names may consist of Latin letters, digits, dashes and underscores.
+ * CSS class is formed as block name plus two underscores plus element name: .block__elem
+ * @param block
+ * @param element
+ */
+export function getBEMElement(block: string, element: string) {
+    return `${block}__${element}`;
+}
+
+/**
+ * CSS class is formed as block’s or element’s name plus two dashes:
+ * .block--mod or .block__elem--mod and .block--color-black with .block--color-red.
+ * Spaces in complicated modifiers are replaced by dash.
+ * @param blockOrElement
+ * @param modifier
+ */
+export function getBEMModifier(blockOrElement: string, modifier: string) {
+    return `${blockOrElement}--${modifier}`;
 }

src/common/css.ts

@@ -6,3 +6,24 @@
 export function em2Px(em: number, fontSize: number): number {
     return em * fontSize;
 }
+
+/**
+ * Apply css content to workbench
+ * @param styleSheetContent CSS sheet content
+ * @param rulesClassName Style tag class Name
+ */
+export function applyStyleSheetRules(
+    styleSheetContent: string,
+    rulesClassName: string
+) {
+    const themeStyles = document.head.getElementsByClassName(rulesClassName);
+    if (themeStyles.length === 0) {
+        const elStyle = document.createElement('style');
+        elStyle.type = 'text/css';
+        elStyle.className = rulesClassName;
+        elStyle.innerHTML = styleSheetContent;
+        document.head.appendChild(elStyle);
+    } else {
+        (<HTMLStyleElement>themeStyles[0]).innerHTML = styleSheetContent;
+    }
+}

src/common/dom.ts

@@ -126,3 +126,7 @@ export function getPositionByPlacement(
     console.log('getPositionByPlacement', x, y);
     return { x, y };
 }
+
+export function getAttr(domElement: HTMLElement, attr) {
+    return domElement.getAttribute(attr) || '';
+}

src/common/event/eventEmitter.ts

@@ -21,8 +21,15 @@ export class EventEmitter {
         }
     }
 
-    // TODO
-    public unsubscribe() {}
+    public unsubscribe(name: string | string[]) {
+        if (Array.isArray(name)) {
+            name.forEach((key: string) => {
+                this._events.delete(key);
+            });
+        } else {
+            this._events.delete(name);
+        }
+    }
 
     public assignEvent<T>(name: string, callback: Function) {
         const event = this._events.get(name);

src/common/keyCodes.ts

@@ -0,0 +1,3 @@
+export const enum KeyCodes {
+    ENTER = 'Enter',
+}

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;
+        }
+    }
+}