@myelmut/design-system 0.1.46 → 0.1.48

package/src/components/styles/Illustration/Illustration.tsx

@@ -0,0 +1,45 @@
+import clsx from 'clsx';
+
+export const Illustration = ({ 
+    name, 
+    variant = 'dark', 
+    hasBorder = true, 
+    hasBackground = true,
+    className = ''
+}: { 
+    name: string; 
+    variant?: 'light' | 'dark'; 
+    hasBorder?: boolean; 
+    hasBackground?: boolean; 
+    className?: string;
+}) => {
+    const imageVariant = variant === 'light' ? '-light' : '';
+
+    return (
+        <div className={clsx(
+            // Base rounded corners when border or background is present
+            (hasBorder || hasBackground) && 'rounded-card',
+            // Border styles
+            hasBorder && 'border',
+            // Background and padding styles
+            hasBackground && [
+                'p-6',
+                variant === 'dark' 
+                    ? 'bg-beige-light text-claret-violet-dark' 
+                    : 'bg-claret-violet-dark text-beige-light'
+            ],
+            // Remove padding when neither border nor background
+            !hasBackground && !hasBorder && 'p-0',
+            className
+        )}>
+            {hasBackground && (
+                <p className="font-pangaia text-heading-md mb-3">
+                    {' '}
+                    {name}
+                    {imageVariant}
+                </p>
+            )}
+            <img src={`/illustrations/${name}${imageVariant}.webp`} alt={name} />
+        </div>
+    );
+};

package/src/components/styles/Typography/Typography.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Typography } from './Typography';
+
+const meta = {
+    title: 'Styles/Typography',
+    component: Typography,
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['pangaia', 'mori'],
+        },
+    },
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Pangaia: Story = {
+    args: {
+        variant: 'pangaia',
+    },
+};
+
+export const Mori: Story = {
+    args: {
+        variant: 'mori',
+    },
+};

package/src/components/styles/Typography/Typography.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+
+export interface TypographyProps {
+    variant?: 'pangaia' | 'mori';
+}
+
+const variantStyles = {
+    pangaia: 'font-pangaia',
+    mori: 'font-mori',
+};
+
+export const Typography = ({ variant = 'pangaia' }: TypographyProps) => {
+    return (
+        <div className={clsx(variantStyles[variant], 'text-claret-violet-dark text-4xl')}>
+            <p>{variant}</p>
+            <p>{variant.toUpperCase()}</p>
+        </div>
+    );
+};

package/src/helpers/accordions.ts

@@ -0,0 +1,39 @@
+'use client';
+
+export const closeOthersAccordions = (details: HTMLDetailsElement) => {
+    document.querySelectorAll<HTMLDetailsElement>('details[data-accordion]').forEach((other) => {
+        if (other !== details) {
+            other.removeAttribute('data-open');
+            other.removeAttribute('open');
+            const content = other.querySelector<HTMLElement>('[data-accordion-content]');
+            if (content) {
+                content.style.maxHeight = '0px';
+            }
+        }
+    });
+};
+
+export const accordionAnimation = (e: Event, details: HTMLDetailsElement, content: HTMLElement, delay: number = 300) => {
+    e.preventDefault();
+
+    const isOpening = !details.hasAttribute('open');
+    if (isOpening) {
+        closeOthersAccordions(details);
+
+        details.setAttribute('open', '');
+
+        requestAnimationFrame(() => {
+            const contentHeight = content.scrollHeight;
+            content.style.transition = 'max-height 0.3s ease';
+            content.style.maxHeight = `${contentHeight}px`;
+        });
+        details.setAttribute('data-open', 'true');
+    } else {
+        content.style.transition = 'max-height 0.15s ease';
+        content.style.maxHeight = '0px';
+        details.removeAttribute('data-open');
+        setTimeout(() => {
+            details.removeAttribute('open');
+        }, delay);
+    }
+};

package/src/helpers/clickoutside.ts

