@latte-macchiat-io/latte-vanilla-components 0.0.556 → 0.0.558

package/src/components/List/stories.tsx

@@ -3,32 +3,65 @@ import React from 'react';
 
 import { List } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof List> = {
   title: '1. Layout/List',
   component: List,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  argTypes: {
+    withBullets: { control: 'boolean' },
+    maxLength: { control: 'number' },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '600px', maxWidth: '100%' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+const shortItems = (
+  <>
+    <li>First item</li>
+    <li>Second item</li>
+    <li>Third item</li>
+    <li>Fourth item</li>
+  </>
+);
+
+const manyItems = (
+  <>
+    {Array.from({ length: 12 }, (_, i) => (
+      <li key={i}>List item {i + 1}</li>
+    ))}
+  </>
+);
+
 export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <li>hello</li>
-        <li>hello</li>
-      </>
-    ),
-  },
+  args: { children: shortItems },
+};
+
+export const WithBullets: Story = {
+  args: { withBullets: true, children: shortItems },
+};
+
+export const ManyItems: Story = {
+  name: 'Many items (2 columns)',
+  args: { children: manyItems },
+};
+
+export const ManyItemsWithBullets: Story = {
+  name: 'Many items with bullets (2 columns)',
+  args: { withBullets: true, children: manyItems },
+};
+
+export const CustomMaxLength: Story = {
+  name: 'Custom maxLength = 3 (forces 2 columns earlier)',
+  args: { maxLength: 3, children: shortItems },
 };

package/src/components/Logo/stories.tsx

