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 [email protected]: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 最好写两套

在即时设计 - 主站中调试组件库

1. 进入 GeesUI 项目根目录，执行 yarn link

cd /path/to/fe-geesui && yarn link

2. 进入 jsdesign-base 项目根目录，执行 yarn link geesui

cd /path/to/jsdesign-base && yarn link "geesui"

3. 在 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

4. 启动 jsdesign-base

# in jsdesign-base
yarn start

注意：在调试完组件库代码后，重新回到 fe-geesui 中启动项目时可能需加 sudo 前缀

发布 NPM 包

文档部署