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

package/src/components/Container/Container.test.tsx

@@ -0,0 +1,42 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Container from './Container';
+import React from 'react';
+
+describe('Container', () => {
+  it('renders with small size', async () => {
+    const { container } = await render(
+      <Container size="sm">
+        <div>Small container content</div>
+      </Container>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with medium size', async () => {
+    const { container } = await render(
+      <Container size="md">
+        <div>Medium container content</div>
+      </Container>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with large size', async () => {
+    const { container } = await render(
+      <Container size="lg">
+        <div>Large container content</div>
+      </Container>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with full width', async () => {
+    const { container } = await render(
+      <Container size="full" centerContent={false}>
+        <div>Full width content</div>
+      </Container>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Container/Container.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+import Box from '../Box';
+
+export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface ContainerProps {
+  size?: ContainerSize;
+  centerContent?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const sizeMap: Record<ContainerSize, string> = {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  full: '100%',
+};
+
+const Container = forwardRef<HTMLElement, ContainerProps>(
+  ({ size = 'lg', centerContent = true, children, className, style }, ref) => {
+    const sizeValue: ContainerSize = size;
+
+    const containerStyle: React.CSSProperties = {
+      maxWidth: sizeMap[sizeValue],
+      marginLeft: centerContent ? 'auto' : undefined,
+      marginRight: centerContent ? 'auto' : undefined,
+    };
+
+    return (
+      <Box
+        ref={ref}
+        width="100%"
+        className={className}
+        style={{ ...containerStyle, ...style }}
+      >
+        {children}
+      </Box>
+    );
+  }
+);
+
+Container.displayName = 'Container';
+
+export default Container;

package/src/components/Container/index.ts

@@ -0,0 +1,2 @@
+export { default as Container } from './Container';
+export type { ContainerProps, ContainerSize } from './Container';

package/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Divider } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Divider',
+  component: Divider,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'flex-start',
+          width: '100%',
+          maxWidth: '600px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    orientation: 'horizontal',
+    size: 'medium',
+  },
+  render: () => (
+    <div>
+      <p>Content above divider</p>
+      <Divider />
+      <p>Content below divider</p>
+    </div>
+  ),
+};
+
+export const Small: Story = {
+  render: () => (
+    <div>
+      <p>Content above divider</p>
+      <Divider size="small" />
+      <p>Content below divider</p>
+    </div>
+  ),
+};
+
+export const Medium: Story = {
+  render: () => (
+    <div>
+      <p>Content above divider</p>
+      <Divider size="medium" />
+      <p>Content below divider</p>
+    </div>
+  ),
+};
+
+export const Large: Story = {
+  render: () => (
+    <div>
+      <p>Content above divider</p>
+      <Divider size="large" />
+      <p>Content below divider</p>
+    </div>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <span>Left content</span>
+      <Divider orientation="vertical" />
+      <span>Right content</span>
+    </div>
+  ),
+};
+
+export const VerticalSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+      <span>Small:</span>
+      <Divider orientation="vertical" size="small" />
+      <span>Content</span>
+    </div>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <div>
+      <p>Section 1</p>
+      <Divider />
+      <p>Section 2</p>
+      <Divider size="small" />
+      <p>Section 3</p>
+      <Divider size="large" />
+      <p>Section 4</p>
+    </div>
+  ),
+};
+
+export const WithText: Story = {
+  render: () => (
+    <div>
+      <h3>Section Title</h3>
+      <Divider />
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+      <Divider />
+      <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    </div>
+  ),
+};

package/src/components/Divider/Divider.test.tsx

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Divider from './Divider';
+import React from 'react';
+
+describe('Divider', () => {
+  it('renders horizontal divider correctly', async () => {
+    const { container } = await render(<Divider />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders small divider correctly', async () => {
+    const { container } = await render(<Divider size="small" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders medium divider correctly', async () => {
+    const { container } = await render(<Divider size="medium" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders large divider correctly', async () => {
+    const { container } = await render(<Divider size="large" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders vertical divider correctly', async () => {
+    const { container } = await render(
+      <div style={{ display: 'flex', height: '100px' }}>
+        <Divider orientation="vertical" />
+      </div>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders hr element with proper attributes', async () => {
+    const { container } = await render(<Divider />);
+    const divider = container.querySelector('hr');
+    expect(divider).toBeInTheDocument();
+    expect(divider.tagName).toBe('HR');
+  });
+
+  it('applies orientation correctly', async () => {
+    const { getByRole } = await render(<Divider orientation="vertical" />);
+    const divider = getByRole('separator');
+    expect(divider).toHaveAttribute('aria-orientation', 'vertical');
+  });
+
+  it('renders with custom className', async () => {
+    const { getByRole } = await render(
+      <Divider className="custom-divider" />,
+    );
+    const divider = getByRole('separator');
+    expect(divider).toHaveClass('custom-divider');
+  });
+});

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,40 @@
+import clsx from 'clsx';
+import {
+  divider,
+  dividerOrientations,
+  dividerSizes,
+  dividerVerticalSizes,
+} from './styles.css';
+import React from 'react';
+import Box from '../Box';
+
+export type DividerOrientation = 'horizontal' | 'vertical';
+export type DividerSize = 'small' | 'medium' | 'large';
+
+export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
+  orientation?: DividerOrientation;
+  size?: DividerSize;
+}
+
+const Divider = ({
+  orientation = 'horizontal',
+  size = 'medium',
+  ...props
+}: DividerProps) => {
+  return (
+    <Box
+      as="hr"
+      className={clsx(
+        divider,
+        dividerOrientations[orientation],
+        orientation === 'vertical' ? dividerVerticalSizes[size] : dividerSizes[size],
+        props.className,
+      )}
+      role="separator"
+      aria-orientation={orientation}
+      {...props}
+    />
+  );
+};
+
+export default Divider;

package/src/components/Divider/index.ts

@@ -0,0 +1,2 @@
+export { default as Divider } from './Divider';
+export type { DividerProps, DividerOrientation, DividerSize } from './Divider';

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

@@ -0,0 +1,45 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const dividerOrientations = styleVariants({
+  horizontal: {
+    width: '100%',
+    height: '1px',
+    borderTop: `1px solid ${vars.colors.borderMuted}`,
+  },
+  vertical: {
+    width: '1px',
+    height: '100%',
+    borderLeft: `1px solid ${vars.colors.borderMuted}`,
+  },
+});
+
+export const dividerSizes = styleVariants({
+  small: {
+    margin: '0.5rem 0',
+  },
+  medium: {
+    margin: '1rem 0',
+  },
+  large: {
+    margin: '1.5rem 0',
+  },
+});
+
+export const divider = styleWithLayer({
+  border: 'none',
+  flexShrink: 0,
+});
+
+export const dividerVerticalSizes = styleVariants({
+  small: {
+    margin: '0 0.5rem',
+  },
+  medium: {
+    margin: '0 1rem',
+  },
+  large: {
+    margin: '0 1.5rem',
+  },
+});

package/src/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+
+import { Drawer } from '.';
+
+const meta = {
+  title: 'Components/Drawer',
+  component: Drawer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  args: { onClose: fn() },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Left: Story = {
+  args: {
+    isOpen: true,
+    position: 'left',
+    title: 'Left Drawer',
+    children: 'This drawer slides in from the left side.',
+  },
+};
+
+export const Right: Story = {
+  args: {
+    isOpen: true,
+    position: 'right',
+    title: 'Right Drawer',
+    children: 'This drawer slides in from the right side.',
+  },
+};
+
+export const Top: Story = {
+  args: {
+    isOpen: true,
+    position: 'top',
+    title: 'Top Drawer',
+    children: 'This drawer slides in from the top.',
+  },
+};
+
+export const Bottom: Story = {
+  args: {
+    isOpen: true,
+    position: 'bottom',
+    title: 'Bottom Drawer',
+    children: 'This drawer slides in from the bottom.',
+  },
+};
+
+export const WithFooter: Story = {
+  args: {
+    isOpen: true,
+    position: 'right',
+    title: 'Drawer with Footer',
+    children: 'This drawer has a footer with action buttons.',
+    footer: (
+      <>
+        <button>Cancel</button>
+        <button>Save</button>
+      </>
+    ),
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    isOpen: true,
+    position: 'right',
+    size: 'small',
+    title: 'Small Drawer',
+    children: 'This is a small drawer.',
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    isOpen: true,
+    position: 'right',
+    size: 'large',
+    title: 'Large Drawer',
+    children: 'This is a large drawer.',
+  },
+};
+
+export const FullSize: Story = {
+  args: {
+    isOpen: true,
+    position: 'right',
+    size: 'full',
+    title: 'Full Drawer',
+    children: 'This drawer takes up the full width.',
+  },
+};

package/src/components/Drawer/Drawer.test.tsx

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Drawer from './Drawer';
+import React from 'react';
+
+describe('Drawer', () => {
+  it('renders correctly from left position', async () => {
+    const { container } = await render(
+      <Drawer isOpen={true} onClose={() => {}} position="left" title="Left Drawer">
+        Content
+      </Drawer>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly from right position', async () => {
+    const { container } = await render(
+      <Drawer isOpen={true} onClose={() => {}} position="right" title="Right Drawer">
+        Content
+      </Drawer>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly from top position', async () => {
+    const { container } = await render(
+      <Drawer isOpen={true} onClose={() => {}} position="top" title="Top Drawer">
+        Content
+      </Drawer>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly from bottom position', async () => {
+    const { container } = await render(
+      <Drawer isOpen={true} onClose={() => {}} position="bottom" title="Bottom Drawer">
+        Content
+      </Drawer>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('does not render when closed', async () => {
+    const { container } = await render(
+      <Drawer isOpen={false} onClose={() => {}} title="Closed Drawer">
+        Content
+      </Drawer>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,148 @@
+import clsx from 'clsx';
+import React, { useEffect } from 'react';
+import {
+  drawer,
+  drawerPositionVariants,
+  drawerOverlay,
+  drawerHeader,
+  drawerTitle,
+  drawerCloseButton,
+  drawerBody,
+  drawerFooter,
+} from './styles.css';
+import Box from '../Box';
+
+export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerSize = 'small' | 'medium' | 'large' | 'full';
+
+const sizeMap: Record<DrawerPosition, Record<DrawerSize, string>> = {
+  left: {
+    small: '250px',
+    medium: '350px',
+    large: '450px',
+    full: '100vw',
+  },
+  right: {
+    small: '250px',
+    medium: '350px',
+    large: '450px',
+    full: '100vw',
+  },
+  top: {
+    small: '200px',
+    medium: '300px',
+    large: '400px',
+    full: '100vh',
+  },
+  bottom: {
+    small: '200px',
+    medium: '300px',
+    large: '400px',
+    full: '100vh',
+  },
+};
+
+export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  position?: DrawerPosition;
+  size?: DrawerSize;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  showCloseButton?: boolean;
+  closeOnOverlayClick?: boolean;
+}
+
+const Drawer = ({
+  isOpen,
+  onClose,
+  title,
+  position = 'right',
+  size = 'medium',
+  children,
+  footer,
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  className,
+  ...props
+}: DrawerProps) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const dimensionStyle: React.CSSProperties = {
+    ['--drawer-width' as string]: ['left', 'right'].includes(position)
+      ? sizeMap[position][size]
+      : undefined,
+    ['--drawer-height' as string]: ['top', 'bottom'].includes(position)
+      ? sizeMap[position][size]
+      : undefined,
+  };
+
+  return (
+    <>
+      <Box
+        className={drawerOverlay}
+        onClick={closeOnOverlayClick ? onClose : undefined}
+        aria-hidden="true"
+      />
+      <Box
+        as="div"
+        role="dialog"
+        aria-modal="true"
+        className={clsx(drawer, drawerPositionVariants[position], className)}
+        style={dimensionStyle}
+        {...props}
+      >
+        {title && (
+          <Box as="div" className={drawerHeader}>
+            <Box as="h2" className={drawerTitle}>
+              {title}
+            </Box>
+            {showCloseButton && (
+              <Box
+                as="button"
+                className={drawerCloseButton}
+                onClick={onClose}
+                aria-label="Close drawer"
+                type="button"
+              >
+                ×
+              </Box>
+            )}
+          </Box>
+        )}
+
+        <Box as="div" className={drawerBody}>
+          {children}
+        </Box>
+
+        {footer && <Box as="div" className={drawerFooter}>{footer}</Box>}
+      </Box>
+    </>
+  );
+};
+
+export default Drawer;

package/src/components/Drawer/index.ts

@@ -0,0 +1,2 @@
+export { default as Drawer } from './Drawer';
+export type { DrawerProps, DrawerPosition, DrawerSize } from './Drawer';