重要

由于公共组件库无CICD流程，是采用内部npm包发布的形式，且在单元测试和集成测试不完备的基础上，每次依赖包的升级，需仔细检查storybook和npm publish是否正常

组件的使用

• ActionButton
• CommonModal
• CommonSelect
• CustomTransfer
• OverflowTooltip
• DateRangePicker
• RangePickerWithUTC/CompareRangePicker/RangePicker/CompareWithRangePicker
• UploadModal

TODO

跟随KOL项目的开发，组件迁移顺序

1. UploadModal KOL项目信息管理模块很多地方有使用到上传组件，优先处理。
2. CustomTransform系列组件
3. Table组件
4. 筛选项组件

BI项目中的common/utils/request等相关功能通用模块因为时间关系，暂不迁移

TODO: 将组件storybook发布至内网线上

SVG文件的处理

svg文件统一放置在src/assets目录中，变更时，运行pnpm run build:icons命令，将.svg文件封装成React组件tsx文件

pnpm run build构建时会自动将IconXXX.tsx文件构建成对应的esm格式js文件

TODO: sprite形式的svg引用涉及按需引入的话题，暂时不变。后续具体可参考iconfont网站。

Storybook

运行pnpm run storybook会自动打开http://localhost:6006/展示组件效果

storybook的发布

使用公司内部ks平台部署

mac机本地构建

docker buildx build --platform linux/amd64 --load -t harbor.k8s-internal.moonton.net/kol/gams_ui:latest .
docker push harbor.k8s-internal.moonton.net/kol/gams_ui:latest

以下方式已作废

1. 运行pnpm run build-storybook构建静态文件

2. 打包静态文件

tar -czvf storybook.tar.gz storybook-static

3. 上传静态文件 kubeconfig.yaml为ks系统下载的k8s配置文件 static-website-xxxx为静态文件服务器pod名称，上传至nginx目录

kubectl --kubeconfig ~/Downloads/kubeconfig.yaml cp storybook.tar.gz static-website-5796895c6f-zdf55:/usr/share/nginx/

4. 登录pod，解压tar包 在nginx目录中执行以下命令，解压tar包至html目录

tar -xzvf storybook.tar.gz  -C html --strip-components=1