oceanbase / oceanbase/oceanbase-design

@oceanbase/codemod Development Plan

Open
#60 1 comment 0 reactions 1 assignee View on GitHub

@dengfuping is already working on this.

Since Jul 28, 2023.

@oceanbase/codemod
Dominant language
TypeScript
Stars
52
Forks
27
Avg merge
1h 20m
Merged PRs (30d)
31

Description

antd 体系迁移到 OBUI

antd => @oceanbase/design

  • antd => @oceanbase/design
  • antd/locale/xxx => @oceanbase/design/locale/xxx
  • antd/es/xxx => @oceanbase/design/es/xxx
  • antd/lib/xxx => @oceanbase/design/lib/xxx
  • @alipay/bigfish/antd => @oceanbase/design

tech-ui => @oceanbase/design

WelcomeCard 等部分组件不支持，需要进行判断

  • @alipay/tech-ui => @oceanbase/ui
  • @alipay/tech-ui/es/xxx => @oceanbase/ui/es/xxx
  • @alipay/tech-ui/lib/xxx => @oceanbase/ui/lib/xxx

pro-components => @oceanbase/ui

  • @ant-design/pro-components => @oceanbase/ui
  • @ant-design/pro-components => @oceanbase/ui/es/xxx
  • @ant-design/pro-components => @oceanbase/ui/lib/xxx

@ant-design/icons => @oceanbase/icons

  • @ant-design/icons => @oceanbase/icons
  • @ant-design/icons/es/xxx => @oceanbase/icons/es/xxx
  • @ant-design/icons/lib/xxx => @oceanbase/icons/lib/xxx

OBUI 内部包迁移到外部包

ob-ui => @oceanbase/design + @oceanbase/ui

  • @alipay/ob-ui => @oceanbase/design
  • @alipay/ob-ui => @oceanbase/ui
  • @alipay/ob-ui/es/xxx => @oceanbase/design/es/xxx
  • @alipay/ob-ui/lib/xxx => @oceanbase/design/lib/xxx
  • @alipay/ob-ui/es/xxx => @oceanbase/ui/es/xxx
  • @alipay/ob-ui/lib/xxx => @oceanbase/ui/lib/xxx

ob-charts => @oceanbase/charts

  • @alipay/ob-charts => @oceanbase/charts

ob-util => @oceanbase/util

  • @alipay/ob-util => @oceanbase/util
  • getTableData => useTableData

不兼容变更处理

  • 不兼容变更需要等社区包 1.0 正式版出来后才能确定。
    • 可以主动修复的，会自动升级到最新用法。
    • 无法主动修复的，则仍然使用原先的内部包作为兼容。

样式迁移

固定样式迁移为 Design Token

  • #f0f2f5 => colorBgLayout
  • #fafafa => colorBgLayout
  • #1890ff 及相关颜色值 => colorInfo
  • #52c41a => colorSuccess
  • #faad14 => colorWarning
  • #ff4d4f => colorError
  • #d9d9d9 => colorBorder
  • #bfbfbf => colorBorder
  • 不规范的颜色值: #F5222D => colorError
  • 不规范的颜色值: #F8636B => colorError
  • 不规范的颜色值: #73d13d => colorSuccess
  • rgba(0, 0, 0, 0.85) & rgba(0,0,0,0.85) & rgba(0, 0, 0, .85) & rgba(0,0,0, .85) => colorText
  • rgba(0, 0, 0, 0.65) & rgba(0,0,0,0.65) & rgba(0, 0, 0, .65) & rgba(0,0,0, .65) => colorTextSecondary
  • rgba(0, 0, 0, 0.45) & rgba(0,0,0,0.45) & rgba(0, 0, 0, .45) & rgba(0,0,0, .45) => colorTextTertiary
  • rgba(0, 0, 0, 0.25) & rgba(0,0,0,0.25) & rgba(0, 0, 0, .25) & rgba(0,0,0, .25)=> colorTextQuaternary
  • rgba(0, 0, 0, 0.2) & rgba(0,0,0,0.2) & rgba(0, 0, 0, .2) & rgba(0,0,0, .2)=> colorFillQuaternary
  • 自定义圆角 2、4、6 => borderRadius & borderRadiusSM
  • 自定义阴影 => boxShadow & boxShadowSecondary
  • 不规范的颜色值: rgba(0, 0, 0, 0.04) & rgba(0,0,0,0.04) & rgba(0, 0, 0, .04) & rgba(0,0,0, .04) => colorBgLayout

Less 变量迁移为 Design Token

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.