0.0.5 • Published 5 months ago
geesui v0.0.5
GeesUI
即时设计前端组件库
安装
# 通过 npm
npm install geesui
# 通过 yarn
yarn add geesui
使用
以 Button 组件为例。
import { Button } from 'geesui';
function Demo(props) {
return <Button {...props}>Hello Gees</Button>;
}
开发
# 克隆仓库到本地机器上(最好通过 ssh)
$ git clone git@gitlab.js.design:js-frontend/fe-geesui.git
# 安装依赖
$ yarn install
# 本地启动文档
$ yarn start
# 组件库构建
$ yarn run build
# 文档构建
$ yarn run docs:build
# 检查项目是否存在潜在的问题
$ yarn run doctor
主题定制
geesui
沿用 Ant Design
的主题配置方式,通过将 theme
等配置项传入 ConfigProvider
组件中来实现组件部分样式的自定义,详情可见 Antd 主题定制
全局主题 token
组件的全局 token
目前放到了 src/styles/global.css
中,可供参考。
由于 jsdesign-base 系统中区分了浅色/深色模式,因此在 token
样式文件中,同一类型 token
最好写两套
在即时设计 - 主站中调试组件库
- 进入 GeesUI 项目根目录,执行
yarn link
cd /path/to/fe-geesui && yarn link
- 进入 jsdesign-base 项目根目录,执行
yarn link geesui
cd /path/to/jsdesign-base && yarn link "geesui"
- 在 jsdesign-base 项目中通过
npm
链接react
和react-dom
,防止项目中同时存在两份react
相关依赖
# in jsdesign-base
sudo npm link /path/to/fe-geesui/node_moudles/react
sudo npm link /path/to/fe-geesui/node_moudles/react-dom
- 启动 jsdesign-base
# in jsdesign-base
yarn start
注意:在调试完组件库代码后,重新回到 fe-geesui 中启动项目时可能需加 sudo 前缀
发布 NPM 包
文档部署
0.0.5
5 months ago