@umituz/web-dashboard 4.7.0 → 5.0.0

package/src/domain/config/index.ts

@@ -1,6 +0,0 @@
-/**
- * Domain Config Index
- */
-
-export * from './DashboardConfig';
-export * from './CalendarConfig';

package/src/i18n/I18nContext.tsx

@@ -1,33 +0,0 @@
-/**
- * Dashboard i18n injection.
- *
- * The package ships no i18n runtime. Hosts that have one wrap their
- * app once: `<DashboardI18nProvider t={i18n.t}>` — the signature
- * already matches i18next (and the fleet's custom `t()` helpers).
- * Without a provider, `useT()` falls back to `defaultT`, which
- * humanizes catalog keys into readable English.
- *
- * Components consume only `useT()`; the key catalogs (i18nKeys.ts)
- * remain the documented string contract.
- */
-
-import { createContext, useContext, type ReactNode } from "react";
-import { defaultT } from "./defaultT";
-import type { TranslateFn } from "./types";
-
-export interface DashboardI18nProviderProps {
-  /** Host translation function (e.g. i18next's `t`). */
-  t: TranslateFn;
-  children: ReactNode;
-}
-
-const I18nContext = createContext<TranslateFn | null>(null);
-
-export const DashboardI18nProvider = ({
-  t,
-  children,
-}: DashboardI18nProviderProps) => (
-  <I18nContext.Provider value={t}>{children}</I18nContext.Provider>
-);
-
-export const useT = (): TranslateFn => useContext(I18nContext) ?? defaultT;

package/src/i18n/defaultT.test.ts

@@ -1,43 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { defaultT } from "./defaultT";
-
-describe("defaultT", () => {
-  it("humanizes the last key segment", () => {
-    expect(defaultT("auth.login.welcomeBack")).toBe("Welcome back");
-  });
-
-  it("splits camelCase into words", () => {
-    expect(defaultT("auth.passwordStrength.passwordsDoNotMatch")).toBe(
-      "Passwords do not match",
-    );
-  });
-
-  it("splits snake_case and kebab-case segments", () => {
-    expect(defaultT("common.error_code")).toBe("Error code");
-    expect(defaultT("common.error-code")).toBe("Error code");
-  });
-
-  it("keeps digits attached to their word", () => {
-    expect(defaultT("analytics.common.last7Days")).toBe("Last7 days");
-  });
-
-  it("interpolates {{param}} placeholders the text carries", () => {
-    expect(defaultT("custom.{{brand}} console", { brand: "Acme" })).toBe(
-      "Acme console",
-    );
-  });
-
-  it("ignores params the humanized text cannot place", () => {
-    expect(defaultT("auth.login.signInTo", { brand: "Acme" })).toBe(
-      "Sign in to",
-    );
-  });
-
-  it("returns the raw key when it has no segments", () => {
-    expect(defaultT("")).toBe("");
-  });
-
-  it("handles single-segment keys", () => {
-    expect(defaultT("settings")).toBe("Settings");
-  });
-});

package/src/i18n/defaultT.ts

@@ -1,34 +0,0 @@
-/**
- * Default translator — the zero-config fallback when no host i18n
- * is provided. Humanizes catalog keys into sentence case
- * ("auth.login.welcomeBack" → "Welcome back") and interpolates
- * `{{param}}` placeholders when the humanized text carries one.
- * Params the text cannot place are ignored — real interpolation is
- * the host runtime's job via the DashboardI18nProvider bridge.
- */
-
-import type { TranslateFn } from "./types";
-
-/** Split a key segment into words: camelCase, snake_case, kebab-case. */
-const WORD_SPLIT = /[._\-]+|(?<=[a-z0-9])(?=[A-Z])/g;
-
-const humanizeSegment = (segment: string): string => {
-  const words = segment.split(WORD_SPLIT).filter(Boolean);
-  if (words.length === 0) return segment;
-  const sentence = words.join(" ").toLowerCase();
-  return sentence.charAt(0).toUpperCase() + sentence.slice(1);
-};
-
-/** Replace `{{param}}` placeholders with param values. */
-const interpolate = (text: string, params?: Record<string, unknown>): string => {
-  if (!params) return text;
-  return text.replace(/\{\{\s*(\w+)\s*\}\}/g, (match, name: string) =>
-    name in params ? String(params[name]) : match,
-  );
-};
-
-export const defaultT: TranslateFn = (key, params) => {
-  const segments = key.split(".").filter(Boolean);
-  const source = segments[segments.length - 1] ?? key;
-  return interpolate(humanizeSegment(source), params);
-};

