@tcn/ui 0.7.0 → 0.8.1

package/src/layouts/table/__stories__/table.stories.tsx

@@ -0,0 +1,326 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import { TTable, THead, TBody, TFoot, TR, TH, TD } from '../table.js';
+import { Caption } from '../../../typography/index.js';
+import { HStack, Spacer, VStack } from '../../../stacks/index.js';
+import { Button } from '../../../actions/index.js';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+import { FilterOneIcon } from '@tcn/icons/filter_one_icon.js';
+import { TwoClassSortIcon } from '@tcn/icons/two_class_sort_icon.js';
+import { EditOneIcon } from '@tcn/icons/edit_one_icon.js';
+import { TrashOneIcon } from '@tcn/icons/trash_one_icon.js';
+import { CopyIcon } from '@tcn/icons/copy_icon.js';
+import { Chip } from '../../../tokens/index.js';
+import {
+  sb_tableMockData,
+  sb_tableGroupedMockData,
+  sb_tableStatusLabels,
+  type SBTableData,
+  sb_tableGroupedStats,
+} from './mock_data.js';
+import { CloudLightningIcon } from '@tcn/icons/cloud_lightning_icon.js';
+import styles from './table_stories.module.css';
+
+const meta: Meta<typeof TTable> = {
+  title: 'Layouts/Table',
+  component: TTable,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Semantic table layout components. Structure follows: caption, thead, tbody, tfoot, with proper scope and colSpan for accessibility.',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TTable>;
+
+const TableWrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <VStack padding="16px" height="100%" width="100%" maxHeight="500px">
+      {children}
+    </VStack>
+  );
+};
+
+const ExampleRow: React.FC<{ item: SBTableData }> = ({ item }) => {
+  return (
+    <TR isSelected={item.selected}>
+      <TH scope="row">{item.name}</TH>
+      <TD>{item.description}</TD>
+      <TD>{item.age}</TD>
+      <TD>{item.date.toLocaleDateString()}</TD>
+      <TD>
+        <Chip className={styles.chip} data-status={item.status}>
+          {sb_tableStatusLabels[item.status]}
+        </Chip>
+      </TD>
+      <TH scope="row">
+        <HStack gap="4px">
+          <Button utility hierarchy="tertiary" severity="dangerous">
+            <TrashOneIcon />
+          </Button>
+          <Button utility hierarchy="tertiary">
+            <CopyIcon />
+          </Button>
+          <Button utility hierarchy="tertiary">
+            <EditOneIcon />
+          </Button>
+          <Button utility hierarchy="primary">
+            <CloudLightningIcon />
+          </Button>
+        </HStack>
+      </TH>
+    </TR>
+  );
+};
+
+const ExampleHeader: React.FC<{
+  title: string;
+  canSort?: boolean;
+  canFilter?: boolean;
+  canSearch?: boolean;
+}> = ({ title, canSort, canFilter, canSearch }) => {
+  return (
+    <TH scope="col">
+      <HStack gap="8px">
+        {title}
+        <Spacer />
+        <HStack gap="2px" minWidth="min-content" growWeight={0}>
+          {canSearch && (
+            <Button utility hierarchy="tertiary">
+              <SearchIcon />
+            </Button>
+          )}
+          {canFilter && (
+            <Button utility hierarchy="tertiary">
+              <FilterOneIcon />
+            </Button>
+          )}
+          {canSort && (
+            <Button utility hierarchy="tertiary">
+              <TwoClassSortIcon />
+            </Button>
+          )}
+        </HStack>
+      </HStack>
+    </TH>
+  );
+};
+/**
+ * Table structured like the [MDN table example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table):
+ * caption, column headers with `scope="col"`, row headers with `scope="row"`, and a footer with a spanning cell.
+ */
+export const Baseline: Story = {
+  render: () => (
+    <TableWrapper>
+      <TTable>
+        <caption>
+          <Caption>Example description of the a table (caption)</Caption>
+        </caption>
+        <THead>
+          <TR>
+            <ExampleHeader title="Name" canSort canFilter canSearch />
+            <ExampleHeader title="Description" canSort canFilter canSearch />
+            <ExampleHeader title="Age" canSort canFilter canSearch />
+            <ExampleHeader title="Date" canSort canFilter canSearch />
+            <ExampleHeader title="Status" canSort canFilter canSearch />
+            <TH scope="col">Actions</TH>
+          </TR>
+        </THead>
+        <TBody>
+          {sb_tableMockData.map(item => (
+            <ExampleRow key={item.name} item={item} />
+          ))}
+        </TBody>
+        <TFoot>
+          <TR>
+            <TH scope="row" colSpan={5}>
+              Total:
+            </TH>
+            <TD>33</TD>
+          </TR>
+        </TFoot>
+      </TTable>
+    </TableWrapper>
+  ),
+};
+
+export const MaxDimensions: Story = {
+  render: () => (
+    <TableWrapper>
+      <TTable style={{ height: '300px', width: '400px' }}>
+        <caption>
+          <Caption>Example description of the a table (caption)</Caption>
+        </caption>
+        <THead>
+          <TR>
+            <ExampleHeader title="Name" canSort canFilter canSearch />
+            <ExampleHeader title="Description" canSort canFilter canSearch />
+            <ExampleHeader title="Age" canSort canFilter canSearch />
+            <ExampleHeader title="Date" canSort canFilter canSearch />
+            <ExampleHeader title="Status" canSort canFilter canSearch />
+            <TH scope="col">Actions</TH>
+          </TR>
+        </THead>
+        <TBody>
+          {sb_tableMockData.map(item => (
+            <ExampleRow key={item.name} item={item} />
+          ))}
+        </TBody>
+        <TFoot>
+          <TR>
+            <TH scope="row" colSpan={5}>
+              Total:
+            </TH>
+            <TD>33</TD>
+          </TR>
+        </TFoot>
+      </TTable>
+    </TableWrapper>
+  ),
+};
+
+export const Sticky: Story = {
+  render: () => (
+    <TableWrapper>
+      <TTable sticky>
+        <caption>
+          <Caption>Example description of the a table (caption)</Caption>
+        </caption>
+        <THead>
+          <TR>
+            <ExampleHeader title="Name" canSort canFilter canSearch />
+            <ExampleHeader title="Description" canSort canFilter canSearch />
+            <ExampleHeader title="Age" canSort canFilter canSearch />
+            <ExampleHeader title="Date" canSort canFilter canSearch />
+            <ExampleHeader title="Status" canSort canFilter canSearch />
+            <TH scope="col">Actions</TH>
+          </TR>
+        </THead>
+        <TBody>
+          {sb_tableMockData.map(item => (
+            <ExampleRow key={item.name} item={item} />
+          ))}
+        </TBody>
+        <TFoot>
+          <TR>
+            <TH align="right">Total: 33</TH>
+            <TH scope="row" colSpan={4} />
+            <TH scope="row" />
+          </TR>
+        </TFoot>
+      </TTable>
+    </TableWrapper>
+  ),
+};
+
+const formatNumber = (number: number) => {
+  return number.toFixed(2);
+};
+
+export const SpanningCell: Story = {
+  render: () => (
+    <TableWrapper>
+      <TTable sticky>
+        <caption>
+          <Caption>Example description of the a table (caption)</Caption>
+        </caption>
+        <colgroup span={2}>Name</colgroup>
+        <THead>
+          <TR>
+            <TH scope="colgroup" colSpan={2}>
+              Personal Info
+            </TH>
+            <TH scope="colgroup" colSpan={3}>
+              Employment
+            </TH>
+            <TH scope="colgroup" colSpan={6}>
+              Performance
+            </TH>
+            <TH scope="row" />
+          </TR>
+          <TR>
+            <TH scope="col">First Name</TH>
+            <TH scope="col">Last Name</TH>
+            <TH scope="col">Branch</TH>
+            <TH scope="col">Department</TH>
+            <TH scope="col">Role</TH>
+            <TH scope="col">Q1</TH>
+            <TH scope="col">Q2</TH>
+            <TH scope="col">Q3</TH>
+            <TH scope="col">Q4</TH>
+            <TH scope="col">Score</TH>
+            <TH scope="col">Last Review</TH>
+            <TH scope="col">Actions</TH>
+          </TR>
+        </THead>
+        <TBody>
+          {sb_tableGroupedMockData.map((row, i) => (
+            <TR key={i}>
+              <TH>{row.firstName}</TH>
+              <TD>{row.lastName}</TD>
+              <TD>{row.branch}</TD>
+              <TD>{row.department}</TD>
+              <TD>{row.role}</TD>
+              <TD>{row.q1}</TD>
+              <TD>{row.q2}</TD>
+              <TD>{row.q3}</TD>
+              <TD>{row.q4}</TD>
+              <TD>{row.score}</TD>
+              <TD>{row.lastReview}</TD>
+              <TH scope="row">
+                <HStack gap="4px">
+                  <Button utility hierarchy="tertiary" severity="dangerous">
+                    <TrashOneIcon />
+                  </Button>
+                  <Button utility hierarchy="tertiary">
+                    <CopyIcon />
+                  </Button>
+                  <Button utility hierarchy="tertiary">
+                    <EditOneIcon />
+                  </Button>
+                  <Button utility hierarchy="primary">
+                    <CloudLightningIcon />
+                  </Button>
+                </HStack>
+              </TH>
+            </TR>
+          ))}
+        </TBody>
+        <TFoot>
+          <TR>
+            <TD scope="row" colSpan={4} />
+            <TH scope="row" align="right">
+              Totals:
+            </TH>
+            <TD>{formatNumber(sb_tableGroupedStats.totals.q1)}</TD>
+            <TD>{formatNumber(sb_tableGroupedStats.totals.q2)}</TD>
+            <TD>{formatNumber(sb_tableGroupedStats.totals.q3)}</TD>
+            <TD>{formatNumber(sb_tableGroupedStats.totals.q4)}</TD>
+            <TD>{formatNumber(sb_tableGroupedStats.year)}</TD>
+            <TD />
+            <TD />
+          </TR>
+          <TR>
+            <TD scope="row" colSpan={4} />
+            <TH scope="row" align="right">
+              Averages:
+            </TH>
+            <TD>{formatNumber(sb_tableGroupedStats.averages.q1)}</TD>
+            <TD>{formatNumber(sb_tableGroupedStats.averages.q2)}</TD>
+            <TD>{formatNumber(sb_tableGroupedStats.averages.q3)}</TD>
+            <TD>{formatNumber(sb_tableGroupedStats.averages.q4)}</TD>
+            <TD>{formatNumber(sb_tableGroupedStats.mean)}</TD>
+            <TD />
+            <TD />
+          </TR>
+        </TFoot>
+      </TTable>
+    </TableWrapper>
+  ),
+};

