@jordan-mace/chaser-design-system 1.2.2 → 1.2.4

package/src/components/Box/Box.stories.tsx

@@ -0,0 +1,183 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import Box from './Box';
+
+const meta: Meta<typeof Box> = {
+  title: 'Components/Box',
+  component: Box,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    as: {
+      control: 'select',
+      options: ['div', 'span', 'section', 'article', 'header', 'footer', 'main', 'aside', 'nav', 'button', 'a'],
+      description: 'HTML element to render as',
+    },
+    padding: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    paddingX: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    paddingY: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    margin: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    marginX: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    marginY: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    display: {
+      control: 'select',
+      options: ['none', 'flex', 'block', 'inline'],
+    },
+    flexDirection: {
+      control: 'select',
+      options: ['row', 'column'],
+    },
+    justifyContent: {
+      control: 'select',
+      options: ['stretch', 'flex-start', 'center', 'flex-end', 'space-around', 'space-between'],
+    },
+    alignItems: {
+      control: 'select',
+      options: ['stretch', 'flex-start', 'center', 'flex-end'],
+    },
+    gap: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    background: {
+      control: 'select',
+      options: [
+        'c1-50', 'c1-100', 'c1-200', 'c1-300', 'c1-400', 'c1-500', 'c1-600', 'c1-700', 'c1-800', 'c1-900',
+        'c2-50', 'c2-100', 'c2-200', 'c2-300', 'c2-400', 'c2-500', 'c2-600', 'c2-700', 'c2-800', 'c2-900',
+        'c3-50', 'c3-100', 'c3-200', 'c3-300', 'c3-400', 'c3-500', 'c3-600', 'c3-700', 'c3-800', 'c3-900',
+        'c4-50', 'c4-100', 'c4-200', 'c4-300', 'c4-400', 'c4-500', 'c4-600', 'c4-700', 'c4-800', 'c4-900',
+        'c5-50', 'c5-100', 'c5-200', 'c5-300', 'c5-400', 'c5-500', 'c5-600', 'c5-700', 'c5-800', 'c5-900',
+      ],
+    },
+    color: {
+      control: 'select',
+      options: [
+        'c1-50', 'c1-100', 'c1-200', 'c1-300', 'c1-400', 'c1-500', 'c1-600', 'c1-700', 'c1-800', 'c1-900',
+        'c2-50', 'c2-100', 'c2-200', 'c2-300', 'c2-400', 'c2-500', 'c2-600', 'c2-700', 'c2-800', 'c2-900',
+        'c3-50', 'c3-100', 'c3-200', 'c3-300', 'c3-400', 'c3-500', 'c3-600', 'c3-700', 'c3-800', 'c3-900',
+        'c4-50', 'c4-100', 'c4-200', 'c4-300', 'c4-400', 'c4-500', 'c4-600', 'c4-700', 'c4-800', 'c4-900',
+        'c5-50', 'c5-100', 'c5-200', 'c5-300', 'c5-400', 'c5-500', 'c5-600', 'c5-700', 'c5-800', 'c5-900',
+      ],
+    },
+    borderRadius: {
+      control: 'select',
+      options: ['none', 'small', 'medium', 'large'],
+    },
+    width: {
+      control: 'select',
+      options: ['auto', '100%', '50%', '25%'],
+    },
+    height: {
+      control: 'select',
+      options: ['auto', '100%', '50%', '25%'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Hello, I am a Box!',
+    padding: 'medium',
+    background: 'c1-100',
+  },
+};
+
+export const Polymorphic: Story = {
+  args: {
+    as: 'button',
+    children: 'I render as a button',
+    padding: 'medium',
+    background: 'c1-500',
+    color: 'c5-50',
+    borderRadius: 'medium',
+  },
+};
+
+export const FlexContainer: Story = {
+  args: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 'medium',
+    padding: 'large',
+    background: 'c2-100',
+    children: (
+      <>
+        <Box padding="medium" background="c1-200">Item 1</Box>
+        <Box padding="medium" background="c1-200">Item 2</Box>
+        <Box padding="medium" background="c1-200">Item 3</Box>
+      </>
+    ),
+  },
+};
+
+export const ResponsivePadding: Story = {
+  args: {
+    children: 'Responsive padding example',
+    padding: ['small', 'medium', 'large'],
+    background: 'c3-100',
+  },
+};
+
+export const SemanticElements: Story = {
+  args: {
+    as: 'article',
+    children: 'This is an article element',
+    padding: 'large',
+    background: 'c4-100',
+    borderRadius: 'large',
+  },
+};
+
+export const NestedBoxes: Story = {
+  render: () => (
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="medium"
+      padding="large"
+      background="c5-100"
+      borderRadius="large"
+    >
+      <Box padding="medium" background="c1-200" borderRadius="medium">
+        Nested Box 1
+      </Box>
+      <Box padding="medium" background="c2-200" borderRadius="medium">
+        Nested Box 2
+      </Box>
+      <Box
+        display="flex"
+        gap="small"
+        padding="medium"
+        background="c3-200"
+        borderRadius="medium"
+      >
+        <Box padding="small" background="c1-300">A</Box>
+        <Box padding="small" background="c1-300">B</Box>
+        <Box padding="small" background="c1-300">C</Box>
+      </Box>
+    </Box>
+  ),
+};

