@datawire-ai/busyfile-design-library 1.0.6 → 1.0.8
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 +37 -236
- package/package.json +14 -19
- package/dist/index.js +0 -3164
- package/dist/index.umd.cjs +0 -22
package/README.md
CHANGED
|
@@ -1,223 +1,23 @@
|
|
|
1
1
|
# BusyFile Design System
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Design system library for Busyfile Applications
|
|
4
4
|
|
|
5
|
-
##
|
|
6
|
-
|
|
7
|
-
- **Modern Stack**: Built with React 19, TypeScript, and Tailwind CSS
|
|
8
|
-
- **Beautiful Design**: Clean, modern components with consistent styling
|
|
9
|
-
- **Accessible**: Built with accessibility in mind using Radix UI primitives
|
|
10
|
-
- **Responsive**: Mobile-first design that works on all screen sizes
|
|
11
|
-
- **TypeScript**: Full TypeScript support with excellent IntelliSense
|
|
12
|
-
- **Customizable**: Easy to customize with Tailwind CSS classes
|
|
13
|
-
- **Storybook**: Interactive component documentation and playground
|
|
14
|
-
- **Tested**: Built with testing in mind using Vitest
|
|
15
|
-
|
|
16
|
-
## 📦 Installation
|
|
5
|
+
## Installation
|
|
17
6
|
|
|
18
7
|
```bash
|
|
19
8
|
# Using npm
|
|
20
9
|
npm install busyfile-design-system
|
|
21
10
|
|
|
22
|
-
# Using yarn
|
|
23
|
-
yarn add busyfile-design-system
|
|
24
|
-
|
|
25
11
|
# Using pnpm
|
|
26
12
|
pnpm add busyfile-design-system
|
|
27
13
|
```
|
|
28
14
|
|
|
29
|
-
##
|
|
30
|
-
|
|
31
|
-
```tsx
|
|
32
|
-
import { Button } from 'busyfile-design-system';
|
|
33
|
-
|
|
34
|
-
function App() {
|
|
35
|
-
return (
|
|
36
|
-
<Button variant="default" onClick={() => alert('Hello!')}>
|
|
37
|
-
Click me
|
|
38
|
-
</Button>
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
## 🎨 Components
|
|
44
|
-
|
|
45
|
-
### Button
|
|
46
|
-
|
|
47
|
-
A versatile button component with multiple variants, sizes, and states.
|
|
48
|
-
|
|
49
|
-
#### Basic Usage
|
|
50
|
-
|
|
51
|
-
```tsx
|
|
52
|
-
import { Button } from 'busyfile-design-system';
|
|
53
|
-
|
|
54
|
-
// Default button
|
|
55
|
-
<Button>Click me</Button>
|
|
56
|
-
|
|
57
|
-
// With variant
|
|
58
|
-
<Button variant="destructive">Delete</Button>
|
|
59
|
-
|
|
60
|
-
// With size
|
|
61
|
-
<Button size="lg">Large Button</Button>
|
|
62
|
-
|
|
63
|
-
// With custom styling
|
|
64
|
-
<Button className="bg-gradient-to-r from-purple-500 to-pink-500">
|
|
65
|
-
Gradient Button
|
|
66
|
-
</Button>
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
#### Props
|
|
70
|
-
|
|
71
|
-
| Prop | Type | Default | Description |
|
|
72
|
-
|------|------|---------|-------------|
|
|
73
|
-
| `variant` | `'default' \| 'destructive' \| 'outline' \| 'secondary' \| 'ghost' \| 'link'` | `'default'` | The visual style variant of the button |
|
|
74
|
-
| `size` | `'default' \| 'sm' \| 'lg' \| 'icon'` | `'default'` | The size of the button |
|
|
75
|
-
| `asChild` | `boolean` | `false` | Whether to render as a different element using Radix UI Slot |
|
|
76
|
-
| `className` | `string` | `undefined` | Additional CSS classes to apply |
|
|
77
|
-
| `onClick` | `(event: React.MouseEvent<HTMLButtonElement>) => void` | `undefined` | Click event handler |
|
|
78
|
-
| `disabled` | `boolean` | `false` | Whether the button is disabled |
|
|
79
|
-
| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | The type of button |
|
|
80
|
-
|
|
81
|
-
#### Variants
|
|
82
|
-
|
|
83
|
-
```tsx
|
|
84
|
-
// Default - Blue button with white text
|
|
85
|
-
<Button variant="default">Default</Button>
|
|
86
|
-
|
|
87
|
-
// Destructive - Red button for dangerous actions
|
|
88
|
-
<Button variant="destructive">Delete</Button>
|
|
89
|
-
|
|
90
|
-
// Outline - Bordered button with transparent background
|
|
91
|
-
<Button variant="outline">Outline</Button>
|
|
92
|
-
|
|
93
|
-
// Secondary - Gray button for secondary actions
|
|
94
|
-
<Button variant="secondary">Cancel</Button>
|
|
95
|
-
|
|
96
|
-
// Ghost - Transparent button with hover effects
|
|
97
|
-
<Button variant="ghost">Ghost</Button>
|
|
98
|
-
|
|
99
|
-
// Link - Styled like a link
|
|
100
|
-
<Button variant="link">Learn More</Button>
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
#### Sizes
|
|
104
|
-
|
|
105
|
-
```tsx
|
|
106
|
-
// Small - Compact button
|
|
107
|
-
<Button size="sm">Small</Button>
|
|
108
|
-
|
|
109
|
-
// Default - Standard size
|
|
110
|
-
<Button size="default">Default</Button>
|
|
111
|
-
|
|
112
|
-
// Large - Prominent button
|
|
113
|
-
<Button size="lg">Large</Button>
|
|
114
|
-
|
|
115
|
-
// Icon - Square button for icons
|
|
116
|
-
<Button size="icon">
|
|
117
|
-
<PlusIcon />
|
|
118
|
-
</Button>
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
#### Custom Styling
|
|
122
|
-
|
|
123
|
-
```tsx
|
|
124
|
-
// Override default styles with Tailwind classes
|
|
125
|
-
<Button
|
|
126
|
-
variant="outline"
|
|
127
|
-
className="bg-gradient-to-r from-blue-500 to-purple-600 text-white border-0 rounded-full px-8 py-3 shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200"
|
|
128
|
-
>
|
|
129
|
-
Custom Styled
|
|
130
|
-
</Button>
|
|
131
|
-
|
|
132
|
-
// Common customizations
|
|
133
|
-
<Button className="bg-red-500 hover:bg-red-600 text-white rounded-full">
|
|
134
|
-
Rounded Red
|
|
135
|
-
</Button>
|
|
136
|
-
|
|
137
|
-
<Button className="border-2 border-dashed border-gray-400 bg-transparent text-gray-700">
|
|
138
|
-
Dashed Border
|
|
139
|
-
</Button>
|
|
140
|
-
|
|
141
|
-
<Button className="bg-green-500 hover:bg-green-600 text-white shadow-[0_0_20px_rgba(34,197,94,0.5)]">
|
|
142
|
-
Glow Effect
|
|
143
|
-
</Button>
|
|
144
|
-
```
|
|
145
|
-
|
|
146
|
-
#### Advanced Usage
|
|
147
|
-
|
|
148
|
-
```tsx
|
|
149
|
-
import { Button } from 'busyfile-design-system';
|
|
150
|
-
import { Heart, Download, Settings } from 'lucide-react';
|
|
151
|
-
|
|
152
|
-
// Button with icon
|
|
153
|
-
<Button>
|
|
154
|
-
<Heart className="mr-2" />
|
|
155
|
-
Like
|
|
156
|
-
</Button>
|
|
157
|
-
|
|
158
|
-
// Button as link
|
|
159
|
-
<Button asChild>
|
|
160
|
-
<a href="/download" download>
|
|
161
|
-
<Download className="mr-2" />
|
|
162
|
-
Download
|
|
163
|
-
</a>
|
|
164
|
-
</Button>
|
|
165
|
-
|
|
166
|
-
// Disabled state
|
|
167
|
-
<Button disabled variant="outline">
|
|
168
|
-
Processing...
|
|
169
|
-
</Button>
|
|
170
|
-
|
|
171
|
-
// Loading state with custom styling
|
|
172
|
-
<Button
|
|
173
|
-
disabled
|
|
174
|
-
className="bg-blue-600 text-white opacity-75 cursor-not-allowed"
|
|
175
|
-
>
|
|
176
|
-
<div className="animate-spin mr-2">⏳</div>
|
|
177
|
-
Loading...
|
|
178
|
-
</Button>
|
|
179
|
-
```
|
|
180
|
-
|
|
181
|
-
## 🎨 Styling & Theming
|
|
182
|
-
|
|
183
|
-
### Tailwind CSS Integration
|
|
184
|
-
|
|
185
|
-
The design system is built on top of Tailwind CSS, making it easy to customize:
|
|
186
|
-
|
|
187
|
-
```tsx
|
|
188
|
-
// Use any Tailwind utility classes
|
|
189
|
-
<Button className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white font-bold text-lg px-10 py-4 rounded-full shadow-2xl hover:shadow-3xl transform hover:scale-110 transition-all duration-300">
|
|
190
|
-
Fancy Button
|
|
191
|
-
</Button>
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
### CSS Custom Properties
|
|
195
|
-
|
|
196
|
-
You can also use CSS custom properties for consistent theming:
|
|
197
|
-
|
|
198
|
-
```css
|
|
199
|
-
:root {
|
|
200
|
-
--button-primary: #3b82f6;
|
|
201
|
-
--button-primary-hover: #2563eb;
|
|
202
|
-
--button-text: #ffffff;
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
.custom-button {
|
|
206
|
-
background-color: var(--button-primary);
|
|
207
|
-
color: var(--button-text);
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
.custom-button:hover {
|
|
211
|
-
background-color: var(--button-primary-hover);
|
|
212
|
-
}
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
## 🚀 Development
|
|
15
|
+
## Development
|
|
216
16
|
|
|
217
17
|
### Prerequisites
|
|
218
18
|
|
|
219
|
-
- Node.js
|
|
220
|
-
- pnpm
|
|
19
|
+
- Node.js - v22.19
|
|
20
|
+
- pnpm - v10.15
|
|
221
21
|
|
|
222
22
|
### Setup
|
|
223
23
|
|
|
@@ -242,6 +42,29 @@ pnpm build
|
|
|
242
42
|
pnpm test
|
|
243
43
|
```
|
|
244
44
|
|
|
45
|
+
### Development Workflow
|
|
46
|
+
|
|
47
|
+
1. Fork the repository
|
|
48
|
+
2. Create a feature branch
|
|
49
|
+
3. Make your changes
|
|
50
|
+
4. Create changeset `pnpm changeset:add && changeset:release`
|
|
51
|
+
5. Submit a pull request
|
|
52
|
+
|
|
53
|
+
## PRs & Changeset Process
|
|
54
|
+
- [ ] **Do not run `changeset` until your PR is ready for merge**
|
|
55
|
+
- [ ] Complete all required changes
|
|
56
|
+
- [ ] Apply PR review feedback
|
|
57
|
+
- [ ] Get the PR reviewed
|
|
58
|
+
- [ ] **Once reviews are done and PR is approved**
|
|
59
|
+
- [ ] Run the `changeset` scripts
|
|
60
|
+
- [ ] Get the PR reviewed and approved again
|
|
61
|
+
- [ ] Merge into `main`
|
|
62
|
+
- [ ] **If you receive comments after creating a `changeset`**
|
|
63
|
+
- [ ] Delete the generated `changeset` files
|
|
64
|
+
- [ ] Apply PR feedback
|
|
65
|
+
- [ ] Push the changes and get them reviewed again
|
|
66
|
+
- [ ] Repeat until the PR is ready for merge into `main`
|
|
67
|
+
|
|
245
68
|
### Project Structure
|
|
246
69
|
|
|
247
70
|
```
|
|
@@ -258,7 +81,7 @@ src/
|
|
|
258
81
|
└── index.ts # Main package exports
|
|
259
82
|
```
|
|
260
83
|
|
|
261
|
-
##
|
|
84
|
+
## Testing
|
|
262
85
|
|
|
263
86
|
```bash
|
|
264
87
|
# Run all tests
|
|
@@ -274,7 +97,7 @@ pnpm test:coverage
|
|
|
274
97
|
pnpm test:browser
|
|
275
98
|
```
|
|
276
99
|
|
|
277
|
-
##
|
|
100
|
+
## Storybook
|
|
278
101
|
|
|
279
102
|
Storybook provides an interactive playground for all components:
|
|
280
103
|
|
|
@@ -288,7 +111,7 @@ pnpm build-storybook
|
|
|
288
111
|
|
|
289
112
|
Visit http://localhost:6006 to explore components, test props, and see examples.
|
|
290
113
|
|
|
291
|
-
##
|
|
114
|
+
## Configuration
|
|
292
115
|
|
|
293
116
|
### Tailwind CSS
|
|
294
117
|
|
|
@@ -298,23 +121,23 @@ The design system includes a pre-configured Tailwind CSS setup. You can extend i
|
|
|
298
121
|
// tailwind.config.js
|
|
299
122
|
module.exports = {
|
|
300
123
|
content: [
|
|
301
|
-
|
|
302
|
-
|
|
124
|
+
'./src/**/*.{js,ts,jsx,tsx}',
|
|
125
|
+
'./node_modules/busyfile-design-system/**/*.{js,ts,jsx,tsx}',
|
|
303
126
|
],
|
|
304
127
|
theme: {
|
|
305
128
|
extend: {
|
|
306
129
|
// Your custom theme extensions
|
|
307
|
-
}
|
|
130
|
+
},
|
|
308
131
|
},
|
|
309
|
-
plugins: []
|
|
310
|
-
}
|
|
132
|
+
plugins: [],
|
|
133
|
+
};
|
|
311
134
|
```
|
|
312
135
|
|
|
313
136
|
### TypeScript
|
|
314
137
|
|
|
315
138
|
Full TypeScript support is included. No additional types package needed.
|
|
316
139
|
|
|
317
|
-
##
|
|
140
|
+
## Building
|
|
318
141
|
|
|
319
142
|
```bash
|
|
320
143
|
# Build for production
|
|
@@ -327,26 +150,4 @@ pnpm build:types
|
|
|
327
150
|
pnpm build-storybook
|
|
328
151
|
```
|
|
329
152
|
|
|
330
|
-
## 🤝 Contributing
|
|
331
|
-
|
|
332
|
-
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
|
|
333
|
-
|
|
334
|
-
### Development Workflow
|
|
335
|
-
|
|
336
|
-
1. Fork the repository
|
|
337
|
-
2. Create a feature branch
|
|
338
|
-
3. Make your changes
|
|
339
|
-
4. Add tests
|
|
340
|
-
5. Update documentation
|
|
341
|
-
6. Submit a pull request
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
## 🙏 Acknowledgments
|
|
345
|
-
|
|
346
|
-
- [Radix UI](https://www.radix-ui.com/) for accessible primitives
|
|
347
|
-
- [Tailwind CSS](https://tailwindcss.com/) for utility-first CSS
|
|
348
|
-
- [Lucide React](https://lucide.dev/) for beautiful icons
|
|
349
|
-
- [Storybook](https://storybook.js.org/) for component documentation
|
|
350
|
-
|
|
351
|
-
|
|
352
153
|
Made with ❤️ by the BusyFile team
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@datawire-ai/busyfile-design-library",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.8",
|
|
4
|
+
"description": "Design system for busyfile",
|
|
5
5
|
"private": false,
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.umd.cjs",
|
|
@@ -12,23 +12,15 @@
|
|
|
12
12
|
"import": "./dist/index.js",
|
|
13
13
|
"require": "./dist/index.umd.cjs",
|
|
14
14
|
"types": "./dist/index.d.ts"
|
|
15
|
-
}
|
|
15
|
+
},
|
|
16
|
+
"./style.css": "./dist/style.css"
|
|
16
17
|
},
|
|
17
18
|
"files": [
|
|
18
19
|
"dist",
|
|
20
|
+
"src/style.css",
|
|
19
21
|
"README.md"
|
|
20
22
|
],
|
|
21
|
-
"keywords": [
|
|
22
|
-
"react",
|
|
23
|
-
"typescript",
|
|
24
|
-
"tailwindcss",
|
|
25
|
-
"design-system",
|
|
26
|
-
"ui-components",
|
|
27
|
-
"component-library",
|
|
28
|
-
"accessible",
|
|
29
|
-
"modern",
|
|
30
|
-
"vite"
|
|
31
|
-
],
|
|
23
|
+
"keywords": [],
|
|
32
24
|
"author": {
|
|
33
25
|
"name": "BusyFile Team",
|
|
34
26
|
"email": "team@busyfile.com",
|
|
@@ -39,6 +31,7 @@
|
|
|
39
31
|
},
|
|
40
32
|
"dependencies": {
|
|
41
33
|
"@radix-ui/react-slot": "^1.2.3",
|
|
34
|
+
"@tailwindcss/vite": "^4.1.12",
|
|
42
35
|
"class-variance-authority": "^0.7.1",
|
|
43
36
|
"clsx": "^2.1.1",
|
|
44
37
|
"lucide-react": "^0.542.0",
|
|
@@ -57,6 +50,7 @@
|
|
|
57
50
|
"@storybook/addon-vitest": "^9.1.3",
|
|
58
51
|
"@storybook/react": "^9.1.3",
|
|
59
52
|
"@storybook/react-vite": "^9.1.3",
|
|
53
|
+
"@tailwindcss/postcss": "^4.1.10",
|
|
60
54
|
"@types/react": "^19",
|
|
61
55
|
"@types/react-dom": "^19",
|
|
62
56
|
"@typescript-eslint/eslint-plugin": "^8.15.0",
|
|
@@ -64,15 +58,16 @@
|
|
|
64
58
|
"@vitejs/plugin-react": "^4.3.4",
|
|
65
59
|
"@vitest/browser": "^3.2.4",
|
|
66
60
|
"@vitest/coverage-v8": "^3.2.4",
|
|
67
|
-
"autoprefixer": "^10.4.
|
|
61
|
+
"autoprefixer": "^10.4.21",
|
|
68
62
|
"eslint": "^9",
|
|
69
63
|
"eslint-plugin-react": "^7.37.2",
|
|
70
64
|
"eslint-plugin-react-hooks": "^5.0.0",
|
|
71
65
|
"eslint-plugin-storybook": "^9.1.3",
|
|
66
|
+
"husky": "^9.1.7",
|
|
72
67
|
"playwright": "^1.55.0",
|
|
73
68
|
"prettier": "^3.0.0",
|
|
74
69
|
"storybook": "^9.1.3",
|
|
75
|
-
"tailwindcss": "^
|
|
70
|
+
"tailwindcss": "^4.1.12",
|
|
76
71
|
"tw-animate-css": "^1.3.7",
|
|
77
72
|
"typescript": "^5",
|
|
78
73
|
"vite": "^5.4.10",
|
|
@@ -83,8 +78,8 @@
|
|
|
83
78
|
"react-dom": ">=18.0.0"
|
|
84
79
|
},
|
|
85
80
|
"engines": {
|
|
86
|
-
"node": "22.
|
|
87
|
-
"pnpm": "10.
|
|
81
|
+
"node": ">=22.0.0",
|
|
82
|
+
"pnpm": ">=10.0.0"
|
|
88
83
|
},
|
|
89
84
|
"scripts": {
|
|
90
85
|
"dev": "vite",
|
|
@@ -95,7 +90,7 @@
|
|
|
95
90
|
"test": "vitest",
|
|
96
91
|
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
97
92
|
"lint:fix": "eslint src --ext ts,tsx --fix",
|
|
98
|
-
"format": "prettier --write src
|
|
93
|
+
"format": "prettier --write src/**/*",
|
|
99
94
|
"changeset:add": "changeset",
|
|
100
95
|
"changeset:version": "changeset version",
|
|
101
96
|
"changeset:release": "changeset publish --access public",
|