@trackany-device/components 1.0.0 → 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/README.md +216 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
# @track-any-device/components
|
|
2
|
+
|
|
3
|
+
Shared React component library for the **Track Any Device** platform.
|
|
4
|
+
Built with React 19, Tailwind CSS v4, Radix UI primitives, and shadcn/ui conventions.
|
|
5
|
+
|
|
6
|
+
[](https://badge.socket.dev/npm/package/@trackany-device/components/1.0.0)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
## Install
|
|
11
|
+
|
|
12
|
+
```bash
|
|
13
|
+
npm install @track-any-device/components
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
> **Peer dependencies** — install the ones you use:
|
|
17
|
+
> ```bash
|
|
18
|
+
> npm install react react-dom lucide-react tailwindcss
|
|
19
|
+
> ```
|
|
20
|
+
> Optional peers (only needed for specific components):
|
|
21
|
+
> `@dnd-kit/*`, `@tanstack/react-table`, `@xyflow/react`, `recharts`, `react-hook-form`, `zod`
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## Setup
|
|
26
|
+
|
|
27
|
+
### 1. Import the styles
|
|
28
|
+
|
|
29
|
+
In your app's CSS entry point (e.g. `app.css`):
|
|
30
|
+
|
|
31
|
+
```css
|
|
32
|
+
@import "tailwindcss";
|
|
33
|
+
@import "@track-any-device/components/styles/themes.css";
|
|
34
|
+
|
|
35
|
+
/* If you use KeenIcons: */
|
|
36
|
+
@import "@track-any-device/components/styles/keenicons.css";
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### 2. Wrap your app with a theme
|
|
40
|
+
|
|
41
|
+
Apply a `data-theme` attribute to your root element (or `<html>`):
|
|
42
|
+
|
|
43
|
+
```html
|
|
44
|
+
<html data-theme="blue"> <!-- or green, purple, red, orange … -->
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Add `.dark` for dark mode:
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<html data-theme="blue" class="dark">
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### 3. Set up the Platform adapter
|
|
54
|
+
|
|
55
|
+
The library abstracts routing/forms behind a `PlatformProvider`. Pick the adapter for your framework:
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
// Next.js
|
|
59
|
+
import { PlatformProvider, createNextjsAdapter } from '@track-any-device/components';
|
|
60
|
+
|
|
61
|
+
export default function RootLayout({ children }) {
|
|
62
|
+
return (
|
|
63
|
+
<PlatformProvider adapter={createNextjsAdapter()}>
|
|
64
|
+
{children}
|
|
65
|
+
</PlatformProvider>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
// Inertia.js (Laravel)
|
|
72
|
+
import { PlatformProvider, createInertiaAdapter } from '@track-any-device/components';
|
|
73
|
+
|
|
74
|
+
createInertiaApp({
|
|
75
|
+
setup({ el, App, props }) {
|
|
76
|
+
createRoot(el).render(
|
|
77
|
+
<PlatformProvider adapter={createInertiaAdapter()}>
|
|
78
|
+
<App {...props} />
|
|
79
|
+
</PlatformProvider>
|
|
80
|
+
);
|
|
81
|
+
},
|
|
82
|
+
});
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## Usage
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
import { Button, Card, CardContent, CardHeader, CardTitle } from '@track-any-device/components';
|
|
91
|
+
|
|
92
|
+
export default function Example() {
|
|
93
|
+
return (
|
|
94
|
+
<Card className="w-80">
|
|
95
|
+
<CardHeader>
|
|
96
|
+
<CardTitle>Hello world</CardTitle>
|
|
97
|
+
</CardHeader>
|
|
98
|
+
<CardContent className="flex gap-2">
|
|
99
|
+
<Button variant="primary">Save</Button>
|
|
100
|
+
<Button variant="outline">Cancel</Button>
|
|
101
|
+
</CardContent>
|
|
102
|
+
</Card>
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
## Themes
|
|
110
|
+
|
|
111
|
+
21 brand colour schemes are included. Apply via `data-theme` on any ancestor element:
|
|
112
|
+
|
|
113
|
+
| Token | Colour |
|
|
114
|
+
|-------|--------|
|
|
115
|
+
| `default` / `blue` | Blue-600 |
|
|
116
|
+
| `green` | Green-600 |
|
|
117
|
+
| `purple` | Purple-600 |
|
|
118
|
+
| `red` | Red-600 |
|
|
119
|
+
| `orange` | Orange-500 |
|
|
120
|
+
| `rose` | Rose-600 |
|
|
121
|
+
| `sky` | Sky-500 |
|
|
122
|
+
| `teal` | Teal-600 |
|
|
123
|
+
| `cyan` | Cyan-600 |
|
|
124
|
+
| `indigo` | Indigo-600 |
|
|
125
|
+
| `violet` | Violet-600 |
|
|
126
|
+
| `emerald` | Emerald-600 |
|
|
127
|
+
| `lime` | Lime-600 |
|
|
128
|
+
| `yellow` | Yellow-500 |
|
|
129
|
+
| `amber` | Amber-500 |
|
|
130
|
+
| `pink` | Pink-500 |
|
|
131
|
+
| `fuchsia` | Fuchsia-600 |
|
|
132
|
+
| `neutral` | Neutral-700 |
|
|
133
|
+
| `slate` | Slate-600 |
|
|
134
|
+
| `gray` | Gray-600 |
|
|
135
|
+
|
|
136
|
+
Each theme ships with a matching dark variant — add `.dark` to the same element.
|
|
137
|
+
|
|
138
|
+
---
|
|
139
|
+
|
|
140
|
+
## Components
|
|
141
|
+
|
|
142
|
+
### App chrome
|
|
143
|
+
`AppShell` · `AppHeader` · `AppSidebar` · `AppSidebarHeader` · `AppContent` · `NavMain` · `NavUser` · `NavFooter` · `NotificationBell` · `AppLogo` · `Breadcrumbs` · `AppearanceTabs`
|
|
144
|
+
|
|
145
|
+
### UI primitives
|
|
146
|
+
`Button` · `Input` · `Select` · `Checkbox` · `Switch` · `Slider` · `Textarea` · `Label` · `Badge` · `Avatar` · `Card` · `Dialog` · `Drawer` · `Sheet` · `Popover` · `Tooltip` · `DropdownMenu` · `Tabs` · `Accordion` · `Progress` · `Skeleton` · `Spinner` · `Separator` · `Alert` · `Sonner` (toast)
|
|
147
|
+
|
|
148
|
+
### Data
|
|
149
|
+
`DataGrid` · `DataList` · `Chart` · `StatCard` · `Pagination`
|
|
150
|
+
|
|
151
|
+
### Forms & auth
|
|
152
|
+
`LoginForm` · `RegisterForm` · `ForgotPasswordForm` · `ResetPasswordForm` · `ConfirmPasswordForm` · `OtpForm` · `VerifyEmailForm` · `SmsChallengeForm`
|
|
153
|
+
|
|
154
|
+
### Icons
|
|
155
|
+
`KeenIcon` — ~1 200 icons in four styles (`duotone` · `filled` · `outline` · `solid`):
|
|
156
|
+
|
|
157
|
+
```tsx
|
|
158
|
+
import { KeenIcon } from '@track-any-device/components';
|
|
159
|
+
// Don't forget: import '@track-any-device/components/styles/keenicons.css';
|
|
160
|
+
|
|
161
|
+
<KeenIcon icon="home" style="duotone" className="size-5" />
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
---
|
|
165
|
+
|
|
166
|
+
## Storybook
|
|
167
|
+
|
|
168
|
+
Browse all components interactively — includes a **Theme** toolbar to switch between all 21 colour schemes and a **Color Mode** toggle for dark mode.
|
|
169
|
+
|
|
170
|
+
```bash
|
|
171
|
+
npm run storybook # dev server on :6006
|
|
172
|
+
npm run build-storybook # static build → storybook-static/
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
### Docker (static Storybook)
|
|
176
|
+
|
|
177
|
+
```bash
|
|
178
|
+
docker build -t tad-storybook .
|
|
179
|
+
docker run -p 8080:80 tad-storybook
|
|
180
|
+
# open http://localhost:8080
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
---
|
|
184
|
+
|
|
185
|
+
## Development
|
|
186
|
+
|
|
187
|
+
```bash
|
|
188
|
+
npm install
|
|
189
|
+
npm run storybook # live-reload component dev
|
|
190
|
+
npm run types:check # TypeScript validation
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
---
|
|
194
|
+
|
|
195
|
+
## Release
|
|
196
|
+
|
|
197
|
+
Releases are fully automated via [semantic-release](https://github.com/semantic-release/semantic-release) on every push to `main`.
|
|
198
|
+
|
|
199
|
+
| Commit prefix | Version bump |
|
|
200
|
+
|---------------|-------------|
|
|
201
|
+
| `fix:` | patch — `1.0.0 → 1.0.1` |
|
|
202
|
+
| `feat:` | minor — `1.0.1 → 1.1.0` |
|
|
203
|
+
| `feat!:` / `BREAKING CHANGE` | major — `1.1.0 → 2.0.0` |
|
|
204
|
+
| `chore:` `docs:` `ci:` `style:` `refactor:` | no release |
|
|
205
|
+
|
|
206
|
+
On release, semantic-release automatically:
|
|
207
|
+
1. Calculates the next version from commit messages
|
|
208
|
+
2. Updates `package.json` and `CHANGELOG.md`
|
|
209
|
+
3. Creates a GitHub release with notes
|
|
210
|
+
4. Publishes to npm
|
|
211
|
+
|
|
212
|
+
---
|
|
213
|
+
|
|
214
|
+
## License
|
|
215
|
+
|
|
216
|
+
UNLICENSED — private, all rights reserved.
|