@douglasneuroinformatics/libui 2.5.3 → 2.6.1

package/README.md

@@ -48,7 +48,7 @@ pnpm install @douglasneuroinformatics/libui
 const baseConfig = require('@douglasneuroinformatics/libui/tailwind.config.cjs');
 
 /** @type {import('tailwindcss').Config} */
-module.exports {
+module.exports = {
   content: [...baseConfig.content, './src/**/*.{js,ts,jsx,tsx}'],
   presets: [baseConfig]
 };

package/dist/components/Form/NumberField/NumberFieldRadio.d.ts

@@ -5,5 +5,5 @@ import type { BaseFieldComponentProps } from '../types.js';
 export type NumberFieldRadioProps = Simplify<BaseFieldComponentProps<number> & Extract<NumberFormField, {
     options: object;
 }>>;
-export declare const NumberFieldRadio: ({ description, error, label, name, options, readOnly, setValue, value }: NumberFieldRadioProps) => React.JSX.Element;
+export declare const NumberFieldRadio: ({ description, disableAutoPrefix, error, label, name, options, readOnly, setValue, value }: NumberFieldRadioProps) => React.JSX.Element;
 //# sourceMappingURL=NumberFieldRadio.d.ts.map

package/dist/components/Form/NumberField/NumberFieldRadio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldRadio.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAC1C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAChF,CAAC;AAEF,eAAO,MAAM,gBAAgB,4EAS1B,qBAAqB,sBAiCvB,CAAC"}
+{"version":3,"file":"NumberFieldRadio.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldRadio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAO1C,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAC1C,uBAAuB,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAChF,CAAC;AAEF,eAAO,MAAM,gBAAgB,+FAU1B,qBAAqB,sBAwCvB,CAAC"}

package/dist/components/Form/NumberField/NumberFieldRadio.js

@@ -3,7 +3,7 @@ import { cn } from '../../../utils.js';
 import { Label } from '../../Label/Label.js';
 import { RadioGroup } from '../../RadioGroup/RadioGroup.js';
 import { FieldGroup } from '../FieldGroup/FieldGroup.js';
-export const NumberFieldRadio = ({ description, error, label, name, options, readOnly, setValue, value }) => {
+export const NumberFieldRadio = ({ description, disableAutoPrefix, error, label, name, options, readOnly, setValue, value }) => {
     const optionsCount = Object.keys(options).length;
     return (React.createElement(FieldGroup, null,
         React.createElement(FieldGroup.Row, null,
@@ -12,8 +12,11 @@ export const NumberFieldRadio = ({ description, error, label, name, options, rea
         React.createElement(RadioGroup, { className: cn('flex', optionsCount > 5 ? 'flex-col' : 'flex-col @3xl:flex-row @3xl:items-center @3xl:justify-between'), name: name, value: value?.toString() ?? '', onValueChange: (value) => setValue(parseInt(value)) }, Object.keys(options)
             .map((val) => parseInt(val))
             .toSorted((a, b) => a - b)
-            .map((val) => (React.createElement("div", { className: "flex items-center gap-2", key: val },
-            React.createElement(RadioGroup.Item, { disabled: readOnly, id: `${name}-${val}`, value: val.toString() }),
-            React.createElement(Label, { "aria-disabled": readOnly, className: "font-normal text-muted-foreground", htmlFor: `${name}-${val}` }, `${val} - ${options[val]}`))))),
+            .map((val) => {
+            const text = (disableAutoPrefix ? '' : `${val} - `) + options[val];
+            return (React.createElement("div", { className: "flex items-center gap-2", key: val },
+                React.createElement(RadioGroup.Item, { disabled: readOnly, id: `${name}-${val}`, value: val.toString() }),
+                React.createElement(Label, { "aria-disabled": readOnly, className: "font-normal text-muted-foreground", htmlFor: `${name}-${val}` }, text)));
+        })),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/dist/components/Form/NumberField/NumberFieldSelect.d.ts

@@ -5,5 +5,5 @@ import { type BaseFieldComponentProps } from '../types.js';
 export type NumberFieldSelectProps<T extends number = number> = Simplify<BaseFieldComponentProps<T> & Extract<NumberFormField<T>, {
     options: object;
 }>>;
-export declare const NumberFieldSelect: <T extends number = number>({ description, error, label, name, options, readOnly, setValue, value }: NumberFieldSelectProps<T>) => React.JSX.Element;
+export declare const NumberFieldSelect: <T extends number = number>({ description, disableAutoPrefix, error, label, name, options, readOnly, setValue, value }: NumberFieldSelectProps<T>) => React.JSX.Element;
 //# sourceMappingURL=NumberFieldSelect.d.ts.map

package/dist/components/Form/NumberField/NumberFieldSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAK1C,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CACtE,uBAAuB,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAC9E,CAAC;AAEF,eAAO,MAAM,iBAAiB,uGAS3B,uBAAuB,CAAC,CAAC,sBAuB3B,CAAC"}
+{"version":3,"file":"NumberFieldSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/NumberField/NumberFieldSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAK1C,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAE3D,MAAM,MAAM,sBAAsB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI,QAAQ,CACtE,uBAAuB,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAC9E,CAAC;AAEF,eAAO,MAAM,iBAAiB,0HAU3B,uBAAuB,CAAC,CAAC,sBA0B3B,CAAC"}

package/dist/components/Form/NumberField/NumberFieldSelect.js

@@ -3,7 +3,7 @@ import { Label } from '../../Label/Label.js';
 import { Select } from '../../Select/Select.js';
 import { FieldGroup } from '../FieldGroup/FieldGroup.js';
 import {} from '../types.js';
-export const NumberFieldSelect = ({ description, error, label, name, options, readOnly, setValue, value }) => {
+export const NumberFieldSelect = ({ description, disableAutoPrefix, error, label, name, options, readOnly, setValue, value }) => {
     return (React.createElement(FieldGroup, null,
         React.createElement(FieldGroup.Row, null,
             React.createElement(Label, null, label),
@@ -11,6 +11,10 @@ export const NumberFieldSelect = ({ description, error, label, name, options, re
         React.createElement(Select, { name: name, value: value?.toString() ?? '', onValueChange: (value) => setValue(parseFloat(value)) },
             React.createElement(Select.Trigger, { "data-cy": `${name}-select-trigger`, "data-testid": `${name}-select-trigger`, disabled: readOnly },
                 React.createElement(Select.Value, null)),
-            React.createElement(Select.Content, { "data-cy": `${name}-select-content`, "data-testid": `${name}-select-content` }, Object.keys(options).map((option) => (React.createElement(Select.Item, { key: option, value: option }, `${option} - ${options[option]}`))))),
+            React.createElement(Select.Content, { "data-cy": `${name}-select-content`, "data-testid": `${name}-select-content` }, Object.keys(options).map((option) => {
+                // Option needs to be type number (this was a design flaw), but is actually always coerced to string anyways
+                const text = (disableAutoPrefix ? '' : `${option} - `) + options[option];
+                return (React.createElement(Select.Item, { key: option, value: option }, text));
+            }))),
         React.createElement(FieldGroup.Error, { error: error })));
 };

package/dist/i18n.js

@@ -6,7 +6,7 @@ import { initReactI18next } from 'react-i18next';
 import libui from './translations/libui.json';
 export const supportedLngs = ['en', 'fr'];
 export function transformTranslations(translations, locale) {
-    if (!isPlainObject) {
+    if (!isPlainObject(translations)) {
         throw new Error('Invalid format of translations: must be plain object');
     }
     const result = {};

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@douglasneuroinformatics/libui",
   "type": "module",
-  "version": "2.5.3",
+  "version": "2.6.1",
+  "packageManager": "pnpm@9.3.0",
   "description": "Generic UI components for DNP projects, built using React and TailwindCSS",
   "author": {
     "name": "Douglas Neuroinformatics",
@@ -49,13 +50,24 @@
     "/tailwind.config.cjs",
     "/tailwind.config.d.cts"
   ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -b tsconfig.build.json && cp -r src/styles dist",
+    "format": "prettier --write src",
+    "format:translations": "find src/translations -name '*.json' -exec pnpm exec sort-json {} \\;",
+    "lint": "tsc && eslint --fix src",
+    "prepare": "husky",
+    "storybook": "storybook dev --no-open -p 6006",
+    "storybook:build": "storybook build",
+    "test": "vitest",
+    "test:coverage": "vitest --coverage"
+  },
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@douglasneuroinformatics/libjs": "^0.3.1",
-    "@douglasneuroinformatics/libui-form-types": "^0.7.0",
+    "@douglasneuroinformatics/libui-form-types": "^0.8.0",
     "@headlessui/tailwindcss": "^0.2.1",
     "@heroicons/react": "^2.1.3",
     "@radix-ui/react-accordion": "^1.1.2",
@@ -137,7 +149,7 @@
     "postcss": "^8.4.38",
     "prettier": "^3.3.1",
     "prettier-plugin-tailwindcss": "^0.6.2",
-    "semantic-release": "^24.0.0",
+    "semantic-release": "^23.0.8",
     "sort-json": "^2.0.1",
     "storybook": "^8.1.6",
     "storybook-react-i18next": "^3.1.1",
@@ -145,15 +157,5 @@
     "typescript": "~5.4.5",
     "vite": "5.2.13",
     "vitest": "^1.6.0"
-  },
-  "scripts": {
-    "build": "rm -rf dist && tsc -b tsconfig.build.json && cp -r src/styles dist",
-    "format": "prettier --write src",
-    "format:translations": "find src/translations -name '*.json' -exec pnpm exec sort-json {} \\;",
-    "lint": "tsc && eslint --fix src",
-    "storybook": "storybook dev --no-open -p 6006",
-    "storybook:build": "storybook build",
-    "test": "vitest",
-    "test:coverage": "vitest --coverage"
   }
-}
+}

package/src/components/Accordion/Accordion.spec.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Accordion } from './Accordion.js';
+
+const TEST_ID = 'accordion';
+
+const TestAccordion = () => (
+  <Accordion collapsible type="single">
+    <Accordion.Item value="item-1">
+      <Accordion.Trigger>T1</Accordion.Trigger>
+      <Accordion.Content>C1</Accordion.Content>
+    </Accordion.Item>
+  </Accordion>
+);
+
+describe('Accordion', () => {
+  it('should render', () => {
+    render(<TestAccordion />);
+    expect(screen.getByTestId(TEST_ID)).toBeDefined();
+  });
+  it('should open and close an item', () => {
+    render(<TestAccordion />);
+
+    const toggle = screen.getByText('T1');
+    expect(toggle).toBeInTheDocument();
+    expect(() => screen.getByText('C1')).toThrow();
+
+    fireEvent.click(toggle);
+    expect(screen.getByText('C1')).toBeInTheDocument();
+
+    fireEvent.click(toggle);
+    expect(() => screen.getByText('C1')).toThrow();
+  });
+});

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Accordion } from './Accordion.js';
+
+type Story = StoryObj<typeof Accordion>;
+
+export default { component: Accordion, tags: ['autodocs'] } as Meta<typeof Accordion>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Accordion.Item value="item-1">
+          <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
+          <Accordion.Content>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-2">
+          <Accordion.Trigger>Is it styled?</Accordion.Trigger>
+          <Accordion.Content>
+            Yes. It comes with default styles that matches the other components&apos; aesthetic.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item value="item-3">
+          <Accordion.Trigger>Is it animated?</Accordion.Trigger>
+          <Accordion.Content>Yes. It is animated by default, but you can disable it if you prefer.</Accordion.Content>
+        </Accordion.Item>
+      </>
+    ),
+    collapsible: true,
+    id: 'accordion',
+    type: 'single'
+  }
+};

package/src/components/ActionDropdown/ActionDropdown.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ActionDropdown } from './ActionDropdown.js';
+
+type Story = StoryObj<typeof ActionDropdown>;
+
+export default { component: ActionDropdown } satisfies Meta<typeof ActionDropdown>;
+
+export const Default: Story = {
+  args: {
+    onSelection(option) {
+      alert(option);
+    },
+    options: ['Option 1', 'Option 2'],
+    title: 'Action Dropdown'
+  }
+};

package/src/components/AlertDialog/AlertDialog.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from '../Button/Button.js';
+import { AlertDialog } from './AlertDialog.js';
+
+type Story = StoryObj<typeof AlertDialog>;
+
+export default { component: AlertDialog } as Meta<typeof AlertDialog>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <React.Fragment>
+        <AlertDialog.Trigger asChild>
+          <Button variant="outline">Show Dialog</Button>
+        </AlertDialog.Trigger>
+        <AlertDialog.Content>
+          <AlertDialog.Header>
+            <AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+            <AlertDialog.Description>
+              This action cannot be undone. This will permanently delete your account and remove your data from our
+              servers.
+            </AlertDialog.Description>
+          </AlertDialog.Header>
+          <AlertDialog.Footer>
+            <AlertDialog.Action>Continue</AlertDialog.Action>
+            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+          </AlertDialog.Footer>
+        </AlertDialog.Content>
+      </React.Fragment>
+    )
+  }
+};