package/src/layouts/table/__stories__/table_stories.module.css

@@ -0,0 +1,30 @@
+.chip {
+  border: 1px solid var(--material);
+  background-color: var(--material);
+  color: var(--on-material);
+  font-size: 12px;
+}
+
+.chip[data-status="completed"] {
+  border: 1px solid var(--async-color-success);
+  background-color: var(--async-color-success);
+  color: var(--ergo-white);
+}
+
+.chip[data-status="in_progress"] {
+  border: 1px solid var(--async-color-pending);
+  background-color: var(--async-color-pending);
+  color: var(--ergo-white);
+}
+
+.chip[data-status="not_started"] {
+  border: 1px solid var(--async-color-initial);
+  background-color: var(--async-color-initial);
+  color: var(--ergo-white);
+}
+
+.chip[data-status="failed"] {
+  border: 1px solid var(--async-color-failed);
+  background-color: var(--async-color-failed);
+  color: var(--ergo-white);
+}

package/src/layouts/table/table.module.css

@@ -0,0 +1,37 @@
+@layer tcn-system {
+  :where(.table) {
+    overflow: auto;
+    width: 100%;
+    height: auto;
+  }
+  :where(.table[data-is-sticky="true"]) {
+    th:first-of-type {
+      position: sticky;
+      left: 0;
+      z-index: 2;
+    }
+
+    th:last-of-type {
+      position: sticky;
+      right: 0;
+      z-index: 2;
+    }
+
+    thead:first-of-type {
+      position: sticky;
+      top: 0;
+      z-index: 3;
+    }
+
+    tfoot:first-of-type {
+      position: sticky;
+      bottom: 0;
+      z-index: 3;
+    }
+  }
+
+  /* TODO: Double check */
+  :where(.tcn-th[data-should-fill="true"]) {
+    width: auto;
+  }
+}

