@storm-ds/ui 0.1.0 → 0.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/README.md +67 -12
- package/package.json +23 -17
package/README.md
CHANGED
|
@@ -1,32 +1,87 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @storm-ds/ui
|
|
2
2
|
|
|
3
|
-
Lightning-fast component library optimized for Next.js.
|
|
3
|
+
Lightning-fast component library optimized for Next.js — 58 components, zero runtime dependencies.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
npm install storm-ui
|
|
8
|
+
npm install @storm-ds/ui
|
|
9
9
|
# or
|
|
10
|
-
pnpm add storm-ui
|
|
10
|
+
pnpm add @storm-ds/ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### Peer Dependencies
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install react react-dom tailwindcss
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Tailwind Plugin Setup
|
|
20
|
+
|
|
21
|
+
Add the Storm plugin to your `tailwind.config.js`:
|
|
22
|
+
|
|
23
|
+
```js
|
|
24
|
+
/** @type {import('tailwindcss').Config} */
|
|
25
|
+
module.exports = {
|
|
26
|
+
content: [
|
|
27
|
+
// ...your content paths
|
|
28
|
+
'./node_modules/@storm-ds/ui/dist/**/*.{js,mjs}',
|
|
29
|
+
],
|
|
30
|
+
darkMode: 'class',
|
|
31
|
+
plugins: [
|
|
32
|
+
require('@storm-ds/ui/plugin').default || require('@storm-ds/ui/plugin'),
|
|
33
|
+
],
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
The plugin registers Storm's design tokens as CSS variables (colors, spacing, radii) and extends your Tailwind theme with `storm-*` utilities like `bg-storm-primary`, `text-storm-muted`, `border-storm-border`.
|
|
38
|
+
|
|
39
|
+
## Dark Mode
|
|
40
|
+
|
|
41
|
+
Storm uses `darkMode: 'class'`. Toggle the `dark` class on `<html>` to switch themes:
|
|
42
|
+
|
|
43
|
+
```js
|
|
44
|
+
document.documentElement.classList.toggle('dark')
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
To prevent flash of unstyled content (FOUC), add this script in your `<head>`:
|
|
48
|
+
|
|
49
|
+
```html
|
|
50
|
+
<script>
|
|
51
|
+
if (localStorage.getItem('storm-theme') === 'dark' ||
|
|
52
|
+
(!localStorage.getItem('storm-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
53
|
+
document.documentElement.classList.add('dark')
|
|
54
|
+
}
|
|
55
|
+
</script>
|
|
11
56
|
```
|
|
12
57
|
|
|
13
58
|
## Usage
|
|
14
59
|
|
|
15
60
|
```tsx
|
|
16
|
-
import { Button } from '@storm-ds/ui'
|
|
61
|
+
import { Button, Card, CardBody } from '@storm-ds/ui'
|
|
17
62
|
|
|
18
63
|
export default function Home() {
|
|
19
|
-
return
|
|
64
|
+
return (
|
|
65
|
+
<Card>
|
|
66
|
+
<CardBody>
|
|
67
|
+
<Button>Click me</Button>
|
|
68
|
+
</CardBody>
|
|
69
|
+
</Card>
|
|
70
|
+
)
|
|
20
71
|
}
|
|
21
72
|
```
|
|
22
73
|
|
|
23
|
-
##
|
|
74
|
+
## Charts
|
|
75
|
+
|
|
76
|
+
Chart components (powered by Recharts) are available as a separate entry point:
|
|
24
77
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
78
|
+
```bash
|
|
79
|
+
npm install recharts
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
```tsx
|
|
83
|
+
import { AreaChart, BarChart, LineChart, PieChart } from '@storm-ds/ui/charts'
|
|
84
|
+
```
|
|
30
85
|
|
|
31
86
|
## License
|
|
32
87
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storm-ds/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Lightning-fast component library optimized for Next.js",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.mjs",
|
|
@@ -23,10 +23,26 @@
|
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
"sideEffects": false,
|
|
26
|
+
"repository": {
|
|
27
|
+
"type": "git",
|
|
28
|
+
"url": "https://github.com/saayym/storm-project.git",
|
|
29
|
+
"directory": "packages/ui"
|
|
30
|
+
},
|
|
31
|
+
"homepage": "https://storm-project-web.vercel.app",
|
|
32
|
+
"bugs": {
|
|
33
|
+
"url": "https://github.com/saayym/storm-project/issues"
|
|
34
|
+
},
|
|
26
35
|
"files": [
|
|
27
36
|
"dist",
|
|
28
|
-
"README.md"
|
|
37
|
+
"README.md",
|
|
38
|
+
"LICENSE"
|
|
29
39
|
],
|
|
40
|
+
"scripts": {
|
|
41
|
+
"dev": "tsup --watch",
|
|
42
|
+
"build": "tsup",
|
|
43
|
+
"lint": "eslint src",
|
|
44
|
+
"clean": "rm -rf dist node_modules"
|
|
45
|
+
},
|
|
30
46
|
"keywords": [
|
|
31
47
|
"react",
|
|
32
48
|
"nextjs",
|
|
@@ -45,12 +61,8 @@
|
|
|
45
61
|
"tailwindcss": ">=3"
|
|
46
62
|
},
|
|
47
63
|
"peerDependenciesMeta": {
|
|
48
|
-
"recharts": {
|
|
49
|
-
|
|
50
|
-
},
|
|
51
|
-
"@storm-ds/icons": {
|
|
52
|
-
"optional": true
|
|
53
|
-
}
|
|
64
|
+
"recharts": { "optional": true },
|
|
65
|
+
"@storm-ds/icons": { "optional": true }
|
|
54
66
|
},
|
|
55
67
|
"dependencies": {
|
|
56
68
|
"tailwind-merge": "^2.2.0"
|
|
@@ -59,14 +71,8 @@
|
|
|
59
71
|
"@types/react": "^18.2.48",
|
|
60
72
|
"@types/react-dom": "^18.2.18",
|
|
61
73
|
"recharts": "^3.7.0",
|
|
74
|
+
"@storm-ds/icons": "workspace:*",
|
|
62
75
|
"tsup": "^8.0.1",
|
|
63
|
-
"typescript": "^5.3.3"
|
|
64
|
-
"@storm-ds/icons": "0.1.0"
|
|
65
|
-
},
|
|
66
|
-
"scripts": {
|
|
67
|
-
"dev": "tsup --watch",
|
|
68
|
-
"build": "tsup",
|
|
69
|
-
"lint": "eslint src",
|
|
70
|
-
"clean": "rm -rf dist node_modules"
|
|
76
|
+
"typescript": "^5.3.3"
|
|
71
77
|
}
|
|
72
|
-
}
|
|
78
|
+
}
|