@almadar/cli 0.3.1 → 0.3.3

package/shells/typescript-shell/packages/client/src/clients/winning-11/templates/UsersTemplate.tsx

@@ -0,0 +1,303 @@
+/**
+ * UsersTemplate
+ *
+ * Template for the Users list page (/users).
+ * Displays User entities as a card grid with management actions.
+ *
+ * Page: UsersPage
+ * Entity: User
+ * ViewType: list
+ */
+
+import React from "react";
+import { cn } from "../../../lib/cn";
+import { Box } from "../../../components/atoms/Box";
+import { VStack, HStack } from "../../../components/atoms/Stack";
+import { Typography } from "../../../components/atoms/Typography";
+import { Button } from "../../../components/atoms/Button";
+import { Input } from "../../../components/atoms/Input";
+import { Card } from "../../../components/atoms/Card";
+import { Badge } from "../../../components/atoms/Badge";
+import { Avatar } from "../../../components/atoms/Avatar";
+import { Spinner } from "../../../components/atoms/Spinner";
+import { useEventBus } from "../../../hooks/useEventBus";
+import {
+  Plus,
+  Search,
+  Filter,
+  User,
+  Mail,
+  Calendar,
+  MoreVertical,
+  Eye,
+  Edit,
+  UserX,
+} from "lucide-react";
+
+export interface UserData {
+  id: string;
+  name: string;
+  email: string;
+  status: "pending" | "active" | "suspended";
+  primaryCategory?: string;
+  connectionSlots?: number;
+  usedSlots?: number;
+  isBetaUser?: boolean;
+  createdAt?: string;
+  lastActiveAt?: string;
+}
+
+export interface UsersTemplateProps {
+  /** User items to display */
+  items?: readonly UserData[];
+  /** Data prop alias */
+  data?: readonly UserData[];
+  /** Loading state */
+  isLoading?: boolean;
+  /** Error state */
+  error?: Error | null;
+  /** Page title */
+  title?: string;
+  /** Page subtitle */
+  subtitle?: string;
+  /** Show header */
+  showHeader?: boolean;
+  /** Show search */
+  showSearch?: boolean;
+  /** Show filters */
+  showFilters?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const getStatusColor = (status: UserData["status"]) => {
+  switch (status) {
+    case "active":
+      return "success";
+    case "pending":
+      return "warning";
+    case "suspended":
+      return "error";
+    default:
+      return "neutral";
+  }
+};
+
+const UserCard: React.FC<{ user: UserData; onAction: (action: string, user: UserData) => void }> = ({
+  user,
+  onAction,
+}) => {
+  return (
+    <Card className="p-4 hover:shadow-md transition-shadow">
+      <VStack gap="md">
+        <HStack justify="between" align="start">
+          <HStack gap="sm" align="center">
+            <Avatar name={user.name} size="md" />
+            <VStack gap="none">
+              <Typography variant="body" className="font-medium">
+                {user.name}
+              </Typography>
+              <HStack gap="xs" align="center" className="text-neutral-500">
+                <Mail className="h-3 w-3" />
+                <Typography variant="small">{user.email}</Typography>
+              </HStack>
+            </VStack>
+          </HStack>
+          <Badge variant={getStatusColor(user.status)}>{user.status}</Badge>
+        </HStack>
+
+        {user.primaryCategory && (
+          <HStack gap="xs" align="center" className="text-neutral-500">
+            <User className="h-3 w-3" />
+            <Typography variant="small">{user.primaryCategory}</Typography>
+          </HStack>
+        )}
+
+        {user.connectionSlots !== undefined && (
+          <HStack gap="xs" align="center" className="text-neutral-500">
+            <Typography variant="small">
+              Connections: {user.usedSlots || 0}/{user.connectionSlots}
+            </Typography>
+          </HStack>
+        )}
+
+        {user.createdAt && (
+          <HStack gap="xs" align="center" className="text-neutral-500">
+            <Calendar className="h-3 w-3" />
+            <Typography variant="small">
+              Joined {new Date(user.createdAt).toLocaleDateString()}
+            </Typography>
+          </HStack>
+        )}
+
+        <HStack gap="sm" className="pt-2 border-t">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onAction("VIEW", user)}
+            className="gap-1"
+          >
+            <Eye className="h-3 w-3" />
+            View
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onAction("EDIT", user)}
+            className="gap-1"
+          >
+            <Edit className="h-3 w-3" />
+            Edit
+          </Button>
+          {user.status !== "suspended" && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onAction("SUSPEND", user)}
+              className="gap-1 text-red-600 hover:text-red-700"
+            >
+              <UserX className="h-3 w-3" />
+              Suspend
+            </Button>
+          )}
+        </HStack>
+      </VStack>
+    </Card>
+  );
+};
+
+export const UsersTemplate: React.FC<UsersTemplateProps> = ({
+  items,
+  data,
+  isLoading = false,
+  error = null,
+  title = "Community Members",
+  subtitle = "Manage your platform users",
+  showHeader = true,
+  showSearch = true,
+  showFilters = true,
+  className,
+}) => {
+  const eventBus = useEventBus();
+  const [searchTerm, setSearchTerm] = React.useState("");
+
+  const users = items || data || [];
+
+  // Handle search
+  const handleSearch = (value: string) => {
+    setSearchTerm(value);
+    eventBus.emit("UI:SEARCH", { searchTerm: value });
+  };
+
+  // Handle create
+  const handleCreate = () => {
+    eventBus.emit("UI:CREATE", { entity: "User" });
+  };
+
+  // Handle filter
+  const handleFilter = () => {
+    eventBus.emit("UI:FILTER", { entity: "User" });
+  };
+
+  // Handle user actions
+  const handleAction = (action: string, user: UserData) => {
+    eventBus.emit(`UI:${action}`, { row: user, entity: "User" });
+  };
+
+  // Filter users by search term
+  const filteredUsers = searchTerm
+    ? users.filter(
+        (user) =>
+          user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          user.email.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    : users;
+
+  return (
+    <VStack gap="lg" className={cn("p-6", className)}>
+      {/* Page Header */}
+      {showHeader && (
+        <HStack justify="between" align="center" wrap>
+          <VStack gap="xs">
+            <Typography variant="h1">{title}</Typography>
+            <Typography variant="body" className="text-neutral-500">
+              {subtitle}
+            </Typography>
+          </VStack>
+
+          <Button variant="primary" onClick={handleCreate} className="gap-2">
+            <Plus className="h-4 w-4" />
+            Register User
+          </Button>
+        </HStack>
+      )}
+
+      {/* Toolbar */}
+      {(showSearch || showFilters) && (
+        <HStack justify="between" align="center" wrap gap="sm">
+          {showSearch && (
+            <Box className="w-full max-w-sm">
+              <Input
+                placeholder="Search users..."
+                value={searchTerm}
+                onChange={(e) => handleSearch(e.target.value)}
+                leftIcon={<Search className="h-4 w-4 text-neutral-400" />}
+              />
+            </Box>
+          )}
+
+          {showFilters && (
+            <Button variant="secondary" onClick={handleFilter} className="gap-2">
+              <Filter className="h-4 w-4" />
+              Filter
+            </Button>
+          )}
+        </HStack>
+      )}
+
+      {/* Loading State */}
+      {isLoading && (
+        <VStack align="center" justify="center" className="py-12">
+          <Spinner size="lg" />
+          <Typography variant="body" className="text-neutral-500">
+            Loading users...
+          </Typography>
+        </VStack>
+      )}
+
+      {/* Error State */}
+      {error && (
+        <VStack align="center" justify="center" className="py-12">
+          <Typography variant="body" className="text-red-500">
+            Error: {error.message}
+          </Typography>
+        </VStack>
+      )}
+
+      {/* Users Grid */}
+      {!isLoading && !error && (
+        <>
+          {filteredUsers.length === 0 ? (
+            <VStack align="center" justify="center" className="py-12">
+              <User className="h-12 w-12 text-neutral-300" />
+              <Typography variant="h3" className="text-neutral-500">
+                No users found
+              </Typography>
+              <Typography variant="body" className="text-neutral-400">
+                {searchTerm ? "Try a different search term" : "Register your first user to get started"}
+              </Typography>
+            </VStack>
+          ) : (
+            <Box className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filteredUsers.map((user) => (
+                <UserCard key={user.id} user={user} onAction={handleAction} />
+              ))}
+            </Box>
+          )}
+        </>
+      )}
+    </VStack>
+  );
+};
+
+UsersTemplate.displayName = "UsersTemplate";