package/src/components/Box/Box.test.tsx

@@ -0,0 +1,63 @@
+import { render } from 'vitest-browser-react';
+import { describe, expect, it, vi } from 'vitest';
+import Box from './Box';
+
+describe('Box', () => {
+  it('renders as a div by default', async () => {
+    const { container } = await render(<Box data-testid="box">Content</Box>);
+    const box = container.querySelector('[data-testid="box"]');
+    expect(box?.tagName).toBe('DIV');
+    expect(box).toHaveTextContent('Content');
+  });
+
+  it('renders with different elements via as prop', async () => {
+    const { container, rerender } = await render(<Box as="span" data-testid="box">Span content</Box>);
+    expect(container.querySelector('[data-testid="box"]')?.tagName).toBe('SPAN');
+
+    await rerender(<Box as="section" data-testid="box">Section content</Box>);
+    expect(container.querySelector('[data-testid="box"]')?.tagName).toBe('SECTION');
+
+    await rerender(<Box as="button" data-testid="box">Button content</Box>);
+    expect(container.querySelector('[data-testid="box"]')?.tagName).toBe('BUTTON');
+  });
+
+  it('applies custom className', async () => {
+    const { container } = await render(<Box className="custom-class" data-testid="box">Content</Box>);
+    const box = container.querySelector('[data-testid="box"]');
+    expect(box?.className).toContain('custom-class');
+  });
+
+  it('passes through data attributes', async () => {
+    const { container } = await render(<Box data-testid="my-box" aria-label="test box">Content</Box>);
+    const box = container.querySelector('[data-testid="my-box"]');
+    expect(box).toHaveAttribute('aria-label', 'test box');
+  });
+
+  it('forwards click events', async () => {
+    const handleClick = vi.fn();
+    const { container } = await render(<Box onClick={handleClick} data-testid="box">Click me</Box>);
+    const box = container.querySelector('[data-testid="box"]');
+    box?.click();
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders children correctly', async () => {
+    const { container } = await render(
+      <Box data-testid="box">
+        <span data-testid="child">Child element</span>
+      </Box>
+    );
+    expect(container.querySelector('[data-testid="child"]')).toBeInTheDocument();
+  });
+
+  it('renders as anchor element with href', async () => {
+    const { container } = await render(
+      <Box as="a" href="https://example.com" data-testid="link">
+        Link text
+      </Box>
+    );
+    const link = container.querySelector('[data-testid="link"]');
+    expect(link?.tagName).toBe('A');
+    expect(link).toHaveAttribute('href', 'https://example.com');
+  });
+});

package/src/components/Box/Box.tsx

