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

package/src/components/List/List.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { list } from './styles.css';
+import Box from '../Box';
+
+const List = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Box as="ul" className={list}>
+      {children}
+    </Box>
+  );
+};
+
+export default List;

package/src/components/List/ListItem.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { listItem } from './styles.css';
+import Box from '../Box';
+
+const ListItem = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Box as="li" className={listItem}>
+      {children}
+    </Box>
+  );
+};
+
+export default ListItem;

package/src/components/List/index.ts

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

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

@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+
+export const list = style({
+  listStyle: 'none',
+  padding: 0,
+  margin: 0,
+});
+
+export const listItem = style({
+  padding: '0.5rem 0',
+  borderBottom: `1px solid ${vars.colors.listBorder}`,
+});

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Button } from '../Button';
+import { Modal } from '.';
+import React, { useState } from 'react';
+import { fn } from 'storybook/test';
+
+const meta = {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  args: {
+    onClose: fn(),
+  },
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Small: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div style={{ padding: '2rem' }}>
+        <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Small Modal"
+          size="small"
+        >
+          <p>This is a small modal with a width of 400px.</p>
+        </Modal>
+      </div>
+    );
+  },
+};
+
+export const Medium: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div style={{ padding: '2rem' }}>
+        <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Medium Modal"
+          size="medium"
+        >
+          <p>This is a medium modal with a width of 600px.</p>
+        </Modal>
+      </div>
+    );
+  },
+};
+
+export const Large: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div style={{ padding: '2rem' }}>
+        <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Large Modal"
+          size="large"
+        >
+          <p>This is a large modal with a width of 800px.</p>
+        </Modal>
+      </div>
+    );
+  },
+};
+
+export const FullWidth: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div style={{ padding: '2rem' }}>
+        <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Full Width Modal"
+          size="full"
+        >
+          <p>This is a full-width modal with a width of 95vw.</p>
+        </Modal>
+      </div>
+    );
+  },
+};
+
+export const WithFooter: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div style={{ padding: '2rem' }}>
+        <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Modal with Footer"
+          size="medium"
+          footer={
+            <>
+              <Button
+                label="Cancel"
+                variant="secondary"
+                onClick={() => setIsOpen(false)}
+              />
+              <Button label="Confirm" onClick={() => setIsOpen(false)} />
+            </>
+          }
+        >
+          <p>This modal has a footer with action buttons.</p>
+        </Modal>
+      </div>
+    );
+  },
+};
+
+export const NoTitle: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div style={{ padding: '2rem' }}>
+        <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} size="small">
+          <p>This modal has no title or close button.</p>
+          <Button
+            label="Close"
+            variant="secondary"
+            onClick={() => setIsOpen(false)}
+          />
+        </Modal>
+      </div>
+    );
+  },
+};
+
+export const LongContent: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div style={{ padding: '2rem' }}>
+        <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Modal with Long Content"
+          size="medium"
+        >
+          <p>This modal demonstrates how content is handled when it exceeds the viewport height.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
+          <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
+        </Modal>
+      </div>
+    );
+  },
+};
+
+export const NoCloseButton: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div style={{ padding: '2rem' }}>
+        <Button label="Open Modal" onClick={() => setIsOpen(true)} />
+        <Modal
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          title="Modal Without Close Button"
+          size="small"
+          showCloseButton={false}
+        >
+          <p>This modal has a title but no close button in the header.</p>
+          <p>You can close it by clicking the backdrop or pressing Escape.</p>
+          <Button
+            label="Close"
+            variant="secondary"
+            onClick={() => setIsOpen(false)}
+          />
+        </Modal>
+      </div>
+    );
+  },
+};

package/src/components/Modal/Modal.test.tsx

