@umituz/web-design-system 6.0.2 → 6.1.1

package/src/presentation/organisms/charts/utils.ts

@@ -0,0 +1,57 @@
+import { useRef, useState } from 'react';
+
+export const PALETTE = ['#357344', '#b06e22', '#3e5f80', '#7a6ba8', '#8a5a3b', '#5e7d5a', '#a8b5a0', '#c9862f'];
+
+export const SERIES_COLORS = [
+  'var(--udb-chart-1, #357344)',
+  'var(--udb-chart-2, #b06e22)',
+  'var(--udb-chart-3, #3e5f80)',
+  'var(--udb-chart-4, #7a6ba8)',
+  'var(--udb-chart-5, #8a5a3b)',
+  'var(--udb-chart-6, #5e7d5a)',
+  'var(--udb-chart-7, #a8b5a0)',
+  'var(--udb-chart-8, #c9862f)',
+] as const;
+
+export function seriesColor(index: number): string {
+  return SERIES_COLORS[index % SERIES_COLORS.length]!;
+}
+
+export interface TipRow {
+  label: string;
+  value: string;
+  color?: string;
+}
+
+export interface TipState {
+  x: number;
+  y: number;
+  title: string;
+  rows: TipRow[];
+}
+
+export function useTip() {
+  const [tip, setTip] = useState<TipState | null>(null);
+  const hostRef = useRef<HTMLDivElement>(null);
+  const show = (e: React.MouseEvent, title: string, rows: TipRow[]) => {
+    const rect = hostRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    setTip({ x: e.clientX - rect.left, y: e.clientY - rect.top, title, rows });
+  };
+  const hide = () => setTip(null);
+  return { tip, hostRef, show, hide };
+}
+
+export function niceMax(max: number): number {
+  if (max <= 0) return 1;
+  const exp = Math.floor(Math.log10(max));
+  const base = Math.pow(10, exp);
+  const frac = max / base;
+  const nice = frac <= 1 ? 1 : frac <= 2 ? 2 : frac <= 2.5 ? 2.5 : frac <= 5 ? 5 : 10;
+  return nice * base;
+}
+
+export function gridTicks(max: number, count = 4): number[] {
+  const nice = niceMax(max);
+  return Array.from({ length: count + 1 }, (_, i) => (nice / count) * i);
+}

package/src/presentation/organisms/index.ts

@@ -185,3 +185,9 @@ export type { StatsGridProps, StatItem } from './StatsGrid';
 
 export { DescriptionList } from './DescriptionList';
 export type { DescriptionListProps, DescriptionItem } from './DescriptionList';
+
+export { AuditLogList } from './AuditLogList';
+export type { AuditLogListProps, AuditEntry } from './AuditLogList';
+
+// Visual Data Visualization & Charts
+export * from './charts';

package/src/presentation/templates/PageHeader.tsx

@@ -1,32 +1,46 @@
-
-import { forwardRef, type HTMLAttributes } from 'react';
-import { type ReactNode } from 'react';
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { Link } from 'react-router';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
 export type TextAlign = 'left' | 'center' | 'right';
 export type HeaderSize = 'small' | 'medium' | 'large';
 
+export interface PageHeaderCrumb {
+  label: string;
+  to?: string;
+}
+
 export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, BaseProps {
-  title: ReactNode;
-  subtitle?: string;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  description?: ReactNode;
+  kicker?: ReactNode;
+  breadcrumbs?: ReactNode | readonly PageHeaderCrumb[];
+  meta?: ReactNode;
   align?: TextAlign;
   size?: HeaderSize;
   actions?: ReactNode;
 }
 
+const isCrumbList = (
+  value: ReactNode | readonly PageHeaderCrumb[]
+): value is readonly PageHeaderCrumb[] =>
+  Array.isArray(value) &&
+  value.every((item) => typeof item === 'object' && item !== null && 'label' in item);
+
 const sizeClasses: Record<HeaderSize, { title: string; subtitle: string }> = {
   small: {
-    title: 'text-2xl md:text-3xl font-bold',
-    subtitle: 'text-base md:text-lg',
+    title: 'text-xl sm:text-2xl font-bold tracking-tight',
+    subtitle: 'text-xs sm:text-sm',
   },
   medium: {
-    title: 'text-3xl md:text-4xl font-bold',
-    subtitle: 'text-lg md:text-xl',
+    title: 'text-2xl sm:text-3xl font-bold tracking-tight',
+    subtitle: 'text-sm sm:text-base',
   },
   large: {
-    title: 'text-4xl md:text-5xl lg:text-6xl font-bold',
-    subtitle: 'text-lg md:text-xl',
+    title: 'text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight',
+    subtitle: 'text-base sm:text-lg',
   },
 };
 
@@ -36,36 +50,92 @@ const alignClasses: Record<TextAlign, string> = {
   right: 'text-right',
 };
 
