ant-design / antd-token-previewer

Ant Design

An enterprise-class UI design language and React UI library.

Changelog · Report Bug · Request Feature · English · 中文

✨ Features

• 🌈 Enterprise-class UI designed for web applications.
• 📦 A set of high-quality React components out of the box.
• 🛡 Written in TypeScript with predictable static types.
• ⚙️ Whole package of design resources and development tools.
• 🌍 Internationalization support for dozens of languages.
• 🎨 Powerful theme customization based on CSS-in-JS.

🖥 Environment Support

• Modern browsers
• Server-side Rendering
• Electron

Edge	Firefox	Chrome	Safari	Electron
Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

📦 Install

npm install antd

yarn add antd

pnpm add antd

🔨 Usage

import { Button, DatePicker } from 'antd';

export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
);

🔗 Links

• Home page
• Components Overview
• Ant Design Pro
• Change Log
• rc-components
• Mobile UI
• Mini Program UI
• Ant Design Pro Components
• Ant Design Charts
• Ant Design Icons
• Ant Design Colors
• Landing Pages
• Motion
• Scaffold Market
• Developer Instruction
• Versioning Release Note
• FAQ
• CodeSandbox Template for bug reports
• Customize Theme
• How to Apply for Being A Collaborator

⌨️ Development

Use Gitpod, a free online dev environment for GitHub.

Or clone locally:

$ git clone [email protected]:ant-design/ant-design.git
$ cd ant-design
$ npm install
$ npm start

Open your browser and visit http://127.0.0.1:8001 , see more at Development.

🤝 Contributing

Let's build a better antd together.

We welcome all contributions. Please read our Contributing Guide first. You can submit any ideas as Pull Requests or as GitHub Issues. If you'd like to improve code, check out the Development Instructions and have a good time! :)

If you are a collaborator, please follow our Pull Request Principle to create a Pull Request with our Pull Request Template.

❤️ Sponsors and Backers

antd-token-previewer's Issues

ColorPicker 需求

1. 需要能手动输入。
2. 现在拖动色彩后界面会飘移变化。

Add a section to define variables

The theme editor works great, but maintaining a theme can become hard for people who want more control over the components.
Imagine the following case:

1. A designer updates all color properties to match a color palette.
2. The new theme is reviewed and they want darker colors. Hence a new color palette is chosen.
3. The designer has to go through the whole interface and update every single color property 😭

I propose to add a section to define custom variables. When defined, variables will be then converted to CSS custom properties and could be used to define the value of a property in the theme.

[Feature] 主题编辑器 2.0

• 顶部栏（全局）
  • 切换全局 token 和组件 token
  • 集成主题配置能力（修改 JSON，参考 antd 官网目前实现）@heiyu4585 #173
  • 显示修改过的 token 数量 @heiyu4585 #173
• Global Token 面板升级
  • 侧边栏顶部 Tabs 使用 Anchor 替代 @Yuiai01
  • 面板样式升级 @Yuiai01
  • demo 使用 Anchor 展示
  • 修改过的 token高亮
• Component Token 面板
  • 提取 antd demo 及其 meta 信息 @MadCcc
  • hover 关联的 token 高亮相关样式 @MadCcc
  • 组件 token 侧边栏

---

• *自定义算法组件
• *classNames 配置能力

Can't install dependencies correctly

npm i

throw an error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   dev react@"^18.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.14.0" from [email protected]
npm ERR! node_modules/react-test-renderer
npm ERR!   dev react-test-renderer@"^16.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/bytedance/.npm/_logs/2023-08-17T09_38_37_836Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/bytedance/.npm/_logs/2023-08-17T09_38_37_836Z-debug-0.log

fix with

npm i --force
npm run start

> [email protected] start
> dumi dev

Starting the development server...

● Webpack █████████████████████████ building (10%) 1/2 modules 1 active
 babel-loader › src/.umi/umi.ts

node:internal/crypto/hash:69
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:69:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports.__webpack_modules__.57442.module.exports (/Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:135907:62)
    at NormalModule._initBuildHash (/Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:109317:16)
    at /Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:109352:10
    at /Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:109223:13
    at /Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:61151:11
    at /Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:61017:18
    at context.callback (/Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:60895:13)
    at /Users/bytedance/dev/antd/antd-token-previewer/node_modules/@umijs/deps/compiled/babel-loader/index.js:1:130029 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.17.0
➜  antd-token-previewer git:(fix/shadow-error) ✗ 

Refactor Plan

Motivation

Currently [email protected] has been released for a while, from a simple component to a complex one with a lot of demos within, which make this component too large with nearly 400kb after gzip.

And for other reasons like package name: #181 , it is needed to split this repo and make theme-editor dependent.

What to do

1. Split this repo into 2 or more packages: @ant-design/theme-editor @ant-design/token-previewer and possible demo package.
2. Use Suspense and React.lazy to split demos after bundled.
3. Use antd ColorPicker only (Remove react-colorful) and optimize debounced theme change.
4. To be supplemented

Move to @ant-design/antd-theme-previewer