@almadar/cli 1.0.6 → 1.0.7

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

@@ -1,142 +0,0 @@
-/**
- * GameTemplate
- *
- * A presentational template for game applications.
- * Includes a main game canvas/area, HUD overlay, and an optional debug sidebar.
- * **Atomic Design**: Composed using Box, Typography, and Layout molecules/atoms.
- */
-
-import React from "react";
-import { cn } from "../../lib/cn";
-import { Box } from "../atoms/Box";
-import { Typography } from "../atoms/Typography";
-import { Button } from "../atoms/Button";
-import { LucideIcon, Play, Pause, RotateCcw } from "lucide-react";
-
-export interface GameTemplateProps {
-  /** Title of the game */
-  title?: string;
-  /** The main game canvas or content */
-  children: React.ReactNode;
-  /** HUD overlay content (scores, health, etc.) */
-  hud?: React.ReactNode;
-  /** Debug panel content */
-  debugPanel?: React.ReactNode;
-  /** Whether the debug panel is visible */
-  showDebugPanel?: boolean;
-  /** Game controls */
-  controls?: {
-    onPlay?: () => void;
-    onPause?: () => void;
-    onReset?: () => void;
-    isPlaying?: boolean;
-  };
-  /** Additional class name */
-  className?: string;
-}
-
-export const GameTemplate: React.FC<GameTemplateProps> = ({
-  title = "Game",
-  children,
-  hud,
-  debugPanel,
-  showDebugPanel = false,
-  controls,
-  className,
-}) => {
-  return (
-    <Box
-      display="flex"
-      fullHeight
-      className={cn("flex-col lg:flex-row", className)}
-    >
-      {/* Main Game Area */}
-      <Box display="flex" className="flex-1 flex-col">
-        {/* Header with title and controls */}
-        <Box
-          padding="md"
-          border
-          className="border-b-2 border-x-0 border-t-0 border-[var(--color-border)] flex items-center justify-between"
-        >
-          <Typography variant="h4">{title}</Typography>
-
-          {controls && (
-            <div className="flex items-center gap-2">
-              {controls.isPlaying ? (
-                <Button
-                  variant="secondary"
-                  size="sm"
-                  leftIcon={<Pause className="h-4 w-4" />}
-                  onClick={controls.onPause}
-                >
-                  Pause
-                </Button>
-              ) : (
-                <Button
-                  variant="primary"
-                  size="sm"
-                  leftIcon={<Play className="h-4 w-4" />}
-                  onClick={controls.onPlay}
-                >
-                  Play
-                </Button>
-              )}
-              <Button
-                variant="ghost"
-                size="sm"
-                leftIcon={<RotateCcw className="h-4 w-4" />}
-                onClick={controls.onReset}
-              >
-                Reset
-              </Button>
-            </div>
-          )}
-        </Box>
-
-        {/* Game Canvas Area */}
-        <Box
-          position="relative"
-          fullWidth
-          className="flex-1 bg-[var(--color-muted)]"
-        >
-          {/* Main game content */}
-          {children}
-
-          {/* HUD Overlay */}
-          {hud && (
-            <Box
-              position="absolute"
-              className="top-0 left-0 right-0 pointer-events-none"
-            >
-              <Box padding="md" className="pointer-events-auto w-fit">
-                {hud}
-              </Box>
-            </Box>
-          )}
-        </Box>
-      </Box>
-
-      {/* Debug Sidebar */}
-      {showDebugPanel && debugPanel && (
-        <Box
-          bg="surface"
-          border
-          shadow="sm"
-          overflow="auto"
-          className="w-full lg:w-80 lg:border-l-2 lg:border-t-0 border-t-2 border-[var(--color-border)]"
-        >
-          <Box
-            padding="md"
-            border
-            className="border-b-2 border-x-0 border-t-0 border-[var(--color-border)]"
-          >
-            <Typography variant="h6">Debug Panel</Typography>
-          </Box>
-          <Box padding="md">{debugPanel}</Box>
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-GameTemplate.displayName = "GameTemplate";

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

@@ -1,79 +0,0 @@
-/**
- * GenericAppTemplate
- *
- * A simple, generic template for any application.
- * Includes a header with title and actions, and a main content area.
- * **Atomic Design**: Composed using Box, Typography, and Button atoms.
- */
-
-import React from "react";
-import { cn } from "../../lib/cn";
-import { Box } from "../atoms/Box";
-import { Typography } from "../atoms/Typography";
-import { Button } from "../atoms/Button";
-
-export interface GenericAppTemplateProps {
-  /** Page title */
-  title: string;
-  /** Subtitle or description */
-  subtitle?: string;
-  /** Main content */
-  children: React.ReactNode;
-  /** Header actions (buttons, links) */
-  headerActions?: React.ReactNode;
-  /** Footer content */
-  footer?: React.ReactNode;
-  /** Additional class name */
-  className?: string;
-}
-
-export const GenericAppTemplate: React.FC<GenericAppTemplateProps> = ({
-  title,
-  subtitle,
-  children,
-  headerActions,
-  footer,
-  className,
-}) => {
-  return (
-    <Box display="flex" fullHeight className={cn("flex-col", className)}>
-      {/* Header */}
-      <Box
-        padding="md"
-        border
-        className="border-b-2 border-x-0 border-t-0 border-[var(--color-border)] flex items-center justify-between flex-shrink-0"
-      >
-        <div>
-          <Typography variant="h3">{title}</Typography>
-          {subtitle && (
-            <Typography variant="body2" color="secondary" className="mt-1">
-              {subtitle}
-            </Typography>
-          )}
-        </div>
-        {headerActions && (
-          <div className="flex items-center gap-2">{headerActions}</div>
-        )}
-      </Box>
-
-      {/* Main Content */}
-      <Box fullWidth overflow="auto" className="flex-1">
-        <Box padding="lg">{children}</Box>
-      </Box>
-
-      {/* Footer */}
-      {footer && (
-        <Box
-          padding="md"
-          border
-          bg="muted"
-          className="border-t-2 border-x-0 border-b-0 border-[var(--color-border)] flex-shrink-0"
-        >
-          {footer}
-        </Box>
-      )}
-    </Box>
-  );
-};
-
-GenericAppTemplate.displayName = "GenericAppTemplate";

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

@@ -1,361 +0,0 @@
-/**
- * ListTemplate
- *
- * A presentational template for list-based features like todos, shopping lists, notes.
- * Supports add, toggle, delete, and filter operations.
- */
-
-import React, { useState } 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 { Checkbox } from "../atoms/Checkbox";
-import { Spinner } from "../atoms/Spinner";
-import { Alert } from "../molecules/Alert";
-import { EmptyState } from "../molecules/EmptyState";
-import { Plus, Trash2, RefreshCw, ListTodo } from "lucide-react";
-
-export type FilterValue = "all" | "active" | "completed";
-export type ListVariant = "minimal" | "standard" | "full";
-
-export interface ListTemplateItem {
-  id: string;
-  title: string;
-  completed?: boolean;
-  [key: string]: unknown;
-}
-
-export interface ListTemplateProps {
-  /** Array of list items */
-  items: ListTemplateItem[];
-  /** Whether data is loading */
-  isLoading?: boolean;
-  /** Error object if loading failed */
-  error?: Error | string | null;
-  /** Current filter value */
-  filter?: FilterValue;
-  /** Called when a new item is added */
-  onAdd?: (title: string) => void;
-  /** Called when an item is toggled */
-  onToggle?: (id: string) => void;
-  /** Called when an item is deleted */
-  onDelete?: (id: string) => void;
-  /** Called when filter changes */
-  onFilterChange?: (filter: FilterValue) => void;
-  /** Called to retry loading */
-  onRetry?: () => void;
-  /** Title displayed above the list */
-  title?: string;
-  /** Placeholder for the input field */
-  placeholder?: string;
-  /** Whether to show filter buttons */
-  showFilters?: boolean;
-  /** Whether to show item count */
-  showCount?: boolean;
-  /** Message shown when list is empty */
-  emptyMessage?: string;
-  /** Template variant */
-  variant?: ListVariant;
-  /** Additional class name */
-  className?: string;
-}
-
-export const ListTemplate: React.FC<ListTemplateProps> = ({
-  items = [],
-  isLoading = false,
-  error = null,
-  filter = "all",
-  onAdd,
-  onToggle,
-  onDelete,
-  onFilterChange,
-  onRetry,
-  title = "My List",
-  placeholder = "Add a new item...",
-  showFilters = true,
-  showCount = true,
-  emptyMessage = "No items yet",
-  variant = "standard",
-  className,
-}) => {
-  const [inputValue, setInputValue] = useState("");
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (inputValue.trim() && onAdd) {
-      onAdd(inputValue.trim());
-      setInputValue("");
-    }
-  };
-
-  const filteredItems = items.filter((item) => {
-    if (filter === "active") return !item.completed;
-    if (filter === "completed") return item.completed;
-    return true;
-  });
-
-  const activeCount = items.filter((item) => !item.completed).length;
-  const completedCount = items.filter((item) => item.completed).length;
-
-  const renderError = () => (
-    <Alert
-      variant="error"
-      title="Failed to load items"
-      actions={
-        onRetry && (
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={onRetry}
-            leftIcon={<RefreshCw className="h-4 w-4" />}
-          >
-            Retry
-          </Button>
-        )
-      }
-    >
-      {typeof error === "string"
-        ? error
-        : error?.message || "An error occurred"}
-    </Alert>
-  );
-
-  const renderFilters = () => (
-    <HStack gap="sm">
-      <Button
-        variant={filter === "all" ? "primary" : "ghost"}
-        size="sm"
-        onClick={() => onFilterChange?.("all")}
-      >
-        All ({items.length})
-      </Button>
-      <Button
-        variant={filter === "active" ? "primary" : "ghost"}
-        size="sm"
-        onClick={() => onFilterChange?.("active")}
-      >
-        Active ({activeCount})
-      </Button>
-      <Button
-        variant={filter === "completed" ? "primary" : "ghost"}
-        size="sm"
-        onClick={() => onFilterChange?.("completed")}
-      >
-        Completed ({completedCount})
-      </Button>
-    </HStack>
-  );
-
-  const renderItem = (item: ListTemplateItem) => (
-    <HStack
-      key={item.id}
-      gap="md"
-      align="center"
-      className={cn(
-        "p-3 rounded-[var(--radius-lg)] border border-[var(--color-border)] dark:border-[var(--color-border)]",
-        "hover:bg-[var(--color-muted)] dark:hover:bg-[var(--color-muted)] transition-colors",
-        item.completed && "opacity-60",
-      )}
-    >
-      <Checkbox
-        checked={item.completed}
-        onChange={() => onToggle?.(item.id)}
-        className="flex-shrink-0"
-      />
-      <Typography
-        variant="body"
-        className={cn(
-          "flex-1",
-          item.completed && "line-through text-[var(--color-muted-foreground)]",
-        )}
-      >
-        {item.title}
-      </Typography>
-      {onDelete && (
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => onDelete(item.id)}
-          className="text-[var(--color-error)] hover:text-[var(--color-error)] hover:bg-[var(--color-error)]/10"
-        >
-          <Trash2 className="h-4 w-4" />
-        </Button>
-      )}
-    </HStack>
-  );
-
-  const renderEmpty = () => (
-    <EmptyState
-      icon={ListTodo}
-      title={emptyMessage}
-      description="Add your first item using the input above"
-    />
-  );
-
-  const renderMinimal = () => (
-    <VStack gap="md" className={className}>
-      <form onSubmit={handleSubmit}>
-        <HStack gap="sm">
-          <Input
-            value={inputValue}
-            onChange={(e) => setInputValue(e.target.value)}
-            placeholder={placeholder}
-            className="flex-1"
-          />
-          <Button type="submit" disabled={!inputValue.trim()}>
-            <Plus className="h-4 w-4" />
-          </Button>
-        </HStack>
-      </form>
-      {isLoading ? (
-        <div className="flex justify-center py-8">
-          <Spinner size="md" />
-        </div>
-      ) : error ? (
-        renderError()
-      ) : filteredItems.length === 0 ? (
-        <Typography
-          variant="body"
-          color="muted"
-          align="center"
-          className="py-8"
-        >
-          {emptyMessage}
-        </Typography>
-      ) : (
-        <VStack gap="sm">{filteredItems.map(renderItem)}</VStack>
-      )}
-    </VStack>
-  );
-
-  const renderStandard = () => (
-    <Container size="md" padding="lg" className={className}>
-      <VStack gap="lg">
-        <Typography variant="h2">{title}</Typography>
-
-        {error && renderError()}
-
-        <form onSubmit={handleSubmit}>
-          <HStack gap="sm">
-            <Input
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              placeholder={placeholder}
-              className="flex-1"
-            />
-            <Button
-              type="submit"
-              disabled={!inputValue.trim()}
-              leftIcon={<Plus className="h-4 w-4" />}
-            >
-              Add
-            </Button>
-          </HStack>
-        </form>
-
-        {showFilters && items.length > 0 && renderFilters()}
-
-        {isLoading ? (
-          <div className="flex justify-center py-8">
-            <Spinner size="md" />
-          </div>
-        ) : filteredItems.length === 0 ? (
-          renderEmpty()
-        ) : (
-          <VStack gap="sm">{filteredItems.map(renderItem)}</VStack>
-        )}
-
-        {showCount && items.length > 0 && (
-          <Typography variant="small" color="muted">
-            {activeCount} item{activeCount !== 1 ? "s" : ""} remaining
-          </Typography>
-        )}
-      </VStack>
-    </Container>
-  );
-
-  const renderFull = () => (
-    <Container size="md" padding="lg" className={className}>
-      <VStack gap="lg">
-        <HStack justify="between" align="center">
-          <Typography variant="h2">{title}</Typography>
-          {showCount && (
-            <Typography variant="small" color="muted">
-              {items.length} total • {activeCount} active • {completedCount}{" "}
-              done
-            </Typography>
-          )}
-        </HStack>
-
-        {error && renderError()}
-
-        <form onSubmit={handleSubmit}>
-          <HStack gap="sm">
-            <Input
-              value={inputValue}
-              onChange={(e) => setInputValue(e.target.value)}
-              placeholder={placeholder}
-              className="flex-1"
-            />
-            <Button
-              type="submit"
-              disabled={!inputValue.trim()}
-              leftIcon={<Plus className="h-4 w-4" />}
-            >
-              Add Item
-            </Button>
-          </HStack>
-        </form>
-
-        {showFilters && items.length > 0 && (
-          <div className="border-b border-[var(--color-border)] dark:border-[var(--color-border)] pb-4">
-            {renderFilters()}
-          </div>
-        )}
-
-        {isLoading ? (
-          <div className="flex justify-center py-12">
-            <Spinner size="lg" />
-          </div>
-        ) : filteredItems.length === 0 ? (
-          renderEmpty()
-        ) : (
-          <VStack gap="sm">{filteredItems.map(renderItem)}</VStack>
-        )}
-
-        {items.length > 0 && completedCount > 0 && (
-          <HStack justify="end">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="text-[var(--color-muted-foreground)]"
-              onClick={() => {
-                items
-                  .filter((i) => i.completed)
-                  .forEach((i) => onDelete?.(i.id));
-              }}
-            >
-              Clear completed
-            </Button>
-          </HStack>
-        )}
-      </VStack>
-    </Container>
-  );
-
-  switch (variant) {
-    case "minimal":
-      return renderMinimal();
-    case "full":
-      return renderFull();
-    default:
-      return renderStandard();
-  }
-};
-
-ListTemplate.displayName = "ListTemplate";
-
-export default ListTemplate;