paris 0.2.1 → 0.3.0

package/src/stories/input/Input.tsx

@@ -0,0 +1,172 @@
+'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';
+
+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';
+    /**
+     * Visually hide the label (while keeping it accessible to screen readers).
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * A description of the input field. Can be visually hidden using the `hideDescription` prop.
+     */
+    description?: string;
+    /**
+     * Visually hide the description while keeping it accessible to screen readers.
+     * @default false
+     */
+    hideDescription?: boolean;
+    /**
+     * 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;
+    /**
+     * Disables the input, disallowing user interaction.
+     */
+    disabled?: boolean;
+    /**
+     * 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'>;
+    }
+};
+
+/**
+ * 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'>> = ({ status, disabled, ...props }) => {
+    const inputID = useId();
+    return (
+        // Disable a11y rules because the container doesn't need to be focusable for screen readers; the input itself should receive focus instead.
+        // The container is only made clickable for usability purposes.
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        <div
+            {...props.overrides?.container}
+            className={clsx(
+                props.overrides?.container?.className,
+                styles.container,
+            )}
+            onClick={(e) => {
+                if (disabled) e.preventDefault();
+                if (typeof window !== 'undefined') {
+                    const input = document.getElementById(inputID);
+                    if (input && !disabled) {
+                        input.focus();
+                    }
+                }
+            }}
+        >
+            <Text
+                {...props.overrides?.label}
+                as="label"
+                kind="paragraphSmall"
+                htmlFor={inputID}
+                className={clsx(
+                    styles.label,
+                    { [styles.hidden]: props.hideLabel },
+                )}
+            >
+                {props.label}
+            </Text>
+            <div
+                className={styles.inputContainer}
+                data-status={status}
+                data-disabled={disabled}
+            >
+                {!!props.startEnhancer && (
+                    <div {...props.overrides?.startEnhancerContainer} className={clsx(styles.enhancer, props.overrides?.startEnhancerContainer?.className)}>
+                        {!!props.startEnhancer && (
+                            <MemoizedEnhancer
+                                enhancer={props.startEnhancer}
+                                size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                            />
+                        )}
+                    </div>
+                )}
+                <input
+                    {...props}
+                    id={inputID}
+                    type={props.type || 'text'}
+                    aria-label={props.label}
+                    aria-describedby={`${inputID}-description`}
+                    aria-disabled={disabled}
+                    readOnly={disabled}
+                    className={clsx(
+                        props.className,
+                        styles.input,
+                    )}
+                />
+                {!!props.endEnhancer && (
+                    <div {...props.overrides?.endEnhancerContainer} className={clsx(styles.enhancer, props.overrides?.endEnhancerContainer?.className)}>
+                        {!!props.endEnhancer && (
+                            <MemoizedEnhancer
+                                enhancer={props.endEnhancer}
+                                size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                            />
+                        )}
+                    </div>
+                )}
+            </div>
+            <Text
+                id={`${inputID}-description`}
+                {...props.overrides?.description}
+                as="p"
+                kind="paragraphXSmall"
+                className={clsx(
+                    styles.description,
+                    { [styles.hidden]: !props.description || props.hideDescription },
+                    props.overrides?.description?.className,
+                )}
+            >
+                {props.description}
+            </Text>
+        </div>
+    );
+};

package/src/stories/input/index.ts

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

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

@@ -0,0 +1,70 @@
+.container {
+    position: relative;
+    user-select: none;
+
+    & > * {
+        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: 0 -1px;
+
+    border-left: 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;
+    }
+}

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

@@ -0,0 +1,71 @@
+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: {
+        options: [
+            { id: '1', node: 'Option 1' },
+            { id: '2', node: 'Option 2' },
+            { id: '3', node: 'Option 3' },
+        ],
+    },
+    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,
+};

package/src/stories/select/Select.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import type { FC, ReactNode } from 'react';
+import { Listbox, Transition } from '@headlessui/react';
+import clsx from 'clsx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+import inputStyles from '../input/Input.module.scss';
+import dropdownStyles from '../dropdown/Dropdown.module.scss';
+import styles from './Select.module.scss';
+import { Text } from '../text';
+
+export type Option<T = Record<string, any>> = {
+    id: string,
+    node: ReactNode,
+    metadata?: T,
+};
+export type SelectProps<T = 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 `SelectProps` component. This will be used as the type for the `metadata` property of each option.
+     */
+    options: Option<T>[];
+    /**
+     * The option ID to render as selected in the select box.
+     *
+     * This should exactly match one of the option IDs passed in the `options` prop. If `null`, no option will be selected.
+     */
+    value?: string | null;
+    /**
+     * The interaction handler for the Select.
+     */
+    onChange?: (value: string | null) => void | Promise<void>;
+};
+
+/**
+ * A Select component is used to render a `select` box.
+ *
+ * <hr />
+ *
+ * To use this component, import it as follows:
+ *
+ * ```js
+ * import { Select } from 'paris/select';
+ * ```
+ * @constructor
+ */
+export function Select<T = Record<string, any>>({
+    options,
+    value,
+    onChange,
+}: SelectProps<T>) {
+    return (
+        <div className={styles.container}>
+            <Listbox
+                value={value}
+                onChange={onChange}
+            >
+                <Listbox.Button
+                    className={clsx(
+                        inputStyles.inputContainer,
+                        styles.field,
+                    )}
+                >
+                    {options?.find((o) => o.id === value)?.node || 'Select an option'}
+                    <FontAwesomeIcon className={inputStyles.enhancer} width="10px" icon={faChevronDown} />
+                </Listbox.Button>
+                <Transition
+                    enter={dropdownStyles.transition}
+                    enterFrom={dropdownStyles.enterFrom}
+                    enterTo={dropdownStyles.enterTo}
+                    leave={dropdownStyles.transition}
+                    leaveFrom={dropdownStyles.leaveFrom}
+                    leaveTo={dropdownStyles.leaveTo}
+                >
+                    <Listbox.Options
+                        className={clsx(
+                            styles.options,
+                        )}
+                    >
+                        {(options || []).map((option) => (
+                            <Listbox.Option
+                                key={option.id}
+                                value={option.id}
+                                data-selected={option.id === value}
+                                className={clsx(
+                                    styles.option,
+                                )}
+                            >
+                                {typeof option.node === 'string' ? (
+                                    <Text as="span" kind="paragraphSmall">{option.node}</Text>
+                                ) : option.node}
+                            </Listbox.Option>
+                        ))}
+                    </Listbox.Options>
+                </Transition>
+            </Listbox>
+        </div>
+    );
+}

