@tanishraj/ui-kit 1.0.9 → 1.1.0
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/globals.css +58 -0
- package/dist/index.cjs.js +0 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +0 -1
- package/dist/index.es.js.map +1 -1
- package/package.json +12 -6
- package/readme.md +47 -3
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanishraj/ui-kit",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "A production-ready React component library with modern tooling, Storybook docs, and TypeScript support.",
|
|
5
5
|
"author": "Tanishraj",
|
|
6
6
|
"license": "MIT",
|
|
@@ -23,9 +23,9 @@
|
|
|
23
23
|
"require": "./dist/index.cjs.js"
|
|
24
24
|
},
|
|
25
25
|
"./globals.css": {
|
|
26
|
-
"import": "./dist/
|
|
27
|
-
"require": "./dist/
|
|
28
|
-
"default": "./dist/
|
|
26
|
+
"import": "./dist/globals.css",
|
|
27
|
+
"require": "./dist/globals.css",
|
|
28
|
+
"default": "./dist/globals.css"
|
|
29
29
|
},
|
|
30
30
|
"./theme-primary.css": {
|
|
31
31
|
"import": "./dist/themes/primary.css",
|
|
@@ -34,7 +34,13 @@
|
|
|
34
34
|
},
|
|
35
35
|
"./theme-secondary.css": {
|
|
36
36
|
"import": "./dist/themes/secondary.css",
|
|
37
|
-
"require": "./dist/themes/secondary.css"
|
|
37
|
+
"require": "./dist/themes/secondary.css",
|
|
38
|
+
"default": "./dist/themes/secondary.css"
|
|
39
|
+
},
|
|
40
|
+
"./themes/*": {
|
|
41
|
+
"import": "./dist/themes/*.css",
|
|
42
|
+
"require": "./dist/themes/*.css",
|
|
43
|
+
"default": "./dist/themes/*.css"
|
|
38
44
|
}
|
|
39
45
|
},
|
|
40
46
|
"publishConfig": {
|
|
@@ -45,7 +51,7 @@
|
|
|
45
51
|
],
|
|
46
52
|
"scripts": {
|
|
47
53
|
"build": "rm -rf dist && vite build && npm run copy:theme && rm -rf dist/src",
|
|
48
|
-
"copy:theme": "mkdir -p dist/themes && cp src/themes/primary.css dist/themes/primary.css && cp src/themes/secondary.css dist/themes/secondary.css",
|
|
54
|
+
"copy:theme": "mkdir -p dist/themes && cp src/themes/primary.css dist/themes/primary.css && cp src/themes/secondary.css dist/themes/secondary.css && cp src/styles/globals.css dist/globals.css",
|
|
49
55
|
"prepublishOnly": "npm run build",
|
|
50
56
|
"test": "vitest",
|
|
51
57
|
"test:watch": "vitest --watch",
|
package/readme.md
CHANGED
|
@@ -63,20 +63,64 @@ import {
|
|
|
63
63
|
AvatarGroup,
|
|
64
64
|
} from '@tanishraj/ui-kit';
|
|
65
65
|
import '@tanishraj/ui-kit/globals.css';
|
|
66
|
+
import '@tanishraj/ui-kit/theme-primary.css';
|
|
66
67
|
|
|
67
68
|
export function Demo() {
|
|
68
69
|
return <Button variant="primary">Get Started</Button>;
|
|
69
70
|
}
|
|
70
71
|
```
|
|
71
72
|
|
|
72
|
-
|
|
73
|
+
## Setup for app consumers
|
|
74
|
+
|
|
75
|
+
The library is built to be consumed like a standard React UI package:
|
|
76
|
+
|
|
77
|
+
1. Install dependency
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npm install @tanishraj/ui-kit
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
2. Import global styles once (usually near your app entry):
|
|
84
|
+
|
|
85
|
+
```ts
|
|
86
|
+
import '@tanishraj/ui-kit/globals.css';
|
|
87
|
+
import '@tanishraj/ui-kit/theme-primary.css'; // or theme-secondary.css
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
3. Use component APIs directly from the package.
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
import { Button, Avatar } from '@tanishraj/ui-kit';
|
|
94
|
+
|
|
95
|
+
export default function Demo() {
|
|
96
|
+
return (
|
|
97
|
+
<div className="flex items-center gap-4">
|
|
98
|
+
<Button variant="primary" size="md">
|
|
99
|
+
Primary Button
|
|
100
|
+
</Button>
|
|
101
|
+
<Avatar initials="AB" name="Amit B." variant="primary" />
|
|
102
|
+
</div>
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### Theme file options
|
|
73
108
|
|
|
74
109
|
```ts
|
|
75
110
|
import '@tanishraj/ui-kit/theme-primary.css';
|
|
76
|
-
// Optional:
|
|
77
|
-
|
|
111
|
+
// Optional: use another packaged theme
|
|
112
|
+
import '@tanishraj/ui-kit/theme-secondary.css';
|
|
78
113
|
```
|
|
79
114
|
|
|
115
|
+
You can also import through:
|
|
116
|
+
|
|
117
|
+
```ts
|
|
118
|
+
import '@tanishraj/ui-kit/themes/primary.css';
|
|
119
|
+
import '@tanishraj/ui-kit/themes/secondary.css';
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
If your app uses a custom design token strategy, import one packaged theme and override required CSS variables in your own stylesheet after the theme import.
|
|
123
|
+
|
|
80
124
|
## Component Library API
|
|
81
125
|
|
|
82
126
|
- Components are exported from the package entrypoint in a single import surface.
|