@mich8060/unified-design-system 0.1.10

package/src/ui/Table/Table.ai.md

@@ -0,0 +1,108 @@
+# Table
+
+Data table component for displaying tabular data with sortable and filterable columns.
+
+## When to Use
+- Displaying structured data in rows and columns
+- Data grids with custom cell rendering
+- Lists that need column alignment, sorting indicators, or filtering
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `columns` | `array` | `[]` | Column definitions (see Column Object below) |
+| `data` | `array` | `[]` | Array of row data objects |
+| `className` | `string` | `""` | Additional CSS classes |
+
+### Column Object
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `key` | `string` | Data key to access from row objects |
+| `label` | `string` | Column header text |
+| `icon` | `string` | Phosphor icon name for header |
+| `align` | `string` | Cell alignment: `"left"`, `"center"`, `"right"` |
+| `sortable` | `boolean` | Show sort indicator in header |
+| `filterable` | `boolean` | Show filter icon in header |
+| `className` | `string` | Additional class for column cells |
+| `render` | `function` | Custom render: `(row, rowIndex, colIndex) => ReactNode` |
+
+## Examples
+
+### Basic table
+```jsx
+<Table
+  columns={[
+    { key: "name", label: "Name" },
+    { key: "email", label: "Email" },
+    { key: "role", label: "Role" },
+  ]}
+  data={[
+    { name: "Alice Johnson", email: "alice@example.com", role: "Admin" },
+    { name: "Bob Smith", email: "bob@example.com", role: "Editor" },
+  ]}
+/>
+```
+
+### With custom cell rendering
+```jsx
+<Table
+  columns={[
+    {
+      key: "user",
+      label: "User",
+      render: (row) => (
+        <Flex gap="8" alignItems="center">
+          <Avatar initials={row.initials} size="small" />
+          <span>{row.name}</span>
+        </Flex>
+      ),
+    },
+    { key: "email", label: "Email" },
+    {
+      key: "status",
+      label: "Status",
+      render: (row) => <Status label={row.status} variant={row.statusColor} />,
+    },
+    {
+      key: "actions",
+      label: "",
+      align: "right",
+      render: (row) => (
+        <Button icon="DotsThree" layout="icon-only" appearance="ghost" size="small" />
+      ),
+    },
+  ]}
+  data={users}
+/>
+```
+
+### With sortable/filterable headers
+```jsx
+<Table
+  columns={[
+    { key: "name", label: "Name", sortable: true },
+    { key: "date", label: "Date", sortable: true, icon: "Calendar" },
+    { key: "category", label: "Category", filterable: true },
+    { key: "amount", label: "Amount", align: "right", sortable: true },
+  ]}
+  data={transactions}
+/>
+```
+
+## Composition
+
+- Use `Avatar`, `Tag`, `Status`, `Badge`, `Button` inside custom `render` functions
+- Wrap in `Card` for bordered table sections
+- Pair with `Pagination` below the table for large datasets
+- Inside `UDS.Main` for page-level data tables
+
+## Do's and Don'ts
+
+✅ **Do**: Use `render` function for complex cell content (avatars, tags, action buttons)
+✅ **Do**: Align numeric columns to the right with `align: "right"`
+✅ **Do**: Use `Flex` inside render functions for multi-element cells
+
+❌ **Don't**: Put very wide content in cells without considering responsive behavior
+❌ **Don't**: Use `render` AND `key` for the same column — `render` takes precedence

package/src/ui/Table/Table.jsx

