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

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/styles.css.ts

@@ -0,0 +1,28 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const scrollArea = styleWithLayer({
+  overflow: 'auto',
+  scrollbarWidth: 'thin',
+  scrollbarColor: `${vars.colors.borderDefault} ${vars.colors.backgroundMuted}`,
+});
+
+export const scrollAreaOrientation = styleVariants({
+  vertical: {
+    overflowX: 'hidden',
+    overflowY: 'auto',
+  },
+  horizontal: {
+    overflowX: 'auto',
+    overflowY: 'hidden',
+  },
+  both: {
+    overflow: 'auto',
+  },
+});
+
+export const scrollAreaViewport = styleWithLayer({
+  width: '100%',
+  height: '100%',
+});

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+import { Select } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: { onChange: fn() },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const options = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+  { value: 'option4', label: 'Option 4' },
+];
+
+export const Default: Story = {
+  args: {
+    options,
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Choose an option',
+    options,
+  },
+};
+
+export const WithDefaultValue: Story = {
+  args: {
+    label: 'Choose an option',
+    options,
+    defaultValue: 'option2',
+  },
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    label: 'Choose an option',
+    placeholder: 'Select...',
+    options: [
+      { value: '', label: 'Select...', disabled: true },
+      ...options,
+    ],
+  },
+};
+
+export const Error: Story = {
+  args: {
+    label: 'Choose an option',
+    options,
+    error: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Choose an option',
+    options,
+    disabled: true,
+    defaultValue: 'option2',
+  },
+};
+
+export const WithDisabledOptions: Story = {
+  args: {
+    label: 'Choose an option',
+    options: [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2 (disabled)', disabled: true },
+      { value: 'option3', label: 'Option 3' },
+      { value: 'option4', label: 'Option 4' },
+    ],
+  },
+};
+
+export const NotFullWidth: Story = {
+  args: {
+    label: 'Choose an option',
+    options,
+    fullWidth: false,
+  },
+};

