@almadar/cli 0.3.2 → 1.0.3

package/shells/typescript-shell/packages/client/src/components/templates/DashboardLayout.tsx

@@ -0,0 +1,295 @@
+import React, { useState } from "react";
+import { Outlet, Link, useLocation } from "react-router-dom";
+import { cn } from "../../lib/cn";
+import {
+  Menu,
+  X,
+  Home,
+  Users,
+  Calendar,
+  Settings,
+  Bell,
+  Search,
+  ChevronDown,
+  LogOut,
+  LucideIcon,
+} from "lucide-react";
+import { Button, Input, Badge, Spinner, ThemeToggle, Avatar } from "../atoms";
+import { useAuthContext } from "@/features/auth";
+
+export interface NavItem {
+  label: string;
+  href: string;
+  icon: LucideIcon;
+  badge?: string | number;
+  children?: NavItem[];
+}
+
+export interface DashboardLayoutProps {
+  /** App name shown in sidebar */
+  appName?: string;
+  /** Logo component or URL */
+  logo?: React.ReactNode;
+  /** Navigation items */
+  navItems?: NavItem[];
+  /** Current user info (optional - auto-populated from auth context if not provided) */
+  user?: {
+    name: string;
+    email: string;
+    avatar?: string;
+  };
+  /** Header actions (notifications, etc.) */
+  headerActions?: React.ReactNode;
+  /** Show search in header */
+  showSearch?: boolean;
+  /** Custom sidebar footer */
+  sidebarFooter?: React.ReactNode;
+  /** Callback when user clicks sign out (optional - uses auth context signOut if not provided) */
+  onSignOut?: () => void;
+}
+
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
+  appName = "{{APP_TITLE}}",
+  logo,
+  navItems = [],
+  user: userProp,
+  headerActions,
+  showSearch = true,
+  sidebarFooter,
+  onSignOut: onSignOutProp,
+}) => {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [userMenuOpen, setUserMenuOpen] = useState(false);
+  const location = useLocation();
+
+  // Get user and signOut from auth context (with prop overrides)
+  const { user: authUser, signOut: authSignOut } = useAuthContext();
+
+  // Use props if provided, otherwise use auth context
+  const user =
+    userProp ||
+    (authUser
+      ? {
+          name: authUser.displayName || authUser.email?.split("@")[0] || "User",
+          email: authUser.email || "",
+          avatar: authUser.photoURL || undefined,
+        }
+      : null);
+
+  const handleSignOut = onSignOutProp || authSignOut;
+
+  return (
+    <div className="min-h-screen bg-[var(--color-background)] dark:bg-[var(--color-background)]">
+      {/* Mobile sidebar backdrop */}
+      {sidebarOpen && (
+        <div
+          className="fixed inset-0 bg-[var(--color-foreground)]/50 dark:bg-[var(--color-foreground)]/70 z-40 lg:hidden"
+          onClick={() => setSidebarOpen(false)}
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 w-64 bg-[var(--color-card)] dark:bg-[var(--color-card)] border-r border-[var(--color-border)] dark:border-[var(--color-border)]",
+          "transform transition-transform duration-200 ease-in-out lg:translate-x-0",
+          sidebarOpen ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        {/* Sidebar header */}
+        <div className="h-16 flex items-center justify-between px-4 border-b border-[var(--color-border)] dark:border-[var(--color-border)]">
+          <Link to="/" className="flex items-center gap-2">
+            {logo || (
+              <div className="w-8 h-8 bg-primary-600 rounded-[var(--radius-lg)] flex items-center justify-center">
+                <span className="text-white font-bold text-sm">
+                  {appName.charAt(0).toUpperCase()}
+                </span>
+              </div>
+            )}
+            <span className="font-semibold text-[var(--color-foreground)] dark:text-[var(--color-foreground)]">
+              {appName}
+            </span>
+          </Link>
+          <button
+            className="lg:hidden p-2 rounded-[var(--radius-md)] hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)] text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)]"
+            onClick={() => setSidebarOpen(false)}
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Navigation */}
+        <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
+          {navItems.map((item) => (
+            <NavLink
+              key={item.href}
+              item={item}
+              currentPath={location.pathname}
+            />
+          ))}
+        </nav>
+
+        {/* Sidebar footer */}
+        {sidebarFooter || (
+          <div className="p-4 border-t border-[var(--color-border)] dark:border-[var(--color-border)]">
+            <Link
+              to="/settings"
+              className="flex items-center gap-3 px-3 py-2 text-sm text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)] rounded-[var(--radius-lg)] hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)]"
+            >
+              <Settings className="h-5 w-5" />
+              Settings
+            </Link>
+          </div>
+        )}
+      </aside>
+
+      {/* Main content */}
+      <div className="lg:pl-64">
+        {/* Header */}
+        <header className="sticky top-0 z-30 h-16 bg-[var(--color-card)] dark:bg-[var(--color-card)] border-b border-[var(--color-border)] dark:border-[var(--color-border)]">
+          <div className="h-full px-4 flex items-center justify-between gap-4">
+            {/* Mobile menu button */}
+            <button
+              className="lg:hidden p-2 rounded-[var(--radius-md)] hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)] text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)] touch-manipulation min-h-[44px] min-w-[44px] flex items-center justify-center"
+              onClick={() => setSidebarOpen(true)}
+              aria-label="Open sidebar"
+            >
+              <Menu className="h-5 w-5" />
+            </button>
+
+            {/* Search */}
+            {showSearch && (
+              <div className="hidden sm:block flex-1 max-w-md">
+                <div className="relative">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)]" />
+                  <Input
+                    type="search"
+                    placeholder="Search..."
+                    className="pl-10 w-full"
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Right side */}
+            <div className="flex items-center gap-2">
+              {headerActions}
+
+              {/* Theme Toggle */}
+              <ThemeToggle />
+
+              {/* Notifications */}
+              <button className="relative p-2 rounded-[var(--radius-full)] hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)]">
+                <Bell className="h-5 w-5 text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)]" />
+                <span className="absolute top-1 right-1 w-2 h-2 bg-[var(--color-error)] rounded-[var(--radius-full)]" />
+              </button>
+
+              {/* User menu */}
+              {user && (
+                <div className="relative">
+                  <button
+                    className="flex items-center gap-2 p-2 rounded-[var(--radius-lg)] hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)]"
+                    onClick={() => setUserMenuOpen(!userMenuOpen)}
+                  >
+                    <Avatar
+                      src={user.avatar}
+                      alt={user.name}
+                      initials={user.name
+                        .split(" ")
+                        .map((n) => n[0])
+                        .join("")
+                        .substring(0, 2)}
+                      size="sm"
+                    />
+                    <span className="hidden sm:block text-sm font-medium text-[var(--color-foreground)] dark:text-[var(--color-foreground)]">
+                      {user.name}
+                    </span>
+                    <ChevronDown className="hidden sm:block h-4 w-4 text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)]" />
+                  </button>
+
+                  {userMenuOpen && (
+                    <>
+                      <div
+                        className="fixed inset-0 z-40"
+                        onClick={() => setUserMenuOpen(false)}
+                      />
+                      <div className="absolute right-0 mt-2 w-48 bg-[var(--color-card)] dark:bg-[var(--color-card)] rounded-[var(--radius-lg)] shadow-[var(--shadow-lg)] border border-[var(--color-border)] dark:border-[var(--color-border)] py-1 z-50">
+                        <div className="px-4 py-2 border-b border-[var(--color-border)] dark:border-[var(--color-border)]">
+                          <p className="text-sm font-medium text-[var(--color-foreground)] dark:text-[var(--color-foreground)]">
+                            {user.name}
+                          </p>
+                          <p className="text-xs text-[var(--color-muted-foreground)] dark:text-[var(--color-muted-foreground)]">
+                            {user.email}
+                          </p>
+                        </div>
+                        <Link
+                          to="/settings"
+                          className="flex items-center gap-2 px-4 py-2 text-sm text-[var(--color-foreground)] dark:text-[var(--color-foreground)] hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)]"
+                        >
+                          <Settings className="h-4 w-4" />
+                          Settings
+                        </Link>
+                        <button
+                          onClick={() => {
+                            setUserMenuOpen(false);
+                            handleSignOut?.();
+                          }}
+                          className="w-full flex items-center gap-2 px-4 py-2 text-sm text-[var(--color-error)] dark:text-[var(--color-error)] hover:bg-[var(--color-error)]/10 dark:hover:bg-[var(--color-error)]/20"
+                        >
+                          <LogOut className="h-4 w-4" />
+                          Sign out
+                        </button>
+                      </div>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+          </div>
+        </header>
+
+        {/* Page content */}
+        <main className="p-4 sm:p-6 pb-20 sm:pb-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+};
+
+// NavLink component
+const NavLink: React.FC<{ item: NavItem; currentPath: string }> = ({
+  item,
+  currentPath,
+}) => {
+  const isActive =
+    currentPath === item.href || currentPath.startsWith(item.href + "/");
+  const Icon = item.icon;
+
+  return (
+    <Link
+      to={item.href}
+      className={cn(
+        "flex items-center gap-3 px-3 py-2 rounded-[var(--radius-lg)] text-sm font-medium transition-colors",
+        isActive
+          ? "bg-[var(--color-foreground)] text-[var(--color-background)] shadow-[var(--shadow-sm)]"
+          : "text-[var(--color-muted-foreground)] hover:bg-[var(--color-muted)] hover:text-[var(--color-foreground)]",
+      )}
+    >
+      <Icon
+        className={cn(
+          "h-5 w-5",
+          isActive
+            ? "text-[var(--color-background)]"
+            : "text-[var(--color-muted-foreground)]",
+        )}
+      />
+      <span className="flex-1">{item.label}</span>
+      {item.badge && (
+        <Badge variant={isActive ? "primary" : "default"} size="sm">
+          {item.badge}
+        </Badge>
+      )}
+    </Link>
+  );
+};

package/shells/typescript-shell/packages/client/src/components/templates/FormTemplate.tsx

@@ -0,0 +1,328 @@
+/**
+ * FormTemplate
+ *
+ * A presentational template for form-based features like contact forms, feedback, surveys.
+ * Supports submission, validation, and success/error states.
+ */
+
+import React from "react";
+import { cn } from "../../lib/cn";
+import { Container } from "../molecules/Container";
+import { VStack, HStack } from "../atoms/Stack";
+import { Typography } from "../atoms/Typography";
+import { Button } from "../atoms/Button";
+import { Input } from "../atoms/Input";
+import { Textarea } from "../atoms/Textarea";
+import { Select } from "../atoms/Select";
+import { Checkbox } from "../atoms/Checkbox";
+import { Alert } from "../molecules/Alert";
+import { FormField } from "../molecules/FormField";
+import { Card, CardContent } from "../atoms/Card";
+import { Send, RotateCcw, CheckCircle } from "lucide-react";
+
+export type FormVariant = "minimal" | "standard" | "full";
+
+export interface FormFieldConfig {
+  name: string;
+  label: string;
+  type:
+    | "text"
+    | "email"
+    | "password"
+    | "tel"
+    | "url"
+    | "number"
+    | "textarea"
+    | "select"
+    | "checkbox";
+  placeholder?: string;
+  required?: boolean;
+  options?: Array<{ value: string; label: string }>;
+  rows?: number;
+}
+
+export interface FormTemplateProps {
+  /** Current form field values */
+  formData: Record<string, unknown>;
+  /** Whether form is being submitted */
+  isSubmitting?: boolean;
+  /** Whether submission was successful */
+  isSuccess?: boolean;
+  /** Error object if submission failed */
+  error?: Error | string | null;
+  /** Field-level validation errors */
+  validationErrors?: Record<string, string>;
+  /** Called when form is submitted */
+  onSubmit?: (formData: Record<string, unknown>) => void;
+  /** Called when a field value changes */
+  onFieldChange?: (field: string, value: unknown) => void;
+  /** Called to reset the form */
+  onReset?: () => void;
+  /** Called to dismiss success message */
+  onDismissSuccess?: () => void;
+  /** Form title */
+  title?: string;
+  /** Form subtitle/description */
+  subtitle?: string;
+  /** Submit button label */
+  submitLabel?: string;
+  /** Success message */
+  successMessage?: string;
+  /** Whether to show reset button */
+  showReset?: boolean;
+  /** Form field definitions */
+  fields?: FormFieldConfig[];
+  /** Template variant */
+  variant?: FormVariant;
+  /** Additional class name */
+  className?: string;
+}
+
+const defaultFields: FormFieldConfig[] = [
+  {
+    name: "name",
+    label: "Name",
+    type: "text",
+    required: true,
+    placeholder: "Your name",
+  },
+  {
+    name: "email",
+    label: "Email",
+    type: "email",
+    required: true,
+    placeholder: "your@email.com",
+  },
+  {
+    name: "message",
+    label: "Message",
+    type: "textarea",
+    required: true,
+    placeholder: "Your message...",
+    rows: 4,
+  },
+];
+
+export const FormTemplate: React.FC<FormTemplateProps> = ({
+  formData = {},
+  isSubmitting = false,
+  isSuccess = false,
+  error = null,
+  validationErrors = {},
+  onSubmit,
+  onFieldChange,
+  onReset,
+  onDismissSuccess,
+  title = "Contact Us",
+  subtitle,
+  submitLabel = "Submit",
+  successMessage = "Thank you! Your submission has been received.",
+  showReset = false,
+  fields = defaultFields,
+  variant = "standard",
+  className,
+}) => {
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSubmit?.(formData);
+  };
+
+  const renderField = (field: FormFieldConfig) => {
+    const value = formData[field.name];
+    const fieldError = validationErrors[field.name];
+
+    const handleChange = (newValue: unknown) => {
+      onFieldChange?.(field.name, newValue);
+    };
+
+    switch (field.type) {
+      case "textarea":
+        return (
+          <FormField
+            key={field.name}
+            label={field.label}
+            required={field.required}
+            error={fieldError}
+          >
+            <Textarea
+              value={(value as string) || ""}
+              onChange={(e) => handleChange(e.target.value)}
+              placeholder={field.placeholder}
+              rows={field.rows || 4}
+              className={cn(fieldError && "border-red-500")}
+            />
+          </FormField>
+        );
+
+      case "select":
+        return (
+          <FormField
+            key={field.name}
+            label={field.label}
+            required={field.required}
+            error={fieldError}
+          >
+            <Select
+              value={(value as string) || ""}
+              onChange={(e) => handleChange(e.target.value)}
+              options={
+                field.options?.map((o) => ({
+                  value: o.value,
+                  label: o.label,
+                })) || []
+              }
+              placeholder={
+                field.placeholder || `Select ${field.label.toLowerCase()}`
+              }
+            />
+          </FormField>
+        );
+
+      case "checkbox":
+        return (
+          <div key={field.name} className="flex items-center gap-2">
+            <Checkbox
+              checked={Boolean(value)}
+              onChange={(e) => handleChange(e.target.checked)}
+            />
+            <Typography variant="body">{field.label}</Typography>
+            {field.required && (
+              <span className="text-[var(--color-error)]">*</span>
+            )}
+          </div>
+        );
+
+      default:
+        return (
+          <FormField
+            key={field.name}
+            label={field.label}
+            required={field.required}
+            error={fieldError}
+          >
+            <Input
+              type={field.type}
+              value={(value as string) || ""}
+              onChange={(e) => handleChange(e.target.value)}
+              placeholder={field.placeholder}
+              className={cn(fieldError && "border-red-500")}
+            />
+          </FormField>
+        );
+    }
+  };
+
+  const renderSuccess = () => (
+    <VStack gap="lg" align="center" className="py-8">
+      <div className="w-16 h-16 rounded-[var(--radius-full)] bg-[var(--color-success)]/10 flex items-center justify-center">
+        <CheckCircle className="w-8 h-8 text-[var(--color-success)]" />
+      </div>
+      <Typography variant="h3" align="center">
+        Success!
+      </Typography>
+      <Typography variant="body" color="muted" align="center">
+        {successMessage}
+      </Typography>
+      {onDismissSuccess && (
+        <Button variant="primary" onClick={onDismissSuccess}>
+          Send Another
+        </Button>
+      )}
+    </VStack>
+  );
+
+  const renderForm = () => (
+    <form onSubmit={handleSubmit}>
+      <VStack gap="lg">
+        {error && (
+          <Alert variant="error" title="Submission Failed">
+            {typeof error === "string"
+              ? error
+              : error?.message || "Please try again."}
+          </Alert>
+        )}
+
+        {fields.map(renderField)}
+
+        <HStack gap="md" justify={showReset ? "between" : "end"}>
+          {showReset && (
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={onReset}
+              leftIcon={<RotateCcw className="h-4 w-4" />}
+            >
+              Reset
+            </Button>
+          )}
+          <Button
+            type="submit"
+            isLoading={isSubmitting}
+            leftIcon={<Send className="h-4 w-4" />}
+          >
+            {submitLabel}
+          </Button>
+        </HStack>
+      </VStack>
+    </form>
+  );
+
+  const renderMinimal = () => (
+    <VStack gap="lg" className={className}>
+      {isSuccess ? renderSuccess() : renderForm()}
+    </VStack>
+  );
+
+  const renderStandard = () => (
+    <Container size="sm" padding="lg" className={className}>
+      <VStack gap="lg">
+        <VStack gap="xs">
+          <Typography variant="h2">{title}</Typography>
+          {subtitle && (
+            <Typography variant="body" color="muted">
+              {subtitle}
+            </Typography>
+          )}
+        </VStack>
+
+        {isSuccess ? renderSuccess() : renderForm()}
+      </VStack>
+    </Container>
+  );
+
+  const renderFull = () => (
+    <Container size="md" padding="lg" className={className}>
+      <Card>
+        <CardContent className="p-8">
+          <VStack gap="xl">
+            <VStack gap="sm" align="center">
+              <Typography variant="h2" align="center">
+                {title}
+              </Typography>
+              {subtitle && (
+                <Typography variant="body" color="muted" align="center">
+                  {subtitle}
+                </Typography>
+              )}
+            </VStack>
+
+            {isSuccess ? renderSuccess() : renderForm()}
+          </VStack>
+        </CardContent>
+      </Card>
+    </Container>
+  );
+
+  switch (variant) {
+    case "minimal":
+      return renderMinimal();
+    case "full":
+      return renderFull();
+    default:
+      return renderStandard();
+  }
+};
+
+FormTemplate.displayName = "FormTemplate";
+
+export default FormTemplate;