@@ -0,0 +1,143 @@
+import React from "react";
+import Icon from "../Icon/Icon";
+import "./Table.scss";
+
+const BASE_CLASS = "uds-table";
+
+/**
+ * Table component for displaying tabular data
+ * @param {array} columns - Array of column definitions
+ * @param {array} data - Array of data rows
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the table element
+ */
+export default function Table({
+  columns = [],
+  data = [],
+  className = "",
+  ...props
+}) {
+  const classNames = [BASE_CLASS, className].filter(Boolean).join(" ");
+
+  return (
+    <div className={`${BASE_CLASS}__wrapper`}>
+      <table className={classNames} {...props}>
+        {columns.length > 0 && (
+          <thead className={`${BASE_CLASS}__head`}>
+            <tr className={`${BASE_CLASS}__row`}>
+              {columns.map((column, index) => (
+                <TableCell
+                  key={column.key || index}
+                  type="header"
+                  column={column}
+                  index={index}
+                />
+              ))}
+            </tr>
+          </thead>
+        )}
+        <tbody className={`${BASE_CLASS}__body`}>
+          {data.map((row, rowIndex) => (
+            <tr key={rowIndex} className={`${BASE_CLASS}__row`}>
+              {columns.map((column, colIndex) => (
+                <TableCell
+                  key={column.key || colIndex}
+                  type="cell"
+                  column={column}
+                  row={row}
+                  rowIndex={rowIndex}
+                  colIndex={colIndex}
+                />
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/**
+ * TableCell component - flexible cell that can render different content types
+ * @param {string} type - Cell type: 'header' or 'cell'
+ * @param {object} column - Column definition
+ * @param {object} row - Row data (for data cells)
+ * @param {number} rowIndex - Row index
+ * @param {number} colIndex - Column index
+ */
+function TableCell({ type, column, row, rowIndex, colIndex }) {
+  const isHeader = type === "header";
+  const Element = isHeader ? "th" : "td";
+  const cellValue = isHeader
+    ? column.label
+    : (row?.[column.key] ?? column.render?.(row, rowIndex, colIndex));
+
+  const classNames = [
+    `${BASE_CLASS}__cell`,
+    isHeader && `${BASE_CLASS}__cell--header`,
+    column.align && `${BASE_CLASS}__cell--${column.align}`,
+    column.className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  // Handle different cell content types
+  const renderCellContent = () => {
+    // If column has a render function, use it
+    if (!isHeader && column.render) {
+      return column.render(row, rowIndex, colIndex);
+    }
+
+    // If cellValue is already a React element, return it
+    if (React.isValidElement(cellValue)) {
+      return cellValue;
+    }
+
+    // Handle header cells with icons
+    if (isHeader) {
+      return (
+        <div className={`${BASE_CLASS}__cell-content`}>
+          {column.icon && (
+            <Icon
+              name={column.icon}
+              size={16}
+              appearance="regular"
+              className={`${BASE_CLASS}__cell-icon`}
+            />
+          )}
+          {column.label && (
+            <span className={`${BASE_CLASS}__cell-label`}>{column.label}</span>
+          )}
+          {column.sortable && (
+            <Icon
+              name="CaretUpDown"
+              size={16}
+              appearance="regular"
+              className={`${BASE_CLASS}__cell-sort-icon`}
+            />
+          )}
+          {column.filterable && (
+            <Icon
+              name="Funnel"
+              size={16}
+              appearance="regular"
+              className={`${BASE_CLASS}__cell-filter-icon`}
+            />
+          )}
+        </div>
+      );
+    }
+
+    // Handle data cells
+    return (
+      <div className={`${BASE_CLASS}__cell-content`}>
+        {cellValue != null ? String(cellValue) : ""}
+      </div>
+    );
+  };
+
+  return <Element className={classNames}>{renderCellContent()}</Element>;
+}
+
+// Export TableCell for external use if needed
+Table.Cell = TableCell;

package/src/ui/Table/Table.scss

@@ -0,0 +1,90 @@
+@use "../../styles/typography" as *;
+
+.uds-table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+
+  &__wrapper {
+    width: 100%;
+    overflow-x: auto;
+    border: var(--uds-border-width-1) solid var(--uds-border-primary);
+    border-radius: var(--uds-radius-4);
+  }
+
+  &__head {
+    background-color: var(--uds-surface-secondary);
+  }
+
+  &__body {
+    background-color: var(--uds-surface-primary);
+  }
+
+  &__row {
+    border-bottom: var(--uds-border-width-1) solid var(--uds-border-primary);
+    transition: background-color var(--uds-animation-duration-200)
+      var(--uds-animation-ease-standard);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover:not(.uds-table__row--header) {
+      background-color: var(--uds-surface-tertiary);
+    }
+  }
+
+  &__cell {
+    @include uds-body-14-medium;
+    padding: var(--uds-spacing-12) var(--uds-spacing-16);
+    text-align: left;
+    vertical-align: middle;
+    color: var(--uds-text-primary);
+
+    &--header {
+      @include uds-body-14-semibold;
+      color: var(--uds-text-primary);
+      background-color: var(--uds-surface-secondary);
+      user-select: none;
+    }
+
+    &--left {
+      text-align: left;
+    }
+
+    &--center {
+      text-align: center;
+    }
+
+    &--right {
+      text-align: right;
+    }
+  }
+
+  &__cell-content {
+    display: flex;
+    align-items: center;
+    gap: var(--uds-gap-8);
+  }
+
+  &__cell-label {
+    flex: 1;
+  }
+
+  &__cell-icon {
+    flex-shrink: 0;
+    color: var(--uds-text-secondary);
+  }
+
+  &__cell-sort-icon,
+  &__cell-filter-icon {
+    flex-shrink: 0;
+    color: var(--uds-text-tertiary);
+    cursor: pointer;
+    transition: color var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+    &:hover {
+      color: var(--uds-text-primary);
+    }
+  }
+}

package/src/ui/Table/Table.spec.ts

@@ -0,0 +1,12 @@
+export const TABLE_DEFAULTS = {
+  className: "",
+} as const;
+
+export const TABLE_STORY_SPEC = {
+  defaults: {
+    className: TABLE_DEFAULTS.className,
+  },
+  stories: {
+    default: {},
+  },
+} as const;

package/src/ui/Table/Table.stories.jsx

@@ -0,0 +1,14 @@
+import Table from "./Table";
+
+export default {
+  title: "Components/Table",
+  component: Table,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Table/Table.stories.tsx

@@ -0,0 +1,14 @@
+import Table from "./Table.jsx";
+
+export default {
+  title: "Components/Table",
+  component: Table,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const Default = {
+  args: {},
+};

package/src/ui/Table/Table.test.tsx

@@ -0,0 +1 @@
+export {};

package/src/ui/Table/Table.tsx

@@ -0,0 +1,6 @@
+import type { ComponentType } from "react";
+import LegacyTable from "./Table.jsx";
+
+const Table = LegacyTable as ComponentType<any>;
+
+export default Table;

package/src/ui/Table/Table.types.ts

@@ -0,0 +1,3 @@
+export interface TableProps {
+  className?: string;
+}

package/src/ui/Table/index.js

@@ -0,0 +1 @@
+export { default } from "./Table";

package/src/ui/Tabs/TabItem.jsx

@@ -0,0 +1,80 @@
+import React from "react";
+import Icon from "../Icon/Icon";
+import Badge from "../Badge/Badge";
+
+const BASE_CLASS = "uds-tabs-item";
+
+/**
+ * TabItem component - A single tab item building block
+ * Can be used standalone or assembled into a Tabs component
+ *
+ * @param {string} label - The text content of the tab
+ * @param {string} appearance - Visual style variant: 'underline', 'block', or 'block-inverted'
+ * @param {boolean} active - Whether the tab is currently active
+ * @param {string|boolean} icon - Icon name to display (or false/undefined for no icon)
+ * @param {number|string|boolean} tag - Badge count to display (or false/undefined for no badge)
+ * @param {string} tagVariant - Badge color variant (default: 'red')
+ * @param {string} className - Additional CSS classes
+ * @param {function} onClick - Click handler function
+ * @param {object} props - Additional props to pass to the tab element
+ */
+export default function TabItem({
+  label,
+  appearance = "underline",
+  active = false,
+  icon,
+  tag,
+  tagVariant = "red",
+  className = "",
+  onClick,
+  ...props
+}) {
+  const classNames = [BASE_CLASS, active && `active`, className]
+    .filter(Boolean)
+    .join(" ");
+
+  const Element = onClick ? "button" : "div";
+
+  const hasIcon = !!icon && typeof icon === "string";
+  const hasTag = !!tag && (typeof tag === "number" || typeof tag === "string");
+
+  // Ensure label is a string, not an object
+  let labelText = "";
+  if (label != null) {
+    if (typeof label === "string") {
+      labelText = label;
+    } else if (typeof label !== "object") {
+      // Only convert non-objects to string
+      labelText = String(label);
+    }
+    // If label is an object, labelText remains empty string
+  }
+
+  // Filter out any object values from props to prevent rendering objects
+  const safeProps = {};
+  if (props) {
+    Object.keys(props).forEach(key => {
+      const value = props[key];
+      // Only include props that are not objects (or are React elements)
+      if (value == null || typeof value !== "object" || React.isValidElement(value)) {
+        safeProps[key] = value;
+      }
+    });
+  }
+
+  return (
+    <Element
+      className={classNames}
+      onClick={onClick}
+      role={onClick ? "tab" : undefined}
+      aria-selected={onClick ? active : undefined}
+      {...safeProps}
+    >
+      {hasIcon && (
+        <Icon name={icon} size={16} appearance="bold" />
+      )}
+      {labelText && <span>{labelText}</span>}
+      {hasTag && <Badge count={tag} variant={tagVariant} />}
+    </Element>
+  );
+}

package/src/ui/Tabs/Tabs.ai.md

@@ -0,0 +1,52 @@
+# Tabs
+
+Tab navigation component for switching between content views.
+
+## When to Use
+- Switching between related content views without page navigation
+- Organizing content into logical sections (e.g., Details / Activity / Settings)
+
+## Props
+
+### Tabs (container)
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | — | `Tab` components |
+| `activeTab` | `string` | — | Currently active tab ID |
+| `onChange` | `function` | — | Callback `(tabId: string) => void` |
+| `className` | `string` | `""` | Additional CSS classes |
+
+### Tab
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | `string` | — | Tab identifier |
+| `label` | `string` | — | Tab label text |
+| `icon` | `string` | — | Phosphor icon name |
+| `badge` | `number` | — | Badge count on tab |
+| `disabled` | `boolean` | `false` | Disabled state |
+
+## Examples
+
+```jsx
+const [activeTab, setActiveTab] = useState("details");
+
+<Tabs activeTab={activeTab} onChange={setActiveTab}>
+  <Tab id="details" label="Details" />
+  <Tab id="activity" label="Activity" badge={3} />
+  <Tab id="settings" label="Settings" icon="Gear" />
+</Tabs>
+
+{activeTab === "details" && <DetailsPanel />}
+{activeTab === "activity" && <ActivityFeed />}
+{activeTab === "settings" && <SettingsForm />}
+```
+
+## Import
+```jsx
+import { Tabs, Tab } from "@mich8060/chg-design-system";
+```
+
+## Note
+- Only manages tab header navigation — you render the corresponding content conditionally

package/src/ui/Tabs/Tabs.figma.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Tabs from './Tabs';
+
+/**
+ * Figma Code Connect for Tabs component
+ * 
+ * Simple execution version of tabs with various appearances and configurations
+ */
+export default function TabsFigma({
+    tabs = 6,
+    appearance = 'underline',
+    activeTab = 1,
+    fill = true,
+}) {
+    const tabsCount = Math.min(Math.max(parseInt(tabs) || 6, 2), 6);
+    const activeIndex = Math.min(Math.max(parseInt(activeTab) || 1, 1), tabsCount) - 1;
+
+    const tabLabels = Array.from({ length: tabsCount }, (_, i) => ({
+        label: `Tab ${i + 1}`,
+    }));
+
+    return (
+        <Tabs
+            tabs={tabLabels}
+            appearance={appearance}
+            activeTab={activeIndex}
+            fill={fill}
+        />
+    );
+}