@uniformdev/design-system 20.43.0 → 20.43.1-alpha.11
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/README.md +246 -0
- package/dist/esm/index.js +1 -0
- package/dist/index.js +1 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
# @uniformdev/design-system
|
|
2
|
+
|
|
3
|
+
A comprehensive React component library and design system for Uniform's platform applications. This package provides a consistent set of UI components, styling utilities, and design tokens to ensure a cohesive user experience across all Uniform products.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Comprehensive Component Library**: 50+ reusable React components including buttons, forms, navigation, data display, and layout components
|
|
8
|
+
- **Consistent Theming**: CSS custom properties and Emotion-based styling system
|
|
9
|
+
- **Accessibility First**: Built with accessibility best practices and ARIA support
|
|
10
|
+
- **TypeScript Support**: Full TypeScript definitions for all components and utilities
|
|
11
|
+
- **Modern React**: Built for React 18+ with hooks and modern patterns
|
|
12
|
+
- **Storybook Integration**: Interactive component documentation and examples
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pnpm add @uniformdev/design-system
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Quick Start
|
|
21
|
+
|
|
22
|
+
### 1. Set up the Theme Provider
|
|
23
|
+
|
|
24
|
+
Add the `Theme` component to your app or `_document.tsx` file to enable the design system:
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
import { Theme } from '@uniformdev/design-system';
|
|
28
|
+
|
|
29
|
+
function App() {
|
|
30
|
+
return (
|
|
31
|
+
<>
|
|
32
|
+
<Theme />
|
|
33
|
+
{/* Your app content */}
|
|
34
|
+
</>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Or in Next.js `_document.tsx`:
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import { Theme } from '@uniformdev/design-system';
|
|
43
|
+
|
|
44
|
+
export default function Document() {
|
|
45
|
+
return (
|
|
46
|
+
<Html>
|
|
47
|
+
<Head />
|
|
48
|
+
<body>
|
|
49
|
+
<Theme />
|
|
50
|
+
<Main />
|
|
51
|
+
<NextScript />
|
|
52
|
+
</body>
|
|
53
|
+
</Html>
|
|
54
|
+
);
|
|
55
|
+
}
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### 2. Use Components
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
import { Button, Heading, Card, Input } from '@uniformdev/design-system';
|
|
62
|
+
|
|
63
|
+
function MyComponent() {
|
|
64
|
+
return (
|
|
65
|
+
<Card>
|
|
66
|
+
<Heading level={1}>Welcome to Uniform</Heading>
|
|
67
|
+
<Input placeholder="Enter your name" />
|
|
68
|
+
<Button buttonType="primary">Get Started</Button>
|
|
69
|
+
</Card>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Component Categories
|
|
75
|
+
|
|
76
|
+
### Layout & Structure
|
|
77
|
+
- **Layout**: Container, Grid, Stack, and spacing utilities
|
|
78
|
+
- **Card**: Various card components for content organization
|
|
79
|
+
- **Modal**: Dialog and modal components
|
|
80
|
+
- **Drawer**: Slide-out navigation and content panels
|
|
81
|
+
|
|
82
|
+
### Navigation & Interaction
|
|
83
|
+
- **Button**: Primary, secondary, and icon buttons with multiple variants
|
|
84
|
+
- **Menu**: Dropdown menus and navigation components
|
|
85
|
+
- **Tabs**: Tabbed interface components
|
|
86
|
+
- **Pagination**: Data pagination controls
|
|
87
|
+
|
|
88
|
+
### Forms & Inputs
|
|
89
|
+
- **Input**: Text inputs, selects, and form controls
|
|
90
|
+
- **ParameterInputs**: Specialized inputs for parameter configuration
|
|
91
|
+
- **DateTimePicker**: Date and time selection components
|
|
92
|
+
- **Switch**: Toggle switches and checkboxes
|
|
93
|
+
- **Slider**: Range and value sliders
|
|
94
|
+
|
|
95
|
+
### Data Display
|
|
96
|
+
- **Table**: Data tables with sorting and filtering
|
|
97
|
+
- **List**: Various list components and layouts
|
|
98
|
+
- **Avatar**: User avatars and avatar groups
|
|
99
|
+
- **ProgressBar**: Progress indicators and loading states
|
|
100
|
+
- **Counter**: Numeric counters and badges
|
|
101
|
+
|
|
102
|
+
### Feedback & Status
|
|
103
|
+
- **Toast**: Notification messages
|
|
104
|
+
- **Banner**: Alert and status banners
|
|
105
|
+
- **Callout**: Highlighted information boxes
|
|
106
|
+
- **LoadingIndicator**: Loading spinners and skeletons
|
|
107
|
+
- **Validation**: Form validation components
|
|
108
|
+
|
|
109
|
+
### Typography
|
|
110
|
+
- **Heading**: Semantic heading components (H1-H6)
|
|
111
|
+
- **Paragraph**: Text content components
|
|
112
|
+
- **Link**: Styled link components
|
|
113
|
+
|
|
114
|
+
### Utilities
|
|
115
|
+
- **Icons**: Comprehensive icon library
|
|
116
|
+
- **Tooltip**: Contextual help and information
|
|
117
|
+
- **Popover**: Floating content containers
|
|
118
|
+
- **Skeleton**: Loading placeholders
|
|
119
|
+
|
|
120
|
+
## Styling System
|
|
121
|
+
|
|
122
|
+
The design system uses Emotion for styling with a comprehensive set of CSS custom properties:
|
|
123
|
+
|
|
124
|
+
### Color System
|
|
125
|
+
- **Brand Colors**: Primary brand colors and variations
|
|
126
|
+
- **Semantic Colors**: Success, warning, error, and info colors
|
|
127
|
+
- **Neutral Colors**: Grayscale palette for text and backgrounds
|
|
128
|
+
- **Purple Spectrum**: Extended purple color range for accents
|
|
129
|
+
```css
|
|
130
|
+
.my-color-class {
|
|
131
|
+
color: var(--primary-action-default);
|
|
132
|
+
|
|
133
|
+
&:hover {
|
|
134
|
+
color: var(--primary-action-hover);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
### Typography
|
|
140
|
+
- **Font Families**: System font stack with fallbacks
|
|
141
|
+
- **Font Sizes**: Consistent scale from small to large
|
|
142
|
+
- **Line Heights**: Optimized for readability
|
|
143
|
+
- **Font Weights**: Multiple weight options
|
|
144
|
+
```css
|
|
145
|
+
.my-font-class {
|
|
146
|
+
color: var(--typography-base);
|
|
147
|
+
font-size: var(--fs-base);
|
|
148
|
+
font-weight: var(--fw-regular);
|
|
149
|
+
font-family: var(--ff-system);
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Spacing
|
|
154
|
+
- **Consistent Scale**: 8px-based spacing system
|
|
155
|
+
- **Responsive**: Mobile-first responsive design
|
|
156
|
+
- **Flexible**: CSS custom properties for easy customization
|
|
157
|
+
```css
|
|
158
|
+
.my-spacing-class {
|
|
159
|
+
padding: var(--spacing-sm) var(--spacing-base);
|
|
160
|
+
margin: var(--spacing-lg) var(--spacing-xl);
|
|
161
|
+
}
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
## Utilities
|
|
165
|
+
|
|
166
|
+
The package includes several utility functions and hooks:
|
|
167
|
+
|
|
168
|
+
```tsx
|
|
169
|
+
import {
|
|
170
|
+
useDebouncedCallback,
|
|
171
|
+
useOutsideClick,
|
|
172
|
+
debounce,
|
|
173
|
+
Breakpoints
|
|
174
|
+
} from '@uniformdev/design-system';
|
|
175
|
+
```
|
|
176
|
+
|
|
177
|
+
## Development
|
|
178
|
+
|
|
179
|
+
### Component Generation
|
|
180
|
+
|
|
181
|
+
Use the built-in generator to create new components:
|
|
182
|
+
|
|
183
|
+
```bash
|
|
184
|
+
pnpm run create:component
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
This will scaffold a new component with:
|
|
188
|
+
- TypeScript component file
|
|
189
|
+
- Styles file with Emotion
|
|
190
|
+
- Storybook stories
|
|
191
|
+
- Unit tests
|
|
192
|
+
- Index file for exports
|
|
193
|
+
|
|
194
|
+
### Testing
|
|
195
|
+
|
|
196
|
+
```bash
|
|
197
|
+
# Run tests
|
|
198
|
+
pnpm test
|
|
199
|
+
|
|
200
|
+
# Run tests with coverage
|
|
201
|
+
pnpm test:coverage
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
### Building
|
|
205
|
+
|
|
206
|
+
```bash
|
|
207
|
+
# Build the package
|
|
208
|
+
pnpm build
|
|
209
|
+
|
|
210
|
+
# Watch mode for development
|
|
211
|
+
pnpm dev
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
## Storybook
|
|
215
|
+
|
|
216
|
+
Interactive component documentation is available through Storybook. Each component includes:
|
|
217
|
+
- Live examples
|
|
218
|
+
- Interactive controls
|
|
219
|
+
- Usage documentation
|
|
220
|
+
- Accessibility information
|
|
221
|
+
|
|
222
|
+
## Browser Support
|
|
223
|
+
|
|
224
|
+
- Chrome (latest)
|
|
225
|
+
- Firefox (latest)
|
|
226
|
+
- Safari (latest)
|
|
227
|
+
- Edge (latest)
|
|
228
|
+
|
|
229
|
+
## Contributing
|
|
230
|
+
|
|
231
|
+
When contributing to the design system:
|
|
232
|
+
|
|
233
|
+
1. Follow the existing component patterns
|
|
234
|
+
2. Include comprehensive TypeScript types
|
|
235
|
+
3. Add Storybook stories for new components
|
|
236
|
+
4. Write unit tests for component behavior
|
|
237
|
+
5. Ensure accessibility compliance
|
|
238
|
+
6. Update this README for significant changes
|
|
239
|
+
|
|
240
|
+
## License
|
|
241
|
+
|
|
242
|
+
SEE LICENSE IN LICENSE.txt
|
|
243
|
+
|
|
244
|
+
## Changelog
|
|
245
|
+
|
|
246
|
+
See [CHANGELOG.md](./CHANGELOG.md) for a detailed list of changes and version history.
|
package/dist/esm/index.js
CHANGED
|
@@ -18000,6 +18000,7 @@ var StatusBullet = ({
|
|
|
18000
18000
|
role: "status",
|
|
18001
18001
|
css: [StatusBulletContainer, currentStateStyles[status], statusSize[size]],
|
|
18002
18002
|
...props,
|
|
18003
|
+
"data-testid": `status-bullet-${status}`,
|
|
18003
18004
|
children: hideText ? null : message ? message : status
|
|
18004
18005
|
}
|
|
18005
18006
|
);
|
package/dist/index.js
CHANGED
|
@@ -19891,6 +19891,7 @@ var StatusBullet = ({
|
|
|
19891
19891
|
role: "status",
|
|
19892
19892
|
css: [StatusBulletContainer, currentStateStyles[status], statusSize[size]],
|
|
19893
19893
|
...props,
|
|
19894
|
+
"data-testid": `status-bullet-${status}`,
|
|
19894
19895
|
children: hideText ? null : message ? message : status
|
|
19895
19896
|
}
|
|
19896
19897
|
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniformdev/design-system",
|
|
3
|
-
"version": "20.43.
|
|
3
|
+
"version": "20.43.1-alpha.11+82aa2c4c68",
|
|
4
4
|
"description": "Uniform design system components",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"exports": {
|
|
@@ -38,8 +38,8 @@
|
|
|
38
38
|
"@storybook/theming": "^8.3.3",
|
|
39
39
|
"@types/react": "18.3.24",
|
|
40
40
|
"@types/react-dom": "18.3.7",
|
|
41
|
-
"@uniformdev/canvas": "^20.43.
|
|
42
|
-
"@uniformdev/richtext": "^20.43.
|
|
41
|
+
"@uniformdev/canvas": "^20.43.1-alpha.11+82aa2c4c68",
|
|
42
|
+
"@uniformdev/richtext": "^20.43.1-alpha.11+82aa2c4c68",
|
|
43
43
|
"@vitest/coverage-v8": "3.2.4",
|
|
44
44
|
"autoprefixer": "10.4.21",
|
|
45
45
|
"hygen": "6.2.11",
|
|
@@ -93,5 +93,5 @@
|
|
|
93
93
|
"publishConfig": {
|
|
94
94
|
"access": "public"
|
|
95
95
|
},
|
|
96
|
-
"gitHead": "
|
|
96
|
+
"gitHead": "82aa2c4c6845b034e2bff9acf75d3fe590884ba2"
|
|
97
97
|
}
|