package/src/i18n/index.ts

@@ -1,7 +0,0 @@
-export {
-  DashboardI18nProvider,
-  useT,
-  type DashboardI18nProviderProps,
-} from "./I18nContext";
-export { defaultT } from "./defaultT";
-export type { TranslateFn } from "./types";

package/src/i18n/types.ts

@@ -1,13 +0,0 @@
-/**
- * Translation function contract.
- *
- * Keyed by the package's i18n catalog constants (e.g. AUTH_KEYS);
- * `params` feeds `{{placeholder}}` interpolation. The signature is
- * deliberately compatible with i18next's `t` so hosts can bridge
- * their own setup: `<DashboardI18nProvider t={i18n.t}>`.
- */
-
-export type TranslateFn = (
-  key: string,
-  params?: Record<string, unknown>,
-) => string;

package/src/primitives/Button.tsx

@@ -1,24 +0,0 @@
-/**
- * Button — delegates to the design system.
- * Dashboard surface: variants default/destructive/outline/ghost,
- * sizes default/sm/icon. Call-site API unchanged.
- */
-
-import { forwardRef } from 'react';
-import { Button as DSButton } from '@umituz/web-design-system/atoms';
-
-export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'ghost';
-export type ButtonSize = 'default' | 'sm' | 'icon';
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = 'default', size = 'default', ...props }, ref) => (
-    <DSButton ref={ref} variant={variant} size={size} {...props} />
-  ),
-);
-
-Button.displayName = 'Button';

package/src/primitives/Checkbox.tsx

@@ -1,17 +0,0 @@
-/**
- * Checkbox — delegates to the design system (native + onCheckedChange).
- */
-
-import { forwardRef } from 'react';
-import { Checkbox as DSCheckbox } from '@umituz/web-design-system/atoms';
-
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  checked?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-}
-
-export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => (
-  <DSCheckbox ref={ref} {...props} />
-));
-
-Checkbox.displayName = 'Checkbox';

package/src/primitives/Input.tsx

@@ -1,23 +0,0 @@
-/**
- * Input — delegates to the design system.
- * Native `size` (character width) has no DS counterpart; it maps to a
- * `ch`-based width so the original prop API keeps working.
- */
-
-import { forwardRef } from 'react';
-import { Input as DSInput } from '@umituz/web-design-system/atoms';
-
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ type = 'text', size: nativeSize, style, ...props }, ref) => (
-    <DSInput
-      ref={ref}
-      type={type}
-      {...props}
-      style={nativeSize != null ? { width: `${nativeSize}ch`, ...style } : style}
-    />
-  ),
-);
-
-Input.displayName = 'Input';

package/src/primitives/Skeleton.tsx

@@ -1,6 +0,0 @@
-/**
- * Skeleton — re-exported from the design system (variant API identical).
- */
-
-export { Skeleton } from '@umituz/web-design-system/atoms';
-export type { SkeletonProps } from '@umituz/web-design-system/atoms';

package/src/primitives/cn.ts

@@ -1,10 +0,0 @@
-/**
- * cn — conditional className join, delegated to the design system.
- *
- * The design system's `cn` (clsx + tailwind-merge) understands both the
- * `udb-*` vocabulary (unknown classes pass through untouched) and real
- * Tailwind utilities a host may pass, resolving conflicts by last-wins.
- */
-
-export { cn } from '@umituz/web-design-system/utils/cn';
-export type { ClassValue } from '@umituz/web-design-system/utils/cn';

package/src/primitives/index.ts

@@ -1,23 +0,0 @@
-/**
- * Local primitives — the package's only UI atoms.
- *
- * Replaces the `@umituz/web-design-system` dependency (v3) with a
- * camp-agnostic set: `udb-*` classes + `--u-*` tokens, no utility
- * framework, no cva, no radix. Import as `@umituz/web-dashboard/primitives`
- * or relatively from inside the package.
- */
-
-export { cn } from './cn';
-export type { ClassValue } from './cn';
-
-export { Button } from './Button';
-export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
-
-export { Input } from './Input';
-export type { InputProps } from './Input';
-
-export { Checkbox } from './Checkbox';
-export type { CheckboxProps } from './Checkbox';
-
-export { Skeleton } from './Skeleton';
-export type { SkeletonProps } from './Skeleton';

package/src/styles/tokens.contract.test.ts