package/src/layouts/table/table.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './table.module.css';
+import { Box, type BoxProps } from '../../stacks/index.js';
+
+export interface TTableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+  // Makes the header, footer and first and last column (th only) sticky
+  sticky?: boolean;
+}
+
+export const TTable = ({
+  children,
+  className,
+  sticky = false,
+  ...props
+}: React.PropsWithChildren<TTableProps>) => {
+  return (
+    <table
+      data-is-sticky={sticky}
+      className={clsx('tcn-table', styles.table, className)}
+      {...props}
+    >
+      {children}
+    </table>
+  );
+};
+
+export interface THeadProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
+
+// Header
+export const THead = ({
+  children,
+  className,
+  ...props
+}: React.PropsWithChildren<THeadProps>) => {
+  return (
+    <thead className={clsx('tcn-thead', className)} {...props}>
+      {children}
+    </thead>
+  );
+};
+
+// Body
+export const TBody = ({
+  children,
+  className,
+  ...props
+}: React.PropsWithChildren<React.HTMLAttributes<HTMLTableSectionElement>>) => {
+  return (
+    <tbody className={clsx('tcn-tbody', className)} {...props}>
+      {children}
+    </tbody>
+  );
+};
+
+export interface TFootProps extends React.HTMLAttributes<HTMLTableSectionElement> {}
+
+// Footer
+export const TFoot = ({
+  children,
+  className,
+  ...props
+}: React.PropsWithChildren<TFootProps>) => {
+  return (
+    <tfoot className={clsx('tcn-tfoot', className)} {...props}>
+      {children}
+    </tfoot>
+  );
+};
+
+export interface TRProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  isSelected?: boolean;
+}
+
+// Row
+export const TR = ({
+  children,
+  className,
+  isSelected = false,
+  ...props
+}: React.PropsWithChildren<TRProps>) => {
+  return (
+    <tr
+      className={clsx('tcn-tr', className)}
+      aria-selected={isSelected}
+      data-is-selected={isSelected}
+      {...props}
+    >
+      {children}
+    </tr>
+  );
+};
+
+export interface CellSharedProps extends Omit<BoxProps<HTMLTableCellElement>, 'as'> {
+  fill?: boolean;
+}
+
+export interface THProps
+  extends CellSharedProps,
+    React.ThHTMLAttributes<HTMLTableCellElement> {}
+
+// Header Cell
+export const TH = ({
+  children,
+  className,
+  fill = false,
+  ...props
+}: React.PropsWithChildren<THProps>) => {
+  return (
+    <Box as="th" data-should-fill={fill} className={clsx('tcn-th', className)} {...props}>
+      {children}
+    </Box>
+  );
+};
+
+export interface TDProps
+  extends CellSharedProps,
+    React.TdHTMLAttributes<HTMLTableCellElement> {}
+
+// Data Cell
+export const TD = ({
+  children,
+  className,
+  fill = false,
+  ...props
+}: React.PropsWithChildren<TDProps>) => {
+  return (
+    <td data-should-fill={fill} className={clsx('tcn-td', className)} {...props}>
+      {children}
+    </td>
+  );
+};

