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

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

@@ -0,0 +1,197 @@
+import { style, styleVariants, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+const fadeIn = keyframes({
+  from: { opacity: 0, transform: 'scale(0.95)' },
+  to: { opacity: 1, transform: 'scale(1)' },
+});
+
+export const popoverContainer = styleWithLayer({
+  position: 'relative',
+  display: 'inline-block',
+});
+
+export const popoverTrigger = styleWithLayer({
+  cursor: 'pointer',
+});
+
+export const popoverContent = styleWithLayer({
+  position: 'absolute',
+  backgroundColor: vars.colors.backgroundDefault,
+  border: `1px solid ${vars.colors.borderDefault}`,
+  borderRadius: '0.75rem',
+  boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+  zIndex: 50,
+  padding: '1rem',
+  minWidth: '200px',
+  maxWidth: '400px',
+  animation: `${fadeIn} 0.15s ease-out`,
+});
+
+export const popoverPositionVariants = styleVariants({
+  top: {
+    bottom: '100%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    marginBottom: '0.5rem',
+  },
+  bottom: {
+    top: '100%',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    marginTop: '0.5rem',
+  },
+  left: {
+    right: '100%',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    marginRight: '0.5rem',
+  },
+  right: {
+    left: '100%',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    marginLeft: '0.5rem',
+  },
+  topLeft: {
+    bottom: '100%',
+    right: 0,
+    marginBottom: '0.5rem',
+  },
+  topRight: {
+    bottom: '100%',
+    left: 0,
+    marginBottom: '0.5rem',
+  },
+  bottomLeft: {
+    top: '100%',
+    right: 0,
+    marginTop: '0.5rem',
+  },
+  bottomRight: {
+    top: '100%',
+    left: 0,
+    marginTop: '0.5rem',
+  },
+});
+
+export const popoverArrow = styleWithLayer({
+  position: 'absolute',
+  width: '8px',
+  height: '8px',
+  backgroundColor: vars.colors.backgroundDefault,
+  border: `1px solid ${vars.colors.borderDefault}`,
+  transform: 'rotate(45deg)',
+});
+
+export const popoverArrowPositionVariants = styleVariants({
+  top: {
+    bottom: '-5px',
+    left: '50%',
+    transform: 'translateX(-50%) rotate(45deg)',
+    borderTop: 'none',
+    borderLeft: 'none',
+  },
+  bottom: {
+    top: '-5px',
+    left: '50%',
+    transform: 'translateX(-50%) rotate(45deg)',
+    borderBottom: 'none',
+    borderRight: 'none',
+  },
+  left: {
+    right: '-5px',
+    top: '50%',
+    transform: 'translateY(-50%) rotate(45deg)',
+    borderLeft: 'none',
+    borderBottom: 'none',
+  },
+  right: {
+    left: '-5px',
+    top: '50%',
+    transform: 'translateY(-50%) rotate(45deg)',
+    borderRight: 'none',
+    borderTop: 'none',
+  },
+  topLeft: {
+    bottom: '-5px',
+    right: '1rem',
+    transform: 'rotate(45deg)',
+    borderTop: 'none',
+    borderLeft: 'none',
+  },
+  topRight: {
+    bottom: '-5px',
+    left: '1rem',
+    transform: 'rotate(45deg)',
+    borderTop: 'none',
+    borderLeft: 'none',
+  },
+  bottomLeft: {
+    top: '-5px',
+    right: '1rem',
+    transform: 'rotate(45deg)',
+    borderBottom: 'none',
+    borderRight: 'none',
+  },
+  bottomRight: {
+    top: '-5px',
+    left: '1rem',
+    transform: 'rotate(45deg)',
+    borderBottom: 'none',
+    borderRight: 'none',
+  },
+});
+
+export const popoverHeader = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  marginBottom: '0.75rem',
+  paddingBottom: '0.75rem',
+  borderBottom: `1px solid ${vars.colors.borderMuted}`,
+});
+
+export const popoverTitle = styleWithLayer({
+  fontFamily: vars.fontFamily.heading,
+  fontSize: '1rem',
+  fontWeight: '600',
+  color: vars.colors.textPrimary,
+  margin: 0,
+});
+
+export const popoverCloseButton = styleWithLayer({
+  background: 'none',
+  border: 'none',
+  padding: '0.25rem',
+  cursor: 'pointer',
+  borderRadius: '0.25rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: vars.colors.textSecondary,
+  fontSize: '1.25rem',
+  lineHeight: '1',
+  marginLeft: '0.5rem',
+  transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
+  ':hover': {
+    backgroundColor: vars.colors.borderMuted,
+    color: vars.colors.textPrimary,
+  },
+});
+
+export const popoverBody = styleWithLayer({
+  fontSize: '14px',
+  color: vars.colors.textPrimary,
+  lineHeight: '1.5',
+});
+
+export const popoverFooter = styleWithLayer({
+  display: 'flex',
+  gap: '0.5rem',
+  justifyContent: 'flex-end',
+  marginTop: '0.75rem',
+  paddingTop: '0.75rem',
+  borderTop: `1px solid ${vars.colors.borderMuted}`,
+});

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/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;