youzan/zent

A collection of essential UI components written with React.

Zent ( \ˈzent\ ), a collection of essential UI components written with React.

🇨🇳 访问中文版

Zent ( \ˈzent\ ) is a React component library developed and used at Youzan. Zent provides a collection of essential UI components and lots of useful domain specific components.

We have more than 50 components for now and we're releasing more.

Our goal is making React development faster and simpler.

Features

• High quality React components
• Builtin TypeScript support
• Supports custom themes
• Import JavaScript and styles only if they are used
• Handmade icon font

Supported Environments

• React >= 17
• Modern browsers but not IE
• Supports server-side rendering(SSR)

Required polyfills

• es6.object.assign
• es6.object.is
• es6.string.ends-with
• es6.string.starts-with
• es6.string.includes
• es7.string.trim-left
• es7.string.trim-right
• es6.array.from
• es6.array.of
• es6.array.fill
• es6.array.find
• es6.array.find-index
• es7.array.includes

Install

yarn add zent

# or

npm install zent --save

Documentation

https://youzan.github.io/zent/en/guides/install

Contribution

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Zent.

Send issues and pull requests with your ideas.

License

Project licensed under MIT license, feel free to enjoy and participate in Open Source.

zent's Issues

popover: support auto position for dropdowns

The position algorithm should handle out of screen cases.

zent-input: disabled的时候输入框字体颜色不对

zent-select: 'warning: unknown props' with react v15.4.2 and others..

1. unknown props

2. 外部清空选择之后应恢复显示placeholder

3. disabled 需要增加指针样式

4. search 输入是否在一次 pop 开闭之后仍然保留, 如果保留是否应该加一个清空按钮.

5. tag上的删除按钮, 在点击事件是否冒泡上表现不一致.

Dialog: 定位可能出现0.5 pixel的情况

会导致内容模糊，需要js算一个位置出来

zent-table: column align

需要增加关于列对齐的API

zent-table

box-sizing: border-box;

因为有

width: 100%

utils: add unit tests

Add unit tests for functions/components in zent/src/utils

• WindowEventHandler
• WindowResizeHandler
• findPositionedParent
• getViewportSize
• isPromise
• isBrowser

react 版本是15.4时，console 警告

Warning: Unknown prop text on tag. Remove this prop from the element.
....
Warning: Unknown props alias, cid on tag. Remove these props from the element.
...

popover: trigger isOutside not working

Use isOutside if present

zent-button: link mode 'warning: unknown props' with react v15.4.2

example: 2-link.

button组件component是a的时候props处理有问题

应该和button做类似的过滤，而不是全部丢弃

zent-form: 'warning: unknown props' with react v15.4.2; warning with extral input;

1. unknown props
   

2. example: overview, 在使用目前 react 版本也会出现.
   当额外信息input有输入时.
   

React hot reload in docs

Component level hot reload is not that easy.
Each page is compiled from a Markdown file on the fly.
The layout is written in Vue.

• Replace Vue with React in site
• Remove all Vue related config in webpack config
• Add react-hot-loader

zent-kit: command not found是什么问题

我执行的顺序是这样的：
$ git clone https://github.com/youzan/zent.git
$ cnpm install zent --save
cd zent/
$ npm test
然后就报错了：

./scripts/run-tests.sh
./scripts/run-tests.sh: line 6: zent-kit: command not found
npm ERR! Test failed. See above for more details.

English documentation

Translate Chinese documentations to English.

Need your help!

zent-radio: disabled cursor and text color

指针样式不一致, 以及文字颜色需要调整

dateTimePicker 添加 defaultValue onOpen onClose 方法

zent-checkbox: disabled style not consistent; group disabled logic.

1. cursor style 不一致. 并且 disabled 的 checkbox 文字部分灰度应该有变化.
   

2. 建议: group disabled 的情况下, 允许单个checkbox可用是不是在逻辑/语义上有些不一致..

popover: remove trigger wrapper

Related: facebook/react#2127

form的一些问题

1. form 的 onSubmit 校验不支持一个key对应多value的情况
2. form 无法使用同步提交

