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

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

@@ -0,0 +1,138 @@
+import { style, styleVariants, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+const slideInFromLeft = keyframes({
+  from: { transform: 'translateX(-100%)' },
+  to: { transform: 'translateX(0)' },
+});
+
+const slideInFromRight = keyframes({
+  from: { transform: 'translateX(100%)' },
+  to: { transform: 'translateX(0)' },
+});
+
+const slideInFromTop = keyframes({
+  from: { transform: 'translateY(-100%)' },
+  to: { transform: 'translateY(0)' },
+});
+
+const slideInFromBottom = keyframes({
+  from: { transform: 'translateY(100%)' },
+  to: { transform: 'translateY(0)' },
+});
+
+const fadeIn = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+export const drawerPositionVariants = styleVariants({
+  left: {
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: 'var(--drawer-width, 300px)',
+    maxWidth: '100vw',
+    animation: `${slideInFromLeft} 0.3s ease-out`,
+  },
+  right: {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 'var(--drawer-width, 300px)',
+    maxWidth: '100vw',
+    animation: `${slideInFromRight} 0.3s ease-out`,
+  },
+  top: {
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 'var(--drawer-height, 300px)',
+    maxHeight: '100vh',
+    animation: `${slideInFromTop} 0.3s ease-out`,
+  },
+  bottom: {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 'var(--drawer-height, 300px)',
+    maxHeight: '100vh',
+    animation: `${slideInFromBottom} 0.3s ease-out`,
+  },
+});
+
+export const drawerOverlay = styleWithLayer({
+  position: 'fixed',
+  inset: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  animation: `${fadeIn} 0.2s ease-out`,
+  zIndex: 40,
+});
+
+export const drawer = styleWithLayer({
+  position: 'fixed',
+  background: vars.colors.backgroundDefault,
+  boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+  zIndex: 50,
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+});
+
+export const drawerHeader = styleWithLayer({
+  padding: '1.25rem',
+  borderBottom: `1px solid ${vars.colors.borderMuted}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '1rem',
+});
+
+export const drawerTitle = styleWithLayer({
+  fontFamily: vars.fontFamily.heading,
+  fontSize: '1.25rem',
+  fontWeight: '600',
+  color: vars.colors.textPrimary,
+  margin: 0,
+});
+
+export const drawerCloseButton = 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(--drawer-focus-ring, currentColor)',
+      outlineOffset: '2px',
+    },
+  },
+});
+
+export const drawerBody = styleWithLayer({
+  padding: '1.25rem',
+  overflowY: 'auto',
+  flex: 1,
+});
+
+export const drawerFooter = styleWithLayer({
+  padding: '1.25rem',
+  borderTop: `1px solid ${vars.colors.borderMuted}`,
+  display: 'flex',
+  gap: '0.75rem',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+});

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+import { DropdownMenu } from '.';
+import { Button } from '../Button';
+
+const meta = {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenu,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    trigger: <Button variant="primary" label="Open Menu" />,
+    items: [
+      { label: 'Edit', onClick: fn() },
+      { label: 'Duplicate', onClick: fn() },
+      { label: 'Delete', variant: 'destructive', onClick: fn() },
+    ],
+  },
+};
+
+export const WithGroups: Story = {
+  args: {
+    trigger: <Button variant="primary" label="Menu with Groups" />,
+    groups: [
+      {
+        label: 'Actions',
+        items: [
+          { label: 'Edit', onClick: fn() },
+          { label: 'Duplicate', onClick: fn() },
+        ],
+      },
+      {
+        label: 'Danger Zone',
+        items: [
+          { label: 'Archive', onClick: fn() },
+          { label: 'Delete', variant: 'destructive', onClick: fn() },
+        ],
+      },
+    ],
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    trigger: <Button variant="primary" label="Menu with Icons" />,
+    items: [
+      { label: 'Edit', icon: '✏️', onClick: fn() },
+      { label: 'Copy', icon: '📋', onClick: fn() },
+      { label: 'Delete', icon: '🗑️', variant: 'destructive', onClick: fn() },
+    ],
+  },
+};
+
+export const PositionBottomRight: Story = {
+  args: {
+    trigger: <Button variant="primary" label="Bottom Right" />,
+    position: 'bottomRight',
+    items: [
+      { label: 'Option 1', onClick: fn() },
+      { label: 'Option 2', onClick: fn() },
+    ],
+  },
+};

package/src/components/DropdownMenu/DropdownMenu.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import DropdownMenu from './DropdownMenu';
+import React from 'react';
+import { Button } from '../Button';
+
+describe('DropdownMenu', () => {
+  const items = [
+    { label: 'Option 1', onClick: () => {} },
+    { label: 'Option 2', onClick: () => {} },
+    { label: 'Option 3', variant: 'destructive' as const, onClick: () => {} },
+  ];
+
+  it('renders with button trigger', async () => {
+    const { container } = await render(
+      <DropdownMenu trigger={<Button variant="primary" label="Open Menu" />} items={items} />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with groups', async () => {
+    const groups = [
+      {
+        label: 'Group 1',
+        items: [
+          { label: 'Item 1', onClick: () => {} },
+          { label: 'Item 2', onClick: () => {} },
+        ],
+      },
+      {
+        label: 'Group 2',
+        items: [
+          { label: 'Item 3', onClick: () => {} },
+        ],
+      },
+    ];
+    
+    const { container } = await render(
+      <DropdownMenu trigger={<Button variant="primary" label="Menu with Groups" />} groups={groups} />
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,156 @@
+import clsx from 'clsx';
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  dropdownMenuContainer,
+  dropdownMenuTrigger,
+  dropdownMenuContent,
+  dropdownMenuPositionVariants,
+  dropdownMenuItem,
+  dropdownMenuItemVariants,
+  dropdownMenuSeparator,
+  dropdownMenuGroup,
+  dropdownMenuLabel,
+} from './styles.css';
+import Box from '../Box';
+
+export type DropdownMenuPosition = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+export type DropdownMenuItemVariant = 'default' | 'destructive' | 'disabled';
+
+export interface DropdownMenuItemProps {
+  label: string;
+  onClick?: () => void;
+  variant?: DropdownMenuItemVariant;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface DropdownMenuGroupProps {
+  label?: string;
+  items: DropdownMenuItemProps[];
+}
+
+export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  trigger: React.ReactNode;
+  items?: DropdownMenuItemProps[];
+  groups?: DropdownMenuGroupProps[];
+  position?: DropdownMenuPosition;
+  closeOnItemClick?: boolean;
+}
+
+const DropdownMenu = ({
+  trigger,
+  items = [],
+  groups = [],
+  position = 'bottomLeft',
+  closeOnItemClick = true,
+  className,
+  ...props
+}: DropdownMenuProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen]);
+
+  const handleItemClick = (item: DropdownMenuItemProps) => {
+    if (item.disabled || item.variant === 'disabled') return;
+    
+    item.onClick?.();
+    if (closeOnItemClick) {
+      setIsOpen(false);
+    }
+  };
+
+  const renderItem = (item: DropdownMenuItemProps, index: number) => (
+    <Box
+      key={index}
+      as="button"
+      className={clsx(
+        dropdownMenuItem,
+        dropdownMenuItemVariants[item.disabled || item.variant === 'disabled' ? 'disabled' : item.variant || 'default'],
+      )}
+      onClick={() => handleItemClick(item)}
+      disabled={item.disabled || item.variant === 'disabled'}
+      role="menuitem"
+      type="button"
+    >
+      {item.icon && <span>{item.icon}</span>}
+      {item.label}
+    </Box>
+  );
+
+  const renderGroup = (group: DropdownMenuGroupProps, index: number) => (
+    <Box key={index} className={dropdownMenuGroup} role="group">
+      {group.label && (
+        <Box as="div" className={dropdownMenuLabel} role="presentation">
+          {group.label}
+        </Box>
+      )}
+      {group.items.map((item, itemIndex) => renderItem(item, itemIndex))}
+    </Box>
+  );
+
+  return (
+    <Box
+      ref={containerRef}
+      className={clsx(dropdownMenuContainer, className)}
+      {...props}
+    >
+      <Box
+        className={dropdownMenuTrigger}
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        {trigger}
+      </Box>
+      
+      {isOpen && (
+        <Box
+          className={clsx(dropdownMenuContent, dropdownMenuPositionVariants[position])}
+          role="menu"
+          aria-orientation="vertical"
+        >
+          {items.length > 0 && (
+            <Box className={dropdownMenuGroup}>
+              {items.map((item, index) => renderItem(item, index))}
+            </Box>
+          )}
+          
+          {groups.map((group, index) => (
+            <React.Fragment key={index}>
+              {index > 0 && <Box as="div" className={dropdownMenuSeparator} role="separator" />}
+              {renderGroup(group, index)}
+            </React.Fragment>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default DropdownMenu;

package/src/components/DropdownMenu/index.ts

@@ -0,0 +1,2 @@
+export { default as DropdownMenu } from './DropdownMenu';
+export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuPosition, DropdownMenuItemVariant } from './DropdownMenu';

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

@@ -0,0 +1,102 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const dropdownMenuContainer = styleWithLayer({
+  position: 'relative',
+  display: 'inline-block',
+});
+
+export const dropdownMenuTrigger = styleWithLayer({
+  cursor: 'pointer',
+  userSelect: 'none',
+});
+
+export const dropdownMenuContent = styleWithLayer({
+  position: 'absolute',
+  backgroundColor: vars.colors.backgroundDefault,
+  border: `1px solid ${vars.colors.borderDefault}`,
+  borderRadius: '0.5rem',
+  boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  minWidth: '160px',
+  zIndex: 50,
+  overflow: 'hidden',
+  marginTop: '0.25rem',
+});
+
+export const dropdownMenuPositionVariants = styleVariants({
+  bottomLeft: {
+    top: '100%',
+    left: 0,
+  },
+  bottomRight: {
+    top: '100%',
+    right: 0,
+  },
+  topLeft: {
+    bottom: '100%',
+    left: 0,
+    marginTop: 0,
+    marginBottom: '0.25rem',
+  },
+  topRight: {
+    bottom: '100%',
+    right: 0,
+    marginTop: 0,
+    marginBottom: '0.25rem',
+  },
+});
+
+export const dropdownMenuItem = styleWithLayer({
+  padding: '0.75rem 1rem',
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.5rem',
+  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 dropdownMenuItemVariants = styleVariants({
+  default: {},
+  destructive: {
+    color: vars.colors.alertErrorText,
+    ':hover': {
+      backgroundColor: vars.colors.alertErrorBackground,
+    },
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+    ':hover': {
+      backgroundColor: 'transparent',
+    },
+  },
+});
+
+export const dropdownMenuSeparator = styleWithLayer({
+  height: '1px',
+  backgroundColor: vars.colors.borderMuted,
+  margin: '0.5rem 0',
+});
+
+export const dropdownMenuGroup = styleWithLayer({
+  padding: '0.5rem 0',
+});
+
+export const dropdownMenuLabel = styleWithLayer({
+  padding: '0.5rem 1rem',
+  fontSize: '12px',
+  fontWeight: '600',
+  color: vars.colors.textSecondary,
+  textTransform: 'uppercase',
+  letterSpacing: '0.05em',
+});

package/src/components/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+import { EmptyState } from '.';
+
+const meta = {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof EmptyState>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    icon: <span style={{ fontSize: '48px' }}>📭</span>,
+    title: 'No items found',
+    description: 'Get started by creating a new item',
+    action: <button onClick={fn()}>Create Item</button>,
+  },
+};
+
+export const Minimal: Story = {
+  args: {
+    title: 'Nothing to display',
+  },
+};
+
+export const NoAction: Story = {
+  args: {
+    icon: <span style={{ fontSize: '48px' }}>🔍</span>,
+    title: 'No search results',
+    description: 'Try adjusting your search or filters',
+  },
+};
+
+export const NoDescription: Story = {
+  args: {
+    icon: <span style={{ fontSize: '48px' }}>📊</span>,
+    title: 'No data available',
+    action: <button onClick={fn()}>Import Data</button>,
+  },
+};

package/src/components/EmptyState/EmptyState.test.tsx

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import EmptyState from './EmptyState';
+import React from 'react';
+
+describe('EmptyState', () => {
+  it('renders with all props', async () => {
+    const { container } = await render(
+      <EmptyState
+        icon={<span>📭</span>}
+        title="No items found"
+        description="Try adjusting your filters or search criteria"
+        action={<button>Create new item</button>}
+      />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders minimal state', async () => {
+    const { container } = await render(
+      <EmptyState title="Nothing to show" />
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,53 @@
+import clsx from 'clsx';
+import React from 'react';
+import {
+  emptyState,
+  emptyStateIcon,
+  emptyStateTitle,
+  emptyStateDescription,
+  emptyStateAction,
+} from './styles.css';
+import Box from '../Box';
+
+export interface EmptyStateProps {
+  icon?: React.ReactNode;
+  title?: string;
+  description?: string;
+  action?: React.ReactNode;
+  className?: string;
+}
+
+const EmptyState = ({
+  icon,
+  title,
+  description,
+  action,
+  className,
+}: EmptyStateProps) => {
+  return (
+    <Box className={clsx(emptyState, className)} role="status">
+      {icon && (
+        <Box className={emptyStateIcon} aria-hidden="true">
+          {icon}
+        </Box>
+      )}
+      {title && (
+        <Box as="h3" className={emptyStateTitle}>
+          {title}
+        </Box>
+      )}
+      {description && (
+        <Box as="p" className={emptyStateDescription}>
+          {description}
+        </Box>
+      )}
+      {action && (
+        <Box className={emptyStateAction}>
+          {action}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default EmptyState;

package/src/components/EmptyState/index.ts

@@ -0,0 +1,2 @@
+export { default as EmptyState } from './EmptyState';
+export type { EmptyStateProps } from './EmptyState';

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

@@ -0,0 +1,36 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const emptyState = styleWithLayer({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '2rem',
+  textAlign: 'center',
+});
+
+export const emptyStateIcon = styleWithLayer({
+  fontSize: '48px',
+  marginBottom: '1rem',
+  color: vars.colors.textSecondary,
+});
+
+export const emptyStateTitle = styleWithLayer({
+  fontSize: '18px',
+  fontWeight: '600',
+  color: vars.colors.textPrimary,
+  margin: '0 0 0.5rem 0',
+});
+
+export const emptyStateDescription = styleWithLayer({
+  fontSize: '14px',
+  color: vars.colors.textSecondary,
+  margin: '0 0 1rem 0',
+  maxWidth: '400px',
+});
+
+export const emptyStateAction = styleWithLayer({
+  marginTop: '0.5rem',
+});