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

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/index.ts

@@ -0,0 +1 @@
+export { default as Select } from './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/index.ts

@@ -0,0 +1,2 @@
+export { default as Separator } from './Separator';
+export type { SeparatorProps, SeparatorOrientation } from './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,
+});

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+
+import { Skeleton } from '.';
+
+const meta = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {
+  args: {
+    variant: 'text',
+    size: 'medium',
+    width: 200,
+  },
+};
+
+export const Circle: Story = {
+  args: {
+    variant: 'circle',
+    width: 48,
+    height: 48,
+  },
+};
+
+export const Rectangle: Story = {
+  args: {
+    variant: 'rectangle',
+    width: 200,
+    height: 100,
+  },
+};
+
+export const MultipleLines: Story = {
+  args: {
+    variant: 'text',
+    count: 3,
+    width: 300,
+  },
+};
+
+export const PulseAnimation: Story = {
+  args: {
+    variant: 'text',
+    animation: 'pulse',
+    width: 200,
+  },
+};
+
+export const NoAnimation: Story = {
+  args: {
+    variant: 'text',
+    animation: 'none',
+    width: 200,
+  },
+};
+
+export const DifferentSizes: Story = {
+  args: {
+    variant: 'text',
+    width: 200,
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <Skeleton size="small" width={200} />
+      <Skeleton size="medium" width={200} />
+      <Skeleton size="large" width={200} />
+    </div>
+  ),
+};

package/src/components/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Skeleton from './Skeleton';
+import React from 'react';
+
+describe('Skeleton', () => {
+  it('renders correctly as text variant', async () => {
+    const { container } = await render(<Skeleton variant="text" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly as circle variant', async () => {
+    const { container } = await render(<Skeleton variant="circle" width={48} height={48} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly as rectangle variant', async () => {
+    const { container } = await render(<Skeleton variant="rectangle" width={200} height={100} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders multiple skeletons with count', async () => {
+    const { container } = await render(<Skeleton count={3} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with pulse animation', async () => {
+    const { container } = await render(<Skeleton animation="pulse" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders without animation', async () => {
+    const { container } = await render(<Skeleton animation="none" />);
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,67 @@
+import clsx from 'clsx';
+import React from 'react';
+import {
+  skeleton,
+  skeletonVariants,
+  skeletonSizes,
+  skeletonAnimation,
+} from './styles.css';
+import Box from '../Box';
+
+export type SkeletonVariant = 'text' | 'circle' | 'rectangle';
+export type SkeletonSize = 'small' | 'medium' | 'large';
+export type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: SkeletonVariant;
+  size?: SkeletonSize;
+  animation?: SkeletonAnimation;
+  width?: string | number;
+  height?: string | number;
+  count?: number;
+}
+
+const Skeleton = ({
+  variant = 'text',
+  size = 'medium',
+  animation = 'shimmer',
+  width,
+  height,
+  count = 1,
+  className,
+  ...props
+}: SkeletonProps) => {
+  const style: React.CSSProperties = {
+    width: width,
+    height: height,
+  };
+
+  const skeletons = Array.from({ length: count }, (_, index) => (
+    <Box
+      key={index}
+      as="span"
+      className={clsx(
+        skeleton,
+        skeletonVariants[variant],
+        skeletonSizes[size],
+        skeletonAnimation[animation],
+        className,
+      )}
+      style={style}
+      aria-hidden="true"
+      {...props}
+    />
+  ));
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="small"
+    >
+      {skeletons}
+    </Box>
+  );
+};
+
+export default Skeleton;

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { default as Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonVariant, SkeletonSize, SkeletonAnimation } from './Skeleton';