-const getAlignFlexClass = (align: TextAlign, hasActions: boolean): string => {
-  if (!hasActions) return '';
-  return align === 'center'
-    ? 'flex justify-center'
-    : align === 'right'
-      ? 'flex justify-end'
-      : 'flex justify-start';
-};
-
 export const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
-  ({ title, subtitle, align = 'center', size = 'large', actions, className, ...props }, ref) => {
+  (
+    {
+      title,
+      subtitle,
+      description,
+      kicker,
+      breadcrumbs,
+      meta,
+      align = 'left',
+      size = 'small',
+      actions,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const desc = subtitle ?? description;
+
+    const crumbNode =
+      breadcrumbs === undefined
+        ? undefined
+        : isCrumbList(breadcrumbs)
+          ? breadcrumbs.map((crumb, index) => (
+              <span key={`${crumb.label}-${index}`} className="inline-flex items-center gap-1">
+                {index > 0 && <span className="opacity-40 select-none">/</span>}
+                {crumb.to !== undefined ? (
+                  <Link to={crumb.to} className="hover:underline hover:text-foreground transition-colors">
+                    {crumb.label}
+                  </Link>
+                ) : (
+                  <span>{crumb.label}</span>
+                )}
+              </span>
+            ))
+          : breadcrumbs;
+
     return (
       <div
         ref={ref}
-        className={cn('mb-6 md:mb-12', alignClasses[align], className)}
+        className={cn(
+          'flex flex-col gap-2 mb-6',
+          alignClasses[align],
+          className
+        )}
         {...props}
       >
-        <h1 className={cn(sizeClasses[size].title, 'text-text-primary mb-4')}>
-          {title}
-        </h1>
-        {subtitle && (
-          <p className={cn(sizeClasses[size].subtitle, 'text-text-secondary')}>
-            {subtitle}
-          </p>
-        )}
-        {actions && (
-          <div className={cn('mt-6 md:mt-8', getAlignFlexClass(align, true))}>
-            {actions}
+        {crumbNode !== undefined && (
+          <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-1">
+            {crumbNode}
           </div>
         )}
+
+        <div className="flex flex-wrap items-start justify-between gap-3">
+          <div className="min-w-0 flex-1">
+            {kicker !== undefined && (
+              <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-1">
+                {kicker}
+              </p>
+            )}
+
+            {title !== undefined && (
+              <h1 className={cn(sizeClasses[size].title, 'text-foreground')}>
+                {title}
+              </h1>
+            )}
+
+            {desc !== undefined && (
+              <p className={cn(sizeClasses[size].subtitle, 'text-muted-foreground mt-1 leading-relaxed')}>
+                {desc}
+              </p>
+            )}
+
+            {meta !== undefined && (
+              <div className="flex flex-wrap items-center gap-2 mt-2 text-xs text-muted-foreground">
+                {meta}
+              </div>
+            )}
+          </div>
+
+          {actions && (
+            <div className="flex flex-wrap items-center gap-2 shrink-0">
+              {actions}
+            </div>
+          )}
+        </div>
       </div>
     );
   }

package/src/presentation/templates/SectionHeader.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface SectionHeaderProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>,
+    BaseProps {
+  kicker?: ReactNode;
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+}
+
+export const SectionHeader = forwardRef<HTMLDivElement, SectionHeaderProps>(
+  ({ kicker, title, subtitle, description, actions, className, ...props }, ref) => {
+    const desc = subtitle ?? description;
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex flex-wrap items-start justify-between gap-3 mb-3.5',
+          className
+        )}
+        {...props}
+      >
+        <div className="min-w-0">
+          {kicker && (
+            <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-1">
+              {kicker}
+            </p>
+          )}
+          {title && (
+            <h2 className="text-base sm:text-lg font-semibold tracking-tight text-foreground">
+              {title}
+            </h2>
+          )}
+          {desc && (
+            <p className="text-xs sm:text-sm text-muted-foreground mt-0.5 leading-relaxed">
+              {desc}
+            </p>
+          )}
+        </div>
+        {actions && (
+          <div className="flex flex-wrap items-center gap-2 shrink-0">
+            {actions}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+SectionHeader.displayName = 'SectionHeader';

package/src/presentation/templates/index.ts

@@ -11,7 +11,10 @@ export { PageLayout } from './PageLayout';
 export type { PageLayoutProps, MaxWidth } from './PageLayout';
 
 export { PageHeader } from './PageHeader';
-export type { PageHeaderProps, TextAlign, HeaderSize } from './PageHeader';
+export type { PageHeaderProps, PageHeaderCrumb, TextAlign, HeaderSize } from './PageHeader';
+
+export { SectionHeader } from './SectionHeader';
+export type { SectionHeaderProps } from './SectionHeader';
 
 export { ProjectSkeleton } from './ProjectSkeleton';
 export type { ProjectSkeletonProps } from './ProjectSkeleton';

package/src/styles/app.css

@@ -1,3 +1,2 @@
-
 @import "./source.css";
 @import "./bridge.css";