alibaba / rex-design

A responsive and adaptive components library, with ability to config theme and color mode.

ReX Design For OS

开发中，敬请期待

基于 React 的多端自适应组件库

开发

安装依赖

yarn

运行示例

yarn start:story

测试

yarn test

自定义传参，只运行个别目录

yarn test src/utils --watch

详细命令行参数参考：https://jestjs.io/docs/cli

提交代码

提交代码需要编写符合约定的 commit message 规范，格式如下：

git commit -m <type>(<scope>): <message>

其中 type 允许的类型包括：

• feat: (new feature for the user, not a new feature for build script)
• fix: (bug fix for the user, not a fix to a build script)
• docs: (changes to the documentation)
• style: (formatting, missing semi colons, etc; no production code change)
• refactor: (refactoring production code, eg. renaming a variable)
• test: (adding missing tests, refactoring tests; no production code change)
• chore: (updating grunt tasks etc; no production code change)

其中 scope 表示作用的组件，必须使用 Pascal-Case，例如

• Button
• DatePicker

最后，message 为您此次提交的描述。例如：

git commit -m feat(DatePicker): add onChange

Pull Request 流程

请参考：如何优雅地在 github 上贡献代码

1. 克隆仓库
2. 创建分支
3. 提交代码
4. 合并修改 git rebase master
5. 发起 MR

社区分享

• 2020.12, D2 前端技术大会《盒马中后台跨端方案探索》
• 2021.06, ReX Design 跨端组件测试版发布 《盒马跨端设计系统 ReX Design For OS》
• 2021.07, ReX Design 设计理念分享 《ReX Design for OS 面向多因子的跨端设计系统》

致谢

感谢下述开源项目，部分功能实现参考了这些项目中的代码实现。

• Alibaba Fusion Design
• Material UI

License

This project is licensed under the terms of the MIT license.

rex-design's Issues

组件文档无法正常打开

1. 链接：https://alibaba.github.io/rex-design/docs
2. 使用浏览器：QQ浏览器，极速模式，版本：QQ浏览器10.8
3. 页面在加载完之后，有内容，但是后面闪屏了一下，就变成了白屏，显示代码错误：
   Object.fromEntries is not a function

[Select] 不传 dataSource 会直接报错

目前的问题

<Select.Single />

提示：TypeError: Cannot read properties of undefined (reading 'map')

期望的结果

不报错，渲染一个空的下拉菜单，或填充一个 “无选项” 的 placeholder

有没有跨端使用方式的Demo?

有没有跨端使用方式的Demo?

Picker 组件 onChange 的 detail 参数可能丢失

组件问题跟进

• Checkbox 无 focus 样式，使用 tab 键切换无效果：
• DatePicker 切换月份时 会存在抖动（不同月份的文字宽度不同导致）
• Timeline 组件对于 datetime 应该做自动折叠，即日期和时间支持断行显示：
• Select 组件与 Tree 组件 能力增强与代码结构优化

有没有跨端使用方式的Demo?

有没有跨端使用方式的Demo?

ReX Design alpha 版本问题汇总

文档问题

1. 代码编辑时，希望 Demo 渲染区域高度是稳定的，否则输入时 Demo 的高度会跳动，输入区域会频繁移动，体验很差；
2. 多端展示，可以在文档的全局提供 PC(L)|Pad(M)|Phone(S) 三种屏幕尺寸切换，其中 PC 展示全组件文档， Pad|Phone 只展示 demo；
3. 在 PC 模式的 demo 区域中，允许用户快速切换 PC(L)|Pad(M)|Phone(S) 三种模式的展示；
4. 完善「开始使用」的文档页
5. 文档网站的整体风格不够一致，首页 / 设计文档 / 组件文档三者差异较大，需要进行统一
6. 网站 SEO 和搜索优化

组件问题

1. Tooltip 的写法希望优化，可以写成<Tooltip text="我是按钮的提示"><Button>按钮</Button></Tooltip>，同时 Tooltip 应该是白色背景，一般来说只推荐写文本（但不做强约束）；
2. menu 需要默认支持 icon
3. Toaster 的动效过强，需要更加优雅的动画效果，B 端的动效应该更加轻量、恰到好处，让用户更加专注在目标内容上；
4. Timeline 组件对于 datetime 应该做自动折叠，即日期和时间支持断行显示：
   
5. Button 的 disabled 状态样式过浅，与背景色的对比度太差，现在几乎不可见：
   
6. Checkbox 无 focus 样式，使用 tab 键切换无效果：
   
7. Group 组件在默认情况下为块级元素，应该为 inline-block 元素（或 inline-flex 元素）
8. DatePicker 切换月份时 会存在抖动
   

其他

1. 支持 AppProvider 进行受限的嵌套

依赖与导出符号收敛

• 移除 d3
• 移除 styled-system，移除 core/src/system 目录
• hooks/providers/stores/utils 中大部分方法是不需要导出的

上次未完成的事项

• Tree 的辅助方法
  • TreeDataHelper
  • StrictTreeDataHelper
  • searchTreeByKeyword
• AdaptiveDialog
  • 基本功能
  • 移动端细节样式优化
• Notification / toast
  • 样式优化
• 弹层方案持续优化
  • 提供完整的弹层能力，提供丰富的弹层类组件
  • 重点关注：弹层在移动端的表现
  • 暂不包含一些细节交互，例如移动端 通知组件上的手势操作
• 选择器组件优化
  • 重点关注：移动端中选择器的表现，完整的键盘操作
• 表格组件移动端展现
• 消除所有 TypeScript 类型报错
• 减少 any 的使用，换成正确的类型；替换不了的地方使用 unknown 代替 any
• utils 方法收敛与整理

Select 会被过长选项撑开