是我没有找到 API么？

Why do we run tests on both CircleCI and TravisCI?

CircleCI runs much faster than TravisCI in general, but it is missing a must-have feature: the ability to run tests on the prospective merge of a Github PR.

If CircleCI supports this feature I will remove TravisCI from this project.

zent-button支持传入style

zent-input: 支持type="textarea"

zent-tree remove object.assign package

use zent-utils/lodash/assign

Popover does not allow string/number as its children

Popover: 页面失去焦点后hover trigger不关闭

Add prettier into workflow

Use prettier to enforce code style.

Other projects:

• husky
• lint-staged

sweetalert: support confirm button type configuration

add confirmBtnType

zent-select: disabled的指针样式不对

应该设置成not-allowed状态

doc: use zent source code, not the transpiled code

Dialog: flash on close

If we switch to another tab when closing dialog, it will remain there until we switch back resulting a flash.

popover: support stacked popovers

Use a PopoverManager to controll all popovers' close

New component: NumberInput

Implement NumberInput

table: replace createClass with ES6 class

Implement babel-plugin-zent

Why

We plan to discontinue zent-xxx packages. This plugin helps importing only the part of zent you use. This was the only reason when we first released these zent-xxx packages.

How

• Transform import { Button } from 'zent' to import Button from 'zent/button'.
• (configurable) Error on import Button from 'zent-button'
• (configurable) Error on import * as Zent from 'zent'
• (configurable) Error on const Zent = require('zent')
• Update usage in zent/README.md

zent-tree: logic issues, some style fix

1. disabled为true的节点, 是否还能打开, 以及其子节点是否还能选中
2. 为disabled节点增加一些样式以区分

3. 默认的 clone action 是否应该进行深复制

popover: won't close with disabled element as trigger

Popover won't close when moving out from trigger if the trigger is disabled.

Related issue:

• facebook/react#4251
• react-component/tooltip#18

Workaround: react-component/tooltip#18 (comment)

Add animations to components

Implement an infrastructure to add animations to components.

Republish all packages because of network timeout during npm publish

zent-pagination: example dynamicPageSize 'warning: unknown props' with react v15.4.2

<div>tag

zent-table: example: selection.. disabled 样式问题

在 selection 生效的情况下需要对 disabled 的行应该在样式上加以区分.. 指针样式, 文字颜色..

Why zent-table uses 'flex' instead of 'table' layout?

zent-table中每一行都使用的flex布局，在使用flex的情况下，若果要指定某一行的某一单元格有一个最小宽度，那么整体布局将可能会被破坏（需要做一些hack使column恢复对齐），而使用table不会出现这样的问题，请问是处于什么考虑使用flex替换更直接的table布局呢？

zent-dialog: openDialog支持外部自定义id

可以解决closeDialog在openDialog返回前为定义的问题

Support SSR

There're some direct references to window and document, these should be guarded.

zent-menu: multistage hover

多级菜单(>2)时hover逻辑不正确

Consolidate all sub packages into a mono package

Sub packages bring more troubles than conveniences after we released them.

Maintaining these sub packages does not make much sense since each release is tied with specific versions of these sub packages.

So we will drop support for these sub packages.

How

• Move all sub packages into packages/zent, remove package.json in these folders.
• Move third-party dependencies and devDependencies into packages/zent.
• Move scripts in sub packages to packages/zent/scripts.
• Replace scripts/make-icon-grid.sh with a node script.
• Change all sub package references to local directories.
• Replace zent-kit prepublish with webpack & babel.
• Replace zent-kit test with Jest.
• Remove zent-kit from project.
• lerna will still be there, we are planning a babel plugin #200
• Update reference in documentations

zent-datepicker 的确定按钮需要指定字体大小

不然容易被其他样式覆盖掉

zent-input: example 02/03/04 'warning: unknown props' with react v15.4.2

addonBefore & addonAfter

zent-tabs: style bugs

1. add 按钮里的加号没有居中

2. diasbled 的选项卡增加指针样式'not-allow'以保持一致.

doc: Add Dropdown

Add guides on how to use Popover as a Dropdown.