@etus/ui 0.1.0

package/src/components/workflow/Wizard/Wizard.types.ts

@@ -0,0 +1,61 @@
+import type { wizardVariants } from "./Wizard.variants"
+import type { VariantProps } from "class-variance-authority"
+import type { ReactNode } from "react"
+
+/**
+ * Single step in the wizard
+ */
+export interface WizardStep {
+  /** Content to render for this step */
+  content: ReactNode
+  /** Optional description for the step */
+  description?: string
+  /** Optional icon for the step */
+  icon?: ReactNode
+  /** Unique identifier for the step */
+  id: string
+  /** Whether this step is optional */
+  optional?: boolean
+  /** Step title displayed in the stepper */
+  title: string
+  /** Async validation function for the step */
+  validate?: () => Promise<boolean>
+}
+
+/**
+ * Wizard component props
+ */
+export interface WizardProps
+  extends Omit<React.ComponentProps<"div">, "children">,
+    VariantProps<typeof wizardVariants> {
+  /** Custom text for the back button */
+  backLabel?: string
+  /** Whether to allow going back to previous steps */
+  canGoBack?: boolean
+  /** Whether to allow skipping optional steps */
+  canSkip?: boolean
+  /** Custom text for the complete button */
+  completeLabel?: string
+  /** Current active step index (0-based) */
+  currentStep?: number
+  /** Whether the current step is loading */
+  isLoading?: boolean
+  /** Custom text for the next button */
+  nextLabel?: string
+  /** Callback when wizard is completed */
+  onComplete?: () => void
+  /** Callback when step changes */
+  onStepChange?: (step: number) => void
+  /** Callback to validate step before advancing */
+  onValidate?: (step: number) => boolean | Promise<boolean>
+  /** Reference to the wizard element */
+  ref?: React.Ref<HTMLDivElement>
+  /** Whether to show action buttons */
+  showActions?: boolean
+  /** Whether to show the stepper */
+  showSteps?: boolean
+  /** Custom text for the skip button */
+  skipLabel?: string
+  /** Array of steps to display */
+  steps: WizardStep[]
+}

package/src/components/workflow/Wizard/Wizard.variants.ts

@@ -0,0 +1,105 @@
+import { cva } from "class-variance-authority"
+
+/**
+ * Main wizard container variants
+ */
+export const wizardVariants = cva("flex gap-6", {
+  defaultVariants: {
+    size: "default",
+    variant: "default",
+  },
+  variants: {
+    variant: {
+      card: "flex-col rounded-lg border border-border bg-card",
+      default: "flex-col",
+      vertical: "flex-row",
+    },
+    size: {
+      default: "",
+      lg: "",
+      sm: "",
+    },
+  },
+})
+
+/**
+ * Wizard content area variants
+ */
+export const wizardContentVariants = cva("flex-1", {
+  defaultVariants: {
+    size: "default",
+    variant: "default",
+  },
+  variants: {
+    variant: {
+      card: "border-t border-border",
+      default: "",
+      vertical: "border-l border-border",
+    },
+    size: {
+      default: "p-6",
+      lg: "p-8",
+      sm: "p-4",
+    },
+  },
+})
+
+/**
+ * Wizard stepper area variants
+ */
+export const wizardStepperVariants = cva("", {
+  defaultVariants: {
+    size: "default",
+    variant: "default",
+  },
+  variants: {
+    variant: {
+      card: "p-6 pb-0",
+      default: "",
+      vertical: "min-w-48",
+    },
+    size: {
+      default: "",
+      lg: "",
+      sm: "",
+    },
+  },
+})
+
+/**
+ * Wizard actions area variants
+ */
+export const wizardActionsVariants = cva("flex items-center gap-3", {
+  defaultVariants: {
+    size: "default",
+    variant: "default",
+  },
+  variants: {
+    variant: {
+      card: "justify-between border-t border-border p-6",
+      default: "justify-between",
+      vertical: "justify-end border-t border-border pt-4",
+    },
+    size: {
+      default: "",
+      lg: "",
+      sm: "",
+    },
+  },
+})
+
+/**
+ * Wizard step content wrapper variants
+ */
+export const wizardStepContentVariants = cva("", {
+  defaultVariants: {
+    size: "default",
+  },
+  variants: {
+    size: {
+      default: "",
+      lg: "",
+      sm: "",
+    },
+  },
+})

package/src/components/workflow/Wizard/index.ts

@@ -0,0 +1,9 @@
+export type { WizardProps, WizardStep } from "./Wizard.types"
+export { Wizard } from "./Wizard"
+export {
+  wizardActionsVariants,
+  wizardContentVariants,
+  wizardStepContentVariants,
+  wizardStepperVariants,
+  wizardVariants,
+} from "./Wizard.variants"

