paris 0.17.9 → 0.18.0

package/src/stories/select/Select.tsx

@@ -1,33 +1,37 @@
 'use client';
 
-import type {
-    CSSProperties, ComponentPropsWithoutRef, ForwardedRef, ReactNode,
-} from 'react';
-import { forwardRef, useId } from 'react';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-    Listbox, ListboxButton, ListboxOptions, ListboxOption, RadioGroup, Radio, Transition,
+    Listbox,
+    ListboxButton,
+    ListboxOption,
+    ListboxOptions,
+    Radio,
+    RadioGroup,
+    Transition,
 } from '@headlessui/react';
 import { clsx } from 'clsx';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
 import { motion } from 'framer-motion';
+import type { ComponentPropsWithoutRef, CSSProperties, ForwardedRef, ReactNode } from 'react';
+import { forwardRef, useId } from 'react';
+import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
+import { Field } from '../field';
+import { Check, Icon } from '../icon';
+import type { InputProps } from '../input';
 import inputStyles from '../input/Input.module.scss';
-import dropdownStyles from '../utility/Dropdown.module.scss';
-import styles from './Select.module.scss';
 import type { TextProps } from '../text';
 import { Text } from '../text';
-import type { InputProps } from '../input';
-import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
 import { pget, theme } from '../theme';
-import { Field } from '../field';
 import { TextWhenString } from '../utility';