package/src/components/ArrowToggle/ArrowToggle.spec.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ArrowToggle, type ArrowToggleProps } from './ArrowToggle.js';
+
+const TestArrowToggle = ({ onClick, ...props }: Omit<ArrowToggleProps, 'isToggled'>) => {
+  const [isToggled, setIsToggled] = useState(false);
+  return (
+    <ArrowToggle
+      isToggled={isToggled}
+      onClick={(event) => {
+        setIsToggled(!isToggled);
+        onClick?.(event);
+      }}
+      {...props}
+    />
+  );
+};
+
+describe('ArrowToggle', () => {
+  it('renders with default props', () => {
+    render(<TestArrowToggle position="up" rotation={90} />);
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders with a custom class', () => {
+    render(<TestArrowToggle className="custom-class" position="down" rotation={90} />);
+    expect(screen.getByRole('button')).toHaveClass('custom-class');
+  });
+
+  it('toggles rotation on click', () => {
+    render(<TestArrowToggle position="right" rotation={90} />);
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(screen.getByTestId('arrow-up-icon')).toHaveStyle('transform: rotate(180deg)');
+    fireEvent.click(button);
+    expect(screen.getByTestId('arrow-up-icon')).toHaveStyle('transform: rotate(90deg)');
+  });
+
+  it('handles custom onClick', () => {
+    const handleClick = vi.fn();
+    render(<TestArrowToggle position="up" rotation={90} onClick={handleClick} />);
+    fireEvent.click(screen.getByRole('button'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/ArrowToggle/ArrowToggle.stories.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ArrowToggle } from './ArrowToggle.js';
+
+type Story = StoryObj<typeof ArrowToggle>;
+
+export default { component: ArrowToggle, tags: ['autodocs'] } as Meta<typeof ArrowToggle>;
+
+export const UpToDown: Story = {
+  decorators: [
+    (Story) => {
+      const [isToggled, setIsToggled] = useState(false);
+      return <Story args={{ isToggled, onClick: () => setIsToggled(!isToggled), position: 'up', rotation: 180 }} />;
+    }
+  ]
+};
+
+export const LeftToDown: Story = {
+  decorators: [
+    (Story) => {
+      const [isToggled, setIsToggled] = useState(false);
+      return <Story args={{ isToggled, onClick: () => setIsToggled(!isToggled), position: 'left', rotation: -90 }} />;
+    }
+  ]
+};

package/src/components/Avatar/Avatar.spec.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Avatar } from './Avatar.js';
+
+const TEST_ID = 'avatar';
+
+const TestAvatar = (props: { [key: string]: any }) => (
+  <Avatar {...props}>
+    <Avatar.Image alt="@shadcn" src="https://github.com/shadcn.png" />
+    <Avatar.Fallback>CN</Avatar.Fallback>
+  </Avatar>
+);
+
+describe('Avatar', () => {
+  it('should render', () => {
+    render(<TestAvatar />);
+    expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+  });
+  it('should contain a custom class name', () => {
+    render(<Avatar className="foo" />);
+    expect(screen.getByTestId(TEST_ID)).toHaveClass('foo');
+  });
+});

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Avatar } from './Avatar.js';
+
+type Story = StoryObj<typeof Avatar>;
+
+export default { component: Avatar, tags: ['autodocs'] } as Meta<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <>
+        <Avatar.Image alt="@shadcn" src="https://github.com/shadcn.png" />
+        <Avatar.Fallback>CN</Avatar.Fallback>
+      </>
+    )
+  }
+};

