@almadar/cli 0.3.2 → 0.3.3

package/shells/typescript-shell/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "orbital-app",
+  "version": "1.0.0",
+  "private": true,
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "start": "node packages/server/dist/index.js",
+    "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\"",
+    "dev:server": "npm run dev -w @almadar/server",
+    "dev:client": "npm run dev -w @almadar/client",
+    "build": "npm run build:shared && npm run build:client && npm run build:server",
+    "build:all": "npm run build:shared && npm run build --workspaces --if-present",
+    "build:shared": "npm run build -w @almadar/shared",
+    "build:client": "npm run build -w @almadar/client",
+    "build:server": "npx esbuild packages/server/src/index.ts --bundle --platform=node --target=node20 --format=esm --outfile=packages/server/dist/index.js --alias:@almadar/shared=./packages/shared/src/index.ts --external:express --external:cors --external:helmet --external:zod --external:dotenv --external:firebase-admin --external:@faker-js/faker",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint packages --ext .ts,.tsx",
+    "format": "prettier --write \"**/*.{ts,tsx,js,json,md}\"",
+    "clean": "npm run clean --workspaces --if-present && rm -rf node_modules",
+    "typecheck": "tsc -b",
+    "deploy": "npm run deploy:hosting && npm run deploy:firestore",
+    "deploy:hosting": "npm run build:client && firebase deploy --only hosting:theme-kitchen-sink",
+    "deploy:hosting:preview": "npm run build:client && firebase hosting:channel:deploy preview --expires 7d --only theme-kitchen-sink",
+    "deploy:apphosting": "npm run build:server && firebase deploy --only apphosting",
+    "deploy:firestore": "firebase deploy --only firestore --force",
+    "deploy:rules": "firebase deploy --only firestore:rules",
+    "deploy:indexes": "firebase deploy --only firestore:indexes --force",
+    "deploy:all": "npm run deploy && npm run deploy:apphosting",
+    "firebase:login": "firebase login",
+    "firebase:init": "firebase init",
+    "firebase:use": "firebase use theme-kitchen-sink-project",
+    "firebase:setup:hosting": "firebase hosting:sites:get theme-kitchen-sink --project theme-kitchen-sink-project 2>/dev/null || firebase hosting:sites:create theme-kitchen-sink --project theme-kitchen-sink-project",
+    "firebase:setup:apphosting": "firebase apphosting:backends:get theme-kitchen-sink-backend --project theme-kitchen-sink-project 2>/dev/null || firebase apphosting:backends:create --backend theme-kitchen-sink-backend --project theme-kitchen-sink-project --primary-region us-central1 --root-dir . --non-interactive",
+    "firebase:setup:firestore": "firebase firestore:databases:get theme-kitchen-sink --project theme-kitchen-sink-project 2>/dev/null || firebase firestore:databases:create theme-kitchen-sink --location nam5 --project theme-kitchen-sink-project",
+    "firebase:setup": "npm run firebase:setup:firestore && npm run firebase:setup:hosting && npm run firebase:setup:apphosting",
+    "deploy:setup": "npm run firebase:use && npm run firebase:setup",
+    "logs": "firebase apphosting:backends:logs theme-kitchen-sink-backend",
+    "logs:live": "firebase apphosting:backends:logs theme-kitchen-sink-backend --follow"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "concurrently": "^8.0.0",
+    "esbuild": "^0.27.2",
+    "eslint": "^8.0.0",
+    "eslint-plugin-react": "^7.0.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
+    "jsdom": "^22.0.0",
+    "prettier": "^3.1.0",
+    "typescript": "^5.0.0",
+    "vitest": "^1.0.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/shells/typescript-shell/packages/client/.env.example

@@ -0,0 +1,30 @@
+# ===========================================
+# Orbital Client - Environment Variables
+# ===========================================
+# Copy this file to .env and fill in your values
+
+# ------------------------------------------
+# API Configuration
+# ------------------------------------------
+# URL to the backend API (leave empty to use proxy in development)
+VITE_API_URL=
+
+# ------------------------------------------
+# Firebase Client SDK
+# ------------------------------------------
+# Get these from Firebase Console > Project Settings > General
+# Scroll down to "Your apps" and select your web app
+
+VITE_APP_FIREBASE_API_KEY=your-api-key
+VITE_APP_FIREBASE_AUTH_DOMAIN=your-project-id.firebaseapp.com
+VITE_APP_FIREBASE_PROJECT_ID=your-project-id
+VITE_APP_FIREBASE_STORAGE_BUCKET=your-project-id.firebasestorage.app
+VITE_APP_FIREBASE_MESSAGING_SENDER_ID=your-sender-id
+VITE_APP_FIREBASE_APP_ID=your-app-id
+VITE_APP_FIREBASE_MEASUREMENT_ID=G-XXXXXXXXXX
+
+# ------------------------------------------
+# Optional: Feature Flags
+# ------------------------------------------
+# VITE_ENABLE_AI_FEATURES=true
+# VITE_ENABLE_DEBUG_MODE=false