-import { Check, Icon } from '../icon';
+import dropdownStyles from '../utility/Dropdown.module.scss';
+import styles from './Select.module.scss';
 
 export type Option<T = Record<string, any>> = {
-    id: string,
-    node: ReactNode,
-    disabled?: boolean,
-    metadata?: T,
+    id: string;
+    node: ReactNode;
+    disabled?: boolean;
+    metadata?: T;
 };
 export type CommonSelectProps<T = Record<string, any>> = {
     /**
@@ -64,7 +68,7 @@ export type CommonSelectProps<T = Record<string, any>> = {
         description?: TextProps<'p'>;
         startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
         endEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
-    }
+    };
 } & Omit<InputProps, 'type' | 'overrides'>;
 
 export type SingleSelectProps<T = Record<string, any>> = {
@@ -97,7 +101,7 @@ export type MultiSelectProps<T = Record<string, any>> = {
      * The visual variant of the Select. For multiselect, only `listbox` is supported.
      * @default listbox
      */
-    kind?: 'listbox',
+    kind?: 'listbox';
     /**
      * Converts the single select into a multiselect.
      */
@@ -112,8 +116,7 @@ export type MultiSelectProps<T = Record<string, any>> = {
     onChange?: (value: Option<T>['id'][] | null) => void | Promise<void>;
 } & CommonSelectProps;
 
-type SelectProps<T = Record<string, any>> = | (SingleSelectProps<T>)
-    | (MultiSelectProps<T>);
+type SelectProps<T = Record<string, any>> = SingleSelectProps<T> | MultiSelectProps<T>;
 
 /**
  * A Select component is used to render a `select` box.
@@ -127,233 +130,258 @@ type SelectProps<T = Record<string, any>> = | (SingleSelectProps<T>)
  * ```
  * @constructor
  */
-export const Select = forwardRef(<T = Record<string, any>>({
-    options,
-    value,
-    onChange,
-    label,
-    status,
-    hideLabel,
-    description,
-    hideDescription,
-    descriptionPosition,
-    placeholder,
-    startEnhancer,
-    endEnhancer,
-    disabled,
-    kind = 'listbox',
-    maxHeight = 320,
-    hasOptionBorder = false,
-    multiple = false,
-    multipleItemsName,
-    segmentedHeight = 'compact',
-    overrides,
-}: SelectProps<T>, ref: ForwardedRef<any>) => {
-    const inputID = useId();
-    const multiItems = multipleItemsName || 'items';
+export const Select = forwardRef(
+    <T = Record<string, any>>(
+        {
+            options,
+            value,
+            onChange,
+            label,
+            status,
+            hideLabel,
+            description,
+            hideDescription,
+            descriptionPosition,
+            placeholder,
+            startEnhancer,
+            endEnhancer,
+            disabled,
+            kind = 'listbox',
+            maxHeight = 320,
+            hasOptionBorder = false,
+            multiple = false,
+            multipleItemsName,
+            segmentedHeight = 'compact',
+            overrides,
+        }: SelectProps<T>,
+        ref: ForwardedRef<any>,
+    ) => {
+        const inputID = useId();
+        const multiItems = multipleItemsName || 'items';
 
-    // TypeScript can't track discriminated union correlation through destructuring and JSX conditionals.
-    // For Listbox: supports both single and multi via overloads, needs explicit union types
-    // For RadioGroup: only supports single-select, needs narrowed types
-    const listboxValue = value as string | string[] | null | undefined;
-    const listboxOnChange = onChange as ((value: string | string[] | null) => void) | undefined;
-    const singleValue = value as string | null | undefined;
-    const singleOnChange = onChange as ((value: string | null) => void) | undefined;
-    const buttonText = () => {
-        if (!value || value.length === 0) {
-            return placeholder || 'Select an option';
-        } if (!multiple) {
-            return options?.find((o) => o.id === value)?.node;
-        } if (value && value.length === 1) {
-            return options?.find((o) => o.id === value[0])?.node;
-        } if (value.length === options.length) {
-            return `All ${multiItems}`;
-        }
-        return `${value.length} ${multiItems}`;
-    };
-    return (
-        <Field
-            htmlFor={inputID}
-            label={label}
-            hideLabel={hideLabel}
-            description={description}
-            hideDescription={hideDescription}
-            descriptionPosition={descriptionPosition}
-            disabled={disabled}
-            overrides={{
-                container: overrides?.container,
-                label: overrides?.label,
-                description: overrides?.description,
-            }}
-        >
-            {kind === 'listbox' && (
-                <Listbox
-                    as="div"
-                    ref={ref}
-                    value={listboxValue}
-                    onChange={listboxOnChange}
-                    multiple={multiple}
-                >
-                    <ListboxButton
-                        id={inputID}
-                        {...overrides?.selectInput}
-                        aria-disabled={disabled}
-                        data-status={disabled ? 'disabled' : (status || 'default')}
-                        className={clsx(
-                            overrides?.selectInput?.className,
-                            inputStyles.inputContainer,
-                            styles.listboxButton,
-                            styles.field,
-                        )}
-                    >
-                        {!!startEnhancer && (
-                            <div
-                                {...overrides?.startEnhancerContainer}
-                                className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}
-                                data-status={disabled ? 'disabled' : (status || 'default')}
-                            >
-                                {!!startEnhancer && (
-                                    <MemoizedEnhancer
-                                        enhancer={startEnhancer}
-                                        size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
-                                    />
-                                )}
-                            </div>
-                        )}
-                        {buttonText()}
-                        {endEnhancer ? (
-                            <div
-                                {...overrides?.endEnhancerContainer}
-                                className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}
-                                data-status={disabled ? 'disabled' : (status || 'default')}
-                            >
-                                {!!endEnhancer && (
-                                    <MemoizedEnhancer
-                                        enhancer={endEnhancer}
-                                        size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
-                                    />
-                                )}
-                            </div>
-                        ) : (
-                            <FontAwesomeIcon className={clsx(inputStyles.enhancer, styles.chevron)} data-status={disabled ? 'disabled' : (status || 'default')} width="10px" icon={faChevronDown} />
-                        )}
-                    </ListboxButton>
-                    <Transition
-                        as="div"
-                        className={dropdownStyles.transitionContainer}
-                        enter={dropdownStyles.transition}
-                        enterFrom={dropdownStyles.enterFrom}
-                        enterTo={dropdownStyles.enterTo}
-                        leave={dropdownStyles.transition}
-                        leaveFrom={dropdownStyles.leaveFrom}
-                        leaveTo={dropdownStyles.leaveTo}
-                    >
-                        <ListboxOptions
+        // TypeScript can't track discriminated union correlation through destructuring and JSX conditionals.
+        // For Listbox: supports both single and multi via overloads, needs explicit union types
+        // For RadioGroup: only supports single-select, needs narrowed types
+        const listboxValue = value as string | string[] | null | undefined;
+        const listboxOnChange = onChange as ((value: string | string[] | null) => void) | undefined;
+        const singleValue = value as string | null | undefined;
+        const singleOnChange = onChange as ((value: string | null) => void) | undefined;
+        const buttonText = () => {
+            if (!value || value.length === 0) {
+                return placeholder || 'Select an option';
+            }
+            if (!multiple) {
+                return options?.find((o) => o.id === value)?.node;
+            }
+            if (value && value.length === 1) {
+                return options?.find((o) => o.id === value[0])?.node;
+            }
+            if (value.length === options.length) {
+                return `All ${multiItems}`;
+            }
+            return `${value.length} ${multiItems}`;
+        };
+        return (
+            <Field
+                htmlFor={inputID}
+                label={label}
+                hideLabel={hideLabel}
+                description={description}
+                hideDescription={hideDescription}
+                descriptionPosition={descriptionPosition}
+                disabled={disabled}
+                overrides={{
+                    container: overrides?.container,
+                    label: overrides?.label,
+                    description: overrides?.description,
+                }}
+            >
+                {kind === 'listbox' && (
+                    <Listbox as="div" ref={ref} value={listboxValue} onChange={listboxOnChange} multiple={multiple}>
+                        <ListboxButton
+                            id={inputID}
+                            {...overrides?.selectInput}
+                            aria-disabled={disabled}
+                            data-status={disabled ? 'disabled' : status || 'default'}
                             className={clsx(
-                                overrides?.optionsContainer,
-                                styles.options,
+                                overrides?.selectInput?.className,
+                                inputStyles.inputContainer,
+                                styles.listboxButton,
+                                styles.field,
                             )}
-                            style={{
-                                '--options-maxHeight': `${maxHeight}px`,
-                            } as CSSProperties}
                         >
-                            {(options || []).map((option) => (
-                                <ListboxOption
-                                    key={option.id}
-                                    value={option.id}
-                                    className={clsx(
-                                        overrides?.option,
-                                        styles.option,
-                                        hasOptionBorder && styles.optionBorder,
+                            {!!startEnhancer && (
+                                <div
+                                    {...overrides?.startEnhancerContainer}
+                                    className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}
+                                    data-status={disabled ? 'disabled' : status || 'default'}
+                                >
+                                    {!!startEnhancer && (
+                                        <MemoizedEnhancer
+                                            enhancer={startEnhancer}
+                                            size={parseInt(
+                                                pget('typography.styles.paragraphSmall.fontSize') ||
+                                                    theme.typography.styles.paragraphSmall.fontSize,
+                                                10,
+                                            )}
+                                        />
                                     )}
-                                    disabled={option.disabled || false}
+                                </div>
+                            )}
+                            {buttonText()}
+                            {endEnhancer ? (
+                                <div
+                                    {...overrides?.endEnhancerContainer}
+                                    className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}
+                                    data-status={disabled ? 'disabled' : status || 'default'}
                                 >
-                                    {typeof option.node === 'string' ? (
-                                        <Text as="span" kind="paragraphSmall">
-                                            {option.node}
-                                        </Text>
-                                    ) : option.node}
-                                    <Icon icon={Check} size={12} className={styles.check} />
-                                </ListboxOption>
-                            ))}
-                        </ListboxOptions>
-                    </Transition>
-                </Listbox>
-            )}
-            {kind === 'radio' && (
-                <RadioGroup ref={ref} as="div" className={styles.radioContainer} value={singleValue} onChange={singleOnChange}>
-                    {options.map((option) => (
-                        <Radio
-                            as="div"
-                            className={clsx(
-                                styles.radioOption,
+                                    {!!endEnhancer && (
+                                        <MemoizedEnhancer
+                                            enhancer={endEnhancer}
+                                            size={parseInt(
+                                                pget('typography.styles.paragraphSmall.fontSize') ||
+                                                    theme.typography.styles.paragraphSmall.fontSize,
+                                                10,
+                                            )}
+                                        />
+                                    )}
+                                </div>
+                            ) : (
+                                <FontAwesomeIcon
+                                    className={clsx(inputStyles.enhancer, styles.chevron)}
+                                    data-status={disabled ? 'disabled' : status || 'default'}
+                                    width="10px"
+                                    icon={faChevronDown}
+                                />
                             )}
-                            key={option.id}
-                            value={option.id}
-                            disabled={option.disabled || false}
-                            data-status={disabled ? 'disabled' : (status || 'default')}
-                        >
-                            <div className={styles.radioCircle} />
-                            <TextWhenString kind="paragraphXSmall">
-                                {option.node}
-                            </TextWhenString>
-                        </Radio>
-                    ))}
-                </RadioGroup>
-            )}
-            {kind === 'card' && (
-                <RadioGroup ref={ref} as="div" className={styles.cardContainer} value={singleValue} onChange={singleOnChange}>
-                    {options.map((option) => (
-                        <Radio
+                        </ListboxButton>
+                        <Transition
                             as="div"
-                            className={clsx(
-                                styles.cardOption,
-                            )}
-                            key={option.id}
-                            value={option.id}
-                            disabled={option.disabled || false}
-                            data-status={disabled ? 'disabled' : (status || 'default')}
+                            className={dropdownStyles.transitionContainer}
+                            enter={dropdownStyles.transition}
+                            enterFrom={dropdownStyles.enterFrom}
+                            enterTo={dropdownStyles.enterTo}
+                            leave={dropdownStyles.transition}
+                            leaveFrom={dropdownStyles.leaveFrom}
+                            leaveTo={dropdownStyles.leaveTo}
                         >
-                            <div className={clsx(styles.cardSurface, typeof option.node === 'string' && styles.text)}>
-                                <TextWhenString kind="paragraphSmall">
+                            <ListboxOptions
+                                className={clsx(overrides?.optionsContainer, styles.options)}
+                                style={
+                                    {
+                                        '--options-maxHeight': `${maxHeight}px`,
+                                    } as CSSProperties
+                                }
+                            >
+                                {(options || []).map((option) => (
+                                    <ListboxOption
+                                        key={option.id}
+                                        value={option.id}
+                                        className={clsx(
+                                            overrides?.option,
+                                            styles.option,
+                                            hasOptionBorder && styles.optionBorder,
+                                        )}
+                                        disabled={option.disabled || false}
+                                    >
+                                        {typeof option.node === 'string' ? (
+                                            <Text as="span" kind="paragraphSmall">
+                                                {option.node}
+                                            </Text>
+                                        ) : (
+                                            option.node
+                                        )}
+                                        <Icon icon={Check} size={12} className={styles.check} />
+                                    </ListboxOption>
+                                ))}
+                            </ListboxOptions>
+                        </Transition>
+                    </Listbox>
+                )}
+                {kind === 'radio' && (
+                    <RadioGroup
+                        ref={ref}
+                        as="div"
+                        className={styles.radioContainer}
+                        value={singleValue}
+                        onChange={singleOnChange}
+                    >
+                        {options.map((option) => (
+                            <Radio
+                                as="div"
+                                className={clsx(styles.radioOption)}
+                                key={option.id}
+                                value={option.id}
+                                disabled={option.disabled || false}
+                                data-status={disabled ? 'disabled' : status || 'default'}
+                            >
+                                <div className={styles.radioCircle} />
+                                <TextWhenString kind="paragraphXSmall">{option.node}</TextWhenString>
+                            </Radio>
+                        ))}
+                    </RadioGroup>
+                )}
+                {kind === 'card' && (
+                    <RadioGroup
+                        ref={ref}
+                        as="div"
+                        className={styles.cardContainer}
+                        value={singleValue}
+                        onChange={singleOnChange}
+                    >
+                        {options.map((option) => (
+                            <Radio
+                                as="div"
+                                className={clsx(styles.cardOption)}
+                                key={option.id}
+                                value={option.id}
+                                disabled={option.disabled || false}
+                                data-status={disabled ? 'disabled' : status || 'default'}
+                            >
+                                <div
+                                    className={clsx(styles.cardSurface, typeof option.node === 'string' && styles.text)}
+                                >
+                                    <TextWhenString kind="paragraphSmall">{option.node}</TextWhenString>
+                                </div>
+                            </Radio>
+                        ))}
+                    </RadioGroup>
+                )}
+                {kind === 'segmented' && (
+                    <RadioGroup
+                        ref={ref}
+                        as="div"
+                        className={styles.segmentedContainer}
+                        value={singleValue || options[0].id}
+                        onChange={singleOnChange}
+                    >
+                        {options.map((option) => (
+                            <Radio
+                                as="div"
+                                className={clsx(styles.segmentedOption, styles[segmentedHeight])}
+                                key={option.id}
+                                value={option.id}
+                                disabled={option.disabled || false}
+                                data-status={disabled ? 'disabled' : status || 'default'}
+                            >
+                                {(option.id === value || (!value && option.id === options[0].id)) && (
+                                    <motion.div
+                                        className={styles.segmentedBackground}
+                                        layoutId={`${inputID}-segmented-selected`}
+                                        transition={{
+                                            ease: [0.42, 0.0, 0.58, 1.0],
+                                            duration: 0.25,
+                                        }}
+                                    />
+                                )}
+                                <TextWhenString kind="paragraphXSmall" weight="medium" className={styles.segmentedText}>
                                     {option.node}
                                 </TextWhenString>
-                            </div>
-                        </Radio>
-                    ))}
-                </RadioGroup>
-            )}
-            {kind === 'segmented' && (
-                <RadioGroup ref={ref} as="div" className={styles.segmentedContainer} value={singleValue || options[0].id} onChange={singleOnChange}>
-                    {options.map((option) => (
-                        <Radio
-                            as="div"
-                            className={clsx(
-                                styles.segmentedOption,
-                                styles[segmentedHeight],
-                            )}
-                            key={option.id}
-                            value={option.id}
-                            disabled={option.disabled || false}
-                            data-status={disabled ? 'disabled' : (status || 'default')}
-                        >
-                            {(option.id === value || (!value && option.id === options[0].id)) && (
-                                <motion.div
-                                    className={styles.segmentedBackground}
-                                    layoutId={`${inputID}-segmented-selected`}
-                                    transition={{
-                                        ease: [0.42, 0.0, 0.58, 1.0],
-                                        duration: 0.25,
-                                    }}
-                                />
-                            )}
-                            <TextWhenString kind="paragraphXSmall" weight="medium" className={styles.segmentedText}>
-                                {option.node}
-                            </TextWhenString>
-                        </Radio>
-                    ))}
-                </RadioGroup>
-            )}
-        </Field>
-    );
-});
+                            </Radio>
+                        ))}
+                    </RadioGroup>
+                )}
+            </Field>
+        );
+    },
+);

package/src/stories/styledlink/StyledLink.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { StyledLink } from './StyledLink';
 
 const meta: Meta<typeof StyledLink> = {

package/src/stories/styledlink/StyledLink.tsx

@@ -1,8 +1,6 @@
-import type {
-    ComponentPropsWithoutRef, ElementType, FC, ReactNode,
-} from 'react';
-import { createElement } from 'react';
 import { clsx } from 'clsx';
+import type { ComponentPropsWithoutRef, ElementType, FC, ReactNode } from 'react';
+import { createElement } from 'react';
 import styles from './StyledLink.module.scss';
 
 export type StyledLinkProps<T extends ElementType = 'a'> = {
@@ -24,16 +22,12 @@ export type StyledLinkProps<T extends ElementType = 'a'> = {
  * ```
  * @constructor
  */
-export const StyledLink: FC<StyledLinkProps<ElementType>> = ({
-    as = 'a',
-    children,
-    className,
-    ...props
-}) => createElement(
-    as,
-    {
-        ...props,
-        className: clsx(className, styles.link),
-    },
-    children,
-);
+export const StyledLink: FC<StyledLinkProps<ElementType>> = ({ as = 'a', children, className, ...props }) =>
+    createElement(
+        as,
+        {
+            ...props,
+            className: clsx(className, styles.link),
+        },
+        children,
+    );

package/src/stories/table/Table.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import type { TableProps } from './Table';
 import { Table } from './Table';