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

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

@@ -0,0 +1,34 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const checkboxContainer = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  cursor: 'pointer',
+  userSelect: 'none',
+});
+
+export const checkboxInput = style({
+  width: '18px',
+  height: '18px',
+  border: `2px solid ${vars.colors.borderDefault}`,
+  borderRadius: '4px',
+  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 checkboxLabel = styleWithLayer({
+  fontFamily: vars.fontFamily.body,
+  fontSize: '14px',
+  color: vars.colors.textPrimary,
+});

package/src/components/Collapse/Collapse.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+import { Collapse } from '.';
+import { Box } from '../Box';
+
+const meta = {
+  title: 'Components/Collapse',
+  component: Collapse,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Collapse>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Open: Story = {
+  args: {
+    isOpen: true,
+    children: (
+      <Box padding="medium" background="c1-100">
+        This content is visible and can be collapsed.
+      </Box>
+    ),
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    isOpen: false,
+    children: (
+      <Box padding="medium" background="c1-100">
+        This content is hidden when collapsed.
+      </Box>
+    ),
+  },
+};
+
+export const HeightOnly: Story = {
+  args: {
+    isOpen: true,
+    animation: 'height',
+    children: (
+      <Box padding="medium" background="c2-100">
+        Height-only animation
+      </Box>
+    ),
+  },
+};
+
+export const OpacityOnly: Story = {
+  args: {
+    isOpen: true,
+    animation: 'opacity',
+    children: (
+      <Box padding="medium" background="c3-100">
+        Opacity-only animation
+      </Box>
+    ),
+  },
+};

package/src/components/Collapse/Collapse.test.tsx

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Collapse from './Collapse';
+import React from 'react';
+
+describe('Collapse', () => {
+  it('renders when open', async () => {
+    const { container } = await render(
+      <Collapse isOpen={true}>
+        <div>Collapsed content</div>
+      </Collapse>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders when closed', async () => {
+    const { container } = await render(
+      <Collapse isOpen={false}>
+        <div>Hidden content</div>
+      </Collapse>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Collapse/Collapse.tsx

@@ -0,0 +1,97 @@
+import clsx from 'clsx';
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  collapseContainer,
+  collapseContent,
+  collapseAnimation,
+} from './styles.css';
+import Box from '../Box';
+
+export type CollapseAnimation = 'height' | 'opacity' | 'both';
+
+export interface CollapseProps {
+  isOpen: boolean;
+  children: React.ReactNode;
+  animation?: CollapseAnimation;
+  duration?: number;
+  className?: string;
+  onAnimationEnd?: () => void;
+}
+
+const Collapse = ({
+  isOpen,
+  children,
+  animation = 'both',
+  duration = 300,
+  className,
+  onAnimationEnd,
+}: CollapseProps) => {
+  const [height, setHeight] = useState<number | undefined>(isOpen ? undefined : 0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsAnimating(true);
+      if (contentRef.current) {
+        setHeight(contentRef.current.scrollHeight);
+      }
+    } else {
+      setIsAnimating(true);
+      setHeight(0);
+    }
+  }, [isOpen]);
+
+  const handleTransitionEnd = () => {
+    setIsAnimating(false);
+    if (isOpen) {
+      setHeight(undefined);
+    }
+    onAnimationEnd?.();
+  };
+
+  const getAnimationStyles = (): React.CSSProperties => {
+    const baseStyles: React.CSSProperties = {
+      transition: `height ${duration}ms ease-out, opacity ${duration}ms ease-out`,
+      height: height !== undefined ? `${height}px` : undefined,
+      opacity: isOpen || isAnimating ? 1 : 0,
+    };
+
+    if (animation === 'height') {
+      return {
+        ...baseStyles,
+        transition: `height ${duration}ms ease-out`,
+        opacity: 1,
+      };
+    }
+
+    if (animation === 'opacity') {
+      return {
+        ...baseStyles,
+        transition: `opacity ${duration}ms ease-out`,
+        height: undefined,
+      };
+    }
+
+    return baseStyles;
+  };
+
+  if (!isOpen && !isAnimating && animation !== 'opacity') {
+    return null;
+  }
+
+  return (
+    <Box
+      className={clsx(collapseContainer, className)}
+      style={getAnimationStyles()}
+      onTransitionEnd={handleTransitionEnd}
+      aria-hidden={!isOpen}
+    >
+      <Box ref={contentRef} className={collapseContent}>
+        {children}
+      </Box>
+    </Box>
+  );
+};
+
+export default Collapse;

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

@@ -0,0 +1,42 @@
+import { style, styleVariants, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+const collapseIn = keyframes({
+  from: { 
+    height: 0,
+    opacity: 0,
+  },
+  to: { 
+    height: 'auto',
+    opacity: 1,
+  },
+});
+
+const collapseOut = keyframes({
+  from: { 
+    height: 'auto',
+    opacity: 1,
+  },
+  to: { 
+    height: 0,
+    opacity: 0,
+  },
+});
+
+export const collapseContainer = styleWithLayer({
+  overflow: 'hidden',
+});
+
+export const collapseContent = styleWithLayer({
+  width: '100%',
+});
+
+export const collapseAnimation = styleVariants({
+  in: {
+    animation: `${collapseIn} 0.3s ease-out forwards`,
+  },
+  out: {
+    animation: `${collapseOut} 0.3s ease-out forwards`,
+  },
+});

package/src/components/Combobox/Combobox.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+import { Combobox } from '.';
+
+const meta = {
+  title: 'Components/Combobox',
+  component: Combobox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const options = [
+  { value: 'react', label: 'React' },
+  { value: 'vue', label: 'Vue' },
+  { value: 'angular', label: 'Angular' },
+  { value: 'svelte', label: 'Svelte' },
+  { value: 'next', label: 'Next.js' },
+  { value: 'nuxt', label: 'Nuxt.js' },
+  { value: 'remix', label: 'Remix' },
+  { value: 'astro', label: 'Astro' },
+];
+
+export const Default: Story = {
+  args: {
+    label: 'Select Framework',
+    options,
+    placeholder: 'Search frameworks...',
+    onChange: fn(),
+    onInputChange: fn(),
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    label: 'Selected Framework',
+    options,
+    value: 'react',
+    placeholder: 'Search frameworks...',
+    onChange: fn(),
+  },
+};
+
+export const WithHint: Story = {
+  args: {
+    label: 'Framework',
+    options,
+    placeholder: 'Type to search...',
+    hint: 'Start typing to filter the list of frameworks',
+    onChange: fn(),
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Framework',
+    options,
+    placeholder: 'Search frameworks...',
+    error: true,
+    errorMessage: 'Please select a valid framework from the list',
+    onChange: fn(),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Framework',
+    options,
+    value: 'react',
+    disabled: true,
+    onChange: fn(),
+  },
+};
+
+export const NotClearable: Story = {
+  args: {
+    label: 'Framework',
+    options,
+    value: 'vue',
+    clearable: false,
+    onChange: fn(),
+  },
+};
+
+export const CustomFilter: Story = {
+  args: {
+    label: 'Strict Search',
+    options,
+    placeholder: 'Search (must start with)...',
+    filterFn: (option, input) => 
+      option.label.toLowerCase().startsWith(input.toLowerCase()),
+    onChange: fn(),
+    onInputChange: fn(),
+  },
+};

package/src/components/Combobox/Combobox.test.tsx

@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Combobox from './Combobox';
+import React from 'react';
+
+const options = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3' },
+];
+
+describe('Combobox', () => {
+  it('renders correctly with label', async () => {
+    const { container } = await render(
+      <Combobox label="Select an option" options={options} placeholder="Search options..." />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with selected value', async () => {
+    const { container } = await render(
+      <Combobox label="Select" options={options} value="option2" />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with error state', async () => {
+    const { container } = await render(
+      <Combobox 
+        label="Select" 
+        options={options} 
+        error={true} 
+        errorMessage="Please select a valid option" 
+      />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with hint text', async () => {
+    const { container } = await render(
+      <Combobox 
+        label="Select" 
+        options={options} 
+        hint="Type to search through available options" 
+      />
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Combobox/Combobox.tsx

@@ -0,0 +1,266 @@
+import clsx from 'clsx';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import {
+  comboboxContainer,
+  comboboxInput,
+  comboboxInputVariants,
+  comboboxLabel,
+  comboboxDropdown,
+  comboboxOption,
+  comboboxOptionSelected,
+  comboboxOptionDisabled,
+  comboboxClearButton,
+  comboboxArrow,
+  comboboxNoResults,
+  comboboxHint,
+  comboboxErrorMessage,
+} from './styles.css';
+import Box from '../Box';
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+  label?: string;
+  options: ComboboxOption[];
+  value?: string;
+  onChange?: (value: string, option: ComboboxOption | null) => void;
+  onInputChange?: (inputValue: string) => void;
+  placeholder?: string;
+  hint?: string;
+  error?: boolean;
+  errorMessage?: string;
+  fullWidth?: boolean;
+  clearable?: boolean;
+  disabled?: boolean;
+  filterFn?: (option: ComboboxOption, inputValue: string) => boolean;
+}
+
+const defaultFilterFn = (option: ComboboxOption, inputValue: string): boolean => {
+  return option.label.toLowerCase().includes(inputValue.toLowerCase());
+};
+
+const Combobox = ({
+  label,
+  options,
+  value,
+  onChange,
+  onInputChange,
+  placeholder = 'Search...',
+  hint,
+  error = false,
+  errorMessage,
+  fullWidth = true,
+  clearable = true,
+  disabled = false,
+  filterFn = defaultFilterFn,
+  className,
+  ...props
+}: ComboboxProps) => {
+  const [inputValue, setInputValue] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const selectedOption = options.find(opt => opt.value === value);
+
+  useEffect(() => {
+    if (selectedOption) {
+      setInputValue(selectedOption.label);
+    } else if (!isOpen) {
+      setInputValue('');
+    }
+  }, [selectedOption, isOpen]);
+
+  const filteredOptions = options.filter(option => filterFn(option, inputValue));
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        if (selectedOption) {
+          setInputValue(selectedOption.label);
+        } else {
+          setInputValue('');
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [selectedOption]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setIsOpen(true);
+    setHighlightedIndex(-1);
+    onInputChange?.(newValue);
+
+    if (!newValue) {
+      onChange?.('', null);
+    }
+  };
+
+  const handleOptionClick = (option: ComboboxOption) => {
+    if (option.disabled) return;
+    
+    setInputValue(option.label);
+    setIsOpen(false);
+    onChange?.(option.value, option);
+  };
+
+  const handleClear = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setInputValue('');
+    setIsOpen(false);
+    onChange?.('', null);
+    inputRef.current?.focus();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (disabled) return;
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+        }
+        setHighlightedIndex(prev => 
+          prev < filteredOptions.length - 1 ? prev + 1 : prev
+        );
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+          handleOptionClick(filteredOptions[highlightedIndex]);
+        } else {
+          setIsOpen(!isOpen);
+        }
+        break;
+      case 'Escape':
+        setIsOpen(false);
+        if (selectedOption) {
+          setInputValue(selectedOption.label);
+        } else {
+          setInputValue('');
+        }
+        break;
+    }
+  };
+
+  const displayValue = selectedOption && !isOpen ? selectedOption.label : inputValue;
+
+  return (
+    <Box className={comboboxContainer} ref={containerRef} width={fullWidth ? '100%' : undefined}>
+      {label && (
+        <Box as="label" className={comboboxLabel}>
+          {label}
+        </Box>
+      )}
+      
+      <Box position="relative">
+        <Box
+          as="input"
+          ref={inputRef}
+          type="text"
+          value={displayValue}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          onFocus={() => setIsOpen(true)}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={clsx(
+            comboboxInput,
+            comboboxInputVariants[error ? 'error' : 'default'],
+            className,
+          )}
+          role="combobox"
+          aria-expanded={isOpen}
+          aria-autocomplete="list"
+          aria-controls={isOpen ? 'combobox-listbox' : undefined}
+          aria-activedescendant={highlightedIndex >= 0 ? `option-${filteredOptions[highlightedIndex]?.value}` : undefined}
+          {...props}
+        />
+        
+        {clearable && inputValue && !disabled && (
+          <Box
+            as="button"
+            className={comboboxClearButton}
+            onClick={handleClear}
+            type="button"
+            aria-label="Clear selection"
+          >
+            ×
+          </Box>
+        )}
+        
+        <Box className={comboboxArrow} aria-hidden="true">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+            <path d="M6 8L1 3h10z" />
+          </svg>
+        </Box>
+      </Box>
+
+      {isOpen && (
+        <Box
+          as="ul"
+          id="combobox-listbox"
+          className={comboboxDropdown}
+          role="listbox"
+        >
+          {filteredOptions.length === 0 ? (
+            <Box as="li" className={comboboxNoResults}>
+              No results found
+            </Box>
+          ) : (
+            filteredOptions.map((option, index) => (
+              <Box
+                key={option.value}
+                as="li"
+                id={`option-${option.value}`}
+                className={clsx(
+                  comboboxOption,
+                  option.value === value && comboboxOptionSelected,
+                  option.disabled && comboboxOptionDisabled,
+                )}
+                onClick={() => handleOptionClick(option)}
+                role="option"
+                aria-selected={option.value === value}
+                aria-disabled={option.disabled}
+                style={{
+                  backgroundColor: index === highlightedIndex ? 'var(--highlight-color, #f3f4f6)' : undefined,
+                }}
+              >
+                {option.label}
+              </Box>
+            ))
+          )}
+        </Box>
+      )}
+
+      {error && errorMessage && (
+        <Box as="div" className={comboboxErrorMessage} role="alert">
+          {errorMessage}
+        </Box>
+      )}
+
+      {hint && !error && (
+        <Box as="div" className={comboboxHint}>
+          {hint}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default Combobox;