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

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+
+import { Skeleton } from '.';
+
+const meta = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {
+  args: {
+    variant: 'text',
+    size: 'medium',
+    width: 200,
+  },
+};
+
+export const Circle: Story = {
+  args: {
+    variant: 'circle',
+    width: 48,
+    height: 48,
+  },
+};
+
+export const Rectangle: Story = {
+  args: {
+    variant: 'rectangle',
+    width: 200,
+    height: 100,
+  },
+};
+
+export const MultipleLines: Story = {
+  args: {
+    variant: 'text',
+    count: 3,
+    width: 300,
+  },
+};
+
+export const PulseAnimation: Story = {
+  args: {
+    variant: 'text',
+    animation: 'pulse',
+    width: 200,
+  },
+};
+
+export const NoAnimation: Story = {
+  args: {
+    variant: 'text',
+    animation: 'none',
+    width: 200,
+  },
+};
+
+export const DifferentSizes: Story = {
+  args: {
+    variant: 'text',
+    width: 200,
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+      <Skeleton size="small" width={200} />
+      <Skeleton size="medium" width={200} />
+      <Skeleton size="large" width={200} />
+    </div>
+  ),
+};

package/src/components/Skeleton/Skeleton.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Skeleton from './Skeleton';
+import React from 'react';
+
+describe('Skeleton', () => {
+  it('renders correctly as text variant', async () => {
+    const { container } = await render(<Skeleton variant="text" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly as circle variant', async () => {
+    const { container } = await render(<Skeleton variant="circle" width={48} height={48} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly as rectangle variant', async () => {
+    const { container } = await render(<Skeleton variant="rectangle" width={200} height={100} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders multiple skeletons with count', async () => {
+    const { container } = await render(<Skeleton count={3} />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with pulse animation', async () => {
+    const { container } = await render(<Skeleton animation="pulse" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders without animation', async () => {
+    const { container } = await render(<Skeleton animation="none" />);
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,67 @@
+import clsx from 'clsx';
+import React from 'react';
+import {
+  skeleton,
+  skeletonVariants,
+  skeletonSizes,
+  skeletonAnimation,
+} from './styles.css';
+import Box from '../Box';
+
+export type SkeletonVariant = 'text' | 'circle' | 'rectangle';
+export type SkeletonSize = 'small' | 'medium' | 'large';
+export type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: SkeletonVariant;
+  size?: SkeletonSize;
+  animation?: SkeletonAnimation;
+  width?: string | number;
+  height?: string | number;
+  count?: number;
+}
+
+const Skeleton = ({
+  variant = 'text',
+  size = 'medium',
+  animation = 'shimmer',
+  width,
+  height,
+  count = 1,
+  className,
+  ...props
+}: SkeletonProps) => {
+  const style: React.CSSProperties = {
+    width: width,
+    height: height,
+  };
+
+  const skeletons = Array.from({ length: count }, (_, index) => (
+    <Box
+      key={index}
+      as="span"
+      className={clsx(
+        skeleton,
+        skeletonVariants[variant],
+        skeletonSizes[size],
+        skeletonAnimation[animation],
+        className,
+      )}
+      style={style}
+      aria-hidden="true"
+      {...props}
+    />
+  ));
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      gap="small"
+    >
+      {skeletons}
+    </Box>
+  );
+};
+
+export default Skeleton;

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

@@ -0,0 +1,62 @@
+import { style, styleVariants, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+const shimmer = keyframes({
+  '0%': { backgroundPosition: '-200% 0' },
+  '100%': { backgroundPosition: '200% 0' },
+});
+
+const pulse = keyframes({
+  '0%, 100%': { opacity: 1 },
+  '50%': { opacity: 0.5 },
+});
+
+export const skeletonVariants = styleVariants({
+  text: {
+    borderRadius: '0.25rem',
+  },
+  circle: {
+    borderRadius: '50%',
+  },
+  rectangle: {
+    borderRadius: '0.5rem',
+  },
+});
+
+export const skeletonSizes = styleVariants({
+  small: {
+    height: '1rem',
+  },
+  medium: {
+    height: '1.5rem',
+  },
+  large: {
+    height: '2rem',
+  },
+});
+
+export const skeletonAnimation = styleVariants({
+  shimmer: {
+    background: `linear-gradient(
+      90deg,
+      ${vars.colors.borderMuted} 25%,
+      ${vars.colors.borderDefault} 50%,
+      ${vars.colors.borderMuted} 75%
+    )`,
+    backgroundSize: '200% 100%',
+    animation: `${shimmer} 1.5s ease-in-out infinite`,
+  },
+  pulse: {
+    backgroundColor: vars.colors.borderMuted,
+    animation: `${pulse} 2s ease-in-out infinite`,
+  },
+  none: {
+    backgroundColor: vars.colors.borderMuted,
+  },
+});
+
+export const skeleton = styleWithLayer({
+  width: '100%',
+  display: 'inline-block',
+});

package/src/components/Spinner/Spinner.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Spinner } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Spinner',
+  component: Spinner,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '1.5rem',
+          alignItems: 'center',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Spinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    color: 'primary',
+    size: 'medium',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'medium',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    color: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    color: 'secondary',
+  },
+};
+
+export const Success: Story = {
+  args: {
+    color: 'success',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    color: 'warning',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    color: 'error',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    color: 'info',
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <Spinner size="small" />
+      <Spinner size="medium" />
+      <Spinner size="large" />
+    </div>
+  ),
+};
+
+export const AllColors: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+      <Spinner color="primary" />
+      <Spinner color="secondary" />
+      <Spinner color="success" />
+      <Spinner color="warning" />
+      <Spinner color="error" />
+      <Spinner color="info" />
+    </div>
+  ),
+};
+
+export const WithText: Story = {
+  render: () => (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+      <Spinner size="small" />
+      <span>Loading...</span>
+    </div>
+  ),
+};

package/src/components/Spinner/Spinner.test.tsx

@@ -0,0 +1,73 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Spinner from './Spinner';
+import React from 'react';
+
+describe('Spinner', () => {
+  it('renders primary spinner correctly', async () => {
+    const { container } = await render(<Spinner />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders small spinner correctly', async () => {
+    const { container } = await render(<Spinner size="small" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders medium spinner correctly', async () => {
+    const { container } = await render(<Spinner size="medium" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders large spinner correctly', async () => {
+    const { container } = await render(<Spinner size="large" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders secondary color correctly', async () => {
+    const { container } = await render(<Spinner color="secondary" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders success color correctly', async () => {
+    const { container } = await render(<Spinner color="success" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders warning color correctly', async () => {
+    const { container } = await render(<Spinner color="warning" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders error color correctly', async () => {
+    const { container } = await render(<Spinner color="error" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders info color correctly', async () => {
+    const { container } = await render(<Spinner color="info" />);
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders div element with proper attributes', async () => {
+    const { container } = await render(<Spinner />);
+    await new Promise(resolve => setTimeout(resolve, 50));
+    const spinner = container.querySelector('[role="status"]');
+    expect(spinner).toBeInTheDocument();
+    expect(spinner.tagName).toBe('DIV');
+  });
+
+  it('has proper aria-label', async () => {
+    const { getByRole } = await render(<Spinner />);
+    const spinner = getByRole('status');
+    expect(spinner).toHaveAttribute('aria-label', 'Loading');
+  });
+
+  it('renders with custom className', async () => {
+    const { getByRole } = await render(
+      <Spinner className="custom-spinner" />,
+    );
+    const spinner = getByRole('status');
+    expect(spinner).toHaveClass('custom-spinner');
+  });
+});

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,41 @@
+import clsx from 'clsx';
+import {
+  spinner,
+  spinnerColors,
+  spinnerSizes,
+} from './styles.css';
+import React from 'react';
+import Box from '../Box';
+
+export type SpinnerColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+export type SpinnerSize = 'small' | 'medium' | 'large';
+
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  color?: SpinnerColor;
+  size?: SpinnerSize;
+  role?: string;
+}
+
+const Spinner = ({
+  color = 'primary',
+  size = 'medium',
+  role = 'status',
+  ...props
+}: SpinnerProps) => {
+  return (
+    <Box
+      as="div"
+      className={clsx(
+        spinner,
+        spinnerColors[color],
+        spinnerSizes[size],
+        props.className,
+      )}
+      role={role}
+      aria-label="Loading"
+      {...props}
+    />
+  );
+};
+
+export default Spinner;

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

@@ -0,0 +1,59 @@
+import { style, styleVariants, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+
+export const spin = keyframes({
+  '0%': { transform: 'rotate(0deg)' },
+  '100%': { transform: 'rotate(360deg)' },
+});
+
+export const spinnerColors = styleVariants({
+  primary: {
+    borderColor: vars.colors.borderDefault,
+    borderTopColor: vars.colors.buttonBackgroundPrimary,
+  },
+  secondary: {
+    borderColor: vars.colors.borderDefault,
+    borderTopColor: vars.colors.buttonBackgroundSecondary,
+  },
+  success: {
+    borderColor: vars.colors.borderDefault,
+    borderTopColor: vars.colors.alertSuccessBorder,
+  },
+  warning: {
+    borderColor: vars.colors.borderDefault,
+    borderTopColor: vars.colors.alertWarningBorder,
+  },
+  error: {
+    borderColor: vars.colors.borderDefault,
+    borderTopColor: vars.colors.alertErrorBorder,
+  },
+  info: {
+    borderColor: vars.colors.borderDefault,
+    borderTopColor: vars.colors.alertInfoBorder,
+  },
+});
+
+export const spinnerSizes = styleVariants({
+  small: {
+    width: '1rem',
+    height: '1rem',
+    borderWidth: '2px',
+  },
+  medium: {
+    width: '1.5rem',
+    height: '1.5rem',
+    borderWidth: '3px',
+  },
+  large: {
+    width: '2rem',
+    height: '2rem',
+    borderWidth: '4px',
+  },
+});
+
+export const spinner = style({
+  borderRadius: '50%',
+  borderStyle: 'solid',
+  animation: `${spin} 1s linear infinite`,
+  display: 'inline-block',
+});

package/src/components/Stack/Stack.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import React from 'react';
+import { Stack } from '.';
+import { Box } from '../Box';
+
+const meta = {
+  title: 'Components/Stack',
+  component: Stack,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Stack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DemoBox = ({ children }: { children: React.ReactNode }) => (
+  <Box 
+    padding="medium" 
+    background="c1-200" 
+    style={{ minWidth: '100px', textAlign: 'center' }}
+  >
+    {children}
+  </Box>
+);
+
+export const Vertical: Story = {
+  args: {
+    direction: 'column',
+    gap: 'medium',
+    children: (
+      <>
+        <DemoBox>Item 1</DemoBox>
+        <DemoBox>Item 2</DemoBox>
+        <DemoBox>Item 3</DemoBox>
+      </>
+    ),
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    direction: 'row',
+    gap: 'medium',
+    children: (
+      <>
+        <DemoBox>Item 1</DemoBox>
+        <DemoBox>Item 2</DemoBox>
+        <DemoBox>Item 3</DemoBox>
+      </>
+    ),
+  },
+};
+
+export const WithAlignment: Story = {
+  args: {
+    direction: 'row',
+    gap: 'small',
+    align: 'center',
+    justify: 'center',
+    children: (
+      <>
+        <DemoBox>Center</DemoBox>
+        <DemoBox>Aligned</DemoBox>
+      </>
+    ),
+  },
+};
+
+export const SpaceBetween: Story = {
+  args: {
+    direction: 'row',
+    gap: 'small',
+    justify: 'between',
+    children: (
+      <>
+        <DemoBox>Left</DemoBox>
+        <DemoBox>Right</DemoBox>
+      </>
+    ),
+  },
+};
+
+export const Wrapped: Story = {
+  args: {
+    direction: 'row',
+    gap: 'small',
+    wrap: true,
+    children: (
+      <>
+        <DemoBox>Item 1</DemoBox>
+        <DemoBox>Item 2</DemoBox>
+        <DemoBox>Item 3</DemoBox>
+        <DemoBox>Item 4</DemoBox>
+        <DemoBox>Item 5</DemoBox>
+        <DemoBox>Item 6</DemoBox>
+      </>
+    ),
+  },
+};
+
+export const DifferentGaps: Story = {
+  args: {
+    direction: 'column',
+    children: (
+      <>
+        <Stack gap="small">
+          <DemoBox>Small Gap</DemoBox>
+          <DemoBox>Item</DemoBox>
+        </Stack>
+        <Stack gap="medium" style={{ marginTop: '1rem' }}>
+          <DemoBox>Medium Gap</DemoBox>
+          <DemoBox>Item</DemoBox>
+        </Stack>
+        <Stack gap="large" style={{ marginTop: '1rem' }}>
+          <DemoBox>Large Gap</DemoBox>
+          <DemoBox>Item</DemoBox>
+        </Stack>
+      </>
+    ),
+  },
+};