@anker-in/headless-ui 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CONTRIBUTING.md +147 -0
- package/README.md +41 -0
- package/css-explain.png +0 -0
- package/package.json +6 -2
package/CONTRIBUTING.md
ADDED
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
# Contributing
|
|
2
|
+
|
|
3
|
+
# 关于
|
|
4
|
+
|
|
5
|
+
# 代码文件结构
|
|
6
|
+
|
|
7
|
+
```shell
|
|
8
|
+
packages
|
|
9
|
+
├── storybook
|
|
10
|
+
│ └── public
|
|
11
|
+
└── ui
|
|
12
|
+
└── src
|
|
13
|
+
├── components
|
|
14
|
+
├── helpers
|
|
15
|
+
├── icons
|
|
16
|
+
├── props
|
|
17
|
+
├── stories
|
|
18
|
+
└── styles
|
|
19
|
+
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
| 路径 | 描述 |
|
|
23
|
+
| -------------------------- | ------------------------ |
|
|
24
|
+
| packages/storybook | storybook 配置 |
|
|
25
|
+
| packages/ui | 组件根目录 |
|
|
26
|
+
| packages/ui/src/components | 所有的组件都在这个目录 |
|
|
27
|
+
| packages/ui/src/stories | 组件对应的storybook 文件 |
|
|
28
|
+
| packages/ui/src/styles | 样式文件 |
|
|
29
|
+
|
|
30
|
+
# 如何运行
|
|
31
|
+
|
|
32
|
+
本地开发
|
|
33
|
+
|
|
34
|
+
先clone 代码到本地
|
|
35
|
+
|
|
36
|
+
```shell
|
|
37
|
+
git clone
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
安装依赖
|
|
41
|
+
|
|
42
|
+
```shell
|
|
43
|
+
pnpm install
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
ui 添加新的依赖
|
|
47
|
+
|
|
48
|
+
```shell
|
|
49
|
+
pnpm add {packages} --filter @headless-style-web/ui
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
进入根目录
|
|
53
|
+
|
|
54
|
+
```
|
|
55
|
+
cd headless-common/style/web
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
为什么把 web 当作根目录？
|
|
59
|
+
因为前期打算通过sub module 的方式使用组件，方便快速验证，后续打算把组件库单独提出来当作一个仓库，打包成npm包。所以基础配置，比如eslint, tscongig, npm 等都是是在这个目录配置的，把这个目录当作根目录，编辑器更好的可以读取这些配置。
|
|
60
|
+
|
|
61
|
+
本地启动
|
|
62
|
+
|
|
63
|
+
```shell
|
|
64
|
+
pnpm dev
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
这会运行storybook，可以一边修改组件源码，一边查看效果。
|
|
68
|
+
|
|
69
|
+
# 如何新增组件
|
|
70
|
+
|
|
71
|
+
新增组件之前先看下仓库有没有类似的组件已经存在。
|
|
72
|
+
如果不存在，需要新增，建议新组件基于 [@radix-ui/primitive](https://www.radix-ui.com/primitives) 或者手动复制[shadcn](https://ui.shadcn.com/) 的组件 进行二次封装。
|
|
73
|
+
组件目录位于`packages/ui/src`。
|
|
74
|
+
|
|
75
|
+
组件需要覆盖全品牌，如果新增css 变量，需要在`packages/ui/src/styles/global.css` 补充在各个品牌的作用域之下。
|
|
76
|
+
如果某个品牌没有添加，会默认使用root 下的定义作为fallback。
|
|
77
|
+
|
|
78
|
+
比如新的组件`Card`
|
|
79
|
+
需要新加一个Card 的背景颜色
|
|
80
|
+
|
|
81
|
+
```css
|
|
82
|
+
--card-bg-color: #fefefe;
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
请在不同的品牌的作用域下添加
|
|
86
|
+
比如
|
|
87
|
+
|
|
88
|
+
```css
|
|
89
|
+
:root[data-theme='anker'] {
|
|
90
|
+
--card-bg-color: #fefefe;
|
|
91
|
+
}
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
原理
|
|
95
|
+
|
|
96
|
+
<img src="./css-explain.png" width="500" height="500"/>
|
|
97
|
+
|
|
98
|
+
⚠️注意
|
|
99
|
+
组件编写后请按照checklist 进行检查
|
|
100
|
+
|
|
101
|
+
## checklist
|
|
102
|
+
|
|
103
|
+
- [ ] 已经为组件编写了storybook API文档
|
|
104
|
+
- [ ] 组件在storybook accessibility 通过测试
|
|
105
|
+
- [ ] 完成组件的单元测试
|
|
106
|
+
- [ ] 组件在不同品牌下的样式正常显示
|
|
107
|
+
- [ ] 组件在不同设备，分辨率下显示正常
|
|
108
|
+
- [ ] 组件不包含业务代码，包括文案，接口等
|
|
109
|
+
|
|
110
|
+
# 如何提交代码
|
|
111
|
+
|
|
112
|
+
git flow 和code review
|
|
113
|
+
|
|
114
|
+
1. 主分支 (main)：存储正式发布的历史。
|
|
115
|
+
2. 开发分支 (develop)：集成各种功能的分支。
|
|
116
|
+
3. 功能分支 (feature/x)：从develop分支出来，用于新功能的开发。
|
|
117
|
+
4. 修补分支 (hotfix/x)：从main分支出来，用于快速修补生产环境的问题。
|
|
118
|
+
|
|
119
|
+
# 代码规范
|
|
120
|
+
|
|
121
|
+
请遵循 eslint 的配置编写代码。
|
|
122
|
+
|
|
123
|
+
提交代码前运行lint
|
|
124
|
+
|
|
125
|
+
```shell
|
|
126
|
+
pnpm lint
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
如果遇到eslint 报错，但是坚持自己的写法的，可以通过注释的方式，阻止eslint 校验, 并且要写明阻止的规则
|
|
130
|
+
比如
|
|
131
|
+
|
|
132
|
+
```js
|
|
133
|
+
// eslint-disable-next-line no-alert
|
|
134
|
+
alert('Example of disabled line for no-alert')
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
如果希望修改eslint 规则，修改根目录下的`.eslintrc.json`
|
|
138
|
+
|
|
139
|
+
# Tesing
|
|
140
|
+
|
|
141
|
+
unit test 使用 [jest](https://jestjs.io/) 和 [@test-library/react](https://testing-library.com/)。
|
|
142
|
+
|
|
143
|
+
运行单元测试
|
|
144
|
+
|
|
145
|
+
```shell
|
|
146
|
+
pnpm test
|
|
147
|
+
```
|
package/README.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
### 开发
|
|
2
|
+
|
|
3
|
+
[CONTRIBUTING.md](CONTRIBUTING.md)
|
|
4
|
+
|
|
5
|
+
#### 初始化
|
|
6
|
+
|
|
7
|
+
### 相关资料
|
|
8
|
+
|
|
9
|
+
[web 端设计稿]()
|
|
10
|
+
|
|
11
|
+
# 使用方法
|
|
12
|
+
|
|
13
|
+
```shell
|
|
14
|
+
npm install @anker-in/headless-ui
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
手动在html 标签添加主题名, nextjs 项目位于`_document.tsx`
|
|
19
|
+
|
|
20
|
+
```html
|
|
21
|
+
<html data-brand-theme="soundCore"></html>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
然后就可以项目内引入需要的组件
|
|
25
|
+
|
|
26
|
+
```jsx
|
|
27
|
+
// 在项目入口添加样式文件
|
|
28
|
+
import '@anker-in/headless-ui/style.css'
|
|
29
|
+
|
|
30
|
+
import { Button } from '@anker-in/headless-ui'
|
|
31
|
+
|
|
32
|
+
// 省略中间代码
|
|
33
|
+
|
|
34
|
+
<Button size="lg" variant="primary">
|
|
35
|
+
Primary
|
|
36
|
+
</Button>
|
|
37
|
+
<Button size="sm" variant="secondary">
|
|
38
|
+
secondary
|
|
39
|
+
</Button>
|
|
40
|
+
|
|
41
|
+
```
|
package/css-explain.png
ADDED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anker-in/headless-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"main": "./dist/esm/index.js",
|
|
5
5
|
"types": "./dist/esm/index.d.ts",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
@@ -9,7 +9,11 @@
|
|
|
9
9
|
"type": "module",
|
|
10
10
|
"files": [
|
|
11
11
|
"src/**",
|
|
12
|
-
"dist/**"
|
|
12
|
+
"dist/**",
|
|
13
|
+
"style.css",
|
|
14
|
+
"README.md",
|
|
15
|
+
"CONTRIBUTING.md",
|
|
16
|
+
"css-explain.png"
|
|
13
17
|
],
|
|
14
18
|
"sideEffects": false,
|
|
15
19
|
"keywords": [],
|