paris 0.2.2 → 0.4.0

package/src/stories/select/Select.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import type { ReactNode, ComponentPropsWithoutRef } 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 { useId } from 'react';
+import inputStyles from '../input/Input.module.scss';
+import dropdownStyles from '../dropdown/Dropdown.module.scss';
+import styles from './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';
+
+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>;
+    /**
+     * Prop overrides for other rendered elements. Overrides for the input itself should be passed directly to the component.
+     */
+    overrides?: {
+        container?: ComponentPropsWithoutRef<'div'>;
+        selectInput?: ComponentPropsWithoutRef<'button'>;
+        optionsContainer?: ComponentPropsWithoutRef<'div'>;
+        option?: ComponentPropsWithoutRef<'div'>;
+        label?: TextProps<'label'>;
+        description?: TextProps<'p'>;
+        startEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
+        endEnhancerContainer?: ComponentPropsWithoutRef<'div'>;
+    }
+} & Omit<InputProps, 'type' | 'overrides'>;
+
+/**
+ * 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,
+    label,
+    status,
+    hideLabel,
+    description,
+    hideDescription,
+    placeholder,
+    startEnhancer,
+    endEnhancer,
+    disabled,
+    overrides,
+}: SelectProps<T>) {
+    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,
+            }}
+        >
+            <Listbox
+                as="div"
+                value={value}
+                onChange={onChange}
+            >
+                <Listbox.Button
+                    id={inputID}
+                    {...overrides?.selectInput}
+                    aria-disabled={disabled}
+                    data-status={disabled ? 'disabled' : (status || 'default')}
+                    className={clsx(
+                        overrides?.selectInput?.className,
+                        inputStyles.inputContainer,
+                        styles.field,
+                    )}
+                >
+                    {!!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>
+                    )}
+                    {options?.find((o) => o.id === value)?.node || placeholder || 'Select an option'}
+                    {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>
+                    ) : (
+                        <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(
+                            overrides?.optionsContainer,
+                            styles.options,
+                        )}
+                    >
+                        {(options || []).map((option) => (
+                            <Listbox.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}
+                            </Listbox.Option>
+                        ))}
+                    </Listbox.Options>
+                </Transition>
+            </Listbox>
+        </Field>
+    );
+}

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';

package/src/stories/theme/themes.ts

@@ -2,6 +2,7 @@ import { createTheme } from 'pte';
 import type { CSSColor, CSSLength } from '@ssh/csstypes';
 import type { Property } from 'csstype';
 import type { PartialDeep } from 'type-fest';
+import merge from 'ts-deepmerge';
 import { Tokens as T } from './tokens';
 import type { TokensT } from './tokens';
 
@@ -16,8 +17,36 @@ export type FontDefinition = {
 
 export type FontClassDefinition = Omit<FontDefinition, 'fontSize' | 'lineHeight'>;
 
+export type ShadowDefinition = `${CSSLength} ${CSSLength} ${CSSLength} ${CSSColor}` | 'none';
+
+const Shadows = {
+    shallowBelow: '0px 4px 20px rgba(0, 0, 0, 0.2)',
+    deepBelow: '0px 8px 20px rgba(0, 0, 0, 0.2)',
+    shallowAbove: '0px -4px 20px rgba(0, 0, 0, 0.2)',
+    deepAbove: '0px -8px 20px rgba(0, 0, 0, 0.2)',
+    shallowPopup: '0px 0px 30px rgba(0, 0, 0, 0.2)',
+    deepPopup: '0px 0px 40px rgba(0, 0, 0, 0.2)',
+    subtlePopup: '0px 0px 10px rgba(0, 0, 0, 0.1)',
+    shallowLeft: '-20px 0px 40px rgba(0, 0, 0, 0.1)',
+    shallowRight: '20px 0px 40px rgba(0, 0, 0, 0.1)',
+} as const;
+
+export type TimingFunction = `cubic-bezier(${number}, ${number}, ${number}, ${number})` | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+export type Duration = `${number}ms` | `${number}s`;
+
+const TimingFunctions: Omit<Theme['animations']['timing'], 'default'> = {
+    easeInOut: 'cubic-bezier(0.42, 0.0, 0.58, 1.0)',
+    easeOut: 'cubic-bezier(0.0, 0.0, 0.58, 1.0)',
+    easeIn: 'cubic-bezier(0.42, 0.0, 1.0, 1.0)',
+    easeOutQuad: 'cubic-bezier(0.5, 1, 0.89, 1)',
+    easeInQuad: 'cubic-bezier(0.11, 0, 0.5, 0)',
+};
+
 export type Theme = {
     tokens: TokensT,
+    utils: {
+        defaultUserSelect: Property.UserSelect,
+    }
     colors: {
         // Primary
 
@@ -71,6 +100,7 @@ export type Theme = {
         backgroundOverlayLight: CSSColor,
         backgroundOverlayXLight: CSSColor,
         backgroundOverlayGrey: CSSColor,
+        backgroundOverlayDark: CSSColor,
         backgroundOverlayTeal: CSSColor,
 
         // Border
@@ -91,6 +121,7 @@ export type Theme = {
         fontFamily: string,
         boldFontWeight: number,
         italicLetterSpacing: CSSLength,
+        verticalMetricsAdjust: CSSLength;
 
         styles: {
             // Display
@@ -124,6 +155,17 @@ export type Theme = {
             paragraphXXSmall: FontDefinition,
         }
     },
+    lighting: {
+        shallowBelow: ShadowDefinition,
+        deepBelow: ShadowDefinition,
+        shallowAbove: ShadowDefinition,
+        deepAbove: ShadowDefinition,
+        shallowPopup: ShadowDefinition,
+        deepPopup: ShadowDefinition,
+        subtlePopup: ShadowDefinition,
+        shallowLeft: ShadowDefinition,
+        shallowRight: ShadowDefinition,
+    },
     borders: {
         // Border Radius
         radius: {
@@ -133,10 +175,42 @@ export type Theme = {
             rounded: CSSLength,
             roundedSmall: CSSLength,
             roundedLarge: CSSLength,
+            roundedXL: CSSLength,
+        },
+
+        // Dropdowns (Select, Menu, Popovers, etc.)
+
+        dropdown: {
+            color: CSSColor,
+            shadow: ShadowDefinition,
         },
     },
+    surfaces: {
+        dialog: {
+            border: `${number}px ${string} ${CSSColor}`,
+            outline: `${number}px ${string} ${CSSColor}`,
+            background: CSSColor,
+            backdropFilter: string,
+        },
+    }
     animations: {
         interaction: string,
+        timing: {
+            easeInOut: TimingFunction,
+            easeOut: TimingFunction,
+            easeIn: TimingFunction,
+            easeOutQuad: TimingFunction,
+            easeInQuad: TimingFunction,
+            default: TimingFunction,
+        },
+        duration: {
+            rapid: Duration,
+            fast: Duration,
+            normal: Duration,
+            relaxed: Duration,
+            slow: Duration,
+            gradual: Duration,
+        },
     }
 };
 
@@ -172,6 +246,9 @@ export const ParagraphFontClass: FontClassDefinition = {
 
 export const LightTheme: Theme = {
     tokens: T,
+    utils: {
+        defaultUserSelect: 'none',
+    },
     colors: {
         // Primary
 
@@ -225,6 +302,7 @@ export const LightTheme: Theme = {
         backgroundOverlayLight: 'rgba(255, 255, 255, 0.07)',
         backgroundOverlayXLight: 'rgba(255, 255, 255, 0.1)',
         backgroundOverlayGrey: 'rgba(175, 175, 175, 0.8)',
+        backgroundOverlayDark: 'rgba(0, 0, 0, 0.1)',
         backgroundOverlayTeal: 'rgba(29, 238, 205, 0.1)',
 
         // Border
@@ -245,6 +323,7 @@ export const LightTheme: Theme = {
         fontFamily: '"Graphik Web", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif',
         boldFontWeight: 500,
         italicLetterSpacing: '-0.01em',
+        verticalMetricsAdjust: '1px',
 
         styles: {
             // Display
@@ -350,6 +429,9 @@ export const LightTheme: Theme = {
             },
         },
     },
+    lighting: {
+        ...Shadows,
+    },
     borders: {
         radius: {
             pill: '1000px',
@@ -358,18 +440,41 @@ export const LightTheme: Theme = {
             rounded: '8px',
             roundedSmall: '4px',
             roundedLarge: '12px',
+            roundedXL: '16px',
+        },
+
+        dropdown: {
+            shadow: Shadows.deepBelow,
+            color: 'transparent',
+        },
+    },
+    surfaces: {
+        dialog: {
+            border: '8px solid rgba(0, 0, 0, 0.2)',
+            outline: '1px solid rgba(0, 0, 0, 0.25)',
+            background: 'rgba(255, 255, 255, 0.9)',
+            backdropFilter: 'blur(6px)',
         },
     },
     animations: {
-        interaction: '0.2s cubic-bezier(0.25, 1, 0.5, 1)',
+        interaction: '200ms cubic-bezier(0.5, 1, 0.89, 1)',
+        timing: {
+            ...TimingFunctions,
+            default: TimingFunctions.easeOut,
+        },
+        duration: {
+            rapid: '50ms',
+            fast: '100ms',
+            normal: '200ms',
+            relaxed: '300ms',
+            slow: '400ms',
+            gradual: '600ms',
+        },
     },
 };
 
-export const DarkTheme: Theme = {
-    ...LightTheme,
+export const DarkTheme: Theme = merge(LightTheme, {
     colors: {
-        ...LightTheme.colors,
-
         // Reverse all inverse colors
 
         contentPrimary: LightTheme.colors.contentInversePrimary,
@@ -397,7 +502,21 @@ export const DarkTheme: Theme = {
         borderInverseOpaque: LightTheme.colors.borderOpaque,
         borderInverseSelected: LightTheme.colors.borderSelected,
     },
-};
+    borders: {
+        dropdown: {
+            shadow: 'none',
+            color: T.colors.grey600,
+        },
+    },
+    surfaces: {
+        dialog: {
+            border: '8px solid rgba(255, 255, 255, 0.2)',
+            outline: '1px solid rgba(255, 255, 255, 0.25)',
+            background: 'rgba(0, 0, 0, 0.6)',
+            backdropFilter: 'blur(6px)',
+        },
+    },
+} as PartialDeep<Theme>) as Theme;
 
 export const {
     theme,
@@ -406,4 +525,4 @@ export const {
     updateTheme,
     injectTheme,
     generateThemeInjection,
-} = createTheme(LightTheme);
+} = createTheme<Theme>(LightTheme);

package/src/{styles → stories/theme}/tw-preflight.css

@@ -15,6 +15,8 @@
     border-width: 0; /* 2 */
     border-style: solid; /* 2 */
     border-color: var(--pte-colors-borderSelected); /* 2 */
+    
+    -webkit-tap-highlight-color: transparent;
 }
 
 /*
@@ -325,7 +327,7 @@ Set the default cursor for buttons.
 
 button,
 [role="button"] {
-    cursor: pointer;
+    cursor: default;
 }
 
 /*

package/src/stories/theme/util.scss

@@ -0,0 +1,8 @@
+@mixin flex-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.bold {
+    font-weight: var(--pte-typography-boldFontWeight);
+}

package/src/stories/tilt/Tilt.module.scss

@@ -0,0 +1 @@
+.container {}