package/src/components/Badge/Badge.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Badge } from './Badge.js';
+
+const TEST_ID = 'badge';
+
+describe('Badge', () => {
+  it('should render', () => {
+    render(<Badge />);
+    expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+  });
+  it('should contain a custom class name', () => {
+    render(<Badge className="foo" />);
+    expect(screen.getByTestId(TEST_ID)).toHaveClass('foo');
+  });
+});

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Badge } from './Badge.js';
+
+type Story = StoryObj<typeof Badge>;
+
+export default { component: Badge, tags: ['autodocs'] } as Meta<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+    children: 'Badge'
+  }
+};

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
+import { Breadcrumb } from './Breadcrumb.js';
+
+type Story = StoryObj<typeof Breadcrumb>;
+
+export default { component: Breadcrumb } as Meta<typeof Breadcrumb>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <Breadcrumb.List>
+        <Breadcrumb.Item>
+          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <DropdownMenu>
+            <DropdownMenu.Trigger className="flex items-center gap-1">
+              <Breadcrumb.Ellipsis className="h-4 w-4" />
+              <span className="sr-only">Toggle menu</span>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="start">
+              <DropdownMenu.Item>Documentation</DropdownMenu.Item>
+              <DropdownMenu.Item>Themes</DropdownMenu.Item>
+              <DropdownMenu.Item>GitHub</DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
+        </Breadcrumb.Item>
+        <Breadcrumb.Separator />
+        <Breadcrumb.Item>
+          <Breadcrumb.Page>Breadcrumb.</Breadcrumb.Page>
+        </Breadcrumb.Item>
+      </Breadcrumb.List>
+    )
+  }
+};

