@tanishraj/ui-kit 1.1.1 → 2.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/index.cjs.js +2 -2
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +263 -1
- package/dist/index.es.js +50 -13
- package/dist/index.es.js.map +1 -1
- package/package.json +2 -1
- package/readme.md +154 -24
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanishraj/ui-kit",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.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",
|
|
@@ -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
|
@@ -57,14 +57,24 @@ pnpm add @tanishraj/ui-kit
|
|
|
57
57
|
|
|
58
58
|
```tsx
|
|
59
59
|
import {
|
|
60
|
+
AnimatePresence,
|
|
61
|
+
AnimatePresenceChild,
|
|
60
62
|
Button,
|
|
61
63
|
Badge,
|
|
62
64
|
Avatar,
|
|
63
65
|
AvatarGroup,
|
|
66
|
+
Breadcrumb,
|
|
67
|
+
Checkbox,
|
|
68
|
+
CheckboxGroup,
|
|
69
|
+
Chip,
|
|
70
|
+
Divider,
|
|
71
|
+
Drawer,
|
|
72
|
+
Portal,
|
|
73
|
+
Link,
|
|
64
74
|
} from '@tanishraj/ui-kit';
|
|
65
75
|
|
|
66
76
|
export function Demo() {
|
|
67
|
-
return <Button variant=
|
|
77
|
+
return <Button variant='primary'>Get Started</Button>;
|
|
68
78
|
}
|
|
69
79
|
```
|
|
70
80
|
|
|
@@ -83,15 +93,51 @@ npm install @tanishraj/ui-kit
|
|
|
83
93
|
Use component APIs directly from the package.
|
|
84
94
|
|
|
85
95
|
```tsx
|
|
86
|
-
import {
|
|
96
|
+
import {
|
|
97
|
+
AnimatePresence,
|
|
98
|
+
AnimatePresenceChild,
|
|
99
|
+
Avatar,
|
|
100
|
+
Button,
|
|
101
|
+
Chip,
|
|
102
|
+
Divider,
|
|
103
|
+
Link,
|
|
104
|
+
Drawer,
|
|
105
|
+
} from '@tanishraj/ui-kit';
|
|
106
|
+
import { Plus } from 'lucide-react';
|
|
107
|
+
import { useState } from 'react';
|
|
87
108
|
|
|
88
109
|
export default function Demo() {
|
|
110
|
+
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
111
|
+
|
|
89
112
|
return (
|
|
90
|
-
<div className=
|
|
91
|
-
<Button variant=
|
|
113
|
+
<div className='flex items-center gap-4'>
|
|
114
|
+
<Button variant='primary' size='md'>
|
|
92
115
|
Primary Button
|
|
93
116
|
</Button>
|
|
94
|
-
<Avatar initials=
|
|
117
|
+
<Avatar initials='AB' variant='primary' />
|
|
118
|
+
<Chip icon={Plus} variant='success'>
|
|
119
|
+
Active
|
|
120
|
+
</Chip>
|
|
121
|
+
<Button onClick={() => setDrawerOpen(true)}>Open Drawer</Button>
|
|
122
|
+
<Drawer
|
|
123
|
+
footer={<Button onClick={() => setDrawerOpen(false)}>Close</Button>}
|
|
124
|
+
onClose={() => setDrawerOpen(false)}
|
|
125
|
+
open={drawerOpen}
|
|
126
|
+
title='Title'
|
|
127
|
+
>
|
|
128
|
+
Drawer content
|
|
129
|
+
</Drawer>
|
|
130
|
+
<Link external href='/components' leadingIcon={Plus}>
|
|
131
|
+
Components
|
|
132
|
+
</Link>
|
|
133
|
+
<Divider className='w-32' />
|
|
134
|
+
<AnimatePresence presence={drawerOpen}>
|
|
135
|
+
<AnimatePresenceChild>
|
|
136
|
+
<div className='animate-in fade-in duration-500'>
|
|
137
|
+
Animated helper content
|
|
138
|
+
</div>
|
|
139
|
+
</AnimatePresenceChild>
|
|
140
|
+
</AnimatePresence>
|
|
95
141
|
</div>
|
|
96
142
|
);
|
|
97
143
|
}
|
|
@@ -114,16 +160,6 @@ To add a new packaged theme later:
|
|
|
114
160
|
3. Update the `copy:theme` script to include the new file.
|
|
115
161
|
4. Optionally publish a themed import via `./themes/<theme-name>.css` (already supported by the wildcard export pattern).
|
|
116
162
|
|
|
117
|
-
### Adding new themes (for maintainers)
|
|
118
|
-
|
|
119
|
-
To add a new packaged theme later:
|
|
120
|
-
|
|
121
|
-
1. Add `src/themes/<theme-name>.css`.
|
|
122
|
-
2. Add a package export in `package.json`:
|
|
123
|
-
- `./theme-<theme-name>.css` -> `./dist/themes/<theme-name>.css`
|
|
124
|
-
3. Update the `copy:theme` script to include the new file.
|
|
125
|
-
4. Optionally publish a themed import via `./themes/<theme-name>.css` (already supported by the wildcard export pattern).
|
|
126
|
-
|
|
127
163
|
You can also import through:
|
|
128
164
|
|
|
129
165
|
```ts
|
|
@@ -138,10 +174,94 @@ If your app uses a custom design token strategy, import one packaged theme and o
|
|
|
138
174
|
- Props follow consistent naming patterns:
|
|
139
175
|
- `size` (`sm`, `md`, `lg`)
|
|
140
176
|
- `variant` (status/visual intent)
|
|
177
|
+
- `appearance` (container treatment such as `filled`, `outline`, `ghost`, or `dashed`, depending on component)
|
|
141
178
|
- `shape` (`circle`, `square` where supported)
|
|
179
|
+
- `inverted` for alternate surface color modes where supported
|
|
142
180
|
- `disabled`, `loading`, and interaction states where applicable
|
|
143
181
|
- Component stories in `*.stories.tsx` are the source of truth for public usage patterns and prop combinations.
|
|
144
182
|
|
|
183
|
+
### Common Examples
|
|
184
|
+
|
|
185
|
+
```tsx
|
|
186
|
+
import {
|
|
187
|
+
AnimatePresence,
|
|
188
|
+
AnimatePresenceChild,
|
|
189
|
+
Breadcrumb,
|
|
190
|
+
Button,
|
|
191
|
+
CheckboxGroup,
|
|
192
|
+
Chip,
|
|
193
|
+
Divider,
|
|
194
|
+
Drawer,
|
|
195
|
+
Link,
|
|
196
|
+
} from '@tanishraj/ui-kit';
|
|
197
|
+
import { Home, Plus, Tag } from 'lucide-react';
|
|
198
|
+
|
|
199
|
+
export function ComponentExamples() {
|
|
200
|
+
return (
|
|
201
|
+
<div className='flex flex-col gap-6'>
|
|
202
|
+
<Breadcrumb
|
|
203
|
+
appearance='outline'
|
|
204
|
+
items={[
|
|
205
|
+
{ label: 'Home', href: '/', icon: Home },
|
|
206
|
+
{ label: 'Components', href: '/components' },
|
|
207
|
+
{ label: 'Chip' },
|
|
208
|
+
]}
|
|
209
|
+
separator='>'
|
|
210
|
+
/>
|
|
211
|
+
|
|
212
|
+
<Chip appearance='filled' icon={Tag} shape='circle' variant='primary'>
|
|
213
|
+
Filter
|
|
214
|
+
</Chip>
|
|
215
|
+
|
|
216
|
+
<Link
|
|
217
|
+
external
|
|
218
|
+
href='/components/link'
|
|
219
|
+
leadingIcon={Home}
|
|
220
|
+
truncate
|
|
221
|
+
underline='always'
|
|
222
|
+
variant='primary'
|
|
223
|
+
>
|
|
224
|
+
Link Truncated
|
|
225
|
+
</Link>
|
|
226
|
+
|
|
227
|
+
<CheckboxGroup
|
|
228
|
+
label='Notification channels'
|
|
229
|
+
options={[
|
|
230
|
+
{ label: 'Email', value: 'email' },
|
|
231
|
+
{ label: 'SMS', value: 'sms' },
|
|
232
|
+
]}
|
|
233
|
+
shape='square'
|
|
234
|
+
/>
|
|
235
|
+
|
|
236
|
+
<Divider>
|
|
237
|
+
<Button leadingIcon={Plus} size='sm' variant='default'>
|
|
238
|
+
Add item
|
|
239
|
+
</Button>
|
|
240
|
+
</Divider>
|
|
241
|
+
|
|
242
|
+
<AnimatePresence presence>
|
|
243
|
+
<AnimatePresenceChild>
|
|
244
|
+
<div className='animate-in slide-in-from-right duration-500'>
|
|
245
|
+
Presence-managed content
|
|
246
|
+
</div>
|
|
247
|
+
</AnimatePresenceChild>
|
|
248
|
+
</AnimatePresence>
|
|
249
|
+
</div>
|
|
250
|
+
);
|
|
251
|
+
}
|
|
252
|
+
```
|
|
253
|
+
|
|
254
|
+
### Component Notes
|
|
255
|
+
|
|
256
|
+
- `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.
|
|
257
|
+
- `Breadcrumb` supports `appearance="ghost" | "outline"` and `separator=">" | "/"`. The chevron separator is rendered as an icon.
|
|
258
|
+
- `Checkbox` and `CheckboxGroup` support `shape="square" | "circle"`, with `square` as the default.
|
|
259
|
+
- `Chip` supports `variant`, `appearance="filled" | "outline"`, `shape`, `size`, `inverted`, optional `icon`, and removable chips via `onClose`.
|
|
260
|
+
- `Divider` supports `orientation="horizontal" | "vertical"` and optional centered content through `children`.
|
|
261
|
+
- `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.
|
|
262
|
+
- `Portal` renders to `document.body` by default and can target a custom container via `container`, `containerRef`, or `containerId`.
|
|
263
|
+
- `Link` supports `variant`, `size`, `underline="none" | "hover" | "always"`, `inverted`, `disabled`, `truncate`, optional leading/trailing icons, and `external` links.
|
|
264
|
+
|
|
145
265
|
### Documentation and examples
|
|
146
266
|
|
|
147
267
|
- Storybook: run locally with `npm run storybook`
|
|
@@ -245,15 +365,25 @@ src/
|
|
|
245
365
|
|
|
246
366
|
## Components
|
|
247
367
|
|
|
248
|
-
| Component
|
|
249
|
-
|
|
|
250
|
-
|
|
|
251
|
-
|
|
|
252
|
-
|
|
|
253
|
-
|
|
|
254
|
-
|
|
|
255
|
-
|
|
|
256
|
-
|
|
|
368
|
+
| Component | Location | Storybook | Status |
|
|
369
|
+
| ----------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------ |
|
|
370
|
+
| Accordion | `src/components/Accordion` | [Accordion](https://tanishraj.github.io/ui-kit/?path=/story/components-accordion--default) | Stable |
|
|
371
|
+
| Alert | `src/components/Alert` | [Alert](https://tanishraj.github.io/ui-kit/?path=/story/components-alert--default) | Stable |
|
|
372
|
+
| AnimatePresence | `src/components/AnimatePresence` | [AnimatePresence](https://tanishraj.github.io/ui-kit/?path=/story/ui-kit-components-animatepresence--basicexample) | Stable |
|
|
373
|
+
| Avatar | `src/components/Avatar` | [Avatar](https://tanishraj.github.io/ui-kit/?path=/story/components-avatar--playground) | Stable |
|
|
374
|
+
| AvatarGroup | `src/components/AvatarGroup` | [AvatarGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-avatargroup--default) | Stable |
|
|
375
|
+
| Badge | `src/components/Badge` | [Badge](https://tanishraj.github.io/ui-kit/?path=/story/components-badge--playground) | Stable |
|
|
376
|
+
| Breadcrumb | `src/components/Breadcrumb` | [Breadcrumb](https://tanishraj.github.io/ui-kit/?path=/story/components-breadcrumb--playground) | Stable |
|
|
377
|
+
| Button | `src/components/Button` | [Button](https://tanishraj.github.io/ui-kit/?path=/story/components-button--playground) | Stable |
|
|
378
|
+
| ButtonGroup | `src/components/ButtonGroup` | [ButtonGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-buttongroup--playground) | Stable |
|
|
379
|
+
| Checkbox | `src/components/Checkbox` | [Checkbox](https://tanishraj.github.io/ui-kit/?path=/story/components-checkbox--playground) | Stable |
|
|
380
|
+
| CheckboxGroup | `src/components/CheckboxGroup` | [CheckboxGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-checkboxgroup--playground) | Stable |
|
|
381
|
+
| Chip | `src/components/Chip` | [Chip](https://tanishraj.github.io/ui-kit/?path=/story/components-chip--playground) | Stable |
|
|
382
|
+
| Divider | `src/components/Divider` | [Divider](https://tanishraj.github.io/ui-kit/?path=/story/components-divider--playground) | Stable |
|
|
383
|
+
| Drawer | `src/components/Drawer` | [Drawer](https://tanishraj.github.io/ui-kit/?path=/story/components-drawer--playground) | Stable |
|
|
384
|
+
| Link | `src/components/Link` | [Link](https://tanishraj.github.io/ui-kit/?path=/story/components-link--playground) | Stable |
|
|
385
|
+
| OrganizationChart | `src/components/OrganizationChart` | [OrganizationChart](https://tanishraj.github.io/ui-kit/?path=/story/components-organizationchart--playground) | Stable |
|
|
386
|
+
| Portal | `src/components/Portal` | N/A | Stable |
|
|
257
387
|
|
|
258
388
|
## Versioning and Changelog
|
|
259
389
|
|