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

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,109 @@
+import clsx from 'clsx';
+import {
+  modal,
+  modalVariants,
+  modalHeader,
+  modalTitle,
+  modalCloseButton,
+  modalBody,
+  modalFooter,
+} from './styles.css';
+import React, { useEffect, useRef } from 'react';
+import Box from '../Box';
+
+export type ModalSize = 'small' | 'medium' | 'large' | 'full';
+
+export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  size?: ModalSize;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  showCloseButton?: boolean;
+}
+
+interface DialogMethods {
+  showModal: () => void;
+  close: () => void;
+  addEventListener: (event: string, handler: () => void) => void;
+  removeEventListener: (event: string, handler: () => void) => void;
+  classList: {
+    add: (className: string) => void;
+    remove: (className: string) => void;
+  };
+}
+
+const Modal = ({
+  isOpen,
+  onClose,
+  title,
+  size = 'medium',
+  children,
+  footer,
+  showCloseButton = true,
+  ...props
+}: ModalProps) => {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current as unknown as DialogMethods;
+    if (!dialog) return;
+
+    if (isOpen) {
+      dialog.showModal();
+      dialog.classList.add('open');
+    } else {
+      dialog.close();
+      dialog.classList.remove('open');
+    }
+
+    const handleClose = () => {
+      onClose();
+    };
+
+    dialog.addEventListener('close', handleClose);
+
+    return () => {
+      dialog.removeEventListener('close', handleClose);
+    };
+  }, [isOpen, onClose]);
+
+  return (
+    <Box
+      as="dialog"
+      ref={dialogRef}
+      className={clsx(modal, modalVariants[size])}
+      onClick={(e: React.MouseEvent<HTMLDialogElement>) => {
+        // Close when clicking the backdrop
+        if (e.target === dialogRef.current) {
+          onClose();
+        }
+      }}
+      {...props}
+    >
+      {title && (
+        <Box as="div" className={modalHeader}>
+          <Box as="h2" className={modalTitle}>{title}</Box>
+          {showCloseButton && (
+            <Box
+              as="button"
+              className={modalCloseButton}
+              onClick={onClose}
+              aria-label="Close modal"
+              type="button"
+            >
+              ×
+            </Box>
+          )}
+        </Box>
+      )}
+
+      <Box as="div" className={modalBody}>{children}</Box>
+
+      {footer && <Box as="div" className={modalFooter}>{footer}</Box>}
+    </Box>
+  );
+};
+
+export default Modal;

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

