@aloudata/aloudata-design 0.1.0-beta1

package/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

package/.eslintrc.js

@@ -0,0 +1,43 @@
+module.exports = {
+  extends: [
+    '@aloudata/eslint-config-base'
+  ],
+  parserOptions: {
+    project: './tsconfig.json',
+  },
+  ignorePatterns: [
+    '**/*.less.d.ts',
+    '**/demo/*',
+    "**/iconfont.js",
+    "jest"
+  ],
+  rules: {
+    'react/require-default-props': 'off',
+    'linebreak-style': 'off',
+    curly: ['error', 'all'],
+    'import/extensions': 'off',
+    '@typescript-eslint/type-annotation-spacing': ['error', { after: true }],
+    '@typescript-eslint/no-unsafe-member-access': ['error'],
+    // 'id-length': ['error', { properties: 'never', exceptions: ['i', 'j', 'e', '_'] }],
+    // 'react/jsx-key': ['error'],
+    '@typescript-eslint/naming-convention': [
+      'error',
+      {
+        selector: 'interface',
+        format: ['PascalCase'],
+        custom: {
+          regex: '^I[A-Z]',
+          match: true
+        }
+      },
+      {
+        selector: 'enum',
+        format: ['PascalCase'],
+        custom: {
+          regex: '^E[A-Z]',
+          match: true
+        }
+      }
+    ],
+  }
+};

package/.fatherrc.ts

@@ -0,0 +1,16 @@
+export default {
+  esm: 'babel', // 通过 babel 编译相关组件即可，而无需打包在一个文件中，实现在使用时可按需加载。
+  cjs: 'babel',
+  // lessInBabelMode: true, // less 转 css
+  // 打包的产物若需引入 antd ，则通过按需加载形式引入。
+  extraBabelPlugins: [
+    [
+      'babel-plugin-import',
+      {
+        libraryName: 'antd',
+        libraryDirectory: 'es',
+        style: true,
+      },
+    ],
+  ],
+}

package/.prettierignore

@@ -0,0 +1,7 @@
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test

package/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@umijs/fabric').prettier;

package/.stylelintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": "stylelint-config-standard",
+  "ignoreFiles": [
+    "src/style/**/*",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.ts",
+    "**/*.png",
+    "**/*.css",
+    "**/*.json",
+    "**/*.md",
+    "**/*.ttf",
+    "**/*.woff",
+    "**/*.woff2",
+    "**/*.html"
+  ],
+  "overrides": [{
+    "files": ["**/*.less"],
+    "customSyntax": "postcss-less",
+    "rules": {
+      "no-missing-end-of-source-newline": null,
+      "no-empty-source": null,
+      "selector-pseudo-class-no-unknown": [
+        true,
+        {
+          "ignorePseudoClasses": ["global", "local"]
+        }
+      ],
+      "selector-class-pattern": ["^([a-z][a-zA-Z0-9]+)|(([a-z][a-z0-9]*)(-[a-z0-9]+)*$)$"],
+      "alpha-value-notation": null,
+      "color-function-notation": null,
+      "keyframes-name-pattern": "^[a-z][a-zA-Z0-9]+$",
+      "string-quotes": "single"
+    }
+  }]
+}

package/.umirc.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'dumi';
+export default defineConfig({
+  // mode:'site',
+  title: 'design',
+  logo: 'https://cdn.aloudata.com/source/workstation_test/static/logo.8b20330e.svg',
+  outputPath: 'docs-dist',
+  apiParser:{
+    propFilter:{
+      skipNodeModules: true,
+      skipPropsWithoutDoc:true
+    }
+  }
+  // mode:'site'
+  // more config: https://d.umijs.org/config
+});

package/README.md