@@ -1,26 +1,44 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { Logo } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Logo> = {
   title: '4. Media / Logo',
   component: Logo,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Default: Story = {
   args: {},
 };
+
+export const WithText: Story = {
+  args: {
+    children: <span style={{ fontWeight: 700, fontSize: '1.5rem' }}>Latte Macchiat.io</span>,
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    children: <img src="https://placehold.co/120x40" alt="Logo" style={{ display: 'block' }} />,
+  },
+};
+
+export const WithTextAndTagline: Story = {
+  args: {
+    children: (
+      <div>
+        <span style={{ fontWeight: 700, fontSize: '1.25rem', display: 'block' }}>Latte Macchiat.io</span>
+        <span style={{ fontSize: '0.75rem', opacity: 0.7 }}>Artisan web components</span>
+      </div>
+    ),
+  },
+};

package/src/components/Modal/stories.tsx

@@ -3,27 +3,69 @@ import React from 'react';
 
 import { Modal } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Modal> = {
   title: '7. Interactive / Modal',
   component: Modal,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+    align: { control: 'select', options: ['left', 'center', 'right'] },
+    withCloseButton: { control: 'boolean' },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+const content = (
+  <div>
+    <h3 style={{ marginTop: 0 }}>Modal title</h3>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </div>
+);
+
 export const Default: Story = {
+  args: { triggerLabel: 'Open modal', size: 'md', align: 'center', children: content },
+};
+
+export const SizeSmall: Story = {
+  args: { triggerLabel: 'Open small modal', size: 'sm', children: content },
+};
+
+export const SizeMedium: Story = {
+  args: { triggerLabel: 'Open medium modal', size: 'md', children: content },
+};
+
+export const SizeLarge: Story = {
+  args: { triggerLabel: 'Open large modal', size: 'lg', children: content },
+};
+
+export const WithCloseButton: Story = {
+  args: { triggerLabel: 'Open modal', withCloseButton: true, children: content },
+};
+
+export const AlignLeft: Story = {
+  args: { triggerLabel: 'Open modal (left)', align: 'left', children: content },
+};
+
+export const AlignRight: Story = {
+  args: { triggerLabel: 'Open modal (right)', align: 'right', children: content },
+};
+
+export const WithFunctionChildren: Story = {
+  name: 'With close callback',
   args: {
-    children: <div>Hellooooo</div>,
+    triggerLabel: 'Open modal',
+    withCloseButton: false,
+    children: ({ closeModal }: { closeModal: () => void }) => (
+      <div>
+        <h3 style={{ marginTop: 0 }}>Controlled modal</h3>
+        <p>This modal controls its own close button.</p>
+        <button onClick={closeModal} style={{ marginTop: '1rem' }}>Close</button>
+      </div>
+    ),
   },
 };

package/src/components/Nav/stories.tsx

@@ -1,28 +1,37 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { Nav } from './index';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Nav> = {
   title: '6. Nav / Main',
   component: Nav,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  argTypes: {
+    direction: { control: 'select', options: ['row', 'column'] },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
-  args: {
-    children: '',
-  },
+const links = (
+  <>
+    <a href="#">Accueil</a>
+    <a href="#">À propos</a>
+    <a href="#">Services</a>
+    <a href="#">Blog</a>
+    <a href="#">Contact</a>
+  </>
+);
+
+export const Row: Story = {
+  args: { direction: 'row', children: links },
+};
+
+export const Column: Story = {
+  args: { direction: 'column', children: links },
 };

package/src/components/NavLegal/stories.tsx

@@ -1,28 +1,40 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { NavLegal } from './index';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof NavLegal> = {
   title: '6. Nav / Legal',
   component: NavLegal,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Default: Story = {
   args: {
-    children: '',
+    children: (
+      <>
+        <a href="#">Mentions légales</a>
+        <a href="#">Politique de confidentialité</a>
+        <a href="#">CGU</a>
+      </>
+    ),
+  },
+};
+
+export const MinimalLinks: Story = {
+  args: {
+    children: (
+      <>
+        <a href="#">Mentions légales</a>
+        <a href="#">Cookies</a>
+      </>
+    ),
   },
 };

package/src/components/NavSocial/stories.tsx

@@ -2,27 +2,65 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { NavSocial } from './index';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof NavSocial> = {
   title: '6. Nav / Social',
   component: NavSocial,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  argTypes: {
+    size: { control: 'number' },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Default: Story = {
   args: {
-    children: '',
+    size: 24,
+    navSocial: [
+      { name: 'instagram', link: '#' },
+      { name: 'facebook', link: '#' },
+      { name: 'linkedIn', link: '#' },
+    ],
+  },
+};
+
+export const SmallIcons: Story = {
+  args: {
+    size: 16,
+    navSocial: [
+      { name: 'instagram', link: '#' },
+      { name: 'facebook', link: '#' },
+      { name: 'linkedIn', link: '#' },
+    ],
+  },
+};
+
+export const LargeIcons: Story = {
+  args: {
+    size: 32,
+    navSocial: [
+      { name: 'instagram', link: '#' },
+      { name: 'facebook', link: '#' },
+      { name: 'linkedIn', link: '#' },
+    ],
+  },
+};
+
+export const AllPlatforms: Story = {
+  args: {
+    size: 24,
+    navSocial: [
+      { name: 'instagram', link: '#' },
+      { name: 'facebook', link: '#' },
+      { name: 'linkedIn', link: '#' },
+      { name: 'X', link: '#' },
+      { name: 'youtube', link: '#' },
+      { name: 'tiktok', link: '#' },
+      { name: 'pinterest', link: '#' },
+    ],
   },
 };

package/src/components/Paragraph/stories.tsx

@@ -3,27 +3,60 @@ import React from 'react';
 
 import { Paragraph } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Paragraph> = {
   title: '2. Content / Paragraph',
   component: Paragraph,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
     layout: 'centered',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  argTypes: {
+    size: { control: 'select', options: ['full', 'lg', 'md', 'sm'] },
+    align: { control: 'select', options: ['left', 'center', 'right'] },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '800px', maxWidth: '100%' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+const text = (
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </p>
+);
+
 export const Default: Story = {
-  args: {
-    children: <>Lorem ispum</>,
-  },
+  args: { size: 'full', align: 'left', children: text },
+};
+
+export const SizeLarge: Story = {
+  args: { size: 'lg', children: text },
+};
+
+export const SizeMedium: Story = {
+  args: { size: 'md', children: text },
+};
+
+export const SizeSmall: Story = {
+  args: { size: 'sm', children: text },
+};
+
+export const AlignCenter: Story = {
+  args: { align: 'center', children: text },
+};
+
+export const AlignRight: Story = {
+  args: { align: 'right', children: text },
+};
+
+export const SmallAlignCenter: Story = {
+  args: { size: 'sm', align: 'center', children: text },
 };

package/src/components/Spacer/stories.tsx

@@ -1,26 +1,50 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { Spacer } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Spacer> = {
   title: '1. Layout/Spacer',
   component: Spacer,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    layout: 'padded',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
   argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  decorators: [
+    (Story) => (
+      <div style={{ width: '500px' }}>
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+const block = (label: string) => (
+  <div style={{ padding: '1rem', background: '#e5e7eb', borderRadius: '4px', textAlign: 'center' }}>{label}</div>
+);
+
 export const Default: Story = {
-  args: {},
+  render: () => (
+    <div>
+      {block('Block A')}
+      <Spacer />
+      {block('Block B')}
+    </div>
+  ),
+};
+
+export const BetweenSections: Story = {
+  render: () => (
+    <div>
+      {block('Section 1')}
+      <Spacer />
+      {block('Section 2')}
+      <Spacer />
+      {block('Section 3')}
+    </div>
+  ),
 };

package/src/components/Video/stories.tsx

@@ -2,27 +2,47 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Video } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Video> = {
   title: '4. Media / Video',
   component: Video,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    layout: 'padded',
   },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {},
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+  argTypes: {
+    size: { control: 'select', options: ['fullWidth', 'fullScreen'] },
+    isAutoPlay: { control: 'boolean' },
+    startMuted: { control: 'boolean' },
+    showControls: { control: 'boolean' },
+    hidePlayButton: { control: 'boolean' },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+const sampleVideo = 'https://www.w3schools.com/html/mov_bbb.mp4';
+
 export const Default: Story = {
-  args: {
-    children: '',
-  },
+  args: { video: sampleVideo },
+};
+
+export const WithControls: Story = {
+  args: { video: sampleVideo, showControls: true },
+};
+
+export const Autoplay: Story = {
+  args: { video: sampleVideo, isAutoPlay: true, startMuted: true },
+};
+
+export const StartMuted: Story = {
+  args: { video: sampleVideo, startMuted: true },
+};
+
+export const HidePlayButton: Story = {
+  args: { video: sampleVideo, hidePlayButton: true, showControls: true },
+};
+
+export const AllControls: Story = {
+  args: { video: sampleVideo, showControls: true, startMuted: true },
 };