@aloudata/aloudata-design 0.1.0-beta1

package/lib/style/themes/default/themeColor.less

@@ -0,0 +1,259 @@
+/**
+*中性浅色背景 Neutral Light
+* 主要用于文字颜色
+**/
+@NL0: #121212;
+@NL97: fade(@NL0, 3%);
+@NL95: fade(@NL0, 5%);
+@NL90: fade(@NL0, 10%);
+@NL80: fade(@NL0, 20%);
+@NL70: fade(@NL0, 30%);
+@NL60: fade(@NL0, 40%);
+@NL50: fade(@NL0, 50%);
+@NL40: fade(@NL0, 60%);
+@NL30: fade(@NL0, 70%);
+@NL20: fade(@NL0, 80%);
+@NL10: fade(@NL0, 90%);
+
+/**
+*中性深色背景 Neutral Dark
+* 主要用于文字颜色
+**/
+@ND0: #FFFFFF;
+@ND97: fade(@ND0, 3%);
+@ND95: fade(@ND0, 5%);
+@ND90: fade(@ND0, 10%);
+@ND80: fade(@ND0, 20%);
+@ND70: fade(@ND0, 30%);
+@ND60: fade(@ND0, 40%);
+@ND50: fade(@ND0, 50%);
+@ND40: fade(@ND0, 60%);
+@ND30: fade(@ND0, 70%);
+@ND20: fade(@ND0, 80%);
+@ND10: fade(@ND0, 90%);
+
+/**
+* 品牌色 Brand
+* 用作主操作强调、文字链、品牌传递
+**/
+@B10: #00127B;
+@B20: #1029BC;
+@B30: #2944D7;
+@B40: #435CF0;
+@B50: #6077FF;
+@B60: #7F92FF;
+@B70: #9FADFF;
+@B80: #BDC9FF;
+@B90: #DFE3FE;
+@B95: #EFF1FF;
+@B98: #F8F9FF;
+
+/**
+* 辅助A Secondary A
+* 表达完成、成功
+**/
+@SA10: #00270F;
+@SA20: #024F20;
+@SA30: #007830;
+@SA40: #059F41;
+@SA50: #08C552;
+@SA60: #1BDE6D;
+@SA70: #35F886;
+@SA80: #70FFAB;
+@SA90: #B8FFD5;
+@SA95: #DBFFEA;
+@SA98: #EFFFF5;
+
+/**
+* 辅助B Secondary B
+* 表达提醒、警告
+**/
+@SB10: #261600;
+@SB20: #542B00;
+@SB30: #7E4100;
+@SB40: #A85700;
+@SB50: #D26E00;
+@SB60: #F48500;
+@SB70: #FFA000;
+@SB80: #FFBF5B;
+@SB90: #FFDEB0;
+@SB95: #FFF0D9;
+@SB98: #FFF8EE;
+
+/**
+* 辅助C Secondary C
+* 表达错误、失败
+**/
+@SC10: #550005;
+@SC20: #AF0001;
+@SC30: #EC0011;
+@SC40: #FF0033;
+@SC50: #FF2755;
+@SC60: #FF5B78;
+@SC70: #FF879A;
+@SC80: #FFAFBB;
+@SC90: #FFD7DE;
+@SC95: #FFEBEE;
+@SC98: #FFF6F7;
+
+/**
+* 背景色 Background
+* 主要用于背景色
+**/
+@BG0: #121212;
+@BG10: #2A2A2A;
+@BG20: #414141;
+@BG30: #595959;
+@BG40: #717171;
+@BG50: #88888B;
+@BG60: #A0A0A0;
+@BG70: #B7B7B7;
+@BG80: #D0D0D0;
+@BG90: #E7E8E8;
+@BG95: #F3F3F3;
+@BG97: #F8F8F8;
+@BG100: #FFFFFF;
+
+/**
+* 品牌背景 Brand Background
+* 品牌色衍生灰调背景
+**/
+@BBG10: #061B3B;
+@BBG15: #112645;
+@BBG20: #203555;
+@BBG30: #3B4F6E;
+@BBG40: #536788;
+@BBG50: #6C82A3;
+@BBG60: #869BBB;
+@BBG70: #A0B5D5;
+@BBG80: #BACDEE;
+@BBG90: #D7E7FE;
+@BBG95: #EBF3FF;
+@BBG97: #F3F8FF;
+@BBG98: #F7F8FF;
+
+/***
+* 黑白
+***/
+@white:#FFFFFF;
+@black:#121212;
+
+/***
+* 图片
+***/
+@imageholder: fade(#999898, 30%);
+@mate: fade(#000000, 50%);
+
+/***
+* 投影
+***/
+@shadow-option: 0 1px 1px rgba(0, 0, 0, 0.12);
+@shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1), 0 2px 1px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.08);
+@shadow-actionsheet: 0 3px 5px rgba(0, 0, 0, 0.1), 0 1px 18px rgba(0, 0, 0, 0.06), 0 6px 10px rgba(0, 0, 0, 0.08);
+@shadow-notification: 0 11px 15px rgba(0, 0, 0, 0.1), 0 9px 46px rgba(0, 0, 0, 0.08), 0 24px 38px rgba(0, 0, 0, 0.04);
+
+// 用css module的能力，将less变量输出给js，供js文件中使用
+:export {
+  NL0: @NL0;
+  NL97: @NL97;
+  NL95: @NL95;
+  NL90: @NL90;
+  NL80: @NL80;
+  NL70: @NL70;
+  NL60: @NL60;
+  NL50: @NL50;
+  NL40: @NL40;
+  NL30: @NL30;
+  NL20: @NL20;
+  NL10: @NL10;
+  ND0: @ND0;
+  ND97: @ND97;
+  ND95: @ND95;
+  ND90: @ND90;
+  ND80: @ND80;
+  ND70: @ND70;
+  ND60: @ND60;
+  ND50: @ND50;
+  ND40: @ND40;
+  ND30: @ND30;
+  ND20: @ND20;
+  ND10: @ND10;
+  B10: @B10;
+  B20: @B20;
+  B30: @B30;
+  B40: @B40;
+  B50: @B50;
+  B60: @B60;
+  B70: @B70;
+  B80: @B80;
+  B90: @B90;
+  B95: @B95;
+  B98: @B98;
+  SA10: @SA10;
+  SA20: @SA20;
+  SA30: @SA30;
+  SA40: @SA40;
+  SA50: @SA50;
+  SA60: @SA60;
+  SA70: @SA70;
+  SA80: @SA80;
+  SA90: @SA90;
+  SA95: @SA95;
+  SA98: @SA98;
+  SB10: @SB10;
+  SB20: @SB20;
+  SB30: @SB30;
+  SB40: @SB40;
+  SB50: @SB50;
+  SB60: @SB60;
+  SB70: @SB70;
+  SB80: @SB80;
+  SB90: @SB90;
+  SB95: @SB95;
+  SB98: @SB98;
+  SC10: @SC10;
+  SC20: @SC20;
+  SC30: @SC30;
+  SC40: @SC40;
+  SC50: @SC50;
+  SC60: @SC60;
+  SC70: @SC70;
+  SC80: @SC80;
+  SC90: @SC90;
+  SC95: @SC95;
+  SC98: @SC98;
+  BG0: @BG0;
+  BG10: @BG10;
+  BG20: @BG20;
+  BG30: @BG30;
+  BG40: @BG40;
+  BG50: @BG50;
+  BG60: @BG60;
+  BG70: @BG70;
+  BG80: @BG80;
+  BG90: @BG90;
+  BG95: @BG95;
+  BG97: @BG97;
+  BG100: @BG100;
+  BBG10: @BBG10;
+  BBG15: @BBG15;
+  BBG20: @BBG20;
+  BBG30: @BBG30;
+  BBG40: @BBG40;
+  BBG50: @BBG50;
+  BBG60: @BBG60;
+  BBG70: @BBG70;
+  BBG80: @BBG80;
+  BBG90: @BBG90;
+  BBG95: @BBG95;
+  BBG97: @BBG97;
+  BBG98: @BBG98;
+  WHITE: @white;
+  BLACK: @black;
+  IMAGE_HOLDER: @imageholder;
+  MATE: @mate;
+  SHADOW_OPTION: @shadow-option;
+  SHADOW_CARD: @shadow-card;
+  SHADOW_ACTIONSHEET: @shadow-actionsheet;
+  SHADOW_NOTIFICATION: @shadow-notification;
+}

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@aloudata/aloudata-design",
+  "version": "0.1.0-beta1",
+  "scripts": {
+    "start": "dumi dev",
+    "docs:build": "dumi build",
+    "docs:deploy": "gh-pages -d docs-dist",
+    "build": "father-build",
+    "lint": "npm run stylelint && npm run lint-js ",
+    "lint-js": "eslint src/",
+    "stylelint": "npx stylelint ./src",
+    "deploy": "npm run docs:build && npm run docs:deploy",
+    "prettier": "prettier --write \"**/*.{js,jsx,tsx,ts,less,md,json}\"",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage",
+    "prepublishOnly": "npm run build"
+  },
+  "module": "es/index.js",
+  "typings": "es/index.d.ts",
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "npm run lint && npm run stylelint && npm run test"
+    }
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "@ant-design/icons": "^4.7.0",
+    "@types/react-truncate": "^2.3.4",
+    "antd": "^4.18.6",
+    "classnames": "^2.3.1",
+    "lodash": "^4.17.21",
+    "rc-menu": "^9.3.2",
+    "rc-overflow": "^1.2.3",
+    "rc-trigger": "^5.2.10",
+    "rc-virtual-list": "^3.4.2",
+    "react": "^16.12.0 || ^17.0.0",
+    "react-dom": "^16.12.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@aloudata/eslint-config-base": "^0.0.6",
+    "@commitlint/cli": "^12.1.4",
+    "@commitlint/config-angular": "^12.1.4",
+    "@testing-library/jest-dom": "^5.15.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/jest": "^27.0.3",
+    "@types/lodash": "^4.14.178",
+    "@umijs/fabric": "^2.8.1",
+    "@umijs/test": "^3.0.5",
+    "babel-plugin-import": "^1.13.3",
+    "dumi": "^1.1.0",
+    "eslint": "^7.27.0",
+    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "father-build": "^1.17.2",
+    "gh-pages": "^3.0.0",
+    "husky": "^3.0.9",
+    "lint-staged": "^10.0.7",
+    "postcss": "8.4.6",
+    "prettier": "^2.2.1",
+    "stylelint": "^14.5.3",
+    "stylelint-config-standard": "^24.0.0",
+    "yorkie": "^2.0.0"
+  },
+  "jest": {
+    "setupFiles": [
+      "./jest/setupTests.js"
+    ]
+  }
+}

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

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