@@ -1,91 +0,0 @@
-import { readFileSync } from "node:fs";
-import { join } from "node:path";
-import { describe, expect, it } from "vitest";
-
-/**
- * Stylesheet-token contract:
- * - every `--u-*` custom property referenced by dashboard.css must be
- *   defined in tokens.css (catches token typos and dead references),
- * - the core token families (color/radius/space/font/shadow/layout)
- *   must all be present in tokens.css.
- */
-
-const read = (file: string): string =>
-  readFileSync(join(__dirname, file), "utf8");
-
-const tokensCss = read("tokens.css");
-const dashboardCss = read("dashboard.css");
-
-const DEFINED = new Set([...tokensCss.matchAll(/(--u-[a-z0-9-]+)\s*:/g)].map((m) => m[1]));
-const USED = new Set([...dashboardCss.matchAll(/var\((--u-[a-z0-9-]+)/g)].map((m) => m[1]));
-
-describe("dashboard stylesheet token contract", () => {
-  it("defines every token the stylesheet references", () => {
-    const undefinedTokens = [...USED].filter((token) => !DEFINED.has(token));
-    expect(undefinedTokens).toEqual([]);
-  });
-
-  it("references the token system at all", () => {
-    expect(USED.size).toBeGreaterThan(40);
-  });
-
-  it("ships the core token families", () => {
-    const CORE = [
-      "--u-color-bg",
-      "--u-color-surface",
-      "--u-color-text",
-      "--u-color-muted",
-      "--u-color-border",
-      "--u-color-border-strong",
-      "--u-color-primary",
-      "--u-color-primary-hover",
-      "--u-color-primary-contrast",
-      "--u-color-primary-soft",
-      "--u-color-danger",
-      "--u-color-success",
-      "--u-color-warning",
-      "--u-color-ring",
-      "--u-radius-sm",
-      "--u-radius-lg",
-      "--u-radius-pill",
-      "--u-space-1",
-      "--u-space-8",
-      "--u-font-sans",
-      "--u-font-size-md",
-      "--u-font-weight-bold",
-      "--u-shadow-sm",
-      "--u-sidebar-width",
-      "--u-header-height",
-    ];
-    expect(CORE.filter((token) => !DEFINED.has(token))).toEqual([]);
-  });
-
-  it("provides dark-mode overrides", () => {
-    expect(tokensCss).toContain('[data-udb-theme="dark"]');
-  });
-
-  it("bridges core tokens to design-system variables with fallbacks", () => {
-    const BRIDGED = [
-      ["--u-color-primary", "var(--color-primary, #2563eb)"],
-      ["--u-color-bg", "var(--color-background, #f8fafc)"],
-      ["--u-color-danger", "var(--color-destructive, #dc2626)"],
-      ["--u-radius-md", "var(--radius-md, 8px)"],
-      ["--u-shadow-lg", "var(--shadow-lg,"],
-      ["--u-font-sans", "var(--font-sans,"],
-    ] as const;
-    for (const [token, bridge] of BRIDGED) {
-      expect(tokensCss).toContain(`${token}: ${bridge}`);
-    }
-  });
-
-  it("derives hover/soft shades from the bridged base color", () => {
-    expect(tokensCss).toMatch(/--u-color-primary-hover: var\(--color-primary-hover, color-mix\(/);
-    expect(tokensCss).toMatch(/--u-color-primary-soft: var\(--color-primary-soft, color-mix\(/);
-  });
-
-  it("pulls the design-system stylesheet transitively", () => {
-    const imports = [...dashboardCss.matchAll(/@import\s+"([^"]+)"/g)].map((m) => m[1]);
-    expect(imports[0]).toBe("@umituz/web-design-system/styles.css");
-    expect(imports).toContain("./tokens.css");
-  });
-});

package/src/styles/tokens.css

@@ -1,116 +0,0 @@
-/**
- * @umituz/web-dashboard — design tokens (`--u-*`)
- *
- * Colors, radii, fonts and shadows are bridged to the design system's
- * `--color-*` / `--radius-*` / `--font-*` / `--shadow-*` variables; each
- * bridge keeps its previous value as fallback. Dark mode: add
- * `data-udb-theme="dark"` on any ancestor — the dark block re-sets the
- * design-system variables and every bridge follows automatically.
- */
-
-:root {
-  /* Surfaces & text */
-  --u-color-bg: var(--color-background, #f8fafc);
-  --u-color-surface: var(--color-card, #ffffff);
-  --u-color-surface-muted: var(--color-muted, #f1f5f9);
-  --u-color-text: var(--color-foreground, #0f172a);
-  --u-color-muted: var(--color-muted-foreground, #64748b);
-  --u-color-border: var(--color-border, #e2e8f0);
-  --u-color-border-strong: #cbd5e1;
-
-  /* Brand (hover/soft derive from the base color) */
-  --u-color-primary: var(--color-primary, #2563eb);
-  --u-color-primary-hover: var(--color-primary-hover, color-mix(in oklab, var(--color-primary, #2563eb) 86%, #000));
-  --u-color-primary-contrast: var(--color-primary-foreground, #ffffff);
-  --u-color-primary-soft: var(--color-primary-soft, color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent));
-  --u-color-secondary: var(--color-secondary, #8b5cf6);
-
-  /* Semantic */
-  --u-color-danger: var(--color-destructive, #dc2626);
-  --u-color-danger-hover: var(--color-destructive-hover, color-mix(in oklab, var(--color-destructive, #dc2626) 85%, #000));
-  --u-color-danger-contrast: var(--color-destructive-foreground, #ffffff);
-  --u-color-danger-soft: var(--color-destructive-soft, color-mix(in srgb, var(--color-destructive, #dc2626) 10%, transparent));
-  --u-color-success: var(--color-success, #16a34a);
-  --u-color-success-soft: var(--color-success-soft, color-mix(in srgb, var(--color-success, #16a34a) 12%, transparent));
-  --u-color-warning: var(--color-warning, #d97706);
-  --u-color-warning-soft: var(--color-warning-soft, color-mix(in srgb, var(--color-warning, #d97706) 15%, transparent));
-
-  /* Focus */
-  --u-color-ring: var(--color-ring, rgba(37, 99, 235, 0.45));
-
-  /* Radii */
-  --u-radius-sm: var(--radius-sm, 6px);
-  --u-radius-md: var(--radius-md, 8px);
-  --u-radius-lg: var(--radius-lg, 12px);
-  --u-radius-xl: var(--radius-xl, 16px);
-  --u-radius-pill: 9999px;
-
-  /* Spacing (4px base) */
-  --u-space-1: 4px;
-  --u-space-2: 8px;
-  --u-space-3: 12px;
-  --u-space-4: 16px;
-  --u-space-5: 20px;
-  --u-space-6: 24px;
-  --u-space-7: 32px;
-  --u-space-8: 40px;
-
-  /* Typography */
-  --u-font-sans: var(--font-sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
-    "Helvetica Neue", Arial, "Noto Sans", sans-serif);
-  --u-font-size-xs: 11px;
-  --u-font-size-sm: 12px;
-  --u-font-size-md: 14px;
-  --u-font-size-lg: 16px;
-  --u-font-size-xl: 20px;
-  --u-font-size-2xl: 24px;
-  --u-font-size-3xl: 30px;
-  --u-font-size-4xl: 36px;
-  --u-font-weight-normal: 400;
-  --u-font-weight-medium: 500;
-  --u-font-weight-bold: 700;
-
-  /* Layout */
-  --u-sidebar-width: 240px;
-  --u-sidebar-width-collapsed: 64px;
-  --u-header-height: 56px;
-
-  /* Elevation */
-  --u-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
-  --u-shadow-md: var(--shadow-md, 0 4px 12px rgba(15, 23, 42, 0.08));
-  --u-shadow-lg: var(--shadow-lg, 0 12px 32px rgba(15, 23, 42, 0.14));
-
-  /* Sidebar palette */
-  --u-sidebar-bg: var(--u-color-surface);
-  --u-sidebar-text: var(--u-color-text);
-  --u-sidebar-muted: var(--u-color-muted);
-  --u-sidebar-border: var(--u-color-border);
-  --u-sidebar-accent: var(--u-color-surface-muted);
-  --u-sidebar-accent-text: var(--u-color-text);
-}
-
-[data-udb-theme="dark"] {
-  --color-background: #0b1120;
-  --color-card: #111827;
-  --color-muted: #1e293b;
-  --color-foreground: #f1f5f9;
-  --color-muted-foreground: #94a3b8;
-  --color-border: #1f2a3c;
-
-  --color-primary: #3b82f6;
-  --color-primary-foreground: #ffffff;
-  --color-secondary: #a78bfa;
-
-  --color-destructive: #ef4444;
-  --color-destructive-foreground: #ffffff;
-  --color-success: #22c55e;
-  --color-warning: #f59e0b;
-
-  --color-ring: rgba(96, 165, 250, 0.5);
-
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
-  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
-  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
-
-  --u-color-border-strong: #334155;
-}