@@ -0,0 +1,31 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+/**
+ * Calls `handler` when a pointer interaction finishes outside the element referenced by `ref`.
+ *
+ * The hook ensures the most recent `handler` is invoked even if it changes between renders.
+ *
+ * @param ref - React ref of the element to detect outside interactions for
+ * @param handler - Callback invoked with the originating `MouseEvent` or `TouchEvent` when a `pointerup` occurs outside the referenced element
+ */
+export function useClickOutside<T extends HTMLElement>(ref: React.RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void) {
+    const handlerRef = useRef(handler);
+    useEffect(() => {
+        handlerRef.current = handler;
+    }, [handler]);
+
+    useEffect(() => {
+        function listener(event: MouseEvent | TouchEvent) {
+            const el = ref.current;
+            if (!el || el.contains(event.target as Node)) return;
+            handlerRef.current(event);
+        }
+
+        document.addEventListener('pointerup', listener);
+        return () => {
+            document.removeEventListener('pointerup', listener);
+        };
+    }, [ref]);
+}

package/src/helpers/debounce.ts

@@ -0,0 +1,10 @@
+export const debounce = (func: (...args: any[]) => void, wait: number) => {
+    let timeout: ReturnType<typeof setTimeout>;
+    return function executedFunction(...args: any[]) {
+        const later = () => {
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+};

package/src/helpers/index.ts

@@ -0,0 +1,9 @@
+import { accordionAnimation, closeOthersAccordions } from './accordions';
+import { useClickOutside } from './clickoutside';
+import { debounce } from './debounce';
+import { useIntersectionObserver, useMultiIntersectionObserver } from './intersectionObserver';
+import { onKeyDown, onNumericInput, useArrowNavigation } from './keyboardControl';
+import { useIsDesktop, useIsMobile } from './responsive';
+import { disableScroll, enableScroll } from './scroll';
+
+export { useClickOutside, onKeyDown, useArrowNavigation, onNumericInput, closeOthersAccordions, accordionAnimation, useIsMobile, useIntersectionObserver, useMultiIntersectionObserver, debounce, disableScroll, enableScroll, useIsDesktop };

package/src/helpers/intersectionObserver.ts

@@ -0,0 +1,101 @@
+'use client';
+
+import { useEffect } from 'react';
+import type { RefObject } from 'react';
+
+type UseSingleObserverOptions = {
+    ref: RefObject<HTMLElement>;
+    onAppear: () => void;
+    onDisappear: () => void;
+    threshold?: number;
+};
+
+type UseMultiObserverOptions = {
+    targets: Element[];
+    callback: (entry: IntersectionObserverEntry, element: HTMLElement) => void;
+    root?: Element | null;
+    threshold?: number;
+    rootMargin?: string;
+};
+
+/**
+ * Observes a single element and invokes callbacks when it enters or leaves the viewport threshold.
+ *
+ * @param ref - RefObject pointing to the target HTMLElement to observe
+ * @param onAppear - Callback invoked when the element becomes intersecting
+ * @param onDisappear - Callback invoked when the element stops being intersecting
+ * @param threshold - Intersection ratio threshold between 0 and 1 that determines when callbacks fire
+ */
+export function useIntersectionObserver({ ref, onAppear, onDisappear, threshold = 0.5 }: UseSingleObserverOptions) {
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) return;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    if (entry.isIntersecting) {
+                        onAppear();
+                    } else {
+                        onDisappear();
+                    }
+                });
+            },
+            { threshold },
+        );
+
+        observer.observe(element);
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [onAppear, onDisappear, threshold]);
+}
+
+/**
+ * Observe all elements matching a CSS selector and invoke a callback for each element when it becomes visible.
+ *
+ * Observers are created for the currently matched elements and re-created on window resize to account for layout changes; observers are cleaned up on unmount or when inputs change.
+ *
+ * @param selector - CSS selector used to find elements to observe. If falsy, no observer is created.
+ * @param callback - Invoked for each intersecting entry as `callback(entry, element)`, where `entry` is the IntersectionObserverEntry and `element` is the observed HTMLElement.
+ * @param root - Optional ancestor element used as the viewport for intersection; `null` means the browser viewport.
+ * @param threshold - Intersection ratio at which the callback is triggered (e.g., `0.1`).
+ * @param rootMargin - Margin around the root bounding box (e.g., `'0px'`, `'10px 0px'`).
+ */
+export function useMultiIntersectionObserver({ targets, callback, root = null, threshold = 0.1, rootMargin = '0px' }: UseMultiObserverOptions) {
+    useEffect(() => {
+        if (!targets?.length) return;
+
+        const createObserver = () => {
+            const observer = new IntersectionObserver(
+                (entries) => {
+                    entries.forEach((entry) => {
+                        if (entry.isIntersecting) {
+                            const el = entry.target as HTMLElement;
+                            callback(entry, el);
+                        }
+                    });
+                },
+                { root, threshold, rootMargin },
+            );
+
+            targets.forEach((el) => observer.observe(el));
+            return observer;
+        };
+
+        let observer = createObserver();
+
+        const handleResize = () => {
+            observer.disconnect();
+            observer = createObserver();
+        };
+
+        window.addEventListener('resize', handleResize);
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+            observer.disconnect();
+        };
+    }, [targets, root, threshold, rootMargin, callback]);
+}

