@mathwiz/ui-components 0.1.6 → 0.1.7
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/dist/App.css +570 -0
- package/dist/components/Button/Button.css +214 -0
- package/dist/components/ContentAccordion/ContentAccordion.css +268 -0
- package/dist/components/MathWizHeader/MathWizHeader.css +333 -0
- package/dist/components/Sidebar/Sidebar.css +207 -0
- package/dist/components/Submenu/Submenu.css +98 -0
- package/dist/components/UserProfile/UserProfile.css +141 -0
- package/dist/components/components.css +222 -0
- package/dist/components/radarAbility/AbilityAssessmentDashboard/AbilityAssessmentDashboard.module.css +60 -0
- package/dist/index.css +63 -0
- package/dist/pages/GradeUnitBrowserPage/GradeUnitBrowserPage.css +250 -0
- package/dist/stories/button.css +30 -0
- package/dist/stories/header.css +32 -0
- package/dist/stories/page.css +68 -0
- package/dist/styles/index.css +154 -0
- package/package.json +3 -2
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.storybook-button {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
cursor: pointer;
|
|
4
|
+
border: 0;
|
|
5
|
+
border-radius: 3em;
|
|
6
|
+
font-weight: 700;
|
|
7
|
+
line-height: 1;
|
|
8
|
+
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
9
|
+
}
|
|
10
|
+
.storybook-button--primary {
|
|
11
|
+
background-color: #555ab9;
|
|
12
|
+
color: white;
|
|
13
|
+
}
|
|
14
|
+
.storybook-button--secondary {
|
|
15
|
+
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
|
|
16
|
+
background-color: transparent;
|
|
17
|
+
color: #333;
|
|
18
|
+
}
|
|
19
|
+
.storybook-button--small {
|
|
20
|
+
padding: 10px 16px;
|
|
21
|
+
font-size: 12px;
|
|
22
|
+
}
|
|
23
|
+
.storybook-button--medium {
|
|
24
|
+
padding: 11px 20px;
|
|
25
|
+
font-size: 14px;
|
|
26
|
+
}
|
|
27
|
+
.storybook-button--large {
|
|
28
|
+
padding: 12px 24px;
|
|
29
|
+
font-size: 16px;
|
|
30
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.storybook-header {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: space-between;
|
|
4
|
+
align-items: center;
|
|
5
|
+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
6
|
+
padding: 15px 20px;
|
|
7
|
+
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.storybook-header svg {
|
|
11
|
+
display: inline-block;
|
|
12
|
+
vertical-align: top;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.storybook-header h1 {
|
|
16
|
+
display: inline-block;
|
|
17
|
+
vertical-align: top;
|
|
18
|
+
margin: 6px 0 6px 10px;
|
|
19
|
+
font-weight: 700;
|
|
20
|
+
font-size: 20px;
|
|
21
|
+
line-height: 1;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.storybook-header button + button {
|
|
25
|
+
margin-left: 10px;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.storybook-header .welcome {
|
|
29
|
+
margin-right: 10px;
|
|
30
|
+
color: #333;
|
|
31
|
+
font-size: 14px;
|
|
32
|
+
}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
.storybook-page {
|
|
2
|
+
margin: 0 auto;
|
|
3
|
+
padding: 48px 20px;
|
|
4
|
+
max-width: 600px;
|
|
5
|
+
color: #333;
|
|
6
|
+
font-size: 14px;
|
|
7
|
+
line-height: 24px;
|
|
8
|
+
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.storybook-page h2 {
|
|
12
|
+
display: inline-block;
|
|
13
|
+
vertical-align: top;
|
|
14
|
+
margin: 0 0 4px;
|
|
15
|
+
font-weight: 700;
|
|
16
|
+
font-size: 32px;
|
|
17
|
+
line-height: 1;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.storybook-page p {
|
|
21
|
+
margin: 1em 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.storybook-page a {
|
|
25
|
+
color: inherit;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.storybook-page ul {
|
|
29
|
+
margin: 1em 0;
|
|
30
|
+
padding-left: 30px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.storybook-page li {
|
|
34
|
+
margin-bottom: 8px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.storybook-page .tip {
|
|
38
|
+
display: inline-block;
|
|
39
|
+
vertical-align: top;
|
|
40
|
+
margin-right: 10px;
|
|
41
|
+
border-radius: 1em;
|
|
42
|
+
background: #e7fdd8;
|
|
43
|
+
padding: 4px 12px;
|
|
44
|
+
color: #357a14;
|
|
45
|
+
font-weight: 700;
|
|
46
|
+
font-size: 11px;
|
|
47
|
+
line-height: 12px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.storybook-page .tip-wrapper {
|
|
51
|
+
margin-top: 40px;
|
|
52
|
+
margin-bottom: 40px;
|
|
53
|
+
font-size: 13px;
|
|
54
|
+
line-height: 20px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.storybook-page .tip-wrapper svg {
|
|
58
|
+
display: inline-block;
|
|
59
|
+
vertical-align: top;
|
|
60
|
+
margin-top: 3px;
|
|
61
|
+
margin-right: 4px;
|
|
62
|
+
width: 12px;
|
|
63
|
+
height: 12px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.storybook-page .tip-wrapper svg path {
|
|
67
|
+
fill: #1ea7fd;
|
|
68
|
+
}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
/* 组件库统一样式入口文件 */
|
|
2
|
+
|
|
3
|
+
/* ==================== 组件样式导入 ==================== */
|
|
4
|
+
|
|
5
|
+
/* 基础组件样式 */
|
|
6
|
+
@import '../components/Button/Button.css';
|
|
7
|
+
|
|
8
|
+
/* 布局组件样式 */
|
|
9
|
+
@import '../components/MathWizHeader/MathWizHeader.css';
|
|
10
|
+
@import '../components/Sidebar/Sidebar.css';
|
|
11
|
+
@import '../components/ContentAccordion/ContentAccordion.css';
|
|
12
|
+
|
|
13
|
+
/* 其他组件样式 */
|
|
14
|
+
@import '../components/Submenu/Submenu.css';
|
|
15
|
+
@import '../components/UserProfile/UserProfile.css';
|
|
16
|
+
|
|
17
|
+
/* 页面级组件样式 */
|
|
18
|
+
@import '../pages/GradeUnitBrowserPage/GradeUnitBrowserPage.css';
|
|
19
|
+
|
|
20
|
+
/* ==================== CSS 变量定义 (设计令牌) ==================== */
|
|
21
|
+
:root {
|
|
22
|
+
/* 主色调 */
|
|
23
|
+
--primary-color: #3b82f6;
|
|
24
|
+
--primary-hover: #2563eb;
|
|
25
|
+
--primary-active: #1d4ed8;
|
|
26
|
+
|
|
27
|
+
/* 背景色 */
|
|
28
|
+
--bg-primary: #ffffff;
|
|
29
|
+
--bg-secondary: #f8fafc;
|
|
30
|
+
--bg-tertiary: #f1f5f9;
|
|
31
|
+
|
|
32
|
+
/* 文字色 */
|
|
33
|
+
--text-primary: #1e293b;
|
|
34
|
+
--text-secondary: #64748b;
|
|
35
|
+
--text-tertiary: #94a3b8;
|
|
36
|
+
|
|
37
|
+
/* 边框色 */
|
|
38
|
+
--border-light: #e2e8f0;
|
|
39
|
+
--border-medium: #cbd5e1;
|
|
40
|
+
--border-dark: #94a3b8;
|
|
41
|
+
|
|
42
|
+
/* 状态色 */
|
|
43
|
+
--success-color: #10b981;
|
|
44
|
+
--warning-color: #f59e0b;
|
|
45
|
+
--error-color: #ef4444;
|
|
46
|
+
--info-color: #3b82f6;
|
|
47
|
+
|
|
48
|
+
/* 阴影 */
|
|
49
|
+
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
50
|
+
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
51
|
+
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
52
|
+
|
|
53
|
+
/* 圆角 */
|
|
54
|
+
--radius-sm: 0.25rem;
|
|
55
|
+
--radius-md: 0.375rem;
|
|
56
|
+
--radius-lg: 0.5rem;
|
|
57
|
+
--radius-xl: 0.75rem;
|
|
58
|
+
|
|
59
|
+
/* 间距 */
|
|
60
|
+
--spacing-xs: 0.25rem;
|
|
61
|
+
--spacing-sm: 0.5rem;
|
|
62
|
+
--spacing-md: 1rem;
|
|
63
|
+
--spacing-lg: 1.5rem;
|
|
64
|
+
--spacing-xl: 2rem;
|
|
65
|
+
--spacing-2xl: 3rem;
|
|
66
|
+
|
|
67
|
+
/* 字体大小 */
|
|
68
|
+
--text-xs: 0.75rem;
|
|
69
|
+
--text-sm: 0.875rem;
|
|
70
|
+
--text-base: 1rem;
|
|
71
|
+
--text-lg: 1.125rem;
|
|
72
|
+
--text-xl: 1.25rem;
|
|
73
|
+
--text-2xl: 1.5rem;
|
|
74
|
+
--text-3xl: 1.875rem;
|
|
75
|
+
|
|
76
|
+
/* 字体粗细 */
|
|
77
|
+
--font-normal: 400;
|
|
78
|
+
--font-medium: 500;
|
|
79
|
+
--font-semibold: 600;
|
|
80
|
+
--font-bold: 700;
|
|
81
|
+
|
|
82
|
+
/* 渐变背景 */
|
|
83
|
+
--header-bg: linear-gradient(to right, #8b5cf6, #ec4899, #ef4444);
|
|
84
|
+
--sidebar-bg: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* ==================== 全局重置和基础样式 ==================== */
|
|
88
|
+
|
|
89
|
+
* {
|
|
90
|
+
box-sizing: border-box;
|
|
91
|
+
margin: 0;
|
|
92
|
+
padding: 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
body {
|
|
96
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
97
|
+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
98
|
+
sans-serif;
|
|
99
|
+
-webkit-font-smoothing: antialiased;
|
|
100
|
+
-moz-osx-font-smoothing: grayscale;
|
|
101
|
+
line-height: 1.5;
|
|
102
|
+
color: var(--text-primary);
|
|
103
|
+
background-color: var(--bg-primary);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/* 链接样式重置 */
|
|
107
|
+
a {
|
|
108
|
+
color: inherit;
|
|
109
|
+
text-decoration: none;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
a:hover {
|
|
113
|
+
text-decoration: underline;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* 按钮样式重置 */
|
|
117
|
+
button {
|
|
118
|
+
border: none;
|
|
119
|
+
background: none;
|
|
120
|
+
cursor: pointer;
|
|
121
|
+
font-family: inherit;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
button:disabled {
|
|
125
|
+
cursor: not-allowed;
|
|
126
|
+
opacity: 0.6;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
/* 输入框样式重置 */
|
|
130
|
+
input, textarea, select {
|
|
131
|
+
font-family: inherit;
|
|
132
|
+
border: 1px solid var(--border-medium);
|
|
133
|
+
border-radius: var(--radius-md);
|
|
134
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
135
|
+
background-color: var(--bg-primary);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
input:focus, textarea:focus, select:focus {
|
|
139
|
+
outline: none;
|
|
140
|
+
border-color: var(--primary-color);
|
|
141
|
+
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* 列表样式重置 */
|
|
145
|
+
ul, ol {
|
|
146
|
+
list-style: none;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* 图片样式重置 */
|
|
150
|
+
img {
|
|
151
|
+
max-width: 100%;
|
|
152
|
+
height: auto;
|
|
153
|
+
display: block;
|
|
154
|
+
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mathwiz/ui-components",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.7",
|
|
5
5
|
"description": "A collection of reusable UI components for React applications within the mathwiz ecosystem.",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
7
7
|
"module": "dist/index.mjs",
|
|
@@ -39,8 +39,9 @@
|
|
|
39
39
|
"type": "module",
|
|
40
40
|
"scripts": {
|
|
41
41
|
"dev": "vite",
|
|
42
|
-
"build": "vite build && npm run build:types",
|
|
42
|
+
"build": "vite build && npm run build:types && npm run build:copy-css",
|
|
43
43
|
"build:types": "tsc -p tsconfig.lib.json",
|
|
44
|
+
"build:copy-css": "node scripts/copy-css.js",
|
|
44
45
|
"lint": "eslint .",
|
|
45
46
|
"preview": "vite preview",
|
|
46
47
|
"storybook": "storybook dev -p 6006",
|