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

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

@@ -0,0 +1,2 @@
+export { default as Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerColor, SpinnerSize } from './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>
+      </>
+    ),
+  },
+};

package/src/components/Stack/Stack.test.tsx

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Stack from './Stack';
+import React from 'react';
+
+describe('Stack', () => {
+  it('renders vertical stack correctly', async () => {
+    const { container } = await render(
+      <Stack gap="medium">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </Stack>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders horizontal stack correctly', async () => {
+    const { container } = await render(
+      <Stack direction="row" gap="small">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </Stack>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with align and justify', async () => {
+    const { container } = await render(
+      <Stack direction="row" align="center" justify="between" gap="medium">
+        <div>Left</div>
+        <div>Right</div>
+      </Stack>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders wrapped stack', async () => {
+    const { container } = await render(
+      <Stack direction="row" gap="small" wrap>
+        <div style={{ minWidth: '200px' }}>Item 1</div>
+        <div style={{ minWidth: '200px' }}>Item 2</div>
+        <div style={{ minWidth: '200px' }}>Item 3</div>
+      </Stack>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Stack/Stack.tsx

@@ -0,0 +1,60 @@
+import React, { forwardRef } from 'react';
+import Box from '../Box';
+
+export type StackDirection = 'row' | 'column';
+export type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+export type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+
+export interface StackProps {
+  direction?: StackDirection;
+  align?: StackAlign;
+  justify?: StackJustify;
+  gap?: 'none' | 'small' | 'medium' | 'large';
+  wrap?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const alignMap: Record<StackAlign, string> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  stretch: 'stretch',
+};
+
+const justifyMap: Record<StackJustify, string> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  between: 'space-between',
+  around: 'space-around',
+  evenly: 'space-evenly',
+};
+
+const Stack = forwardRef<HTMLElement, StackProps>(
+  ({ direction = 'column', align, justify, gap, wrap, children, className, style, ...rest }, ref) => {
+    const alignItems = align ? alignMap[align] : undefined;
+    const justifyContent = justify ? justifyMap[justify] : undefined;
+    
+    return (
+      <Box
+        ref={ref}
+        display="flex"
+        flexDirection={direction}
+        alignItems={alignItems}
+        justifyContent={justifyContent}
+        gap={gap}
+        className={className}
+        style={{ flexWrap: wrap ? 'wrap' : undefined, ...style }}
+        {...rest}
+      >
+        {children}
+      </Box>
+    );
+  }
+);
+
+Stack.displayName = 'Stack';
+
+export default Stack;

package/src/components/Stack/index.ts

@@ -0,0 +1,2 @@
+export { default as Stack } from './Stack';
+export type { StackProps, StackDirection, StackAlign, StackJustify } from './Stack';