@almadar/cli 0.3.2 → 0.3.3

package/shells/typescript-shell/packages/client/src/components/organisms/FormSection.tsx

@@ -0,0 +1,168 @@
+import React from "react";
+import { cn } from "../../lib/cn";
+import { Card, CardHeader, CardTitle, CardContent } from "../atoms";
+
+export interface FormSectionProps {
+  /** Section title */
+  title?: string;
+  /** Section description */
+  description?: string;
+  /** Form fields */
+  children: React.ReactNode;
+  /** Collapsible */
+  collapsible?: boolean;
+  /** Default collapsed state */
+  defaultCollapsed?: boolean;
+  /** Use card wrapper */
+  card?: boolean;
+  /** Grid columns for fields */
+  columns?: 1 | 2 | 3;
+  className?: string;
+}
+
+export const FormSection: React.FC<FormSectionProps> = ({
+  title,
+  description,
+  children,
+  collapsible = false,
+  defaultCollapsed = false,
+  card = false,
+  columns = 1,
+  className,
+}) => {
+  const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
+
+  const gridClass = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 md:grid-cols-2",
+    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+  }[columns];
+
+  const content = (
+    <>
+      {(title || description) && (
+        <div className="mb-4">
+          {title && (
+            <div
+              className={cn(
+                "flex items-center justify-between",
+                collapsible && "cursor-pointer",
+              )}
+              onClick={() => collapsible && setCollapsed(!collapsed)}
+            >
+              <h3 className="text-base font-semibold text-[var(--color-foreground)]">
+                {title}
+              </h3>
+              {collapsible && (
+                <button
+                  type="button"
+                  className="p-1 rounded hover:bg-[var(--color-muted)]"
+                >
+                  <svg
+                    className={cn(
+                      "h-5 w-5 text-[var(--color-muted-foreground)] transition-transform",
+                      collapsed && "rotate-180",
+                    )}
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M19 9l-7 7-7-7"
+                    />
+                  </svg>
+                </button>
+              )}
+            </div>
+          )}
+          {description && (
+            <p className="mt-1 text-sm text-[var(--color-muted-foreground)]">
+              {description}
+            </p>
+          )}
+        </div>
+      )}
+      {(!collapsible || !collapsed) && (
+        <div className={cn("grid gap-4", gridClass)}>{children}</div>
+      )}
+    </>
+  );
+
+  if (card) {
+    return <Card className={cn("p-6", className)}>{content}</Card>;
+  }
+
+  return <div className={className}>{content}</div>;
+};
+
+/**
+ * Form layout with multiple sections
+ */
+export interface FormLayoutProps {
+  children: React.ReactNode;
+  /** Show section dividers */
+  dividers?: boolean;
+  className?: string;
+}
+
+export const FormLayout: React.FC<FormLayoutProps> = ({
+  children,
+  dividers = true,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "space-y-8",
+        dividers &&
+          "[&>*+*]:pt-8 [&>*+*]:border-t [&>*+*]:border-[var(--color-border)]",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+/**
+ * Form actions bar (submit/cancel buttons)
+ */
+export interface FormActionsProps {
+  children: React.ReactNode;
+  /** Sticky at bottom */
+  sticky?: boolean;
+  /** Alignment */
+  align?: "left" | "right" | "between" | "center";
+  className?: string;
+}
+
+export const FormActions: React.FC<FormActionsProps> = ({
+  children,
+  sticky = false,
+  align = "right",
+  className,
+}) => {
+  const alignClass = {
+    left: "justify-start",
+    right: "justify-end",
+    between: "justify-between",
+    center: "justify-center",
+  }[align];
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 pt-6 border-t border-[var(--color-border)]",
+        alignClass,
+        sticky &&
+          "sticky bottom-0 bg-[var(--color-card)] py-4 -mx-6 px-6 shadow-[0_-4px_6px_-1px_rgb(0,0,0,0.05)]",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+};

package/shells/typescript-shell/packages/client/src/components/organisms/Header.tsx

@@ -0,0 +1,263 @@
+/**
+ * Header Organism Component
+ *
+ * A header component for mobile/responsive layouts with menu toggle, brand, and user avatar.
+ * Styled to match the main Layout component's mobile header.
+ */
+
+import React from "react";
+import type { LucideIcon } from "lucide-react";
+import { Menu, X } from "lucide-react";
+import { SearchInput } from "../molecules/SearchInput";
+import { Avatar } from "../atoms/Avatar";
+import { Badge } from "../atoms/Badge";
+import { cn } from "../../lib/cn";
+
+export interface HeaderProps {
+  /**
+   * Logo/Brand content
+   */
+  logo?: React.ReactNode;
+
+  /**
+   * Logo image source
+   */
+  logoSrc?: string;
+
+  /**
+   * Brand/App name
+   */
+  brandName?: string;
+
+  /**
+   * Navigation items (for desktop header variant)
+   */
+  navigationItems?: Array<{
+    label: string;
+    href?: string;
+    onClick?: () => void;
+    icon?: LucideIcon;
+    badge?: string | number;
+    active?: boolean;
+  }>;
+
+  /**
+   * Show menu toggle button
+   * @default true
+   */
+  showMenuToggle?: boolean;
+
+  /**
+   * Is menu open (for toggle icon)
+   */
+  isMenuOpen?: boolean;
+
+  /**
+   * Menu toggle callback
+   */
+  onMenuToggle?: () => void;
+
+  /**
+   * Show search input
+   * @default false
+   */
+  showSearch?: boolean;
+
+  /**
+   * Search placeholder
+   */
+  searchPlaceholder?: string;
+
+  /**
+   * Search callback
+   */
+  onSearch?: (value: string) => void;
+
+  /**
+   * User avatar configuration
+   */
+  userAvatar?: {
+    src?: string;
+    alt?: string;
+    initials?: string;
+  };
+
+  /**
+   * User name (display name or email)
+   */
+  userName?: string;
+
+  /**
+   * Callback when user avatar is clicked
+   */
+  onUserClick?: () => void;
+
+  /**
+   * Action buttons (right side)
+   */
+  actions?: React.ReactNode;
+
+  /**
+   * Sticky header
+   * @default true
+   */
+  sticky?: boolean;
+
+  /**
+   * Variant - mobile shows menu toggle, desktop shows full nav
+   * @default 'mobile'
+   */
+  variant?: "mobile" | "desktop";
+
+  /**
+   * Callback when logo/brand is clicked
+   */
+  onLogoClick?: () => void;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+}
+
+export const Header: React.FC<HeaderProps> = ({
+  logo,
+  logoSrc,
+  brandName = "KFlow",
+  navigationItems,
+  showMenuToggle = true,
+  isMenuOpen = false,
+  onMenuToggle,
+  showSearch = false,
+  searchPlaceholder = "Search...",
+  onSearch,
+  userAvatar,
+  userName,
+  onUserClick,
+  actions,
+  sticky = true,
+  variant = "mobile",
+  onLogoClick,
+  className,
+}) => {
+  // Get user initials
+  const userInitials =
+    userAvatar?.initials || userName?.[0]?.toUpperCase() || "U";
+
+  return (
+    <header
+      className={cn(
+        "h-16 border-b border-[var(--color-border)]",
+        "flex items-center px-4 justify-between bg-[var(--color-card)]",
+        sticky && "sticky top-0 z-50",
+        variant === "mobile" && "lg:hidden",
+        className,
+      )}
+    >
+      {/* Left section: Menu toggle + Brand */}
+      <div className="flex items-center gap-3">
+        {/* Menu toggle button */}
+        {showMenuToggle && (
+          <button
+            onClick={onMenuToggle}
+            className="p-2 -ml-2 text-[var(--color-foreground)] hover:bg-[var(--color-muted)] transition-colors"
+            aria-label={isMenuOpen ? "Close menu" : "Open menu"}
+          >
+            {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
+          </button>
+        )}
+
+        {/* Logo/Brand */}
+        <div
+          className={cn(
+            "flex items-center gap-2",
+            onLogoClick && "cursor-pointer",
+          )}
+          onClick={onLogoClick}
+        >
+          {logo ? (
+            typeof logo === "string" ? (
+              <img src={logo} alt={brandName} className="h-8 w-8" />
+            ) : (
+              logo
+            )
+          ) : logoSrc ? (
+            <img src={logoSrc} alt={brandName} className="h-8 w-8" />
+          ) : null}
+
+          {brandName && (
+            <span className="text-lg font-bold text-[var(--color-foreground)]">
+              {brandName}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Center section: Navigation (desktop variant) or Search */}
+      {variant === "desktop" &&
+        navigationItems &&
+        navigationItems.length > 0 && (
+          <nav className="hidden md:flex items-center gap-1 flex-1 justify-center">
+            {navigationItems.map((item, index) => (
+              <button
+                key={index}
+                onClick={item.onClick}
+                className={cn(
+                  "flex items-center gap-2 px-3 py-2 rounded-[var(--radius-lg)] transition-colors",
+                  item.active
+                    ? "bg-[var(--color-primary)]/10 text-[var(--color-primary)]"
+                    : "text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)]",
+                )}
+              >
+                {item.icon && <item.icon size={18} />}
+                <span className="font-medium">{item.label}</span>
+                {item.badge !== undefined && (
+                  <Badge variant="danger" size="sm">
+                    {item.badge}
+                  </Badge>
+                )}
+              </button>
+            ))}
+          </nav>
+        )}
+
+      {/* Search (if enabled) */}
+      {showSearch && (
+        <div className="hidden lg:block flex-1 max-w-md mx-4">
+          <SearchInput placeholder={searchPlaceholder} onSearch={onSearch} />
+        </div>
+      )}
+
+      {/* Right section: Actions + User */}
+      <div className="flex items-center gap-3">
+        {/* Custom actions */}
+        {actions}
+
+        {/* User avatar */}
+        {(userAvatar || userName) && (
+          <button
+            onClick={onUserClick}
+            className={cn(
+              "w-8 h-8 rounded-[var(--radius-full)] bg-[var(--color-primary)]/10 flex items-center justify-center",
+              "text-[var(--color-primary)] font-bold text-xs",
+              "hover:ring-2 hover:ring-[var(--color-ring)] transition-all",
+              onUserClick && "cursor-pointer",
+            )}
+          >
+            {userAvatar?.src ? (
+              <Avatar
+                src={userAvatar.src}
+                alt={userAvatar.alt || userName}
+                size="sm"
+              />
+            ) : (
+              userInitials
+            )}
+          </button>
+        )}
+      </div>
+    </header>
+  );
+};
+
+Header.displayName = "Header";