@myelmut/design-system 0.1.47 → 0.1.49

package/src/components/Navigation/MobileMenu/MobileMenu.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { MobileMenu } from './MobileMenu';
+
+const meta = {
+    title: 'Components/Navigation/MobileMenu',
+    component: MobileMenu,
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['dark', 'light'],
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes',
+        },
+        activeNavLink: {
+            control: 'text',
+            description: 'Current active link',
+        },
+    },
+    args: {
+        variant: 'light',
+        className: '!top-0 !translate-y-0',
+        activeNavLink: '/recettes',
+    },
+    globals: {
+        viewport: {
+            value: 'mobile',
+        },
+    },
+} satisfies Meta<typeof MobileMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Light: Story = {
+    globals: {
+        backgrounds: {
+            value: 'dark',
+        },
+    },
+};
+
+export const Dark: Story = {
+    args: {
+        variant: 'dark',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+};

package/src/components/Navigation/MobileMenu/MobileMenu.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+
+import { ProfilIcon } from '../../../components';
+import { menuNavLinks } from '../Navbar/Navbar';
+
+type MobileMenuProps = {
+    variant: 'dark' | 'light';
+    className?: string;
+    activeNavLink: string;
+};
+
+const variantStyles = {
+    light: 'text-claret-violet-dark bg-beige-light',
+    dark: 'text-beige-light bg-claret-violet-dark',
+};
+
+export const MobileMenu = ({ variant, className, activeNavLink }: MobileMenuProps) => {
+    const { t } = useTranslation();
+
+    //prettier-ignore
+    const linkStyles = clsx(
+        'w-full border-t px-6 py-4.5', 
+        variant === 'light' ? 'border-claret-violet-light/30' : 'border-beige-light/30', 
+    );
+
+    return (
+        <ul className={clsx('absolute top-0 right-0 left-0 z-1 w-full -translate-y-full transition-transform duration-300 ease-in-out group-data-[open=false]:duration-150 group-data-[open=true]:translate-y-0', variantStyles[variant], className)}>
+            {menuNavLinks.map((item) => (
+                <li key={item.label} className={clsx(linkStyles, activeNavLink === item.href && 'font-semibold')}>
+                    <a href={item.href} aria-current={activeNavLink === item.href ? 'page' : undefined}>
+                        {t(`navigation.${item.label}`)}
+                    </a>
+                </li>
+            ))}
+            <li>
+                <a href="/auth/sign-in" className={clsx('flex items-center gap-2.5 font-semibold', linkStyles, variant === 'light' ? 'bg-beige-dark' : 'bg-claret-violet-light')}>
+                    <ProfilIcon className="w-2.5" /> {t('navigation.signIn')}
+                </a>
+            </li>
+        </ul>
+    );
+};

package/src/components/Navigation/Navbar/Navbar.stories.tsx

@@ -0,0 +1,128 @@
+import React from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Navbar } from './Navbar';
+
+const meta = {
+    title: 'Components/Navigation/NavbarDesktop',
+    component: Navbar,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+        responsive: true,
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['light', 'dark'],
+        },
+        connected: {
+            control: 'boolean',
+            description: 'Whether the user is connected.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+        },
+        activeNavLink: {
+            control: 'text',
+            description: 'The active navigation link.',
+        },
+    },
+    args: {
+        activeNavLink: '/recettes',
+    },
+} satisfies Meta<typeof Navbar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Dark: Story = {
+    args: {
+        activeNavLink: '/recettes',
+        variant: 'dark',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+    render: (args) => (
+        <div className="h-screen w-screen">
+            <Navbar {...args} />
+            <div className="text-claret-violet-dark container mx-auto px-3">
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+            </div>
+        </div>
+    ),
+};
+
+export const Light: Story = {
+    args: {
+        activeNavLink: '/recettes',
+        variant: 'light',
+    },
+    globals: {
+        backgrounds: {
+            value: 'dark',
+        },
+    },
+    render: (args) => (
+        <div className="h-screen w-screen">
+            <Navbar {...args} />
+            <div className="text-beige-light container mx-auto px-3">
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+                <p>lore ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos. </p>
+            </div>
+        </div>
+    ),
+};

package/src/components/Navigation/Navbar/Navbar.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+
+import clsx from 'clsx';
+
+import { NavbarDesktop, NavbarMobile } from '../../../components';
+import { debounce } from '../../../helpers';
+
+export type NavbarProps = {
+    variant: 'light' | 'dark';
+    activeNavLink: string;
+    voucher?: string;
+    connected?: boolean;
+    className?: string;
+};
+
+export const menuNavLinks = [
+    {
+        label: 'recipes',
+        href: '/recettes',
+    },
+    {
+        label: 'history',
+        href: '/notre-histoire',
+    },
+    {
+        label: 'blog',
+        href: '/blog',
+    },
+    {
+        label: 'sponsorship',
+        href: '/parrainage',
+    },
+];
+
+//todo update nav links
+//todo connected style when design ready
+//todo dog/Cat menu when design ready
+//todo manage analytics events on buttons
+
+export const Navbar = (props: NavbarProps) => {
+    const [variant, setVariant] = useState<'light' | 'dark'>(props.variant);
+    const navRef = useRef<HTMLDivElement | null>(null);
+
+    // GSAP system to manage navbar variant changes
+    useEffect(() => {
+        const handleNavbarChange = debounce((event: CustomEvent) => {
+            const newVariant = event.detail as 'light' | 'dark';
+            setVariant(newVariant);
+        }, 10);
+
+        window.addEventListener('navbar-change', handleNavbarChange as EventListener);
+
+        return () => {
+            window.removeEventListener('navbar-change', handleNavbarChange as EventListener);
+        };
+    }, []);
+
+    return (
+        <div id="navbar" ref={navRef} className={clsx('w-full', variant === 'light' ? 'bg-claret-violet-dark' : 'bg-beige-light', props.voucher ? 'h-36 lg:h-36.5' : 'h-21 lg:h-27.5')}>
+            <NavbarDesktop {...props} variant={variant} />
+            <NavbarMobile {...props} variant={variant} />
+        </div>
+    );
+};

package/src/components/Navigation/NavbarDesktop/NavbarDesktop.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { NavbarDesktop } from './NavbarDesktop';
+
+const meta = {
+    title: 'Components/Navigation/Navbar',
+    component: NavbarDesktop,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['light', 'dark'],
+        },
+        connected: {
+            control: 'boolean',
+            description: 'Whether the user is connected.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+        },
+    },
+} satisfies Meta<typeof NavbarDesktop>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Dark: Story = {
+    args: {
+        variant: 'dark',
+        activeNavLink: '/',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+        viewport: {
+            value: 'desktop',
+        },
+    },
+};
+
+export const Light: Story = {
+    args: {
+        variant: 'light',
+        activeNavLink: '/',
+    },
+    globals: {
+        backgrounds: {
+            value: 'dark',
+        },
+    },
+};

