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

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/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/styles.css.ts

@@ -0,0 +1,155 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const avatar = styleVariants({
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: vars.colors.backgroundMuted,
+    color: vars.colors.textPrimary,
+    fontFamily: vars.fontFamily.body,
+    fontWeight: '500',
+    overflow: 'hidden',
+    userSelect: 'none',
+    textDecoration: 'none',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  small: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: vars.colors.backgroundMuted,
+    color: vars.colors.textPrimary,
+    fontFamily: vars.fontFamily.body,
+    fontWeight: '500',
+    overflow: 'hidden',
+    userSelect: 'none',
+    textDecoration: 'none',
+    width: '24px',
+    height: '24px',
+    fontSize: '12px',
+    borderRadius: '12px',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  medium: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: vars.colors.backgroundMuted,
+    color: vars.colors.textPrimary,
+    fontFamily: vars.fontFamily.body,
+    fontWeight: '500',
+    overflow: 'hidden',
+    userSelect: 'none',
+    textDecoration: 'none',
+    width: '32px',
+    height: '32px',
+    fontSize: '14px',
+    borderRadius: '16px',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  large: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: vars.colors.backgroundMuted,
+    color: vars.colors.textPrimary,
+    fontFamily: vars.fontFamily.body,
+    fontWeight: '500',
+    overflow: 'hidden',
+    userSelect: 'none',
+    textDecoration: 'none',
+    width: '40px',
+    height: '40px',
+    fontSize: '16px',
+    borderRadius: '20px',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  xlarge: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: vars.colors.backgroundMuted,
+    color: vars.colors.textPrimary,
+    fontFamily: vars.fontFamily.body,
+    fontWeight: '500',
+    overflow: 'hidden',
+    userSelect: 'none',
+    textDecoration: 'none',
+    width: '64px',
+    height: '64px',
+    fontSize: '24px',
+    borderRadius: '32px',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+});
+
+export const avatarImage = style({
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+});
+
+export const avatarWithImage = styleVariants({
+  small: {
+    width: '24px',
+    height: '24px',
+    borderRadius: '12px',
+    overflow: 'hidden',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  medium: {
+    width: '32px',
+    height: '32px',
+    borderRadius: '16px',
+    overflow: 'hidden',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  large: {
+    width: '40px',
+    height: '40px',
+    borderRadius: '20px',
+    overflow: 'hidden',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+  xlarge: {
+    width: '64px',
+    height: '64px',
+    borderRadius: '32px',
+    overflow: 'hidden',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+  },
+});
+
+export const avatarWrapper = styleWithLayer({
+  display: 'inline-flex',
+});

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Badge } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1rem',
+          alignItems: 'flex-start',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default Badge',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'success',
+    children: 'Success',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: 'warning',
+    children: 'Warning',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: 'error',
+    children: 'Error',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    variant: 'info',
+    children: 'Info',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    children: 'Small Badge',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'medium',
+    children: 'Medium Badge',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    children: 'Large Badge',
+  },
+};
+
+export const Dot: Story = {
+  args: {
+    dot: true,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <>
+      <Badge variant="default">Default</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="error">Error</Badge>
+      <Badge variant="info">Info</Badge>
+    </>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <>
+      <Badge size="small">Small</Badge>
+      <Badge size="medium">Medium</Badge>
+      <Badge size="large">Large</Badge>
+    </>
+  ),
+};
+
+export const AllDots: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
+      <Badge variant="default" dot />
+      <Badge variant="success" dot />
+      <Badge variant="warning" dot />
+      <Badge variant="error" dot />
+      <Badge variant="info" dot />
+    </div>
+  ),
+};
+
+export const Combined: Story = {
+  render: () => (
+    <>
+      <Badge variant="default" size="small">
+        Small Default
+      </Badge>
+      <Badge variant="success" size="medium">
+        Medium Success
+      </Badge>
+      <Badge variant="error" size="large">
+        Large Error
+      </Badge>
+    </>
+  ),
+};