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

package/src/components/Progress/Progress.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Progress } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Progress',
+  component: Progress,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Progress>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 50,
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    value: 75,
+    label: 'Upload Progress',
+  },
+};
+
+export const WithPercentage: Story = {
+  args: {
+    value: 60,
+    label: 'Uploading files',
+    showPercentage: true,
+  },
+};
+
+export const Success: Story = {
+  args: {
+    value: 100,
+    variant: 'success',
+    label: 'Complete',
+    showPercentage: true,
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    value: 70,
+    variant: 'warning',
+    label: 'Warning threshold',
+    showPercentage: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    value: 30,
+    variant: 'error',
+    label: 'Error: Insufficient storage',
+    showPercentage: true,
+  },
+};
+
+export const CustomMax: Story = {
+  args: {
+    value: 150,
+    max: 200,
+    label: 'Storage Usage',
+    showPercentage: true,
+  },
+};

package/src/components/Progress/Progress.test.tsx

@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Progress from './Progress';
+import React from 'react';
+
+describe('Progress', () => {
+  it('renders progress correctly', async () => {
+    const { container } = await render(<Progress value={50} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders progress with label correctly', async () => {
+    const { container } = await render(
+      <Progress value={75} label="Loading..." />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders progress with percentage correctly', async () => {
+    const { container } = await render(
+      <Progress value={30} showPercentage />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders success progress correctly', async () => {
+    const { container } = await render(
+      <Progress value={100} variant="success" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders warning progress correctly', async () => {
+    const { container } = await render(
+      <Progress value={60} variant="warning" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders error progress correctly', async () => {
+    const { container } = await render(
+      <Progress value={25} variant="error" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders custom max value correctly', async () => {
+    const { container } = await render(
+      <Progress value={150} max={200} />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,66 @@
+import clsx from 'clsx';
+import React from 'react';
+import {
+  progress,
+  progressBar,
+  progressFill,
+  progressLabel,
+} from './styles.css';
+import Box from '../Box';
+
+type ProgressProps = {
+  value: number;
+  max?: number;
+  label?: string;
+  showPercentage?: boolean;
+  variant?: 'default' | 'success' | 'warning' | 'error';
+  className?: string;
+};
+
+const Progress = ({
+  value,
+  max = 100,
+  label,
+  showPercentage = false,
+  variant = 'default',
+  className,
+}: ProgressProps) => {
+  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+  
+  return (
+      <Box className={clsx(progress, className)} width="100%">
+        {(label || showPercentage) && (
+          <Box
+            className={progressLabel}
+            display="flex"
+            justifyContent="space-between"
+            fontSize="12px"
+            fontWeight="500"
+            color="c5-600"
+            marginBottom="small"
+            fontFamily="body"
+          >
+            {label && <Box as="span">{label}</Box>}
+            {showPercentage && <Box as="span">{percentage}%</Box>}
+          </Box>
+        )}
+        <Box
+          as="div"
+          className={progressBar[variant]}
+          role="progressbar"
+          aria-valuenow={value}
+          aria-valuemin={0}
+          aria-valuemax={max}
+        >
+          <Box
+            as="div"
+            className={progressFill[variant]}
+            style={{ width: `${percentage}%` }}
+            role="presentation"
+          />
+        </Box>
+      </Box>
+    );
+};
+
+export default Progress;

package/src/components/Progress/index.ts

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

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

@@ -0,0 +1,75 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const progress = styleWithLayer({
+  width: '100%',
+});
+
+export const progressBar = styleVariants({
+  default: {
+    width: '100%',
+    height: '8px',
+    backgroundColor: vars.colors.backgroundMuted,
+    borderRadius: '4px',
+    overflow: 'hidden',
+  },
+  success: {
+    width: '100%',
+    height: '8px',
+    backgroundColor: vars.colors.alertSuccessBackground,
+    borderRadius: '4px',
+    overflow: 'hidden',
+  },
+  warning: {
+    width: '100%',
+    height: '8px',
+    backgroundColor: vars.colors.alertWarningBackground,
+    borderRadius: '4px',
+    overflow: 'hidden',
+  },
+  error: {
+    width: '100%',
+    height: '8px',
+    backgroundColor: vars.colors.alertErrorBackground,
+    borderRadius: '4px',
+    overflow: 'hidden',
+  },
+});
+
+export const progressFill = styleVariants({
+  default: {
+    height: '100%',
+    borderRadius: '4px',
+    transition: 'width 0.3s ease',
+    backgroundColor: vars.colors.buttonBackgroundPrimary,
+  },
+  success: {
+    height: '100%',
+    borderRadius: '4px',
+    transition: 'width 0.3s ease',
+    backgroundColor: vars.colors.alertSuccessBorder,
+  },
+  warning: {
+    height: '100%',
+    borderRadius: '4px',
+    transition: 'width 0.3s ease',
+    backgroundColor: vars.colors.alertWarningBorder,
+  },
+  error: {
+    height: '100%',
+    borderRadius: '4px',
+    transition: 'width 0.3s ease',
+    backgroundColor: vars.colors.alertErrorBorder,
+  },
+});
+
+export const progressLabel = styleWithLayer({
+  display: 'flex',
+  justifyContent: 'space-between',
+  fontSize: '12px',
+  fontWeight: '500',
+  color: vars.colors.textSecondary,
+  marginBottom: '4px',
+  fontFamily: vars.fontFamily.body,
+});

package/src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+import { Radio } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Radio',
+  component: Radio,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Radio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    value: 'option1',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    value: 'option1',
+    label: 'Select this option',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    value: 'option1',
+    label: 'Selected option',
+    checked: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    value: 'option1',
+    label: 'Disabled radio',
+    disabled: true,
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    value: 'option1',
+    label: 'Disabled checked',
+    disabled: true,
+    checked: true,
+  },
+};
+
+export const RadioGroup: Story = {
+  render: () => (
+    <Radio.Group name="options" value="option2" onChange={fn()}>
+      <Radio value="option1" label="Option 1" />
+      <Radio value="option2" label="Option 2" />
+      <Radio value="option3" label="Option 3" />
+    </Radio.Group>
+  ),
+};
+
+export const HorizontalGroup: Story = {
+  render: () => (
+    <Radio.Group name="options" value="option1" layout="horizontal" onChange={fn()}>
+      <Radio value="option1" label="Option 1" />
+      <Radio value="option2" label="Option 2" />
+      <Radio value="option3" label="Option 3" />
+    </Radio.Group>
+  ),
+};

package/src/components/Radio/Radio.test.tsx

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Radio from './Radio';
+import React from 'react';
+
+describe('Radio', () => {
+  it('renders unchecked radio correctly', async () => {
+    const { container } = await render(<Radio value="option1" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders checked radio correctly', async () => {
+    const { container } = await render(
+      <Radio value="option1" checked readOnly />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders radio with label correctly', async () => {
+    const { container } = await render(
+      <Radio value="option1" label="Option 1" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders disabled radio correctly', async () => {
+    const { container } = await render(
+      <Radio value="option1" disabled label="Disabled option" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders radio group correctly', async () => {
+    const { container } = await render(
+      <Radio.Group name="options" value="option2">
+        <Radio value="option1" label="Option 1" />
+        <Radio value="option2" label="Option 2" />
+        <Radio value="option3" label="Option 3" />
+      </Radio.Group>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders horizontal radio group correctly', async () => {
+    const { container } = await render(
+      <Radio.Group name="options" value="option1" layout="horizontal">
+        <Radio value="option1" label="Option 1" />
+        <Radio value="option2" label="Option 2" />
+        <Radio value="option3" label="Option 3" />
+      </Radio.Group>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,104 @@
+import clsx from 'clsx';
+import React, { forwardRef, createContext, useContext } from 'react';
+import {
+  radioContainer,
+  radioInput,
+  radioLabel,
+  radioGroup,
+  radioGroupHorizontal,
+} from './styles.css';
+import Box from '../Box';
+
+type RadioContextType = {
+  name?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+};
+
+const RadioContext = createContext<RadioContextType>({});
+
+type RadioProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'type' | 'value' | 'onChange'
+> & {
+  label?: string;
+  value: string;
+};
+
+const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  ({ label, className, value, ...props }, ref) => {
+    const context = useContext(RadioContext);
+    const name = context.name || props.name;
+    const isChecked = context.value === value;
+    
+    const handleChange = () => {
+      if (context.onChange) {
+        context.onChange(value);
+      }
+    };
+
+    return (
+      <Box
+        as="label"
+        className={clsx(radioContainer, className)}
+        display="flex"
+        alignItems="center"
+        gap="small"
+        cursor="pointer"
+        style={{ userSelect: 'none' }}
+      >
+        <Box
+          as="input"
+          type="radio"
+          ref={ref}
+          name={name}
+          value={value}
+          checked={isChecked}
+          onChange={handleChange}
+          className={radioInput}
+          {...props}
+        />
+        {label && <Box as="span" className={radioLabel}>{label}</Box>}
+      </Box>
+    );
+  },
+);
+
+Radio.displayName = 'Radio';
+
+type RadioGroupProps = {
+  children: React.ReactNode;
+  name: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  layout?: 'vertical' | 'horizontal';
+  className?: string;
+};
+
+const RadioGroup = ({
+  children,
+  name,
+  value,
+  onChange,
+  layout = 'vertical',
+  className,
+}: RadioGroupProps) => {
+  return (
+    <RadioContext.Provider value={{ name, value, onChange }}>
+      <Box
+        className={clsx(
+          layout === 'horizontal' ? radioGroupHorizontal : radioGroup,
+          className,
+        )}
+      >
+        {children}
+      </Box>
+    </RadioContext.Provider>
+  );
+};
+
+const RadioComponent = Object.assign(Radio, {
+  Group: RadioGroup,
+});
+
+export default RadioComponent;

package/src/components/Radio/index.ts

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

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

@@ -0,0 +1,47 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const radioContainer = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  cursor: 'pointer',
+  userSelect: 'none',
+});
+
+export const radioInput = style({
+  width: '18px',
+  height: '18px',
+  border: `2px solid ${vars.colors.borderDefault}`,
+  borderRadius: '50%',
+  cursor: 'pointer',
+  accentColor: vars.colors.buttonBackgroundPrimary,
+  ':focus-visible': {
+    outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+    outlineOffset: '2px',
+  },
+  ':disabled': {
+    cursor: 'not-allowed',
+    opacity: 0.5,
+  },
+});
+
+export const radioLabel = styleWithLayer({
+  fontFamily: vars.fontFamily.body,
+  fontSize: '14px',
+  color: vars.colors.textPrimary,
+});
+
+export const radioGroup = styleWithLayer({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '8px',
+});
+
+export const radioGroupHorizontal = styleWithLayer({
+  display: 'flex',
+  flexDirection: 'row',
+  gap: '16px',
+  flexWrap: 'wrap',
+});

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+import { ScrollArea } from '.';
+import { Box } from '../Box';
+
+const meta = {
+  title: 'Components/ScrollArea',
+  component: ScrollArea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ScrollArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const LongContent = () => (
+  <div>
+    {Array.from({ length: 20 }, (_, i) => (
+      <Box key={i} padding="small" background={i % 2 === 0 ? 'c1-50' : 'c1-100'}>
+        Item {i + 1}
+      </Box>
+    ))}
+  </div>
+);
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
+    maxHeight: '200px',
+    children: <LongContent />,
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    orientation: 'horizontal',
+    maxWidth: '300px',
+    children: (
+      <div style={{ whiteSpace: 'nowrap' }}>
+        {Array.from({ length: 20 }, (_, i) => (
+          <span key={i} style={{ marginRight: '20px' }}>
+            Horizontal item {i + 1}
+          </span>
+        ))}
+      </div>
+    ),
+  },
+};
+
+export const Both: Story = {
+  args: {
+    orientation: 'both',
+    maxHeight: '200px',
+    maxWidth: '300px',
+    children: (
+      <div style={{ width: '500px' }}>
+        <LongContent />
+      </div>
+    ),
+  },
+};

package/src/components/ScrollArea/ScrollArea.test.tsx

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import ScrollArea from './ScrollArea';
+import React from 'react';
+
+describe('ScrollArea', () => {
+  it('renders with vertical scroll', async () => {
+    const { container } = await render(
+      <ScrollArea maxHeight="100px">
+        <div style={{ height: '200px' }}>Scrollable content</div>
+      </ScrollArea>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with horizontal scroll', async () => {
+    const { container } = await render(
+      <ScrollArea orientation="horizontal" maxWidth="100px">
+        <div style={{ width: '200px' }}>Wide content</div>
+      </ScrollArea>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,50 @@
+import clsx from 'clsx';
+import React from 'react';
+import {
+  scrollArea,
+  scrollAreaOrientation,
+  scrollAreaViewport,
+} from './styles.css';
+import Box from '../Box';
+
+export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
+
+export interface ScrollAreaProps {
+  children: React.ReactNode;
+  orientation?: ScrollAreaOrientation;
+  maxHeight?: string | number;
+  maxWidth?: string | number;
+  className?: string;
+}
+
+const ScrollArea = ({
+  children,
+  orientation = 'vertical',
+  maxHeight,
+  maxWidth,
+  className,
+  ...props
+}: ScrollAreaProps) => {
+  const style: React.CSSProperties = {
+    maxHeight,
+    maxWidth,
+  };
+
+  return (
+    <Box
+      className={clsx(
+        scrollArea,
+        scrollAreaOrientation[orientation],
+        className,
+      )}
+      style={style}
+      {...props}
+    >
+      <Box className={scrollAreaViewport}>
+        {children}
+      </Box>
+    </Box>
+  );
+};
+
+export default ScrollArea;

package/src/components/ScrollArea/index.ts

@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea';
+export type { ScrollAreaProps, ScrollAreaOrientation } from './ScrollArea';