paris 0.2.2 → 0.4.0

package/src/stories/input/Input.module.scss

@@ -0,0 +1,135 @@
+.inputContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+    min-height: 36px;
+
+    background-color: var(--pte-colors-backgroundSecondary);
+
+    //height: 36px;
+    width: 100%;
+    padding: calc(7.5px - var(--pte-typography-verticalMetricsAdjust)) 15px 7.5px;
+
+    font-size: var(--pte-typography-styles-paragraphSmall-fontSize);
+    font-style: var(--pte-typography-styles-paragraphSmall-fontStyle);
+    font-weight: var(--pte-typography-styles-paragraphSmall-fontWeight);
+    letter-spacing: var(--pte-typography-styles-paragraphSmall-letterSpacing);
+    line-height: var(--pte-typography-styles-paragraphSmall-lineHeight);
+    text-transform: var(--pte-typography-styles-paragraphSmall-textTransform);
+
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--pte-colors-backgroundSecondary);
+    border-radius: var(--pte-borders-radius-rectangle);
+
+    transition: var(--pte-animations-interaction);
+
+    &:focus-within {
+        outline: none;
+        border-color: var(--pte-colors-borderSelected);
+        background-color: var(--pte-colors-backgroundTertiary);
+    }
+
+    &[data-status="disabled"] {
+        border-color: var(--pte-colors-backgroundTertiary);
+        background-color: var(--pte-colors-backgroundTertiary);
+        color: var(--pte-colors-contentDisabled);
+        pointer-events: none;
+        cursor: default;
+
+        &:focus-within {
+            border-color: var(--pte-colors-backgroundTertiary) !important;
+        }
+    }
+
+    &[data-status="error"] {
+        border-color: var(--pte-colors-borderNegative);
+        background-color: var(--pte-colors-backgroundNegative);
+        color: var(--pte-colors-contentNegative);
+
+        &:focus-within {
+            color: var(--pte-colors-contentPrimary);
+        }
+    }
+
+    &[data-status="success"] {
+        border-color: var(--pte-colors-borderPositive);
+        background-color: var(--pte-colors-backgroundPositive);
+        color: var(--pte-colors-contentPositive);
+
+        &:focus-within {
+            color: var(--pte-colors-contentPrimary);
+        }
+    }
+
+    & input, & textarea {
+        width: 100%;
+        background-color: transparent;
+        padding: 0;
+        margin: 0;
+        border: none;
+        outline: none;
+
+        &::placeholder {
+            color: var(--pte-colors-contentTertiary);
+        }
+
+        &[aria-disabled=true] {
+            color: var(--pte-colors-contentDisabled);
+            cursor: default;
+
+            &::placeholder {
+                color: var(--pte-colors-contentDisabled);
+            }
+        }
+
+        &[type="color"]::-webkit-color-swatch {
+            border: 1px solid var(--pte-colors-borderSelected);
+            border-radius: var(--pte-borders-radius-circle);
+        }
+
+        &[type="color"]::-webkit-color-swatch-wrapper {
+            width: 16px;
+            height: 100%;
+        }
+
+        &[type="file"]::-webkit-file-upload-button {
+            display: none;
+        }
+    }
+}
+
+.enhancer {
+    color: var(--pte-colors-contentSecondary);
+    margin-block-start: -0.5px;
+    font-size: var(--pte-typography-styles-paragraphSmall-fontSize);
+    font-style: var(--pte-typography-styles-paragraphSmall-fontStyle);
+    font-weight: var(--pte-typography-styles-paragraphSmall-fontWeight);
+    letter-spacing: var(--pte-typography-styles-paragraphSmall-letterSpacing);
+    line-height: var(--pte-typography-styles-paragraphSmall-lineHeight);
+    text-transform: var(--pte-typography-styles-paragraphSmall-textTransform);
+}
+
+.container {
+    user-select: var(--pte-utils-defaultUserSelect);
+    cursor: default;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+// Use double selector to ensure specificity is higher than the default styles
+.label.label {
+    color: var(--pte-colors-contentPrimary);
+    font-weight: var(--pte-typography-boldFontWeight);
+}
+
+// Use double selector to ensure specificity is higher than the default styles
+.description.description {
+    color: var(--pte-colors-contentTertiary);
+}
+
+.hidden {
+    display: none;
+}

package/src/stories/input/Input.stories.ts

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { createElement } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { Input } from './Input';
+
+const meta: Meta<typeof Input> = {
+    title: 'Inputs/Input',
+    component: Input,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+    args: {
+        placeholder: 'Billie Eilish',
+        label: 'Name',
+        description: 'Type your full name here.',
+    },
+};
+
+export const Password: Story = {
+    args: {
+        type: 'password',
+        placeholder: 'Password',
+        label: 'Password',
+        hideLabel: true,
+    },
+};
+
+export const Success: Story = {
+    args: {
+        placeholder: 'billie@eilish.com',
+        value: 'valid@email.com',
+        onChange: () => {},
+        type: 'email',
+        label: 'Email',
+        description: 'Enter your email address.',
+        status: 'success',
+    },
+};
+
+export const Error: Story = {
+    args: {
+        placeholder: 'billie@eilish.com',
+        value: 'notavalid@email',
+        onChange: () => {},
+        type: 'email',
+        label: 'Email',
+        description: 'Enter your email address.',
+        status: 'error',
+    },
+};
+
+export const Disabled: Story = {
+    args: {
+        placeholder: 'billie@eilish.com',
+        type: 'email',
+        label: 'Email',
+        description: 'Enter your email address.',
+        disabled: true,
+    },
+};
+
+export const WithEnhancer: Story = {
+    args: {
+        placeholder: 'Billie Eilish',
+        label: 'Name',
+        description: 'Type your full name here.',
+        startEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
+            icon: faSearch,
+            width: `${size}px`,
+        }),
+    },
+};
+
+export const WithEndEnhancer: Story = {
+    args: {
+        placeholder: 'Billie Eilish',
+        label: 'Name',
+        description: 'Type your full name here.',
+        endEnhancer: ({ size }) => createElement(FontAwesomeIcon, {
+            icon: faSearch,
+            width: `${size}px`,
+        }),
+    },
+};