package/src/components/Navigation/NavbarDesktop/NavbarDesktop.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+
+import { Banner, Button, Logo } from '../../../components';
+import { menuNavLinks, NavbarProps } from '../Navbar/Navbar';
+
+const variantStyles = {
+    light: 'text-claret-violet-dark from-claret-violet-dark to-claret-violet-dark/0',
+    dark: 'text-beige-light from-beige-light to-beige-light/0 ',
+};
+
+export const NavbarDesktop = ({ variant = 'dark', className, voucher, activeNavLink }: NavbarProps) => {
+    const { t } = useTranslation('design');
+
+    return (
+        <nav className={clsx('group fixed top-0 right-0 left-0 z-100 bg-linear-to-b from-60% px-0 py-7.5 transition-colors duration-300 max-lg:hidden', voucher ? 'pt-16.5' : 'pt-7.5', variantStyles[variant], className)}>
+            {!!voucher && <Banner content={voucher} className={clsx('top-0 z-100')} />}
+
+            <div className={clsx('relative z-20 container mx-auto flex flex-1 items-center justify-between')}>
+                <div className="flex items-center md:gap-10 xl:gap-20">
+                    <a href="/" className="me-auto">
+                        <Logo className="w-18 xl:w-36" variant={variant === 'dark' ? 'primary' : 'secondary'} />
+                    </a>
+                    <ul className="flex items-center justify-between md:gap-2.5 xl:gap-5">
+                        {menuNavLinks.map((link) => (
+                            <li key={link.label}>
+                                <Button variant="terciary" as="a" href={link.href} color={variant} active={activeNavLink === link.href}>
+                                    {t(`navigation.${link.label}`)}
+                                </Button>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+
+                <div className="flex items-center gap-6">
+                    <Button variant="secondary" color={variant} as="a" href="/auth/sign-in" size="md">
+                        {t('navigation.signIn')}
+                    </Button>
+                    <Button variant="primary" color={variant} as="a" href="/wizard/type" size="md">
+                        {t('navigation.tryTwoWeeks')}
+                    </Button>
+                </div>
+            </div>
+        </nav>
+    );
+};

package/src/components/Navigation/NavbarMobile/NavbarMobile.stories.tsx

@@ -0,0 +1,59 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { NavbarMobile } from './NavbarMobile';
+
+const meta = {
+    title: 'Components/Navigation/NavbarMobile',
+    component: NavbarMobile,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['light', 'dark'],
+        },
+        connected: {
+            control: 'boolean',
+            description: 'Whether the user is connected.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+        },
+    },
+    globals: {
+        viewport: {
+            value: 'mobile',
+        },
+    },
+} satisfies Meta<typeof NavbarMobile>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Dark: Story = {
+    args: {
+        variant: 'dark',
+        activeNavLink: '/',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+};
+
+export const Light: Story = {
+    args: {
+        variant: 'light',
+        activeNavLink: '/',
+    },
+    globals: {
+        backgrounds: {
+            value: 'dark',
+        },
+    },
+};

package/src/components/Navigation/NavbarMobile/NavbarMobile.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import clsx from 'clsx';
+
+import { Banner, CrossIcon, Logo, MenuIcon, MobileMenu } from '../../../components';
+import { disableScroll, enableScroll } from '../../../helpers';
+import { NavbarProps } from '../Navbar/Navbar';
+
+const variantStyles = {
+    light: 'text-claret-violet-dark from-claret-violet-dark to-claret-violet-dark/0 group-data-[open=true]:from-claret-violet-dark/0 group-data-[open=true]:text-claret-violet-dark',
+    dark: 'text-beige-light from-beige-light to-beige-light/0 group-data-[open=true]:from-beige-light/0 group-data-[open=true]:text-beige-light',
+};
+
+const overlayStyles = {
+    dark: 'bg-claret-violet-dark/30',
+    light: 'bg-beige-light/30',
+};
+
+export const NavbarMobile = ({ variant = 'dark', className, voucher, activeNavLink }: NavbarProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isClosing, setIsClosing] = useState(false);
+    const closingTimerRef = useRef<number | null>(null);
+
+    const handleClickMenu = useCallback(() => {
+        if (isOpen) {
+            enableScroll();
+            setIsClosing(true);
+            setIsOpen(false);
+            closingTimerRef.current = window.setTimeout(() => {
+                setIsClosing(false);
+            }, 300);
+        } else {
+            disableScroll();
+            setIsOpen(true);
+        }
+    }, [isOpen]);
+
+    useEffect(() => {
+        return () => {
+            if (closingTimerRef.current !== null) {
+                clearTimeout(closingTimerRef.current);
+            }
+        };
+    }, []);
+
+    const logoVariant: 'primary' | 'secondary' = useMemo(() => {
+        return (variant === 'dark' && !isOpen) || (variant === 'light' && isOpen) ? 'primary' : 'secondary';
+    }, [variant, isOpen]);
+
+    const mobileMenuStyles = useMemo(() => {
+        return clsx({
+            'text-claret-violet-dark': (variant === 'dark' && !isOpen) || (variant === 'light' && isOpen),
+            'text-beige-light': (variant === 'dark' && isOpen) || (variant === 'light' && !isOpen),
+        });
+    }, [variant, isOpen]);
+
+    return (
+        <nav data-open={isOpen} className={clsx('group fixed top-0 right-0 left-0 z-20 block lg:hidden', className)}>
+            {!!voucher && <Banner content={voucher} className={clsx('z-100', isOpen ? 'top-0' : 'top-7')} />}
+            <div className={clsx('relative z-10 flex items-center justify-between bg-linear-to-b from-60% p-6 pe-3 transition-colors duration-150', voucher ? (isOpen ? 'h-29.5 pt-13.5' : 'h-36 pt-20.5') : 'h-21.5 pt-6', variantStyles[variant])}>
+                <a href="/" className="me-auto">
+                    <Logo className="w-18 md:w-36" variant={logoVariant} />
+                </a>
+
+                <button onClick={handleClickMenu} className={clsx('p-3', mobileMenuStyles)}>
+                    {isOpen ? <CrossIcon className="w-4" /> : <MenuIcon className="w-4" />}
+                </button>
+            </div>
+            <MobileMenu variant={variant} className={voucher ? 'pt-29.5' : 'pt-21.5'} activeNavLink={activeNavLink} />
+            {(isOpen || isClosing) && <div onClick={handleClickMenu} className={clsx('fixed inset-0 z-0', overlayStyles[variant], isClosing ? 'animate-fade-out' : 'animate-fade-in')}></div>}
+        </nav>
+    );
+};

package/src/components/Navigation/Stepper/Stepper.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Stepper } from './Stepper';
+
+const meta: Meta<typeof Stepper> = {
+    title: 'Components/Navigation/Stepper',
+    component: Stepper,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        totalSteps: {
+            control: 'number',
+            description: 'Total number of steps.',
+        },
+        currentStep: {
+            control: 'number',
+            description: 'Current step.',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+        },
+    },
+    args: {
+        totalSteps: 8,
+        currentStep: 1,
+        className: 'w-screen',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Navigation/Stepper/Stepper.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+
+export type StepperProps = {
+    totalSteps: number;
+    currentStep: number;
+    className?: string;
+};
+
+export const Stepper = ({ totalSteps, currentStep, className }: StepperProps) => {
+    return (
+        <div className={clsx('relative flex items-center justify-between gap-2', className)}>
+            {Array.from({ length: totalSteps }).map((_, index) => (
+                <div key={index} className={clsx('bg-beige-light border-claret-violet-dark/40 z-2 h-1.5 w-1.5 rounded-full border transition-colors duration-200 md:h-2.5 md:w-2.5', index <= currentStep - 1 && 'bg-claret-violet-dark delay-150')}></div>
+            ))}
+            <div className="bg-claret-violet-dark/30 absolute right-0 left-0 z-0 h-0.25 md:h-0.5"></div>
+            <div style={{ width: `${((currentStep - 1) / (totalSteps - 1)) * 100}%` }} className={clsx('bg-claret-violet-dark transition-width absolute left-0 z-1 block h-0.25 w-0 max-w-full shrink-0 duration-300 md:h-0.5')}></div>
+        </div>
+    );
+};