@gsk_poc/untitled-ui-base 0.1.14 → 0.1.15
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 +378 -28
- package/package.json +1 -1
- package/styles/styles/theme.css +430 -0
- package/styles/styles/tokens.css +807 -0
package/README.md
CHANGED
|
@@ -1,44 +1,394 @@
|
|
|
1
|
-
|
|
1
|
+
# @gsk-poc/untitled-ui-base
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A production-ready React component library built on Untitled UI with complete design token integration. All styling is driven by customizable design tokens exported from Figma.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## 🎯 Features
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- ✅ **100% Token-Driven** - All colors, spacing, typography controlled via design tokens
|
|
8
|
+
- ✅ **50+ Components** - Buttons, inputs, modals, tables, charts, and more
|
|
9
|
+
- ✅ **TypeScript Support** - Full type definitions for excellent IDE experience
|
|
10
|
+
- ✅ **Tailwind CSS v4** - Modern utility-first CSS framework
|
|
11
|
+
- ✅ **React Aria** - Accessible components out of the box
|
|
12
|
+
- ✅ **Storybook Documentation** - Interactive component examples
|
|
13
|
+
- ✅ **Dark Mode Ready** - Built-in dark mode support via tokens
|
|
14
|
+
- ✅ **Tree-Shakeable** - Import only what you need
|
|
8
15
|
|
|
9
|
-
|
|
16
|
+
## 📦 Installation
|
|
10
17
|
|
|
11
|
-
|
|
18
|
+
```bash
|
|
19
|
+
npm install @gsk-poc/untitled-ui-base
|
|
20
|
+
```
|
|
12
21
|
|
|
13
|
-
|
|
22
|
+
**Peer Dependencies:**
|
|
23
|
+
```bash
|
|
24
|
+
npm install react@^19.0.0 react-dom@^19.0.0
|
|
25
|
+
```
|
|
14
26
|
|
|
15
|
-
##
|
|
27
|
+
## 🚀 Quick Start
|
|
16
28
|
|
|
17
|
-
|
|
29
|
+
### 1. Import CSS (Required)
|
|
18
30
|
|
|
19
|
-
|
|
31
|
+
In your app entry point (`main.tsx` or `App.tsx`):
|
|
20
32
|
|
|
21
|
-
|
|
33
|
+
```typescript
|
|
34
|
+
import '@gsk-poc/untitled-ui-base/styles/tokens.css';
|
|
35
|
+
import '@gsk-poc/untitled-ui-base/styles/globals.css';
|
|
36
|
+
import '@gsk-poc/untitled-ui-base/styles/theme.css';
|
|
37
|
+
import '@gsk-poc/untitled-ui-base/styles/typography.css';
|
|
38
|
+
```
|
|
22
39
|
|
|
23
|
-
|
|
24
|
-
<br/>
|
|
25
|
-
**[Untitled UI Icons:](https://www.untitledui.com/icons)** A clean, consistent, and neutral icon library crafted specifically for modern UI design.
|
|
26
|
-
<br/>
|
|
27
|
-
**[Untitled UI file icons:](https://www.untitledui.com/resources/file-icons)** Free file format icons, designed specifically for modern web and UI design.
|
|
28
|
-
<br/>
|
|
29
|
-
**[Untitled UI flag icons:](https://www.untitledui.com/resources/flag-icons)** Free country flag icons, designed specifically for modern web and UI design.
|
|
30
|
-
<br/>
|
|
31
|
-
**[Untitled UI avatars:](https://www.untitledui.com/resources/avatars)** Free placeholder user avatars and profile pictures to use in your projects.
|
|
32
|
-
<br/>
|
|
33
|
-
**[Untitled UI logos:](https://www.untitledui.com/resources/logos)** Free fictional company logos to use in your projects.
|
|
40
|
+
**⚠️ Import Order Matters!** Always import in this sequence.
|
|
34
41
|
|
|
35
|
-
|
|
42
|
+
### 2. Configure Tailwind (Required)
|
|
36
43
|
|
|
37
|
-
|
|
44
|
+
Create or update `tailwind.config.js`:
|
|
38
45
|
|
|
39
|
-
|
|
40
|
-
|
|
46
|
+
```javascript
|
|
47
|
+
/** @type {import('tailwindcss').Config} */
|
|
48
|
+
export default {
|
|
49
|
+
content: [
|
|
50
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
51
|
+
// ⚠️ CRITICAL: Include the library
|
|
52
|
+
"./node_modules/@gsk-poc/untitled-ui-base/dist/**/*.{js,mjs}",
|
|
53
|
+
],
|
|
54
|
+
}
|
|
55
|
+
```
|
|
41
56
|
|
|
42
|
-
|
|
57
|
+
### 3. Add Tailwind Plugin to Vite
|
|
43
58
|
|
|
44
|
-
|
|
59
|
+
Update `vite.config.ts`:
|
|
60
|
+
|
|
61
|
+
```typescript
|
|
62
|
+
import { defineConfig } from 'vite'
|
|
63
|
+
import react from '@vitejs/plugin-react'
|
|
64
|
+
import tailwindcss from '@tailwindcss/vite'
|
|
65
|
+
|
|
66
|
+
export default defineConfig({
|
|
67
|
+
plugins: [
|
|
68
|
+
react(),
|
|
69
|
+
tailwindcss() // Add this
|
|
70
|
+
],
|
|
71
|
+
})
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### 4. Use Components
|
|
75
|
+
|
|
76
|
+
```tsx
|
|
77
|
+
import { Button, Input, Badge } from '@gsk-poc/untitled-ui-base';
|
|
78
|
+
|
|
79
|
+
function App() {
|
|
80
|
+
return (
|
|
81
|
+
<div>
|
|
82
|
+
<Button color="primary" size="md">
|
|
83
|
+
Click Me
|
|
84
|
+
</Button>
|
|
85
|
+
|
|
86
|
+
<Input
|
|
87
|
+
label="Email"
|
|
88
|
+
type="email"
|
|
89
|
+
placeholder="you@company.com"
|
|
90
|
+
/>
|
|
91
|
+
|
|
92
|
+
<Badge color="brand">New</Badge>
|
|
93
|
+
</div>
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## 📚 Available Components
|
|
99
|
+
|
|
100
|
+
### Base Components
|
|
101
|
+
- **Button** - Primary, secondary, tertiary, link, and destructive variants
|
|
102
|
+
- **Input** - Text inputs with validation and icons
|
|
103
|
+
- **Select** - Dropdown select with search
|
|
104
|
+
- **Checkbox** - Checkbox with label
|
|
105
|
+
- **Radio** - Radio button groups
|
|
106
|
+
- **Toggle** - Switch toggle
|
|
107
|
+
- **Textarea** - Multi-line text input
|
|
108
|
+
- **Badge** - Status badges in multiple colors
|
|
109
|
+
- **Avatar** - User avatars with initials or images
|
|
110
|
+
- **Tooltip** - Contextual tooltips
|
|
111
|
+
- **Progress Bar** - Progress indicators
|
|
112
|
+
- **Slider** - Range slider
|
|
113
|
+
- **Tags** - Tag chips with close button
|
|
114
|
+
|
|
115
|
+
### Application Components
|
|
116
|
+
- **Table** - Data tables with sorting and pagination
|
|
117
|
+
- **Tabs** - Tabbed interfaces
|
|
118
|
+
- **Modal** - Dialog modals
|
|
119
|
+
- **Pagination** - Page navigation
|
|
120
|
+
- **Carousel** - Image/content carousel
|
|
121
|
+
- **Date Picker** - Calendar date selection
|
|
122
|
+
- **Loading Indicator** - Spinners and loading states
|
|
123
|
+
- **Empty State** - No data placeholders
|
|
124
|
+
- **File Upload** - Drag-and-drop file uploads
|
|
125
|
+
|
|
126
|
+
### Foundation Components
|
|
127
|
+
- **Featured Icon** - Decorative icons with backgrounds
|
|
128
|
+
- **Rating Stars** - Star rating display
|
|
129
|
+
- **Social Icons** - Social media icons
|
|
130
|
+
|
|
131
|
+
## 🎨 Design Tokens
|
|
132
|
+
|
|
133
|
+
All styling is controlled through design tokens. You can customize the entire theme by updating token values.
|
|
134
|
+
|
|
135
|
+
### Token Categories
|
|
136
|
+
|
|
137
|
+
**Colors:**
|
|
138
|
+
```css
|
|
139
|
+
--color-brand-600 /* Primary brand color */
|
|
140
|
+
--color-text-primary /* Primary text color */
|
|
141
|
+
--color-bg-primary /* Primary background */
|
|
142
|
+
--color-border-primary /* Border color */
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
**Typography:**
|
|
146
|
+
```css
|
|
147
|
+
--font-family-body /* Body font */
|
|
148
|
+
--font-size-text-md /* Medium text size */
|
|
149
|
+
--line-height-text-md /* Text line height */
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
**Spacing:**
|
|
153
|
+
```css
|
|
154
|
+
--spacing-xs /* 4px */
|
|
155
|
+
--spacing-md /* 8px */
|
|
156
|
+
--spacing-xl /* 16px */
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
**Radius:**
|
|
160
|
+
```css
|
|
161
|
+
--radius-sm /* 0.25rem */
|
|
162
|
+
--radius-md /* 0.5rem */
|
|
163
|
+
--radius-lg /* 0.625rem */
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
### Customizing Tokens
|
|
167
|
+
|
|
168
|
+
To customize the design system, update `tokens/design-tokens.dtcg.json` in your fork:
|
|
169
|
+
|
|
170
|
+
```json
|
|
171
|
+
{
|
|
172
|
+
"Brand": {
|
|
173
|
+
"600": {
|
|
174
|
+
"$type": "color",
|
|
175
|
+
"$value": "rgba(46, 144, 250, 1)"
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
Then rebuild:
|
|
182
|
+
|
|
183
|
+
```bash
|
|
184
|
+
npm run build:tokens
|
|
185
|
+
npm run build
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
## 📖 Component API
|
|
189
|
+
|
|
190
|
+
### Button
|
|
191
|
+
|
|
192
|
+
```tsx
|
|
193
|
+
<Button
|
|
194
|
+
color="primary" | "secondary" | "tertiary" | "link-gray" | "link-color" |
|
|
195
|
+
"primary-destructive" | "secondary-destructive" | "tertiary-destructive"
|
|
196
|
+
size="sm" | "md" | "lg" | "xl"
|
|
197
|
+
isDisabled={boolean}
|
|
198
|
+
isLoading={boolean}
|
|
199
|
+
showTextWhileLoading={boolean}
|
|
200
|
+
iconLeading={ReactNode}
|
|
201
|
+
iconTrailing={ReactNode}
|
|
202
|
+
onClick={() => void}
|
|
203
|
+
>
|
|
204
|
+
Button Text
|
|
205
|
+
</Button>
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Input
|
|
209
|
+
|
|
210
|
+
```tsx
|
|
211
|
+
<Input
|
|
212
|
+
label="Email"
|
|
213
|
+
type="text" | "email" | "password" | "number" | "tel" | "url" | "search"
|
|
214
|
+
placeholder="Enter text..."
|
|
215
|
+
value={string}
|
|
216
|
+
onChange={(e) => void}
|
|
217
|
+
isDisabled={boolean}
|
|
218
|
+
isRequired={boolean}
|
|
219
|
+
isInvalid={boolean}
|
|
220
|
+
errorMessage="Error text"
|
|
221
|
+
helperText="Helper text"
|
|
222
|
+
iconLeading={ReactNode}
|
|
223
|
+
iconTrailing={ReactNode}
|
|
224
|
+
/>
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
### Badge
|
|
228
|
+
|
|
229
|
+
```tsx
|
|
230
|
+
<Badge
|
|
231
|
+
color="brand" | "gray" | "error" | "warning" | "success" |
|
|
232
|
+
"blue" | "indigo" | "purple" | "pink" | "orange"
|
|
233
|
+
size="sm" | "md" | "lg"
|
|
234
|
+
>
|
|
235
|
+
Badge Text
|
|
236
|
+
</Badge>
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
### Avatar
|
|
240
|
+
|
|
241
|
+
```tsx
|
|
242
|
+
<Avatar
|
|
243
|
+
text="AB"
|
|
244
|
+
size="xs" | "sm" | "md" | "lg" | "xl" | "2xl"
|
|
245
|
+
src="https://example.com/avatar.jpg"
|
|
246
|
+
/>
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
## 🎨 Theming
|
|
250
|
+
|
|
251
|
+
### Light & Dark Mode
|
|
252
|
+
|
|
253
|
+
Dark mode is supported through the `.dark-mode` class:
|
|
254
|
+
|
|
255
|
+
```tsx
|
|
256
|
+
<div className="dark-mode">
|
|
257
|
+
{/* All components will use dark mode tokens */}
|
|
258
|
+
<Button color="primary">Dark Mode Button</Button>
|
|
259
|
+
</div>
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
### Custom Themes
|
|
263
|
+
|
|
264
|
+
Create custom themes by overriding CSS custom properties:
|
|
265
|
+
|
|
266
|
+
```css
|
|
267
|
+
.my-custom-theme {
|
|
268
|
+
--color-brand-600: #your-brand-color;
|
|
269
|
+
--font-family-body: 'Your Font', sans-serif;
|
|
270
|
+
--radius-md: 0.75rem;
|
|
271
|
+
}
|
|
272
|
+
```
|
|
273
|
+
|
|
274
|
+
## 📦 Build & Development
|
|
275
|
+
|
|
276
|
+
### Scripts
|
|
277
|
+
|
|
278
|
+
```bash
|
|
279
|
+
# Build components
|
|
280
|
+
npm run build
|
|
281
|
+
|
|
282
|
+
# Generate design tokens
|
|
283
|
+
npm run build:tokens
|
|
284
|
+
|
|
285
|
+
# Start Storybook
|
|
286
|
+
npm run storybook
|
|
287
|
+
|
|
288
|
+
# Build Storybook
|
|
289
|
+
npm run build-storybook
|
|
290
|
+
|
|
291
|
+
# Type check
|
|
292
|
+
npm run type-check
|
|
293
|
+
|
|
294
|
+
# Lint
|
|
295
|
+
npm run lint
|
|
296
|
+
|
|
297
|
+
# Format code
|
|
298
|
+
npm run prettier
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
### Project Structure
|
|
302
|
+
|
|
303
|
+
```
|
|
304
|
+
@gsk-poc/untitled-ui-base/
|
|
305
|
+
├── components/ # React components
|
|
306
|
+
│ ├── base/ # Base UI components
|
|
307
|
+
│ ├── application/ # Complex components
|
|
308
|
+
│ └── foundations/ # Icons, logos
|
|
309
|
+
├── styles/ # CSS files
|
|
310
|
+
│ ├── globals.css # Tailwind entry
|
|
311
|
+
│ ├── theme.css # Token mappings (generated)
|
|
312
|
+
│ ├── tokens.css # Raw tokens (generated)
|
|
313
|
+
│ └── typography.css # Typography
|
|
314
|
+
├── tokens/ # Design tokens source
|
|
315
|
+
├── src/ # Entry points
|
|
316
|
+
├── dist/ # Build output
|
|
317
|
+
└── .storybook/ # Storybook config
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
## 🔧 Troubleshooting
|
|
321
|
+
|
|
322
|
+
### Components Render as Plain Text
|
|
323
|
+
|
|
324
|
+
**Cause:** Tailwind isn't generating utility classes.
|
|
325
|
+
|
|
326
|
+
**Solution:** Ensure `tailwind.config.js` includes the library in `content`:
|
|
327
|
+
|
|
328
|
+
```javascript
|
|
329
|
+
content: [
|
|
330
|
+
"./src/**/*.{js,ts,jsx,tsx}",
|
|
331
|
+
"./node_modules/@gsk-poc/untitled-ui-base/dist/**/*.{js,mjs}",
|
|
332
|
+
]
|
|
333
|
+
```
|
|
334
|
+
|
|
335
|
+
### CSS Not Loading
|
|
336
|
+
|
|
337
|
+
**Cause:** CSS files not imported or in wrong order.
|
|
338
|
+
|
|
339
|
+
**Solution:** Import in your entry file:
|
|
340
|
+
|
|
341
|
+
```typescript
|
|
342
|
+
import '@gsk-poc/untitled-ui-base/styles/tokens.css';
|
|
343
|
+
import '@gsk-poc/untitled-ui-base/styles/globals.css';
|
|
344
|
+
import '@gsk-poc/untitled-ui-base/styles/theme.css';
|
|
345
|
+
```
|
|
346
|
+
|
|
347
|
+
### TypeScript Errors
|
|
348
|
+
|
|
349
|
+
**Cause:** Missing type declarations.
|
|
350
|
+
|
|
351
|
+
**Solution:** Ensure you have `@types/react` installed:
|
|
352
|
+
|
|
353
|
+
```bash
|
|
354
|
+
npm install --save-dev @types/react @types/react-dom
|
|
355
|
+
```
|
|
356
|
+
|
|
357
|
+
## 🤝 Contributing
|
|
358
|
+
|
|
359
|
+
We welcome contributions! Please follow these steps:
|
|
360
|
+
|
|
361
|
+
1. Fork the repository
|
|
362
|
+
2. Create a feature branch
|
|
363
|
+
3. Make your changes
|
|
364
|
+
4. Add tests if applicable
|
|
365
|
+
5. Submit a pull request
|
|
366
|
+
|
|
367
|
+
## 📄 License
|
|
368
|
+
|
|
369
|
+
MIT License - see LICENSE file for details
|
|
370
|
+
|
|
371
|
+
## 🔗 Links
|
|
372
|
+
|
|
373
|
+
- **Storybook:** [View Component Documentation](#)
|
|
374
|
+
- **Repository:** [Azure DevOps](#)
|
|
375
|
+
- **Issues:** [Report Issues](#)
|
|
376
|
+
|
|
377
|
+
## 📞 Support
|
|
378
|
+
|
|
379
|
+
For questions or issues:
|
|
380
|
+
- Create an issue in the repository
|
|
381
|
+
- Contact the design system team
|
|
382
|
+
- Check the troubleshooting section above
|
|
383
|
+
|
|
384
|
+
## 🎯 Roadmap
|
|
385
|
+
|
|
386
|
+
- [ ] Additional chart components
|
|
387
|
+
- [ ] More form validation examples
|
|
388
|
+
- [ ] Accessibility improvements
|
|
389
|
+
- [ ] Performance optimizations
|
|
390
|
+
- [ ] More theme examples
|
|
391
|
+
|
|
392
|
+
---
|
|
393
|
+
|
|
394
|
+
**Built with ❤️ by the GSK Design System Team**
|