xsky-fe / wizard-ui Goto Github PK

Is your feature request related to a problem? Please describe.
现有支持写法不灵活

只能 hover title 才能有效，整个 div 都需要 hover

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

gatsby 目前只支持 StaticQuery 不支持参数形式的查询

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Alert 超链接颜色增强下，现在完全和文字一个颜色鼠标不放上去完全看不到是超链接

ICON 扩展 cursor:pointer API

记录 V1 组件开发的工作安排

Requirement

• Typescript
• React 16+、React Hooks、Embrace React 17
• React.StrictMode optional
• Unit Test
• Storybook optional
• Document、Examples

GuideLine

• Color 颜色
• Font 字体
• Icon 图标
• Grid 栅格
• Layout 布局
• Motion 动效
• Border 边框
• Shadow 阴影

UI Components

• Badge 徽标数

• Button 按钮

• Loader 加载器

• UsageBar 使用量

• Pagination 分页

• Breadcrumb 面包屑

• SubMenu 级连菜单

• DropdownButton 下拉框

• Modal 对话框

• Tooltip 文字提示

• Tabs 选项卡

• Steps 步骤条

• TimePicker 时间选择框

• Tree 树级组件

• Navigation 导航栏

• DatePicker 日期选择器

• Notification 通知提醒框

• Table 表格

• Guide 流程指导

• Panel 面板

Form 表单

• Switch 开关
• Checkbox 复选框
• Input 输入框
• Radio 单选框
• Select 下拉框

Hooks

• useWindowWidth 获取浏览器窗口宽度

Utils

• 字节单位转换
• 数值单位转换
• UUID 生成

Need Discuss

• 图表解决方案 Highchart ？

需求说明/问题声明

• 修复 React 生命周期告警问题
• 使用 bootstrap 4 的特性

解决方案

• React-bootstrap 升级
• 使用 bootstrap 4

具体实时步骤

• 删除 bootstrap-sass 使用官方的 bootstarp 提供样式支持；
• React-bootstrap 升级到最新版本，支持 bootstrap 4 版本；
• 去掉 Well 组件，Panel 组件用 Card 代替；
• yarn storybook 本地启动调试组件，修复 Error 问题;
• 文档部分问题替换

steps 组件的current step是不是该限制下最大值和最小值，不能pre就减，next就加，需要设置个边界。

目标

icon font 改成 svg 方案

SVG 优势

按需加载：只有用到的 icon 会被打包
避免网络问题导致图标呈现方块
浏览器更好的支持

相关资源

Ant Design Icon Issue
Seriously, Don’t Use Icon Fonts
https://www.iconfont.cn/
https://material-ui.com/zh/components/icons/

流程

方法一

使用官方推荐 gatsby 插件

yarn add gatsby-transformer-react-docgen

配置 gatsby-config.js

module.exports = {
  plugins: [`gatsby-transformer-react-docgen`],
}

重启yarn start garpgql 中没有 allComponentMetadata 的 query （google 后没有有效解决方案）

方法二

使用 react-docgen 新版本支持解析 typescript 结构的 React 代码

yarn add react-docgen
# React Code to String
yarn add raw-loader

使用 react-docgen 提供的 parse 方法。遇到 "Can not resolve 'fs'" 问题（旧版本没有这个问题，但是不支持 typescript。新版本～～）

ing...

React-bootstrap 的 Alert 只有 props 中 onDismiss 存在是才会出现取消按钮，目前 Alert 组件默认就存在取消按钮，不符合预期效果。

关联 PR

#4