@@ -0,0 +1,72 @@
+import clsx from 'clsx';
+import { sprinkles, type Sprinkles } from '../../styles/sprinkles.css';
+import { reset } from './reset.css';
+import React, { forwardRef } from 'react';
+
+type BoxProps = Sprinkles & {
+  as?: React.ElementType;
+  children?: React.ReactNode;
+  className?: string;
+  [key: string]: unknown;
+};
+
+const Box = forwardRef<HTMLElement, BoxProps>((props, ref) => {
+  const { as: Component = 'div', className, children, ...rest } = props;
+
+  const sprinkleProps: Sprinkles = {};
+  const otherProps: Record<string, unknown> = { ref };
+
+  const sprinkleKeys = new Set([
+    'display',
+    'width',
+    'height',
+    'flexDirection',
+    'justifyContent',
+    'alignItems',
+    'paddingTop',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingRight',
+    'marginLeft',
+    'marginRight',
+    'marginTop',
+    'marginBottom',
+    'borderLeft',
+    'borderRight',
+    'borderTop',
+    'borderBottom',
+    'borderRadius',
+    'gap',
+    'padding',
+    'border',
+    'paddingX',
+    'paddingY',
+    'marginX',
+    'marginY',
+    'placeItems',
+    'color',
+    'background',
+  ]);
+
+  Object.entries(rest).forEach(([key, value]) => {
+    if (sprinkleKeys.has(key)) {
+      (sprinkleProps as Record<string, unknown>)[key] = value;
+    } else {
+      otherProps[key] = value;
+    }
+  });
+
+  return React.createElement(
+    Component as React.ElementType,
+    {
+      className: clsx(reset, sprinkles(sprinkleProps), className as string),
+      ...otherProps,
+    },
+    children as React.ReactNode,
+  );
+});
+
+Box.displayName = 'Box';
+
+export default Box;
+export type { BoxProps };

package/src/components/Box/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Box';
+export type { BoxProps } from './Box';

package/src/components/Box/reset.css.ts

@@ -0,0 +1,16 @@
+import { style } from '@vanilla-extract/css';
+import { componentsLayer } from '../../styles/layers.css';
+
+export const reset = style({
+  '@layer': {
+    [componentsLayer]: {
+      margin: 0,
+      padding: 0,
+      border: 0,
+      boxSizing: 'border-box',
+      fontSize: '100%',
+      font: 'inherit',
+      verticalAlign: 'baseline',
+    },
+  },
+});

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Breadcrumb } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Breadcrumb',
+  component: Breadcrumb,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const items = [
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Category', href: '/products/category' },
+  { label: 'Item', current: true },
+];
+
+export const Default: Story = {
+  args: {
+    items,
+  },
+};
+
+export const CustomSeparator: Story = {
+  args: {
+    items,
+    separator: '>',
+  },
+};
+
+export const LongBreadcrumb: Story = {
+  args: {
+    items: [
+      { label: 'Home', href: '/' },
+      { label: 'Products', href: '/products' },
+      { label: 'Electronics', href: '/products/electronics' },
+      { label: 'Computers', href: '/products/electronics/computers' },
+      { label: 'Laptops', href: '/products/electronics/computers/laptops' },
+      { label: 'Gaming Laptops', current: true },
+    ],
+  },
+};
+
+export const SingleItem: Story = {
+  args: {
+    items: [{ label: 'Home', current: true }],
+  },
+};

