@storm-ds/ui 1.0.2 → 1.0.3
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 +98 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,98 @@
|
|
|
1
|
-
# storm-ui
|
|
1
|
+
# @storm-ds/ui
|
|
2
|
+
|
|
3
|
+
Lightning-fast component library optimized for Next.js. 64 accessible, theme-aware components built with Tailwind CSS.
|
|
4
|
+
|
|
5
|
+
[Documentation](https://storm-project-web.vercel.app)
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @storm-ds/ui
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @storm-ds/ui
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
### Peer dependencies
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
pnpm add react react-dom tailwindcss
|
|
19
|
+
# Optional — only needed for chart components
|
|
20
|
+
pnpm add recharts @storm-ds/icons
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Setup
|
|
24
|
+
|
|
25
|
+
Add the Storm plugin to your `tailwind.config.js`:
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
module.exports = {
|
|
29
|
+
darkMode: 'class',
|
|
30
|
+
content: [
|
|
31
|
+
// ...
|
|
32
|
+
'./node_modules/@storm-ds/ui/dist/**/*.{js,mjs}',
|
|
33
|
+
],
|
|
34
|
+
plugins: [
|
|
35
|
+
require('@storm-ds/ui/plugin').default || require('@storm-ds/ui/plugin'),
|
|
36
|
+
],
|
|
37
|
+
}
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
For Next.js, add `transpilePackages` in `next.config.js`:
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
module.exports = {
|
|
44
|
+
transpilePackages: ['@storm-ds/ui'],
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Usage
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import { Button, Card, CardHeader, CardBody } from '@storm-ds/ui'
|
|
52
|
+
|
|
53
|
+
export default function App() {
|
|
54
|
+
return (
|
|
55
|
+
<Card>
|
|
56
|
+
<CardHeader>Hello</CardHeader>
|
|
57
|
+
<CardBody>
|
|
58
|
+
<Button>Click me</Button>
|
|
59
|
+
</CardBody>
|
|
60
|
+
</Card>
|
|
61
|
+
)
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Charts
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
import { StormBarChart, StormLineChart } from '@storm-ds/ui/charts'
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
Requires `recharts` as a peer dependency.
|
|
72
|
+
|
|
73
|
+
### Tailwind plugin tokens
|
|
74
|
+
|
|
75
|
+
The plugin provides semantic design tokens:
|
|
76
|
+
|
|
77
|
+
- **Colors** — `bg-storm-primary`, `text-storm-foreground`, `border-storm-border`, etc.
|
|
78
|
+
- **Border radius** — `rounded-storm-sm` (6px), `rounded-storm-md` (8px), `rounded-storm-lg` (12px)
|
|
79
|
+
- **Spacing** — `storm-xs` (4px) through `storm-2xl` (48px)
|
|
80
|
+
- **Dark mode** — all tokens adapt automatically with `darkMode: 'class'`
|
|
81
|
+
|
|
82
|
+
## Exports
|
|
83
|
+
|
|
84
|
+
| Entry point | Description |
|
|
85
|
+
|---|---|
|
|
86
|
+
| `@storm-ds/ui` | All 64 components |
|
|
87
|
+
| `@storm-ds/ui/plugin` | Tailwind CSS plugin (colors, radius, spacing) |
|
|
88
|
+
| `@storm-ds/ui/charts` | Chart wrappers (BarChart, LineChart, AreaChart, etc.) |
|
|
89
|
+
|
|
90
|
+
## Requirements
|
|
91
|
+
|
|
92
|
+
- Node >= 18
|
|
93
|
+
- React >= 18
|
|
94
|
+
- Tailwind CSS >= 3
|
|
95
|
+
|
|
96
|
+
## License
|
|
97
|
+
|
|
98
|
+
MIT
|