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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jordan-mace/chaser-design-system",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "type": "module",
   "sideEffects": [
     "*.css.js"
@@ -11,24 +11,26 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     },
     "./cssReset.css": {
-      "import": "./dist/styles/reset.css.js",
-      "types": "./dist/styles/reset.css.d.ts"
+      "types": "./dist/styles/reset.css.d.ts",
+      "default": "./src/styles/reset.css.ts"
     },
     "./layers.css": {
-      "import": "./dist/styles/layers.css.js",
-      "types": "./dist/styles/layers.css.d.ts"
+      "types": "./dist/styles/layers.css.d.ts",
+      "default": "./src/styles/layers.css.ts"
     },
     "./theme.css": {
-      "import": "./dist/styles/theme.css.js",
-      "types": "./dist/styles/theme.css.d.ts"
+      "types": "./dist/styles/theme.css.d.ts",
+      "default": "./src/styles/theme.css.ts"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "devDependencies": {
     "@eslint/js": "^9.39.0",
@@ -44,11 +46,13 @@
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.6",
     "@types/react-dom": "^19.2.3",
+    "@vanilla-extract/esbuild-plugin": "^2.3.21",
     "@vanilla-extract/vite-plugin": "^5.1.1",
     "@vanilla-extract/webpack-plugin": "^2.3.22",
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/browser-playwright": "^4.0.10",
     "css-loader": "^7.1.2",
+    "esbuild": "^0.27.3",
     "eslint": "^9.39.0",
     "eslint-plugin-storybook": "^10.0.8",
     "globals": "^16.4.0",
@@ -58,6 +62,7 @@
     "storybook": "^10.1.8",
     "storybook-addon-rslib": "^3.1.0",
     "storybook-react-rsbuild": "^3.1.0",
+    "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.2",
     "vitest": "^4.0.10",
@@ -74,8 +79,8 @@
     "@rsbuild/core": "^1.6.14"
   },
   "scripts": {
-    "build": "rslib build",
-    "dev": "rslib build --watch",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
     "format": "prettier --write .",
     "lint": "eslint .",
     "test": "vitest --config=vitest.browser.config.ts",

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Accordion } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion>
+      <Accordion.Item value="section1" title="What is the design system?">
+        <p>
+          A design system is a collection of reusable components, guided by clear
+          standards, that can be assembled to build any number of interfaces.
+        </p>
+      </Accordion.Item>
+      <Accordion.Item value="section2" title="Why use it?">
+        <p>
+          It helps teams build products faster, ensures consistency across products,
+          and makes it easier to maintain and scale the UI.
+        </p>
+      </Accordion.Item>
+      <Accordion.Item value="section3" title="How to get started?">
+        <p>
+          Install the package, import the components you need, and start
+          building your application with consistent styling.
+        </p>
+      </Accordion.Item>
+    </Accordion>
+  ),
+};
+
+export const WithDefaultExpanded: Story = {
+  render: () => (
+    <Accordion>
+      <Accordion.Item value="section1" title="Getting Started" defaultExpanded>
+        <p>Follow these steps to begin using the design system.</p>
+      </Accordion.Item>
+      <Accordion.Item value="section2" title="Components">
+        <p>Browse through all available components in the library.</p>
+      </Accordion.Item>
+      <Accordion.Item value="section3" title="Theming">
+        <p>Customize colors, fonts, and spacing to match your brand.</p>
+      </Accordion.Item>
+    </Accordion>
+  ),
+};
+
+export const AllowMultiple: Story = {
+  render: () => (
+    <Accordion allowMultiple>
+      <Accordion.Item value="section1" title="Installation">
+        <p>npm install @jordan-mace/chaser-design-system</p>
+      </Accordion.Item>
+      <Accordion.Item value="section2" title="Usage">
+        <p>Import components and use them in your React app.</p>
+      </Accordion.Item>
+      <Accordion.Item value="section3" title="Configuration">
+        <p>Set up the theme and global styles.</p>
+      </Accordion.Item>
+    </Accordion>
+  ),
+};