package/src/Button/demo/Icon/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Button } from '@aloudata/aloudata-design';
+import './index.less';
+import Icon from '../../../Icon'
+export default () => {
+  return (
+    <div className="ald-button-demo">
+      <Button type="primary" icon={<Icon type="add" size={20} />}>
+        Search
+      </Button>
+      <Button type="secondary" icon={<Icon type="add" size={20} />}>
+        Search
+      </Button>
+      <Button type="text" icon={<Icon type="add" size={20} />}>
+        Search
+      </Button>
+      <Button type="danger" icon={<Icon type="add" size={20} />}>
+        Search
+      </Button>
+      <Button type="link" icon={<Icon type="add" size={20} />}>
+        Search
+      </Button>
+      <br />
+      <Button icon={<Icon type="add" size={20} />}>
+      </Button>
+      <Button shape='circle' icon={<Icon type="add" size={20} />}>
+      </Button>
+      <Button shape='circle'>
+        S
+      </Button>
+      <br />
+      <Button size='small' icon={<Icon type="add" size={20} />}>
+      </Button>
+      <Button shape='circle' size="large" icon={<Icon type="add" size={20} />}>
+      </Button>
+      <Button shape='circle'>
+        M
+      </Button>
+    </div>
+  )
+}

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

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

package/src/Button/demo/basic/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button } from '@aloudata/aloudata-design';
+import '../../style/index.less';
+import { Radio } from 'antd';
+import './index.less';
+export default () => {
+  const [size, setSize] = React.useState('default');
+  const handleSizeChange = (e: any) => {
+    setSize(e.target.value);
+  }
+  return (
+    <div className='ald-button-demo'>
+      <Radio.Group value={size} onChange={handleSizeChange}>
+        <Radio.Button value="small">Small</Radio.Button>
+        <Radio.Button value='default'>Default</Radio.Button>
+        <Radio.Button value="large">Large</Radio.Button>
+      </Radio.Group>
+      <br />
+      <Button type="primary" size={size}>Primary Button</Button>
+      <Button type="danger" size={size}>danger Button</Button>
+      <Button type="secondary" size={size}>secondary Button</Button>
+      <Button type="text" size={size}>Text Button</Button>
+      <Button type="link" size={size}>Link Button</Button>
+    </div>
+  )
+};

