@moto-nrw/design-system 0.2.2 → 0.3.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 +17 -26
- package/dist/index.cjs +652 -303
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +650 -302
- package/dist/index.js.map +1 -1
- package/dist/styles.css +2 -0
- package/dist/tailwind.css +363 -14
- package/dist/tokens.css +46 -0
- package/package.json +12 -3
- package/dist/index.css +0 -1550
- package/dist/index.css.map +0 -1
package/README.md
CHANGED
|
@@ -10,7 +10,9 @@
|
|
|
10
10
|
</p>
|
|
11
11
|
|
|
12
12
|
<p align="center">
|
|
13
|
-
<a href="https://
|
|
13
|
+
<a href="https://www.npmjs.com/package/@moto-nrw/design-system"><img src="https://img.shields.io/npm/v/@moto-nrw/design-system" alt="npm" /></a>
|
|
14
|
+
<a href="https://moto-nrw.github.io/design-system/"><strong>📖 Storybook</strong></a>
|
|
15
|
+
<a href="https://github.com/moto-nrw/design-system/actions"><img src="https://github.com/moto-nrw/design-system/actions/workflows/ci.yml/badge.svg" alt="CI" /></a>
|
|
14
16
|
</p>
|
|
15
17
|
|
|
16
18
|
---
|
|
@@ -49,21 +51,15 @@ pnpm storybook # localhost:6006
|
|
|
49
51
|
|
|
50
52
|
## Usage in Consumer Repos
|
|
51
53
|
|
|
52
|
-
### 1.
|
|
53
|
-
|
|
54
|
-
Add `.npmrc` to the repo root:
|
|
55
|
-
|
|
56
|
-
```
|
|
57
|
-
@moto-nrw:registry=https://npm.pkg.github.com
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
Install:
|
|
54
|
+
### 1. Install
|
|
61
55
|
|
|
62
56
|
```bash
|
|
63
57
|
pnpm add @moto-nrw/design-system lucide-react
|
|
64
58
|
```
|
|
65
59
|
|
|
66
|
-
|
|
60
|
+
No `.npmrc` needed — the package is on npmjs.com.
|
|
61
|
+
|
|
62
|
+
### 2. Import Styles
|
|
67
63
|
|
|
68
64
|
For **Tailwind v4** consumers (recommended):
|
|
69
65
|
|
|
@@ -71,6 +67,13 @@ For **Tailwind v4** consumers (recommended):
|
|
|
71
67
|
/* globals.css */
|
|
72
68
|
@import "tailwindcss";
|
|
73
69
|
@import "@moto-nrw/design-system/tailwind";
|
|
70
|
+
@source "../node_modules/@moto-nrw/design-system/dist";
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
For apps that want the prebuilt stylesheet instead:
|
|
74
|
+
|
|
75
|
+
```css
|
|
76
|
+
@import "@moto-nrw/design-system/styles";
|
|
74
77
|
```
|
|
75
78
|
|
|
76
79
|
Or import CSS variables directly:
|
|
@@ -99,21 +102,9 @@ function Example() {
|
|
|
99
102
|
|
|
100
103
|
```tsx
|
|
101
104
|
import { Button, Card, ... } from "@moto-nrw/design-system"; // components
|
|
105
|
+
import "@moto-nrw/design-system/styles"; // prebuilt component CSS
|
|
102
106
|
import "@moto-nrw/design-system/tokens"; // CSS variables
|
|
103
|
-
import "@moto-nrw/design-system/tailwind"; // Tailwind v4 theme
|
|
104
|
-
```
|
|
105
|
-
|
|
106
|
-
## CI Setup (GitHub Actions)
|
|
107
|
-
|
|
108
|
-
```yaml
|
|
109
|
-
- uses: actions/setup-node@v6
|
|
110
|
-
with:
|
|
111
|
-
registry-url: https://npm.pkg.github.com
|
|
112
|
-
scope: "@moto-nrw"
|
|
113
|
-
|
|
114
|
-
- run: pnpm install
|
|
115
|
-
env:
|
|
116
|
-
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
107
|
+
import "@moto-nrw/design-system/tailwind"; // Tailwind v4 theme + tokens + keyframes
|
|
117
108
|
```
|
|
118
109
|
|
|
119
110
|
## Development
|
|
@@ -132,7 +123,7 @@ import "@moto-nrw/design-system/tailwind"; // Tailwind v4
|
|
|
132
123
|
1. Make changes + `pnpm changeset` to describe what changed
|
|
133
124
|
2. Commit and push to `development`
|
|
134
125
|
3. CI creates a "Version Packages" PR (bumps version + CHANGELOG)
|
|
135
|
-
4. Merge that PR — CI publishes to
|
|
126
|
+
4. Merge that PR — CI publishes to npmjs.com
|
|
136
127
|
|
|
137
128
|
Consumer repos get auto-updated via Dependabot.
|
|
138
129
|
|