package/src/navigation/tabs/primitives/tabs_list.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type FC, type PropsWithChildren } from 'react';
+import { forwardRef, useCallback, type FC, type PropsWithChildren } from 'react';
 import { type BaseButtonProps } from '../../../actions/index.js';
 import { HStack, type HStackProps } from '../../../stacks/h_stack.js';
 import clsx from 'clsx';
@@ -6,15 +6,59 @@ import { Toggle } from '../../../actions/toggle/toggle.js';
 
 export type TabsListProps = HStackProps;
 
+const navigateTabs = (event: React.KeyboardEvent<HTMLDivElement>) => {
+  const tabs = Array.from(event.currentTarget.querySelectorAll(':scope > [role="tab"]'));
+  const currentTab = event.currentTarget.querySelector(':focus');
+  const currentIndex = currentTab ? tabs.indexOf(currentTab) : -1;
+  if (currentIndex === -1) return; // Exit if the focused element is not a tab
+  let newIndex = 0;
+
+  switch (event.key) {
+    case 'ArrowRight':
+      newIndex = (currentIndex + 1) % tabs.length;
+      break;
+    case 'ArrowLeft':
+      newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+      break;
+    case 'Home':
+      newIndex = 0;
+      break;
+    case 'End':
+      newIndex = tabs.length - 1;
+      break;
+    default:
+      return; // Exit if the key is not recognized
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+  tabs[newIndex]['focus']();
+};
+
 export const TabsList: FC<PropsWithChildren<TabsListProps>> = ({
   children,
   className,
   role = 'tablist',
   as = 'menu',
+  onKeyDown,
   ...props
 }) => {
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      navigateTabs(event);
+      onKeyDown && onKeyDown(event);
+    },
+    [onKeyDown]
+  );
+
   return (
-    <HStack as={as} role={role} className={clsx('tcn-tabs-list', className)} {...props}>
+    <HStack
+      onKeyDown={handleKeyDown}
+      as={as}
+      role={role}
+      className={clsx('tcn-tabs-list', className)}
+      {...props}
+    >
       {children}
     </HStack>
   );

