@tcn/ui 0.8.0 → 0.9.0

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/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>

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

@@ -4,11 +4,22 @@ import { Footer } from '../../../layouts/footer/footer.js';
 import { Header } from '../../../layouts/header/header.js';
 import { Heading, Section, VBody } from '../../../layouts/index.js';
 import { UtilityBar } from '../../../layouts/utility_bar/utility_bar.js';
-import { Box, Spacer } from '../../../stacks/index.js';
+import { Box, HStack, Spacer } from '../../../stacks/index.js';
 import { Title } from '../../../typography/title/title.js';
 import { VPanel } from '../v_panel.js';
 // Styles
 import styles from './panel_stories.module.css';
+import { TTable, TBody, TD, TH, THead, TR } from '../../../layouts/table/table.js';
+import { FilterOneIcon } from '@tcn/icons/filter_one_icon.js';
+import { PlusIcon } from '@tcn/icons/plus_icon.js';
+import { SearchIcon } from '@tcn/icons/search_icon.js';
+import { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';
+import { ChevronsLeftIcon } from '@tcn/icons/chevrons_left_icon.js';
+import { ChevronsRightIcon } from '@tcn/icons/chevrons_right_icon.js';
+import { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';
+import { Toggle } from '../../../actions/toggle/toggle.js';
+import { CrossIcon } from '@tcn/icons/cross_icon.js';
+import { BodyText } from '../../../typography/index.js';
 
 export default {
   title: 'Surfaces/Panel',
@@ -102,3 +113,105 @@ export const Default = () => {
     </div>
   );
 };
+
+export const WithTable = () => {
+  return (
+    <div className={styles['stories-container']}>
+      <HStack gap="16px" maxHeight="600px" height="100%" maxWidth="1440px">
+        <VPanel minWidth="300px">
+          <Header>
+            <Title emphasis="strong">Table Title</Title>
+            <Spacer />
+            <Button utility hierarchy="tertiary">
+              <FilterOneIcon />
+            </Button>
+            <Button utility hierarchy="tertiary">
+              <SearchIcon />
+            </Button>
+            <Button utility hierarchy="primary">
+              <PlusIcon />
+            </Button>
+          </Header>
+          <VBody>
+            <TTable>
+              <THead>
+                <TR>
+                  <TH>Name</TH>
+                  <TH>Age</TH>
+                  <TH>Email</TH>
+                </TR>
+              </THead>
+              <TBody>
+                <TR>
+                  <TD>Jane Smith</TD>
+                  <TD>32</TD>
+                  <TD>jane.smith@example.com</TD>
+                </TR>
+                <TR>
+                  <TD>Samuel Barnett</TD>
+                  <TD>28</TD>
+                  <TD>samuel.barnett@example.com</TD>
+                </TR>
+                <TR isSelected>
+                  <TD>John Doe</TD>
+                  <TD>25</TD>
+                  <TD>john.doe@example.com</TD>
+                </TR>
+                <TR>
+                  <TD>Linda Wang</TD>
+                  <TD>41</TD>
+                  <TD>linda.wang@example.com</TD>
+                </TR>
+              </TBody>
+            </TTable>
+          </VBody>
+          <Footer>
+            <HStack gap="8px" hAlign="center">
+              <Button utility hierarchy="tertiary">
+                <ChevronsLeftIcon />
+              </Button>
+              <Button utility hierarchy="tertiary">
+                <ChevronLeftIcon />
+              </Button>
+              <Toggle utility>1</Toggle>
+              ...
+              <Toggle utility>4</Toggle>
+              <Toggle utility selected>
+                5
+              </Toggle>
+              <Toggle utility>6</Toggle>
+              ...
+              <Toggle utility>100</Toggle>
+              <Button utility hierarchy="tertiary">
+                <ChevronsRightIcon />
+              </Button>
+              <Button utility hierarchy="tertiary">
+                <ChevronRightIcon />
+              </Button>
+            </HStack>
+          </Footer>
+        </VPanel>
+        <VPanel maxHeight="600px" width="300px" minWidth="300px">
+          <Header>
+            <Title emphasis="strong">John Doe</Title>
+            <Spacer />
+            <Button utility hierarchy="tertiary">
+              <CrossIcon />
+            </Button>
+          </Header>
+          <VBody>
+            <Section>
+              <Heading>Personal Information</Heading>
+              <BodyText>
+                John Doe is a software engineer at FooBaz. He is a very smart guy and he
+                loves to code.
+              </BodyText>
+              <BodyText>Age: 25</BodyText>
+              <BodyText>Email: john.doe@example.com</BodyText>
+            </Section>
+          </VBody>
+        </VPanel>
+      </HStack>
+    </div>
+  );
+};