paris 0.3.0 → 0.4.1

package/src/stories/combobox/Combobox.tsx

@@ -0,0 +1,264 @@
+'use client';
+
+import type { ReactNode, ComponentPropsWithoutRef } from 'react';
+import { Combobox as HCombobox, Transition } from '@headlessui/react';
+import clsx from 'clsx';
+import { useId, useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClose } from '@fortawesome/free-solid-svg-icons';
+import inputStyles from '../input/Input.module.scss';
+import dropdownStyles from '../dropdown/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 { Field } from '../field';
+import { Button } from '../button';
+
+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 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;
+    /**
+     * 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;
+    /**
+     * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
+     */
+    overrides?: {
+        container?: ComponentPropsWithoutRef<'div'>;
+        input?: ComponentPropsWithoutRef<'input'>;
+        optionsContainer?: ComponentPropsWithoutRef<'div'>;
+        option?: ComponentPropsWithoutRef<'div'>;
+        label?: TextProps<'label'>;
+        description?: TextProps<'p'>;
+        startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
+        endEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
+    }
+} & Omit<InputProps, 'type' | 'overrides'>;
+
+/**
+ * A Combobox component is used to render a searchable select.
+ *
+ * <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,
+    onChange,
+    label,
+    status,
+    hideLabel,
+    description,
+    hideDescription,
+    placeholder,
+    startEnhancer,
+    endEnhancer,
+    disabled,
+    onInputChange,
+    allowCustomValue,
+    customValueString = 'Create "%v"',
+    overrides,
+}: ComboboxProps<T>) {
+    const inputID = useId();
+    const [selectedID, setSelectedID] = useState<string | null>(value?.id || null);
+    const [query, setQuery] = useState('');
+
+    return (
+        <Field
+            htmlFor={inputID}
+            label={label}
+            hideLabel={hideLabel}
+            description={description}
+            hideDescription={hideDescription}
+            disabled={disabled}
+            overrides={{
+                container: overrides?.container,
+                label: overrides?.label,
+                description: overrides?.description,
+            }}
+        >
+            <HCombobox
+                as="div"
+                value={selectedID}
+                onChange={(id) => {
+                    if (onChange) {
+                        const sel = options.find((o) => o.id === id);
+                        if (sel) {
+                            onChange(sel);
+                            setSelectedID(sel.id);
+                        } else if (id) {
+                            onChange({
+                                id: null,
+                                node: id,
+                            });
+                        }
+                    }
+                }}
+            >
+                <div
+                    className={inputStyles.inputContainer}
+                    data-status={status}
+                    data-disabled={disabled}
+                >
+                    {!!startEnhancer && (
+                        <div {...overrides?.startEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.startEnhancerContainer?.className)}>
+                            {!!startEnhancer && (
+                                <MemoizedEnhancer
+                                    enhancer={startEnhancer}
+                                    size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                                />
+                            )}
+                        </div>
+                    )}
+                    <div className={styles.content}>
+                        {value ? value.node : (
+                            <HCombobox.Input
+                                id={inputID}
+                                {...overrides?.input}
+                                placeholder={placeholder}
+                                // value={query}
+                                onChange={(e) => {
+                                    setQuery(e.target.value);
+                                    if (onInputChange) onInputChange(e.target.value);
+                                    if (overrides?.input?.onChange) overrides.input.onChange(e);
+                                }}
+                                aria-disabled={disabled}
+                                data-status={disabled ? 'disabled' : (status || 'default')}
+                                className={clsx(
+                                    overrides?.input?.className,
+                                    inputStyles.input,
+                                    styles.field,
+                                )}
+                            />
+                        )}
+                    </div>
+                    {!!value && (
+                        <Button
+                            size="xs"
+                            shape="circle"
+                            startEnhancer={<FontAwesomeIcon icon={faClose} fontSize="10px" />}
+                            onClick={() => {
+                                if (onChange) {
+                                    onChange(null);
+                                }
+                                setSelectedID(null);
+                            }}
+                        >
+                            Clear
+                        </Button>
+                    )}
+                    {!!endEnhancer && (
+                        <div {...overrides?.endEnhancerContainer} className={clsx(inputStyles.enhancer, overrides?.endEnhancerContainer?.className)}>
+                            {!!endEnhancer && (
+                                <MemoizedEnhancer
+                                    enhancer={endEnhancer}
+                                    size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                                />
+                            )}
+                        </div>
+                    )}
+                </div>
+                <Transition
+                    enter={dropdownStyles.transition}
+                    enterFrom={dropdownStyles.enterFrom}
+                    enterTo={dropdownStyles.enterTo}
+                    leave={dropdownStyles.transition}
+                    leaveFrom={dropdownStyles.leaveFrom}
+                    leaveTo={dropdownStyles.leaveTo}
+                >
+                    <HCombobox.Options
+                        className={clsx(
+                            overrides?.optionsContainer,
+                            styles.options,
+                        )}
+                    >
+                        {(allowCustomValue && query.length > 0) && (
+                            <HCombobox.Option
+                                value={query}
+                                data-selected={false}
+                                className={clsx(
+                                    overrides?.option,
+                                    styles.option,
+                                )}
+                            >
+                                <Text as="span" kind="paragraphSmall">
+                                    {customValueString.replace('%v', query)}
+                                </Text>
+                            </HCombobox.Option>
+                        )}
+                        {(options || []).map((option) => (
+                            <HCombobox.Option
+                                key={option.id}
+                                value={option.id}
+                                data-selected={option.id === value}
+                                className={clsx(
+                                    overrides?.option,
+                                    styles.option,
+                                )}
+                            >
+                                {typeof option.node === 'string' ? (
+                                    <Text as="span" kind="paragraphSmall">
+                                        {option.node}
+                                    </Text>
+                                ) : option.node}
+                            </HCombobox.Option>
+                        ))}
+                    </HCombobox.Options>
+                </Transition>
+            </HCombobox>
+        </Field>
+    );
+}

package/src/stories/combobox/index.ts

@@ -0,0 +1 @@
+export * from './Combobox';

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

@@ -0,0 +1,187 @@
+$panelMinMargin: 16px;
+$panelRiseDistance: 4px;
+$panelScaleAnimation: 0.96;
+$panelAnimationDelay: var(--pte-animations-duration-fast);
+
+.root {
+    position: relative;
+    z-index: 10;
+    user-select: var(--pte-utils-defaultUserSelect);
+}
+
+.overlay {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--pte-colors-backgroundOverlayDark);
+    backdrop-filter: blur(0);
+    will-change: opacity, backdrop-filter;
+    opacity: 0;
+    transition: var(--pte-animations-duration-normal) var(--pte-animations-timing-easeInOut);
+}
+
+.open {
+    transition-delay: 0ms;
+    opacity: 1;
+    backdrop-filter: blur(2px);
+}
+
+.overlayContainer {
+    .enterFrom {
+        backdrop-filter: blur(0);
+    }
+
+    .enterTo {
+        backdrop-filter: blur(2px);
+    }
+
+    .leave {
+        transition-delay: $panelAnimationDelay;
+    }
+
+    .leaveFrom {
+        backdrop-filter: blur(2px);
+    }
+
+    .leaveTo {
+        backdrop-filter: blur(0);
+    }
+}
+
+.panelContainer {
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100vh;
+    padding: $panelMinMargin;
+    overflow-y: auto;
+
+    min-height: 100vh;
+    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: 10;
+    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-colors-backgroundPrimary);
+    border: 1px solid var(--pte-borders-dropdown-color);
+    backdrop-filter: var(--pte-surfaces-dialog-backdropFilter);
+    outline: none;
+    box-shadow: var(--pte-lighting-shallowBelow);
+}
+
+.glass {
+    border-radius: var(--pte-borders-radius-roundedXL);
+    background: var(--pte-surfaces-dialog-background);
+    border: var(--pte-surfaces-dialog-border);
+    backdrop-filter: var(--pte-surfaces-dialog-backdropFilter);
+    outline: var(--pte-surfaces-dialog-outline);
+    box-shadow: var(--pte-lighting-shallowBelow);
+}
+
+.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

@@ -0,0 +1,70 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Dialog } from './Dialog';
+import { Button } from '../button';
+import { Text } from '../text';
+
+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: (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: '80vh',
+                    //     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>
+            </>
+        );
+    },
+};