package/src/stories/select/index.ts

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

package/src/stories/text/Text.module.scss

@@ -1,3 +1,3 @@
 .text {
-    //color: var(--pte-colors-contentPrimary);
+    font-family: var(--pte-typography-fontFamily);
 }

package/src/stories/text/Text.tsx

@@ -1,40 +1,62 @@
-import type { FC, HTMLProps, ReactNode } from 'react';
+import type { ComponentProps, FC, ReactNode } from 'react';
 import { createElement } from 'react';
+import clsx from 'clsx';
+import styles from './Text.module.scss';
 import typography from './Typography.module.css';
 import type { LightTheme } from '../theme';
 
-export type TextProps = {
+export type TextElement = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'legend' | 'caption' | 'small';
+export type TextProps<T extends TextElement = 'span'> = {
     /**
      * The font class to use.
      * @default paragraphMedium
      */
-    kind: keyof typeof LightTheme.typography.styles;
+    kind?: keyof typeof LightTheme.typography.styles;
     /**
      * The HTML text tag to use.
      * @default span
      */
-    as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'legend' | 'caption' | 'small';
+    as?: T;
     /** The contents of the Text element. */
     children: ReactNode;
-};
+} & ComponentProps<T>;
 
 /**
  * A `Text` component is used to render text with one of our theme formats.
+ *
+ * <hr />
+ *
+ * To use the `Text` component, import it as follows:
+ *
+ * ```tsx
+ * import { Text } from 'paris/text';
+ *
+ * export const ExampleHeading: FC = () => (
+ *     <Text as="h1" format="headingLarge">Hello World!</Text>
+ * );
+ * ```
+ *
  * @example ```tsx
  * <Text as="h1" format="headingLarge">Hello World!</Text>
  * ```
  * @constructor
  */
-export const Text: FC<TextProps & HTMLProps<HTMLParagraphElement>> = ({
+export function Text<T extends TextElement>({
     kind,
     as,
     children,
     ...props
-}) => createElement(
-    as || 'span',
-    {
-        ...props,
-        className: `${props.className || ''} ${typography[kind]}`,
-    },
-    children,
-);
+}: TextProps<T>): JSX.Element {
+    return createElement(
+        as || 'span',
+        {
+            ...props,
+            className: clsx(
+                styles.text,
+                typography[kind || 'paragraphMedium'],
+                props?.className,
+            ),
+        },
+        children,
+    );
+}

