tharaday 0.1.1

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Dropdown } from './Dropdown.tsx';
+
+const meta: Meta<typeof Dropdown> = {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs'],
+  argTypes: {
+    onChange: { action: 'changed' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dropdown>;
+
+const options = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry', description: 'Sweet red fruit' },
+  { value: 'dragonfruit', label: 'Dragonfruit', disabled: true },
+  { value: 'elderberry', label: 'Elderberry' },
+];
+
+export const Default: Story = {
+  args: {
+    options,
+    placeholder: 'Select a fruit',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    options,
+    label: 'Fruits',
+    helperText: 'Choose your favorite fruit',
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    options,
+    label: 'Prefilled',
+    defaultValue: 'cherry',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    options,
+    label: 'Fruit selection',
+    error: true,
+    helperText: 'This field is required',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    options,
+    label: 'Disabled dropdown',
+    disabled: true,
+  },
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <Dropdown options={options} size="sm" placeholder="Small" />
+      <Dropdown options={options} size="md" placeholder="Medium" />
+      <Dropdown options={options} size="lg" placeholder="Large" />
+    </div>
+  ),
+};
+
+export const FullWidth: Story = {
+  args: {
+    options,
+    label: 'Full Width',
+    fullWidth: true,
+  },
+  render: (args) => (
+    <div style={{ width: '400px' }}>
+      <Dropdown {...args} />
+    </div>
+  ),
+};

package/src/components/Dropdown/Dropdown.tsx

@@ -0,0 +1,251 @@
+import clsx from 'clsx';
+import { useId, useState, useRef, useEffect } from 'react';
+
+import styles from './Dropdown.module.css';
+import type { DropdownProps, DropdownOption } from './Dropdown.types.ts';
+
+export const Dropdown = ({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  placeholder = 'Select an option',
+  label,
+  helperText,
+  error,
+  disabled,
+  size = 'md',
+  className,
+  id,
+  fullWidth = false,
+}: DropdownProps) => {
+  const baseId = useId();
+  const componentId = id ?? `ds-dropdown-${baseId}`;
+  const helperId = helperText ? `${componentId}-help` : undefined;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+
+  const currentValue = value !== undefined ? value : internalValue;
+  const selectedOption = options.find((opt) => opt.value === currentValue);
+  const activeOptionId = focusedIndex >= 0 ? `${componentId}-opt-${focusedIndex}` : undefined;
+
+  const toggleDropdown = () => {
+    if (!disabled) {
+      const nextIsOpen = !isOpen;
+      setIsOpen(nextIsOpen);
+
+      if (nextIsOpen) {
+        if (focusedIndex === -1) {
+          const selectedIdx = options.findIndex((opt) => opt.value === currentValue);
+          setFocusedIndex(selectedIdx >= 0 ? selectedIdx : 0);
+        }
+      } else {
+        setFocusedIndex(-1);
+      }
+    }
+  };
+
+  const handleOptionClick = (option: DropdownOption, index: number) => {
+    if (option.disabled) {
+      return;
+    }
+
+    if (value === undefined) {
+      setInternalValue(option.value);
+    }
+
+    onChange?.(option.value);
+    setIsOpen(false);
+    setFocusedIndex(index);
+    triggerRef.current?.focus();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (disabled) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(options.findIndex((opt) => opt.value === currentValue) || 0);
+        } else {
+          setFocusedIndex((prev) => (prev < options.length - 1 ? prev + 1 : prev));
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(
+            options.findIndex((opt) => opt.value === currentValue) || options.length - 1
+          );
+        } else {
+          setFocusedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+        }
+        break;
+      case 'Enter':
+      case ' ':
+        event.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(options.findIndex((opt) => opt.value === currentValue) || 0);
+        } else if (focusedIndex >= 0) {
+          handleOptionClick(options[focusedIndex], focusedIndex);
+        }
+        break;
+      case 'Escape':
+        if (isOpen) {
+          event.preventDefault();
+          setIsOpen(false);
+          setFocusedIndex(-1);
+          triggerRef.current?.focus();
+        }
+        break;
+      case 'Tab':
+        if (isOpen) {
+          setIsOpen(false);
+          setFocusedIndex(-1);
+        }
+        break;
+      case 'Home':
+        if (isOpen) {
+          event.preventDefault();
+          setFocusedIndex(0);
+        }
+        break;
+      case 'End':
+        if (isOpen) {
+          event.preventDefault();
+          setFocusedIndex(options.length - 1);
+        }
+        break;
+      default:
+        break;
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen && focusedIndex >= 0) {
+      const element = document.getElementById(`${componentId}-opt-${focusedIndex}`);
+      element?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [focusedIndex, isOpen, componentId]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div
+      className={clsx(
+        styles.wrapper,
+        styles[size],
+        fullWidth && styles.fullWidth,
+        error && styles.error,
+        className
+      )}
+      ref={containerRef}
+    >
+      {label && (
+        <label htmlFor={componentId} className={styles.label}>
+          {label}
+        </label>
+      )}
+      <div className={styles.container}>
+        <button
+          id={componentId}
+          ref={triggerRef}
+          type="button"
+          className={clsx(styles.trigger, isOpen && styles.isOpen)}
+          onClick={toggleDropdown}
+          onKeyDown={handleKeyDown}
+          disabled={disabled}
+          aria-haspopup="listbox"
+          aria-expanded={isOpen}
+          aria-describedby={helperId}
+          aria-invalid={error || undefined}
+          aria-controls={isOpen ? `${componentId}-menu` : undefined}
+          aria-activedescendant={isOpen ? activeOptionId : undefined}
+        >
+          <span className={styles.selectedLabel}>
+            {selectedOption ? selectedOption.label : placeholder}
+          </span>
+          <span className={styles.icon} aria-hidden="true">
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 12 12"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2.5 4.5L6 8L9.5 4.5"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </span>
+        </button>
+
+        {isOpen && (
+          <ul
+            id={`${componentId}-menu`}
+            className={styles.menu}
+            role="listbox"
+            aria-labelledby={label ? undefined : componentId}
+          >
+            {options.map((option, index) => {
+              const isSelected = option.value === currentValue;
+              const isFocused = index === focusedIndex;
+              return (
+                <li
+                  key={option.value}
+                  id={`${componentId}-opt-${index}`}
+                  role="option"
+                  aria-selected={isSelected}
+                  className={clsx(
+                    styles.option,
+                    isSelected && styles.optionSelected,
+                    isFocused && styles.optionFocused,
+                    option.disabled && styles.optionDisabled
+                  )}
+                  onClick={() => handleOptionClick(option, index)}
+                  onMouseEnter={() => !option.disabled && setFocusedIndex(index)}
+                >
+                  <span className={styles.optionLabel}>{option.label}</span>
+                  {option.description && (
+                    <span className={styles.optionDescription}>{option.description}</span>
+                  )}
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+      {helperText && (
+        <span id={helperId} className={clsx(styles.helperText, error && styles.errorText)}>
+          {helperText}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/components/Dropdown/Dropdown.types.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+
+export type DropdownSize = 'sm' | 'md' | 'lg';
+
+export interface DropdownOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+  icon?: ReactNode;
+  description?: string;
+}
+
+export interface DropdownProps {
+  options: DropdownOption[];
+  value?: string | number;
+  defaultValue?: string | number;
+  onChange?: (value: string | number) => void;
+  placeholder?: string;
+  label?: string;
+  helperText?: string;
+  error?: boolean;
+  disabled?: boolean;
+  size?: DropdownSize;
+  className?: string;
+  id?: string;
+  fullWidth?: boolean;
+}

package/src/components/Header/Header.module.css

@@ -0,0 +1,38 @@
+.root {
+  background-color: var(--ds-surface-0);
+  border-bottom: 1px solid var(--ds-border-1);
+  padding: var(--ds-space-3) 0;
+  width: 100%;
+}
+
+.container {
+  max-width: 75rem;
+  margin: 0 auto;
+  padding: 0 var(--ds-space-4);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sideContainer {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+}
+
+svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.title {
+  display: inline-block;
+  vertical-align: top;
+  font-weight: var(--ds-font-weight-bold);
+  font-size: var(--ds-font-size-lg);
+  line-height: var(--ds-line-height-tight);
+}
+
+.welcome {
+  font-size: var(--ds-font-size-sm);
+}

package/src/components/Header/Header.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { Header } from './Header.tsx';
+
+const meta = {
+  title: 'Components/Header',
+  component: Header,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    onLogin: fn(),
+    onLogout: fn(),
+    onCreateAccount: fn(),
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const logo = (
+  <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fillRule="evenodd">
+      <path
+        d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+        fill="#FFF"
+      />
+      <path d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z" fill="#555AB9" />
+      <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+    </g>
+  </svg>
+);
+
+const title = 'Company';
+
+export const LoggedIn: Story = {
+  args: {
+    logo,
+    title,
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {
+  args: {
+    logo,
+    title,
+  },
+};

package/src/components/Header/Header.tsx

@@ -0,0 +1,49 @@
+import './Header.module.css';
+import styles from './Header.module.css';
+import type { HeaderProps } from './Header.types.ts';
+import { Button } from '../Button/Button.tsx';
+import type { ButtonProps } from '../Button/Button.types.ts';
+
+export const Header = ({
+  id,
+  logo,
+  title,
+  user,
+  onLogin,
+  onLogout,
+  onCreateAccount,
+}: HeaderProps) => {
+  const buttonProps = { size: 'sm', intent: 'info' } as ButtonProps;
+
+  return (
+    <header id={id} className={styles.root}>
+      <div className={styles.container}>
+        <div className={styles.sideContainer}>
+          {logo}
+          <h1 className={styles.title}>{title}</h1>
+        </div>
+        <div className={styles.sideContainer}>
+          {user ? (
+            <>
+              <span className={styles.welcome}>
+                Welcome, <b>{user.name}</b>!
+              </span>
+              <Button {...buttonProps} onClick={onLogout} children="Log out" />
+            </>
+          ) : (
+            <>
+              <Button {...buttonProps} onClick={onLogin} children="Log in" />
+              <Button
+                size="sm"
+                intent="info"
+                variant="solid"
+                onClick={onCreateAccount}
+                children="Sign up"
+              />
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+};

package/src/components/Header/Header.types.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+type User = {
+  name: string;
+};
+
+export interface HeaderProps {
+  id?: string;
+  logo?: ReactNode;
+  title?: string;
+  user?: User;
+  onLogin?: () => void;
+  onLogout?: () => void;
+  onCreateAccount?: () => void;
+}

package/src/components/Input/Input.module.css

@@ -0,0 +1,87 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
+  width: 100%;
+}
+
+.label {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-text-1);
+}
+
+.inputRoot {
+  box-sizing: border-box;
+  width: 100%;
+  font-family: var(--ds-font-family-base);
+  border: 1px solid var(--ds-border-1);
+  border-radius: var(--ds-radius-md);
+  background-color: var(--ds-surface-0);
+  color: var(--ds-text-1);
+  transition:
+    border-color var(--ds-transition-fast),
+    box-shadow var(--ds-transition-fast);
+}
+
+.inputRoot:focus {
+  outline: none;
+  border-color: var(--ds-ring);
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}
+
+.inputRoot::placeholder {
+  color: var(--ds-text-2);
+}
+
+.inputRoot:disabled {
+  background-color: var(--ds-surface-1);
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+/* Sizes */
+.sm {
+  height: var(--ds-space-8);
+  padding: 0 var(--ds-space-3);
+  font-size: var(--ds-font-size-xs);
+}
+
+.md {
+  height: var(
+    --ds-space-10,
+    2.5rem
+  ); /* tokens.css doesn't have space-10, but Button uses 2.5 * space-4 */
+  height: calc(var(--ds-space-4) * 2.5);
+  padding: 0 var(--ds-space-4);
+  font-size: var(--ds-font-size-sm);
+}
+
+.lg {
+  height: var(--ds-space-12);
+  padding: 0 var(--ds-space-5, 1.25rem);
+  font-size: var(--ds-font-size-base);
+}
+
+/* Error state */
+.error {
+  border-color: var(--ds-danger);
+}
+
+.error:focus {
+  border-color: var(--ds-danger);
+  box-shadow: 0 0 0 0.125rem var(--ds-danger-subtle);
+}
+
+.helperText {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-xs);
+  color: var(--ds-text-2);
+}
+
+.helperText.errorText {
+  color: var(--ds-danger);
+}

package/src/components/Input/Input.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Input } from './Input.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Input',
+  component: Input,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    error: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Email',
+    placeholder: 'Enter your email',
+    helperText: 'We will never share your email.',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Enter password',
+    error: true,
+    helperText: 'Password is too short.',
+    defaultValue: '123',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Username',
+    placeholder: 'Enter username',
+    disabled: true,
+    defaultValue: 'janedoe',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    label: 'Small Input',
+    placeholder: 'Small input',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    label: 'Large Input',
+    placeholder: 'Large input',
+  },
+};
+
+export const All: Story = {
+  name: 'Gallery',
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={8} width="400px">
+      {(['sm', 'md', 'lg'] as const).map((size) => (
+        <Box key={size} display="flex" flexDirection="column" gap={4}>
+          <Box as="h3" m={0} style={{ textTransform: 'capitalize' }}>
+            Size: {size}
+          </Box>
+          <Input size={size} label="Default" placeholder="Default placeholder" />
+          <Input
+            size={size}
+            label="With Error"
+            placeholder="Error placeholder"
+            error
+            helperText="This field is required"
+          />
+          <Input
+            size={size}
+            label="Disabled"
+            placeholder="Disabled placeholder"
+            disabled
+            defaultValue="Some value"
+          />
+        </Box>
+      ))}
+    </Box>
+  ),
+};