paris 0.23.0 → 0.24.0

package/src/stories/text/Text.test.tsx

@@ -1,81 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { render, screen } from '../../test/render';
-import { Text } from './Text';
-
-describe('Text', () => {
-    it('renders children as text', () => {
-        render(<Text>Hello World</Text>);
-        expect(screen.getByText('Hello World')).toBeInTheDocument();
-    });
-
-    it('renders as a span by default', () => {
-        render(<Text>Default span</Text>);
-        const el = screen.getByText('Default span');
-        expect(el.tagName).toBe('SPAN');
-    });
-
-    it('renders as different elements via the as prop', () => {
-        const { unmount } = render(<Text as="h1">Heading</Text>);
-        expect(screen.getByText('Heading').tagName).toBe('H1');
-        unmount();
-
-        const { unmount: unmount2 } = render(<Text as="p">Paragraph</Text>);
-        expect(screen.getByText('Paragraph').tagName).toBe('P');
-        unmount2();
-
-        render(<Text as="label">Label</Text>);
-        expect(screen.getByText('Label').tagName).toBe('LABEL');
-    });
-
-    it('applies the paragraphMedium kind class by default', () => {
-        render(<Text>Styled text</Text>);
-        const el = screen.getByText('Styled text');
-        expect(el.className).toContain('paragraphMedium');
-    });
-
-    it('applies a custom kind class', () => {
-        render(<Text kind="headingLarge">Big heading</Text>);
-        const el = screen.getByText('Big heading');
-        expect(el.className).toContain('headingLarge');
-    });
-
-    it('applies weight class when weight is provided', () => {
-        render(<Text weight="bold">Bold text</Text>);
-        const el = screen.getByText('Bold text');
-        expect(el.className).toContain('weight-bold');
-    });
-
-    it('applies fontStyle class when fontStyle is provided', () => {
-        render(<Text fontStyle="italic">Italic text</Text>);
-        const el = screen.getByText('Italic text');
-        expect(el.className).toContain('fontStyle-italic');
-    });
-
-    it('sets --text-color CSS variable when color is provided', () => {
-        render(<Text color="red">Red text</Text>);
-        const el = screen.getByText('Red text');
-        expect(el.style.getPropertyValue('--text-color')).toBe('red');
-    });
-
-    it('does not set style when no color is provided', () => {
-        render(<Text>No color</Text>);
-        const el = screen.getByText('No color');
-        expect(el.style.getPropertyValue('--text-color')).toBe('');
-    });
-
-    it('forwards className prop', () => {
-        render(<Text className="custom-class">Custom</Text>);
-        const el = screen.getByText('Custom');
-        expect(el.className).toContain('custom-class');
-    });
-
-    it('forwards additional HTML props', () => {
-        render(
-            <Text data-testid="text-element" id="my-text">
-                Props test
-            </Text>,
-        );
-        const el = screen.getByTestId('text-element');
-        expect(el.id).toBe('my-text');
-    });
-});

package/src/stories/text/Text.tsx

