feat: configure chromatic

Author: davejsdev

.github/workflows/ci.yml

@@ -30,3 +30,7 @@ jobs:
         run: pnpm run lint
       - name: Run Unit Tests
         run: pnpm test
+      - name: Run Storybook Tests
+        run: pnpm run build-storybook
+      - name: Run Chromatic
+        run: pnpm run chromatic

eslint.config.ts

@@ -55,8 +55,6 @@ export default defineConfig([
             'internal', // Internal modules (if you have path aliases)
             'parent', // Parent directory imports
             'sibling', // Same directory imports
-            'index', // Index file imports
-            'object', // Object-imports
           ],
           'newlines-between': 'always',
         },

package.json

@@ -15,7 +15,7 @@
     "test": "vitest",
     "new:component": "npx generate-react-cli component",
     "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build",
+    "build-storybook": "storybook build",
     "test:browser": "vitest --config=vitest.browser.config.ts",
     "test:ui": "vitest --ui",
     "format": "prettier --write .",
@@ -97,6 +97,7 @@
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/browser": "3.2.4",
     "@vitest/coverage-v8": "3.2.4",
+    "chromatic": "^13.1.4",
     "cspell": "^8.0.0",
     "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",

pnpm-lock.yaml

@@ -5,9 +5,11 @@ import type { ComponentProps } from 'react';
 
 import { cn } from '@/lib/utils';
 
-type Appearance = 'default' | 'primary' | 'secondary' | 'warning' | 'destructive' | 'link';
+export const Appearance = ['default', 'primary', 'secondary', 'warning', 'destructive', 'link'] as const;
+export type Appearance = (typeof Appearance)[number];
 
-type Size = 'small' | 'medium' | 'large';
+export const Size = ['small', 'medium', 'large'] as const;
+export type Size = (typeof Size)[number];
 
 export type ButtonProps = ComponentProps<'button'> & {
   /**

src/components/ui/Button/Button.test.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
+
+import TextArea from '.';
+
+const meta = {
+  title: 'Components/TextArea',
+  component: TextArea,
+  args: {
+    label: 'Text Area Label',
+    placeholder: 'Enter some text here…',
+    disabled: false,
+    required: false,
+  },
+  argTypes: {
+    label: {
+      name: 'Label',
+      control: 'text',
+      description: 'Label of the text area',
+    },
+    placeholder: {
+      name: 'Placeholder',
+      control: 'text',
+      description: 'Placeholder text of the text area',
+    },
+    disabled: {
+      name: 'Disabled',
+      control: 'boolean',
+      description: 'Disables the text area',
+    },
+    required: {
+      name: 'Required',
+      control: 'boolean',
+      description: 'Marks the text area as required',
+    },
+  },
+} as Meta<typeof TextArea>;
+
+export default meta;
+type Story = StoryObj<typeof TextArea>;
+
+export const Primary: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textArea = canvas.getByRole('textbox');
+    await userEvent.type(textArea, 'Hello, world!');
+    expect(textArea).toHaveValue('Hello, world!');
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textArea = canvas.getByRole('textbox');
+    expect(textArea).toBeDisabled();
+
+    await userEvent.type(textArea, 'Hello, world!');
+    expect(textArea).toHaveValue('');
+  },
+};
+
+export const WithCount: Story = {
+  args: {
+    maxLength: 100,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textArea = canvas.getByRole('textbox');
+    await userEvent.type(textArea, 'Hello, world!');
+    expect(textArea).toHaveValue('Hello, world!');
+
+    // The text area should be valid
+    expect(textArea).toHaveAttribute('aria-invalid', 'false');
+
+    // The text area should be invalid
+    await userEvent.type(
+      textArea,
+      'This text is too long and will surpass the max length and be invalid. It should trigger the invalid state.',
+    );
+    const charCount = canvas.getByTestId('length');
+    expect(charCount).toHaveTextContent('119');
+
+    expect(textArea).toHaveAttribute('aria-invalid', 'true');
+  },
+};

src/components/ui/Button/Button.tsx

@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+import { useMemo, useState, type ComponentProps } from 'react';
+
+import { getLength, isTooLong } from './utils';
+
+export type TextAreaProps = ComponentProps<'textarea'> & { label: string };
+
+const TextArea = ({ label, required, maxLength, ...props }: TextAreaProps) => {
+  const [value, setValue] = useState(props.value ?? '');
+  const tooLong = useMemo(() => isTooLong(value, maxLength), [value, maxLength]);
+  const length = useMemo(() => getLength(value), [value]);
+
+  return (
+    <label className="flex flex-col gap-1.5">
+      <span
+        className={clsx(
+          'inline-flex items-center gap-1 text-sm font-medium',
+          required && 'after:bg-accent-500 after:h-1.5 after:w-1.5 after:rounded-full',
+        )}
+      >
+        {label}
+      </span>
+
+      <textarea
+        className={clsx(
+          'invalid:bg-danger-50 focus:bg-primary-50 focus:ring-primary-600 w-full gap-2 rounded-md bg-white p-4 text-sm placeholder-slate-400 shadow-sm ring-1 ring-slate-500 ring-inset focus:ring-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-slate-50 dark:bg-slate-800 dark:placeholder-slate-300',
+          tooLong && 'ring-danger-500 dark:ring-danger-500 ring-2',
+        )}
+        {...props}
+        onChange={(e) => {
+          setValue(e.target.value);
+          if (typeof props.onChange === 'function') props.onChange(e);
+        }}
+        value={value}
+        required={required}
+        aria-invalid={tooLong}
+      />
+
+      {maxLength && (
+        <div className="gap-1.4 flex justify-end text-xs">
+          <p className={clsx(tooLong ? 'text-danger-500' : 'text-slate-600')}>
+            <span data-testid="length">{length}</span>/{maxLength}
+          </p>
+        </div>
+      )}
+    </label>
+  );
+};
+
+export default TextArea;

src/components/ui/TextArea/TextArea.stories.tsx

@@ -0,0 +1,2 @@
+export * from './TextArea';
+export { default } from './TextArea';

src/components/ui/TextArea/TextArea.tsx

@@ -0,0 +1,15 @@
+import { ComponentProps } from 'react';
+
+export const getLength = (value: ComponentProps<'textarea'>['value']): number => {
+  if (typeof value !== 'string') return 0;
+  return value.length;
+};
+
+export const isTooLong = (
+  value: ComponentProps<'textarea'>['value'],
+  maxLength: ComponentProps<'textarea'>['maxLength'],
+): boolean => {
+  if (typeof value !== 'string') return false;
+  if (!maxLength) return false;
+  return value.length > maxLength;
+};