package/src/components/Breadcrumb/Breadcrumb.test.tsx

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Breadcrumb from './Breadcrumb';
+import React from 'react';
+
+describe('Breadcrumb', () => {
+  const items = [
+    { label: 'Home', href: '/' },
+    { label: 'Products', href: '/products' },
+    { label: 'Category', href: '/products/category' },
+    { label: 'Item', current: true },
+  ];
+
+  it('renders breadcrumb correctly', async () => {
+    const { container } = await render(<Breadcrumb items={items} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders breadcrumb with custom separator correctly', async () => {
+    const { container } = await render(
+      <Breadcrumb items={items} separator=">" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders single breadcrumb correctly', async () => {
+    const singleItem = [{ label: 'Home', current: true }];
+    const { container } = await render(<Breadcrumb items={singleItem} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders long breadcrumb correctly', async () => {
+    const longItems = [
+      { label: 'Home', href: '/' },
+      { label: 'Category 1', href: '/cat1' },
+      { label: 'Category 2', href: '/cat2' },
+      { label: 'Category 3', href: '/cat3' },
+      { label: 'Category 4', href: '/cat4' },
+      { label: 'Current Page', current: true },
+    ];
+    const { container } = await render(<Breadcrumb items={longItems} />);
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,102 @@
+import clsx from 'clsx';
+import React from 'react';
+import {
+  breadcrumb,
+  breadcrumbList,
+  breadcrumbItem,
+  breadcrumbLink,
+  breadcrumbSeparator,
+  breadcrumbCurrent,
+} from './styles.css';
+import Box from '../Box';
+
+type BreadcrumbItem = {
+  label: string;
+  href?: string;
+  current?: boolean;
+};
+
+type BreadcrumbProps = {
+  items: BreadcrumbItem[];
+  className?: string;
+  separator?: string;
+};
+
+const Breadcrumb = ({
+  items,
+  className,
+  separator = '/',
+}: BreadcrumbProps) => {
+  return (
+    <Box
+      as="nav"
+      aria-label="Breadcrumb"
+      className={clsx(breadcrumb, className)}
+      display="flex"
+      alignItems="center"
+      gap="small"
+      fontSize="14px"
+    >
+      <Box
+        as="ol"
+        className={breadcrumbList}
+        display="flex"
+        alignItems="center"
+        style={{ listStyle: 'none' }}
+        margin="none"
+        padding="none"
+        gap="small"
+      >
+        {items.map((item, index) => (
+          <Box
+            as="li"
+            key={index}
+            className={breadcrumbItem}
+            display="flex"
+            alignItems="center"
+          >
+            {item.href && !item.current ? (
+              <Box
+                as="a"
+                href={item.href}
+                className={breadcrumbLink}
+                display="inline"
+                alignItems="center"
+                color="c5-600"
+                fontSize="14px"
+                textDecoration="none"
+              >
+                {item.label}
+              </Box>
+            ) : (
+              <Box
+                as="span"
+                className={breadcrumbCurrent}
+                display="inline"
+                alignItems="center"
+                color="c5-700"
+                fontSize="14px"
+                fontWeight="500"
+              >
+                {item.label}
+              </Box>
+            )}
+            {index < items.length - 1 && (
+              <Box
+                as="span"
+                className={breadcrumbSeparator}
+                color="c5-500"
+                fontSize="12px"
+                style={{ userSelect: 'none' }}
+              >
+                {separator}
+              </Box>
+            )}
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default Breadcrumb;

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1 @@
+export { default as Breadcrumb } from './Breadcrumb';

package/src/components/Breadcrumb/styles.css.ts

@@ -0,0 +1,56 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const breadcrumb = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  fontFamily: vars.fontFamily.body,
+  fontSize: '14px',
+});
+
+export const breadcrumbList = style({
+  display: 'flex',
+  alignItems: 'center',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
+  gap: '4px',
+});
+
+export const breadcrumbItem = style({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const breadcrumbLink = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  color: vars.colors.textSecondary,
+  textDecoration: 'none',
+  fontSize: '14px',
+  ':hover': {
+    color: vars.colors.buttonBackgroundPrimary,
+    textDecoration: 'underline',
+  },
+  ':focus-visible': {
+    outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+    outlineOffset: '2px',
+    borderRadius: '4px',
+  },
+});
+
+export const breadcrumbSeparator = style({
+  color: vars.colors.textDisabled,
+  fontSize: '12px',
+  userSelect: 'none',
+});
+
+export const breadcrumbCurrent = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  color: vars.colors.textPrimary,
+  fontSize: '14px',
+  fontWeight: '500',
+});

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { fn } from 'storybook/test';
+
+import { Button } from '.';
+import React from 'react';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  // argTypes: {
+  //   backgroundColor: { control: 'color' },
+  // },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100vw',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    variant: 'primary',
+  },
+  render: (args) => (
+    <Button {...args}>Button</Button>
+  ),
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+  },
+  render: (args) => (
+    <Button {...args}>Button</Button>
+  ),
+};

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Button from './Button';
+import React from 'react';
+
+describe('Button', () => {
+  it('renders primary button correctly', async () => {
+    const { container } = await render(
+      <Button variant={'primary'} label={'Hello'} />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('handles onClick', async () => {
+    let clicked = false;
+    const handleClick = () => {
+      clicked = true;
+    };
+    const { getByText } = await render(
+      <Button variant={'primary'} label={'Click me'} onClick={handleClick} />,
+    );
+    const button = getByText('Click me');
+    await button.click();
+    expect(clicked).toBe(true);
+  });
+});