package/src/components/workflow/index.ts

@@ -0,0 +1,14 @@
+// Workflow - Process and task components
+export * from "./ApprovalFlow"
+export * from "./ApprovalStatus"
+export * from "./CommentSystem"
+export * from "./Dashboard"
+export * from "./DashboardBuilder"
+export * from "./KanbanBoard"
+export * from "./ProgressSteps"
+export * from "./ReportGenerator"
+export * from "./Stepper"
+export * from "./TaskCard"
+export * from "./TaskList"
+export * from "./TaskStatus"
+export * from "./Wizard"

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+// Hooks
+export { useIsMobile } from "./use-mobile"
+export { useMediaQuery } from "./use-media-query"
+export { useOnWindowResize } from "./use-on-window-resize"

package/src/hooks/use-media-query.ts

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+export function useMediaQuery(query: string) {
+  const subscribe = React.useCallback(
+    (callback: () => void) => {
+      const matchMedia = window.matchMedia(query)
+      matchMedia.addEventListener("change", callback)
+      return () => {
+        matchMedia.removeEventListener("change", callback)
+      }
+    },
+    [query]
+  )
+
+  const getSnapshot = () => {
+    return window.matchMedia(query).matches
+  }
+
+  const getServerSnapshot = () => {
+    return false
+  }
+
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}

package/src/hooks/use-mobile.ts

@@ -0,0 +1,30 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+/**
+ * Subscribe to media query changes
+ */
+function subscribe(callback: () => void) {
+  const mql = window.matchMedia(`(max-width: ${String(MOBILE_BREAKPOINT - 1)}px)`)
+  mql.addEventListener("change", callback)
+  return () => { mql.removeEventListener("change", callback); }
+}
+
+/**
+ * Get current mobile state (client-side only)
+ */
+function getSnapshot() {
+  return window.innerWidth < MOBILE_BREAKPOINT
+}
+
+/**
+ * Server snapshot - returns false as default for SSR
+ */
+function getServerSnapshot() {
+  return false
+}
+
+export function useIsMobile() {
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}

package/src/hooks/use-on-window-resize.ts

@@ -0,0 +1,27 @@
+import * as React from "react"
+
+/**
+ * Hook that triggers a callback on window resize
+ * Useful for responsive charts and components that need to recalculate dimensions
+ *
+ * @example
+ * ```tsx
+ * const [width, setWidth] = useState(0)
+ *
+ * useOnWindowResize(() => {
+ *   setWidth(containerRef.current?.clientWidth ?? 0)
+ * })
+ * ```
+ */
+export function useOnWindowResize(handler: () => void) {
+  React.useEffect(() => {
+    const handleResize = () => {
+      handler()
+    }
+    // Call handler immediately to set initial state
+    handleResize()
+
+    window.addEventListener("resize", handleResize)
+    return () => { window.removeEventListener("resize", handleResize) }
+  }, [handler])
+}

package/src/index.ts

@@ -0,0 +1,22 @@
+// Seven Design System
+// @etus/ui
+
+// All components organized by category
+export * from './components'
+
+// Hooks
+export * from './hooks'
+
+// Utilities
+export { cn } from './lib/utils'
+
+// Chart utilities
+export {
+  availableChartColors,
+  chartColors,
+  constructCategoryColors,
+  defaultChartColors,
+  getColorClassName,
+  getYAxisDomain,
+} from './lib/chart-colors'
+export type { ChartColor, ColorUtility } from './lib/chart-colors'

package/src/lib/chart-colors.ts

