@mich8060/unified-design-system 0.1.10

package/src/ui/Tooltip/Tooltip.jsx

@@ -0,0 +1,125 @@
+import React, { useState, useRef, useEffect } from "react";
+import "./Tooltip.scss";
+
+const BASE_CLASS = "uds-tooltip";
+
+const placementClassMap = {
+  top: "top",
+  bottom: "bottom",
+  left: "left",
+  right: "right",
+};
+
+/**
+ * Tooltip component that displays a message when hovering over its children
+ * @param {ReactNode} children - The element that triggers the tooltip
+ * @param {string} content - The tooltip message text
+ * @param {string} placement - Tooltip placement: 'top', 'bottom', 'left', 'right' (default: 'top')
+ * @param {boolean} disabled - Whether the tooltip is disabled
+ * @param {string} className - Additional CSS classes
+ * @param {object} props - Additional props to pass to the wrapper element
+ */
+export default function Tooltip({
+  children,
+  content,
+  placement = "top",
+  disabled = false,
+  className = "",
+  ...props
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const wrapperRef = useRef(null);
+  const tooltipRef = useRef(null);
+
+  useEffect(() => {
+    if (!isVisible || !tooltipRef.current || !wrapperRef.current) return;
+
+    const tooltip = tooltipRef.current;
+    const wrapper = wrapperRef.current;
+    const rect = wrapper.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+
+    // Position the tooltip based on placement
+    let top = 0;
+    let left = 0;
+
+    switch (placement) {
+      case "top":
+        top = rect.top - tooltipRect.height - 8;
+        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "bottom":
+        top = rect.bottom + 8;
+        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
+        break;
+      case "left":
+        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+        left = rect.left - tooltipRect.width - 8;
+        break;
+      case "right":
+        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
+        left = rect.right + 8;
+        break;
+      default:
+        break;
+    }
+
+    // Keep tooltip within viewport
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    if (left < 8) left = 8;
+    if (left + tooltipRect.width > viewportWidth - 8) {
+      left = viewportWidth - tooltipRect.width - 8;
+    }
+    if (top < 8) top = 8;
+    if (top + tooltipRect.height > viewportHeight - 8) {
+      top = viewportHeight - tooltipRect.height - 8;
+    }
+
+    tooltip.style.top = `${top}px`;
+    tooltip.style.left = `${left}px`;
+  }, [isVisible, placement]);
+
+  if (!content || disabled) {
+    return <>{children}</>;
+  }
+
+  const handleMouseEnter = () => {
+    setIsVisible(true);
+  };
+
+  const handleMouseLeave = () => {
+    setIsVisible(false);
+  };
+
+  const classNames = [
+    BASE_CLASS,
+    placementClassMap[placement] &&
+      `${BASE_CLASS}--${placementClassMap[placement]}`,
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={classNames}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      {children}
+      {isVisible && (
+        <div
+          ref={tooltipRef}
+          className={`${BASE_CLASS}__content`}
+          role="tooltip"
+        >
+          {content}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/Tooltip/Tooltip.scss

@@ -0,0 +1,80 @@
+@use "../../styles/typography" as *;
+
+.uds-tooltip {
+  position: relative;
+  display: inline-block;
+
+  &__content {
+    @include uds-body-14;
+    position: fixed;
+    z-index: var(--uds-elevation-tooltip);
+    padding: var(--uds-spacing-8) var(--uds-spacing-12);
+    background: var(--uds-surface-inverse, #1f2937);
+    color: var(--uds-text-inverse, #ffffff);
+    border-radius: var(--uds-radius-4);
+    box-shadow: var(--uds-shadow-light-200);
+    max-width: 280px;
+    word-wrap: break-word;
+    white-space: normal;
+    pointer-events: none;
+    animation: tooltipFadeIn var(--uds-animation-duration-200) var(--uds-animation-ease-standard);
+
+    // Arrow
+    &::before {
+      content: "";
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-style: solid;
+    }
+  }
+
+  // Top placement (arrow pointing down)
+  &--top &__content::before {
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 6px 6px 0 6px;
+    border-color: var(--uds-surface-inverse, #1f2937) transparent transparent
+      transparent;
+  }
+
+  // Bottom placement (arrow pointing up)
+  &--bottom &__content::before {
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 6px 6px 6px;
+    border-color: transparent transparent var(--uds-surface-inverse, #1f2937)
+      transparent;
+  }
+
+  // Left placement (arrow pointing right)
+  &--left &__content::before {
+    right: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 6px 0 6px 6px;
+    border-color: transparent transparent transparent
+      var(--uds-surface-inverse, #1f2937);
+  }
+
+  // Right placement (arrow pointing left)
+  &--right &__content::before {
+    left: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 6px 6px 6px 0;
+    border-color: transparent var(--uds-surface-inverse, #1f2937) transparent
+      transparent;
+  }
+}
+
+@keyframes tooltipFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/src/ui/Tooltip/Tooltip.spec.ts

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

package/src/ui/Tooltip/Tooltip.stories.jsx

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

package/src/ui/Tooltip/Tooltip.stories.tsx

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

package/src/ui/Tooltip/Tooltip.test.tsx

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

package/src/ui/Tooltip/Tooltip.tsx

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

package/src/ui/Tooltip/Tooltip.types.ts

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

package/src/ui/Tooltip/index.js

@@ -0,0 +1,2 @@
+export { default as Tooltip } from "./Tooltip";
+export { default } from "./Tooltip";

package/src/ui/UDS/UDS.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import "./UDS.scss";
+
+function UDS({ children, className = "", ...props }) {
+  return (
+    <div className={`uds--container ${className}`.trim()} {...props}>
+      {children}
+    </div>
+  );
+}
+
+UDS.Menu = function UDSMenu({ children, ...props }) {
+  return (
+    <div className="uds--menu" {...props}>
+      {children}
+    </div>
+  );
+};
+
+UDS.Content = function UDSContent({ children, ...props }) {
+  return (
+    <div className="uds--content" {...props}>
+      {children}
+    </div>
+  );
+};
+
+UDS.Listview = function UDSListview({ children, ...props }) {
+  return (
+    <div className="uds--listview" {...props}>
+      {children}
+    </div>
+  );
+};
+
+UDS.Main = function UDSMain({ children, ...props }) {
+  return (
+    <div className="uds--main" {...props}>
+      {children}
+    </div>
+  );
+};
+
+UDS.Panel = function UDSPanel({ children, ...props }) {
+  return (
+    <div className="uds--panel" {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default UDS;

package/src/ui/UDS/UDS.scss

@@ -0,0 +1,49 @@
+.uds {
+    &--container {
+        display: flex;
+        flex-direction: row;
+        min-height: 800px;
+        width: 100%;
+    }
+
+    &--content {
+        display: flex;
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        padding-left: 64px;
+    }
+
+    &--listview {
+        background-color: var(--uds-surface-primary);
+        border-right: solid var(--uds-border-width-1) var(--uds-border-primary);
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        overflow-y: auto;
+        width: 360px;
+    }
+
+    &--main {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        min-width: 0;
+        overflow-y: auto;
+    }
+
+    &--panel {
+        background-color: var(--uds-surface-secondary);
+        border-left: solid var(--uds-border-width-1) var(--uds-border-primary);
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        overflow-y: auto;
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        width: 360px;
+        z-index: 100;
+    }
+}

package/src/ui/UDS/UDS.spec.ts

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

package/src/ui/UDS/UDS.stories.jsx

@@ -0,0 +1,22 @@
+import UDS from "./UDS";
+
+export default {
+  title: "Components/UDS",
+  component: UDS,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Default = {
+  render: () => (
+    <UDS style={{ height: "520px" }}>
+      <UDS.Menu>Menu</UDS.Menu>
+      <UDS.Content>
+        <UDS.Main>Main content</UDS.Main>
+      </UDS.Content>
+      <UDS.Panel>Panel</UDS.Panel>
+    </UDS>
+  ),
+};

package/src/ui/UDS/UDS.stories.tsx

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

package/src/ui/UDS/UDS.test.tsx

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

package/src/ui/UDS/UDS.tsx

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

package/src/ui/UDS/UDS.types.ts

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

package/src/ui/UDS/index.js

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

package/src/ui/_spec/createMetaFromSpec.ts

@@ -0,0 +1,35 @@
+import type { SpecMetaInput } from "./types";
+
+export function createMetaFromSpec<TArgs extends Record<string, unknown>>({
+  title,
+  component,
+  defaults,
+  options,
+  argTypes = {},
+  parameters = {},
+  tags = ["autodocs"],
+}: SpecMetaInput<TArgs>) {
+  const mergedArgTypes: Record<string, Record<string, unknown>> = {
+    ...argTypes,
+  };
+
+  if (options) {
+    Object.entries(options).forEach(([key, value]) => {
+      const existing = mergedArgTypes[key] || {};
+      mergedArgTypes[key] = {
+        ...existing,
+        control: existing.control || "select",
+        options: Array.isArray(value) ? [...value] : value,
+      };
+    });
+  }
+
+  return {
+    title,
+    component,
+    tags,
+    args: defaults,
+    argTypes: mergedArgTypes,
+    parameters,
+  };
+}

package/src/ui/_spec/createStoryArgsFromSpec.ts

@@ -0,0 +1,8 @@
+export function createStoryArgsFromSpec<TDefaults extends Record<string, unknown>>(
+  defaults: TDefaults,
+) {
+  return <TExample extends Partial<TDefaults>>(example: TExample) => ({
+    ...defaults,
+    ...example,
+  });
+}

package/src/ui/_spec/generated/spec-props-reference.md

@@ -0,0 +1,55 @@
+# Spec Props Reference
+
+> Auto-generated from component specs. Do not edit manually.
+
+## Button
+
+Source: `src/ui/Button/Button.spec.ts`
+
+| Prop | Default | Options |
+|------|---------|---------|
+| label | `Button` | - |
+| icon | `Plus` | - |
+| appearance | `primary` | `primary | soft | outline | text | ghost | disabled | destructive` |
+| layout | `label-only` | `label-only | icon-left | icon-right | icon-only | only` |
+| size | `default` | `large | default | small | xsmall` |
+
+## Accordion
+
+Source: `src/ui/Accordion/Accordion.spec.ts`
+
+| Prop | Default | Options |
+|------|---------|---------|
+| expandedFirst | `false` | `[false,true]` |
+
+## Input
+
+Source: `src/ui/Input/Input.spec.ts`
+
+| Prop | Default | Options |
+|------|---------|---------|
+| value | `""` | - |
+| placeholder | `Type here...` | - |
+| type | `text` | - |
+| size | `default` | `compact | default` |
+| state | `default` | `default | focused | error | disabled` |
+| disabled | `false` | - |
+| iconPosition | `right` | `left | right` |
+| icon | `MagnifyingGlass` | - |
+| label | `Search` | - |
+
+## Dropdown
+
+Source: `src/ui/Dropdown/Dropdown.spec.ts`
+
+| Prop | Default | Options |
+|------|---------|---------|
+| options | `[{"value":"apple","label":"Apple"},{"value":"orange","label":"Orange"},{"value":"banana","label":"Banana"}]` | - |
+| value | `apple` | - |
+| placeholder | `Select an option` | - |
+| size | `default` | `compact | default` |
+| state | `default` | `default | focused | error | disabled` |
+| placement | `bottom-start` | - |
+| disabled | `false` | - |
+| label | `Fruit` | - |
+

package/src/ui/_spec/specStorySync.test.ts

@@ -0,0 +1,73 @@
+import { describe, test } from "@jest/globals";
+import accordionMeta, {
+  Default as AccordionDefaultStory,
+  FirstExpanded as AccordionFirstExpandedStory,
+} from "../Accordion/Accordion.stories";
+import { ACCORDION_STORY_SPEC } from "../Accordion/Accordion.spec";
+import buttonMeta from "../Button/Button.stories";
+import {
+  BUTTON_APPEARANCES,
+  BUTTON_DEFAULTS,
+  BUTTON_LAYOUTS,
+  BUTTON_SIZES,
+} from "../Button/Button.spec";
+import dropdownMeta from "../Dropdown/Dropdown.stories";
+import { DROPDOWN_STORY_SPEC } from "../Dropdown/Dropdown.spec";
+import inputMeta from "../Input/Input.stories";
+import { INPUT_STORY_SPEC } from "../Input/Input.spec";
+
+const getArgTypeOptions = (meta: unknown, key: string): unknown[] => {
+  const options = (meta as { argTypes?: Record<string, { options?: unknown[] }> }).argTypes?.[
+    key
+  ]?.options;
+  return Array.isArray(options) ? options : [];
+};
+
+describe("Spec-to-story sync checks", () => {
+  test("Button story meta uses spec defaults and options", () => {
+    const meta = buttonMeta as { args?: Record<string, unknown> };
+    expect(meta.args?.appearance).toBe(BUTTON_DEFAULTS.appearance);
+    expect(meta.args?.layout).toBe(BUTTON_DEFAULTS.layout);
+    expect(meta.args?.size).toBe(BUTTON_DEFAULTS.size);
+
+    expect(getArgTypeOptions(buttonMeta, "appearance")).toEqual([...BUTTON_APPEARANCES]);
+    expect(getArgTypeOptions(buttonMeta, "layout")).toEqual([...BUTTON_LAYOUTS]);
+    expect(getArgTypeOptions(buttonMeta, "size")).toEqual([...BUTTON_SIZES]);
+  });
+
+  test("Input story meta uses spec defaults and options", () => {
+    const meta = inputMeta as { args?: Record<string, unknown> };
+    expect(meta.args).toEqual({ ...INPUT_STORY_SPEC.defaults });
+    expect(getArgTypeOptions(inputMeta, "size")).toEqual([...INPUT_STORY_SPEC.options.size]);
+    expect(getArgTypeOptions(inputMeta, "state")).toEqual([...INPUT_STORY_SPEC.options.state]);
+    expect(getArgTypeOptions(inputMeta, "iconPosition")).toEqual([
+      ...INPUT_STORY_SPEC.options.iconPosition,
+    ]);
+  });
+
+  test("Dropdown story meta uses spec defaults and options", () => {
+    const meta = dropdownMeta as { args?: Record<string, unknown> };
+    expect(meta.args).toEqual({ ...DROPDOWN_STORY_SPEC.defaults });
+    expect(getArgTypeOptions(dropdownMeta, "size")).toEqual([
+      ...DROPDOWN_STORY_SPEC.options.size,
+    ]);
+    expect(getArgTypeOptions(dropdownMeta, "state")).toEqual([
+      ...DROPDOWN_STORY_SPEC.options.state,
+    ]);
+  });
+
+  test("Accordion stories map directly to spec story variants", () => {
+    const meta = accordionMeta as { args?: Record<string, unknown> };
+    expect(meta.args).toEqual({ ...ACCORDION_STORY_SPEC.defaults });
+
+    expect((AccordionDefaultStory as { args: Record<string, unknown> }).args).toEqual({
+      ...ACCORDION_STORY_SPEC.defaults,
+      ...ACCORDION_STORY_SPEC.stories.default,
+    });
+
+    expect((AccordionFirstExpandedStory as { args: Record<string, unknown> }).args).toEqual({
+      ...ACCORDION_STORY_SPEC.defaults,
+      ...ACCORDION_STORY_SPEC.stories.firstExpanded,
+    });
+  });
+});

package/src/ui/_spec/types.ts

@@ -0,0 +1,21 @@
+export type SpecOptions<TArgs extends Record<string, unknown>> = Partial<
+  Record<keyof TArgs, readonly unknown[]>
+>;
+
+export type StoryExample<TArgs extends Record<string, unknown>> = Partial<TArgs>;
+
+export interface StorySpec<TArgs extends Record<string, unknown>> {
+  defaults: TArgs;
+  options?: SpecOptions<TArgs>;
+  stories: Record<string, StoryExample<TArgs>>;
+}
+
+export interface SpecMetaInput<TArgs extends Record<string, unknown>> {
+  title: string;
+  component: unknown;
+  defaults: TArgs;
+  options?: SpecOptions<TArgs>;
+  argTypes?: Record<string, Record<string, unknown>>;
+  parameters?: Record<string, unknown>;
+  tags?: string[];
+}