@@ -0,0 +1,99 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const modalVariants = styleVariants({
+  small: {
+    maxWidth: '400px',
+  },
+  medium: {
+    maxWidth: '600px',
+  },
+  large: {
+    maxWidth: '800px',
+  },
+  full: {
+    maxWidth: '95vw',
+  },
+});
+
+export const modal = styleWithLayer({
+  background: vars.colors.backgroundDefault,
+  borderRadius: '0.75rem',
+  boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+  border: '1px solid var(--modal-border, transparent)',
+  color: vars.colors.textPrimary,
+  fontFamily: vars.fontFamily.body,
+  maxWidth: '90vw',
+  maxHeight: '90vh',
+  flexDirection: 'column',
+  overflow: 'hidden',
+  selectors: {
+    '&:not([open])': {
+      display: 'none',
+    },
+    '[open] &': {
+      display: 'flex',
+    },
+    '&::backdrop': {
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    },
+  },
+});
+
+export const modalHeader = styleWithLayer({
+  padding: '1.25rem',
+  borderBottom: `1px solid ${vars.colors.borderMuted}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '1rem',
+});
+
+export const modalTitle = styleWithLayer({
+  fontFamily: vars.fontFamily.heading,
+  fontSize: '1.25rem',
+  fontWeight: '600',
+  color: vars.colors.textPrimary,
+  margin: 0,
+});
+
+export const modalCloseButton = styleWithLayer({
+  background: 'none',
+  border: 'none',
+  padding: '0.5rem',
+  cursor: 'pointer',
+  borderRadius: '0.375rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: vars.colors.textSecondary,
+  fontSize: '1.5rem',
+  lineHeight: '1',
+  transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
+  selectors: {
+    '&:hover': {
+      backgroundColor: vars.colors.borderMuted,
+      color: vars.colors.textPrimary,
+    },
+    '&:focus-visible': {
+      outline: '2px solid var(--modal-focus-ring, currentColor)',
+      outlineOffset: '2px',
+    },
+  },
+});
+
+export const modalBody = styleWithLayer({
+  padding: '1.25rem',
+  overflowY: 'auto',
+  flex: 1,
+});
+
+export const modalFooter = styleWithLayer({
+  padding: '1.25rem',
+  borderTop: `1px solid ${vars.colors.borderMuted}`,
+  display: 'flex',
+  gap: '0.75rem',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+});

package/src/components/Navbar/Navbar.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { fn } from 'storybook/test';
+
+import { Navbar, NavbarItem } from './';
+import React from 'react';
+import { P } from '../Text';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Navbar',
+  component: Navbar,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  // argTypes: {
+  //   backgroundColor: { control: 'color' },
+  // },
+  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
+} satisfies Meta<typeof Navbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary: Story = {
+  args: {
+    children: (
+      <>
+        <NavbarItem>
+          <P>Website</P>
+        </NavbarItem>
+        <NavbarItem>
+          <P>Home</P>
+        </NavbarItem>
+        <NavbarItem>
+          <P>About</P>
+        </NavbarItem>
+        <NavbarItem>
+          <P>Contact</P>
+        </NavbarItem>
+      </>
+    ),
+  },
+};

package/src/components/Navbar/Navbar.test.tsx

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Navbar from './Navbar';
+import React from 'react';
+import NavbarItem from './NavbarItem';
+
+describe('Navbar', () => {
+  it('renders navbar correctly', async () => {
+    const { container } = await render(
+      <Navbar>
+        <NavbarItem>Item 1</NavbarItem>
+        <NavbarItem>Item 2</NavbarItem>
+        <NavbarItem>Item 3</NavbarItem>
+      </Navbar>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Navbar/Navbar.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+import React from 'react';
+import { navbarStyle } from './styles.css';
+import Box from '../Box';
+
+type NavbarProps = React.HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+};
+
+const Navbar = (props: NavbarProps) => {
+  return (
+    <Box
+      as="nav"
+      width="100%"
+      display="flex"
+      flexDirection="row"
+      gap="medium"
+      className={clsx(
+        navbarStyle,
+        props.className,
+      )}
+      {...props}
+    />
+  );
+};
+
+export default Navbar;

package/src/components/Navbar/NavbarItem.tsx

@@ -0,0 +1,14 @@
+import clsx from 'clsx';
+import React from 'react';
+import { navbarItemStyle } from './styles.css';
+import Box from '../Box';
+
+type NavbarItemProps = React.HTMLAttributes<HTMLDivElement> & {
+  children?: React.ReactNode;
+};
+
+const NavbarItem = (props: NavbarItemProps) => {
+  return <Box as="div" className={clsx(navbarItemStyle, props.className)} {...props} />;
+};
+
+export default NavbarItem;

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

@@ -0,0 +1,5 @@
+import { styleWithLayer } from '../../styles/utils';
+
+export const navbarStyle = styleWithLayer({});
+
+export const navbarItemStyle = styleWithLayer({});

package/src/components/NumberInput/NumberInput.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+import { NumberInput } from '.';
+
+const meta = {
+  title: 'Components/NumberInput',
+  component: NumberInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof NumberInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Quantity',
+    value: 5,
+    min: 0,
+    max: 100,
+    step: 1,
+    onChange: fn(),
+  },
+};
+
+export const WithHint: Story = {
+  args: {
+    label: 'Items to order',
+    value: 1,
+    min: 1,
+    max: 50,
+    hint: 'Minimum order: 1, Maximum: 50',
+    onChange: fn(),
+  },
+};
+
+export const StepperLeft: Story = {
+  args: {
+    label: 'Amount',
+    value: 10,
+    stepperPosition: 'left',
+    onChange: fn(),
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Age',
+    value: 150,
+    min: 0,
+    max: 120,
+    error: true,
+    errorMessage: 'Age must be between 0 and 120',
+    onChange: fn(),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Fixed Amount',
+    value: 42,
+    disabled: true,
+    onChange: fn(),
+  },
+};
+
+export const DecimalStep: Story = {
+  args: {
+    label: 'Price',
+    value: 9.99,
+    min: 0,
+    max: 1000,
+    step: 0.01,
+    placeholder: '0.00',
+    onChange: fn(),
+  },
+};
+
+export const LargeStep: Story = {
+  args: {
+    label: 'Volume',
+    value: 100,
+    min: 0,
+    max: 1000,
+    step: 50,
+    onChange: fn(),
+  },
+};
+
+export const AllowEmpty: Story = {
+  args: {
+    label: 'Optional Count',
+    value: '',
+    allowEmpty: true,
+    placeholder: 'Leave empty for default',
+    onChange: fn(),
+  },
+};

package/src/components/NumberInput/NumberInput.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import NumberInput from './NumberInput';
+import React from 'react';
+
+describe('NumberInput', () => {
+  it('renders correctly with label', async () => {
+    const { container } = await render(
+      <NumberInput label="Quantity" value={5} />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with stepper on left', async () => {
+    const { container } = await render(
+      <NumberInput label="Amount" value={10} stepperPosition="left" />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with error state', async () => {
+    const { container } = await render(
+      <NumberInput 
+        label="Value" 
+        value={100} 
+        error={true} 
+        errorMessage="Value exceeds maximum limit" 
+      />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders disabled state', async () => {
+    const { container } = await render(
+      <NumberInput label="Read Only" value={42} disabled={true} />
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/NumberInput/NumberInput.tsx

@@ -0,0 +1,161 @@
+import clsx from 'clsx';
+import React, { useCallback } from 'react';
+import {
+  numberInputContainer,
+  numberInput,
+  numberInputVariants,
+  numberInputLabel,
+  numberInputStepper,
+  numberInputStepperLeft,
+  numberInputButton,
+  numberInputWrapper,
+  numberInputHint,
+  numberInputErrorMessage,
+} from './styles.css';
+import Box from '../Box';
+
+export type NumberInputPosition = 'right' | 'left';
+
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'min' | 'max'> {
+  label?: string;
+  value?: number | '';
+  onChange?: (value: number | '') => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  stepperPosition?: NumberInputPosition;
+  placeholder?: string;
+  hint?: string;
+  error?: boolean;
+  errorMessage?: string;
+  fullWidth?: boolean;
+  disabled?: boolean;
+  allowEmpty?: boolean;
+}
+
+const NumberInput = ({
+  label,
+  value,
+  onChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  stepperPosition = 'right',
+  placeholder = '0',
+  hint,
+  error = false,
+  errorMessage,
+  fullWidth = true,
+  disabled = false,
+  allowEmpty = true,
+  className,
+  ...props
+}: NumberInputProps) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+    
+    if (inputValue === '') {
+      if (allowEmpty) {
+        onChange?.('');
+      } else {
+        onChange?.(0);
+      }
+      return;
+    }
+    
+    const numValue = parseFloat(inputValue);
+    if (!isNaN(numValue)) {
+      const clampedValue = Math.min(Math.max(numValue, min), max);
+      onChange?.(clampedValue);
+    }
+  };
+
+  const increment = useCallback(() => {
+    const currentValue = typeof value === 'number' ? value : 0;
+    const newValue = Math.min(currentValue + step, max);
+    onChange?.(newValue);
+  }, [value, step, max, onChange]);
+
+  const decrement = useCallback(() => {
+    const currentValue = typeof value === 'number' ? value : 0;
+    const newValue = Math.max(currentValue - step, min);
+    onChange?.(newValue);
+  }, [value, step, min, onChange]);
+
+  const isIncrementDisabled = disabled || (typeof value === 'number' && value >= max);
+  const isDecrementDisabled = disabled || (typeof value === 'number' && value <= min);
+
+  const displayValue = value === '' ? '' : value;
+
+  return (
+    <Box className={numberInputWrapper} width={fullWidth ? '100%' : undefined}>
+      {label && (
+        <Box as="label" className={numberInputLabel}>
+          {label}
+        </Box>
+      )}
+      
+      <Box className={numberInputContainer}>
+        <Box
+          as="input"
+          type="number"
+          value={displayValue}
+          onChange={handleChange}
+          min={min}
+          max={max}
+          step={step}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={clsx(
+            numberInput,
+            numberInputVariants[error ? 'error' : 'default'],
+            className,
+          )}
+          {...props}
+        />
+        
+        <Box
+          className={clsx(
+            numberInputStepper,
+            stepperPosition === 'left' && numberInputStepperLeft,
+          )}
+        >
+          <Box
+            as="button"
+            className={numberInputButton}
+            onClick={increment}
+            disabled={isIncrementDisabled}
+            type="button"
+            aria-label="Increase value"
+          >
+            +
+          </Box>
+          <Box
+            as="button"
+            className={numberInputButton}
+            onClick={decrement}
+            disabled={isDecrementDisabled}
+            type="button"
+            aria-label="Decrease value"
+          >
+            −
+          </Box>
+        </Box>
+      </Box>
+
+      {error && errorMessage && (
+        <Box as="div" className={numberInputErrorMessage} role="alert">
+          {errorMessage}
+        </Box>
+      )}
+
+      {hint && !error && (
+        <Box as="div" className={numberInputHint}>
+          {hint}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default NumberInput;