Coder Social home page Coder Social logo

antd-token-previewer's Issues

ColorPicker 需求

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

图片

图片

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

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.

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) ✗

[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 配置能力

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.