@@ -0,0 +1,168 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Modal from './Modal';
+import React from 'react';
+
+describe('Modal', () => {
+  it('renders small modal correctly', async () => {
+    const { container } = await render(
+      <Modal isOpen onClose={() => {}} title="Small Modal" size="small">
+        <p>Modal content</p>
+      </Modal>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders medium modal correctly', async () => {
+    const { container } = await render(
+      <Modal isOpen onClose={() => {}} title="Medium Modal" size="medium">
+        <p>Modal content</p>
+      </Modal>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders large modal correctly', async () => {
+    const { container } = await render(
+      <Modal isOpen onClose={() => {}} title="Large Modal" size="large">
+        <p>Modal content</p>
+      </Modal>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders full-width modal correctly', async () => {
+    const { container } = await render(
+      <Modal isOpen onClose={() => {}} title="Full Modal" size="full">
+        <p>Modal content</p>
+      </Modal>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders modal without title', async () => {
+    const { container } = await render(
+      <Modal isOpen onClose={() => {}} size="small">
+        <p>Modal content</p>
+      </Modal>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders modal with footer', async () => {
+    const { container } = await render(
+      <Modal
+        isOpen
+        onClose={() => {}}
+        title="Modal with Footer"
+        size="small"
+        footer={<div>Footer content</div>}
+      >
+        <p>Modal content</p>
+      </Modal>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders modal without close button', async () => {
+    const { container } = await render(
+      <Modal
+        isOpen
+        onClose={() => {}}
+        title="Modal Without Close Button"
+        size="small"
+        showCloseButton={false}
+      >
+        <p>Modal content</p>
+      </Modal>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('handles close button click', async () => {
+    let closed = false;
+    const handleClose = () => {
+      closed = true;
+    };
+    const { getByLabelText, unmount } = await render(
+      <Modal isOpen onClose={handleClose} title="Test Modal" size="small">
+        <p>Modal content</p>
+      </Modal>,
+    );
+    const closeButton = getByLabelText('Close modal');
+    await closeButton.click();
+    expect(closed).toBe(true);
+    await unmount();
+  });
+
+  it('handles backdrop click to close', async () => {
+    let closed = false;
+    const handleClose = () => {
+      closed = true;
+    };
+    const { container } = await render(
+      <Modal isOpen onClose={handleClose} title="Test Modal" size="small">
+        <p>Modal content</p>
+      </Modal>,
+    );
+    const dialog = container.querySelector('dialog');
+    if (dialog) {
+      await dialog.click();
+    }
+    expect(closed).toBe(true);
+  });
+
+  it('does not handle content click as close', async () => {
+    let closed = false;
+    const handleClose = () => {
+      closed = true;
+    };
+    const { container } = await render(
+      <Modal isOpen onClose={handleClose} title="Test Modal" size="small">
+        <p>Modal content</p>
+      </Modal>,
+    );
+    const content = container.querySelector('p');
+    if (content) {
+      await content.click();
+    }
+    expect(closed).toBe(false);
+  });
+
+  it('renders dialog element with proper attributes', async () => {
+    const { getByRole } = await render(
+      <Modal isOpen onClose={() => {}} title="Test Modal" size="small">
+        <p>Modal content</p>
+      </Modal>,
+    );
+    const dialog = getByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+  });
+
+  it('displays title correctly', async () => {
+    const { container } = await render(
+      <Modal isOpen onClose={() => {}} title="My Modal Title" size="small">
+        <p>Modal content</p>
+      </Modal>,
+    );
+    const titleElement = container.querySelector('h2');
+    expect(titleElement).toBeInTheDocument();
+    expect(titleElement).toHaveTextContent('My Modal Title');
+  });
+
+  it('displays footer content', async () => {
+    const { getByText } = await render(
+      <Modal
+        isOpen
+        onClose={() => {}}
+        title="Test Modal"
+        size="small"
+        footer={<div>Footer Action</div>}
+      >
+        <p>Modal content</p>
+      </Modal>,
+    );
+    const footer = getByText('Footer Action');
+    expect(footer).toBeInTheDocument();
+  });
+});

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,109 @@
+import clsx from 'clsx';
+import {
+  modal,
+  modalVariants,
+  modalHeader,
+  modalTitle,
+  modalCloseButton,
+  modalBody,
+  modalFooter,
+} from './styles.css';
+import React, { useEffect, useRef } from 'react';
+import Box from '../Box';
+
+export type ModalSize = 'small' | 'medium' | 'large' | 'full';
+
+export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  size?: ModalSize;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  showCloseButton?: boolean;
+}
+
+interface DialogMethods {
+  showModal: () => void;
+  close: () => void;
+  addEventListener: (event: string, handler: () => void) => void;
+  removeEventListener: (event: string, handler: () => void) => void;
+  classList: {
+    add: (className: string) => void;
+    remove: (className: string) => void;
+  };
+}
+
+const Modal = ({
+  isOpen,
+  onClose,
+  title,
+  size = 'medium',
+  children,
+  footer,
+  showCloseButton = true,
+  ...props
+}: ModalProps) => {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current as unknown as DialogMethods;
+    if (!dialog) return;
+
+    if (isOpen) {
+      dialog.showModal();
+      dialog.classList.add('open');
+    } else {
+      dialog.close();
+      dialog.classList.remove('open');
+    }
+
+    const handleClose = () => {
+      onClose();
+    };
+
+    dialog.addEventListener('close', handleClose);
+
+    return () => {
+      dialog.removeEventListener('close', handleClose);
+    };
+  }, [isOpen, onClose]);
+
+  return (
+    <Box
+      as="dialog"
+      ref={dialogRef}
+      className={clsx(modal, modalVariants[size])}
+      onClick={(e: React.MouseEvent<HTMLDialogElement>) => {
+        // Close when clicking the backdrop
+        if (e.target === dialogRef.current) {
+          onClose();
+        }
+      }}
+      {...props}
+    >
+      {title && (
+        <Box as="div" className={modalHeader}>
+          <Box as="h2" className={modalTitle}>{title}</Box>
+          {showCloseButton && (
+            <Box
+              as="button"
+              className={modalCloseButton}
+              onClick={onClose}
+              aria-label="Close modal"
+              type="button"
+            >
+              ×
+            </Box>
+          )}
+        </Box>
+      )}
+
+      <Box as="div" className={modalBody}>{children}</Box>
+
+      {footer && <Box as="div" className={modalFooter}>{footer}</Box>}
+    </Box>
+  );
+};
+
+export default Modal;

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { default as Modal } from './Modal';
+export type { ModalProps, ModalSize } from './Modal';

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

@@ -0,0 +1,99 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const modalVariants = styleVariants({
+  small: {
+    maxWidth: '400px',
+  },
+  medium: {
+    maxWidth: '600px',
+  },
+  large: {
+    maxWidth: '800px',
+  },
+  full: {
+    maxWidth: '95vw',
+  },
+});
+
+export const modal = styleWithLayer({
+  background: vars.colors.backgroundDefault,
+  borderRadius: '0.75rem',
+  boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+  border: '1px solid var(--modal-border, transparent)',
+  color: vars.colors.textPrimary,
+  fontFamily: vars.fontFamily.body,
+  maxWidth: '90vw',
+  maxHeight: '90vh',
+  flexDirection: 'column',
+  overflow: 'hidden',
+  selectors: {
+    '&:not([open])': {
+      display: 'none',
+    },
+    '[open] &': {
+      display: 'flex',
+    },
+    '&::backdrop': {
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+  },
+});
+
+export const modalHeader = styleWithLayer({
+  padding: '1.25rem',
+  borderBottom: `1px solid ${vars.colors.borderMuted}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '1rem',
+});
+
+export const modalTitle = styleWithLayer({
+  fontFamily: vars.fontFamily.heading,
+  fontSize: '1.25rem',
+  fontWeight: '600',
+  color: vars.colors.textPrimary,
+  margin: 0,
+});
+
+export const modalCloseButton = styleWithLayer({
+  background: 'none',
+  border: 'none',
+  padding: '0.5rem',
+  cursor: 'pointer',
+  borderRadius: '0.375rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: vars.colors.textSecondary,
+  fontSize: '1.5rem',
+  lineHeight: '1',
+  transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
+  selectors: {
+    '&:hover': {
+      backgroundColor: vars.colors.borderMuted,
+      color: vars.colors.textPrimary,
+    },
+    '&:focus-visible': {
+      outline: '2px solid var(--modal-focus-ring, currentColor)',
+      outlineOffset: '2px',
+    },
+  },
+});
+
+export const modalBody = styleWithLayer({
+  padding: '1.25rem',
+  overflowY: 'auto',
+  flex: 1,
+});
+
+export const modalFooter = styleWithLayer({
+  padding: '1.25rem',
+  borderTop: `1px solid ${vars.colors.borderMuted}`,
+  display: 'flex',
+  gap: '0.75rem',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+});

package/src/components/Navbar/Navbar.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { fn } from 'storybook/test';
+
+import { Navbar, NavbarItem } from './';
+import React from 'react';
+import { P } from '../Text';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Navbar',
+  component: Navbar,
+  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' },
+  // },
+  // 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
+} satisfies Meta<typeof Navbar>;
+
+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: {
+    children: (
+      <>
+        <NavbarItem>
+          <P>Website</P>
+        </NavbarItem>
+        <NavbarItem>
+          <P>Home</P>
+        </NavbarItem>
+        <NavbarItem>
+          <P>About</P>
+        </NavbarItem>
+        <NavbarItem>
+          <P>Contact</P>
+        </NavbarItem>
+      </>
+    ),
+  },
+};