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

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

@@ -0,0 +1,164 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const fileUploadContainer = styleWithLayer({
+  width: '100%',
+});
+
+export const fileUploadDropzone = styleWithLayer({
+  border: `2px dashed ${vars.colors.borderDefault}`,
+  borderRadius: '12px',
+  padding: '2rem',
+  textAlign: 'center',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  backgroundColor: vars.colors.backgroundMuted,
+  ':hover': {
+    borderColor: vars.colors.inputBorderFocused,
+    backgroundColor: vars.colors.alertInfoBackground,
+  },
+});
+
+export const fileUploadDropzoneVariants = styleVariants({
+  default: {},
+  dragOver: {
+    borderColor: vars.colors.buttonBackgroundPrimary,
+    backgroundColor: vars.colors.alertInfoBackground,
+    borderStyle: 'solid',
+  },
+  error: {
+    borderColor: vars.colors.alertErrorBorder,
+    backgroundColor: vars.colors.alertErrorBackground,
+  },
+  disabled: {
+    cursor: 'not-allowed',
+    opacity: 0.6,
+    ':hover': {
+      borderColor: vars.colors.borderDefault,
+      backgroundColor: vars.colors.backgroundMuted,
+    },
+  },
+});
+
+export const fileUploadLabel = styleWithLayer({
+  display: 'block',
+  fontSize: '14px',
+  fontWeight: '500',
+  color: vars.colors.textPrimary,
+  marginBottom: '8px',
+});
+
+export const fileUploadText = styleWithLayer({
+  fontSize: '14px',
+  color: vars.colors.textSecondary,
+  marginTop: '0.5rem',
+});
+
+export const fileUploadHint = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.textSecondary,
+  marginTop: '0.5rem',
+});
+
+export const fileUploadInput = styleWithLayer({
+  display: 'none',
+});
+
+export const fileUploadList = styleWithLayer({
+  marginTop: '1rem',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.75rem',
+});
+
+export const fileUploadItem = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.75rem',
+  padding: '0.75rem',
+  backgroundColor: vars.colors.backgroundDefault,
+  border: `1px solid ${vars.colors.borderMuted}`,
+  borderRadius: '8px',
+});
+
+export const fileUploadItemInfo = styleWithLayer({
+  flex: 1,
+  minWidth: 0,
+});
+
+export const fileUploadItemName = styleWithLayer({
+  fontSize: '14px',
+  fontWeight: '500',
+  color: vars.colors.textPrimary,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+});
+
+export const fileUploadItemSize = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.textSecondary,
+  marginTop: '2px',
+});
+
+export const fileUploadItemProgress = styleWithLayer({
+  flex: 1,
+  maxWidth: '200px',
+});
+
+export const fileUploadRemoveButton = styleWithLayer({
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  padding: '0.25rem',
+  color: vars.colors.textSecondary,
+  fontSize: '18px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '4px',
+  transition: 'all 0.15s ease',
+  ':hover': {
+    color: vars.colors.alertErrorText,
+    backgroundColor: vars.colors.alertErrorBackground,
+  },
+});
+
+export const fileUploadError = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.alertErrorText,
+  marginTop: '0.5rem',
+});
+
+export const fileUploadIcon = styleWithLayer({
+  fontSize: '24px',
+  color: vars.colors.textSecondary,
+});
+
+export const fileUploadProgressBar = styleWithLayer({
+  width: '100%',
+  height: '4px',
+  backgroundColor: vars.colors.borderMuted,
+  borderRadius: '2px',
+  overflow: 'hidden',
+  marginTop: '0.5rem',
+});
+
+export const fileUploadProgressFill = styleWithLayer({
+  height: '100%',
+  backgroundColor: vars.colors.buttonBackgroundPrimary,
+  transition: 'width 0.3s ease',
+});
+
+export const fileUploadProgressFillVariants = styleVariants({
+  uploading: {
+    backgroundColor: vars.colors.buttonBackgroundPrimary,
+  },
+  success: {
+    backgroundColor: vars.colors.alertSuccessBorder,
+  },
+  error: {
+    backgroundColor: vars.colors.alertErrorBorder,
+  },
+});

package/src/components/Form/Form.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { fn } from 'storybook/test';
+
+import { Form } from '.';
+import React from 'react';
+import { Input } from '../Input';
+import FormInput from './FormInput';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Form',
+  component: Form,
+  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={{
+          maxWidth: '400px',
+        }}
+      >
+        <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
+} satisfies Meta<typeof Form>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Login: Story = {
+  args: {
+    children: (
+      <>
+        <FormInput label="Username" placeholder="user" />
+        <FormInput label="Password" type="password" placeholder="••••••••" />
+      </>
+    ),
+  },
+};

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/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/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/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();
+  });
+});