package/src/Button/demo/disable/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button } from '@aloudata/aloudata-design';
+import './index.less';
+
+export default () => {
+
+  return (
+    <div className="ald-button-demo">
+      <Button type="primary" disabled>primary disable</Button>
+      <Button type="secondary" disabled>secondary disable</Button>
+      <Button type="text" disabled>text disable</Button>
+      <Button type="danger" disabled>danger disable</Button>
+      <Button type="link" disabled>link disable</Button>
+      </div>
+  )
+}

package/src/Button/demo/href/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button } from '@aloudata/aloudata-design';
+
+export default () => {
+
+  return (
+    <div className="ald-button-demo">
+      <Button href="https://www.aloudata.com/">aloudata</Button>
+      <Button href="https://www.aloudata.com/" target="_blank">target _blank aloudata</Button>
+      <Button href="https://www.aloudata.com/" target="_self">target _self aloudata</Button>
+      <Button target="_blank"> 无href target _blank</Button>
+    </div>
+  )
+}

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

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

package/src/Button/demo/loading/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Button } from "@aloudata/aloudata-design";
+import './index.less'
+
+
+export default () => {
+  const [loading, setLoading] = React.useState(false);
+  const handleChange = (e: any) => {
+    setLoading(true);
+    setTimeout(setLoading.bind(false), 3000)
+  }
+
+  return (
+    <div className="ald-button-demo">
+      <Button loading={true}>loading</Button>
+      <Button loading={true}></Button>
+      <Button loading={loading} onClick={handleChange}>点击提交</Button>
+    </div>
+
+  )
+}