@@ -0,0 +1,195 @@
+/**
+ * Chart color utilities for Seven Design System
+ *
+ * Provides a centralized color palette for charts (Recharts, etc.)
+ * with Tailwind classes for bg, stroke, fill, and text utilities.
+ */
+
+export type ColorUtility = "bg" | "fill" | "stroke" | "text"
+
+/**
+ * Chart color palette with Tailwind classes
+ * Each color provides bg, stroke, fill, and text variants
+ */
+export const chartColors = {
+  blue: {
+    bg: "bg-blue-500",
+    fill: "fill-blue-500",
+    stroke: "stroke-blue-500",
+    text: "text-blue-500",
+  },
+  emerald: {
+    bg: "bg-emerald-500",
+    fill: "fill-emerald-500",
+    stroke: "stroke-emerald-500",
+    text: "text-emerald-500",
+  },
+  violet: {
+    bg: "bg-violet-500",
+    fill: "fill-violet-500",
+    stroke: "stroke-violet-500",
+    text: "text-violet-500",
+  },
+  amber: {
+    bg: "bg-amber-500",
+    fill: "fill-amber-500",
+    stroke: "stroke-amber-500",
+    text: "text-amber-500",
+  },
+  rose: {
+    bg: "bg-rose-500",
+    fill: "fill-rose-500",
+    stroke: "stroke-rose-500",
+    text: "text-rose-500",
+  },
+  cyan: {
+    bg: "bg-cyan-500",
+    fill: "fill-cyan-500",
+    stroke: "stroke-cyan-500",
+    text: "text-cyan-500",
+  },
+  indigo: {
+    bg: "bg-indigo-500",
+    fill: "fill-indigo-500",
+    stroke: "stroke-indigo-500",
+    text: "text-indigo-500",
+  },
+  pink: {
+    bg: "bg-pink-500",
+    fill: "fill-pink-500",
+    stroke: "stroke-pink-500",
+    text: "text-pink-500",
+  },
+  lime: {
+    bg: "bg-lime-500",
+    fill: "fill-lime-500",
+    stroke: "stroke-lime-500",
+    text: "text-lime-500",
+  },
+  fuchsia: {
+    bg: "bg-fuchsia-500",
+    fill: "fill-fuchsia-500",
+    stroke: "stroke-fuchsia-500",
+    text: "text-fuchsia-500",
+  },
+  purple: {
+    bg: "bg-purple-500",
+    fill: "fill-purple-500",
+    stroke: "stroke-purple-500",
+    text: "text-purple-500",
+  },
+  orange: {
+    bg: "bg-orange-500",
+    fill: "fill-orange-500",
+    stroke: "stroke-orange-500",
+    text: "text-orange-500",
+  },
+  teal: {
+    bg: "bg-teal-500",
+    fill: "fill-teal-500",
+    stroke: "stroke-teal-500",
+    text: "text-teal-500",
+  },
+  gray: {
+    bg: "bg-gray-500",
+    fill: "fill-gray-500",
+    stroke: "stroke-gray-500",
+    text: "text-gray-500",
+  },
+} as const satisfies Record<string, Record<ColorUtility, string>>
+
+export type ChartColor = keyof typeof chartColors
+
+/**
+ * Array of available chart color keys
+ */
+export const availableChartColors: ChartColor[] = Object.keys(
+  chartColors
+) as ChartColor[]
+
+/**
+ * Default color sequence for multi-series charts
+ */
+export const defaultChartColors: ChartColor[] = [
+  "blue",
+  "emerald",
+  "violet",
+  "amber",
+  "rose",
+  "cyan",
+  "indigo",
+  "pink",
+  "lime",
+  "fuchsia",
+]
+
+/**
+ * Constructs a map of category names to colors
+ * Cycles through colors if there are more categories than colors
+ *
+ * @example
+ * ```tsx
+ * const categories = ["Revenue", "Expenses", "Profit"]
+ * const colorMap = constructCategoryColors(categories, defaultChartColors)
+ * // Map { "Revenue" => "blue", "Expenses" => "emerald", "Profit" => "violet" }
+ * ```
+ */
+export function constructCategoryColors(
+  categories: string[],
+  colors: ChartColor[] = defaultChartColors
+): Map<string, ChartColor> {
+  const categoryColors = new Map<string, ChartColor>()
+  if (colors.length === 0) {
+    return categoryColors
+  }
+  categories.forEach((category, index) => {
+    const color = colors[index % colors.length] as ChartColor
+    categoryColors.set(category, color)
+  })
+  return categoryColors
+}
+
+/**
+ * Gets the Tailwind class for a specific color and utility type
+ *
+ * @example
+ * ```tsx
+ * getColorClassName("blue", "fill") // "fill-blue-500"
+ * getColorClassName("emerald", "stroke") // "stroke-emerald-500"
+ * ```
+ */
+export function getColorClassName(
+  color: ChartColor,
+  type: ColorUtility
+): string {
+  const fallbackColor: Record<ColorUtility, string> = {
+    bg: "bg-gray-500",
+    fill: "fill-gray-500",
+    stroke: "stroke-gray-500",
+    text: "text-gray-500",
+  }
+  const colorConfig = chartColors[color]
+  return colorConfig ? colorConfig[type] : fallbackColor[type]
+}
+
+/**
+ * Gets the Y-axis domain for Recharts based on auto/manual min/max values
+ *
+ * @example
+ * ```tsx
+ * // Auto-calculate min, fixed max at 100
+ * getYAxisDomain(true, undefined, 100) // ["auto", 100]
+ *
+ * // Start at 0, auto-calculate max
+ * getYAxisDomain(false, 0, undefined) // [0, "auto"]
+ * ```
+ */
+export function getYAxisDomain(
+  autoMinValue: boolean,
+  minValue?: number,
+  maxValue?: number
+): [number | "auto", number | "auto"] {
+  const minDomain = autoMinValue ? "auto" : (minValue ?? 0)
+  const maxDomain = maxValue ?? "auto"
+  return [minDomain, maxDomain]
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/test/setup.ts

@@ -0,0 +1,125 @@
+import { toHaveNoViolations } from "jest-axe"
+import { expect } from "vitest"
+
+import "@testing-library/jest-dom/vitest"
+
+// Extend Vitest's expect with jest-axe matchers
+expect.extend(toHaveNoViolations)
+
+// Mock matchMedia for components that use it
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: (query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }),
+})
+
+// Mock IntersectionObserver for components that use viewport-triggered animations
+class MockIntersectionObserver implements IntersectionObserver {
+  readonly root: Document | Element | null = null
+  readonly rootMargin: string = "0px"
+  readonly thresholds: readonly number[] = [0]
+  private callback: IntersectionObserverCallback
+
+  constructor(callback: IntersectionObserverCallback, _options?: IntersectionObserverInit) {
+    this.callback = callback
+  }
+
+  observe(target: Element) {
+    // Immediately call callback reporting element as visible
+    // This ensures animations trigger immediately in tests
+    this.callback(
+      [
+        {
+          target,
+          isIntersecting: true,
+          intersectionRatio: 1,
+          boundingClientRect: target.getBoundingClientRect(),
+          intersectionRect: target.getBoundingClientRect(),
+          rootBounds: null,
+          time: Date.now(),
+        },
+      ] as IntersectionObserverEntry[],
+      this
+    )
+  }
+
+  unobserve() {}
+  disconnect() {}
+  takeRecords(): IntersectionObserverEntry[] {
+    return []
+  }
+}
+globalThis.IntersectionObserver = MockIntersectionObserver
+
+// Mock ResizeObserver for components that use it
+// Enhanced mock to call the callback with proper dimensions (needed for Recharts ResponsiveContainer)
+globalThis.ResizeObserver = class ResizeObserver {
+  private callback: ResizeObserverCallback
+
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback
+  }
+
+  observe(target: Element) {
+    // Immediately call callback with mock dimensions
+    // This is needed for Recharts ResponsiveContainer to render content
+    this.callback(
+      [
+        {
+          target,
+          contentRect: {
+            width: 400,
+            height: 300,
+            top: 0,
+            left: 0,
+            bottom: 300,
+            right: 400,
+            x: 0,
+            y: 0,
+            toJSON: () => ({}),
+          },
+          borderBoxSize: [{ inlineSize: 400, blockSize: 300 }],
+          contentBoxSize: [{ inlineSize: 400, blockSize: 300 }],
+          devicePixelContentBoxSize: [{ inlineSize: 400, blockSize: 300 }],
+        },
+      ] as ResizeObserverEntry[],
+      this
+    )
+  }
+
+  unobserve() {}
+  disconnect() {}
+}
+
+// Mock scrollIntoView for cmdk
+Element.prototype.scrollIntoView = () => {}
+
+// Fix for react-resizable-panels: jsdom/cssstyle can't handle 'border: unset'
+// This patches CSSStyleDeclaration to prevent "Cannot create property 'border-width' on string 'unset'" error
+// React DOM sets styles through property setters, not setProperty, so we need to patch the border setter
+const borderDescriptor = Object.getOwnPropertyDescriptor(
+  CSSStyleDeclaration.prototype,
+  "border"
+)
+if (borderDescriptor?.set) {
+  // eslint-disable-next-line @typescript-eslint/unbound-method -- Intentionally rebound with .call()
+  const originalSetter = borderDescriptor.set
+  Object.defineProperty(CSSStyleDeclaration.prototype, "border", {
+    ...borderDescriptor,
+    set(this: CSSStyleDeclaration, value: string) {
+      // Skip 'unset' value which causes cssstyle to fail
+      if (value === "unset") {
+        return
+      }
+      originalSetter.call(this, value)
+    },
+  })
+}

package/src/test/vitest.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="vitest/globals" />
+/// <reference types="@testing-library/jest-dom" />
+
+import type { TestingLibraryMatchers } from "@testing-library/jest-dom/matchers"
+import type { AxeMatchers } from "jest-axe"
+
+declare module "vitest" {
+  interface Assertion<T = unknown>
+    extends TestingLibraryMatchers<typeof expect.stringContaining, T>,
+      AxeMatchers {}
+  interface AsymmetricMatchersContaining
+    extends TestingLibraryMatchers<unknown, unknown> {}
+}