package/src/components/Button/Button.spec.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Button } from './Button.js';
+
+describe('Button', () => {
+  it('should render', () => {
+    render(<Button>My Button</Button>);
+    expect(screen.getByText('My Button')).toBeInTheDocument();
+  });
+  it('should contain a custom class name', () => {
+    render(<Button className="foo">My Button</Button>);
+    expect(screen.getByText('My Button')).toHaveClass('foo');
+  });
+  it('should render a custom class name within a child element, if asChild is set to true', () => {
+    render(
+      <Button asChild className="foo">
+        <a data-testid="link" href="https://google.com">
+          My Link
+        </a>
+      </Button>
+    );
+    expect(screen.getByTestId('link')).toHaveClass('foo');
+  });
+});

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { DownloadIcon } from 'lucide-react';
+
+import { Button } from './Button.js';
+
+type Story = StoryObj<typeof Button>;
+
+export default {
+  args: {
+    asChild: false,
+    size: 'md'
+  },
+  component: Button,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Primary Button',
+    variant: 'primary'
+  }
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Button',
+    variant: 'secondary'
+  }
+};
+
+export const Danger: Story = {
+  args: {
+    children: 'Danger Button',
+    variant: 'danger'
+  }
+};
+
+export const Outline: Story = {
+  args: {
+    children: 'Outline Button',
+    variant: 'outline'
+  }
+};
+
+export const Icon: Story = {
+  args: {
+    children: <DownloadIcon />,
+    size: 'icon',
+    variant: 'outline'
+  }
+};
+
+export const AsChild: Story = {
+  args: {
+    asChild: true,
+    children: <a href="https://google.com">My Link</a>
+  }
+};

package/src/components/Card/Card.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Card } from './Card.js';
+
+const TEST_ID = 'card';
+
+describe('Card', () => {
+  it('should render', () => {
+    render(<Card />);
+    expect(screen.getByTestId(TEST_ID)).toBeInTheDocument();
+  });
+  it('should contain a custom class name', () => {
+    render(<Card className="foo" />);
+    expect(screen.getByTestId(TEST_ID)).toHaveClass('foo');
+  });
+});