@latte-macchiat-io/latte-vanilla-components 0.0.184 → 0.0.186

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.184",
3
+ "version": "0.0.186",
4
4
  "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
@@ -30,15 +30,10 @@
30
30
  "react-intersection-observer": "^9.16.0"
31
31
  },
32
32
  "devDependencies": {
33
- "@chromatic-com/storybook": "^3.2.4",
33
+ "@chromatic-com/storybook": "^4.1.1",
34
34
  "@playwright/test": "^1.50.0",
35
- "@storybook/addon-essentials": "^8.5.2",
36
- "@storybook/addon-interactions": "^8.5.2",
37
- "@storybook/addon-onboarding": "^8.5.2",
38
- "@storybook/blocks": "^8.5.2",
39
- "@storybook/react": "^8.5.2",
40
- "@storybook/react-vite": "^8.5.2",
41
- "@storybook/test": "^8.5.2",
35
+ "@storybook/addon-onboarding": "^9.1.5",
36
+ "@storybook/react-vite": "^9.1.5",
42
37
  "@types/node": "^20",
43
38
  "@types/react": "^19",
44
39
  "@types/react-dom": "^19",
@@ -52,11 +47,12 @@
52
47
  "eslint-config-prettier": "^10.0.1",
53
48
  "eslint-plugin-import": "^2.31.0",
54
49
  "eslint-plugin-jsx-a11y": "^6.6.1",
55
- "eslint-plugin-storybook": "^0.11.2",
50
+ "eslint-plugin-storybook": "^9.1.5",
56
51
  "prettier": "^3.4.2",
57
- "storybook": "^8.5.2",
52
+ "storybook": "^9.1.5",
58
53
  "typescript": "5.6.3",
59
- "typescript-eslint": "^8.21.0"
54
+ "typescript-eslint": "^8.21.0",
55
+ "@storybook/addon-docs": "^9.1.5"
60
56
  },