@@ -0,0 +1,82 @@
+# design
+
+## Getting Started
+
+Install dependencies,
+
+```bash
+$ yarn i
+```
+
+开始 dev 环境开发,
+
+```bash
+$ yarn start
+```
+lint校验
+```
+npm run lint
+```
+打包组件库 通过 `father-build`,
+
+```bash
+$ npm run build
+```
+
+构建 doc 文档
+
+```bash
+$ npm run docs:build
+```
+
+测试命令
+
+```bash
+$ npm test
+```
+## 组件开发
+```
+// 基于antd组件开发新组件，必须需要额外antd的组件样式文件
+// 非基于antd组件开发不需要引入这一条，下面以button为例：
+@import '~antd/lib/button/style/index.less';
+
+// 主题样式变量、mixin等
+@import '~@/style/index.less';
+
+// 自定义的样式
+.ald-class {
+  ...
+}
+···
+```
+
+### 覆盖antd组件的icon
+
+在组件对应的 less 文件中
+
+```
+@import '~@/Icon/index.less';
+
+// 找到antd组件的svg的父节点，覆盖其样式
+.ant-icon-parent-node-class {
+  // \e691 是 iconfont 中图标对应的 Unicode 码
+  .ald-iconfont('\e691');
+}
+```
+
+### 更新iconfont文件
+
+在 iconfont 网站上点击“下载至本地”按钮。解压为名为 download 的文件夹。
+
+将 `src/Icon/iconfont` 文件夹中的所有内容替换成 download 文件夹的内容。
+
+将 `src/Icon/index.less` 文件中的 `@font-face` 下的 `src` 属性的内容，替换成 `src/Icon/iconfont/iconfont.css` 文件中的 `@font-face` 下的 `src` 属性的内容。并将 `url(iconfont.woff` 和 `url(iconfont.ttf` 更改为 `url(./iconfont/iconfont.woff` 和 `url(./iconfont/iconfont.ttf`。
+
+### link 到本地
+
+link 到本地后，其它项目可以通过 link 本项目直接 import 使用
+
+```
+cd es
+npm link
+```

package/commitlint.config.js

@@ -0,0 +1,21 @@
+const OFF_NUM = 0;
+const ERROR_NUM = 2;
+
+module.exports = {
+  extends: ['@commitlint/config-angular'],
+  rules: {
+    'type-enum': [ERROR_NUM, 'always', [
+      'feat', // 新功能（feature）
+      'fix', // 修补bug
+      'style', // 样式（不影响代码运行的变动）
+      'refactor', // 重构（即不是新增功能，也不是修改bug的代码变动）
+      'test', // 增加测试
+      'chore', // 构建过程或辅助工具的变动
+      'delete', // 删除内容
+      'doc', // 文档类修改
+    ]],
+    'subject-full-stop': [OFF_NUM, 'never'],
+    'subject-case': [OFF_NUM, 'never']
+  }
+
+};

package/docs/index.md

@@ -0,0 +1,21 @@
+---
+hero:
+  title: design
+  desc: design site example
+  actions:
+    - text: Getting Started
+      link: /components
+features:
+  - icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png
+    title: Feature 1
+    desc: Balabala
+  - icon: https://gw.alipayobjects.com/zos/bmw-prod/d60657df-0822-4631-9d7c-e7a869c2f21c/k79dmz3q_w126_h126.png
+    title: Feature 2
+    desc: Balabala
+  - icon: https://gw.alipayobjects.com/zos/bmw-prod/d1ee0c6f-5aed-4a45-a507-339a4bfe076c/k7bjsocq_w144_h144.png
+    title: Feature 3
+    desc: Balabala
+footer: Open-source MIT Licensed | Copyright © 2020<br />Powered by [dumi](https://d.umijs.org)
+---
+
+## Hello design!

package/jest/setupTests.js

@@ -0,0 +1 @@
+jest.mock('../src/Icon/iconfont/iconfont.js', () => {});

package/lib/Button/demo/Icon/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Button/demo/Icon/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+require("./index.less");
+
+var _Icon = _interopRequireDefault(require("../../../Icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = function _default() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-button-demo"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "primary",
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "add",
+      size: 20
+    })
+  }, "Search"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "secondary",
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "add",
+      size: 20
+    })
+  }, "Search"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "text",
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "add",
+      size: 20
+    })
+  }, "Search"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "danger",
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "add",
+      size: 20
+    })
+  }, "Search"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "link",
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "add",
+      size: 20
+    })
+  }, "Search"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "add",
+      size: 20
+    })
+  }), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    shape: 'circle',
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "add",
+      size: 20
+    })
+  }), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    shape: 'circle'
+  }, "S"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    size: 'small',
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "add",
+      size: 20
+    })
+  }), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    shape: 'circle',
+    size: "large",
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      type: "add",
+      size: 20
+    })
+  }), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    shape: 'circle'
+  }, "M"));
+};
+
+exports.default = _default;

package/lib/Button/demo/Icon/index.less

@@ -0,0 +1,6 @@
+.ald-button-demo {
+  .ant-btn {
+    margin-right: 8px;
+    margin-bottom: 12px;
+  }
+}

package/lib/Button/demo/basic/index.d.ts