package/src/helpers/keyboardControl.ts

@@ -0,0 +1,58 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+export const onKeyDown = (e: React.KeyboardEvent<HTMLLIElement | HTMLLabelElement | HTMLDivElement>, callback: () => void) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+        callback();
+    }
+};
+
+export function useArrowNavigation<T extends HTMLElement = HTMLElement>(selector: string) {
+    const containerRef = useRef<T | null>(null);
+
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            const items = Array.from(container.querySelectorAll<HTMLElement>(selector));
+            const currentIndex = items.indexOf(document.activeElement as HTMLElement);
+
+            if (items.length === 0) return;
+
+            switch (e.key) {
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    const nextIndex = (currentIndex + 1) % items.length;
+                    items[nextIndex].focus();
+                    break;
+                }
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    const prevIndex = (currentIndex - 1 + items.length) % items.length;
+                    items[prevIndex].focus();
+                    break;
+                }
+            }
+        };
+
+        container.addEventListener('keydown', handleKeyDown as EventListener);
+        return () => container.removeEventListener('keydown', handleKeyDown as EventListener);
+    }, [selector]);
+
+    return containerRef;
+}
+
+export const onNumericInput = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const allowed = ['Backspace', 'Delete', 'Tab', 'Escape', 'Enter', 'ArrowLeft', 'ArrowRight'];
+
+    if (allowed.includes(e.key)) {
+        return;
+    }
+
+    // Block everything except numbers
+    if (!/^[0-9]$/.test(e.key)) {
+        e.preventDefault();
+    }
+};

package/src/helpers/responsive.ts

@@ -0,0 +1,29 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = useState(false);
+
+    useEffect(() => {
+        const check = () => setIsMobile(window.innerWidth < 768);
+        check();
+        window.addEventListener('resize', check);
+        return () => window.removeEventListener('resize', check);
+    }, []);
+
+    return isMobile;
+}
+
+export function useIsDesktop() {
+    const [isDesktop, setIsDesktop] = useState(false);
+
+    useEffect(() => {
+        const check = () => setIsDesktop(window.innerWidth >= 1024);
+        check();
+        window.addEventListener('resize', check);
+        return () => window.removeEventListener('resize', check);
+    }, []);
+
+    return isDesktop;
+}

package/src/helpers/scroll.ts

