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

package/src/components/ConsentCookie/stories.tsx

@@ -1,26 +1,50 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { ConsentCookie } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ConsentCookie> = {
   title: '7. Interactive / ConsentCookie',
   component: ConsentCookie,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    layout: 'fullscreen',
   },
-  // 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: {
+    cookieName: { control: 'text' },
+    cookieExpirationDays: { control: 'number' },
+    enableGoogleAnalytics: { control: 'boolean' },
+  },
 };
 
 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: {},
+  args: {
+    cookieName: 'latte-consent',
+    children: (
+      <p>Nous utilisons des cookies pour améliorer votre expérience de navigation. Acceptez-vous l'utilisation de cookies ?</p>
+    ),
+  },
+};
+
+export const WithGoogleAnalytics: Story = {
+  args: {
+    cookieName: 'latte-consent-ga',
+    enableGoogleAnalytics: true,
+    children: (
+      <p>Nous utilisons des cookies analytiques (Google Analytics) pour comprendre comment vous utilisez notre site.</p>
+    ),
+  },
+};
+
+export const LongerExpiration: Story = {
+  args: {
+    cookieName: 'latte-consent-long',
+    cookieExpirationDays: 365,
+    children: (
+      <p>En continuant à naviguer sur ce site, vous acceptez notre politique de cookies.</p>
+    ),
+  },
 };

package/src/components/Footer/stories.tsx

@@ -1,26 +1,68 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { Footer } from './index';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Footer> = {
   title: '1. Layout/Footer',
   component: Footer,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    layout: 'fullscreen',
   },
-  // 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: {},
+  args: {
+    children: <p style={{ textAlign: 'center' }}>© 2024 Latte Macchiat.io — Tous droits réservés</p>,
+  },
+};
+
+export const WithLinks: Story = {
+  args: {
+    children: (
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: '1rem' }}>
+        <p>© 2024 Latte Macchiat.io</p>
+        <nav style={{ display: 'flex', gap: '1rem' }}>
+          <a href="#">Mentions légales</a>
+          <a href="#">Confidentialité</a>
+          <a href="#">CGU</a>
+        </nav>
+      </div>
+    ),
+  },
+};
+
+export const WithColumns: Story = {
+  args: {
+    children: (
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '2rem' }}>
+        <div>
+          <strong>À propos</strong>
+          <ul style={{ listStyle: 'none', padding: 0, marginTop: '0.5rem' }}>
+            <li><a href="#">Notre équipe</a></li>
+            <li><a href="#">Notre histoire</a></li>
+          </ul>
+        </div>
+        <div>
+          <strong>Services</strong>
+          <ul style={{ listStyle: 'none', padding: 0, marginTop: '0.5rem' }}>
+            <li><a href="#">Développement</a></li>
+            <li><a href="#">Design</a></li>
+          </ul>
+        </div>
+        <div>
+          <strong>Contact</strong>
+          <ul style={{ listStyle: 'none', padding: 0, marginTop: '0.5rem' }}>
+            <li><a href="#">Email</a></li>
+            <li><a href="#">Téléphone</a></li>
+          </ul>
+        </div>
+      </div>
+    ),
+  },
 };

