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

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

@@ -0,0 +1,2 @@
+export { default as Navbar } from './Navbar';
+export { default as NavbarItem } from './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;

package/src/components/NumberInput/index.ts

@@ -0,0 +1,2 @@
+export { default as NumberInput } from './NumberInput';
+export type { NumberInputProps, NumberInputPosition } from './NumberInput';

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

@@ -0,0 +1,127 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const numberInputContainer = styleWithLayer({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+});
+
+export const numberInput = styleWithLayer({
+  width: '100%',
+  padding: '0.75rem 2.5rem',
+  fontSize: '14px',
+  fontFamily: vars.fontFamily.body,
+  color: vars.colors.textPrimary,
+  backgroundColor: vars.colors.inputBackground,
+  border: `1px solid ${vars.colors.inputBorder}`,
+  borderRadius: '8px',
+  outline: 'none',
+  textAlign: 'center',
+  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 numberInputVariants = styleVariants({
+  default: {},
+  error: {
+    border: `1px solid ${vars.colors.alertErrorBorder}`,
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.alertErrorBorder}`,
+    },
+    ':hover': {
+      borderColor: vars.colors.alertErrorBorder,
+    },
+  },
+});
+
+export const numberInputLabel = styleWithLayer({
+  display: 'block',
+  fontSize: '14px',
+  fontWeight: '500',
+  color: vars.colors.textPrimary,
+  marginBottom: '8px',
+});
+
+export const numberInputStepper = styleWithLayer({
+  position: 'absolute',
+  display: 'flex',
+  flexDirection: 'column',
+  right: '0.5rem',
+  top: '50%',
+  transform: 'translateY(-50%)',
+  gap: '2px',
+});
+
+export const numberInputStepperLeft = styleWithLayer({
+  left: '0.5rem',
+  right: 'auto',
+});
+
+export const numberInputButton = styleWithLayer({
+  width: '1.5rem',
+  height: '1.25rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: vars.colors.buttonBackgroundSecondary,
+  border: `1px solid ${vars.colors.borderDefault}`,
+  borderRadius: '4px',
+  cursor: 'pointer',
+  fontSize: '12px',
+  color: vars.colors.buttonTextSecondary,
+  transition: 'all 0.15s ease',
+  padding: 0,
+  ':hover': {
+    backgroundColor: vars.colors.buttonBackgroundFocusedSecondary,
+  },
+  ':active': {
+    transform: 'scale(0.95)',
+  },
+  selectors: {
+    '&:disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+    },
+    '&:disabled:hover': {
+      backgroundColor: vars.colors.buttonBackgroundSecondary,
+    },
+  },
+});
+
+export const numberInputWrapper = styleWithLayer({
+  width: '100%',
+});
+
+export const numberInputHint = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.textSecondary,
+  marginTop: '4px',
+});
+
+export const numberInputErrorMessage = styleWithLayer({
+  fontSize: '12px',
+  color: vars.colors.alertErrorText,
+  marginTop: '4px',
+});

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { fn } from 'storybook/test';
+import React from 'react';
+
+import { Pagination } from '.';
+
+const meta = {
+  title: 'Components/Pagination',
+  component: Pagination,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: { onPageChange: fn() },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FewPages: Story = {
+  args: {
+    currentPage: 1,
+    totalPages: 5,
+  },
+};
+
+export const ManyPages: Story = {
+  args: {
+    currentPage: 5,
+    totalPages: 20,
+  },
+};
+
+export const MiddlePage: Story = {
+  args: {
+    currentPage: 10,
+    totalPages: 20,
+  },
+};
+
+export const LastPage: Story = {
+  args: {
+    currentPage: 20,
+    totalPages: 20,
+  },
+};
+
+export const NoFirstLast: Story = {
+  args: {
+    currentPage: 5,
+    totalPages: 20,
+    showFirstLast: false,
+  },
+};
+
+export const NoPrevNext: Story = {
+  args: {
+    currentPage: 5,
+    totalPages: 20,
+    showPrevNext: false,
+  },
+};

package/src/components/Pagination/Pagination.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Pagination from './Pagination';
+import React from 'react';
+
+describe('Pagination', () => {
+  it('renders correctly with few pages', async () => {
+    const { container } = await render(
+      <Pagination currentPage={1} totalPages={5} onPageChange={() => {}} />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly with many pages', async () => {
+    const { container } = await render(
+      <Pagination currentPage={5} totalPages={20} onPageChange={() => {}} />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly at last page', async () => {
+    const { container } = await render(
+      <Pagination currentPage={10} totalPages={10} onPageChange={() => {}} />
+    );
+    expect(container).toMatchScreenshot();
+  });
+});