@@ -0,0 +1,16 @@
+'use client';
+
+export const disableScroll = () => {
+    const scrollY = window.scrollY;
+    document.body.style.position = 'fixed';
+    document.body.style.top = `-${scrollY}px`;
+    document.body.style.width = '100%';
+};
+
+export const enableScroll = () => {
+    const scrollY = document.body.style.top;
+    document.body.style.position = '';
+    document.body.style.top = '';
+    document.body.style.width = '';
+    window.scrollTo(0, parseInt(scrollY || '0') * -1);
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+//locales
+export * from './lib/i18n';
+
+// Components
+export * from './components';
+
+// Helpers
+export * from './helpers';

package/src/lib/i18n.ts

@@ -0,0 +1,20 @@
+'use client';
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import fr from './locales/fr/design.json';
+
+if (!i18n.isInitialized) {
+    i18n.use(initReactI18next).init({
+        resources: { fr: { design: fr } },
+        lng: 'fr',
+        ns: ['design'],
+        defaultNS: 'design',
+        interpolation: { escapeValue: false },
+    });
+}
+
+export default i18n;
+
+export { default as frDesign } from './locales/fr/design.json';

package/src/lib/locales/fr/design.json

@@ -0,0 +1,42 @@
+{
+    "homeVoucher": "PROMO : -{{percentage}}% SUR VOTRE PREMIÈRE COMMANDE + LIVRAISON OFFERTE",
+    "dropdown": {
+        "noResults": "Aucun résultat trouvé"
+    },
+    "navigation": {
+        "home": "Accueil",
+        "recipes": "Recettes",
+        "history": "Histoire",
+        "blog": "Blog",
+        "sponsorship": "Parrainage",
+        "signIn": "Se connecter",
+        "tryTwoWeeks": "Essayer 2 semaines",
+        "contact": "Contact",
+        "help": "Aide",
+        "dog": "Chien",
+        "cat": "Chat",
+        "homemadeRation": "Ration ménagère",
+        "ourStory": "Notre histoire",
+        "whyElmut": "Pourquoi Elmut",
+        "faq": "FAQ",
+        "legal": "Mentions légales",
+        "terms": "CGV",
+        "sitemap": "Plan du site",
+        "back": "Retour"
+    },
+    "footer": {
+        "copyright": "Tous droits réservés · Elmut"
+    },
+    "newsletter": {
+        "emailPlaceholder": "claudinethequeen@gmail.com",
+        "subscribeLabel": "S'abonner"
+    },
+    "wizard": {
+        "myPet": "Mon poilu",
+        "promotionBanner": "30% de réduction sur votre commande d'essai"
+    },
+    "tips": {
+        "claudineAlt": "Claudine",
+        "footerMessage": "Recevez régulièrement de mes nouvelles ! Et un peu d'Elmut aussi !"
+    }
+}

package/src/styles/globals.css

@@ -0,0 +1,205 @@
+@import 'tailwindcss';
+@import 'tailwindcss/theme';
+
+@font-face {
+    font-family: 'Pangaia';
+    src: url('../assets/fonts/PPPangaia-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pangaia';
+    src: url('../assets/fonts/PPPangaia-MediumItalic.woff2') format('woff2');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Pangaia';
+    src: url('../assets/fonts/PPPangaia-Ultralight.woff2') format('woff2');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mori';
+    src: url('../assets/fonts/PPMori-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mori';
+    src: url('../assets/fonts/PPMori-SemiBold.woff2') format('woff2');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Mori';
+    src: url('../assets/fonts/PPMori-RegularItalic.woff2') format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@theme {
+    /* Colors */
+    --color-claret-violet-dark: #671a36; /* Claret Violet 500 */
+    --color-claret-violet-light: #802948; /* Claret Violet 400 */
+    --color-pink-oyster-dark: #eeaeb4; /* Pink Oyster 600 */
+    --color-pink-oyster-light: #f7c8cc; /* Pink Oyster 500 */
+    --color-beige-ultra-light: #fffbf3; /* Beige Ultra Light */
+    --color-beige-dark: #f0e4c8; /* Beige 600 */
+    --color-beige-light: #f7efdc; /* Beige 500 */
+    --color-beige-ultra-dark: #dfd0ac; /* Beige ultra dark */
+    --color-lavender-blue-dark: #adadf0; /* Lavender Blue 600 */
+    --color-lavender-blue-light: #c3c3fe; /* Lavender Blue 500 */
+    --color-red-error: #b1002c;
+    /* Fonts */
+    --font-pangaia: 'Pangaia', serif;
+    --font-mori: 'Mori', sans-serif;
+
+    /* Title font sizes */
+    --text-display-xl: 8rem; /* Display 01 */
+    --text-display-xl-mobile: 2.5rem; /* Display */
+    --text-display-lg: 6rem; /* Display 02 */
+    --text-display-lg-mobile: 1.5rem; /* Heading 01 */
+    --text-display-md: 3rem; /* Display 03 */
+    --text-display-md-mobile: 1.5rem; /* Heading 01 italic */
+    --text-heading-xl: 4rem; /* Heading 01 */
+    --text-heading-xl-mobile: 1.25rem; /* Heading 02 */
+    --text-heading-lg: 3rem; /* Heading 02 */
+    --text-heading-lg-mobile: 1rem; /* Heading 03 | Big text when semibold */
+    --text-heading-md: 2rem; /* Heading 03 */
+    --text-heading-md-mobile: 0.875rem; /* Regular Text */
+
+    /* Body font sizes */
+    --text-xl: 1.25rem; /* Big text */
+    --text-xl-mobile: 0.875rem; /* Button */
+    --text-lg: 1.25rem; /* Big Text */
+    --text-lg-mobile: 0.75rem; /* Small Text */
+    --text-md: 1rem; /* Regular Text */
+    --text-md-mobile: 0.75rem; /* Small Text */
+    --text-sm: 0.875rem; /* Small Text */
+    --text-sm-mobile: 0.625rem; /* Overline */
+    --text-legend: 0.875rem; /* Legend */
+    --text-button: 1rem; /* Button */
+    --text-button-mobile: 0.875rem; /* Button */
+
+    /* Border radius */
+    --radius-card: 1.25rem;
+    --radius-illustrated-card-button: 1.125rem;
+    --radius-card-button-mobile: 0.625rem;
+    --radius-input: 0.625rem;
+    --radius-food-card: 1rem;
+    --radius-table: 1.875rem;
+
+    /* Custom breakpoints (affect all @md, @lg, etc. utilities) */
+    --breakpoint-xs: 155px;
+
+    /* Custom container widths */
+    --container-xs: 100vw;
+    --container-sm: 640px;
+    --container-md: 768px;
+    --container-lg: 1024px;
+    --container-xl: 1280px;
+    --container-2xl: 1536px;
+
+    /* animation */
+    --animate-fade-in: fade-in 300ms ease-in;
+    --animate-fade-out: fade-out 300ms ease-out;
+    --animate-banner: banner 15s linear infinite;
+}
+
+@layer utilities {
+    /* Delete the arrows on the number inputs */
+    input[type='number']::-webkit-inner-spin-button,
+    input[type='number']::-webkit-outer-spin-button {
+        @apply m-0 appearance-none;
+    }
+
+    input[type='number'] {
+        @apply [appearance:textfield]; /* standard + Firefox */
+    }
+
+    summary {
+        list-style: none;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+
+    @keyframes fade-in {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-out {
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes banner {
+        from {
+            transform: translateX(0);
+        }
+        to {
+            transform: translateX(-50%);
+        }
+    }
+
+    .scrollbar-hide {
+        -ms-overflow-style: none; /* IE and Edge */
+        scrollbar-width: none; /* Firefox */
+    }
+
+    .scrollbar-hide::-webkit-scrollbar {
+        display: none; /* Chrome, Safari, Opera */
+    }
+}
+
+@utility container {
+    width: 100%;
+    margin-inline: auto;
+    padding-inline: 1.5rem;
+    max-width: var(--container-xs);
+
+    @variant sm {
+        max-width: var(--container-sm);
+    }
+
+    @variant md {
+        padding-inline: 2rem;
+        max-width: var(--container-md);
+    }
+
+    @variant lg {
+        max-width: var(--container-lg);
+    }
+
+    @variant xl {
+        padding-inline: 3.75rem;
+        max-width: var(--container-xl);
+    }
+
+    @variant 2xl {
+        padding-inline: 5rem;
+        max-width: var(--container-2xl);
+    }
+}