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

package/src/components/Table/Table.test.tsx

@@ -0,0 +1,104 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Table from './Table';
+import React from 'react';
+
+describe('Table', () => {
+  it('renders basic table correctly', async () => {
+    const { container } = await render(
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Name</Table.Th>
+            <Table.Th>Age</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td>John</Table.Td>
+            <Table.Td>30</Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders striped table correctly', async () => {
+    const { container } = await render(
+      <Table striped>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Name</Table.Th>
+            <Table.Th>Email</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td>John</Table.Td>
+            <Table.Td>john@example.com</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>Jane</Table.Td>
+            <Table.Td>jane@example.com</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>Bob</Table.Td>
+            <Table.Td>bob@example.com</Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders table with footer correctly', async () => {
+    const { container } = await render(
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Product</Table.Th>
+            <Table.Th>Price</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td>Apple</Table.Td>
+            <Table.Td>$1.00</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Td>Banana</Table.Td>
+            <Table.Td>$0.50</Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+        <Table.Tfoot>
+          <Table.Tr>
+            <Table.Td>Total</Table.Td>
+            <Table.Td>$1.50</Table.Td>
+          </Table.Tr>
+        </Table.Tfoot>
+      </Table>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders table with colspan', async () => {
+    const { container } = await render(
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Name</Table.Th>
+            <Table.Th>Details</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Td>John</Table.Td>
+            <Table.Td colSpan={2}>Full details here</Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Table/Table.tsx

@@ -0,0 +1,131 @@
+import clsx from 'clsx';
+import React, { createContext, useContext } from 'react';
+import {
+  table,
+  thead,
+  tbody,
+  tfoot,
+  tr,
+  th,
+  td,
+  tableContainer,
+} from './styles.css';
+import Box from '../Box';
+
+// Context to pass striping info to rows
+const TableContext = createContext<{ striped?: boolean }>({});
+
+type TableProps = {
+  children: React.ReactNode;
+  className?: string;
+  striped?: boolean;
+  containerClassName?: string;
+};
+
+const TableComponent = ({
+  children,
+  className,
+  striped = false,
+  containerClassName,
+}: TableProps) => {
+  return (
+    <TableContext.Provider value={{ striped }}>
+      <Box
+        className={clsx(tableContainer, containerClassName)}
+        width="100%"
+      >
+        <Box as="table" className={clsx(table, className)}>
+          {children}
+        </Box>
+      </Box>
+    </TableContext.Provider>
+  );
+};
+
+type TheadProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Thead = ({ children, className }: TheadProps) => {
+  return <Box as="thead" className={clsx(thead, className)}>{children}</Box>;
+};
+
+type TbodyProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Tbody = ({ children, className }: TbodyProps) => {
+  return <Box as="tbody" className={clsx(tbody, className)}>{children}</Box>;
+};
+
+type TfootProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Tfoot = ({ children, className }: TfootProps) => {
+  return <Box as="tfoot" className={clsx(tfoot, className)}>{children}</Box>;
+};
+
+type TrProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Tr = ({ children, className }: TrProps) => {
+  const { striped } = useContext(TableContext);
+  return (
+    <Box
+      as="tr"
+      className={clsx(
+        tr[striped ? 'striped' : 'default'],
+        className,
+      )}
+    >
+      {children}
+    </Box>
+  );
+};
+
+type ThProps = {
+  children?: React.ReactNode;
+  className?: string;
+};
+
+const Th = ({ children, className }: ThProps) => {
+  return <Box as="th" className={clsx(th, className)}>{children}</Box>;
+};
+
+type TdProps = {
+  children?: React.ReactNode;
+  className?: string;
+  colSpan?: number;
+  rowSpan?: number;
+};
+
+const Td = ({ children, className, colSpan, rowSpan }: TdProps) => {
+  return (
+    <Box
+      as="td"
+      className={clsx(td, className)}
+      colSpan={colSpan}
+      rowSpan={rowSpan}
+    >
+      {children}
+    </Box>
+  );
+};
+
+// Attach sub-components
+const Table = Object.assign(TableComponent, {
+  Thead,
+  Tbody,
+  Tfoot,
+  Tr,
+  Th,
+  Td,
+});
+
+export default Table;

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

@@ -0,0 +1,57 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const table = styleWithLayer({
+  width: '100%',
+  borderCollapse: 'collapse',
+  borderSpacing: 0,
+  fontFamily: vars.fontFamily.body,
+});
+
+export const thead = styleWithLayer({
+  backgroundColor: vars.colors.backgroundDefault,
+  borderBottom: `2px solid ${vars.colors.borderDefault}`,
+});
+
+export const tbody = styleWithLayer({
+  backgroundColor: 'transparent',
+});
+
+export const tfoot = styleWithLayer({
+  backgroundColor: vars.colors.backgroundMuted,
+  borderTop: `2px solid ${vars.colors.borderDefault}`,
+  fontWeight: 'bold',
+});
+
+export const tr = styleVariants({
+  default: {
+    borderBottom: `1px solid ${vars.colors.borderMuted}`,
+    ':hover': {
+      backgroundColor: vars.colors.backgroundMuted,
+    },
+  },
+  striped: {
+    borderBottom: `1px solid ${vars.colors.borderMuted}`,
+  },
+});
+
+export const th = styleWithLayer({
+  padding: '12px 16px',
+  textAlign: 'left',
+  fontWeight: '600',
+  color: vars.colors.textPrimary,
+  whiteSpace: 'nowrap',
+});
+
+export const td = styleWithLayer({
+  padding: '12px 16px',
+  color: vars.colors.textPrimary,
+  borderBottom: `1px solid ${vars.colors.borderMuted}`,
+});
+
+export const tableContainer = styleWithLayer({
+  overflowX: 'auto',
+  border: `1px solid ${vars.colors.borderDefault}`,
+  borderRadius: '8px',
+});

package/src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+
+import { Tabs } from '.';
+import React from 'react';
+
+const meta = {
+  title: 'Components/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: { onChange: fn() },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1">
+      <Tabs.List>
+        <Tabs.Tab value="tab1">Overview</Tabs.Tab>
+        <Tabs.Tab value="tab2">Details</Tabs.Tab>
+        <Tabs.Tab value="tab3">Settings</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="tab1">
+        <div>
+          <h3>Overview Content</h3>
+          <p>This is the overview tab content.</p>
+        </div>
+      </Tabs.Panel>
+      <Tabs.Panel value="tab2">
+        <div>
+          <h3>Details Content</h3>
+          <p>This is the details tab content.</p>
+        </div>
+      </Tabs.Panel>
+      <Tabs.Panel value="tab3">
+        <div>
+          <h3>Settings Content</h3>
+          <p>This is the settings tab content.</p>
+        </div>
+      </Tabs.Panel>
+    </Tabs>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '20px' }}>
+      <Tabs defaultValue="tab1" orientation="vertical">
+        <Tabs.List>
+          <Tabs.Tab value="tab1">Overview</Tabs.Tab>
+          <Tabs.Tab value="tab2">Details</Tabs.Tab>
+          <Tabs.Tab value="tab3">Settings</Tabs.Tab>
+        </Tabs.List>
+      </Tabs>
+      <div style={{ flex: 1 }}>
+        <Tabs defaultValue="tab1">
+          <Tabs.Panel value="tab1">
+            <h3>Overview Content</h3>
+            <p>This is the overview tab content.</p>
+          </Tabs.Panel>
+          <Tabs.Panel value="tab2">
+            <h3>Details Content</h3>
+            <p>This is the details tab content.</p>
+          </Tabs.Panel>
+          <Tabs.Panel value="tab3">
+            <h3>Settings Content</h3>
+            <p>This is the settings tab content.</p>
+          </Tabs.Panel>
+        </Tabs>
+      </div>
+    </div>
+  ),
+};
+
+export const WithDisabledTabs: Story = {
+  render: () => (
+    <Tabs defaultValue="tab1">
+      <Tabs.List>
+        <Tabs.Tab value="tab1">Active Tab</Tabs.Tab>
+        <Tabs.Tab value="tab2" disabled>
+          Disabled Tab
+        </Tabs.Tab>
+        <Tabs.Tab value="tab3">Another Tab</Tabs.Tab>
+      </Tabs.List>
+      <Tabs.Panel value="tab1">
+        <h3>Active Content</h3>
+        <p>This tab is active.</p>
+      </Tabs.Panel>
+      <Tabs.Panel value="tab2">
+        <h3>Disabled Content</h3>
+        <p>This tab is disabled.</p>
+      </Tabs.Panel>
+      <Tabs.Panel value="tab3">
+        <h3>Another Content</h3>
+        <p>More content here.</p>
+      </Tabs.Panel>
+    </Tabs>
+  ),
+};

package/src/components/Tabs/Tabs.test.tsx

@@ -0,0 +1,52 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Tabs from './Tabs';
+import React from 'react';
+
+describe('Tabs', () => {
+  it('renders tabs correctly', async () => {
+    const { container } = await render(
+      <Tabs defaultValue="tab1">
+        <Tabs.List>
+          <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
+          <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
+          <Tabs.Tab value="tab3">Tab 3</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="tab1">Content 1</Tabs.Panel>
+        <Tabs.Panel value="tab2">Content 2</Tabs.Panel>
+        <Tabs.Panel value="tab3">Content 3</Tabs.Panel>
+      </Tabs>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders vertical tabs correctly', async () => {
+    const { container } = await render(
+      <Tabs defaultValue="tab1" orientation="vertical">
+        <Tabs.List>
+          <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
+          <Tabs.Tab value="tab2">Tab 2</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="tab1">Content 1</Tabs.Panel>
+        <Tabs.Panel value="tab2">Content 2</Tabs.Panel>
+      </Tabs>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders disabled tab correctly', async () => {
+    const { container } = await render(
+      <Tabs defaultValue="tab1">
+        <Tabs.List>
+          <Tabs.Tab value="tab1">Tab 1</Tabs.Tab>
+          <Tabs.Tab value="tab2" disabled>
+            Tab 2 (disabled)
+          </Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="tab1">Content 1</Tabs.Panel>
+        <Tabs.Panel value="tab2">Content 2</Tabs.Panel>
+      </Tabs>,
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,147 @@
+import clsx from 'clsx';
+import React, { createContext, useContext, useState } from 'react';
+import {
+  tabsContainer,
+  tabsList,
+  tabsListHorizontal,
+  tabsListVertical,
+  tabItem,
+  tabContent,
+} from './styles.css';
+import Box from '../Box';
+
+type TabsContextType = {
+  activeTab: string;
+  setActiveTab: (value: string) => void;
+  orientation?: 'horizontal' | 'vertical';
+};
+
+const TabsContext = createContext<TabsContextType>({
+  activeTab: '',
+  setActiveTab: () => {},
+});
+
+type TabsProps = {
+  children: React.ReactNode;
+  defaultValue?: string;
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+  onChange?: (value: string) => void;
+};
+
+const Tabs = ({
+  children,
+  defaultValue = '',
+  orientation = 'horizontal',
+  className,
+  onChange,
+}: TabsProps) => {
+  const [activeTab, setActiveTab] = useState(defaultValue);
+
+  const handleTabChange = (value: string) => {
+    setActiveTab(value);
+    if (onChange) {
+      onChange(value);
+    }
+  };
+
+  return (
+    <TabsContext.Provider value={{ activeTab, setActiveTab: handleTabChange, orientation }}>
+      <Box className={clsx(tabsContainer, className)} width="100%">
+        {children}
+      </Box>
+    </TabsContext.Provider>
+  );
+};
+
+type TabListProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const TabList = ({ children, className }: TabListProps) => {
+  const { orientation } = useContext(TabsContext);
+
+  return (
+    <Box
+      as="div"
+      role="tablist"
+      className={clsx(
+        tabsList,
+        orientation === 'vertical' ? tabsListVertical : tabsListHorizontal,
+        className,
+      )}
+    >
+      {children}
+    </Box>
+  );
+};
+
+type TabProps = {
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+};
+
+const Tab = ({ value, children, disabled = false, className }: TabProps) => {
+  const { activeTab, setActiveTab, orientation } = useContext(TabsContext);
+  const isActive = activeTab === value;
+
+  const handleClick = () => {
+    if (!disabled) {
+      setActiveTab(value);
+    }
+  };
+
+  return (
+    <Box
+      as="button"
+      role="tab"
+      aria-selected={isActive}
+      disabled={disabled}
+      onClick={handleClick}
+      className={clsx(
+        tabItem[
+          orientation === 'vertical'
+            ? isActive
+              ? 'verticalActive'
+              : 'base'
+            : isActive
+              ? 'active'
+              : 'base'
+        ],
+        className,
+      )}
+    >
+      {children}
+    </Box>
+  );
+};
+
+type TabPanelProps = {
+  value: string;
+  children: React.ReactNode;
+  className?: string;
+};
+
+const TabPanel = ({ value, children, className }: TabPanelProps) => {
+  const { activeTab } = useContext(TabsContext);
+  const isActive = activeTab === value;
+
+  if (!isActive) return null;
+
+  return (
+    <Box as="div" role="tabpanel" className={clsx(tabContent, className)}>
+      {children}
+    </Box>
+  );
+};
+
+const TabsComponent = Object.assign(Tabs, {
+  List: TabList,
+  Tab,
+  Panel: TabPanel,
+});
+
+export default TabsComponent;

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

@@ -0,0 +1,106 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const tabsContainer = styleWithLayer({
+  width: '100%',
+});
+
+export const tabsList = styleWithLayer({
+  display: 'flex',
+  gap: '4px',
+  borderBottom: `2px solid ${vars.colors.borderDefault}`,
+  fontFamily: vars.fontFamily.body,
+});
+
+export const tabsListHorizontal = styleWithLayer({
+  flexDirection: 'row',
+  overflowX: 'auto',
+});
+
+export const tabsListVertical = styleWithLayer({
+  flexDirection: 'column',
+  borderBottom: 'none',
+  borderRight: `2px solid ${vars.colors.borderDefault}`,
+});
+
+export const tabItem = styleVariants({
+  base: {
+    padding: '0.75rem 1.5rem',
+    fontSize: '14px',
+    fontWeight: '500',
+    color: vars.colors.textSecondary,
+    cursor: 'pointer',
+    border: 'none',
+    backgroundColor: 'transparent',
+    whiteSpace: 'nowrap',
+    transition: 'all 0.2s ease',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+    ':hover:not(:disabled)': {
+      color: vars.colors.textPrimary,
+      backgroundColor: vars.colors.backgroundMuted,
+    },
+    ':disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+    },
+  },
+  active: {
+    padding: '0.75rem 1.5rem',
+    fontSize: '14px',
+    fontWeight: '500',
+    color: vars.colors.buttonBackgroundPrimary,
+    cursor: 'pointer',
+    border: 'none',
+    backgroundColor: 'transparent',
+    whiteSpace: 'nowrap',
+    transition: 'all 0.2s ease',
+    borderBottom: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+    marginBottom: '-2px',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+    ':hover:not(:disabled)': {
+      backgroundColor: vars.colors.backgroundMuted,
+    },
+    ':disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+    },
+  },
+  verticalActive: {
+    padding: '0.75rem 1.5rem',
+    fontSize: '14px',
+    fontWeight: '500',
+    color: vars.colors.buttonBackgroundPrimary,
+    cursor: 'pointer',
+    border: 'none',
+    backgroundColor: 'transparent',
+    whiteSpace: 'nowrap',
+    transition: 'all 0.2s ease',
+    borderRight: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+    marginRight: '-2px',
+    ':focus-visible': {
+      outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+      outlineOffset: '2px',
+    },
+    ':hover:not(:disabled)': {
+      backgroundColor: vars.colors.backgroundMuted,
+    },
+    ':disabled': {
+      cursor: 'not-allowed',
+      opacity: 0.5,
+    },
+  },
+});
+
+export const tabContent = styleWithLayer({
+  padding: '1.5rem 0',
+  fontFamily: vars.fontFamily.body,
+  fontSize: '14px',
+  color: vars.colors.textPrimary,
+});