@mich8060/unified-design-system 0.1.10

package/src/ui/Tabs/Tabs.jsx

@@ -0,0 +1,318 @@
+import React, { useRef, useEffect, useState } from "react";
+import TabItem from "./TabItem";
+import Button from "../Button/Button";
+import "./Tabs.scss";
+
+const BASE_CLASS = "uds-tabs";
+
+const appearanceClassMap = {
+  underline: "underline",
+  block: "block",
+  "block-inverted": "block-inverted",
+};
+
+/**
+ * Tabs component - A simple complete tab group
+ *
+ * @param {Array} tabs - Array of tab objects: [{ label, icon?, tag?, onClick? }, ...]
+ * @param {string} appearance - Visual style variant: 'underline', 'block', or 'block-inverted'
+ * @param {number} activeTab - Index of the currently active tab (0-based)
+ * @param {boolean} fill - Whether tabs should fill available width (default: false)
+ * @param {boolean} scrollable - Whether tabs should scroll when overflowing (default: false)
+ * @param {function} onTabChange - Callback when tab changes: (index) => void
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the tabs container
+ */
+export default function Tabs({
+  tabs = [],
+  appearance = "underline",
+  activeTab,
+  fill = false,
+  scrollable = false,
+  onTabChange,
+  className = "",
+  ...props
+}) {
+  const tabsContainerRef = useRef(null);
+  const tabsListRef = useRef(null);
+  const [showLeftScroll, setShowLeftScroll] = useState(false);
+  const [showRightScroll, setShowRightScroll] = useState(false);
+  const [, setScrollPosition] = useState(0);
+
+  // Default to first tab (index 0) if activeTab is not provided or invalid
+  const currentActiveTab = activeTab !== undefined && activeTab !== null && activeTab >= 0 && activeTab < tabs.length
+    ? activeTab
+    : 0;
+
+  const classNames = [
+    BASE_CLASS,
+    appearanceClassMap[appearance] &&
+      `${BASE_CLASS}--${appearanceClassMap[appearance]}`,
+    fill && `${BASE_CLASS}--fill`,
+    scrollable && `${BASE_CLASS}--scrollable`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const handleTabClick = (index, tab) => {
+    if (tab.onClick) {
+      tab.onClick(index, tab);
+    }
+    if (onTabChange) {
+      onTabChange(index, tab);
+    }
+  };
+
+  // Check if scrolling is needed and update scroll button visibility
+  const checkScrollButtons = () => {
+    if (!scrollable || !tabsContainerRef.current || !tabsListRef.current) {
+      return;
+    }
+
+    const container = tabsContainerRef.current;
+    const list = tabsListRef.current;
+    const containerWidth = container.offsetWidth;
+    const listWidth = list.scrollWidth;
+    const scrollLeft = list.scrollLeft;
+
+    setShowLeftScroll(scrollLeft > 0);
+    setShowRightScroll(scrollLeft < listWidth - containerWidth - 1);
+    setScrollPosition(scrollLeft);
+  };
+
+  // Scroll to active tab if it's not visible
+  const scrollToActiveTab = () => {
+    if (!scrollable || !tabsListRef.current || currentActiveTab === undefined) {
+      return;
+    }
+
+    const list = tabsListRef.current;
+    const container = tabsContainerRef.current;
+    const activeTabElement = list.children[currentActiveTab];
+
+    if (!activeTabElement || !container) {
+      return;
+    }
+
+    const _containerLeft = container.offsetLeft; // eslint-disable-line no-unused-vars
+    const containerWidth = container.offsetWidth;
+    const tabLeft = activeTabElement.offsetLeft;
+    const tabWidth = activeTabElement.offsetWidth;
+    const scrollLeft = list.scrollLeft;
+
+    // Check if tab is outside visible area
+    const tabRight = tabLeft + tabWidth;
+    const visibleLeft = scrollLeft;
+    const visibleRight = scrollLeft + containerWidth;
+
+    if (tabLeft < visibleLeft) {
+      // Tab is to the left of visible area
+      list.scrollTo({
+        left: tabLeft - 16, // Add some padding
+        behavior: "smooth",
+      });
+    } else if (tabRight > visibleRight) {
+      // Tab is to the right of visible area
+      list.scrollTo({
+        left: tabRight - containerWidth + 16, // Add some padding
+        behavior: "smooth",
+      });
+    }
+  };
+
+  // Handle scroll button clicks
+  const handleScrollLeft = () => {
+    if (!tabsListRef.current) return;
+    const scrollAmount = tabsListRef.current.offsetWidth * 0.75;
+    tabsListRef.current.scrollBy({
+      left: -scrollAmount,
+      behavior: "smooth",
+    });
+  };
+
+  const handleScrollRight = () => {
+    if (!tabsListRef.current) return;
+    const scrollAmount = tabsListRef.current.offsetWidth * 0.75;
+    tabsListRef.current.scrollBy({
+      left: scrollAmount,
+      behavior: "smooth",
+    });
+  };
+
+  // Check scroll buttons on mount, resize, and scroll
+  useEffect(() => {
+    if (!scrollable) return;
+
+    checkScrollButtons();
+    scrollToActiveTab();
+
+    const container = tabsContainerRef.current;
+    const list = tabsListRef.current;
+
+    if (!container || !list) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      checkScrollButtons();
+      scrollToActiveTab();
+    });
+
+    resizeObserver.observe(container);
+    resizeObserver.observe(list);
+
+    list.addEventListener("scroll", checkScrollButtons);
+
+    return () => {
+      resizeObserver.disconnect();
+      list.removeEventListener("scroll", checkScrollButtons);
+    };
+  }, [scrollable, tabs.length]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Auto-select first tab on mount if no activeTab is provided
+  useEffect(() => {
+    if (activeTab === undefined || activeTab === null) {
+      if (onTabChange && tabs.length > 0) {
+        onTabChange(0, tabs[0]);
+      }
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Scroll to active tab when it changes
+  useEffect(() => {
+    if (scrollable) {
+      // Small delay to ensure DOM is updated
+      setTimeout(() => {
+        scrollToActiveTab();
+        checkScrollButtons();
+      }, 100);
+    }
+  }, [currentActiveTab, scrollable]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Early return after all hooks
+  if (!tabs || tabs.length === 0) {
+    return null;
+  }
+
+  const tabsContent = (
+    <div
+      ref={tabsListRef}
+      className={`${BASE_CLASS}__list`}
+      role="tablist"
+      {...props}
+    >
+      {tabs.map((tab, index) => {
+        // Ensure tab is an object and extract safe values
+        if (!tab || typeof tab !== "object") return null;
+        
+        // Safely extract label - ensure it's a string, not an object
+        const label = (tab.label != null && typeof tab.label === "string")
+          ? tab.label
+          : (tab.label != null && typeof tab.label !== "object")
+          ? String(tab.label)
+          : "";
+        
+        // Safely extract icon - only use if it's a string
+        const icon = typeof tab.icon === "string" ? tab.icon : undefined;
+        
+        // Safely extract tag - only use if it's a number or string
+        const tag = (typeof tab.tag === "number" || typeof tab.tag === "string") 
+          ? tab.tag 
+          : undefined;
+        
+        // Safely extract tagVariant - only use if it's a string
+        const tagVariant = typeof tab.tagVariant === "string" ? tab.tagVariant : undefined;
+        
+        // Safely get key - ensure it's a string or number
+        const tabKey = (tab.id != null && typeof tab.id !== "object")
+          ? (typeof tab.id === "string" || typeof tab.id === "number" ? tab.id : String(tab.id))
+          : index;
+        
+        return (
+          <TabItem
+            key={tabKey}
+            label={label}
+            appearance={appearance}
+            active={index === currentActiveTab}
+            icon={icon}
+            tag={tag}
+            tagVariant={tagVariant}
+            onClick={() => handleTabClick(index, tab)}
+          />
+        );
+      })}
+    </div>
+  );
+
+  if (scrollable) {
+    return (
+      <div ref={tabsContainerRef} className={classNames}>
+        {showLeftScroll && (
+          <Button
+            appearance="ghost"
+            layout="icon-only"
+            icon="CaretLeft"
+            onClick={handleScrollLeft}
+            className={`${BASE_CLASS}__scroll-button ${BASE_CLASS}__scroll-button--left`}
+            aria-label="Scroll tabs left"
+          />
+        )}
+        {tabsContent}
+        {showRightScroll && (
+          <Button
+            appearance="ghost"
+            layout="icon-only"
+            icon="CaretRight"
+            onClick={handleScrollRight}
+            className={`${BASE_CLASS}__scroll-button ${BASE_CLASS}__scroll-button--right`}
+            aria-label="Scroll tabs right"
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={classNames} role="tablist" {...props}>
+      {tabs.map((tab, index) => {
+        // Ensure tab is an object and extract safe values
+        if (!tab || typeof tab !== "object") return null;
+        
+        // Safely extract label - ensure it's a string, not an object
+        const label = (tab.label != null && typeof tab.label === "string")
+          ? tab.label
+          : (tab.label != null && typeof tab.label !== "object")
+          ? String(tab.label)
+          : "";
+        
+        // Safely extract icon - only use if it's a string
+        const icon = typeof tab.icon === "string" ? tab.icon : undefined;
+        
+        // Safely extract tag - only use if it's a number or string
+        const tag = (typeof tab.tag === "number" || typeof tab.tag === "string") 
+          ? tab.tag 
+          : undefined;
+        
+        // Safely extract tagVariant - only use if it's a string
+        const tagVariant = typeof tab.tagVariant === "string" ? tab.tagVariant : undefined;
+        
+        // Safely get key - ensure it's a string or number
+        const tabKey = (tab.id != null && typeof tab.id !== "object")
+          ? (typeof tab.id === "string" || typeof tab.id === "number" ? tab.id : String(tab.id))
+          : index;
+        
+        return (
+          <TabItem
+            key={tabKey}
+            label={label}
+            appearance={appearance}
+            active={index === currentActiveTab}
+            icon={icon}
+            tag={tag}
+            tagVariant={tagVariant}
+            onClick={() => handleTabClick(index, tab)}
+          />
+        );
+      })}
+    </div>
+  );
+}

package/src/ui/Tabs/Tabs.scss

@@ -0,0 +1,164 @@
+@use "../../styles/typography" as *;
+
+.uds {
+  &-tabs {
+    all: unset;
+    display: flex;
+    gap: 0;
+    width: 100%;
+    position: relative;
+    overflow-y: hidden;
+
+    &__list {
+      all: unset;
+      display: flex;
+      gap: 0;
+      width: 100%;
+      scroll-behavior: smooth;
+      overflow-y: hidden;
+      scrollbar-width: none; // Firefox
+      -ms-overflow-style: none; // IE and Edge
+
+      &::-webkit-scrollbar {
+        display: none; // Chrome, Safari, Opera
+      }
+    }
+
+    &--scrollable {
+      display: flex;
+      align-items: center;
+      gap: var(--uds-gap-4);
+      position: relative;
+
+      .uds-tabs__list {
+        flex: 1;
+        min-width: 0; // Allows flex item to shrink below content size
+      }
+    }
+
+    &__scroll-button {
+      flex-shrink: 0;
+      z-index: 1;
+      position: relative;
+    }
+
+    &-item {
+        @include uds-body-14-semibold;
+      all: unset;
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--uds-gap-8);
+      cursor: pointer;
+      position: relative;
+      user-select: none;
+      transition: all var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+      white-space: nowrap;
+      flex-shrink: 0; // Prevent tabs from shrinking
+    }
+
+    &--block {
+      border-radius: var(--uds-radius-4);
+      border: var(--uds-border-width-1) solid var(--uds-border-primary);
+      padding: var(--uds-spacing-4);
+
+      button {
+        padding: var(--uds-spacing-8) var(--uds-spacing-12);
+        @include uds-body-14-medium;
+
+        &.active {
+          background-color: var(--uds-surface-brand-tertiary);
+          border-radius: var(--uds-radius-4);
+          color: var(--uds-text-inverse);
+          @include uds-body-14-semibold;
+        }
+      }
+    }
+
+    &--block-inverted {
+      border-radius: var(--uds-radius-4);
+      border: var(--uds-border-width-1) solid var(--uds-border-primary);
+      padding: var(--uds-spacing-4);
+
+      button {
+        padding: var(--uds-spacing-8) var(--uds-spacing-12);
+        @include uds-body-14-medium;
+
+        &.active {
+          background-color: var(--uds-surface-primary);
+          border: var(--uds-border-width-1) solid var(--uds-border-primary);
+          color: var(--uds-icon-brand-tertiary);
+          @include uds-body-14-semibold;
+        }
+      }
+    }
+
+    &--underline {
+      border-bottom: solid var(--uds-border-width-1) var(--uds-border-primary);
+
+      button {
+        margin-bottom: -1px;
+        padding: var(--uds-spacing-12) var(--uds-spacing-24);
+
+        &.active {
+          border-bottom: solid 2px var(--uds-border-brand-tertiary);
+        }
+      }
+    }
+
+    // Overflow menu container
+    &__overflow-menu {
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+      position: relative;
+      left: 0;
+      z-index: 1;
+    }
+
+    // Style overflow button for underline appearance
+    &--underline {
+      .uds-tabs__overflow-menu button {
+        margin-bottom: -1px;
+        padding: var(--uds-spacing-12) var(--uds-spacing-24);
+        @include uds-body-16;
+
+        &.active {
+          border-bottom: solid 2px var(--uds-border-brand-tertiary);
+          @include uds-body-14-semibold;
+        }
+      }
+    }
+
+    // Style overflow button for block appearance
+    &--block {
+      .uds-tabs__overflow-menu button {
+        padding: var(--uds-spacing-8) var(--uds-spacing-12);
+        @include uds-body-14-medium;
+
+        &.active {
+          background-color: var(--uds-surface-brand-tertiary);
+          border-radius: var(--uds-radius-4);
+          color: var(--uds-text-inverse);
+          @include uds-body-14-semibold;
+        }
+      }
+    }
+
+    // Style overflow button for block-inverted appearance
+    &--block-inverted {
+      .uds-tabs__overflow-menu button {
+        padding: var(--uds-spacing-8) var(--uds-spacing-12);
+        @include uds-body-14-medium;
+
+        &.active {
+          background-color: var(--uds-surface-primary);
+          border: var(--uds-border-width-1) solid var(--uds-border-primary);
+          color: var(--uds-icon-brand-tertiary);
+          @include uds-body-14-semibold;
+        }
+      }
+    }
+  }
+}

package/src/ui/Tabs/Tabs.spec.ts

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

package/src/ui/Tabs/Tabs.stories.jsx

@@ -0,0 +1,18 @@
+import Tabs from "./Tabs";
+
+export default {
+  title: "Components/Tabs",
+  component: Tabs,
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    tabs: [
+      { id: "overview", label: "Overview" },
+      { id: "details", label: "Details" },
+      { id: "settings", label: "Settings" },
+    ],
+    activeTab: 0,
+  },
+};

package/src/ui/Tabs/Tabs.stories.tsx

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

package/src/ui/Tabs/Tabs.test.tsx

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

package/src/ui/Tabs/Tabs.tsx

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

package/src/ui/Tabs/Tabs.types.ts

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

package/src/ui/Tabs/index.js

@@ -0,0 +1,3 @@
+export { default as Tabs } from "./Tabs";
+export { default as TabItem } from "./TabItem";
+export { default } from "./Tabs";

package/src/ui/Tag/Tag.ai.md

@@ -0,0 +1,59 @@
+# Tag
+
+Colored label component for categorization, status, or metadata display.
+
+## When to Use
+- Status labels (Active, Pending, Archived)
+- Category tags on cards or list items
+- Metadata labels (role, department, type)
+
+## Props
+
+| Prop | Type | Default | Values | Description |
+|------|------|---------|--------|-------------|
+| `label` | `string` | — | — | Tag text |
+| `color` | `string` | `"gray"` | `"red"`, `"orange"`, `"yellow"`, `"green"`, `"dark-green"`, `"blue"`, `"dark-blue"`, `"purple"`, `"pink"`, `"gray"` | Tag color |
+| `variant` | `string` | `"filled"` | `"filled"`, `"outline"` | Fill style |
+| `size` | `string` | `"default"` | `"small"`, `"default"` | Tag size |
+| `removable` | `boolean` | `false` | — | Show remove button |
+| `onRemove` | `function` | — | — | Remove callback |
+| `className` | `string` | `""` | — | Additional CSS classes |
+
+## Examples
+
+### Status tags
+```jsx
+<Tag label="Active" color="green" />
+<Tag label="Pending" color="yellow" />
+<Tag label="Archived" color="gray" variant="outline" />
+```
+
+### Removable filter tags
+```jsx
+{filters.map(f => (
+  <Tag key={f} label={f} color="blue" removable onRemove={() => removeFilter(f)} />
+))}
+```
+
+### In a table cell
+```jsx
+const columns = [
+  {
+    key: "status",
+    label: "Status",
+    render: (value) => (
+      <Tag label={value} color={value === "Active" ? "green" : "gray"} size="small" />
+    ),
+  },
+];
+```
+
+## Semantic Color Guide
+| Color | Use For |
+|-------|---------|
+| `green` | Active, success, approved |
+| `red` | Error, rejected, critical |
+| `yellow` | Warning, pending, review |
+| `blue` | Info, selected, default |
+| `gray` | Neutral, inactive, archived |
+| `purple` | Special, premium, custom |

package/src/ui/Tag/Tag.figma.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Tag from './Tag';
+
+/**
+ * Figma Code Connect for Tag component
+ * 
+ * Simple execution version of tag with various configurations
+ */
+export default function TagFigma({
+    label = 'Label',
+    appearance = 'label-only',
+    size = 'compact',
+    color = 'transparent',
+    rounded = true,
+    solid = false,
+    icon,
+}) {
+    return (
+        <Tag
+            label={label}
+            appearance={appearance}
+            size={size}
+            color={color}
+            rounded={rounded}
+            solid={solid}
+            icon={icon}
+        />
+    );
+}