package/src/stories/input/Input.tsx

@@ -0,0 +1,137 @@
+'use client';
+
+import { useId } from 'react';
+import type { FC, ComponentPropsWithoutRef } from 'react';
+import clsx from 'clsx';
+import styles from './Input.module.scss';
+import type { TextProps } from '../text';
+import { Text } from '../text';
+import type { Enhancer } from '../../types/Enhancer';
+import { pget, theme } from '../theme';
+import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
+import type { FieldProps } from '../field';
+import { Field } from '../field';
+
+export type InputProps = {
+    /**
+     * A label for the input field. This is required for accessibility, but can be visually hidden using the `hideLabel` prop.
+     */
+    label: string;
+    /**
+     * The status of the input field.
+     * @default default
+     */
+    status?: 'default' | 'error' | 'success';
+    /**
+     * The input type. All HTML5 input types are supported, but some may require additional props to be set for full accessibility or aesthetic.
+     * @default text
+     */
+    type?: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+    /**
+     * The placeholder for the input.
+     */
+    placeholder?: string;
+    /**
+     * An icon or other element to render before the Input element. A `{ size }` argument is passed that should be used to determine the width & height of the content displayed.
+     */
+    startEnhancer?: Enhancer;
+    /**
+     * An icon or other element to render after the Input element. A `{ size }` argument is passed that should be used to determine the width & height of the content displayed.
+     */
+    endEnhancer?: Enhancer;
+    /**
+     * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
+     */
+    overrides?: {
+        container?: ComponentPropsWithoutRef<'div'>;
+        label?: TextProps<'label'>;
+        description?: TextProps<'p'>;
+        startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
+        endEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
+    }
+} & FieldProps;
+
+/**
+ * An `Input` is used to collect user input, such as text, numbers, or dates.
+ *
+ * > `overrides` available: `container`, `label`, `description`, `startEnhancerContainer`, `endEnhancerContainer`
+ *
+ * <hr />
+ *
+ * To use the `Input` component, import it as follows:
+ *
+ * ```js
+ * import { Input } from 'paris/input';
+ * ```
+ * @constructor
+ */
+export const Input: FC<InputProps & ComponentPropsWithoutRef<'input'>> = ({
+    label,
+    status,
+    type,
+    hideLabel,
+    description,
+    hideDescription,
+    startEnhancer,
+    endEnhancer,
+    disabled,
+    overrides,
+    ...props
+}) => {
+    const inputID = useId();
+    return (
+        <Field
+            htmlFor={inputID}
+            label={label}
+            hideLabel={hideLabel}
+            description={description}
+            hideDescription={hideDescription}
+            disabled={disabled}
+            overrides={{
+                container: overrides?.container,
+                label: overrides?.label,
+                description: overrides?.description,
+            }}
+        >
+            <div
+                className={styles.inputContainer}
+                data-status={status}
+                data-disabled={disabled}
+            >
+                {!!startEnhancer && (
+                    <div {...overrides?.startEnhancerContainer} className={clsx(styles.enhancer, overrides?.startEnhancerContainer?.className)}>
+                        {!!startEnhancer && (
+                            <MemoizedEnhancer
+                                enhancer={startEnhancer}
+                                size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                            />
+                        )}
+                    </div>
+                )}
+                <input
+                    {...props}
+                    id={inputID}
+                    type={type || 'text'}
+                    aria-label={label}
+                    aria-describedby={`${inputID}-description`}
+                    aria-disabled={disabled}
+                    readOnly={disabled}
+                    className={clsx(
+                        props.className,
+                        styles.input,
+                    )}
+                />
+                {!!endEnhancer && (
+                    <div {...overrides?.endEnhancerContainer} className={clsx(styles.enhancer, overrides?.endEnhancerContainer?.className)}>
+                        {!!endEnhancer && (
+                            <MemoizedEnhancer
+                                enhancer={endEnhancer}
+                                size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                            />
+                        )}
+                    </div>
+                )}
+            </div>
+        </Field>
+    );
+};