package/src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Accordion from './Accordion';
+import React from 'react';
+
+describe('Accordion', () => {
+  it('renders accordion correctly', async () => {
+    const { container } = await render(
+      <Accordion>
+        <Accordion.Item value="item1" title="Item 1">
+          <div>Content 1</div>
+        </Accordion.Item>
+        <Accordion.Item value="item2" title="Item 2">
+          <div>Content 2</div>
+        </Accordion.Item>
+        <Accordion.Item value="item3" title="Item 3">
+          <div>Content 3</div>
+        </Accordion.Item>
+      </Accordion>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders accordion with default expanded item correctly', async () => {
+    const { container } = await render(
+      <Accordion>
+        <Accordion.Item value="item1" title="Item 1" defaultExpanded>
+          <div>Content 1</div>
+        </Accordion.Item>
+        <Accordion.Item value="item2" title="Item 2">
+          <div>Content 2</div>
+        </Accordion.Item>
+      </Accordion>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders multiple accordion items correctly', async () => {
+    const { container } = await render(
+      <Accordion allowMultiple>
+        <Accordion.Item value="item1" title="Section 1">
+          <div>Content 1</div>
+        </Accordion.Item>
+        <Accordion.Item value="item2" title="Section 2">
+          <div>Content 2</div>
+        </Accordion.Item>
+        <Accordion.Item value="item3" title="Section 3">
+          <div>Content 3</div>
+        </Accordion.Item>
+      </Accordion>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,146 @@
+import clsx from 'clsx';
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import {
+  accordionItem,
+  accordionHeader,
+  accordionContent,
+  accordionIcon,
+  accordionIconExpanded,
+  accordionGroup,
+} from './styles.css';
+import Box from '../Box';
+
+type AccordionContextType = {
+  allowMultiple?: boolean;
+  expandedItems: Set<string>;
+  toggleItem: (value: string) => void;
+};
+
+const AccordionContext = createContext<AccordionContextType>({
+  allowMultiple: false,
+  expandedItems: new Set(),
+  toggleItem: () => {},
+});
+
+type AccordionProps = {
+  children: React.ReactNode;
+  allowMultiple?: boolean;
+  className?: string;
+};
+
+const Accordion = ({
+  children,
+  allowMultiple = false,
+  className,
+}: AccordionProps) => {
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
+
+  const toggleItem = (value: string) => {
+    setExpandedItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(value)) {
+        newSet.delete(value);
+      } else {
+        if (allowMultiple) {
+          newSet.add(value);
+        } else {
+          return new Set([value]);
+        }
+      }
+      return newSet;
+    });
+  };
+
+  return (
+    <AccordionContext.Provider value={{ allowMultiple, expandedItems, toggleItem }}>
+      <Box
+        className={clsx(accordionGroup, className)}
+        width="100%"
+      >
+        {children}
+      </Box>
+    </AccordionContext.Provider>
+  );
+};
+
+type AccordionItemProps = {
+  value: string;
+  title: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+const AccordionItem = ({
+  value,
+  title,
+  children,
+  className,
+}: AccordionItemProps) => {
+  const { expandedItems, toggleItem } = useContext(AccordionContext);
+  const isExpanded = expandedItems.has(value);
+
+  const toggleExpanded = useCallback(() => {
+    toggleItem(value);
+  }, [value, toggleItem]);
+
+  return (
+    <Box
+      as="div"
+      className={clsx(accordionItem, className)}
+      width="100%"
+      marginBottom="small"
+      border="small"
+      borderRadius="large"
+      overflow="hidden"
+    >
+      <Box
+        as="button"
+        onClick={toggleExpanded}
+        className={accordionHeader}
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        padding="small"
+        cursor="pointer"
+        style={{ userSelect: 'none' }}
+        fontSize="14px"
+        fontWeight="500"
+        color="c5-700"
+        aria-expanded={isExpanded}
+        aria-controls={`accordion-content-${value}`}
+      >
+        <Box as="span">{title}</Box>
+        <Box
+          as="span"
+          className={clsx(accordionIcon, isExpanded && accordionIconExpanded)}
+          fontSize="12px"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          aria-hidden="true"
+        >
+          ▼
+        </Box>
+      </Box>
+      <Box
+        as="div"
+        id={`accordion-content-${value}`}
+        className={clsx(
+          accordionContent[isExpanded ? 'expanded' : 'collapsed'],
+        )}
+        padding="small"
+        fontSize="14px"
+        color="c5-700"
+        role="region"
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+};
+
+const AccordionComponent = Object.assign(Accordion, {
+  Item: AccordionItem,
+});
+
+export default AccordionComponent;

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

@@ -0,0 +1,72 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const accordion = styleWithLayer({
+  width: '100%',
+  fontFamily: vars.fontFamily.body,
+});
+
+export const accordionItem = style({
+  width: '100%',
+  marginBottom: '4px',
+  border: `1px solid ${vars.colors.borderDefault}`,
+  borderRadius: '8px',
+  overflow: 'hidden',
+});
+
+export const accordionHeader = style({
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '12px 16px',
+  backgroundColor: vars.colors.backgroundMuted,
+  cursor: 'pointer',
+  userSelect: 'none',
+  fontSize: '14px',
+  fontWeight: '500',
+  color: vars.colors.textPrimary,
+  transition: 'background-color 0.2s ease',
+  ':hover': {
+    backgroundColor: vars.colors.backgroundDefault,
+  },
+  ':focus-visible': {
+    outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+    outlineOffset: '-2px',
+  },
+});
+
+export const accordionContent = styleVariants({
+  collapsed: {
+    display: 'none',
+    padding: '0 16px',
+    fontSize: '14px',
+    color: vars.colors.textPrimary,
+    backgroundColor: vars.colors.backgroundDefault,
+  },
+  expanded: {
+    display: 'block',
+    padding: '12px 16px',
+    fontSize: '14px',
+    color: vars.colors.textPrimary,
+    backgroundColor: vars.colors.backgroundDefault,
+    animation: 'slideDown 0.2s ease',
+  },
+});
+
+export const accordionIcon = style({
+  fontSize: '12px',
+  transition: 'transform 0.2s ease',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+export const accordionIconExpanded = style({
+  transform: 'rotate(180deg)',
+});
+
+export const accordionGroup = styleWithLayer({
+  width: '100%',
+});

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { Alert } from '.';
+import React from 'react';
+import { fn } from 'storybook/test';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Components/Alert',
+  component: Alert,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          width: '100vw',
+          maxWidth: '500px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  args: { onDismiss: fn() },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Success: Story = {
+  args: {
+    severity: 'success',
+    children: 'This is a success alert — check it out!',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    severity: 'warning',
+    children: 'This is a warning alert — check it out!',
+  },
+};
+
+export const Error: Story = {
+  args: {
+    severity: 'error',
+    children: 'This is an error alert — check it out!',
+  },
+};
+
+export const Info: Story = {
+  args: {
+    severity: 'info',
+    children: 'This is an info alert — check it out!',
+  },
+};
+
+export const Dismissible: Story = {
+  args: {
+    severity: 'info',
+    dismissible: true,
+    children: 'This alert can be dismissed. Click the × button.',
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    severity: 'warning',
+    dismissible: true,
+    children:
+      'This is a longer alert message that demonstrates how the component handles multiple lines of text. It should wrap nicely and maintain proper spacing throughout.',
+  },
+};

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/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,
+  },
+});