package/shells/typescript-shell/packages/client/src/components/atoms/Avatar.tsx

@@ -0,0 +1,226 @@
+/**
+ * Avatar Atom Component
+ *
+ * A versatile avatar component supporting images, initials, icons, and status indicators.
+ */
+
+import React from "react";
+import { User } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { cn } from "../../lib/cn";
+
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type AvatarStatus = "online" | "offline" | "away" | "busy";
+
+export interface AvatarProps {
+  /**
+   * Image source URL
+   */
+  src?: string;
+
+  /**
+   * Alt text for the image
+   */
+  alt?: string;
+
+  /**
+   * Full name - initials will be generated automatically
+   */
+  name?: string;
+
+  /**
+   * Initials to display (e.g., "JD" for John Doe)
+   * If not provided but name is, initials will be auto-generated
+   */
+  initials?: string;
+
+  /**
+   * Icon to display when no image or initials
+   */
+  icon?: LucideIcon;
+
+  /**
+   * Size of the avatar
+   * @default 'md'
+   */
+  size?: AvatarSize;
+
+  /**
+   * Status indicator
+   */
+  status?: AvatarStatus;
+
+  /**
+   * Badge content (e.g., notification count)
+   */
+  badge?: string | number;
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string;
+
+  /**
+   * Click handler
+   */
+  onClick?: () => void;
+}
+
+const sizeClasses: Record<AvatarSize, string> = {
+  xs: "w-6 h-6 text-xs",
+  sm: "w-8 h-8 text-sm",
+  md: "w-10 h-10 text-base",
+  lg: "w-12 h-12 text-lg",
+  xl: "w-16 h-16 text-xl",
+};
+
+const iconSizeClasses: Record<AvatarSize, string> = {
+  xs: "w-3 h-3",
+  sm: "w-4 h-4",
+  md: "w-5 h-5",
+  lg: "w-6 h-6",
+  xl: "w-8 h-8",
+};
+
+const statusSizeClasses: Record<AvatarSize, string> = {
+  xs: "w-1.5 h-1.5",
+  sm: "w-2 h-2",
+  md: "w-2.5 h-2.5",
+  lg: "w-3 h-3",
+  xl: "w-4 h-4",
+};
+
+const statusClasses: Record<AvatarStatus, string> = {
+  online: "bg-[var(--color-success)]",
+  offline: "bg-[var(--color-muted-foreground)]",
+  away: "bg-[var(--color-warning)]",
+  busy: "bg-[var(--color-error)]",
+};
+
+const badgeSizeClasses: Record<AvatarSize, string> = {
+  xs: "w-3 h-3 text-[8px]",
+  sm: "w-4 h-4 text-[10px]",
+  md: "w-5 h-5 text-xs",
+  lg: "w-6 h-6 text-sm",
+  xl: "w-7 h-7 text-base",
+};
+
+/**
+ * Generate initials from a full name
+ */
+function generateInitials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) {
+    return parts[0].substring(0, 2).toUpperCase();
+  }
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+
+export const Avatar: React.FC<AvatarProps> = ({
+  src,
+  alt,
+  name,
+  initials: providedInitials,
+  icon: Icon,
+  size = "md",
+  status,
+  badge,
+  className,
+  onClick,
+}) => {
+  // Auto-generate initials from name if not provided
+  const initials =
+    providedInitials ?? (name ? generateInitials(name) : undefined);
+
+  const hasImage = !!src;
+  const hasInitials = !!initials;
+  const hasIcon = !!Icon;
+
+  // Generate background based on initials
+  const getInitialsBackground = () =>
+    "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]";
+
+  return (
+    <div className="relative inline-block">
+      <div
+        className={cn(
+          "relative inline-flex items-center justify-center",
+          "bg-[var(--color-muted)] border-[length:var(--border-width)] border-[var(--color-border)]",
+          "overflow-hidden",
+          sizeClasses[size],
+          onClick &&
+            "cursor-pointer hover:bg-[var(--color-surface-hover)] transition-colors",
+          className,
+        )}
+        onClick={onClick}
+        role={onClick ? "button" : undefined}
+        tabIndex={onClick ? 0 : undefined}
+      >
+        {hasImage ? (
+          <img
+            src={src}
+            alt={alt || "Avatar"}
+            className="w-full h-full object-cover"
+            onError={(e) => {
+              // Fallback to initials or icon on image error
+              const target = e.target as HTMLImageElement;
+              target.style.display = "none";
+            }}
+          />
+        ) : hasInitials ? (
+          <div
+            className={cn(
+              "w-full h-full flex items-center justify-center font-bold",
+              getInitialsBackground(),
+            )}
+          >
+            {initials.substring(0, 2).toUpperCase()}
+          </div>
+        ) : hasIcon ? (
+          <Icon
+            className={cn(
+              "text-[var(--color-foreground)]",
+              iconSizeClasses[size],
+            )}
+          />
+        ) : (
+          <User
+            className={cn(
+              "text-[var(--color-foreground)]",
+              iconSizeClasses[size],
+            )}
+          />
+        )}
+      </div>
+
+      {/* Status indicator */}
+      {status && (
+        <div
+          className={cn(
+            "absolute bottom-0 right-0 border-2 border-[var(--color-card)]",
+            statusClasses[status],
+            statusSizeClasses[size],
+          )}
+          aria-label={`Status: ${status}`}
+        />
+      )}
+
+      {/* Badge */}
+      {badge !== undefined && (
+        <div
+          className={cn(
+            "absolute -top-1 -right-1 flex items-center justify-center",
+            "bg-[var(--color-primary)] text-[var(--color-primary-foreground)] font-bold",
+            "border-2 border-[var(--color-card)]",
+            badgeSizeClasses[size],
+          )}
+          aria-label={`Badge: ${badge}`}
+        >
+          {typeof badge === "number" && badge > 99 ? "99+" : badge}
+        </div>
+      )}
+    </div>
+  );
+};
+
+Avatar.displayName = "Avatar";

