paris 0.23.1 → 0.24.0

package/src/stories/combobox/Combobox.tsx

@@ -1,396 +0,0 @@
-'use client';
-
-import { faClose } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import {
-    ComboboxButton,
-    ComboboxInput,
-    ComboboxOption,
-    ComboboxOptions,
-    Combobox as HCombobox,
-} from '@headlessui/react';
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, CSSProperties, MouseEvent, ReactNode } from 'react';
-import { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { OpenChangeEffect } from '../../helpers/OpenChangeEffect';
-import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
-import { useControllableState } from '../../helpers/useControllableState';
-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 styles from '../select/Select.module.scss';
-import type { TextProps } from '../text';
-import { Text } from '../text';
-import { pget, theme } from '../theme';
-import { TextWhenString } from '../utility';
-
-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>> = {
-    /**
-     * The  {@link Option}s to render in the select box.
-     *
-     * Each option should have an id (`string`) and node ({@link ReactNode}) property at minimum. You can also pass in any other metadata through the `metadata` attribute.
-     *
-     * For type safety, you can pass in a type parameter to `ComboboxProps`. This will be used as the type for the `metadata` property of each option.
-     */
-    options: Option<T>[];
-    /**
-     * The option to render as selected in the select box.
-     *
-     * If `null`, no option will be selected.
-     */
-    value?: Option<T> | null;
-    /**
-     * The initial value for uncontrolled mode. If `value` is provided, this is ignored.
-     */
-    defaultValue?: Option<T> | null;
-    /**
-     * The interaction handler for the Combobox. This will be called when the user selects an option from the dropdown.
-     *
-     * @param option - The selected option, or `null` if the user has cleared the selection.
-     */
-    onChange?: (option: Option<T> | null) => void | Promise<void>;
-    /**
-     * The interaction handler for when the user types in the input. The input is controlled internally, but you can use this to update the input value in your own state.
-     * @param value - The current value of the input.
-     */
-    onInputChange?: (value: string) => void | Promise<void>;
-    /**
-     * Whether to allow the user to create a custom value.
-     *
-     * If `true`, the user will be able to type in a custom value. This will be passed to the `onChange` handler as an option with an ID of `null` and a `node` value containing the user's input as a string.
-     * @default false
-     */
-    allowCustomValue?: boolean;
-    /**
-     * Whether to show the custom value option in the dropdown. This is irrelevant if `allowCustomValue` is `false`.
-     * @default true
-     */
-    showCustomValueOption?: boolean;
-    /**
-     * The text to use for the custom creation option. This should include a `%v` placeholder, which will be replaced with the user's input.
-     *
-     * For example, if the user types in `foo` and this is set to "New %v", the custom value option will be rendered as `New "foo"`.
-     * @default Create "%v"...
-     */
-    customValueString?: string;
-    /**
-     * A function that will be called to create an {@link Option} based on the user's custom typed query value. This is useful for adding custom styling by  allowing you to pass a custom `Option.node` based on the value. This overrides the `customValueString` prop.
-     * @param value
-     */
-    customValueToOption?: (value: string) => Option<T>;
-    /**
-     * Called when the combobox dropdown opens or closes.
-     */
-    onOpenChange?: (open: boolean) => void;
-    /**
-     * Whether to hide the clear button when a value is selected. This will never be hidden if the selected option's node is not a strong, because there is no other way to clear the value as of now.
-     */
-    hideClearButton?: boolean;
-    /**
-     * The size of the options dropdown, in pixels.
-     */
-    maxHeight?: number;
-    /**
-     * Adds a bottom border to the dropdown options.
-     * @default false
-     */
-    hasOptionBorder?: boolean;
-    /**
-     * Whether the dropdown should open immediately when focused, vs only after starting to type.
-     * @default false
-     */
-    hideOptionsInitially?: boolean;
-    /**
-     * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
-     */
-    overrides?: {
-        field?: FieldProps;
-        container?: ComponentPropsWithoutRef<'div'>;
-        inputContainer?: ComponentPropsWithoutRef<'div'>;
-        input?: ComponentPropsWithoutRef<'input'>;
-        optionsContainer?: ComponentPropsWithoutRef<'ul'>;
-        option?: ComponentPropsWithoutRef<'li'>;
-        customValueOption?: ComponentPropsWithoutRef<'li'>;
-        label?: TextProps<'label'>;
-        description?: TextProps<'p'>;
-        startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
-        endEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
-        clearButton?: ButtonProps;
-    };
-} & Omit<InputProps, 'type' | 'overrides'>;
-
-/**
- * A Combobox component is used to render a searchable select.
- *
- * When the selected option node is a string, the combobox will act like an input even when an option is selected, allowing users to edit the selected option directly in order to pick a new one. To circumvent this and make selected options non-editable, pass nodes that are `Text` components instead.
- *
- * When `allowCustomValue` is `true`, a custom value option will be added to the dropdown. This option's text can be customized by passing a value for `customValueString`, where `%v` within the string is the user's input. You can provide an entirely custom node through `renderCustomValueOption`. By default, `onChange` will be called for every input change when custom values are allowed.
- *
- * <hr />
- *
- * To use this component, import it as follows:
- *
- * ```js
- * import { Combobox } from 'paris/combobox';
- * ```
- * @constructor
- */
-export function Combobox<T extends Record<string, any> = Record<string, any>>({
-    options,
-    value,
-    defaultValue,
-    onChange,
-    label,
-    status,
-    hideLabel,
-    description,
-    hideDescription,
-    descriptionPosition,
-    placeholder,
-    startEnhancer,
-    endEnhancer,
-    disabled,
-    onInputChange,
-    allowCustomValue,
-    showCustomValueOption = true,
-    customValueString = 'Create "%v"',
-    customValueToOption,
-    onOpenChange,
-    hideClearButton = false,
-    maxHeight = 320,
-    hasOptionBorder = false,
-    hideOptionsInitially = false,
-    overrides,
-}: ComboboxProps<T>) {
-    const inputID = useId();
-    const [resolvedValue, setResolvedValue] = useControllableState<Option<T> | null>({
-        value,
-        defaultValue,
-        onChange,
-    });
-    const [query, setQuery] = useState('');
-    const containerElRef = useRef<HTMLElement | null>(null);
-    const inputElRef = useRef<HTMLElement | null>(null);
-    const [anchorOffset, setAnchorOffset] = useState(0);
-
-    const containerRef = useCallback((node: HTMLButtonElement | null) => {
-        containerElRef.current = node;
-    }, []);
-
-    const inputRef = useCallback((node: HTMLInputElement | null) => {
-        inputElRef.current = node;
-    }, []);
-
-    useLayoutEffect(() => {
-        if (containerElRef.current && inputElRef.current) {
-            const containerLeft = containerElRef.current.getBoundingClientRect().left;
-            const inputLeft = inputElRef.current.getBoundingClientRect().left;
-            setAnchorOffset(containerLeft - inputLeft);
-        }
-    }, [startEnhancer, resolvedValue]);
-
-    const optionsWithCustomValue = useMemo(
-        () => [...(allowCustomValue && customValueToOption ? [customValueToOption(query)] : []), ...options],
-        [allowCustomValue, customValueToOption, options, query],
-    );
-
-    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,
-            }}
-            {...(overrides?.field ?? {})}
-        >
-            <HCombobox
-                as="div"
-                immediate={!hideOptionsInitially}
-                value={resolvedValue?.id ?? null}
-                onChange={(id) => {
-                    const sel = optionsWithCustomValue.find((o) => o.id === id);
-                    if (sel) {
-                        setResolvedValue(sel);
-                    } else if (id) {
-                        setResolvedValue({ id: null, node: id } as Option<T>);
-                    }
-                }}
-            >
-                {({ open }) => (
-                    <>
-                        <OpenChangeEffect open={open} onOpenChange={onOpenChange} />
-                        <ComboboxButton
-                            as="div"
-                            ref={containerRef}
-                            tabIndex={-1}
-                            data-status={disabled ? 'disabled' : status || 'default'}
-                            {...overrides?.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'}
-                                >
-                                    {!!startEnhancer && (
-                                        <MemoizedEnhancer
-                                            enhancer={startEnhancer}
-                                            size={parseInt(
-                                                pget('typography.styles.paragraphSmall.fontSize') ||
-                                                    theme.typography.styles.paragraphSmall.fontSize,
-                                                10,
-                                            )}
-                                        />
-                                    )}
-                                </div>
-                            )}
-                            <div className={styles.content}>
-                                {resolvedValue?.node && typeof resolvedValue.node !== 'string' ? (
-                                    resolvedValue.node
-                                ) : (
-                                    <ComboboxInput
-                                        ref={inputRef}
-                                        id={inputID}
-                                        {...overrides?.input}
-                                        placeholder={placeholder}
-                                        // value={query}
-                                        displayValue={() => resolvedValue?.node as string}
-                                        onClick={(e: MouseEvent<HTMLInputElement>) => {
-                                            e.stopPropagation();
-                                            overrides?.input?.onClick?.(e);
-                                        }}
-                                        onKeyDown={(e) => {
-                                            e.stopPropagation();
-                                            overrides?.input?.onKeyDown?.(e);
-                                        }}
-                                        onChange={(e) => {
-                                            setQuery(e.target.value);
-                                            if (onInputChange) onInputChange(e.target.value);
-                                            if (overrides?.input?.onChange) overrides.input.onChange(e);
-                                            if (allowCustomValue && e.target.value) {
-                                                setResolvedValue(
-                                                    customValueToOption?.(e.target.value) ||
-                                                        ({
-                                                            id: null,
-                                                            node: e.target.value,
-                                                        } as Option<T>),
-                                                );
-                                            }
-                                        }}
-                                        aria-disabled={disabled}
-                                        data-status={disabled ? 'disabled' : status || 'default'}
-                                        className={clsx(overrides?.input?.className, inputStyles.input, styles.field)}
-                                    />
-                                )}
-                            </div>
-
-                            {!!resolvedValue && (!hideClearButton || typeof resolvedValue.node !== 'string') && (
-                                <Button
-                                    size="xs"
-                                    shape="circle"
-                                    startEnhancer={<FontAwesomeIcon icon={faClose} fontSize="10px" />}
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        setResolvedValue(null);
-                                    }}
-                                    {...overrides?.clearButton}
-                                >
-                                    Clear
-                                </Button>
-                            )}
-                            {!!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>
-                            )}
-                        </ComboboxButton>
-                        <ComboboxOptions
-                            as="ul"
-                            anchor={{
-                                to: 'bottom start',
-                                gap: 9,
-                                offset: anchorOffset,
-                            }}
-                            transition
-                            {...overrides?.optionsContainer}
-                            className={clsx(overrides?.optionsContainer?.className, styles.options)}
-                            style={
-                                {
-                                    '--options-maxHeight': `${maxHeight}px`,
-                                    ...overrides?.optionsContainer?.style,
-                                } as CSSProperties
-                            }
-                        >
-                            {allowCustomValue && showCustomValueOption && !customValueToOption && query.length > 0 && (
-                                <ComboboxOption
-                                    as="li"
-                                    value={query}
-                                    data-selected={false}
-                                    className={clsx(overrides?.customValueOption?.className, styles.option)}
-                                    {...overrides?.customValueOption}
-                                >
-                                    <Text as="span" kind="paragraphSmall">
-                                        {customValueString.replace('%v', query)}
-                                    </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>
-                            ))}
-                        </ComboboxOptions>
-                    </>
-                )}
-            </HCombobox>
-        </Field>
-    );
-}

