@umituz/web-design-system 5.3.0 → 5.4.0

package/src/presentation/templates/SettingsLayout.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { cn } from '../../infrastructure/utils';
+
+export interface SettingsNavItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  description?: string;
+  badge?: string;
+  disabled?: boolean;
+}
+
+export interface SettingsLayoutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onSelect'> {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  navItems: SettingsNavItem[];
+  activeId: string;
+  onSelect: (id: string) => void;
+  actions?: React.ReactNode;
+}
+
+export const SettingsLayout = React.forwardRef<HTMLDivElement, SettingsLayoutProps>(
+  (
+    {
+      title = 'Ayarlar',
+      description,
+      navItems,
+      activeId,
+      onSelect,
+      actions,
+      children,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('w-full max-w-6xl mx-auto flex flex-col gap-6 p-4 sm:p-6 lg:p-8', className)}
+        {...props}
+      >
+        {/* Header */}
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pb-4 border-b border-border">
+          <div>
+            <h1 className="text-2xl font-bold tracking-tight text-foreground">{title}</h1>
+            {description && (
+              <p className="text-sm text-muted-foreground mt-1">{description}</p>
+            )}
+          </div>
+          {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+        </div>
+
+        {/* Content Layout */}
+        <div className="flex flex-col lg:flex-row gap-8 items-start">
+          {/* Navigation Sidebar */}
+          <nav
+            aria-label="Settings navigation"
+            className="w-full lg:w-64 shrink-0 flex flex-row lg:flex-col gap-1 overflow-x-auto pb-2 lg:pb-0"
+          >
+            {navItems.map((item) => {
+              const isActive = item.id === activeId;
+
+              return (
+                <button
+                  key={item.id}
+                  type="button"
+                  disabled={item.disabled}
+                  onClick={() => onSelect(item.id)}
+                  className={cn(
+                    'flex items-center gap-3 px-3.5 py-2.5 rounded-lg text-sm font-medium transition-colors text-left shrink-0 whitespace-nowrap lg:whitespace-normal',
+                    isActive
+                      ? 'bg-primary/10 text-primary font-semibold'
+                      : 'text-muted-foreground hover:bg-accent hover:text-foreground',
+                    item.disabled && 'opacity-50 pointer-events-none'
+                  )}
+                >
+                  {item.icon && (
+                    <span className="shrink-0 size-4 flex items-center justify-center [&_svg]:size-4">
+                      {item.icon}
+                    </span>
+                  )}
+                  <span className="flex-1 truncate">{item.label}</span>
+                  {item.badge && (
+                    <span className="text-xs px-2 py-0.5 rounded-full bg-accent text-accent-foreground ml-auto">
+                      {item.badge}
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </nav>
+
+          {/* Main Panel Content */}
+          <main className="flex-1 w-full min-w-0">{children}</main>
+        </div>
+      </div>
+    );
+  }
+);
+
+SettingsLayout.displayName = 'SettingsLayout';

package/src/presentation/templates/index.ts

@@ -1,9 +1,3 @@
-/**
- * Templates Export
- * @description Template components - page structures
- * Subpath: @umituz/web-design-system/templates
- */
-
 export { Form, FormActions } from './Form';
 export type { FormProps } from './Form';
 
@@ -24,3 +18,10 @@ export type { ProjectSkeletonProps } from './ProjectSkeleton';
 
 export { ResponsiveContainer } from './ResponsiveContainer';
 export type { ResponsiveContainerProps, ResponsiveSize } from './ResponsiveContainer';
+
+// New Productivity Templates
+export { SettingsLayout } from './SettingsLayout';
+export type { SettingsLayoutProps, SettingsNavItem } from './SettingsLayout';
+
+export { CrudPageTemplate } from './CrudPageTemplate';
+export type { CrudPageTemplateProps } from './CrudPageTemplate';

package/src/styles/app.css

@@ -1,21 +1,3 @@
-/**
- * @umituz/web-design-system — Tailwind v4 host entry (semantic palette)
- *
- * Chains the source compile entry with the --app-* semantic bridge, so a
- * Tailwind host imports exactly one package stylesheet and defines its
- * palette as bare `--app-*` custom properties — it never writes `--color-*`
- * mappings or node_modules `@source` paths itself:
- *
- *   @import "tailwindcss";
- *   @import "tw-animate-css";
- *   @import "@umituz/web-design-system/app.css";
- *   :root { --app-primary: …; … }
- *
- * The bridge is unlayered, so its `:root` bindings override the theme
- * layer's defaults while the utilities keep resolving through
- * `var(--color-*)`. Required slots fail loudly when a host omits them —
- * see bridge.css for the full contract.
- */
 
 @import "./source.css";
 @import "./bridge.css";

package/src/styles/bridge.css

@@ -1,33 +1,5 @@
-/**
- * @umituz/web-design-system — semantic palette bridge (CSS-camp apps)
- *
- * Bu dosya, Tailwind derlemesi yapmayan (vanilla CSS) uygulamaların
- * `--color-*` semantik paletini kendi renk isimlerine bağlayan KANONİK
- * köprüdür. 8 uygulamada elle kopyalanan `packages.css` eşlemesinin
- * paketteki tek doğru hâlidir — yeni projeler eşlemeyi buradan alır,
- * kendi başına yazmaz.
- *
- * Sözleşme:
- *   1. İçe aktarım sırası (uygulamanın ana css'i):
- *        @import "@umituz/web-design-system/styles.css";
- *        @import "@umituz/web-design-system/bridge.css";
- *        :root { --app-... }          ← uygulamanın kendi token'ları (SON)
- *   2. ZORUNLU slotlar (fallback'siz): uygulama 19 çekirdek `--app-*`
- *      tokenını tanımlamazsa ilgili renk görünür biçimde bozulur —
- *      eksik palet bilinçli olarak gürültülü başarısız olur.
- *   3. OPSİYONEL slotlar: tanımlanmazsa DS'in açık-theme varsayılanı
- *      geçerli olur (success/warning/info üçlüsü, primary-soft, font).
- *   4. Karanlık theme: uygulama `[data-theme="dark"] / .dark` altında
- *      `--app-*` tokenlarını yeniden tanımlar; köprü otomatik devralır.
- *   5. `--radius-*` ve `--font-mono` bu dosyada YOKTUR: bilinçli isim
- *      çakışması doktrini — uygulama kendi css'inde (unlayered)
- *      yeniden tanımlayarak ezer.
- *   6. Tailwind-camp uygulamalar (kaynağı `@source` ile derleyenler) bu
- *      dosyaya ihtiyaç duymaz; kendi `@theme` paletiyle ezer.
- */
 
 :root {
-  /* --- ZORUNLU: yüzeyler & metin --- */
   --color-background: var(--app-background);
   --color-foreground: var(--app-foreground);
   --color-card: var(--app-card);
@@ -35,13 +7,11 @@
   --color-popover: var(--app-popover);
   --color-popover-foreground: var(--app-popover-foreground);
 
-  /* --- ZORUNLU: marka --- */
   --color-primary: var(--app-primary);
   --color-primary-foreground: var(--app-primary-foreground);
   --color-secondary: var(--app-secondary);
   --color-secondary-foreground: var(--app-secondary-foreground);
 
-  /* --- ZORUNLU: nötr --- */
   --color-muted: var(--app-muted);
   --color-muted-foreground: var(--app-muted-foreground);
   --color-accent: var(--app-accent);
@@ -49,12 +19,10 @@
   --color-border: var(--app-border);
   --color-input: var(--app-input);
 
-  /* --- ZORUNLU: yıkıcı & odak --- */
   --color-destructive: var(--app-destructive);
   --color-destructive-foreground: var(--app-destructive-foreground);
   --color-ring: var(--app-ring);
 
-  /* --- OPSİYONEL: durum üçlüsü (DS açık-theme varsayılanıyla) --- */
   --color-success: var(--app-success, #16a34a);
   --color-success-foreground: var(--app-success-foreground, #ffffff);
   --color-warning: var(--app-warning, #d97706);
@@ -64,10 +32,8 @@
   --color-violet: var(--app-violet, #7c3aed);
   --color-violet-foreground: var(--app-violet-foreground, #ffffff);
 
-  /* --- OPSİYONEL: dashboard token sözleşmesi (udb bileşenleri bekler) --- */
   --color-primary-soft: var(--app-primary-soft, rgba(37, 99, 235, 0.1));
 
-  /* --- OPSİYONEL: tipografi --- */
   --font-sans: var(
     --app-font-sans,
     ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,

package/src/styles/compile.css

@@ -1,16 +1,3 @@
-/**
- * @umituz/web-design-system — Tailwind v4 compile entry
- *
- * Input for the build step (`npm run build`) that produces
- * `dist/styles.css`: Tailwind + animations + the theme layer, with the
- * component source scanned for utility classes.
- *
- * Vanilla hosts import the precompiled output:
- *   @import "@umituz/web-design-system/styles.css";
- *
- * Tailwind v4 hosts compile this package's source themselves instead
- * (see README) and must NOT also import the precompiled stylesheet.
- */
 
 @import "tailwindcss";
 @import "tw-animate-css";

package/src/styles/source.css

@@ -1,15 +1,3 @@
-/**
- * @umituz/web-design-system — Tailwind v4 host entry
- *
- * Tailwind v4 hosts import this file right after `@import "tailwindcss"`:
- * it registers the theme token layer and scans the component sources so
- * the package's classes compile inside the host's own Tailwind build,
- * restyled by the host's `@theme` overrides. Hosts must NOT also import
- * the precompiled `dist/styles.css` (that is the vanilla-host path).
- *
- * The `@source` directive is resolved relative to this file, so hosts
- * never write node_modules paths themselves.
- */
 
 @import "./theme.css";
 @source "../presentation";

package/src/styles/theme.css

@@ -1,24 +1,5 @@
-/**
- * @umituz/web-design-system — theme layer (Tailwind v4 `@theme`)
- *
- * Single source of truth for colors, radii, fonts and shadows. Component
- * classes are semantic (`bg-primary`, `text-muted-foreground`, …) and bind
- * to the `--color-*` variables defined here, so hosts restyle the whole
- * package by overriding variables — no Tailwind rebuild required.
- *
- * The default palette mirrors @umituz/web-dashboard's tokens.css, so
- * dashboard adoption is visually regression-free.
- *
- * Dark mode: add `data-theme="dark"` or `class="dark"` on any ancestor
- * (typically <html>). The package never switches themes on its own.
- *
- * Tailwind v4 hosts that compile the package source themselves
- * (`@source "../node_modules/@umituz/web-design-system/src"`) import this
- * file; vanilla hosts import the precompiled `dist/styles.css`.
- */
 
 @theme {
-  /* Surfaces & text */
   --color-background: #f8fafc;
   --color-foreground: #0f172a;
   --color-card: #ffffff;
@@ -26,13 +7,11 @@
   --color-popover: #ffffff;
   --color-popover-foreground: #0f172a;
 
-  /* Brand */
   --color-primary: #2563eb;
   --color-primary-foreground: #ffffff;
   --color-secondary: #8b5cf6;
   --color-secondary-foreground: #ffffff;
 
-  /* Neutral */
   --color-muted: #f1f5f9;
   --color-muted-foreground: #64748b;
   --color-accent: #f1f5f9;
@@ -40,7 +19,6 @@
   --color-border: #e2e8f0;
   --color-input: #e2e8f0;
 
-  /* Semantic */
   --color-destructive: #dc2626;
   --color-destructive-foreground: #ffffff;
   --color-success: #16a34a;
@@ -52,27 +30,22 @@
   --color-violet: #7c3aed;
   --color-violet-foreground: #ffffff;
 
-  /* Focus */
   --color-ring: rgba(37, 99, 235, 0.45);
 
-  /* Radii (dashboard scale) */
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
 
-  /* Typography */
   --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, "Noto Sans", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
 
-  /* Elevation (dashboard scale) */
   --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
   --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
   --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.14);
 
-  /* Accordion (Radix --radix-accordion-content-height driven) */
   --animate-accordion-down: accordion-down 0.2s ease-out;
   --animate-accordion-up: accordion-up 0.2s ease-out;