@@ -1,108 +0,0 @@
-import type { CSSColor } from '@ssh/csstypes';
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
-import { createElement, memo } from 'react';
-import type { LightTheme } from '../theme';
-import styles from './Text.module.scss';
-import typography from './Typography.module.css';
-
-export type TextElement =
-    | 'p'
-    | 'span'
-    | 'div'
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'label'
-    | 'legend'
-    | 'caption'
-    | 'small';
-export type GlobalCSSValues = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
-
-export type TextProps<T extends TextElement = TextElement> = {
-    /**
-     * The font class to use.
-     * @default paragraphMedium
-     */
-    kind?: keyof typeof LightTheme.typography.styles;
-
-    /**
-     * The HTML text tag to use.
-     * @default span
-     */
-    as?: T;
-
-    /**
-     * The font weight to apply.
-     */
-    weight?: keyof typeof LightTheme.typography.fontWeights;
-
-    /**
-     * The font style to apply.
-     */
-    fontStyle?: keyof typeof LightTheme.typography.fontStyles;
-
-    /**
-     * A color to apply.
-     */
-    color?: CSSColor;
-
-    /** The contents of the Text element. */
-    children: ReactNode;
-} & ComponentPropsWithoutRef<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" kind="headingLarge" weight="bold" fontStyle="italic">Hello World!</Text>
- * );
- * ```
- *
- * @example ```tsx
- * <Text as="h1" kind="headingLarge">Hello World!</Text>
- * ```
- * @constructor
- */
-export const Text = memo(
-    <T extends TextElement = TextElement>({
-        kind,
-        as,
-        weight,
-        fontStyle,
-        color,
-        children,
-        ...props
-    }: TextProps<T>): ReactElement =>
-        createElement(
-            as || 'span',
-            {
-                ...props,
-                className: clsx(
-                    styles.text,
-                    typography[kind || 'paragraphMedium'],
-                    weight && styles[`weight-${weight}`],
-                    fontStyle && styles[`fontStyle-${fontStyle}`],
-                    props?.className,
-                ),
-                ...(color
-                    ? {
-                          style: {
-                              '--text-color': color,
-                          },
-                      }
-                    : {}),
-            },
-            children,
-        ),
-);

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

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/nextjs-vite';
-import { createElement } from '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: 'Mia Dolan',
-        label: 'Name',
-        description: 'Type your full name here.',
-    },
-};
-
-export const WithCustomLabel: Story = {
-    args: {
-        placeholder: 'Mia Dolan',
-        label: createElement('span', {}, [createElement('b', null, 'Name'), createElement('i', null, ' (optional)')]),
-        'aria-label': 'Name (optional)',
-        description: createElement('span', null, [
-            createElement(
-                'b',
-                {
-                    style: {
-                        color: 'red',
-                    },
-                },
-                'My custom description',
-            ),
-        ]),
-    },
-};

package/src/stories/textarea/TextArea.test.tsx

@@ -1,147 +0,0 @@
-import { createRef } from 'react';
-import { render, screen } from '../../test/render';
-import { TextArea } from './TextArea';
-
-describe('TextArea', () => {
-    it('renders with a label', () => {
-        render(<TextArea label="Message" />);
-        expect(screen.getByLabelText('Message')).toBeInTheDocument();
-    });
-
-    it('renders a textarea element', () => {
-        render(<TextArea label="Bio" />);
-        const textarea = screen.getByLabelText('Bio');
-        expect(textarea.tagName).toBe('TEXTAREA');
-    });
-
-    it('allows typing into the textarea', async () => {
-        const { user } = render(<TextArea label="Notes" />);
-        const textarea = screen.getByLabelText('Notes');
-        await user.type(textarea, 'Hello world');
-        expect(textarea).toHaveValue('Hello world');
-    });
-
-    it('displays placeholder text', () => {
-        render(<TextArea label="Comment" placeholder="Write a comment..." />);
-        expect(screen.getByPlaceholderText('Write a comment...')).toBeInTheDocument();
-    });
-
-    it('defaults to 3 rows', () => {
-        render(<TextArea label="Default rows" />);
-        expect(screen.getByLabelText('Default rows')).toHaveAttribute('rows', '3');
-    });
-
-    it('accepts a custom rows value', () => {
-        render(<TextArea label="Custom rows" rows={6} />);
-        expect(screen.getByLabelText('Custom rows')).toHaveAttribute('rows', '6');
-    });
-
-    it('sets data-status to default when no status is provided', () => {
-        render(<TextArea label="Default status" />);
-        expect(screen.getByLabelText('Default status')).toHaveAttribute('data-status', 'default');
-    });
-
-    it('sets data-status to error', () => {
-        render(<TextArea label="Error" status="error" />);
-        expect(screen.getByLabelText('Error')).toHaveAttribute('data-status', 'error');
-    });
-
-    it('sets data-status to success', () => {
-        render(<TextArea label="Success" status="success" />);
-        expect(screen.getByLabelText('Success')).toHaveAttribute('data-status', 'success');
-    });
-
-    it('sets data-status to disabled when disabled', () => {
-        render(<TextArea label="Disabled" disabled />);
-        const textarea = screen.getByLabelText('Disabled');
-        expect(textarea).toHaveAttribute('data-status', 'disabled');
-        expect(textarea).toHaveAttribute('aria-disabled', 'true');
-        expect(textarea).toHaveAttribute('readonly');
-    });
-
-    it('overrides status with disabled when both are provided', () => {
-        render(<TextArea label="Both" status="error" disabled />);
-        expect(screen.getByLabelText('Both')).toHaveAttribute('data-status', 'disabled');
-    });
-
-    it('forwards ref to the textarea element', () => {
-        const ref = createRef<HTMLTextAreaElement>();
-        render(<TextArea label="Ref test" ref={ref} />);
-        expect(ref.current).toBeInstanceOf(HTMLTextAreaElement);
-        expect(ref.current).toBe(screen.getByLabelText('Ref test'));
-    });
-
-    it('renders a start enhancer', () => {
-        render(<TextArea label="With start" startEnhancer={<span data-testid="start-icon">S</span>} />);
-        expect(screen.getByTestId('start-icon')).toBeInTheDocument();
-    });
-
-    it('renders an end enhancer', () => {
-        render(<TextArea label="With end" endEnhancer={<span data-testid="end-icon">E</span>} />);
-        expect(screen.getByTestId('end-icon')).toBeInTheDocument();
-    });
-
-    it('forwards className to the textarea element', () => {
-        render(<TextArea label="Classy" className="my-custom-class" />);
-        expect(screen.getByLabelText('Classy')).toHaveClass('my-custom-class');
-    });
-
-    it('sets aria-describedby linking to the description', () => {
-        render(<TextArea label="Described" description="Helper text" />);
-        const textarea = screen.getByLabelText('Described');
-        const describedBy = textarea.getAttribute('aria-describedby');
-        expect(describedBy).toBeTruthy();
-        const descriptionEl = document.getElementById(describedBy!);
-        expect(descriptionEl).toBeInTheDocument();
-        expect(descriptionEl).toHaveTextContent('Helper text');
-    });
-
-    it('renders description text', () => {
-        render(<TextArea label="With desc" description="A helpful note" />);
-        expect(screen.getByText('A helpful note')).toBeInTheDocument();
-    });
-
-    it('hides label when hideLabel is true', () => {
-        render(<TextArea label="Hidden" hideLabel />);
-        expect(screen.getByText('Hidden')).toHaveClass('hidden');
-    });
-
-    it('calls onChange handler', async () => {
-        const handleChange = vi.fn();
-        const { user } = render(<TextArea label="Change" onChange={handleChange} />);
-        await user.type(screen.getByLabelText('Change'), 'x');
-        expect(handleChange).toHaveBeenCalled();
-    });
-
-    it('calls onFocus and onBlur handlers', async () => {
-        const handleFocus = vi.fn();
-        const handleBlur = vi.fn();
-        const { user } = render(<TextArea label="Focus" onFocus={handleFocus} onBlur={handleBlur} />);
-        await user.click(screen.getByLabelText('Focus'));
-        expect(handleFocus).toHaveBeenCalled();
-        await user.tab();
-        expect(handleBlur).toHaveBeenCalled();
-    });
-
-    it('uses aria-label prop when label is not a string', () => {
-        render(<TextArea label={<span>Complex</span>} aria-label="accessible label" />);
-        expect(screen.getByRole('textbox', { name: 'accessible label' })).toBeInTheDocument();
-    });
-
-    it('applies container override props', () => {
-        render(<TextArea label="Override" overrides={{ container: { 'data-testid': 'wrapper' } }} />);
-        expect(screen.getByTestId('wrapper')).toBeInTheDocument();
-    });
-
-    it('spreads additional HTML textarea props', () => {
-        render(<TextArea label="Extra" maxLength={500} />);
-        expect(screen.getByLabelText('Extra')).toHaveAttribute('maxlength', '500');
-    });
-
-    it('renders a function enhancer', () => {
-        render(
-            <TextArea label="Fn enhancer" endEnhancer={({ size }) => <span data-testid="fn-enhancer">{size}</span>} />,
-        );
-        expect(screen.getByTestId('fn-enhancer')).toBeInTheDocument();
-    });
-});

package/src/stories/textarea/TextArea.tsx

@@ -1,112 +0,0 @@
-import { clsx } from 'clsx';
-import type { ComponentPropsWithoutRef, ForwardedRef } from 'react';
-import { forwardRef, useId } from 'react';
-import { MemoizedEnhancer } from '../../helpers/renderEnhancer';
-import { Field } from '../field';
-import type { InputProps } from '../input';
-import styles from '../input/Input.module.scss';
-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 = forwardRef<HTMLTextAreaElement, InputProps & ComponentPropsWithoutRef<'textarea'>>(
-    (
-        {
-            label,
-            status,
-            type,
-            hideLabel,
-            description,
-            hideDescription,
-            descriptionPosition,
-            startEnhancer,
-            endEnhancer,
-            disabled,
-            overrides,
-            rows = 3,
-            ...props
-        },
-        ref: ForwardedRef<HTMLTextAreaElement>,
-    ) => {
-        const textareaID = useId();
-        return (
-            <Field
-                htmlFor={textareaID}
-                label={label}
-                hideLabel={hideLabel}
-                description={description}
-                hideDescription={hideDescription}
-                descriptionPosition={descriptionPosition}
-                disabled={disabled}
-                overrides={{
-                    container: overrides?.container,
-                    label: overrides?.label,
-                    description: overrides?.description,
-                }}
-            >
-                <div className={styles.inputContainer} data-status={disabled ? 'disabled' : status || 'default'}>
-                    {!!startEnhancer && (
-                        <div
-                            {...overrides?.startEnhancerContainer}
-                            className={clsx(styles.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.inputScaleWrapper}>
-                        <textarea
-                            {...props}
-                            id={textareaID}
-                            ref={ref}
-                            aria-label={typeof label === 'string' ? label : props['aria-label']}
-                            aria-describedby={`${textareaID}-description`}
-                            aria-disabled={disabled}
-                            readOnly={disabled}
-                            rows={rows}
-                            data-status={disabled ? 'disabled' : status || 'default'}
-                            className={clsx(props.className, styles.input)}
-                        />
-                    </div>
-                    {!!endEnhancer && (
-                        <div
-                            {...overrides?.endEnhancerContainer}
-                            className={clsx(styles.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>
-                    )}
-                </div>
-            </Field>
-        );
-    },
-);

package/src/stories/theme/global.scss

@@ -1,6 +0,0 @@
-@use 'tw-preflight.css';
-@use 'util.scss';
-
-.paris-container {
-    container-type: inline-size;
-}