@tanishraj/ui-kit 2.0.1 → 2.1.1
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/index.cjs.js +2 -2
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +118 -0
- package/dist/index.es.js +50 -32
- package/dist/index.es.js.map +1 -1
- package/package.json +2 -1
- package/readme.md +121 -18
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanishraj/ui-kit",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.1",
|
|
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",
|
|
@@ -67,6 +67,7 @@
|
|
|
67
67
|
"type-check": "tsc --noEmit"
|
|
68
68
|
},
|
|
69
69
|
"dependencies": {
|
|
70
|
+
"@floating-ui/react": "^0.27.19",
|
|
70
71
|
"class-variance-authority": "^0.7.1",
|
|
71
72
|
"clsx": "^2.1.1",
|
|
72
73
|
"d3": "^7.9.0",
|
package/readme.md
CHANGED
|
@@ -5,13 +5,14 @@
|
|
|
5
5
|
[](https://github.com/tanishraj/ui-kit/blob/develop/LICENSE)
|
|
6
6
|
[](https://tanishraj.github.io/ui-kit/)
|
|
7
7
|
|
|
8
|
-
A production-ready React + TypeScript UI component library built with Vite, Storybook, Tailwind CSS, CVA, and strict quality gates.
|
|
8
|
+
A production-ready React + TypeScript UI component library built with Vite, Storybook, Tailwind CSS, CVA, Floating UI, and strict quality gates.
|
|
9
9
|
|
|
10
10
|
## Table of Contents
|
|
11
11
|
|
|
12
12
|
- [About](#about)
|
|
13
13
|
- [Installation](#installation)
|
|
14
14
|
- [Usage](#usage)
|
|
15
|
+
- [Setup for app consumers](#setup-for-app-consumers)
|
|
15
16
|
- [Component Library API](#component-library-api)
|
|
16
17
|
- [Theming](#theming)
|
|
17
18
|
- [Accessibility](#accessibility)
|
|
@@ -21,6 +22,7 @@ A production-ready React + TypeScript UI component library built with Vite, Stor
|
|
|
21
22
|
- [Publishing](#publishing)
|
|
22
23
|
- [Release Process](#release-process)
|
|
23
24
|
- [Repository Structure](#repository-structure)
|
|
25
|
+
- [Components](#components)
|
|
24
26
|
- [Contributing](#contributing)
|
|
25
27
|
- [License](#license)
|
|
26
28
|
- [Changelog](#changelog)
|
|
@@ -57,15 +59,25 @@ pnpm add @tanishraj/ui-kit
|
|
|
57
59
|
|
|
58
60
|
```tsx
|
|
59
61
|
import {
|
|
60
|
-
|
|
62
|
+
Accordion,
|
|
63
|
+
Alert,
|
|
64
|
+
AnimatePresence,
|
|
65
|
+
AnimatePresenceChild,
|
|
61
66
|
Badge,
|
|
62
67
|
Avatar,
|
|
63
68
|
AvatarGroup,
|
|
64
69
|
Breadcrumb,
|
|
70
|
+
Button,
|
|
71
|
+
ButtonGroup,
|
|
65
72
|
Checkbox,
|
|
66
73
|
CheckboxGroup,
|
|
67
74
|
Chip,
|
|
68
75
|
Divider,
|
|
76
|
+
Drawer,
|
|
77
|
+
Link,
|
|
78
|
+
OrganizationChart,
|
|
79
|
+
Popover,
|
|
80
|
+
Portal,
|
|
69
81
|
} from '@tanishraj/ui-kit';
|
|
70
82
|
|
|
71
83
|
export function Demo() {
|
|
@@ -88,10 +100,23 @@ npm install @tanishraj/ui-kit
|
|
|
88
100
|
Use component APIs directly from the package.
|
|
89
101
|
|
|
90
102
|
```tsx
|
|
91
|
-
import {
|
|
103
|
+
import {
|
|
104
|
+
AnimatePresence,
|
|
105
|
+
AnimatePresenceChild,
|
|
106
|
+
Avatar,
|
|
107
|
+
Button,
|
|
108
|
+
Chip,
|
|
109
|
+
Divider,
|
|
110
|
+
Drawer,
|
|
111
|
+
Link,
|
|
112
|
+
Popover,
|
|
113
|
+
} from '@tanishraj/ui-kit';
|
|
92
114
|
import { Plus } from 'lucide-react';
|
|
115
|
+
import { useState } from 'react';
|
|
93
116
|
|
|
94
117
|
export default function Demo() {
|
|
118
|
+
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
119
|
+
|
|
95
120
|
return (
|
|
96
121
|
<div className='flex items-center gap-4'>
|
|
97
122
|
<Button variant='primary' size='md'>
|
|
@@ -101,7 +126,32 @@ export default function Demo() {
|
|
|
101
126
|
<Chip icon={Plus} variant='success'>
|
|
102
127
|
Active
|
|
103
128
|
</Chip>
|
|
129
|
+
<Button onClick={() => setDrawerOpen(true)}>Open Drawer</Button>
|
|
130
|
+
<Popover
|
|
131
|
+
title='Title'
|
|
132
|
+
trigger={<Button appearance='filled'>Open Popover</Button>}
|
|
133
|
+
>
|
|
134
|
+
Slot Area
|
|
135
|
+
</Popover>
|
|
136
|
+
<Drawer
|
|
137
|
+
footer={<Button onClick={() => setDrawerOpen(false)}>Close</Button>}
|
|
138
|
+
onClose={() => setDrawerOpen(false)}
|
|
139
|
+
open={drawerOpen}
|
|
140
|
+
title='Title'
|
|
141
|
+
>
|
|
142
|
+
Drawer content
|
|
143
|
+
</Drawer>
|
|
144
|
+
<Link external href='/components' leadingIcon={Plus}>
|
|
145
|
+
Components
|
|
146
|
+
</Link>
|
|
104
147
|
<Divider className='w-32' />
|
|
148
|
+
<AnimatePresence presence={drawerOpen}>
|
|
149
|
+
<AnimatePresenceChild>
|
|
150
|
+
<div className='animate-in fade-in duration-500'>
|
|
151
|
+
Animated helper content
|
|
152
|
+
</div>
|
|
153
|
+
</AnimatePresenceChild>
|
|
154
|
+
</AnimatePresence>
|
|
105
155
|
</div>
|
|
106
156
|
);
|
|
107
157
|
}
|
|
@@ -110,6 +160,12 @@ export default function Demo() {
|
|
|
110
160
|
### Theme file options
|
|
111
161
|
|
|
112
162
|
```ts
|
|
163
|
+
// Optional: import globals explicitly when your bundler does not auto-include package CSS
|
|
164
|
+
import '@tanishraj/ui-kit/globals.css';
|
|
165
|
+
|
|
166
|
+
// Optional: import base color tokens directly
|
|
167
|
+
import '@tanishraj/ui-kit/base.css';
|
|
168
|
+
|
|
113
169
|
// Optional: import this only when you want secondary theme
|
|
114
170
|
import '@tanishraj/ui-kit/theme-secondary.css';
|
|
115
171
|
```
|
|
@@ -127,6 +183,7 @@ To add a new packaged theme later:
|
|
|
127
183
|
You can also import through:
|
|
128
184
|
|
|
129
185
|
```ts
|
|
186
|
+
import '@tanishraj/ui-kit/themes/primary.css';
|
|
130
187
|
import '@tanishraj/ui-kit/themes/secondary.css';
|
|
131
188
|
```
|
|
132
189
|
|
|
@@ -148,11 +205,16 @@ If your app uses a custom design token strategy, import one packaged theme and o
|
|
|
148
205
|
|
|
149
206
|
```tsx
|
|
150
207
|
import {
|
|
208
|
+
AnimatePresence,
|
|
209
|
+
AnimatePresenceChild,
|
|
151
210
|
Breadcrumb,
|
|
152
211
|
Button,
|
|
153
212
|
CheckboxGroup,
|
|
154
213
|
Chip,
|
|
155
214
|
Divider,
|
|
215
|
+
Drawer,
|
|
216
|
+
Link,
|
|
217
|
+
Popover,
|
|
156
218
|
} from '@tanishraj/ui-kit';
|
|
157
219
|
import { Home, Plus, Tag } from 'lucide-react';
|
|
158
220
|
|
|
@@ -173,6 +235,17 @@ export function ComponentExamples() {
|
|
|
173
235
|
Filter
|
|
174
236
|
</Chip>
|
|
175
237
|
|
|
238
|
+
<Link
|
|
239
|
+
external
|
|
240
|
+
href='/components/link'
|
|
241
|
+
leadingIcon={Home}
|
|
242
|
+
truncate
|
|
243
|
+
underline='always'
|
|
244
|
+
variant='primary'
|
|
245
|
+
>
|
|
246
|
+
Link Truncated
|
|
247
|
+
</Link>
|
|
248
|
+
|
|
176
249
|
<CheckboxGroup
|
|
177
250
|
label='Notification channels'
|
|
178
251
|
options={[
|
|
@@ -187,6 +260,23 @@ export function ComponentExamples() {
|
|
|
187
260
|
Add item
|
|
188
261
|
</Button>
|
|
189
262
|
</Divider>
|
|
263
|
+
|
|
264
|
+
<Popover
|
|
265
|
+
placement='bottom'
|
|
266
|
+
title='Title'
|
|
267
|
+
trigger={<Button variant='primary'>Open popover</Button>}
|
|
268
|
+
variant='primary'
|
|
269
|
+
>
|
|
270
|
+
Slot Area
|
|
271
|
+
</Popover>
|
|
272
|
+
|
|
273
|
+
<AnimatePresence presence>
|
|
274
|
+
<AnimatePresenceChild>
|
|
275
|
+
<div className='animate-in slide-in-from-right duration-500'>
|
|
276
|
+
Presence-managed content
|
|
277
|
+
</div>
|
|
278
|
+
</AnimatePresenceChild>
|
|
279
|
+
</AnimatePresence>
|
|
190
280
|
</div>
|
|
191
281
|
);
|
|
192
282
|
}
|
|
@@ -194,10 +284,15 @@ export function ComponentExamples() {
|
|
|
194
284
|
|
|
195
285
|
### Component Notes
|
|
196
286
|
|
|
287
|
+
- `AnimatePresence` and `AnimatePresenceChild` keep exiting elements mounted until their CSS `animationend` event fires. Use them with `data-state`, `animate-in`, `animate-out`, and slide/fade utilities for smooth enter/exit motion.
|
|
197
288
|
- `Breadcrumb` supports `appearance="ghost" | "outline"` and `separator=">" | "/"`. The chevron separator is rendered as an icon.
|
|
198
289
|
- `Checkbox` and `CheckboxGroup` support `shape="square" | "circle"`, with `square` as the default.
|
|
199
290
|
- `Chip` supports `variant`, `appearance="filled" | "outline"`, `shape`, `size`, `inverted`, optional `icon`, and removable chips via `onClose`.
|
|
200
291
|
- `Divider` supports `orientation="horizontal" | "vertical"` and optional centered content through `children`.
|
|
292
|
+
- `Drawer` is controlled with `open` and `onClose`, supports `placement="right" | "left" | "top" | "bottom"`, `size="sm" | "md" | "lg" | "full"`, overlay close, Escape close, footer actions, Portal targeting, and placement-aware slide animations.
|
|
293
|
+
- `Portal` renders to `document.body` by default and can target a custom container via `container`, `containerRef`, or `containerId`.
|
|
294
|
+
- `Link` supports `variant`, `size`, `underline="none" | "hover" | "always"`, `inverted`, `disabled`, `truncate`, optional leading/trailing icons, and `external` links.
|
|
295
|
+
- `Popover` is powered by Floating UI, supports `placement`, `align`, `variant`, optional arrow/close controls, controlled or uncontrolled open state, and slot-style body content.
|
|
201
296
|
|
|
202
297
|
### Documentation and examples
|
|
203
298
|
|
|
@@ -208,7 +303,10 @@ export function ComponentExamples() {
|
|
|
208
303
|
|
|
209
304
|
- Component style variants are centralized with CVA + Tailwind utility patterns.
|
|
210
305
|
- Theme tokens are built in and theme files are exported from package entry points:
|
|
306
|
+
- `base.css`
|
|
211
307
|
- `theme-secondary.css`
|
|
308
|
+
- `themes/primary.css`
|
|
309
|
+
- `themes/secondary.css`
|
|
212
310
|
- `globals.css`
|
|
213
311
|
|
|
214
312
|
## Accessibility
|
|
@@ -302,21 +400,26 @@ src/
|
|
|
302
400
|
|
|
303
401
|
## Components
|
|
304
402
|
|
|
305
|
-
| Component | Location | Storybook
|
|
306
|
-
| ----------------- | ---------------------------------- |
|
|
307
|
-
| Accordion | `src/components/Accordion` | [Accordion](https://tanishraj.github.io/ui-kit/?path=/story/components-accordion--default)
|
|
308
|
-
| Alert | `src/components/Alert` | [Alert](https://tanishraj.github.io/ui-kit/?path=/story/components-alert--default)
|
|
309
|
-
|
|
|
310
|
-
|
|
|
311
|
-
|
|
|
312
|
-
|
|
|
313
|
-
|
|
|
314
|
-
|
|
|
315
|
-
|
|
|
316
|
-
|
|
|
317
|
-
|
|
|
318
|
-
|
|
|
319
|
-
|
|
|
403
|
+
| Component | Location | Storybook | Status |
|
|
404
|
+
| ----------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------ |
|
|
405
|
+
| Accordion | `src/components/Accordion` | [Accordion](https://tanishraj.github.io/ui-kit/?path=/story/components-accordion--default) | Stable |
|
|
406
|
+
| Alert | `src/components/Alert` | [Alert](https://tanishraj.github.io/ui-kit/?path=/story/components-alert--default) | Stable |
|
|
407
|
+
| AnimatePresence | `src/components/AnimatePresence` | [AnimatePresence](https://tanishraj.github.io/ui-kit/?path=/story/ui-kit-components-animatepresence--basicexample) | Stable |
|
|
408
|
+
| Avatar | `src/components/Avatar` | [Avatar](https://tanishraj.github.io/ui-kit/?path=/story/components-avatar--playground) | Stable |
|
|
409
|
+
| AvatarGroup | `src/components/AvatarGroup` | [AvatarGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-avatargroup--default) | Stable |
|
|
410
|
+
| Badge | `src/components/Badge` | [Badge](https://tanishraj.github.io/ui-kit/?path=/story/components-badge--playground) | Stable |
|
|
411
|
+
| Breadcrumb | `src/components/Breadcrumb` | [Breadcrumb](https://tanishraj.github.io/ui-kit/?path=/story/components-breadcrumb--playground) | Stable |
|
|
412
|
+
| Button | `src/components/Button` | [Button](https://tanishraj.github.io/ui-kit/?path=/story/components-button--playground) | Stable |
|
|
413
|
+
| ButtonGroup | `src/components/ButtonGroup` | [ButtonGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-buttongroup--playground) | Stable |
|
|
414
|
+
| Checkbox | `src/components/Checkbox` | [Checkbox](https://tanishraj.github.io/ui-kit/?path=/story/components-checkbox--playground) | Stable |
|
|
415
|
+
| CheckboxGroup | `src/components/CheckboxGroup` | [CheckboxGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-checkboxgroup--playground) | Stable |
|
|
416
|
+
| Chip | `src/components/Chip` | [Chip](https://tanishraj.github.io/ui-kit/?path=/story/components-chip--playground) | Stable |
|
|
417
|
+
| Divider | `src/components/Divider` | [Divider](https://tanishraj.github.io/ui-kit/?path=/story/components-divider--playground) | Stable |
|
|
418
|
+
| Drawer | `src/components/Drawer` | [Drawer](https://tanishraj.github.io/ui-kit/?path=/story/components-drawer--playground) | Stable |
|
|
419
|
+
| Link | `src/components/Link` | [Link](https://tanishraj.github.io/ui-kit/?path=/story/components-link--playground) | Stable |
|
|
420
|
+
| OrganizationChart | `src/components/OrganizationChart` | [OrganizationChart](https://tanishraj.github.io/ui-kit/?path=/story/components-organizationchart--playground) | Stable |
|
|
421
|
+
| Popover | `src/components/Popover` | [Popover](https://tanishraj.github.io/ui-kit/?path=/story/components-popover--playground) | Stable |
|
|
422
|
+
| Portal | `src/components/Portal` | N/A | Stable |
|
|
320
423
|
|
|
321
424
|
## Versioning and Changelog
|
|
322
425
|
|