package/shells/typescript-shell/packages/client/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Theme Kitchen Sink</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/shells/typescript-shell/packages/client/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@almadar/client",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "clean": "rm -rf dist",
+    "test": "vitest --run",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint src/"
+  },
+  "dependencies": {
+    "@almadar/shared": "*",
+    "@tanstack/react-query": "^5.62.0",
+    "clsx": "^2.1.0",
+    "firebase": "^10.7.0",
+    "lucide-react": "^0.469.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-force-graph-2d": "^1.25.0",
+    "react-markdown": "^9.0.0",
+    "react-router-dom": "^7.1.0",
+    "react-syntax-highlighter": "^15.5.0",
+    "rehype-katex": "^7.0.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
+    "tailwind-merge": "^2.2.0",
+    "zod": "^3.24.0",
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-syntax-highlighter": "^15.5.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "@vitest/coverage-v8": "^2.1.0",
+    "autoprefixer": "^10.4.20",
+    "jsdom": "^25.0.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.0",
+    "vite": "^6.0.0",
+    "vitest": "^2.1.0"
+  }
+}

package/shells/typescript-shell/packages/client/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/shells/typescript-shell/packages/client/src/App.tsx

@@ -0,0 +1,56 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ThemeProvider } from '@/contexts';
+import { ToastProvider } from '@/contexts/ToastContext';
+import { EventBusProvider } from '@/providers/EventBusProvider';
+import { UISlotProvider } from '@/context/UISlotContext';
+import { DashboardLayout } from '@components';
+import { Home } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+
+// {{GENERATED_IMPORTS}}
+
+// Export queryClient for test access (to clear cache between tests)
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      retry: 1,
+    },
+  },
+});
+
+/** Navigation items for sidebar - generated from schema */
+const navItems: Array<{ label: string; href: string; icon: LucideIcon }> = [
+  { label: 'Home', href: '/', icon: Home },
+  // {{GENERATED_NAV_ITEMS}}
+];
+
+export function App() {
+  return (
+    <ThemeProvider>
+      <ToastProvider>
+        <QueryClientProvider client={queryClient}>
+          <EventBusProvider>
+            <UISlotProvider>
+              <BrowserRouter>
+                <Routes>
+                  {/* Dashboard layout routes */}
+                  <Route element={<DashboardLayout navItems={navItems} appName="{{APP_NAME}}" />}>
+                    <Route index element={<Navigate to="/" replace />} />
+                    {/* {{GENERATED_ROUTES}} */}
+                  </Route>
+
+                  {/* Fallback route - redirect to main page */}
+                  <Route path="*" element={<Navigate to="/" replace />} />
+                </Routes>
+              </BrowserRouter>
+            </UISlotProvider>
+          </EventBusProvider>
+        </QueryClientProvider>
+      </ToastProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;

package/shells/typescript-shell/packages/client/src/clients/blaz-kelemnc/atoms/CreditExpirationAlert.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CreditExpirationAlert } from "./CreditExpirationAlert";
+
+const meta: Meta<typeof CreditExpirationAlert> = {
+  title: "Blaz-Klemenc/Atoms/CreditExpirationAlert",
+  component: CreditExpirationAlert,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof CreditExpirationAlert>;
+
+// Helper to create dates relative to now
+const daysFromNow = (days: number) =>
+  new Date(Date.now() + days * 24 * 60 * 60 * 1000);
+
+export const ExpiresTomorrow: Story = {
+  args: {
+    expiresAt: daysFromNow(1),
+    credits: 5,
+    traineeId: "trainee-1",
+  },
+};
+
+export const ExpiresIn3Days: Story = {
+  args: {
+    expiresAt: daysFromNow(3),
+    credits: 8,
+    traineeId: "trainee-2",
+  },
+};
+
+export const ExpiresIn7Days: Story = {
+  args: {
+    expiresAt: daysFromNow(7),
+    credits: 3,
+    traineeId: "trainee-3",
+  },
+};
+
+export const AlreadyExpired: Story = {
+  args: {
+    expiresAt: daysFromNow(-1),
+    credits: 2,
+    traineeId: "trainee-4",
+  },
+};
+
+export const LowCreditsExpiring: Story = {
+  args: {
+    expiresAt: daysFromNow(2),
+    credits: 1,
+    traineeId: "trainee-5",
+  },
+};
+
+export const Dismissible: Story = {
+  args: {
+    expiresAt: daysFromNow(5),
+    credits: 5,
+    dismissible: true,
+    onDismiss: () => console.log("Dismissed"),
+  },
+};
+
+export const NotDismissible: Story = {
+  args: {
+    expiresAt: daysFromNow(3),
+    credits: 4,
+    dismissible: false,
+  },
+};

package/shells/typescript-shell/packages/client/src/clients/blaz-kelemnc/atoms/CreditExpirationAlert.tsx

@@ -0,0 +1,157 @@
+/**
+ * CreditExpirationAlert
+ *
+ * Alert banner for expiring credits with renewal action.
+ * Business retention - prompt credit renewal.
+ *
+ * Event Contract:
+ * - Emits: UI:RENEW_CREDITS - when renew button is clicked
+ * - Payload: { expiresAt, credits, entity }
+ */
+
+import React, { useCallback, useMemo } from "react";
+import { cn } from "../../../lib/cn";
+import { Box } from "../../../components/atoms/Box";
+import { HStack } from "../../../components/atoms/Stack";
+import { Typography } from "../../../components/atoms/Typography";
+import { Button } from "../../../components/atoms/Button";
+import { useEventBus } from "../../../hooks/useEventBus";
+import { AlertTriangle, Clock, X } from "lucide-react";
+
+export interface CreditExpirationAlertProps {
+  /** Expiration date */
+  expiresAt: string | Date;
+  /** Credits expiring */
+  credits: number;
+  /** Trainee ID for context */
+  traineeId?: string;
+  /** Allow dismissing the alert */
+  dismissible?: boolean;
+  /** Callback when dismissed */
+  onDismiss?: () => void;
+  /** Entity context for events */
+  entity?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+// Calculate days until expiration
+const getDaysUntilExpiration = (expiresAt: string | Date): number => {
+  const expDate = new Date(expiresAt);
+  const now = new Date();
+  const diffTime = expDate.getTime() - now.getTime();
+  return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+};
+
+export const CreditExpirationAlert: React.FC<CreditExpirationAlertProps> = ({
+  expiresAt,
+  credits,
+  traineeId,
+  dismissible = true,
+  onDismiss,
+  entity = "Credit",
+  className,
+}) => {
+  const eventBus = useEventBus();
+
+  const daysUntilExpiration = useMemo(
+    () => getDaysUntilExpiration(expiresAt),
+    [expiresAt]
+  );
+
+  // Determine urgency level
+  const urgency: "critical" | "warning" | "info" = useMemo(() => {
+    if (daysUntilExpiration <= 0) return "critical";
+    if (daysUntilExpiration <= 3) return "critical";
+    if (daysUntilExpiration <= 7) return "warning";
+    return "info";
+  }, [daysUntilExpiration]);
+
+  const urgencyConfig = {
+    critical: {
+      bgColor: "bg-red-50",
+      borderColor: "border-red-200",
+      textColor: "text-red-700",
+      iconColor: "text-red-500",
+      buttonVariant: "primary" as const,
+    },
+    warning: {
+      bgColor: "bg-amber-50",
+      borderColor: "border-amber-200",
+      textColor: "text-amber-700",
+      iconColor: "text-amber-500",
+      buttonVariant: "secondary" as const,
+    },
+    info: {
+      bgColor: "bg-blue-50",
+      borderColor: "border-blue-200",
+      textColor: "text-blue-700",
+      iconColor: "text-blue-500",
+      buttonVariant: "secondary" as const,
+    },
+  };
+
+  const config = urgencyConfig[urgency];
+
+  // Emit RENEW_CREDITS event
+  const handleRenew = useCallback(() => {
+    eventBus.emit("UI:CREATE", {
+      traineeId,
+      entity,
+    });
+  }, [eventBus, traineeId, entity]);
+
+  // Don't show if already expired for more than 30 days
+  if (daysUntilExpiration < -30) return null;
+
+  // Get message based on days
+  const getMessage = () => {
+    if (daysUntilExpiration <= 0) {
+      return `${credits} credit${credits > 1 ? "s" : ""} expired!`;
+    }
+    if (daysUntilExpiration === 1) {
+      return `${credits} credit${credits > 1 ? "s" : ""} expire${credits > 1 ? "" : "s"} tomorrow!`;
+    }
+    return `${credits} credit${credits > 1 ? "s" : ""} expire${credits > 1 ? "" : "s"} in ${daysUntilExpiration} days`;
+  };
+
+  return (
+    <Box
+      rounded="lg"
+      border
+      padding="sm"
+      className={cn(config.bgColor, config.borderColor, className)}
+    >
+      <HStack justify="between" align="center">
+        <HStack gap="sm" align="center">
+          {urgency === "critical" ? (
+            <AlertTriangle className={cn("h-5 w-5", config.iconColor)} />
+          ) : (
+            <Clock className={cn("h-5 w-5", config.iconColor)} />
+          )}
+          <Typography variant="body" className={cn("font-medium", config.textColor)}>
+            {getMessage()}
+          </Typography>
+        </HStack>
+
+        <HStack gap="sm" align="center">
+          <Button variant={config.buttonVariant} size="sm" onClick={handleRenew}>
+            {daysUntilExpiration <= 0 ? "Add Credits" : "Renew Now"}
+          </Button>
+          {dismissible && onDismiss && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onDismiss}
+              className={config.textColor}
+            >
+              <X className="h-4 w-4" />
+            </Button>
+          )}
+        </HStack>
+      </HStack>
+    </Box>
+  );
+};
+
+CreditExpirationAlert.displayName = "CreditExpirationAlert";

package/shells/typescript-shell/packages/client/src/clients/blaz-kelemnc/atoms/CreditMeter.stories.tsx

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CreditMeter, CreditData } from "./CreditMeter";
+
+const meta: Meta<typeof CreditMeter> = {
+  title: "Blaz-Klemenc/Atoms/CreditMeter",
+  component: CreditMeter,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+    },
+    compact: {
+      control: "boolean",
+    },
+    showActionButton: {
+      control: "boolean",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CreditMeter>;
+
+// Sample credit data
+const baseCreditData: CreditData = {
+  id: "credit-1",
+  traineeId: "trainee-1",
+  totalCredits: 10,
+  remainingCredits: 7,
+};
+
+export const Default: Story = {
+  args: {
+    data: baseCreditData,
+  },
+};
+
+export const FullCredits: Story = {
+  args: {
+    data: {
+      ...baseCreditData,
+      remainingCredits: 10,
+    },
+  },
+};
+
+export const MediumCredits: Story = {
+  args: {
+    data: {
+      ...baseCreditData,
+      remainingCredits: 4,
+    },
+  },
+};
+
+export const LowCredits: Story = {
+  args: {
+    data: {
+      ...baseCreditData,
+      remainingCredits: 2,
+    },
+  },
+};
+
+export const NoCredits: Story = {
+  args: {
+    data: {
+      ...baseCreditData,
+      remainingCredits: 0,
+    },
+  },
+};
+
+export const ExpiringCredits: Story = {
+  args: {
+    data: {
+      ...baseCreditData,
+      remainingCredits: 5,
+      expiresAt: new Date(Date.now() + 3 * 24 * 60 * 60 * 1000), // 3 days from now
+    },
+  },
+};
+
+export const ExpiresTomorrow: Story = {
+  args: {
+    data: {
+      ...baseCreditData,
+      remainingCredits: 3,
+      expiresAt: new Date(Date.now() + 1 * 24 * 60 * 60 * 1000), // 1 day from now
+    },
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    data: {
+      ...baseCreditData,
+      remainingCredits: 5,
+    },
+    compact: true,
+  },
+};
+
+export const CompactExpiring: Story = {
+  args: {
+    data: {
+      ...baseCreditData,
+      remainingCredits: 5,
+      expiresAt: new Date(Date.now() + 5 * 24 * 60 * 60 * 1000),
+    },
+    compact: true,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    data: {
+      ...baseCreditData,
+      remainingCredits: 6,
+    },
+    size: "sm",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    data: {
+      ...baseCreditData,
+      remainingCredits: 8,
+    },
+    size: "lg",
+  },
+};
+
+export const WithoutActionButton: Story = {
+  args: {
+    data: {
+      ...baseCreditData,
+      remainingCredits: 2,
+    },
+    showActionButton: false,
+  },
+};
+
+export const UsingDirectProps: Story = {
+  args: {
+    remainingCredits: 5,
+    totalCredits: 20,
+    expiresAt: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000),
+  },
+};