61
57
  "engines": {
62
58
  "node": ">=20.9.0",
@@ -0,0 +1,260 @@
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
+ import { Button } from './Button';
3
+ import { Section } from '../Section/Section';
4
+
5
+ const meta: Meta<typeof Button> = {
6
+ title: 'Interactive Components/Button',
7
+ component: Button,
8
+ parameters: {
9
+ layout: 'centered',
10
+ docs: {
11
+ description: {
12
+ component: `
13
+ The Button component is a versatile, accessible button that supports multiple variants, sizes, and states.
14
+
15
+ ## Features
16
+ - Multiple variants (primary, secondary, ghost, destructive)
17
+ - Different sizes (small, medium, large)
18
+ - Full width option
19
+ - Loading/pending state
20
+ - Fully accessible (ARIA compliant)
21
+ - Theme-aware colors
22
+ - TypeScript support
23
+ `,
24
+ },
25
+ },
26
+ },
27
+ tags: ['autodocs'],
28
+ argTypes: {
29
+ variant: {
30
+ control: 'select',
31
+ options: ['primary', 'secondary', 'ghost', 'destructive'],
32
+ description: 'Visual style of the button',
33
+ },
34
+ size: {
35
+ control: 'select',
36
+ options: ['small', 'medium', 'large'],
37
+ description: 'Size of the button',
38
+ },
39
+ fullWidth: {
40
+ control: 'boolean',
41
+ description: 'Whether the button should take full width of its container',
42
+ },
43
+ isPending: {
44
+ control: 'boolean',
45
+ description: 'Shows loading state',
46
+ },
47
+ disabled: {
48
+ control: 'boolean',
49
+ description: 'Disables the button',
50
+ },
51
+ children: {
52
+ control: 'text',
53
+ description: 'Button content',
54
+ },
55
+ },
56
+ };
57
+
58
+ export default meta;
59
+ type Story = StoryObj<typeof Button>;
60
+
61
+ // Basic Stories
62
+ export const Primary: Story = {
63
+ args: {
64
+ variant: 'primary',
65
+ children: 'Primary Button',
66
+ },
67
+ };
68
+
69
+ export const Secondary: Story = {
70
+ args: {
71
+ variant: 'secondary',
72
+ children: 'Secondary Button',
73
+ },
74
+ };
75
+
76
+ export const Ghost: Story = {
77
+ args: {
78
+ variant: 'ghost',
79
+ children: 'Ghost Button',
80
+ },
81
+ };
82
+
83
+ export const Destructive: Story = {
84
+ args: {
85
+ variant: 'destructive',
86
+ children: 'Destructive Button',
87
+ },
88
+ };
89
+
90
+ // Size Variants
91
+ export const Small: Story = {
92
+ args: {
93
+ variant: 'primary',
94
+ size: 'small',
95
+ children: 'Small Button',
96
+ },
97
+ };
98
+
99
+ export const Medium: Story = {
100
+ args: {
101
+ variant: 'primary',
102
+ size: 'medium',
103
+ children: 'Medium Button',
104
+ },
105
+ };
106
+
107
+ export const Large: Story = {
108
+ args: {
109
+ variant: 'primary',
110
+ size: 'large',
111
+ children: 'Large Button',
112
+ },
113
+ };
114
+
115
+ // States
116
+ export const Loading: Story = {
117
+ args: {
118
+ variant: 'primary',
119
+ children: 'Loading Button',
120
+ isPending: true,
121
+ },
122
+ };
123
+
124
+ export const Disabled: Story = {
125
+ args: {
126
+ variant: 'primary',
127
+ children: 'Disabled Button',
128
+ disabled: true,
129
+ },
130
+ };
131
+
132
+ export const FullWidth: Story = {
133
+ args: {
134
+ variant: 'primary',
135
+ children: 'Full Width Button',
136
+ fullWidth: true,
137
+ },
138
+ parameters: {
139
+ layout: 'padded',
140
+ },
141
+ };
142
+
143
+ // All Variants Showcase
144
+ export const AllVariants: Story = {
145
+ render: () => (
146
+ <Section>
147
+ <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
148
+ <Button variant="primary">Primary</Button>
149
+ <Button variant="secondary">Secondary</Button>
150
+ <Button variant="ghost">Ghost</Button>
151
+ <Button variant="destructive">Destructive</Button>
152
+ </div>
153
+ </Section>
154
+ ),
155
+ parameters: {
156
+ docs: {
157
+ description: {
158
+ story: 'All available button variants displayed together.',
159
+ },
160
+ },
161
+ },
162
+ };
163
+
164
+ // All Sizes Showcase
165
+ export const AllSizes: Story = {
166
+ render: () => (
167
+ <Section>
168
+ <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
169
+ <Button variant="primary" size="small">
170
+ Small
171
+ </Button>
172
+ <Button variant="primary" size="medium">
173
+ Medium
174
+ </Button>
175
+ <Button variant="primary" size="large">
176
+ Large
177
+ </Button>
178
+ </div>
179
+ </Section>
180
+ ),
181
+ parameters: {
182
+ docs: {
183
+ description: {
184
+ story: 'All available button sizes displayed together.',
185
+ },
186
+ },
187
+ },
188
+ };
189
+
190
+ // Interactive Example
191
+ export const InteractiveExample: Story = {
192
+ render: () => (
193
+ <Section>
194
+ <div style={{ display: 'grid', gap: '2rem' }}>
195
+ <div>
196
+ <h3>Call to Action</h3>
197
+ <div style={{ display: 'flex', gap: '1rem' }}>
198
+ <Button variant="primary" size="large">
199
+ Get Started
200
+ </Button>
201
+ <Button variant="secondary" size="large">
202
+ Learn More
203
+ </Button>
204
+ </div>
205
+ </div>
206
+
207
+ <div>
208
+ <h3>Form Actions</h3>
209
+ <div style={{ display: 'flex', gap: '0.5rem' }}>
210
+ <Button variant="primary">Save</Button>
211
+ <Button variant="secondary">Cancel</Button>
212
+ <Button variant="destructive">Delete</Button>
213
+ </div>
214
+ </div>
215
+
216
+ <div>
217
+ <h3>Navigation</h3>
218
+ <div style={{ display: 'flex', gap: '0.5rem' }}>
219
+ <Button variant="ghost">← Back</Button>
220
+ <Button variant="ghost">Skip</Button>
221
+ <Button variant="primary">Next →</Button>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </Section>
226
+ ),
227
+ parameters: {
228
+ docs: {
229
+ description: {
230
+ story: 'Real-world usage examples showing different button combinations.',
231
+ },
232
+ },
233
+ },
234
+ };
235
+
236
+ // With Custom Styling
237
+ export const WithCustomStyling: Story = {
238
+ render: () => (
239
+ <Section>
240
+ <div style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}>
241
+ <Button variant="primary" borderRadius="full" padding="lg">
242
+ Rounded Button
243
+ </Button>
244
+ <Button variant="secondary" fontSize="lg" fontWeight="bold">
245
+ Large Text Button
246
+ </Button>
247
+ <Button variant="ghost" boxShadow="lg">
248
+ Shadow Button
249
+ </Button>
250
+ </div>
251
+ </Section>
252
+ ),
253
+ parameters: {
254
+ docs: {
255
+ description: {
256
+ story: 'Buttons with custom styling using sprinkles utilities.',
257
+ },
258
+ },
259
+ },
260
+ };
@@ -1,4 +1,4 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
2
 
3
3
  import { Footer } from '../../index';
4
4
 
@@ -1,4 +1,4 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
2
 
3
3
  import { Header } from '../../index';
4
4
 
@@ -1,4 +1,4 @@
1
- import type { Meta, StoryObj } from '@storybook/react';
1
+ import type { Meta, StoryObj } from '@storybook/react-vite';
2
2
 
3
3
  import { Logo } from '../../index';
4
4