package/src/Button/index.md

@@ -0,0 +1,25 @@
+---
+# nav:
+#   title: 组件
+#   path: /components
+title: Button 按钮
+group:
+  title: 组件
+---
+
+## Button 按钮
+
+按钮用于开始一个即时操作。
+
+## 代码演示
+
+<code src="./demo/basic" title="基础用法" description="不同尺寸不同类型的按钮">
+<code src="./demo/icon" title="带图标" description="纯图标和带前缀图标">
+<code src="./demo/loading" title="加载中" description="纯图标和带前缀图标">
+<code src="./demo/disable" title="禁用状态">
+<code src="./demo/href" title="链接" description="target属性在有href时生效">
+
+<API />
+
+支持原生 button 的其他所有属性。
+

package/src/Button/index.test.tsx

@@ -0,0 +1,58 @@
+import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Button from './index';
+import { SearchOutlined } from '@ant-design/icons';
+
+describe('Button ', () => {
+  it('render Button with type=link', () => {
+    const type = 'link';
+    render(<Button type={type}>{type}</Button>);
+    expect(document.querySelector('.ant-btn-link')).not.toBeNull();
+  });
+
+  it('render Button with type=danger', () => {
+    const type = 'danger';
+    render(<Button type={type}>{type}</Button>);
+    expect(document.querySelector('.ant-btn-dangerous')).not.toBeNull();
+  });
+
+  it('render Button size=small', () => {
+    const size = 'small';
+    render(<Button size={size} className="ald-btn-sm">{size}</Button>);
+    expect(document.querySelector('.ald-btn-sm')).toHaveClass('ant-btn-sm');
+  });
+
+  it('render Button disable', () => {
+    render(<Button disabled className="ald-btn-disable">disabled</Button>);
+    expect(document.querySelector('.ald-btn-disable')).toBeDisabled();
+  });
+
+  it('render Button shape=circle', () => {
+    render(<Button shape="circle" className="ald-btn-circle">circle</Button>);
+    expect(document.querySelector('.ald-btn-circle')).toHaveClass('ant-btn-circle');
+  });
+
+  it('render Button icon', () => {
+    render(<Button icon={<SearchOutlined />}>Search</Button>);
+    expect(document.querySelector('.anticon-search')).not.toBeNull();
+  });
+
+  it('render Button loading', () => {
+    render(<Button loading>loading</Button>);
+    expect(document.querySelector('.anticon-loading')).not.toBeNull();
+  });
+
+  it('render Button href', () => {
+    render(<Button href="https://www.aloudata.com/" className="ald-btn-href">aloudata</Button>);
+    expect(document.querySelector('.ald-btn-href')).toHaveAttribute('href', 'https://www.aloudata.com/');
+  });
+
+  it('render Button onClick', () => {
+    const onClick = jest.fn();
+    render(<Button onClick={onClick}>onClick</Button>);
+    const button = screen.queryByRole('button');
+    fireEvent.click(button!);
+    expect(onClick).toBeCalled();
+  });
+});