package/src/stories/input/index.ts

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

package/src/stories/pagination/index.ts

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

package/src/stories/pagination/usePagination.ts

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+
+export type PaginationState<T extends string[] | readonly string[] = string[]> = {
+    /**
+     * The current page key.
+     */
+    currentPage: T[number],
+
+    /**
+     * Open a page and add it to the history.
+     * @param page - The page's unique key.
+     */
+    open: (page: T[number]) => void,
+
+    /**
+     * Check if the current page can go back.
+     */
+    canGoBack: () => boolean,
+
+    /**
+     * Go back to the previous page.
+     *
+     * If the current page is the first page, nothing happens.
+     */
+    back: () => void,
+
+    /**
+     * Check if the current page can go forward.
+     */
+    canGoForward: () => boolean,
+
+    /**
+     * Go forward to the next page.
+     *
+     * If there is no next page, nothing happens.
+     */
+    forward: () => void,
+
+    /**
+     * The page history.
+     */
+    history: T[number][],
+};
+
+/**
+ * A hook to create a page history and navigate between pages.
+ *
+ * In TypeScript, you can pass in a string array to the generic type to explicitly define the page keys, which will add type safety and auto-completion for each method.
+ *
+ * @param initialPage - The initial page key.
+ */
+export const usePagination = <T extends string[] | readonly string[] = string[]>(
+    initialPage: T[number],
+): PaginationState<T> => {
+    // The current page.
+    const [currentPage, setCurrentPage] = useState<T[number]>(initialPage);
+
+    // The page history.
+    const [history, setHistory] = useState<T[number][]>([initialPage]);
+
+    const open = (page: T[number]): void => {
+        // Do nothing if the page is already open.
+        if (page === currentPage) {
+            return;
+        }
+
+        // Open the page and add it to the history, removing all pages after it.
+        const index = history.indexOf(currentPage);
+        setCurrentPage(page);
+        setHistory((hist) => hist.slice(0, index + 1).concat(page));
+    };
+
+    const canGoBack = (): boolean => {
+        const index = history.indexOf(currentPage);
+        return index > 0;
+    };
+
+    const back = (): void => {
+        if (canGoBack()) {
+            const index = history.indexOf(currentPage);
+            setCurrentPage(history[index - 1]);
+        }
+    };
+
+    const canGoForward = (): boolean => {
+        const index = history.indexOf(currentPage);
+        return index < history.length - 1;
+    };
+
+    const forward = (): void => {
+        if (canGoForward()) {
+            const index = history.indexOf(currentPage);
+            setCurrentPage(history[index + 1]);
+        }
+    };
+
+    return {
+        currentPage,
+        open,
+        canGoBack,
+        back,
+        canGoForward,
+        forward,
+        history,
+    } as PaginationState<T>;
+};

