@almadar/cli 1.0.6 → 1.0.8

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

@@ -1,303 +0,0 @@
-/**
- * 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

@@ -1,226 +0,0 @@
-/**
- * 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

@@ -1,79 +0,0 @@
-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";