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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.185",
+  "version": "0.0.186",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",
@@ -30,15 +30,10 @@
     "react-intersection-observer": "^9.16.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.4",
+    "@chromatic-com/storybook": "^4.1.1",
     "@playwright/test": "^1.50.0",
-    "@storybook/addon-essentials": "^8.5.2",
-    "@storybook/addon-interactions": "^8.5.2",
-    "@storybook/addon-onboarding": "^8.5.2",
-    "@storybook/blocks": "^8.5.2",
-    "@storybook/react": "^8.5.2",
-    "@storybook/react-vite": "^8.5.2",
-    "@storybook/test": "^8.5.2",
+    "@storybook/addon-onboarding": "^9.1.5",
+    "@storybook/react-vite": "^9.1.5",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -52,11 +47,12 @@
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-storybook": "^0.11.2",
+    "eslint-plugin-storybook": "^9.1.5",
     "prettier": "^3.4.2",
-    "storybook": "^8.5.2",
+    "storybook": "^9.1.5",
     "typescript": "5.6.3",
-    "typescript-eslint": "^8.21.0"
+    "typescript-eslint": "^8.21.0",
+    "@storybook/addon-docs": "^9.1.5"
   },
   "engines": {
     "node": ">=20.9.0",

package/src/components/Button/stories.tsx

@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './Button';
+import { Section } from '../Section/Section';
+
+const meta: Meta<typeof Button> = {
+  title: 'Interactive Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+The Button component is a versatile, accessible button that supports multiple variants, sizes, and states.
+
+## Features
+- Multiple variants (primary, secondary, ghost, destructive)
+- Different sizes (small, medium, large)
+- Full width option
+- Loading/pending state
+- Fully accessible (ARIA compliant)
+- Theme-aware colors
+- TypeScript support
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost', 'destructive'],
+      description: 'Visual style of the button',
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description: 'Size of the button',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Whether the button should take full width of its container',
+    },
+    isPending: {
+      control: 'boolean',
+      description: 'Shows loading state',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the button',
+    },
+    children: {
+      control: 'text',
+      description: 'Button content',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// Basic Stories
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Primary Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Secondary Button',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    variant: 'ghost',
+    children: 'Ghost Button',
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+    children: 'Destructive Button',
+  },
+};
+
+// Size Variants
+export const Small: Story = {
+  args: {
+    variant: 'primary',
+    size: 'small',
+    children: 'Small Button',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    variant: 'primary',
+    size: 'medium',
+    children: 'Medium Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    variant: 'primary',
+    size: 'large',
+    children: 'Large Button',
+  },
+};
+
+// States
+export const Loading: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Loading Button',
+    isPending: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Disabled Button',
+    disabled: true,
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    variant: 'primary',
+    children: 'Full Width Button',
+    fullWidth: true,
+  },
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+// All Variants Showcase
+export const AllVariants: Story = {
+  render: () => (
+    <Section>
+      <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap', alignItems: 'center' }}>
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="ghost">Ghost</Button>
+        <Button variant="destructive">Destructive</Button>
+      </div>
+    </Section>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All available button variants displayed together.',
+      },
+    },
+  },
+};
+
+// All Sizes Showcase
+export const AllSizes: Story = {
+  render: () => (
+    <Section>
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+        <Button variant="primary" size="small">
+          Small
+        </Button>
+        <Button variant="primary" size="medium">
+          Medium
+        </Button>
+        <Button variant="primary" size="large">
+          Large
+        </Button>
+      </div>
+    </Section>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All available button sizes displayed together.',
+      },
+    },
+  },
+};
+
+// Interactive Example
+export const InteractiveExample: Story = {
+  render: () => (
+    <Section>
+      <div style={{ display: 'grid', gap: '2rem' }}>
+        <div>
+          <h3>Call to Action</h3>
+          <div style={{ display: 'flex', gap: '1rem' }}>
+            <Button variant="primary" size="large">
+              Get Started
+            </Button>
+            <Button variant="secondary" size="large">
+              Learn More
+            </Button>
+          </div>
+        </div>
+
+        <div>
+          <h3>Form Actions</h3>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <Button variant="primary">Save</Button>
+            <Button variant="secondary">Cancel</Button>
+            <Button variant="destructive">Delete</Button>
+          </div>
+        </div>
+
+        <div>
+          <h3>Navigation</h3>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <Button variant="ghost">← Back</Button>
+            <Button variant="ghost">Skip</Button>
+            <Button variant="primary">Next →</Button>
+          </div>
+        </div>
+      </div>
+    </Section>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Real-world usage examples showing different button combinations.',
+      },
+    },
+  },
+};
+
+// With Custom Styling
+export const WithCustomStyling: Story = {
+  render: () => (
+    <Section>
+      <div style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}>
+        <Button variant="primary" borderRadius="full" padding="lg">
+          Rounded Button
+        </Button>
+        <Button variant="secondary" fontSize="lg" fontWeight="bold">
+          Large Text Button
+        </Button>
+        <Button variant="ghost" boxShadow="lg">
+          Shadow Button
+        </Button>
+      </div>
+    </Section>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Buttons with custom styling using sprinkles utilities.',
+      },
+    },
+  },
+};

package/src/components/Footer/stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Footer } from '../../index';
 

package/src/components/Header/stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Header } from '../../index';
 

package/src/components/Logo/stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Logo } from '../../index';