@sozialhelden/ui 1.0.2 → 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 +80 -1
- package/package.json +16 -11
- package/src/style.css +120 -0
- package/dist/index.d.ts +0 -1
- package/dist/index.js +0 -4981
package/README.md
CHANGED
|
@@ -1 +1,80 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @sozialhelden/ui
|
|
2
|
+
|
|
3
|
+
> UI components shared by different sozialhelden projects.
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
Make sure you have Tailwind CSS installed in your project. If you don't have it yet, you should install and set it up first: https://tailwindcss.com/docs/installation/using-vite
|
|
8
|
+
|
|
9
|
+
Then install the library:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm i --save @sozialhelden/ui
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Add the following to your main CSS file, make sure to adapt the path to the `@sozialhelden/ui` package if necessary:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "tailwindcss";
|
|
19
|
+
@import "tw-animate-css";
|
|
20
|
+
@import "@sozialhelden/ui/style.css";
|
|
21
|
+
|
|
22
|
+
@source "../../node_modules/@sozialhelden/ui";
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Now you can use tailwind classes and the components provided by the `@sozialhelden/ui` package in your project, for example:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import { Button } from "@sozialhelden/ui";
|
|
29
|
+
|
|
30
|
+
export function App() {
|
|
31
|
+
return (
|
|
32
|
+
<div className="p-4 bg-red-200">
|
|
33
|
+
<Button>Click me!</Button>
|
|
34
|
+
</div>
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## Development setup
|
|
40
|
+
|
|
41
|
+
Install dependencies:
|
|
42
|
+
|
|
43
|
+
```bash
|
|
44
|
+
npm ci
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
Run the storybook dev-server:
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
npm run dev
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
Build a production version of the library and storybook:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
npm run build
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Run linter/formatters:
|
|
60
|
+
|
|
61
|
+
```bash
|
|
62
|
+
# Run linter
|
|
63
|
+
npm run lint
|
|
64
|
+
|
|
65
|
+
# Run linter and automatically fix fixable issues
|
|
66
|
+
npm run lint:fix
|
|
67
|
+
|
|
68
|
+
# Run formatter
|
|
69
|
+
npm run format
|
|
70
|
+
|
|
71
|
+
# Run formatter and automatically fix fixable issues
|
|
72
|
+
npm run format:fix
|
|
73
|
+
|
|
74
|
+
# Run typecheck
|
|
75
|
+
npm run typecheck
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
## License
|
|
79
|
+
|
|
80
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sozialhelden/ui",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"author": "Sozialhelden e.V. <developers@sozialhelden.de>",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"publishConfig": {
|
|
@@ -9,18 +9,20 @@
|
|
|
9
9
|
},
|
|
10
10
|
"type": "module",
|
|
11
11
|
"files": [
|
|
12
|
-
"dist"
|
|
12
|
+
"dist",
|
|
13
|
+
"src/style.css"
|
|
13
14
|
],
|
|
14
15
|
"module": "./dist/index.js",
|
|
15
16
|
"exports": {
|
|
16
17
|
".": {
|
|
17
18
|
"types": "./dist/index.d.ts",
|
|
18
19
|
"import": "./dist/index.js"
|
|
19
|
-
}
|
|
20
|
+
},
|
|
21
|
+
"./style.css": "./src/style.css"
|
|
20
22
|
},
|
|
21
23
|
"scripts": {
|
|
22
24
|
"dev": "storybook dev -p 6006",
|
|
23
|
-
"build": "npm run build:lib",
|
|
25
|
+
"build": "npm run build:lib && npm run build:storybook",
|
|
24
26
|
"build:lib": "vite build",
|
|
25
27
|
"build:storybook": "storybook build",
|
|
26
28
|
"lint": "biome lint",
|
|
@@ -32,12 +34,14 @@
|
|
|
32
34
|
"prepare": "husky"
|
|
33
35
|
},
|
|
34
36
|
"dependencies": {
|
|
37
|
+
"@radix-ui/react-alert-dialog": "1.1.15",
|
|
38
|
+
"@radix-ui/react-avatar": "1.1.10",
|
|
35
39
|
"@radix-ui/react-dialog": "1.1.15",
|
|
36
40
|
"@radix-ui/react-slot": "1.2.3",
|
|
37
41
|
"class-variance-authority": "0.7.1",
|
|
38
42
|
"clsx": "2.1.1",
|
|
39
|
-
"
|
|
40
|
-
"
|
|
43
|
+
"embla-carousel-react": "8.6.0",
|
|
44
|
+
"tailwind-merge": "3.3.1"
|
|
41
45
|
},
|
|
42
46
|
"devDependencies": {
|
|
43
47
|
"@biomejs/biome": "2.2.0",
|
|
@@ -55,16 +59,17 @@
|
|
|
55
59
|
"@vitejs/plugin-react": "5.0.0",
|
|
56
60
|
"globals": "16.3.0",
|
|
57
61
|
"husky": "9.1.7",
|
|
58
|
-
"react-dom": "19.1.1",
|
|
59
62
|
"semantic-release": "24.2.7",
|
|
60
63
|
"storybook": "9.1.2",
|
|
61
|
-
"typescript": "5.
|
|
64
|
+
"typescript": "~5.8.3",
|
|
62
65
|
"vite": "7.1.2",
|
|
63
66
|
"vite-plugin-dts": "4.5.4"
|
|
64
67
|
},
|
|
65
68
|
"peerDependencies": {
|
|
66
|
-
"lucide-react": "0.540.0",
|
|
67
|
-
"react": "19.
|
|
68
|
-
"
|
|
69
|
+
"lucide-react": "^0.540.0",
|
|
70
|
+
"react": "^19.0.0",
|
|
71
|
+
"react-dom": "^19.0.0",
|
|
72
|
+
"tailwindcss": "^4.1.0",
|
|
73
|
+
"tw-animate-css": "^1.3.0"
|
|
69
74
|
}
|
|
70
75
|
}
|
package/src/style.css
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
/** biome-ignore-all lint/suspicious/noUnknownAtRules: tailwind specific @rules */
|
|
2
|
+
|
|
3
|
+
@custom-variant dark (&:is(.dark *));
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--radius: 0.625rem;
|
|
7
|
+
--background: oklch(1 0 0);
|
|
8
|
+
--foreground: oklch(0.129 0.042 264.695);
|
|
9
|
+
--card: oklch(1 0 0);
|
|
10
|
+
--card-foreground: oklch(0.129 0.042 264.695);
|
|
11
|
+
--popover: oklch(1 0 0);
|
|
12
|
+
--popover-foreground: oklch(0.129 0.042 264.695);
|
|
13
|
+
--primary: oklch(0.585 0.233 277.117);
|
|
14
|
+
--primary-foreground: oklch(0.984 0.003 247.858);
|
|
15
|
+
--secondary: oklch(0.968 0.007 247.896);
|
|
16
|
+
--secondary-foreground: oklch(0.208 0.042 265.755);
|
|
17
|
+
--muted: oklch(0.968 0.007 247.896);
|
|
18
|
+
--muted-foreground: oklch(0.554 0.046 257.417);
|
|
19
|
+
--accent: oklch(0.968 0.007 247.896);
|
|
20
|
+
--accent-foreground: oklch(0.208 0.042 265.755);
|
|
21
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
22
|
+
--border: oklch(0.929 0.013 255.508);
|
|
23
|
+
--input: oklch(0.929 0.013 255.508);
|
|
24
|
+
--ring: oklch(0.704 0.04 256.788);
|
|
25
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
26
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
27
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
28
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
29
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
30
|
+
--sidebar: oklch(0.984 0.003 247.858);
|
|
31
|
+
--sidebar-foreground: oklch(0.129 0.042 264.695);
|
|
32
|
+
--sidebar-primary: oklch(0.208 0.042 265.755);
|
|
33
|
+
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
|
34
|
+
--sidebar-accent: oklch(0.968 0.007 247.896);
|
|
35
|
+
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
|
|
36
|
+
--sidebar-border: oklch(0.929 0.013 255.508);
|
|
37
|
+
--sidebar-ring: oklch(0.704 0.04 256.788);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.dark {
|
|
41
|
+
--background: oklch(0.129 0.042 264.695);
|
|
42
|
+
--foreground: oklch(0.984 0.003 247.858);
|
|
43
|
+
--card: oklch(0.208 0.042 265.755);
|
|
44
|
+
--card-foreground: oklch(0.984 0.003 247.858);
|
|
45
|
+
--popover: oklch(0.208 0.042 265.755);
|
|
46
|
+
--popover-foreground: oklch(0.984 0.003 247.858);
|
|
47
|
+
--primary: oklch(0.929 0.013 255.508);
|
|
48
|
+
--primary-foreground: oklch(0.208 0.042 265.755);
|
|
49
|
+
--secondary: oklch(0.279 0.041 260.031);
|
|
50
|
+
--secondary-foreground: oklch(0.984 0.003 247.858);
|
|
51
|
+
--muted: oklch(0.279 0.041 260.031);
|
|
52
|
+
--muted-foreground: oklch(0.704 0.04 256.788);
|
|
53
|
+
--accent: oklch(0.279 0.041 260.031);
|
|
54
|
+
--accent-foreground: oklch(0.984 0.003 247.858);
|
|
55
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
56
|
+
--border: oklch(1 0 0 / 10%);
|
|
57
|
+
--input: oklch(1 0 0 / 15%);
|
|
58
|
+
--ring: oklch(0.551 0.027 264.364);
|
|
59
|
+
--chart-1: oklch(0.488 0.243 264.376);
|
|
60
|
+
--chart-2: oklch(0.696 0.17 162.48);
|
|
61
|
+
--chart-3: oklch(0.769 0.188 70.08);
|
|
62
|
+
--chart-4: oklch(0.627 0.265 303.9);
|
|
63
|
+
--chart-5: oklch(0.645 0.246 16.439);
|
|
64
|
+
--sidebar: oklch(0.208 0.042 265.755);
|
|
65
|
+
--sidebar-foreground: oklch(0.984 0.003 247.858);
|
|
66
|
+
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
67
|
+
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
|
68
|
+
--sidebar-accent: oklch(0.279 0.041 260.031);
|
|
69
|
+
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
|
70
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
71
|
+
--sidebar-ring: oklch(0.551 0.027 264.364);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
@theme inline {
|
|
75
|
+
--color-background: var(--background);
|
|
76
|
+
--color-foreground: var(--foreground);
|
|
77
|
+
--color-card: var(--card);
|
|
78
|
+
--color-card-foreground: var(--card-foreground);
|
|
79
|
+
--color-popover: var(--popover);
|
|
80
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
81
|
+
--color-primary: var(--primary);
|
|
82
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
83
|
+
--color-secondary: var(--secondary);
|
|
84
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
85
|
+
--color-muted: var(--muted);
|
|
86
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
87
|
+
--color-accent: var(--accent);
|
|
88
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
89
|
+
--color-destructive: var(--destructive);
|
|
90
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
91
|
+
--color-border: var(--border);
|
|
92
|
+
--color-input: var(--input);
|
|
93
|
+
--color-ring: var(--ring);
|
|
94
|
+
--color-chart-1: var(--chart-1);
|
|
95
|
+
--color-chart-2: var(--chart-2);
|
|
96
|
+
--color-chart-3: var(--chart-3);
|
|
97
|
+
--color-chart-4: var(--chart-4);
|
|
98
|
+
--color-chart-5: var(--chart-5);
|
|
99
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
100
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
101
|
+
--radius-lg: var(--radius);
|
|
102
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
103
|
+
--color-sidebar: var(--sidebar);
|
|
104
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
105
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
106
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
107
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
108
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
109
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
110
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@layer base {
|
|
114
|
+
* {
|
|
115
|
+
@apply border-border outline-ring/50;
|
|
116
|
+
}
|
|
117
|
+
body {
|
|
118
|
+
@apply bg-background text-foreground;
|
|
119
|
+
}
|
|
120
|
+
}
|
package/dist/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {}
|