@myelmut/design-system 0.1.47 → 0.1.48

package/src/components/Inputs/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useCallback } from 'react';
+
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+
+import { Checkbox } from '../../../components';
+import { onKeyDown, useArrowNavigation } from '../../../helpers';
+
+type CommonProps = {
+    isOpen: boolean;
+    options: { label: string; value: string }[];
+    name: string;
+    value?: string;
+    values?: string[];
+    disabled?: boolean;
+    className?: string;
+};
+
+type SingleDropdownMenuProps = CommonProps & {
+    multiple?: false;
+    onChange: (value: string) => void;
+    onChangeMultiple?: (values: string[]) => void;
+};
+
+type MultipleDropdownMenuProps = CommonProps & {
+    multiple: true;
+    onChange?: (value: string) => void;
+    onChangeMultiple: (values: string[]) => void;
+};
+
+type DropdownMenuProps = SingleDropdownMenuProps | MultipleDropdownMenuProps;
+
+export const DropdownMenu = ({ name, options, value = '', values = [], disabled = false, className = '', onChange = () => {}, onChangeMultiple = () => {}, isOpen, multiple = false }: DropdownMenuProps) => {
+    const menuRef = useArrowNavigation<HTMLUListElement>(multiple ? 'label' : '[role="option"]');
+    const { t } = useTranslation('design');
+    const handleOptionClick = useCallback(
+        (selection: string) => {
+            onChange(selection);
+        },
+        [onChange],
+    );
+
+    const handleOptionClickMultiple = useCallback(
+        (selection: string) => {
+            if (values.includes(selection)) {
+                onChangeMultiple(values.filter((value) => value !== selection));
+            } else {
+                onChangeMultiple([...values, selection]);
+            }
+        },
+        [onChangeMultiple, values],
+    );
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent<HTMLLIElement>, selection: string) => {
+            onKeyDown(e, () => handleOptionClick(selection));
+        },
+        [handleOptionClick],
+    );
+
+    const activeDescendantId = value ? `${name}-option-${value}` : undefined;
+
+    // prettier-ignore
+    const menuClasses = clsx(
+        'rounded-input border-claret-violet-dark transition-duration-3000 will-change-height will-change-max-height w-full overflow-auto border bg-white px-3 py-2.5 opacity-0 transition-all md:min-w-max',
+        isOpen && 'max-h-33 h-auto opacity-100',
+        !isOpen && 'max-h-0 h-0',
+        className,
+    );
+
+    return (
+        <ul tabIndex={-1} aria-activedescendant={activeDescendantId} role="listbox" className={menuClasses} ref={menuRef}>
+            {options.map((option) =>
+                multiple ? (
+                    <li
+                        id={`${name}-option-${option.value}`}
+                        aria-disabled={disabled}
+                        aria-selected={option.value === value}
+                        role="option"
+                        tabIndex={-1}
+                        key={option.value}
+                        className={clsx('text-md hover:bg-beige-light transition-duration-300 cursor-pointer rounded-md transition-colors', option.value === value && 'bg-beige-light/40')}
+                    >
+                        <Checkbox name={option.value} checked={values.includes(option.value)} onChange={() => handleOptionClickMultiple(option.value)}>
+                            <span>{option.label}</span>
+                        </Checkbox>
+                    </li>
+                ) : (
+                    <li
+                        id={`${name}-option-${option.value}`}
+                        aria-disabled={disabled}
+                        aria-selected={option.value === value}
+                        role="option"
+                        onClick={() => handleOptionClick(option.value)}
+                        onKeyDown={(e) => handleKeyDown(e, option.value)}
+                        tabIndex={isOpen ? 0 : -1}
+                        key={option.value}
+                        className={clsx('text-md hover:bg-beige-light transition-duration-300 outline-claret-violet-dark cursor-pointer rounded-md px-2 py-4 transition-colors', option.value === value && 'bg-beige-light/40')}
+                    >
+                        {option.label}
+                    </li>
+                ),
+            )}
+            {options.length <= 0 && <li className="text-claret-violet-dark/50 text-legend cursor-default">{t('dropdown.noResults')}</li>}
+        </ul>
+    );
+};

package/src/components/Inputs/ErrorMessage/ErrorMessage.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ErrorMessage } from './ErrorMessage';
+
+const meta = {
+    title: 'Components/Inputs/ErrorMessage',
+    component: ErrorMessage,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        message: { control: 'text', description: 'The error message to display' },
+        hasError: { control: 'boolean', description: 'Whether the error message should be displayed' },
+        className: { control: 'text', description: 'Additional CSS classes to add to the component' },
+    },
+    args: {
+        message: 'This is an error message',
+        hasError: true,
+        className: '',
+    },
+} satisfies Meta<typeof ErrorMessage>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        message: 'This is an error message',
+        hasError: true,
+    },
+};

