paris 0.17.9 → 0.18.0

package/src/stories/checkbox/Checkbox.tsx

@@ -1,11 +1,11 @@
-import type { FC, ReactNode } from 'react';
-import { useId } from 'react';
+import { Switch } from '@headlessui/react';
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import { clsx } from 'clsx';
-import { Switch } from '@headlessui/react';
-import styles from './Checkbox.module.scss';
-import { TextWhenString, VisuallyHidden } from '../utility';
+import type { FC, ReactNode } from 'react';
+import { useId } from 'react';
 import { Check, Icon } from '../icon';
+import { TextWhenString, VisuallyHidden } from '../utility';
+import styles from './Checkbox.module.scss';
 
 export type CheckboxProps = {
     /** The visual style of the Checkbox. `default` is a standard checkbox with a label next to it, `surface` is a clickable card that displays a check when selected, `panel` is a clickable card with the checkbox aligned right, `switch` is a switch toggle.  */
@@ -24,17 +24,17 @@ export type CheckboxProps = {
 } & Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange' | 'children'>;
 
 /**
-* A Checkbox component.
-*
-* <hr />
-*
-* To use this component, import it as follows:
-*
-* ```js
-* import { Checkbox } from 'paris/checkbox';
-* ```
-* @constructor
-*/
+ * A Checkbox component.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { Checkbox } from 'paris/checkbox';
+ * ```
+ * @constructor
+ */
 export const Checkbox: FC<CheckboxProps> = ({
     kind = 'default',
     checked,
@@ -62,14 +62,18 @@ export const Checkbox: FC<CheckboxProps> = ({
                     aria-details={typeof children === 'string' ? children : undefined}
                 >
                     {(kind === 'surface' || kind === 'panel') && (
-                        <TextWhenString kind="paragraphXSmall">
-                            {children}
-                        </TextWhenString>
+                        <TextWhenString kind="paragraphXSmall">{children}</TextWhenString>
                     )}
                     {kind === 'panel' && <div className={styles.box} />}
                     <RadixCheckbox.Indicator className={styles.indicator}>
                         {(kind === 'default' || kind === 'panel') && (
-                            <svg width={14} height={14} viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <svg
+                                width={14}
+                                height={14}
+                                viewBox="0 0 14 14"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                            >
                                 <path
                                     className={styles.checkSvg}
                                     data-disabled={disabled}
@@ -78,43 +82,27 @@ export const Checkbox: FC<CheckboxProps> = ({
                             </svg>
                         )}
                         {kind === 'surface' && (
-                            <Icon
-                                icon={Check}
-                                size={12.8}
-                                data-disabled={disabled}
-                                className={styles.checkIcon}
-                            />
+                            <Icon icon={Check} size={12.8} data-disabled={disabled} className={styles.checkIcon} />
                         )}
                     </RadixCheckbox.Indicator>
                 </RadixCheckbox.Root>
             )}
             {kind === 'switch' && (
-                <>
-                    <Switch
-                        checked={checked}
-                        onChange={onChange}
-                        className={styles.switchContainer}
-                        data-disabled={disabled}
-                        id={inputID}
-                        aria-details={typeof children === 'string' ? children : undefined}
-                    >
-                        <span
-                            aria-hidden="true"
-                            className={clsx(styles.knob, checked && styles.knobChecked)}
-                        />
-                    </Switch>
-                </>
+                <Switch
+                    checked={checked}
+                    onChange={onChange}
+                    className={styles.switchContainer}
+                    data-disabled={disabled}
+                    id={inputID}
+                    aria-details={typeof children === 'string' ? children : undefined}
+                >
+                    <span aria-hidden="true" className={clsx(styles.knob, checked && styles.knobChecked)} />
+                </Switch>
             )}
             {(kind === 'default' || kind === 'switch') && !hideLabel && (
-                <TextWhenString kind="paragraphXSmall">
-                    {children}
-                </TextWhenString>
-            )}
-            {hideLabel && (
-                <VisuallyHidden>
-                    {children}
-                </VisuallyHidden>
+                <TextWhenString kind="paragraphXSmall">{children}</TextWhenString>
             )}
+            {hideLabel && <VisuallyHidden>{children}</VisuallyHidden>}
         </label>
     );
 };

package/src/stories/combobox/Combobox.stories.ts

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { createElement, useState } from 'react';
+import { Text } from '../text';
 import type { ComboboxProps, Option } from './Combobox';
 import { Combobox } from './Combobox';
-import { Text } from '../text';
 
 const meta: Meta<typeof Combobox> = {
     title: 'Inputs/Combobox',
@@ -97,9 +97,7 @@ const ComboboxArgs2: ComboboxProps<{ name: string }> = {
 export const Default: Story = {
     args: ComboboxArgs,
     render: function Render(args) {
-        const [selected, setSelected] = useState<Option<{ name: string }> | null>(
-            null,
-        );
+        const [selected, setSelected] = useState<Option<{ name: string }> | null>(null);
         const [inputValue, setInputValue] = useState<string>('');
         return createElement(
             'div',
@@ -109,18 +107,18 @@ export const Default: Story = {
             createElement(Combobox<{ name: string }>, {
                 ...args,
                 value:
-          selected?.id === null
-              ? {
-                  id: null,
-                  node: inputValue,
-                  metadata: {
-                      name: inputValue,
-                  },
-              }
-              : (selected as Option<{ name: string }> | null),
-                options: (args.options as Option<{ name: string }>[]).filter((o) => ((o.metadata?.name as string) || '')
-                    .toLowerCase()
-                    .includes(inputValue.toLowerCase())),
+                    selected?.id === null
+                        ? {
+                              id: null,
+                              node: inputValue,
+                              metadata: {
+                                  name: inputValue,
+                              },
+                          }
+                        : (selected as Option<{ name: string }> | null),
+                options: (args.options as Option<{ name: string }>[]).filter((o) =>
+                    ((o.metadata?.name as string) || '').toLowerCase().includes(inputValue.toLowerCase()),
+                ),
                 onChange: (e) => setSelected(e),
                 onInputChange: (e) => setInputValue(e),
             }),
@@ -145,18 +143,18 @@ export const AllowCustomValue: Story = {
             createElement(Combobox<{ name: string }>, {
                 ...args,
                 value:
-          selected?.id === null
-              ? {
-                  id: null,
-                  node: inputValue,
-                  metadata: {
-                      name: inputValue,
-                  },
-              }
-              : (selected as Option<{ name: string }> | null),
-                options: (args.options as Option<{ name: string }>[]).filter((o) => ((o.metadata?.name as string) || '')
-                    .toLowerCase()
-                    .includes(inputValue.toLowerCase())),
+                    selected?.id === null
+                        ? {
+                              id: null,
+                              node: inputValue,
+                              metadata: {
+                                  name: inputValue,
+                              },
+                          }
+                        : (selected as Option<{ name: string }> | null),
+                options: (args.options as Option<{ name: string }>[]).filter((o) =>
+                    ((o.metadata?.name as string) || '').toLowerCase().includes(inputValue.toLowerCase()),
+                ),
                 onChange: (e) => setSelected(e),
                 onInputChange: (e) => setInputValue(e),
             }),
@@ -181,18 +179,18 @@ export const CustomValueWithDivider: Story = {
             createElement(Combobox<{ name: string }>, {
                 ...args,
                 value:
-          selected?.id === null
-              ? {
-                  id: null,
-                  node: inputValue,
-                  metadata: {
-                      name: inputValue,
-                  },
-              }
-              : (selected as Option<{ name: string }> | null),
-                options: (args.options as Option<{ name: string }>[]).filter((o) => ((o.metadata?.name as string) || '')
-                    .toLowerCase()
-                    .includes(inputValue.toLowerCase())),
+                    selected?.id === null
+                        ? {
+                              id: null,
+                              node: inputValue,
+                              metadata: {
+                                  name: inputValue,
+                              },
+                          }
+                        : (selected as Option<{ name: string }> | null),
+                options: (args.options as Option<{ name: string }>[]).filter((o) =>
+                    ((o.metadata?.name as string) || '').toLowerCase().includes(inputValue.toLowerCase()),
+                ),
                 onChange: (e) => setSelected(e),
                 onInputChange: (e) => setInputValue(e),
                 overrides: {
@@ -208,9 +206,7 @@ export const CustomValueWithDivider: Story = {
 export const HideOptionsInitially: Story = {
     args: ComboboxArgs,
     render: function Render(args) {
-        const [selected, setSelected] = useState<Option<{ name: string }> | null>(
-            null,
-        );
+        const [selected, setSelected] = useState<Option<{ name: string }> | null>(null);
         const [inputValue, setInputValue] = useState<string>('');
         return createElement(
             'div',
@@ -220,18 +216,18 @@ export const HideOptionsInitially: Story = {
             createElement(Combobox<{ name: string }>, {
                 ...args,
                 value:
-          selected?.id === null
-              ? {
-                  id: null,
-                  node: inputValue,
-                  metadata: {
-                      name: inputValue,
-                  },
-              }
-              : (selected as Option<{ name: string }> | null),
-                options: (args.options as Option<{ name: string }>[]).filter((o) => ((o.metadata?.name as string) || '')
-                    .toLowerCase()
-                    .includes(inputValue.toLowerCase())),
+                    selected?.id === null
+                        ? {
+                              id: null,
+                              node: inputValue,
+                              metadata: {
+                                  name: inputValue,
+                              },
+                          }
+                        : (selected as Option<{ name: string }> | null),
+                options: (args.options as Option<{ name: string }>[]).filter((o) =>
+                    ((o.metadata?.name as string) || '').toLowerCase().includes(inputValue.toLowerCase()),
+                ),
                 onChange: (e) => setSelected(e),
                 onInputChange: (e) => setInputValue(e),
                 hideOptionsInitially: true,
@@ -243,9 +239,7 @@ export const HideOptionsInitially: Story = {
 export const HideClearButton: Story = {
     args: ComboboxArgs2,
     render: function Render(args) {
-        const [selected, setSelected] = useState<Option<{ name: string }> | null>(
-            null,
-        );
+        const [selected, setSelected] = useState<Option<{ name: string }> | null>(null);
         const [inputValue, setInputValue] = useState<string>('');
         return createElement(
             'div',
@@ -255,18 +249,18 @@ export const HideClearButton: Story = {
             createElement(Combobox<{ name: string }>, {
                 ...args,
                 value:
-          selected?.id === null
-              ? {
-                  id: null,
-                  node: inputValue,
-                  metadata: {
-                      name: inputValue,
-                  },
-              }
-              : (selected as Option<{ name: string }> | null),
-                options: (args.options as Option<{ name: string }>[]).filter((o) => ((o.metadata?.name as string) || '')
-                    .toLowerCase()
-                    .includes(inputValue.toLowerCase())),
+                    selected?.id === null
+                        ? {
+                              id: null,
+                              node: inputValue,
+                              metadata: {
+                                  name: inputValue,
+                              },
+                          }
+                        : (selected as Option<{ name: string }> | null),
+                options: (args.options as Option<{ name: string }>[]).filter((o) =>
+                    ((o.metadata?.name as string) || '').toLowerCase().includes(inputValue.toLowerCase()),
+                ),
                 onChange: (e) => setSelected(e),
                 onInputChange: (e) => setInputValue(e),
                 hideClearButton: true,

package/src/stories/combobox/Combobox.tsx

@@ -1,39 +1,36 @@
 'use client';
 
-import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
-import {
-    useMemo, useId, useState,
-} from 'react';
-import {
-    Combobox as HCombobox, ComboboxInput, ComboboxOptions, ComboboxOption, Transition,
-} from '@headlessui/react';
-import { clsx } from 'clsx';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faClose } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { ComboboxInput, ComboboxOption, ComboboxOptions, Combobox as HCombobox, Transition } from '@headlessui/react';
+import { clsx } from 'clsx';
+import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
+import { useId, useMemo, useState } from 'react';
+import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
+import type { ButtonProps } from '../button';
+import { Button } from '../button';
+import type { FieldProps } from '../field';
+import { Field } from '../field';
+import type { InputProps } from '../input';
 import inputStyles from '../input/Input.module.scss';
-import dropdownStyles from '../utility/Dropdown.module.scss';
 import styles from '../select/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 type { FieldProps } from '../field';
-import { Field } from '../field';
-import type { ButtonProps } from '../button';
-import { Button } from '../button';
 import { TextWhenString } from '../utility';
-import { Check, Icon } from '../icon';
+import dropdownStyles from '../utility/Dropdown.module.scss';
 
-export type Option<T extends Record<string, any> = Record<string, any>> = {
-    id: string,
-    node: ReactNode,
-    metadata?: T,
-} | {
-    id: null,
-    node: string,
-    metadata?: T,
-};
+export type Option<T extends Record<string, any> = Record<string, any>> =
+    | {
+          id: string;
+          node: ReactNode;
+          metadata?: T;
+      }
+    | {
+          id: null;
+          node: string;
+          metadata?: T;
+      };
 
 export type ComboboxProps<T extends Record<string, any>> = {
     /**
@@ -119,7 +116,7 @@ export type ComboboxProps<T extends Record<string, any>> = {
         startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
         endEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
         clearButton?: ButtonProps;
-    }
+    };
 } & Omit<InputProps, 'type' | 'overrides'>;
 
 /**
@@ -167,12 +164,10 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
     const [selectedID, setSelectedID] = useState<string | null>(value?.id || null);
     const [query, setQuery] = useState('');
 
-    const optionsWithCustomValue = useMemo(() => ([
-        ...((allowCustomValue && customValueToOption) ? [
-            customValueToOption(query),
-        ] : []),
-        ...options,
-    ]), [allowCustomValue, customValueToOption, options, query]);
+    const optionsWithCustomValue = useMemo(
+        () => [...(allowCustomValue && customValueToOption ? [customValueToOption(query)] : []), ...options],
+        [allowCustomValue, customValueToOption, options, query],
+    );
 
     return (
         <Field
@@ -210,29 +205,32 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                 }}
             >
                 <div
-                    data-status={disabled ? 'disabled' : (status || 'default')}
+                    data-status={disabled ? 'disabled' : status || 'default'}
                     {...overrides?.inputContainer}
-                    className={clsx(
-                        overrides?.inputContainer?.className,
-                        inputStyles.inputContainer,
-                    )}
+                    className={clsx(overrides?.inputContainer?.className, inputStyles.inputContainer)}
                 >
                     {!!startEnhancer && (
                         <div
                             {...overrides?.startEnhancerContainer}
                             className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}
-                            data-status={disabled ? 'disabled' : (status || 'default')}
+                            data-status={disabled ? 'disabled' : status || 'default'}
                         >
                             {!!startEnhancer && (
                                 <MemoizedEnhancer
                                     enhancer={startEnhancer}
-                                    size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                                    size={parseInt(
+                                        pget('typography.styles.paragraphSmall.fontSize') ||
+                                            theme.typography.styles.paragraphSmall.fontSize,
+                                        10,
+                                    )}
                                 />
                             )}
                         </div>
                     )}
                     <div className={styles.content}>
-                        {(value?.node && typeof value.node !== 'string') ? value.node : (
+                        {value?.node && typeof value.node !== 'string' ? (
+                            value.node
+                        ) : (
                             <ComboboxInput
                                 id={inputID}
                                 {...overrides?.input}
@@ -244,24 +242,22 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                                     if (onInputChange) onInputChange(e.target.value);
                                     if (overrides?.input?.onChange) overrides.input.onChange(e);
                                     if (allowCustomValue && e.target.value) {
-                                        onChange?.(customValueToOption?.(e.target.value) || {
-                                            id: null,
-                                            node: e.target.value,
-                                        });
+                                        onChange?.(
+                                            customValueToOption?.(e.target.value) || {
+                                                id: null,
+                                                node: e.target.value,
+                                            },
+                                        );
                                     }
                                 }}
                                 aria-disabled={disabled}
-                                data-status={disabled ? 'disabled' : (status || 'default')}
-                                className={clsx(
-                                    overrides?.input?.className,
-                                    inputStyles.input,
-                                    styles.field,
-                                )}
+                                data-status={disabled ? 'disabled' : status || 'default'}
+                                className={clsx(overrides?.input?.className, inputStyles.input, styles.field)}
                             />
                         )}
                     </div>
 
-                    {(!!value && (!hideClearButton || typeof value.node !== 'string')) && (
+                    {!!value && (!hideClearButton || typeof value.node !== 'string') && (
                         <Button
                             size="xs"
                             shape="circle"
@@ -281,12 +277,16 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                         <div
                             {...overrides?.endEnhancerContainer}
                             className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}
-                            data-status={disabled ? 'disabled' : (status || 'default')}
+                            data-status={disabled ? 'disabled' : status || 'default'}
                         >
                             {!!endEnhancer && (
                                 <MemoizedEnhancer
                                     enhancer={endEnhancer}
-                                    size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                                    size={parseInt(
+                                        pget('typography.styles.paragraphSmall.fontSize') ||
+                                            theme.typography.styles.paragraphSmall.fontSize,
+                                        10,
+                                    )}
                                 />
                             )}
                         </div>
@@ -305,24 +305,20 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                     <ComboboxOptions
                         as="ul"
                         {...overrides?.optionsContainer}
-                        className={clsx(
-                            overrides?.optionsContainer?.className,
-                            styles.options,
-                        )}
-                        style={{
-                            '--options-maxHeight': `${maxHeight}px`,
-                            ...overrides?.optionsContainer?.style,
-                        } as CSSProperties}
+                        className={clsx(overrides?.optionsContainer?.className, styles.options)}
+                        style={
+                            {
+                                '--options-maxHeight': `${maxHeight}px`,
+                                ...overrides?.optionsContainer?.style,
+                            } as CSSProperties
+                        }
                     >
-                        {(allowCustomValue && showCustomValueOption && !customValueToOption && query.length > 0) && (
+                        {allowCustomValue && showCustomValueOption && !customValueToOption && query.length > 0 && (
                             <ComboboxOption
                                 as="li"
                                 value={query}
                                 data-selected={false}
-                                className={clsx(
-                                    overrides?.customValueOption?.className,
-                                    styles.option,
-                                )}
+                                className={clsx(overrides?.customValueOption?.className, styles.option)}
                                 {...overrides?.customValueOption}
                             >
                                 <Text as="span" kind="paragraphSmall">
@@ -330,28 +326,23 @@ export function Combobox<T extends Record<string, any> = Record<string, any>>({
                                 </Text>
                             </ComboboxOption>
                         )}
-                        {
-                            (
-                                optionsWithCustomValue || []
-                            )
-                                .map((option) => (
-                                    <ComboboxOption
-                                        as="li"
-                                        key={option.id}
-                                        value={option.id}
-                                        {...overrides?.option}
-                                        className={clsx(
-                                            overrides?.option?.className,
-                                            styles.option,
-                                            hasOptionBorder && styles.optionBorder,
-                                        )}
-                                    >
-                                        <TextWhenString as="span" kind="paragraphSmall">
-                                            {option.node}
-                                        </TextWhenString>
-                                    </ComboboxOption>
-                                ))
-                        }
+                        {(optionsWithCustomValue || []).map((option) => (
+                            <ComboboxOption
+                                as="li"
+                                key={option.id}
+                                value={option.id}
+                                {...overrides?.option}
+                                className={clsx(
+                                    overrides?.option?.className,
+                                    styles.option,
+                                    hasOptionBorder && styles.optionBorder,
+                                )}
+                            >
+                                <TextWhenString as="span" kind="paragraphSmall">
+                                    {option.node}
+                                </TextWhenString>
+                            </ComboboxOption>
+                        ))}
                     </ComboboxOptions>
                 </Transition>
             </HCombobox>

package/src/stories/dialog/Dialog.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { useState } from 'react';
-import { Dialog } from './Dialog';
 import { Button } from '../button';
 import { Text } from '../text';
+import { Dialog } from './Dialog';
 
 const meta: Meta<typeof Dialog> = {
     title: 'Surfaces/Dialog',