package/src/stories/select/Select.module.scss

@@ -0,0 +1,74 @@
+.container {
+    position: relative;
+    user-select: var(--pte-utils-defaultUserSelect);
+
+    & > * {
+        cursor: default;
+    }
+}
+
+.field {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.options {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 10;
+
+    display: flex;
+    flex-direction: column;
+
+    background-color: var(--pte-colors-backgroundPrimary);
+
+    border-width: 1px;
+    border-style: solid;
+    border-radius: var(--pte-borders-radius-rectangle);
+    border-color: var(--pte-borders-dropdown-color);
+    box-shadow: var(--pte-borders-dropdown-shadow);
+
+    transition: var(--pte-animations-interaction);
+
+    &:focus-within {
+        outline: none;
+    }
+}
+
+.option {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+
+    padding: 8px 16px;
+    margin: -1px;
+
+    border: 1px solid var(--pte-borders-dropdown-color);
+    //border-right: 1px solid var(--pte-borders-dropdown-color);
+
+    transition: var(--pte-animations-interaction);
+
+    &:hover, &[data-headlessui-state="active"] {
+        background-color: var(--pte-colors-backgroundSecondary);
+    }
+
+    &[data-selected=true] {
+        background-color: var(--pte-colors-backgroundTertiary);
+    }
+
+    &[data-disabled=true] {
+        color: var(--pte-colors-contentDisabled);
+        pointer-events: none;
+        cursor: default;
+    }
+}
+
+.content {
+    width: 100%;
+}

package/src/stories/select/Select.stories.ts

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { createElement, useState } from 'react';
+import { Select } from './Select';
+import { Text } from '../text';
+
+const meta: Meta<typeof Select> = {
+    title: 'Inputs/Select',
+    component: Select,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Select>;
+
+const render: Story['render'] = (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [selected, setSelected] = useState<string | null>(null);
+    return createElement('div', {
+        style: { minHeight: '200px' },
+    }, createElement(Select, {
+        ...args,
+        value: selected,
+        onChange: (e) => setSelected(e),
+    }));
+};
+
+export const Default: Story = {
+    args: {
+        label: 'Release type',
+        description: 'Select the type of release you want to create.',
+        options: [
+            { id: '1', node: 'Single' },
+            { id: '2', node: 'EP' },
+            { id: '3', node: 'Album (LP)' },
+        ],
+    },
+    render,
+};
+
+export const WithCustomNodes: Story = {
+    args: {
+        options: [
+            {
+                id: '1',
+                // eslint-disable-next-line react/no-children-prop
+                node: createElement(Text, {
+                    as: 'span',
+                    kind: 'displaySmall',
+                    children: 'Option 1',
+                }),
+            },
+            {
+                id: '2',
+                // eslint-disable-next-line react/no-children-prop
+                node: createElement(Text, {
+                    as: 'span',
+                    kind: 'paragraphXXSmall',
+                    children: 'Option 2',
+                }),
+            },
+            {
+                id: '3',
+                // eslint-disable-next-line react/no-children-prop
+                node: createElement(Text, {
+                    as: 'span',
+                    kind: 'labelXLarge',
+                    children: 'Option 3',
+                }),
+            },
+        ],
+    },
+    render,
+};