package/src/components/Inputs/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+
+import { Text } from '../../../components';
+
+export interface ErrorMessageProps {
+    hasError: boolean;
+    message: string;
+    id?: string;
+    className?: string;
+}
+
+export const ErrorMessage = ({ message, hasError, className, id = '' }: ErrorMessageProps) => {
+    return (
+        <Text aria-live="polite" id={id} role={hasError ? 'alert' : undefined} size="legend" className={clsx('text-red-error mt-2 min-h-5 opacity-0 transition-opacity duration-300', hasError && 'opacity-100', className)}>
+            {message || ''}
+        </Text>
+    );
+};

package/src/components/Inputs/Filters/Filters.stories.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Filters } from './Filters';
+
+const meta = {
+    title: 'Components/Inputs/Filters',
+    component: Filters,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        placeholder: { control: 'text' },
+        label: { control: 'text' },
+        options: { control: 'object' },
+        onChange: { action: 'onChange' },
+        disabled: { control: 'boolean' },
+        name: { control: 'text' },
+        values: { control: 'object' },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof Filters>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Filters',
+        placeholder: 'Voir tout',
+        options: [
+            { label: 'Option 1', value: 'option1' },
+            { label: 'Option 2', value: 'option2' },
+            { label: 'Option 3', value: 'option3' },
+        ],
+        onChange: () => {},
+        disabled: false,
+        name: 'filters',
+        className: 'max-md:ms-50',
+        values: [],
+    },
+    render: (arg) => {
+        const [values, setValues] = useState<string[]>([]);
+
+        return <Filters {...arg} onChange={(values) => setValues(values)} values={values} />;
+    },
+};

package/src/components/Inputs/Filters/Filters.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+import clsx from 'clsx';
+
+import { ClearButton, FiltersIcon } from '../../../components';
+import { onKeyDown, useClickOutside } from '../../../helpers';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu';
+
+export interface FiltersProps {
+    placeholder: string;
+    label: string;
+    options: { label: string; value: string }[];
+    values: string[];
+    onChange: (values: string[]) => void;
+    disabled: boolean;
+    name: string;
+    className?: string;
+}
+
+export const Filters = ({ placeholder, label, options, values, onChange, disabled, name, className }: FiltersProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const ref = useRef<HTMLDivElement>(null);
+    useClickOutside(ref as React.RefObject<HTMLDivElement>, () => setIsOpen(false));
+
+    const handleChange = useCallback(
+        (selection: string[]) => {
+            onChange(selection);
+        },
+        [onChange],
+    );
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent<HTMLDivElement>) => {
+            onKeyDown(e, () => setIsOpen(!isOpen));
+        },
+        [setIsOpen],
+    );
+
+    const clearFilters = useCallback(
+        (e: React.MouseEvent<HTMLButtonElement>) => {
+            e.stopPropagation();
+            onChange([]);
+        },
+        [onChange],
+    );
+
+    const buttonLabel = useMemo(() => {
+        return values?.length > 0 ? `${label} (${values.length})` : placeholder;
+    }, [values, label, placeholder]);
+
+    return (
+        <div className={clsx('relative', className)} ref={ref}>
+            <div
+                role="button"
+                tabIndex={0}
+                onClick={() => setIsOpen(!isOpen)}
+                onKeyDown={handleKeyDown}
+                className={clsx(
+                    'rounded-input bg-pink-oyster-dark text-claret-violet-dark border-claret-violet-dark outline-claret-violet-dark relative flex cursor-pointer items-center justify-between gap-4 border p-2.5 transition-colors duration-300 md:w-54 md:px-3 md:py-4',
+                    'max-md:after:bg-claret-violet-dark max-md:after:border-pink-oyster-dark max-md:after:absolute max-md:after:-top-[2px] max-md:after:-right-[2px] max-md:after:h-2 max-md:after:w-2 max-md:after:rounded-full max-md:after:border max-md:after:opacity-0 max-md:after:transition-opacity max-md:after:duration-300 max-md:after:content-[""]',
+                    values.length > 0 && 'max-md:bg-claret-violet-dark max-md:text-pink-oyster-dark max-md:after:opacity-100',
+                )}
+            >
+                <span className="text-md flex items-center gap-2 max-md:hidden">
+                    {buttonLabel}
+                    {values.length > 0 && <ClearButton onClick={clearFilters} className="max-md:hidden" />}
+                </span>
+                <FiltersIcon className="w-6" />
+            </div>
+            <DropdownMenu name={name} options={options} multiple={true} values={values} onChangeMultiple={handleChange} disabled={disabled} isOpen={isOpen} className="absolute top-full right-0 mt-2.5 max-md:w-54" />
+        </div>
+    );
+};