package/src/stories/textarea/TextArea.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextArea } from './TextArea';
+
+const meta: Meta<typeof TextArea> = {
+    title: 'Inputs/TextArea',
+    component: TextArea,
+    tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+export const Default: Story = {
+    args: {
+        placeholder: 'Billie Eilish',
+        label: 'Name',
+        description: 'Type your full name here.',
+    },
+};

package/src/stories/textarea/TextArea.tsx

@@ -0,0 +1,120 @@
+import type { ComponentPropsWithoutRef, FC } from 'react';
+import { useId } from 'react';
+import clsx from 'clsx';
+import type { InputProps } from '../input';
+import styles from '../input/Input.module.scss';
+import { Text } from '../text';
+import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
+import { pget, theme } from '../theme';
+
+/**
+ * A `textarea` input field.
+ *
+ * <hr />
+ *
+ * To use this component in your app, import it as follows:
+ *
+ * ```js
+ * import { TextArea } from 'paris/textarea';
+ * ```
+ * @constructor
+ */
+export const TextArea: FC<InputProps & ComponentPropsWithoutRef<'textarea'>> = ({ status, disabled, ...props }) => {
+    const inputID = useId();
+    return (
+        // Disable a11y rules because the container doesn't need to be focusable for screen readers; the input itself should receive focus instead.
+        // The container is only made clickable for usability purposes.
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        <div
+            {...props.overrides?.container}
+            className={clsx(
+                props.overrides?.container?.className,
+                styles.container,
+            )}
+            onClick={(e) => {
+                if (disabled) e.preventDefault();
+                if (typeof window !== 'undefined') {
+                    const input = document.getElementById(inputID);
+                    if (input && !disabled) {
+                        input.focus();
+                    }
+                }
+            }}
+        >
+            <Text
+                {...props.overrides?.label}
+                as="label"
+                kind="paragraphSmall"
+                htmlFor={inputID}
+                className={clsx(
+                    styles.label,
+                    { [styles.hidden]: props.hideLabel },
+                )}
+            >
+                {props.label}
+            </Text>
+            <div
+                className={styles.inputContainer}
+                data-status={status}
+                data-disabled={disabled}
+            >
+                {!!props.startEnhancer && (
+                    <div {...props.overrides?.startEnhancerContainer} className={clsx(styles.enhancer, props.overrides?.startEnhancerContainer?.className)}>
+                        {!!props.startEnhancer && (
+                            <MemoizedEnhancer
+                                enhancer={props.startEnhancer}
+                                size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                            />
+                        )}
+                    </div>
+                )}
+                <textarea
+                    {...props}
+                    id={inputID}
+                    aria-label={props.label}
+                    aria-describedby={`${inputID}-description`}
+                    aria-disabled={disabled}
+                    readOnly={disabled}
+                    className={clsx(
+                        props.className,
+                        styles.input,
+                    )}
+                />
+                {!!props.endEnhancer && (
+                    <div {...props.overrides?.endEnhancerContainer} className={clsx(styles.enhancer, props.overrides?.endEnhancerContainer?.className)}>
+                        {!!props.endEnhancer && (
+                            <MemoizedEnhancer
+                                enhancer={props.endEnhancer}
+                                size={parseInt(pget('typography.styles.paragraphSmall.fontSize') || theme.typography.styles.paragraphSmall.fontSize, 10)}
+                            />
+                        )}
+                    </div>
+                )}
+            </div>
+            <Text
+                id={`${inputID}-description`}
+                {...props.overrides?.description}
+                as="p"
+                kind="paragraphXSmall"
+                className={clsx(
+                    styles.description,
+                    { [styles.hidden]: !props.description || props.hideDescription },
+                    props.overrides?.description?.className,
+                )}
+            >
+                {props.description}
+            </Text>
+        </div>
+    );
+    // return (
+    //     <div
+    //         className={clsx(
+    //             styles.inputContainer,
+    //         )}
+    //     >
+    //         <textarea
+    //             {...props}
+    //         />
+    //     </div>
+    // );
+};

package/src/stories/textarea/index.ts

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

package/src/stories/theme/global.scss

@@ -0,0 +1,2 @@
+@use 'tw-preflight.css';
+@use 'util.scss';

package/src/stories/theme/index.ts

@@ -1,2 +1,3 @@
 export * from './themes';
 export * from './tokens';
+export { generateCSS } from 'pte';