@alkimi.org/ui-kit 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/README.md → README.github.md} +118 -0
- package/README.md +0 -118
- package/package.json +4 -3
|
@@ -192,6 +192,124 @@ function App() {
|
|
|
192
192
|
}
|
|
193
193
|
```
|
|
194
194
|
|
|
195
|
+
## Adding More Components
|
|
196
|
+
|
|
197
|
+
To add more shadcn/ui components to this library:
|
|
198
|
+
|
|
199
|
+
1. Use the shadcn CLI to add components:
|
|
200
|
+
|
|
201
|
+
```bash
|
|
202
|
+
npx shadcn-ui@latest add [component-name]
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
2. Export the new component in [src/index.ts](src/index.ts):
|
|
206
|
+
|
|
207
|
+
```tsx
|
|
208
|
+
export { ComponentName } from "./components/component-name"
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
3. Rebuild the library:
|
|
212
|
+
```bash
|
|
213
|
+
npm run build
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
## Development
|
|
217
|
+
|
|
218
|
+
### Running the Demo
|
|
219
|
+
|
|
220
|
+
To see the components in action, run the demo application:
|
|
221
|
+
|
|
222
|
+
```bash
|
|
223
|
+
cd demo
|
|
224
|
+
npm install
|
|
225
|
+
npm run dev
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
Then open [http://localhost:5173](http://localhost:5173) in your browser.
|
|
229
|
+
|
|
230
|
+
The demo showcases all available components with interactive examples, including:
|
|
231
|
+
|
|
232
|
+
- All button variants and sizes
|
|
233
|
+
- Card layouts and compositions
|
|
234
|
+
- Dark mode toggle
|
|
235
|
+
- Interactive component states
|
|
236
|
+
|
|
237
|
+
### Build
|
|
238
|
+
|
|
239
|
+
Build the library for production:
|
|
240
|
+
|
|
241
|
+
```bash
|
|
242
|
+
npm run build
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
### Watch Mode
|
|
246
|
+
|
|
247
|
+
Build the library in watch mode during development:
|
|
248
|
+
|
|
249
|
+
```bash
|
|
250
|
+
npm run dev
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
### Type Check
|
|
254
|
+
|
|
255
|
+
Run TypeScript type checking:
|
|
256
|
+
|
|
257
|
+
```bash
|
|
258
|
+
npm run type-check
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
### Storybook
|
|
262
|
+
|
|
263
|
+
View and develop components in isolation using Storybook:
|
|
264
|
+
|
|
265
|
+
```bash
|
|
266
|
+
npm run storybook
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
This will start Storybook on [http://localhost:6006](http://localhost:6006).
|
|
270
|
+
|
|
271
|
+
#### Building Storybook for Deployment
|
|
272
|
+
|
|
273
|
+
To build a static version of Storybook for deployment:
|
|
274
|
+
|
|
275
|
+
```bash
|
|
276
|
+
npm run build-storybook
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
This will generate a static site in the `storybook-static` directory that you can deploy to any static hosting service.
|
|
280
|
+
|
|
281
|
+
#### Deploying to Vercel
|
|
282
|
+
|
|
283
|
+
**Option 1: Using Vercel Dashboard (No Terminal Required)**
|
|
284
|
+
|
|
285
|
+
1. Build Storybook locally: `npm run build-storybook`
|
|
286
|
+
2. Go to [vercel.com](https://vercel.com) and log in
|
|
287
|
+
3. Click "Add New..." → "Project"
|
|
288
|
+
4. If this is your first time:
|
|
289
|
+
- Import your repository from GitHub/GitLab/Bitbucket
|
|
290
|
+
- In the project settings, configure:
|
|
291
|
+
- **Build Command**: `npm run build-storybook`
|
|
292
|
+
- **Output Directory**: `storybook-static`
|
|
293
|
+
- **Install Command**: `npm install`
|
|
294
|
+
5. Click "Deploy"
|
|
295
|
+
|
|
296
|
+
Vercel will automatically deploy your Storybook and provide you with a URL. Every time you push to your main branch, Vercel will rebuild and redeploy automatically.
|
|
297
|
+
|
|
298
|
+
**Option 2: Using Vercel CLI**
|
|
299
|
+
|
|
300
|
+
1. Build Storybook: `npm run build-storybook`
|
|
301
|
+
2. Install Vercel CLI (if not already installed): `npm i -g vercel`
|
|
302
|
+
3. Deploy: `vercel storybook-static`
|
|
303
|
+
|
|
304
|
+
## Publishing to npm
|
|
305
|
+
|
|
306
|
+
1. Update the version number in [package.json](package.json) (e.g., from `0.1.3` to `0.1.4`)
|
|
307
|
+
2. Build the library: `npm run build`
|
|
308
|
+
3. Login to npm (if not already logged in): `npm login`
|
|
309
|
+
4. Publish: `npm publish`
|
|
310
|
+
|
|
311
|
+
**Note:** Make sure to bump the version in [package.json](package.json) before publishing any changes to avoid conflicts with existing versions on npm.
|
|
312
|
+
|
|
195
313
|
## License
|
|
196
314
|
|
|
197
315
|
MIT
|
package/README.md
CHANGED
|
@@ -192,124 +192,6 @@ function App() {
|
|
|
192
192
|
}
|
|
193
193
|
```
|
|
194
194
|
|
|
195
|
-
## Adding More Components
|
|
196
|
-
|
|
197
|
-
To add more shadcn/ui components to this library:
|
|
198
|
-
|
|
199
|
-
1. Use the shadcn CLI to add components:
|
|
200
|
-
|
|
201
|
-
```bash
|
|
202
|
-
npx shadcn-ui@latest add [component-name]
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
2. Export the new component in [src/index.ts](src/index.ts):
|
|
206
|
-
|
|
207
|
-
```tsx
|
|
208
|
-
export { ComponentName } from "./components/component-name"
|
|
209
|
-
```
|
|
210
|
-
|
|
211
|
-
3. Rebuild the library:
|
|
212
|
-
```bash
|
|
213
|
-
npm run build
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
## Development
|
|
217
|
-
|
|
218
|
-
### Running the Demo
|
|
219
|
-
|
|
220
|
-
To see the components in action, run the demo application:
|
|
221
|
-
|
|
222
|
-
```bash
|
|
223
|
-
cd demo
|
|
224
|
-
npm install
|
|
225
|
-
npm run dev
|
|
226
|
-
```
|
|
227
|
-
|
|
228
|
-
Then open [http://localhost:5173](http://localhost:5173) in your browser.
|
|
229
|
-
|
|
230
|
-
The demo showcases all available components with interactive examples, including:
|
|
231
|
-
|
|
232
|
-
- All button variants and sizes
|
|
233
|
-
- Card layouts and compositions
|
|
234
|
-
- Dark mode toggle
|
|
235
|
-
- Interactive component states
|
|
236
|
-
|
|
237
|
-
### Build
|
|
238
|
-
|
|
239
|
-
Build the library for production:
|
|
240
|
-
|
|
241
|
-
```bash
|
|
242
|
-
npm run build
|
|
243
|
-
```
|
|
244
|
-
|
|
245
|
-
### Watch Mode
|
|
246
|
-
|
|
247
|
-
Build the library in watch mode during development:
|
|
248
|
-
|
|
249
|
-
```bash
|
|
250
|
-
npm run dev
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
### Type Check
|
|
254
|
-
|
|
255
|
-
Run TypeScript type checking:
|
|
256
|
-
|
|
257
|
-
```bash
|
|
258
|
-
npm run type-check
|
|
259
|
-
```
|
|
260
|
-
|
|
261
|
-
### Storybook
|
|
262
|
-
|
|
263
|
-
View and develop components in isolation using Storybook:
|
|
264
|
-
|
|
265
|
-
```bash
|
|
266
|
-
npm run storybook
|
|
267
|
-
```
|
|
268
|
-
|
|
269
|
-
This will start Storybook on [http://localhost:6006](http://localhost:6006).
|
|
270
|
-
|
|
271
|
-
#### Building Storybook for Deployment
|
|
272
|
-
|
|
273
|
-
To build a static version of Storybook for deployment:
|
|
274
|
-
|
|
275
|
-
```bash
|
|
276
|
-
npm run build-storybook
|
|
277
|
-
```
|
|
278
|
-
|
|
279
|
-
This will generate a static site in the `storybook-static` directory that you can deploy to any static hosting service.
|
|
280
|
-
|
|
281
|
-
#### Deploying to Vercel
|
|
282
|
-
|
|
283
|
-
**Option 1: Using Vercel Dashboard (No Terminal Required)**
|
|
284
|
-
|
|
285
|
-
1. Build Storybook locally: `npm run build-storybook`
|
|
286
|
-
2. Go to [vercel.com](https://vercel.com) and log in
|
|
287
|
-
3. Click "Add New..." → "Project"
|
|
288
|
-
4. If this is your first time:
|
|
289
|
-
- Import your repository from GitHub/GitLab/Bitbucket
|
|
290
|
-
- In the project settings, configure:
|
|
291
|
-
- **Build Command**: `npm run build-storybook`
|
|
292
|
-
- **Output Directory**: `storybook-static`
|
|
293
|
-
- **Install Command**: `npm install`
|
|
294
|
-
5. Click "Deploy"
|
|
295
|
-
|
|
296
|
-
Vercel will automatically deploy your Storybook and provide you with a URL. Every time you push to your main branch, Vercel will rebuild and redeploy automatically.
|
|
297
|
-
|
|
298
|
-
**Option 2: Using Vercel CLI**
|
|
299
|
-
|
|
300
|
-
1. Build Storybook: `npm run build-storybook`
|
|
301
|
-
2. Install Vercel CLI (if not already installed): `npm i -g vercel`
|
|
302
|
-
3. Deploy: `vercel storybook-static`
|
|
303
|
-
|
|
304
|
-
## Publishing to npm
|
|
305
|
-
|
|
306
|
-
1. Update the version number in [package.json](package.json) (e.g., from `0.1.3` to `0.1.4`)
|
|
307
|
-
2. Build the library: `npm run build`
|
|
308
|
-
3. Login to npm (if not already logged in): `npm login`
|
|
309
|
-
4. Publish: `npm publish`
|
|
310
|
-
|
|
311
|
-
**Note:** Make sure to bump the version in [package.json](package.json) before publishing any changes to avoid conflicts with existing versions on npm.
|
|
312
|
-
|
|
313
195
|
## License
|
|
314
196
|
|
|
315
197
|
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alkimi.org/ui-kit",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.7",
|
|
4
4
|
"description": "A React component library built with shadcn/ui and Tailwind CSS",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -17,12 +17,13 @@
|
|
|
17
17
|
"dist"
|
|
18
18
|
],
|
|
19
19
|
"scripts": {
|
|
20
|
-
"build": "tsup && cp dist/index.css dist/styles.css && cp dist/index.css.map dist/styles.css.map
|
|
20
|
+
"build": "tsup && cp dist/index.css dist/styles.css && cp dist/index.css.map dist/styles.css.map",
|
|
21
21
|
"dev": "tsup --watch",
|
|
22
22
|
"type-check": "tsc --noEmit",
|
|
23
23
|
"storybook": "storybook dev -p 6006",
|
|
24
24
|
"build-storybook": "storybook build",
|
|
25
|
-
"prepublishOnly": "npm run build"
|
|
25
|
+
"prepublishOnly": "npm run build && mv README.md README.github.md && cp README.npm.md README.md",
|
|
26
|
+
"postpublish": "mv README.github.md README.md"
|
|
26
27
|
},
|
|
27
28
|
"keywords": [
|
|
28
29
|
"react",
|