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

package/src/components/Alert/Alert.test.tsx

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Alert from './Alert';
+import React from 'react';
+
+describe('Alert', () => {
+  it('renders success alert correctly', async () => {
+    const { container } = await render(
+      <Alert severity="success">Success message</Alert>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders warning alert correctly', async () => {
+    const { container } = await render(
+      <Alert severity="warning">Warning message</Alert>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders error alert correctly', async () => {
+    const { container } = await render(
+      <Alert severity="error">Error message</Alert>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders info alert correctly', async () => {
+    const { container } = await render(
+      <Alert severity="info">Info message</Alert>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders dismissible alert correctly', async () => {
+    const { container } = await render(
+      <Alert severity="info" dismissible onDismiss={() => {}}>
+        Dismissible message
+      </Alert>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('handles dismiss correctly', async () => {
+    let dismissed = false;
+    const handleDismiss = () => {
+      dismissed = true;
+    };
+    const { getByLabelText } = await render(
+      <Alert severity="info" dismissible onDismiss={handleDismiss}>
+        Dismissible message
+      </Alert>,
+    );
+    const dismissButton = getByLabelText('Dismiss alert');
+    await dismissButton.click();
+    expect(dismissed).toBe(true);
+  });
+});

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,48 @@
+import clsx from 'clsx';
+import {
+  alert,
+  alertVariants,
+  alertContent,
+  alertDismissButton,
+} from './styles.css';
+import React from 'react';
+import Box from '../Box';
+
+type AlertProps = React.HTMLAttributes<HTMLDivElement> & {
+  severity?: 'success' | 'warning' | 'error' | 'info';
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  children?: React.ReactNode;
+};
+
+const Alert = ({
+  severity = 'info',
+  dismissible = false,
+  onDismiss,
+  children,
+  ...props
+}: AlertProps) => {
+  return (
+    <Box
+      as="div"
+      role="alert"
+      className={clsx(alert, alertVariants[severity], props.className)}
+      {...props}
+    >
+      <Box as="div" className={alertContent}>{children}</Box>
+      {dismissible && onDismiss && (
+        <Box
+          as="button"
+          className={alertDismissButton}
+          onClick={onDismiss}
+          aria-label="Dismiss alert"
+          type="button"
+        >
+          ×
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default Alert;

package/src/components/Alert/index.ts

@@ -0,0 +1 @@
+export { default as Alert } from './Alert';

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

@@ -0,0 +1,58 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const alertVariants = styleVariants({
+  success: {
+    backgroundColor: vars.colors.alertSuccessBackground,
+    borderLeftColor: vars.colors.alertSuccessBorder,
+    color: vars.colors.alertSuccessText,
+  },
+  warning: {
+    backgroundColor: vars.colors.alertWarningBackground,
+    borderLeftColor: vars.colors.alertWarningBorder,
+    color: vars.colors.alertWarningText,
+  },
+  error: {
+    backgroundColor: vars.colors.alertErrorBackground,
+    borderLeftColor: vars.colors.alertErrorBorder,
+    color: vars.colors.alertErrorText,
+  },
+  info: {
+    backgroundColor: vars.colors.alertInfoBackground,
+    borderLeftColor: vars.colors.alertInfoBorder,
+    color: vars.colors.alertInfoText,
+  },
+});
+
+export const alert = styleWithLayer({
+  padding: '1rem',
+  borderLeft: '4px solid',
+  borderRadius: '0.5rem',
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: '0.5rem',
+  fontFamily: vars.fontFamily.body,
+  fontSize: '0.875rem',
+  lineHeight: '1.5',
+});
+
+export const alertContent = styleWithLayer({
+  flex: 1,
+});
+
+export const alertDismissButton = styleWithLayer({
+  background: 'none',
+  border: 'none',
+  padding: '0.25rem',
+  cursor: 'pointer',
+  borderRadius: '0.25rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  opacity: 0.7,
+  transition: 'opacity 0.2s ease-in-out',
+  ':hover': {
+    opacity: 1,
+  },
+});

package/src/components/AspectRatio/AspectRatio.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+import { AspectRatio } from '.';
+import { Box } from '../Box';
+
+const meta = {
+  title: 'Components/AspectRatio',
+  component: AspectRatio,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AspectRatio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DemoContent = ({ children }: { children: React.ReactNode }) => (
+  <Box 
+    background="c4-200" 
+    style={{ 
+      width: '100%', 
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }}
+  >
+    {children}
+  </Box>
+);
+
+export const Square: Story = {
+  args: {
+    ratio: '1/1',
+    style: { width: '200px' },
+    children: <DemoContent>Square (1:1)</DemoContent>,
+  },
+};
+
+export const FourThree: Story = {
+  args: {
+    ratio: '4/3',
+    style: { width: '240px' },
+    children: <DemoContent>4:3 Ratio</DemoContent>,
+  },
+};
+
+export const SixteenNine: Story = {
+  args: {
+    ratio: '16/9',
+    style: { width: '320px' },
+    children: <DemoContent>16:9 Widescreen</DemoContent>,
+  },
+};
+
+export const UltraWide: Story = {
+  args: {
+    ratio: '21/9',
+    style: { width: '420px' },
+    children: <DemoContent>21:9 Ultra-wide</DemoContent>,
+  },
+};
+
+export const NumericRatio: Story = {
+  args: {
+    ratio: 1.618,
+    style: { width: '300px' },
+    children: <DemoContent>Golden Ratio</DemoContent>,
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    ratio: '16/9',
+    style: { width: '400px' },
+    children: (
+      <img 
+        src="https://via.placeholder.com/800x450" 
+        alt="Example" 
+        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+      />
+    ),
+  },
+};

package/src/components/AspectRatio/AspectRatio.test.tsx

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import AspectRatio from './AspectRatio';
+import React from 'react';
+
+describe('AspectRatio', () => {
+  it('renders with 1:1 ratio', async () => {
+    const { container } = await render(
+      <AspectRatio ratio="1/1" style={{ width: '200px' }}>
+        <div style={{ backgroundColor: '#ccc', width: '100%', height: '100%' }}>
+          Square
+        </div>
+      </AspectRatio>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with 16:9 ratio', async () => {
+    const { container } = await render(
+      <AspectRatio ratio="16/9" style={{ width: '320px' }}>
+        <div style={{ backgroundColor: '#ddd', width: '100%', height: '100%' }}>
+          Widescreen
+        </div>
+      </AspectRatio>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with 4:3 ratio', async () => {
+    const { container } = await render(
+      <AspectRatio ratio="4/3" style={{ width: '240px' }}>
+        <div style={{ backgroundColor: '#eee', width: '100%', height: '100%' }}>
+          Standard
+        </div>
+      </AspectRatio>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with numeric ratio', async () => {
+    const { container } = await render(
+      <AspectRatio ratio={1.5} style={{ width: '300px' }}>
+        <div style={{ backgroundColor: '#f0f0f0', width: '100%', height: '100%' }}>
+          Custom Ratio
+        </div>
+      </AspectRatio>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from 'react';
+import Box, { type BoxProps } from '../Box';
+
+export type AspectRatioValue = '1/1' | '4/3' | '16/9' | '21/9' | number;
+
+export interface AspectRatioProps extends BoxProps {
+  ratio?: AspectRatioValue;
+  children?: React.ReactNode;
+}
+
+const AspectRatio = forwardRef<HTMLElement, AspectRatioProps>(
+  ({ ratio = '1/1', children, ...props }, ref) => {
+    const aspectRatio = typeof ratio === 'number' ? ratio : ratio;
+
+    return (
+      <Box
+        ref={ref}
+        position="relative"
+        style={{
+          aspectRatio,
+          overflow: 'hidden',
+        }}
+        {...props}
+      >
+        <Box
+          position="absolute"
+          width="100%"
+          height="100%"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+        >
+          {children}
+        </Box>
+      </Box>
+    );
+  }
+);
+
+AspectRatio.displayName = 'AspectRatio';
+
+export default AspectRatio;

package/src/components/AspectRatio/index.ts

@@ -0,0 +1,2 @@
+export { default as AspectRatio } from './AspectRatio';
+export type { AspectRatioProps, AspectRatioValue } from './AspectRatio';

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { Avatar } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Avatar',
+  component: Avatar,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'JD',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    children: 'AB',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'medium',
+    children: 'CD',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    children: 'EF',
+  },
+};
+
+export const XLarge: Story = {
+  args: {
+    size: 'xlarge',
+    children: 'GH',
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    size: 'large',
+    src: 'https://i.pravatar.cc/150?img=1',
+    alt: 'John Doe',
+  },
+};
+
+export const WithFallback: Story = {
+  args: {
+    fallback: 'JK',
+    alt: 'Jane Kennedy',
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    size: 'large',
+    children: 'LM',
+  },
+};
+
+export const AvatarGroup: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '-8px', alignItems: 'center' }}>
+      <Avatar size="small" children="A" src="https://i.pravatar.cc/150?img=1" />
+      <Avatar size="small" children="B" src="https://i.pravatar.cc/150?img=2" />
+      <Avatar size="small" children="C" src="https://i.pravatar.cc/150?img=3" />
+      <Avatar size="small" children="+3" />
+    </div>
+  ),
+};

package/src/components/Avatar/Avatar.test.tsx

@@ -0,0 +1,45 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Avatar from './Avatar';
+import React from 'react';
+
+describe('Avatar', () => {
+  it('renders avatar with initials correctly', async () => {
+    const { container } = await render(<Avatar initials="JD" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders small avatar correctly', async () => {
+    const { container } = await render(<Avatar size="small" initials="AB" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders large avatar correctly', async () => {
+    const { container } = await render(<Avatar size="large" initials="XY" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders xlarge avatar correctly', async () => {
+    const { container } = await render(<Avatar size="xlarge" initials="ZZ" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders avatar with image correctly', async () => {
+    const { container } = await render(
+      <Avatar src="https://i.pravatar.cc/150?img=1" alt="John Doe" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders avatar with fallback correctly', async () => {
+    const { container } = await render(
+      <Avatar fallback="JD" alt="John Doe" />,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders avatar with children correctly', async () => {
+    const { container } = await render(<Avatar>CH</Avatar>);
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,51 @@
+import clsx from 'clsx';
+import React from 'react';
+import { avatar, avatarImage, avatarWithImage, avatarWrapper } from './styles.css';
+import Box from '../Box';
+
+type AvatarProps = {
+  alt?: string;
+  className?: string;
+  src?: string;
+  size?: 'small' | 'medium' | 'large' | 'xlarge';
+  children?: React.ReactNode;
+  fallback?: string;
+};
+
+const Avatar = ({
+  alt,
+  className,
+  src,
+  size = 'medium',
+  children,
+  fallback,
+}: AvatarProps) => {
+  const sizeClass = avatar[size];
+
+  if (src) {
+    return (
+      <Box className={clsx(avatarWrapper, className)} display="inline">
+        <Box
+          as="img"
+          src={src}
+          alt={alt || 'Avatar'}
+          className={clsx(avatarWithImage[size], avatarImage)}
+        />
+      </Box>
+    );
+  }
+
+  const initials = children || fallback;
+
+  return (
+    <Box
+      className={clsx(sizeClass, className)}
+      role="img"
+      aria-label={alt}
+    >
+      {initials}
+    </Box>
+  );
+};
+
+export default Avatar;

package/src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar';