@activecollab/components 中文文档教程
ActiveCollab Design System
用 Storybook/React 编写的视觉语言。
Installation
使用包管理器 npm 安装故事书和所有依赖项。
npm install
Start Development Environment
npm run start
Build Storybook for Production
npm run build:story
Build Stories for Production
npm run build:dist
Build SVG icons
将新的 SVG 图标包含到 Storybook 时运行下面的命令并在提交中包含新生成的文件/图标。
npm run build:icons
Usage
图标与包含的 svg 名称相同。
people.svg 就是people。 在图标组件上查看更多信息。
<Icon name="name" />
Run Tests
npm run test
Update Tests
npm run test -- -u
Generate Code Coverage
npm run test:cov
Clean all dist folders (If needed)
npm run clean
Naming conventions
Components:
Upper Camel case, with upper first letter.
Example: DateStepper
Props:
Camel case.
Example: shouldDisplay
Tests:
With test suffix.
Example: DateStepper.test
Contributing
欢迎请求请求。 对于重大更改，请先打开一个问题来讨论您想要更改的内容。
请确保适当地更新测试。
ByeBye!
ActiveCollab Design System
Visual language written in Storybook/React.
Installation
Use the package manager npm to install storybook and all dependencies.
npm install
Start Development Environment
npm run start
Build Storybook for Production
npm run build:story
Build Stories for Production
npm run build:dist
Build SVG icons
When including new SVG icons to Storybook run command below and include new generated files/icons in commit.
npm run build:icons
Usage
Icon is same as included svg name.
people.svg is just people. Check more on Icon Component.
<Icon name="name" />
Run Tests
npm run test
Update Tests
npm run test -- -u
Generate Code Coverage
npm run test:cov
Clean all dist folders (If needed)
npm run clean
Naming conventions
Components:
Upper Camel case, with upper first letter.
Example: DateStepper
Props:
Camel case.
Example: shouldDisplay
Tests:
With test suffix.
Example: DateStepper.test
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
