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

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;

package/src/components/Combobox/index.ts

@@ -0,0 +1,2 @@
+export { default as Combobox } from './Combobox';
+export type { ComboboxProps, ComboboxOption } from './Combobox';

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

@@ -0,0 +1,155 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const comboboxContainer = styleWithLayer({
+  position: 'relative',
+  width: '100%',
+});
+
+export const comboboxInput = styleWithLayer({
+  width: '100%',
+  padding: '0.75rem 2.5rem 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',
+  outline: 'none',
+  transition: 'border-color 0.2s ease',
+  '::placeholder': {
+    color: vars.colors.inputPlaceholder,
+  },
+  ':focus-visible': {
+    outline: `2px solid ${vars.colors.inputBorderFocused}`,
+    outlineOffset: '2px',
+  },
+  ':hover': {
+    borderColor: vars.colors.inputBorderFocused,
+  },
+  selectors: {
+    '&:disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+      backgroundColor: vars.colors.backgroundMuted,
+    },
+    '&:disabled:hover': {
+      borderColor: vars.colors.inputBorder,
+    },
+  },
+});
+
+export const comboboxInputVariants = styleVariants({
+  default: {},
+  error: {
+    border: `1px solid ${vars.colors.alertErrorBorder}`,
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.alertErrorBorder}`,
+    },
+    ':hover': {
+      borderColor: vars.colors.alertErrorBorder,
+    },
+  },
+});
+
+export const comboboxLabel = styleWithLayer({
+  display: 'block',
+  fontSize: '14px',
+  fontWeight: '500',
+  color: vars.colors.textPrimary,
+  marginBottom: '8px',
+});
+
+export const comboboxDropdown = styleWithLayer({
+  position: 'absolute',
+  top: '100%',
+  left: 0,
+  right: 0,
+  backgroundColor: vars.colors.backgroundDefault,
+  border: `1px solid ${vars.colors.borderDefault}`,
+  borderRadius: '8px',
+  boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  maxHeight: '200px',
+  overflowY: 'auto',
+  zIndex: 50,
+  marginTop: '4px',
+});
+
+export const comboboxOption = styleWithLayer({
+  padding: '0.75rem 1rem',
+  cursor: 'pointer',
+  fontSize: '14px',
+  color: vars.colors.textPrimary,
+  transition: 'background-color 0.15s ease',
+  ':hover': {
+    backgroundColor: vars.colors.backgroundMuted,
+  },
+  ':focus-visible': {
+    outline: 'none',
+    backgroundColor: vars.colors.backgroundMuted,
+  },
+});
+
+export const comboboxOptionSelected = styleWithLayer({
+  backgroundColor: vars.colors.buttonBackgroundPrimary,
+  color: vars.colors.buttonTextPrimary,
+  ':hover': {
+    backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
+  },
+});
+
+export const comboboxOptionDisabled = styleWithLayer({
+  opacity: 0.5,
+  cursor: 'not-allowed',
+  ':hover': {
+    backgroundColor: 'transparent',
+  },
+});
+
+export const comboboxClearButton = styleWithLayer({
+  position: 'absolute',
+  right: '2.5rem',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  background: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  padding: '0.25rem',
+  color: vars.colors.textSecondary,
+  fontSize: '16px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  ':hover': {
+    color: vars.colors.textPrimary,
+  },
+});
+
+export const comboboxArrow = styleWithLayer({
+  position: 'absolute',
+  right: '0.75rem',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  pointerEvents: 'none',
+  color: vars.colors.textSecondary,
+});
+
+export const comboboxNoResults = styleWithLayer({
+  padding: '0.75rem 1rem',
+  fontSize: '14px',
+  color: vars.colors.textSecondary,
+  textAlign: 'center',
+});
+
+export const comboboxHint = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.textSecondary,
+  marginTop: '4px',
+});
+
+export const comboboxErrorMessage = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.alertErrorText,
+  marginTop: '4px',
+});

package/src/components/Container/Container.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+import { Container } from '.';
+import { Box } from '../Box';
+
+const meta = {
+  title: 'Components/Container',
+  component: Container,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Container>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DemoContent = () => (
+  <Box 
+    padding="large" 
+    background="c3-100" 
+    style={{ textAlign: 'center' }}
+  >
+    Container Content
+  </Box>
+);
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    children: <DemoContent />,
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'md',
+    children: <DemoContent />,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    children: <DemoContent />,
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    size: 'xl',
+    children: <DemoContent />,
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    size: 'full',
+    children: <DemoContent />,
+  },
+};
+
+export const LeftAligned: Story = {
+  args: {
+    size: 'md',
+    centerContent: false,
+    children: <DemoContent />,
+  },
+};