package/src/components/Form/Select/stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { Select } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Select> = {
   title: '5. Forms / Select',
   component: Select,
@@ -10,7 +9,10 @@ const meta: Meta<typeof Select> = {
     layout: 'centered',
   },
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    labelPosition: { control: 'select', options: ['top', 'side'] },
+    required: { control: 'boolean' },
+  },
   decorators: [
     (Story) => (
       <div style={{ minWidth: '320px', maxWidth: '500px', width: '100%' }}>
@@ -23,60 +25,64 @@ const meta: Meta<typeof Select> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+const countryOptions = [
+  { value: '', label: 'Sélectionnez un pays', disabled: true },
+  { value: 'fr', label: 'France', disabled: false },
+  { value: 'be', label: 'Belgique', disabled: false },
+  { value: 'ch', label: 'Suisse', disabled: false },
+  { value: 'ca', label: 'Canada', disabled: false },
+];
+
 export const Default: Story = {
-  args: {
-    name: 'country',
-    label: 'Country',
-    options: [
-      { value: '', label: 'Select your country', disabled: true },
-      { value: 'us', label: 'United States', disabled: false },
-      { value: 'uk', label: 'United Kingdom', disabled: false },
-      { value: 'ca', label: 'Canada', disabled: false },
-      { value: 'au', label: 'Australia', disabled: false },
-    ],
-  },
+  args: { name: 'country', label: 'Pays', options: countryOptions },
+};
+
+export const LabelPositionTop: Story = {
+  args: { name: 'country', label: 'Pays', labelPosition: 'top', options: countryOptions },
+};
+
+export const LabelPositionSide: Story = {
+  args: { name: 'country', label: 'Pays', labelPosition: 'side', options: countryOptions },
+};
+
+export const Required: Story = {
+  args: { name: 'country', label: 'Pays', required: true, options: countryOptions },
 };
 
 export const WithError: Story = {
   args: {
-    name: 'payment-method',
-    label: 'Payment Method',
+    name: 'payment',
+    label: 'Mode de paiement',
     options: [
-      { value: '', label: 'Select payment method', disabled: true },
-      { value: 'credit', label: 'Credit Card', disabled: false },
-      { value: 'debit', label: 'Debit Card', disabled: false },
+      { value: '', label: 'Choisir un mode', disabled: true },
+      { value: 'card', label: 'Carte bancaire', disabled: false },
       { value: 'paypal', label: 'PayPal', disabled: false },
     ],
-    errors: 'Please select a payment method',
+    errors: 'Veuillez sélectionner un mode de paiement',
   },
 };
 
 export const WithMultipleErrors: Story = {
   args: {
-    name: 'subscription',
-    label: 'Subscription Plan',
+    name: 'plan',
+    label: 'Forfait',
     options: [
-      { value: '', label: 'Choose a plan', disabled: true },
-      { value: 'free', label: 'Free', disabled: false },
-      { value: 'pro', label: 'Pro - $9.99/mo', disabled: false },
-      { value: 'enterprise', label: 'Enterprise - $49.99/mo', disabled: false },
+      { value: '', label: 'Choisir un forfait', disabled: true },
+      { value: 'free', label: 'Gratuit', disabled: false },
+      { value: 'pro', label: 'Pro', disabled: false },
     ],
-    errors: ['Plan selection is required', 'Your current plan has expired'],
+    errors: ['Ce champ est requis', 'Votre forfait actuel a expiré'],
   },
 };
 
-export const Required: Story = {
+export const WithDisabledOption: Story = {
   args: {
-    name: 'language',
-    label: 'Preferred Language',
-    required: true,
+    name: 'plan',
+    label: 'Forfait',
     options: [
-      { value: '', label: 'Select a language', disabled: true },
-      { value: 'en', label: 'English', disabled: false },
-      { value: 'es', label: 'Español', disabled: false },
-      { value: 'fr', label: 'Français', disabled: false },
-      { value: 'de', label: 'Deutsch', disabled: false },
+      { value: 'free', label: 'Gratuit', disabled: false },
+      { value: 'pro', label: 'Pro', disabled: false },
+      { value: 'enterprise', label: 'Enterprise (bientôt disponible)', disabled: true },
     ],
   },
 };

package/src/components/Form/TextField/stories.tsx

@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { TextField } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof TextField> = {
   title: '5. Forms / TextField',
   component: TextField,
@@ -10,7 +9,10 @@ const meta: Meta<typeof TextField> = {
     layout: 'centered',
   },
   tags: ['autodocs'],
-  argTypes: {},
+  argTypes: {
+    type: { control: 'select', options: ['text', 'email', 'password', 'number', 'tel', 'url', 'search', 'textarea'] },
+    required: { control: 'boolean' },
+  },
   decorators: [
     (Story) => (
       <div style={{ minWidth: '320px', maxWidth: '500px', width: '100%' }}>
@@ -23,60 +25,55 @@ const meta: Meta<typeof TextField> = {
 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: {
-    name: 'username',
-    label: 'Username',
-    type: 'text',
-    placeholder: 'Enter your username',
-  },
+export const Text: Story = {
+  args: { name: 'username', label: "Nom d'utilisateur", type: 'text', placeholder: 'Jean Dupont' },
 };
 
-export const EmailField: Story = {
-  args: {
-    name: 'email',
-    label: 'Email Address',
-    type: 'email',
-    placeholder: 'you@example.com',
-    required: true,
-  },
+export const Email: Story = {
+  args: { name: 'email', label: 'Adresse email', type: 'email', placeholder: 'jean@exemple.fr', required: true },
+};
+
+export const Password: Story = {
+  args: { name: 'password', label: 'Mot de passe', type: 'password', placeholder: '••••••••' },
+};
+
+export const Number: Story = {
+  args: { name: 'age', label: 'Âge', type: 'number', placeholder: '25' },
+};
+
+export const Tel: Story = {
+  args: { name: 'phone', label: 'Téléphone', type: 'tel', placeholder: '+33 6 00 00 00 00' },
+};
+
+export const Url: Story = {
+  args: { name: 'website', label: 'Site web', type: 'url', placeholder: 'https://exemple.fr' },
+};
+
+export const Search: Story = {
+  args: { name: 'search', label: 'Rechercher', type: 'search', placeholder: 'Rechercher...' },
+};
+
+export const Textarea: Story = {
+  args: { name: 'message', label: 'Message', type: 'textarea', rows: 5, placeholder: 'Écrivez votre message...' },
 };
 
 export const WithError: Story = {
-  args: {
-    name: 'password',
-    label: 'Password',
-    type: 'password',
-    errors: 'Password is required',
-  },
+  args: { name: 'email', label: 'Email', type: 'email', errors: 'Ce champ est requis' },
 };
 
 export const WithMultipleErrors: Story = {
   args: {
     name: 'password',
-    label: 'Password',
+    label: 'Mot de passe',
     type: 'password',
-    errors: ['Password is required', 'Password must be at least 8 characters', 'Password must contain a number'],
+    errors: ['Le mot de passe est requis', 'Minimum 8 caractères', 'Doit contenir un chiffre'],
   },
 };
 
-export const AsTextarea: Story = {
-  args: {
-    name: 'bio',
-    label: 'Biography',
-    type: 'textarea',
-    rows: 5,
-    placeholder: 'Tell us about yourself...',
-  },
+export const Required: Story = {
+  args: { name: 'name', label: 'Nom complet', type: 'text', required: true, placeholder: 'Jean Dupont' },
 };
 
 export const TextareaWithError: Story = {
-  args: {
-    name: 'comments',
-    label: 'Comments',
-    type: 'textarea',
-    rows: 4,
-    errors: 'Please provide your feedback',
-  },
+  args: { name: 'bio', label: 'Biographie', type: 'textarea', rows: 4, errors: 'Ce champ est requis' },
 };

package/src/components/Header/stories.tsx

@@ -1,26 +1,61 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { Header } from './index';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Header> = {
   title: '1. Layout/Header',
   component: Header,
   parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    layout: 'fullscreen',
   },
-  // 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: {
+    isFixed: { control: 'boolean' },
+    toggleNavVisibility: { control: 'select', options: ['show', 'hide', 'mobileOnly'] },
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+const logo = (
+  <div style={{ padding: '1rem', fontWeight: 700, fontSize: '1.25rem' }}>Logo</div>
+);
+
 export const Default: Story = {
-  args: {},
+  args: { children: logo },
+};
+
+export const WithToggleNav: Story = {
+  args: { children: logo, toggleNavVisibility: 'show' },
+};
+
+export const ToggleNavHidden: Story = {
+  args: { children: logo, toggleNavVisibility: 'hide' },
+};
+
+export const ToggleNavMobileOnly: Story = {
+  args: { children: logo, toggleNavVisibility: 'mobileOnly' },
+};
+
+export const Fixed: Story = {
+  args: { children: logo, isFixed: true },
+  parameters: { layout: 'padded' },
+};
+
+export const WithNavContent: Story = {
+  args: {
+    toggleNavVisibility: 'mobileOnly',
+    children: (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%', padding: '0.5rem 1rem' }}>
+        <div style={{ fontWeight: 700, fontSize: '1.25rem' }}>Logo</div>
+        <nav style={{ display: 'flex', gap: '1.5rem' }}>
+          <a href="#">Accueil</a>
+          <a href="#">À propos</a>
+          <a href="#">Contact</a>
+        </nav>
+      </div>
+    ),
+  },
 };

package/src/components/Heading/stories.tsx

@@ -1,29 +1,53 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
 
 import { Heading } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Heading> = {
   title: '2. Content / Heading',
   component: Heading,
   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: {
+    as: { control: 'select', options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
+    size: { control: 'select', options: ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'] },
+  },
 };
 
 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: <>Title</>,
-  },
+export const H1: Story = {
+  args: { as: 'h1', children: 'Heading H1 — XXL' },
+};
+
+export const H2: Story = {
+  args: { as: 'h2', children: 'Heading H2 — XL' },
+};
+
+export const H3: Story = {
+  args: { as: 'h3', children: 'Heading H3 — LG' },
+};
+
+export const H4: Story = {
+  args: { as: 'h4', children: 'Heading H4 — MD' },
+};
+
+export const H5: Story = {
+  args: { as: 'h5', children: 'Heading H5 — SM' },
+};
+
+export const H6: Story = {
+  args: { as: 'h6', children: 'Heading H6 — XS' },
+};
+
+export const H1SizeXS: Story = {
+  name: 'H1 with custom size XS',
+  args: { as: 'h1', size: 'xs', children: 'H1 tag, XS size' },
+};
+
+export const H6SizeXXL: Story = {
+  name: 'H6 with custom size XXL',
+  args: { as: 'h6', size: 'xxl', children: 'H6 tag, XXL size' },
 };

package/src/components/Icon/stories.tsx

@@ -1,26 +1,81 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { Icon } from '.';
 
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof Icon> = {
   title: '4. Media / Icon',
   component: Icon,
   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: {
+    icon: {
+      control: 'select',
+      options: [
+        'caret', 'close', 'arrowBack', 'arrowForward',
+        'warning', 'info', 'success', 'danger',
+        'play', 'pause', 'volumeMute', 'volumeUp',
+        'socialFacebook', 'socialInstagram', 'socialPinterest',
+        'socialLinkedIn', 'socialSpotify', 'socialTiktok', 'socialX', 'socialYoutube',
+      ],
+    },
+    size: { control: 'number' },
+    color: { control: 'color' },
+  },
 };
 
 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 Caret: Story = { args: { icon: 'caret', size: 24 } };
+export const Close: Story = { args: { icon: 'close', size: 24 } };
+export const ArrowBack: Story = { args: { icon: 'arrowBack', size: 24 } };
+export const ArrowForward: Story = { args: { icon: 'arrowForward', size: 24 } };
+export const Warning: Story = { args: { icon: 'warning', size: 24 } };
+export const Info: Story = { args: { icon: 'info', size: 24 } };
+export const Success: Story = { args: { icon: 'success', size: 24 } };
+export const Danger: Story = { args: { icon: 'danger', size: 24 } };
+export const Play: Story = { args: { icon: 'play', size: 24 } };
+export const Pause: Story = { args: { icon: 'pause', size: 24 } };
+export const VolumeMute: Story = { args: { icon: 'volumeMute', size: 24 } };
+export const VolumeUp: Story = { args: { icon: 'volumeUp', size: 24 } };
+
+export const SocialFacebook: Story = { args: { icon: 'socialFacebook', size: 24 } };
+export const SocialInstagram: Story = { args: { icon: 'socialInstagram', size: 24 } };
+export const SocialPinterest: Story = { args: { icon: 'socialPinterest', size: 24 } };
+export const SocialLinkedIn: Story = { args: { icon: 'socialLinkedIn', size: 24 } };
+export const SocialTiktok: Story = { args: { icon: 'socialTiktok', size: 24 } };
+export const SocialX: Story = { args: { icon: 'socialX', size: 24 } };
+export const SocialYoutube: Story = { args: { icon: 'socialYoutube', size: 24 } };
+
+export const SizeSmall: Story = { args: { icon: 'info', size: 16 } };
+export const SizeMedium: Story = { args: { icon: 'info', size: 24 } };
+export const SizeLarge: Story = { args: { icon: 'info', size: 48 } };
+
+export const AllIcons: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', alignItems: 'center' }}>
+      {(['caret', 'close', 'arrowBack', 'arrowForward', 'warning', 'info', 'success', 'danger', 'play', 'pause', 'volumeMute', 'volumeUp'] as const).map((name) => (
+        <div key={name} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
+          <Icon icon={name} size={24} />
+          <span style={{ fontSize: '11px' }}>{name}</span>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+export const AllSocialIcons: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', alignItems: 'center' }}>
+      {(['socialFacebook', 'socialInstagram', 'socialPinterest', 'socialLinkedIn', 'socialTiktok', 'socialX', 'socialYoutube'] as const).map((name) => (
+        <div key={name} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '4px' }}>
+          <Icon icon={name} size={24} />
+          <span style={{ fontSize: '11px' }}>{name.replace('social', '')}</span>
+        </div>
+      ))}
+    </div>
+  ),
 };