package/src/navigation/tabs/state/link/tab_link.tsx

@@ -13,7 +13,7 @@ export interface TabLinkProps
     TabLinkOwnProps {}
 
 export const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkProps>>(
-  ({ children, value, onClick, minWidth, maxWidth, ...props }, forwardedRef) => {
+  ({ children, value, onClick, minWidth, maxWidth, id, ...props }, forwardedRef) => {
     const { ref: internalRef, isMatch } = useTabLink(value);
     const state = useTabs();
     const ref = useForkRef(internalRef, forwardedRef);
@@ -36,6 +36,9 @@ export const TabLink = forwardRef<HTMLButtonElement, PropsWithChildren<TabLinkPr
         onClick={handleClick}
         minWidth={pickMinWidth}
         maxWidth={pickMaxWidth}
+        id={`tab-${value}`}
+        aria-controls={`tabpanel-${value}`}
+        tabIndex={isMatch ? 0 : -1}
         {...props}
       >
         {children}

package/src/navigation/tabs/state/tab.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { FC, PropsWithChildren } from 'react';
 import { useTabs } from './context.js';
 
@@ -8,5 +9,14 @@ export interface TabProps {
 export const Tab: FC<PropsWithChildren<TabProps>> = ({ value, children }) => {
   const state = useTabs();
   if (state.value !== value) return null;
+
+  if (children && React.isValidElement(children)) {
+    return React.cloneElement(children, {
+      ...children.props,
+      id: children.props.id ?? `tabpanel-${value}`,
+      role: children.props.role ?? 'tabpanel',
+    });
+  }
+
   return children;
 };

package/src/stacks/box/box.tsx

@@ -12,7 +12,7 @@ import { removeUndefinedProperties } from '../utils/remove_undefined_properties.
 import styles from '../stack.module.css';
 import { HandleProps } from './handle_props.js';
 
-export interface BoxProps extends HTMLAttributes<HTMLElement> {
+export interface BoxProps<T extends HTMLElement = HTMLElement> extends HTMLAttributes<T> {
   as?: string;
   style?: React.CSSProperties;
   className?: string;

package/src/surfaces/modal/__stories__/modal.stories.tsx

@@ -31,13 +31,13 @@ export const ModalStory = () => {
         <Header>
           <Title>Modal Title</Title>
           <Spacer />
-          <Button utility hierarchy="tertiary" size="md" onClick={toggle}>
+          <Button utility hierarchy="tertiary" onClick={toggle}>
             <CrossIcon />
           </Button>
-          <Button hierarchy="secondary" size="md" onClick={toggle}>
+          <Button utility hierarchy="secondary" onClick={toggle}>
             <CrossIcon />
           </Button>
-          <Button utility hierarchy="primary" size="md" onClick={toggle}>
+          <Button utility hierarchy="primary" onClick={toggle}>
             <CrossIcon />
           </Button>
         </Header>
@@ -47,10 +47,10 @@ export const ModalStory = () => {
           <Button utility hierarchy="tertiary">
             <BugIcon />
           </Button>
-          <Button hierarchy="secondary">
+          <Button utility hierarchy="secondary">
             <BugIcon />
           </Button>
-          <Button utility size="md" hierarchy="primary">
+          <Button utility hierarchy="primary">
             <BugIcon />
           </Button>
         </UtilityBar>