@@ -0,0 +1,4 @@
+import '../../style/index.less';
+import './index.less';
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Button/demo/basic/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/radio/style");
+
+var _radio = _interopRequireDefault(require("antd/es/radio"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+require("../../style/index.less");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var _default = function _default() {
+  var _React$useState = _react.default.useState('default'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      size = _React$useState2[0],
+      setSize = _React$useState2[1];
+
+  var handleSizeChange = function handleSizeChange(e) {
+    setSize(e.target.value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'ald-button-demo'
+  }, /*#__PURE__*/_react.default.createElement(_radio.default.Group, {
+    value: size,
+    onChange: handleSizeChange
+  }, /*#__PURE__*/_react.default.createElement(_radio.default.Button, {
+    value: "small"
+  }, "Small"), /*#__PURE__*/_react.default.createElement(_radio.default.Button, {
+    value: 'default'
+  }, "Default"), /*#__PURE__*/_react.default.createElement(_radio.default.Button, {
+    value: "large"
+  }, "Large")), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "primary",
+    size: size
+  }, "Primary Button"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "danger",
+    size: size
+  }, "danger Button"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "secondary",
+    size: size
+  }, "secondary Button"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "text",
+    size: size
+  }, "Text Button"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "link",
+    size: size
+  }, "Link Button"));
+};
+
+exports.default = _default;

package/lib/Button/demo/basic/index.less

@@ -0,0 +1,7 @@
+
+.ald-button-demo {
+  .ant-btn {
+    margin-right: 8px;
+    margin-top: 12px;
+  }
+}

package/lib/Button/demo/disable/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Button/demo/disable/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = function _default() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-button-demo"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "primary",
+    disabled: true
+  }, "primary disable"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "secondary",
+    disabled: true
+  }, "secondary disable"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "text",
+    disabled: true
+  }, "text disable"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "danger",
+    disabled: true
+  }, "danger disable"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    type: "link",
+    disabled: true
+  }, "link disable"));
+};
+
+exports.default = _default;

package/lib/Button/demo/href/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Button/demo/href/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = function _default() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-button-demo"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    href: "https://www.aloudata.com/"
+  }, "aloudata"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    href: "https://www.aloudata.com/",
+    target: "_blank"
+  }, "target _blank aloudata"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    href: "https://www.aloudata.com/",
+    target: "_self"
+  }, "target _self aloudata"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    target: "_blank"
+  }, " \u65E0href target _blank"));
+};
+
+exports.default = _default;

package/lib/Button/demo/loading/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare const _default: () => JSX.Element;
+export default _default;

package/lib/Button/demo/loading/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _aloudataDesign = require("@aloudata/aloudata-design");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var _default = function _default() {
+  var _React$useState = _react.default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      loading = _React$useState2[0],
+      setLoading = _React$useState2[1];
+
+  var handleChange = function handleChange(e) {
+    setLoading(true);
+    setTimeout(setLoading.bind(false), 3000);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "ald-button-demo"
+  }, /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    loading: true
+  }, "loading"), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    loading: true
+  }), /*#__PURE__*/_react.default.createElement(_aloudataDesign.Button, {
+    loading: loading,
+    onClick: handleChange
+  }, "\u70B9\u51FB\u63D0\u4EA4"));
+};
+
+exports.default = _default;

package/lib/Button/demo/loading/index.less

@@ -0,0 +1,6 @@
+.ald-button-demo {
+  .ant-btn {
+    margin-right: 8px;
+    margin-bottom: 12px;
+  }
+}

package/lib/Button/index.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import './style';
+import type { ButtonProps as AntdButtonProps } from 'antd/lib/button';
+export declare type ButtonType = 'primary' | 'secondary' | 'danger' | 'text' | 'link';
+export declare type Size = 'small' | 'default' | 'large';
+export interface IButtonProps extends Omit<AntdButtonProps, 'type' | 'size' | 'danger' | 'shape' | 'icon' | 'href' | 'target' | 'onClick' | 'loading'> {
+    /**
+     * @description 类型
+     * @type 'primary' | 'secondary' | 'danger' | 'text' | 'link'
+     * @default primary
+     */
+    type?: ButtonType;
+    /**
+     * @description 尺寸
+     * @type 'small' | 'default' | 'large'
+     * @default large
+     */
+    size?: Size;
+    /**
+     * @description 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @description 设置按钮的图标组件
+     */
+    icon?: React.ReactNode;
+    shape?: 'circle' | 'default';
+    /**
+     * @description 指定此属性，点击行为和a链接一致
+     */
+    href?: string;
+    /**
+     * @description 相当于 a 链接的 target 属性，href 存在时生效
+     */
+    target?: string;
+    /**
+     * @description 点击按钮时的回调
+     */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /**
+     * @description 设置按钮进入载入状态
+     * @default false
+     */
+    loading?: boolean | {
+        delay?: number;
+    };
+}
+declare function Button(props: IButtonProps): JSX.Element;
+export default Button;