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

package/src/components/Form/Form.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Form from './Form';
+import React from 'react';
+import { P } from '../Text';
+import { Input } from '../Input';
+import { Button } from '../Button';
+
+describe('Form', () => {
+  it('renders form correctly', async () => {
+    const { container } = await render(
+      <Form>
+        <P>Test Form</P>
+        <Input label="Name" id="name" />
+        <Input label="Email" id="email" />
+        <Input label="Message" id="message" />
+      </Form>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('can submit', async () => {
+    let submitted = false;
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      submitted = true;
+    };
+    const { getByText } = await render(
+      <Form onSubmit={handleSubmit}>
+        <P>Test Form</P>
+        <Input label="Name" id="name" />
+        <Input label="Email" id="email" />
+        <Input label="Message" id="message" />
+        <Button type="submit" label="Submit" variant="primary" />
+      </Form>,
+    );
+    const button = getByText('Submit');
+    await button.click();
+    expect(submitted).toBe(true);
+  });
+});

package/src/components/Form/Form.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import React from 'react';
+import { formStyle } from './styles.css';
+import Box from '../Box';
+
+type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {
+  className?: string;
+  children?: React.ReactNode;
+};
+
+const Form = (props: FormProps) => {
+  return (
+    <Box
+      as="form"
+      gap="medium"
+      paddingX="large"
+      className={clsx(
+        formStyle,
+        props.className,
+      )}
+      {...props}
+    >
+      {props.children}
+    </Box>
+  );
+};
+
+export default Form;

package/src/components/Form/FormInput.tsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx';
+import React from 'react';
+import { formInputStyle } from './styles.css';
+import { Input } from '../..';
+import { InputProps } from '../Input/Input';
+import Box from '../Box';
+
+type FormInputProps = React.InputHTMLAttributes<HTMLInputElement> & InputProps;
+
+const FormInput = (props: FormInputProps) => {
+  return (
+    <Box as={Input} padding="small" className={clsx(formInputStyle, props.className)} label={props.label} {...props} />
+  );
+};
+
+export default FormInput;

package/src/components/Form/index.ts

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

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

@@ -0,0 +1,13 @@
+import { styleWithLayer } from '../../styles/utils';
+
+export const formStyle = styleWithLayer({
+  display: 'grid',
+  gridTemplateRows: 'min-content 1fr min-content',
+});
+
+export const formInputStyle = styleWithLayer({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});

package/src/components/Grid/Grid.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+import { Grid } from '.';
+import { Box } from '../Box';
+
+const meta = {
+  title: 'Components/Grid',
+  component: Grid,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Grid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DemoBox = ({ children }: { children: React.ReactNode }) => (
+  <Box 
+    padding="medium" 
+    background="c2-200" 
+    style={{ textAlign: 'center' }}
+  >
+    {children}
+  </Box>
+);
+
+export const TwoColumns: Story = {
+  args: {
+    columns: 2,
+    gap: 'medium',
+    children: (
+      <>
+        <DemoBox>Item 1</DemoBox>
+        <DemoBox>Item 2</DemoBox>
+        <DemoBox>Item 3</DemoBox>
+        <DemoBox>Item 4</DemoBox>
+      </>
+    ),
+  },
+};
+
+export const ThreeColumns: Story = {
+  args: {
+    columns: 3,
+    gap: 'medium',
+    children: (
+      <>
+        <DemoBox>Item 1</DemoBox>
+        <DemoBox>Item 2</DemoBox>
+        <DemoBox>Item 3</DemoBox>
+      </>
+    ),
+  },
+};
+
+export const FourColumns: Story = {
+  args: {
+    columns: 4,
+    gap: 'small',
+    children: (
+      <>
+        <DemoBox>1</DemoBox>
+        <DemoBox>2</DemoBox>
+        <DemoBox>3</DemoBox>
+        <DemoBox>4</DemoBox>
+      </>
+    ),
+  },
+};
+
+export const AutoFit: Story = {
+  args: {
+    minChildWidth: '120px',
+    gap: 'medium',
+    children: (
+      <>
+        <DemoBox>Auto 1</DemoBox>
+        <DemoBox>Auto 2</DemoBox>
+        <DemoBox>Auto 3</DemoBox>
+        <DemoBox>Auto 4</DemoBox>
+        <DemoBox>Auto 5</DemoBox>
+      </>
+    ),
+  },
+};
+
+export const DifferentGaps: Story = {
+  args: {
+    columns: 3,
+    children: (
+      <>
+        <Grid columns={3} gap="small">
+          <DemoBox>Small</DemoBox>
+          <DemoBox>Gap</DemoBox>
+          <DemoBox>Grid</DemoBox>
+        </Grid>
+        <Grid columns={3} gap="medium" style={{ marginTop: '1rem' }}>
+          <DemoBox>Medium</DemoBox>
+          <DemoBox>Gap</DemoBox>
+          <DemoBox>Grid</DemoBox>
+        </Grid>
+        <Grid columns={3} gap="large" style={{ marginTop: '1rem' }}>
+          <DemoBox>Large</DemoBox>
+          <DemoBox>Gap</DemoBox>
+          <DemoBox>Grid</DemoBox>
+        </Grid>
+      </>
+    ),
+  },
+};
+
+export const TwelveColumns: Story = {
+  args: {
+    columns: 12,
+    gap: 'small',
+    children: (
+      <>
+        <DemoBox>1</DemoBox>
+        <DemoBox>2</DemoBox>
+        <DemoBox>3</DemoBox>
+        <DemoBox>4</DemoBox>
+        <DemoBox>5</DemoBox>
+        <DemoBox>6</DemoBox>
+        <DemoBox>7</DemoBox>
+        <DemoBox>8</DemoBox>
+        <DemoBox>9</DemoBox>
+        <DemoBox>10</DemoBox>
+        <DemoBox>11</DemoBox>
+        <DemoBox>12</DemoBox>
+      </>
+    ),
+  },
+};

package/src/components/Grid/Grid.test.tsx

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Grid from './Grid';
+import React from 'react';
+
+describe('Grid', () => {
+  it('renders with 2 columns', async () => {
+    const { container } = await render(
+      <Grid columns={2} gap="medium">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+        <div>Item 4</div>
+      </Grid>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with 3 columns', async () => {
+    const { container } = await render(
+      <Grid columns={3} gap="small">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </Grid>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with auto-fit min width', async () => {
+    const { container } = await render(
+      <Grid minChildWidth="150px" gap="large">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+        <div>Item 4</div>
+      </Grid>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,48 @@
+import React, { forwardRef } from 'react';
+import Box from '../Box';
+
+export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
+export type GridGap = 'none' | 'small' | 'medium' | 'large';
+
+export interface GridProps {
+  columns?: GridColumns;
+  gap?: GridGap;
+  minChildWidth?: string;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const gapMap: Record<GridGap, string> = {
+  none: '0',
+  small: '0.5rem',
+  medium: '1rem',
+  large: '2rem',
+};
+
+const Grid = forwardRef<HTMLElement, GridProps>(
+  ({ columns, gap = 'medium', minChildWidth, children, className, style }, ref) => {
+    const gapValue: GridGap = gap;
+
+    const gridStyle: React.CSSProperties = {
+      display: 'grid',
+      gap: gapMap[gapValue],
+    };
+
+    if (minChildWidth) {
+      gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${minChildWidth}, 1fr))`;
+    } else if (columns) {
+      gridStyle.gridTemplateColumns = `repeat(${columns}, 1fr)`;
+    }
+
+    return (
+      <Box ref={ref} className={className} style={{ ...gridStyle, ...style }}>
+        {children}
+      </Box>
+    );
+  }
+);
+
+Grid.displayName = 'Grid';
+
+export default Grid;

package/src/components/Grid/index.ts

@@ -0,0 +1,2 @@
+export { default as Grid } from './Grid';
+export type { GridProps, GridColumns, GridGap } from './Grid';

package/src/components/Icon/Icon.tsx

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import React from 'react';
+import { icon } from './styles.css';
+import Box from '../Box';
+
+type IconProps = {
+  name?: string;
+  children?: React.ReactNode;
+  className?: string;
+  color?: string;
+};
+
+const IconComponent = ({ name, children, className, color }: IconProps) => {
+  const iconMap: Record<string, string> = {
+    check: '✓',
+    error: '✗',
+    warning: '⚠',
+    info: 'i',
+    success: '✓',
+    close: '×',
+  };
+
+  const displayContent = children || (name ? iconMap[name] : undefined);
+
+  if (!displayContent) {
+    return null;
+  }
+
+  return (
+    <Box
+      as="span"
+      className={clsx(icon, className)}
+      style={{ color }}
+      aria-hidden="true"
+    >
+      {displayContent}
+    </Box>
+  );
+};
+
+IconComponent.displayName = 'Icon';
+
+export default IconComponent;

package/src/components/Icon/index.ts

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

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

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const icon = styleWithLayer({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '16px',
+  lineHeight: '1',
+  userSelect: 'none',
+});

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { fn } from 'storybook/test';
+import React from 'react';
+
+import { Input } from '.';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Input',
+  component: Input,
+  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
+  args: { onClick: fn() },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const WithLabel: Story = {
+  args: {
+    label: 'Username',
+  },
+};
+
+export const WithoutLabel: Story = {
+  args: {},
+};

package/src/components/Input/Input.test.tsx

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Input from './Input';
+import React from 'react';
+
+describe('Input', () => {
+  it('renders correctly with label', async () => {
+    const { container } = await render(<Input label={'Hello'} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly without label', async () => {
+    const { container } = await render(<Input />);
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Input/Input.tsx

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import React from 'react';
+import { inputStyle, label } from './styles.css';
+import { text } from '../Text/styles.css';
+import Box from '../Box';
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  label?: string;
+  fullWidth?: boolean;
+};
+
+const Input = (props: InputProps) => {
+  return (
+    <Box
+      display="flex"
+      flexDirection={{ mobile: 'column', tablet: 'row' }}
+      gap="small"
+    >
+      {props.label && (
+        <Box
+          as="label"
+          className={clsx(
+            text,
+            label,
+          )}
+          marginX={{ mobile: 'auto', tablet: 'none' }}
+          marginY={{ mobile: 'none', tablet: 'auto' }}
+          htmlFor={props.id}
+        >
+          {props.label}
+        </Box>
+      )}
+      <Box
+        as="input"
+        className={clsx(inputStyle, props.className)}
+        width={props.fullWidth ? '100%' : undefined}
+        {...props}
+      />
+    </Box>
+  );
+};
+
+export default Input;

package/src/components/Input/index.ts

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

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

@@ -0,0 +1,10 @@
+import { styleWithLayer } from '../../styles/utils';
+
+export const inputStyle = styleWithLayer({
+  padding: '0.5rem 1rem',
+  borderRadius: '0.5rem',
+});
+
+export const label = styleWithLayer({
+  paddingRight: '0.5rem',
+});

package/src/components/Kbd/Kbd.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+import { Kbd } from '.';
+
+const meta = {
+  title: 'Components/Kbd',
+  component: Kbd,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Kbd>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const SingleKey: Story = {
+  args: {
+    children: '⌘',
+  },
+};
+
+export const MultipleKeys: Story = {
+  render: () => (
+    <span>
+      <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>
+    </span>
+  ),
+};
+
+export const ComplexShortcut: Story = {
+  render: () => (
+    <span>
+      Press <Kbd>⌘</Kbd> + <Kbd>Shift</Kbd> + <Kbd>P</Kbd> to open command palette
+    </span>
+  ),
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div style={{ lineHeight: '1.6' }}>
+      <p>
+        Use <Kbd>Tab</Kbd> to navigate between fields.
+      </p>
+      <p>
+        Press <Kbd>Enter</Kbd> to submit the form.
+      </p>
+      <p>
+        Press <Kbd>Esc</Kbd> to cancel.
+      </p>
+    </div>
+  ),
+};

package/src/components/Kbd/Kbd.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Kbd from './Kbd';
+import React from 'react';
+
+describe('Kbd', () => {
+  it('renders keyboard shortcut', async () => {
+    const { container } = await render(
+      <Kbd>Ctrl</Kbd>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders multi-key shortcut', async () => {
+    const { container } = await render(
+      <span>
+        <Kbd>Ctrl</Kbd> + <Kbd>C</Kbd>
+      </span>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Kbd/Kbd.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { kbd } from './styles.css';
+
+export interface KbdProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+const Kbd = ({ children, className, ...props }: KbdProps) => {
+  return (
+    <kbd className={`${kbd} ${className || ''}`} {...props}>
+      {children}
+    </kbd>
+  );
+};
+
+export default Kbd;

package/src/components/Kbd/index.ts

@@ -0,0 +1,2 @@
+export { default as Kbd } from './Kbd';
+export type { KbdProps } from './Kbd';

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

@@ -0,0 +1,18 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const kbd = styleWithLayer({
+  display: 'inline-block',
+  padding: '0.125rem 0.375rem',
+  fontFamily: 'monospace',
+  fontSize: '0.85em',
+  fontWeight: '600',
+  lineHeight: '1.5',
+  color: vars.colors.textPrimary,
+  backgroundColor: vars.colors.backgroundMuted,
+  border: `1px solid ${vars.colors.borderDefault}`,
+  borderRadius: '4px',
+  boxShadow: '0 2px 0 rgba(0, 0, 0, 0.1)',
+  whiteSpace: 'nowrap',
+});

package/src/components/List/List.test.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import List from './List';
+import React from 'react';
+import ListItem from './ListItem';
+
+describe('List', () => {
+  it('renders list correctly', async () => {
+    const { container } = await render(
+      <List>
+        <ListItem>Item 1</ListItem>
+        <ListItem>Item 2</ListItem>
+        <ListItem>Item 3</ListItem>
+      </List>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});