package/src/components/Select/Select.test.tsx

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Select from './Select';
+import React from 'react';
+
+describe('Select', () => {
+  const options = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ];
+
+  it('renders select correctly', async () => {
+    const { container } = await render(<Select options={options} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders select with label correctly', async () => {
+    const { container } = await render(
+      <Select label="Choose an option" options={options} />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders select with error state correctly', async () => {
+    const { container } = await render(
+      <Select label="Choose an option" options={options} error />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders disabled select correctly', async () => {
+    const { container } = await render(
+      <Select label="Choose an option" options={options} disabled />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders select with disabled option correctly', async () => {
+    const optionsWithDisabled = [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2', disabled: true },
+      { value: 'option3', label: 'Option 3' },
+    ];
+    const { container } = await render(
+      <Select options={optionsWithDisabled} />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders select with selected value correctly', async () => {
+    const { container } = await render(
+      <Select options={options} defaultValue="option2" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Select/Select.tsx

@@ -0,0 +1,60 @@
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+import { select, selectLabel, selectWrapper } from './styles.css';
+import Box from '../Box';
+
+type SelectOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> & {
+  label?: string;
+  options: SelectOption[];
+  error?: boolean;
+  fullWidth?: boolean;
+};
+
+const Select = forwardRef<HTMLSelectElement, SelectProps>(
+  ({ label, options, error = false, fullWidth = true, className, ...props }, ref) => {
+    return (
+      <Box className={selectWrapper} width="100%">
+        {label && (
+          <Box
+            as="label"
+            className={selectLabel}
+            display="block"
+            fontSize="14px"
+            fontWeight="500"
+            color="c5-700"
+            marginBottom="small"
+          >
+            {label}
+          </Box>
+        )}
+        <Box
+          as="select"
+          ref={ref}
+          className={clsx(select[error ? 'error' : 'default'], className)}
+          width={fullWidth ? '100%' : undefined}
+          {...props}
+        >
+          {options.map((option) => (
+            <option
+              key={option.value}
+              value={option.value}
+              disabled={option.disabled}
+            >
+              {option.label}
+            </option>
+          ))}
+        </Box>
+      </Box>
+    );
+  },
+);
+
+Select.displayName = 'Select';
+
+export default Select;

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

@@ -0,0 +1,86 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const selectContainer = styleWithLayer({
+  width: '100%',
+});
+
+export const select = styleVariants({
+  default: {
+    width: '100%',
+    padding: '0.75rem 1rem',
+    fontSize: '14px',
+    fontFamily: vars.fontFamily.body,
+    color: vars.colors.textPrimary,
+    backgroundColor: vars.colors.inputBackground,
+    border: `1px solid ${vars.colors.inputBorder}`,
+    borderRadius: '8px',
+    cursor: 'pointer',
+    outline: 'none',
+    appearance: 'none',
+    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23252525' d='M6 8L1 3h10z'/%3E%3C/svg%3E")`,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'right 12px center',
+    transition: 'border-color 0.2s ease',
+    '::placeholder': {
+      color: vars.colors.inputPlaceholder,
+    },
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.inputBorderFocused}`,
+      outlineOffset: '2px',
+    },
+    ':hover:not(:disabled)': {
+      borderColor: vars.colors.inputBorderFocused,
+    },
+    ':disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+      backgroundColor: vars.colors.backgroundMuted,
+    },
+  },
+  error: {
+    width: '100%',
+    padding: '0.75rem 1rem',
+    fontSize: '14px',
+    fontFamily: vars.fontFamily.body,
+    color: vars.colors.textPrimary,
+    backgroundColor: vars.colors.inputBackground,
+    border: `1px solid ${vars.colors.alertErrorBorder}`,
+    borderRadius: '8px',
+    cursor: 'pointer',
+    outline: 'none',
+    appearance: 'none',
+    backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23252525' d='M6 8L1 3h10z'/%3E%3C/svg%3E")`,
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'right 12px center',
+    transition: 'border-color 0.2s ease',
+    '::placeholder': {
+      color: vars.colors.inputPlaceholder,
+    },
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.alertErrorBorder}`,
+      outlineOffset: '2px',
+    },
+    ':hover:not(:disabled)': {
+      borderColor: vars.colors.alertErrorBorder,
+    },
+    ':disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+      backgroundColor: vars.colors.backgroundMuted,
+    },
+  },
+});
+
+export const selectLabel = styleWithLayer({
+  display: 'block',
+  fontSize: '14px',
+  fontWeight: '500',
+  color: vars.colors.textPrimary,
+  marginBottom: '8px',
+});
+
+export const selectWrapper = styleWithLayer({
+  width: '100%',
+});

package/src/components/Separator/Separator.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+import { Separator } from '.';
+import { Box } from '../Box';
+
+const meta = {
+  title: 'Components/Separator',
+  component: Separator,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Separator>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  args: {
+    orientation: 'horizontal',
+  },
+  render: () => (
+    <Box width="100%">
+      <p>Content above</p>
+      <Separator orientation="horizontal" />
+      <p>Content below</p>
+    </Box>
+  ),
+};
+
+export const Vertical: Story = {
+  args: {
+    orientation: 'vertical',
+  },
+  render: () => (
+    <Box display="flex" height="100px" alignItems="center">
+      <span>Left content</span>
+      <Separator orientation="vertical" />
+      <span>Right content</span>
+    </Box>
+  ),
+};
+
+export const Decorative: Story = {
+  args: {
+    orientation: 'horizontal',
+    decorative: true,
+  },
+};

package/src/components/Separator/Separator.test.tsx

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Separator from './Separator';
+import React from 'react';
+
+describe('Separator', () => {
+  it('renders horizontal separator', async () => {
+    const { container } = await render(
+      <Separator orientation="horizontal" />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders vertical separator', async () => {
+    const { container } = await render(
+      <div style={{ height: '100px' }}>
+        <Separator orientation="vertical" />
+      </div>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import React from 'react';
+import {
+  separator,
+  separatorOrientation,
+} from './styles.css';
+import Box from '../Box';
+
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+
+export interface SeparatorProps {
+  orientation?: SeparatorOrientation;
+  decorative?: boolean;
+  className?: string;
+}
+
+const Separator = ({
+  orientation = 'horizontal',
+  decorative = false,
+  className,
+  ...props
+}: SeparatorProps) => {
+  return (
+    <Box
+      as="hr"
+      className={clsx(
+        separator,
+        separatorOrientation[orientation],
+        className,
+      )}
+      aria-hidden={decorative}
+      {...props}
+    />
+  );
+};
+
+export default Separator;

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

@@ -0,0 +1,32 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const separator = styleWithLayer({
+  border: 'none',
+  margin: 0,
+  flexShrink: 0,
+});
+
+export const separatorOrientation = styleVariants({
+  horizontal: {
+    width: '100%',
+    height: '1px',
+    backgroundColor: vars.colors.borderDefault,
+  },
+  vertical: {
+    width: '1px',
+    height: '100%',
+    backgroundColor: vars.colors.borderDefault,
+  },
+});
+
+export const separatorSize = styleVariants({
+  small: {},
+  medium: {},
+  large: {},
+});
+
+export const separatorDecorative = styleWithLayer({
+  backgroundColor: vars.colors.borderMuted,
+});