package/shells/typescript-shell/packages/client/src/components/atoms/Badge.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { cn } from "../../lib/cn";
+
+export type BadgeVariant =
+  | "default"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "danger"
+  | "error"
+  | "info"
+  | "neutral";
+export type BadgeSize = "sm" | "md" | "lg";
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+}
+
+// Using CSS variables for theme-aware styling
+const variantStyles: Record<BadgeVariant, string> = {
+  default: [
+    "bg-[var(--color-muted)] text-[var(--color-foreground)]",
+    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
+  ].join(" "),
+  primary: "bg-[var(--color-primary)] text-[var(--color-primary-foreground)]",
+  secondary:
+    "bg-[var(--color-secondary)] text-[var(--color-secondary-foreground)]",
+  success: [
+    "bg-[var(--color-surface)] text-[var(--color-success)]",
+    "border-[length:var(--border-width)] border-[var(--color-success)]",
+  ].join(" "),
+  warning: [
+    "bg-[var(--color-surface)] text-[var(--color-warning)]",
+    "border-[length:var(--border-width)] border-[var(--color-warning)]",
+  ].join(" "),
+  danger: [
+    "bg-[var(--color-surface)] text-[var(--color-error)]",
+    "border-[length:var(--border-width)] border-[var(--color-error)]",
+  ].join(" "),
+  error: [
+    "bg-[var(--color-surface)] text-[var(--color-error)]",
+    "border-[length:var(--border-width)] border-[var(--color-error)]",
+  ].join(" "),
+  info: [
+    "bg-[var(--color-surface)] text-[var(--color-info)]",
+    "border-[length:var(--border-width)] border-[var(--color-info)]",
+  ].join(" "),
+  neutral: [
+    "bg-[var(--color-muted)] text-[var(--color-muted-foreground)]",
+    "border-[length:var(--border-width-thin)] border-[var(--color-border)]",
+  ].join(" "),
+};
+
+const sizeStyles: Record<BadgeSize, string> = {
+  sm: "px-2 py-0.5 text-xs",
+  md: "px-2.5 py-1 text-sm",
+  lg: "px-3 py-1.5 text-base",
+};
+
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant = "default", size = "sm", ...props }, ref) => {
+    return (
+      <span
+        ref={ref}
+        className={cn(
+          "inline-flex items-center font-bold rounded-[var(--radius-sm)]",
+          variantStyles[variant],
+          sizeStyles[size],
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+
+Badge.displayName = "Badge";