@datlas/design NPM

MDT DESIGN

Install

npm install @datlas/design
yarn add @datlas/design

Usage

import { loadTheme } from '@datlas/design/esm/components/style/themes';
import { ThemeEnum } from '@datlas/design/esm/components/style/context';
import Button from '@datlas/design/esm/components/button';

loadTheme(ThemeEnum.dark);

export default () => {
  <Button type="primary">button</Button>
}

可以添加 webpack alias 使引用路径变短

addWebpackAlias({ ["@@"]: path.resolve('./node_modules/@datlas/design/esm') })

tsconfig:

{
  "compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "@/*": ["src/*"],
    "@@/*": ["./node_modules/@datlas/design/esm/*"]
  }
}

使用时

import Button from '@@/components/button';

可能遇到的问题

d.ts 报错，请添加 ignore-loader

config.module.rules.push({
  test: /\.d\.ts$/,
  loader: 'ignore-loader'
});

react 多实例问题 https://github.com/facebook/react/issues/13991
```
addWebpackAlias({ react: path.resolve('./node_modules/react')})
```
dayjs使用报错： Uncaught TypeError: xxxx is not a function
由于组件库项目中使用到 dayjs 做一些轻量级的时间计算，所以外层在将引入 dayjs 时会有版本不同而造成方法缺失的问题，组件库提供的解决方案如下：
1. 请将本地的 dayjs 保持和组件库版本一致
2. 不方便改版本的话，可以使用dayjs提供的插件支持，将缺失的自行extend到本地项目中，使用方法详见
  例如：
```
  import isoWeek from 'dayjs/plugin/isoWeek';

  dayjs.extend(isoWeek);
```

本地开发

storybook开发，编写story
```
yarn start
```
link到项目开发，在组件项目执行
```
yarn dev
yarn link
```
在项目中执行 yarn link "@datlas/design"
快速生成组件
```
yarn gc 组件名
```

框架推荐工具及插件

基于 Storybook V6.2

@storybook/preset-create-react-app 此预设使用CRA的Webpack / Babel配置
storybook-preset-craco 使用craco配置
craco-less 编译less
craco-alias 用于为Webpack和Jest自动生成别名
@storybook/addon-links 用于创建在Storybook中的故事之间导航的链接
storybook-dark-mode 暗模式和亮模式之间切换
@storybook/addon-essentials 精选的插件集
@storybook/addon-postcss Storybook PostCSS预处理器
storybook-addon-react-docgen 生成 Props 属性表
@storybook/addon-a11y UI 可读性检测插件

样式规范

定义color，zindex变量, 后续放开stylelint检查

"sh-waqar/declaration-use-variable": [
  [
    "/color/",
    "z-index"
  ]
]

开发规范

引用路径使用 import from '.' 替换为 import from './index', babel plugin bug
测试文件放在 __tests__ 目录
storybook示例放在 __stories__ 目录
组件 tsx 文件使用首字母大写
文件夹小写，中划线间隔

在某些情况下，您可能希望导出故事和非故事的混合体。例如，导出故事中使用的数据可能会很有用。为此，您可以在默认导出中使用可选字段includeStories和excludeStories配置字段，可以将其设置为字符串数组或正则表达式。按大写字母开头导出故事书，小写字母开头导出数据。

// MyComponent.stories.js

import React from 'react';

import MyComponent from './MyComponent';

import someData from './data.json';

export default {
  title: 'MyComponent',
  component: MyComponent,
  includeStories: /.*Story$/, // 👈 Storybook loads these stories
  excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data
};

export const simpleData = { foo: 1, bar: 'baz' };
export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };

export const SimpleStory = () => <MyComponent data={simpleData} />;
export const ComplexStory = () => <MyComponent data={complexData} />;