package/src/stories/dialog/Dialog.module.scss

@@ -1,211 +0,0 @@
-$panelMinMargin: 16px;
-$panelRiseDistance: 4px;
-$panelScaleAnimation: 0.96;
-$panelAnimationDelay: var(--pte-animations-duration-fast);
-
-.root {
-    position: relative;
-    z-index: var(--pte-new-layers-overlay);
-    user-select: var(--pte-utils-defaultUserSelect);
-}
-
-.overlay {
-    position: fixed;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    transition: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInOut);
-
-    &.overlayBlur {
-        backdrop-filter: blur(2px);
-        background-color: var(--pte-new-colors-overlayPageBackground);
-        will-change: backdrop-filter, opacity;
-    }
-
-    &.overlayGrey {
-        background-color: var(--pte-new-colors-overlayPageBackground);
-        will-change: opacity;
-    }
-}
-
-.open {
-    transition-delay: 0ms;
-    opacity: 1;
-}
-
-.overlayBlurContainer {
-    .enterFrom {
-        backdrop-filter: blur(0);
-        opacity: 0;
-    }
-    .enterTo {
-        backdrop-filter: blur(2px);
-        opacity: 1;
-    }
-    .leave {
-        transition-delay: $panelAnimationDelay;
-    }
-    .leaveFrom {
-        backdrop-filter: blur(2px);
-        opacity: 1;
-    }
-    .leaveTo {
-        backdrop-filter: blur(0);
-        opacity: 0;
-    }
-}
-
-.overlayGreyContainer {
-    .enterFrom {
-        opacity: 0;
-    }
-    .enterTo {
-        opacity: 1;
-    }
-    .leave {
-        transition-delay: $panelAnimationDelay;
-    }
-    .leaveFrom {
-        opacity: 1;
-    }
-    .leaveTo {
-        opacity: 0;
-    }
-
-}
-
-.panelContainer {
-    position: fixed;
-    inset: 0;
-    width: 100%;
-    height: 100dvh;
-    padding: $panelMinMargin;
-    overflow-y: auto;
-
-    min-height: 100dvh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    will-change: transform, filter;
-
-    .enter {
-        transition-delay: $panelAnimationDelay;
-    }
-
-    .enterFrom {
-        transform: translateY($panelRiseDistance) scale($panelScaleAnimation);
-        filter: blur(2px);
-    }
-
-    .enterTo {
-        transform: translateY(0) scale(1);
-        filter: blur(0);
-    }
-
-    .leave {
-        transition-delay: 0ms;
-    }
-
-    .leaveFrom {
-        transform: translateY(0) scale(1);
-        filter: blur(0);
-    }
-
-    .leaveTo {
-        transform: translateY(calc($panelRiseDistance / 2)) scale($panelScaleAnimation);
-        filter: blur(2px);
-    }
-}
-
-.panel {
-    position: relative;
-    z-index: var(--pte-new-layers-overlay);
-    width: 100%;
-    margin: auto;
-    padding: 16px;
-
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: flex-start;
-    gap: 16px;
-
-}
-
-.simple {
-    border-radius: var(--pte-borders-radius-rounded);
-    background: var(--pte-new-colors-surfacePrimary);
-    border: var(--pte-new-borders-dropdown-border);
-    outline: none;
-    box-shadow: var(--pte-new-lighting-deepPopup);
-}
-
-.glass {
-    border-radius: var(--pte-borders-radius-roundedXL);
-    background: var(--pte-new-surfaces-dialog-background);
-    border: var(--pte-new-surfaces-dialog-border);
-    backdrop-filter: var(--pte-new-surfaces-dialog-backdropFilter);
-    outline: var(--pte-new-surfaces-dialog-outline);
-    box-shadow: var(--pte-new-lighting-shallowPopup);
-}
-
-.w-compact {
-    max-width: min(360px, 100%);
-}
-
-.w-default {
-    max-width: min(480px, 100%);
-}
-
-.w-large {
-    max-width: min(640px, 100%);
-}
-
-.w-full {
-    max-width: 100%;
-}
-
-.h-content {
-}
-
-.h-full {
-    min-height: 100%;
-}
-
-.header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-}
-
-.closeButton {
-    position: absolute;
-    right: $panelMinMargin;
-    top: $panelMinMargin - 4px;
-}
-
-.enter {
-    transition: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeOut);
-}
-
-.enterFrom {
-    opacity: 0;
-}
-
-.enterTo {
-    opacity: 1;
-}
-
-.leave {
-    transition: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeIn);
-}
-
-.leaveFrom {
-    opacity: 1;
-}
-
-.leaveTo {
-    opacity: 0;
-}
-

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

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { useState } from 'react';
-import { Button } from '../button';
-import { Text } from '../text';
-import { Dialog } from './Dialog';
-
-const meta: Meta<typeof Dialog> = {
-    title: 'Surfaces/Dialog',
-    component: Dialog,
-    tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Dialog>;
-
-export const Default: Story = {
-    args: {
-        title: 'Confirmation',
-        appearance: 'simple',
-        width: 'default',
-        height: 'content',
-        draggable: false,
-        isOpen: false,
-        children: <Text>Are you sure? That's a lot of money.</Text>,
-    },
-    render: function Render(args) {
-        const [isOpen, setIsOpen] = useState(false);
-        // const [primary, bg] = [
-        //     pvar('colors.contentSecondary'),
-        //     pvar('colors.backgroundPrimary'),
-        // ];
-        return (
-            <>
-                <div
-                    style={{}}
-                    // Background texture that can be enabled to emphasize glassmorphism
-                    // Make sure to also uncomment the pvar array above
-                    // style={{
-                    //     width: '80vw',
-                    //     height: '80dvh',
-                    //     backgroundColor: bg,
-                    //     opacity: '0.8',
-                    //     // eslint-disable-next-line css/no-shorthand-property-overrides
-                    //     background: `repeating-linear-gradient( -45deg, ${primary}, ${primary} 4px, transparent 4px, transparent 25px )`,
-                    // }}
-                >
-                    <Button onClick={() => setIsOpen(true)}>Pay now</Button>
-                </div>
-                <Dialog
-                    {...args}
-                    isOpen={isOpen}
-                    onClose={() => {
-                        setIsOpen(false);
-                    }}
-                >
-                    {args.children}
-                </Dialog>
-            </>
-        );
-    },
-};
-
-export const Grey: Story = {
-    args: {
-        title: 'Confirmation',
-        appearance: 'simple',
-        width: 'default',
-        height: 'content',
-        overlayStyle: 'grey',
-        draggable: false,
-        isOpen: false,
-        children: <Text>Are you sure? That's a lot of money.</Text>,
-    },
-    render: function Render(args) {
-        const [isOpen, setIsOpen] = useState(false);
-        return (
-            <>
-                <div>
-                    <Button onClick={() => setIsOpen(true)}>Pay now</Button>
-                </div>
-                <Dialog
-                    {...args}
-                    isOpen={isOpen}
-                    onClose={() => {
-                        setIsOpen(false);
-                    }}
-                >
-                    {args.children}
-                </Dialog>
-            </>
-        );
-    },
-};