package/src/components/Inputs/Label/Label.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Label } from './Label';
+
+const meta = {
+    title: 'Components/Inputs/Label',
+    component: Label,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        label: { control: 'text' },
+        className: { control: 'text' },
+        id: { control: 'text' },
+        required: { control: 'boolean' },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof Label>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Label',
+        id: 'label',
+    },
+};

package/src/components/Inputs/Label/Label.tsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+    label: string;
+    required?: boolean;
+    className?: string;
+}
+
+export const Label = ({ label, id, className = 'mb-4', required = false, ...props }: LabelProps) => {
+    return (
+        <label htmlFor={id} {...props} className={clsx('text-md block', className)}>
+            {label}
+            {!required && <>&nbsp;*</>}
+        </label>
+    );
+};

package/src/components/Inputs/Newsletter/Newsletter.stories.tsx

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Newsletter } from './Newsletter';
+
+const meta = {
+    title: 'Components/Inputs/Newsletter',
+    component: Newsletter,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        placeholder: { control: 'text', description: 'Placeholder text for the input' },
+        label: { control: 'text', description: 'Label text for the button' },
+        variant: { control: 'select', options: ['light', 'dark', 'footer'], description: 'Variant of the component light or dark' },
+        disabled: { control: 'boolean', description: 'Whether the input is disabled' },
+        className: { control: 'text', description: 'Additional CSS classes to add to the component' },
+        onSubscribe: { action: 'clicked' },
+        hasError: { control: 'boolean', description: 'Whether the input has an error' },
+        error: { control: 'text', description: 'Error message to display' },
+    },
+    args: {
+        placeholder: 'fake-email@mail.com',
+        className: '',
+        onSubscribe: () => {},
+    },
+} satisfies Meta<typeof Newsletter>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Light: Story = {
+    args: {
+        variant: 'light',
+        className: 'max-md:w-80',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+};
+
+export const Dark: Story = {
+    args: {
+        variant: 'dark',
+        className: 'max-md:w-80',
+    },
+    globals: {
+        backgrounds: {
+            value: 'dark',
+        },
+    },
+};
+
+export const Footer: Story = {
+    args: {
+        variant: 'footer',
+        className: 'max-md:w-80',
+    },
+    globals: {
+        backgrounds: {
+            value: 'lavender',
+        },
+    },
+};

package/src/components/Inputs/Newsletter/Newsletter.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+
+import { Button, ErrorMessage } from '../../../components';
+
+export interface NewsletterProps {
+    placeholder?: string;
+    label?: string;
+    variant?: 'light' | 'dark' | 'footer';
+    disabled?: boolean;
+    className?: string;
+    onSubscribe: (email: string) => void;
+    hasError?: boolean;
+    error?: string;
+}
+
+export const Newsletter = ({ variant = 'light', className, placeholder, label, disabled = false, onSubscribe = () => {}, hasError = false, error = '' }: NewsletterProps) => {
+    const { t } = useTranslation('design');
+    const defaultPlaceholder = placeholder || t('newsletter.emailPlaceholder');
+    const defaultLabel = label || t('newsletter.subscribeLabel');
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        const data = new FormData(e.currentTarget);
+        const rawEmail = (data.get('email') as string) ?? '';
+        const email = rawEmail.trim();
+        if (email.length === 0) return;
+        onSubscribe(email);
+    };
+
+    return (
+        <form onSubmit={handleSubmit} className={className}>
+            <div
+                className={clsx(
+                    'flex w-full items-center justify-between gap-3 max-lg:flex-col lg:gap-4 lg:rounded-full',
+                    variant === 'light' && 'lg:bg-beige-dark lg:text-claret-violet-dark',
+                    variant === 'dark' && 'lg:bg-beige-light/20 lg:text-beige-light',
+                    variant === 'footer' && 'lg:bg-claret-violet-dark/10 lg:text-claret-violet-dark',
+                )}
+            >
+                <input
+                    aria-label={defaultPlaceholder}
+                    aria-invalid={hasError || undefined}
+                    aria-describedby={hasError ? 'newsletter-error' : undefined}
+                    autoComplete="email"
+                    inputMode="email"
+                    enterKeyHint="go"
+                    data-invalid={hasError}
+                    required
+                    disabled={disabled}
+                    name="email"
+                    type="email"
+                    placeholder={defaultPlaceholder}
+                    className={clsx(
+                        'text-button-mobile lg:text-button w-full ps-8 font-semibold transition-opacity duration-300 placeholder:opacity-50 focus:outline-none disabled:opacity-50 max-lg:h-13.5 max-lg:rounded-full',
+                        variant === 'light' && 'max-lg:bg-beige-dark max-lg:text-claret-violet-dark',
+                        variant === 'dark' && 'max-lg:bg-beige-light/20 max-lg:text-beige-light',
+                        variant === 'footer' && 'max-lg:bg-claret-violet-dark/10 max-lg:text-claret-violet-dark',
+                    )}
+                />
+                <Button type="submit" variant="primary" disabled={disabled} color={variant === 'dark' ? 'light' : 'dark'} className="max-lg:w-full">
+                    {defaultLabel}
+                </Button>
+            </div>
+            <ErrorMessage id="newsletter-error" hasError={hasError} message={error} className={variant === 'light' ? '!text-claret-violet-dark ps-8' : '!text-beige-light ps-8'} />
+        </form>
+    );
+};

package/src/components/Inputs/QuantityInput/QuantityInput.stories.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { QuantityInput } from './QuantityInput';
+
+const meta = {
+    title: 'Components/Inputs/QuantityInput',
+    component: QuantityInput,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+    argTypes: {
+        label: { control: 'text', description: 'The label of the quantity input' },
+        id: { control: 'text', description: 'The id of the quantity input' },
+        value: { control: 'number', description: 'The value of the quantity input' },
+        onChange: { action: 'onChange' },
+        required: { control: 'boolean', description: 'Whether the quantity input is required' },
+        metric: { control: 'text', description: 'The metric of the quantity input' },
+        min: { control: 'number', description: 'The minimum value of the quantity input' },
+        max: { control: 'number', description: 'The maximum value of the quantity input' },
+        hasError: { control: 'boolean', description: 'Whether the quantity input has an error' },
+        error: { control: 'text', description: 'The error message of the quantity input' },
+    },
+} satisfies Meta<typeof QuantityInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Quantity',
+        id: 'quantity',
+        value: 0,
+        onChange: () => {},
+        required: false,
+        hasError: false,
+        error: '',
+        metric: 'kg',
+        disabled: false,
+    },
+    render: (arg) => {
+        const [quantity, setQuantity] = useState(0);
+
+        return <QuantityInput {...arg} value={quantity} onChange={(value) => setQuantity(value)} />;
+    },
+};

package/src/components/Inputs/QuantityInput/QuantityInput.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import { ErrorMessage, FAQButton, Label } from '../../../components';
+import { onNumericInput } from '../../../helpers';
+
+export interface QuantityInputProps {
+    label: string;
+    id: string;
+    value: number;
+    onChange: (value: number) => void;
+    required: boolean;
+    metric: string;
+    min?: number;
+    max?: number;
+    hasError?: boolean;
+    error?: string;
+    disabled?: boolean;
+}
+
+export const QuantityInput = ({ label = '', id, value, onChange, required, metric, min = 0, max = 99, hasError = false, error = '', disabled = false }: QuantityInputProps) => {
+    return (
+        <div className="flex items-center gap-4 max-md:flex-col max-md:items-start md:gap-8">
+            {label.length > 0 && <Label label={label} required={required} id={id} className="mb-0" />}
+            <div className="flex items-center gap-4">
+                <FAQButton variant="minus" onClick={() => onChange(value - 1)} disabled={value === min} />
+                <div className="flex items-center gap-1.5">
+                    <input
+                        disabled={disabled}
+                        required={required}
+                        type="number"
+                        placeholder="0"
+                        min={min}
+                        max={max}
+                        value={value == 0 ? '' : value}
+                        onChange={(e) => onChange(Number(e.target.value))}
+                        onKeyDown={onNumericInput}
+                        className="border-claret-violet-dark rounded-input bg-beige-light text-claret-violet-dark text-md placeholder:text-claret-violet-dark/40 h-8.5 w-12 border px-3 focus:outline-none"
+                    />
+                    <span className="text-md">{metric}</span>
+                </div>
+                <FAQButton variant="plus" onClick={() => onChange(value + 1)} disabled={value === max} />
+            </div>
+            <ErrorMessage id={`${id}-error`} hasError={hasError} message={error} />
+        </div>
+    );
+};

package/src/components/Inputs/Tag/Tag.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Tag } from './Tag';
+
+const meta = {
+    title: 'Components/Inputs/Tag',
+    component: Tag,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+    },
+    argTypes: {
+        label: { control: 'text' },
+        value: { control: 'text' },
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'Tag',
+        value: 'Tag',
+        onRemove: () => {},
+    },
+};

package/src/components/Inputs/Tag/Tag.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+
+import { ClearButton } from '../../../components';
+
+export interface TagProps {
+    label: string;
+    value: string;
+    onRemove: (value: string) => void;
+    className?: string;
+}
+
+export const Tag = ({ label, value, onRemove, className }: TagProps) => {
+    return (
+        <div key={value} className={clsx('bg-claret-violet-dark/10 border-claret-violet-light text-button-mobile md:text-button rounded-input flex cursor-default items-center justify-between gap-2.5 border p-2.5 font-semibold', className)}>
+            {label}
+            <ClearButton onClick={() => onRemove(value)} />
+        </div>
+    );
+};