@almadar/cli 1.0.6 → 1.0.8

package/shells/typescript-shell/packages/client/src/clients/blaz-kelemnc/molecules/DailyProgressInput.tsx

@@ -1,345 +0,0 @@
-/**
- * DailyProgressInput
- *
- * Quick daily check-in for wellness metrics: sleep score, hungeriness, tiredness.
- * Daily tracking keeps trainees engaged and provides data for the trainer.
- *
- * Maps to WellnessEntry entity from blaz-klemenc.orb:
- * - id: string
- * - traineeId: relation to User
- * - date: date
- * - sleepScore: number (1-10)
- * - hungeriness: number (1-10)
- * - tiredness: number (1-10)
- *
- * Event Contract (matches WellnessTracking trait):
- * - Emits: UI:ADD_WELLNESS - to add a new wellness entry
- * - Emits: UI:SAVE - to save the entry
- * - Payload: { data: WellnessEntryData, entity: "WellnessEntry" }
- */
-
-import React, { useCallback, useState } from "react";
-import { cn } from "../../../lib/cn";
-import { Box } from "../../../components/atoms/Box";
-import { HStack, VStack } from "../../../components/atoms/Stack";
-import { Typography } from "../../../components/atoms/Typography";
-import { Button } from "../../../components/atoms/Button";
-import { Card } from "../../../components/atoms/Card";
-import { useEventBus } from "../../../hooks/useEventBus";
-import { Moon, Utensils, Battery, Check, Calendar } from "lucide-react";
-
-/**
- * WellnessEntry entity data matching schema definition
- */
-export interface WellnessEntryData {
-  id?: string;
-  traineeId?: string;
-  date: string | Date;
-  sleepScore: number;
-  hungeriness: number;
-  tiredness: number;
-}
-
-/** Operation definition for action buttons */
-export interface DailyProgressOperation {
-  label: string;
-  event?: string;
-  action?: string;
-  variant?: "primary" | "secondary" | "danger" | "ghost";
-}
-
-export interface DailyProgressInputProps {
-  /** Existing entry to edit */
-  existingEntry?: WellnessEntryData;
-  /** Date for the entry */
-  date?: string | Date;
-  /** Trainee ID for context */
-  traineeId?: string;
-  /** Show date selector */
-  showDateSelector?: boolean;
-  /** Show trends */
-  showTrends?: boolean;
-  /** Chart type */
-  chartType?: "line" | "bar" | string;
-  /** Metrics to display */
-  metrics?: string[];
-  /** Compact mode */
-  compact?: boolean;
-  /** Entity context for events */
-  entity?: string;
-  /** Operations/actions available */
-  operations?: DailyProgressOperation[];
-  /** Additional CSS classes */
-  className?: string;
-}
-
-interface MetricConfig {
-  key: keyof Pick<
-    WellnessEntryData,
-    "sleepScore" | "hungeriness" | "tiredness"
-  >;
-  label: string;
-  icon: typeof Moon;
-  lowLabel: string;
-  highLabel: string;
-  color: string;
-  bgColor: string;
-}
-
-const metricsConfig: MetricConfig[] = [
-  {
-    key: "sleepScore",
-    label: "Sleep Quality",
-    icon: Moon,
-    lowLabel: "Poor",
-    highLabel: "Excellent",
-    color: "text-indigo-600",
-    bgColor: "bg-indigo-100",
-  },
-  {
-    key: "hungeriness",
-    label: "Hunger Level",
-    icon: Utensils,
-    lowLabel: "Not Hungry",
-    highLabel: "Very Hungry",
-    color: "text-amber-600",
-    bgColor: "bg-amber-100",
-  },
-  {
-    key: "tiredness",
-    label: "Energy Level",
-    icon: Battery,
-    lowLabel: "Exhausted",
-    highLabel: "Energized",
-    color: "text-emerald-600",
-    bgColor: "bg-emerald-100",
-  },
-];
-
-// Format date for display
-const formatDate = (date: string | Date): string => {
-  const d = new Date(date);
-  const today = new Date();
-  const yesterday = new Date(today);
-  yesterday.setDate(yesterday.getDate() - 1);
-
-  if (d.toDateString() === today.toDateString()) return "Today";
-  if (d.toDateString() === yesterday.toDateString()) return "Yesterday";
-
-  return d.toLocaleDateString("en-US", {
-    weekday: "short",
-    month: "short",
-    day: "numeric",
-  });
-};
-
-export const DailyProgressInput: React.FC<DailyProgressInputProps> = ({
-  existingEntry,
-  date = new Date(),
-  traineeId,
-  showDateSelector = false,
-  compact = false,
-  entity = "WellnessEntry",
-  className,
-}) => {
-  const eventBus = useEventBus();
-
-  // Initialize values from existing entry or defaults
-  const [values, setValues] = useState<
-    Pick<WellnessEntryData, "sleepScore" | "hungeriness" | "tiredness">
-  >({
-    sleepScore: existingEntry?.sleepScore ?? 5,
-    hungeriness: existingEntry?.hungeriness ?? 5,
-    tiredness: existingEntry?.tiredness ?? 5,
-  });
-
-  const [selectedDate, setSelectedDate] = useState<Date>(new Date(date));
-  const [hasChanges, setHasChanges] = useState(false);
-
-  // Update a metric value
-  const handleValueChange = useCallback(
-    (key: keyof typeof values, value: number) => {
-      setValues((prev) => ({ ...prev, [key]: value }));
-      setHasChanges(true);
-    },
-    [],
-  );
-
-  // Emit SAVE event (matches WellnessTracking trait)
-  const handleSave = useCallback(() => {
-    const entryData: WellnessEntryData = {
-      id: existingEntry?.id,
-      traineeId,
-      date: selectedDate,
-      ...values,
-    };
-
-    eventBus.emit("UI:SAVE", {
-      data: entryData,
-      entity,
-    });
-
-    setHasChanges(false);
-  }, [eventBus, existingEntry, traineeId, selectedDate, values, entity]);
-
-  // Render a single metric slider
-  const renderMetricSlider = (config: MetricConfig) => {
-    const Icon = config.icon;
-    const value = values[config.key];
-
-    if (compact) {
-      return (
-        <HStack key={config.key} gap="sm" align="center" className="flex-1">
-          <Box
-            display="flex"
-            rounded="full"
-            padding="xs"
-            className={cn("items-center justify-center", config.bgColor)}
-          >
-            <Icon className={cn("h-4 w-4", config.color)} />
-          </Box>
-          <VStack gap="none" className="flex-1">
-            <HStack justify="between">
-              <Typography variant="small" className="text-neutral-600">
-                {config.label}
-              </Typography>
-              <Typography
-                variant="small"
-                className={cn("font-semibold", config.color)}
-              >
-                {value}/10
-              </Typography>
-            </HStack>
-            <input
-              type="range"
-              min={1}
-              max={10}
-              value={value}
-              onChange={(e) =>
-                handleValueChange(config.key, parseInt(e.target.value))
-              }
-              className="w-full h-1.5 bg-neutral-200 rounded-full appearance-none cursor-pointer accent-current"
-              style={{ accentColor: "currentColor" }}
-            />
-          </VStack>
-        </HStack>
-      );
-    }
-
-    return (
-      <Box key={config.key} rounded="lg" padding="md" className="bg-neutral-50">
-        <VStack gap="sm">
-          <HStack justify="between" align="center">
-            <HStack gap="sm" align="center">
-              <Box
-                display="flex"
-                rounded="full"
-                padding="sm"
-                className={cn("items-center justify-center", config.bgColor)}
-              >
-                <Icon className={cn("h-5 w-5", config.color)} />
-              </Box>
-              <Typography variant="body" className="font-medium">
-                {config.label}
-              </Typography>
-            </HStack>
-            <Typography variant="h4" className={config.color}>
-              {value}
-            </Typography>
-          </HStack>
-
-          <VStack gap="xs">
-            <input
-              type="range"
-              min={1}
-              max={10}
-              value={value}
-              onChange={(e) =>
-                handleValueChange(config.key, parseInt(e.target.value))
-              }
-              className="w-full h-2 bg-neutral-200 rounded-full appearance-none cursor-pointer"
-              style={{
-                background: `linear-gradient(to right, currentColor ${(value - 1) * 11.1}%, #e5e7eb ${(value - 1) * 11.1}%)`,
-              }}
-            />
-            <HStack justify="between">
-              <Typography variant="small" className="text-neutral-400">
-                {config.lowLabel}
-              </Typography>
-              <Typography variant="small" className="text-neutral-400">
-                {config.highLabel}
-              </Typography>
-            </HStack>
-          </VStack>
-        </VStack>
-      </Box>
-    );
-  };
-
-  if (compact) {
-    return (
-      <Card className={cn("p-3", className)}>
-        <VStack gap="sm">
-          <HStack justify="between" align="center">
-            <HStack gap="xs" align="center">
-              <Calendar className="h-4 w-4 text-neutral-400" />
-              <Typography variant="small" className="text-neutral-600">
-                {formatDate(selectedDate)}
-              </Typography>
-            </HStack>
-            {hasChanges && (
-              <Button variant="primary" size="sm" onClick={handleSave}>
-                <Check className="h-3 w-3 mr-1" />
-                Save
-              </Button>
-            )}
-          </HStack>
-          <VStack gap="sm">{metricsConfig.map(renderMetricSlider)}</VStack>
-        </VStack>
-      </Card>
-    );
-  }
-
-  return (
-    <Card className={cn("p-4", className)}>
-      <VStack gap="md">
-        {/* Header */}
-        <HStack justify="between" align="center">
-          <VStack gap="none">
-            <Typography variant="h4">Daily Check-in</Typography>
-            <HStack gap="xs" align="center">
-              <Calendar className="h-4 w-4 text-neutral-400" />
-              <Typography variant="small" className="text-neutral-500">
-                {formatDate(selectedDate)}
-              </Typography>
-            </HStack>
-          </VStack>
-          {showDateSelector && (
-            <input
-              type="date"
-              value={selectedDate.toISOString().split("T")[0]}
-              onChange={(e) => setSelectedDate(new Date(e.target.value))}
-              className="px-2 py-1 text-sm border rounded-md"
-            />
-          )}
-        </HStack>
-
-        {/* Metric Sliders */}
-        <VStack gap="sm">{metricsConfig.map(renderMetricSlider)}</VStack>
-
-        {/* Save Button */}
-        <Button
-          variant="primary"
-          onClick={handleSave}
-          disabled={!hasChanges}
-          className="w-full"
-        >
-          <Check className="h-4 w-4 mr-2" />
-          {existingEntry ? "Update Entry" : "Save Entry"}
-        </Button>
-      </VStack>
-    </Card>
-  );
-};
-
-DailyProgressInput.displayName = "DailyProgressInput";

package/shells/typescript-shell/packages/client/src/clients/blaz-kelemnc/molecules/GroupSessionCard.stories.tsx

@@ -1,155 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { GroupSessionCard } from "./GroupSessionCard";
-
-const meta: Meta<typeof GroupSessionCard> = {
-  title: "Blaz-Klemenc/Molecules/GroupSessionCard",
-  component: GroupSessionCard,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof GroupSessionCard>;
-
-// Helper for dates
-const daysFromNow = (days: number) =>
-  new Date(Date.now() + days * 24 * 60 * 60 * 1000);
-
-export const Default: Story = {
-  args: {
-    session: {
-      id: "gs-1",
-      title: "Morning HIIT Class",
-      scheduledAt: daysFromNow(2),
-      duration: 60,
-      maxParticipants: 10,
-      currentParticipants: 6,
-      status: "scheduled",
-      isGroupSession: true,
-    },
-  },
-};
-
-export const AlmostFull: Story = {
-  args: {
-    session: {
-      id: "gs-2",
-      title: "Power Yoga",
-      scheduledAt: daysFromNow(1),
-      duration: 75,
-      maxParticipants: 10,
-      currentParticipants: 9,
-      status: "scheduled",
-      isGroupSession: true,
-    },
-  },
-};
-
-export const Full: Story = {
-  args: {
-    session: {
-      id: "gs-3",
-      title: "Spin Class",
-      scheduledAt: daysFromNow(3),
-      duration: 45,
-      maxParticipants: 10,
-      currentParticipants: 10,
-      status: "scheduled",
-      isGroupSession: true,
-    },
-  },
-};
-
-export const InProgress: Story = {
-  args: {
-    session: {
-      id: "gs-4",
-      title: "CrossFit Session",
-      scheduledAt: new Date(),
-      duration: 60,
-      maxParticipants: 12,
-      currentParticipants: 8,
-      status: "in-progress",
-      isGroupSession: true,
-    },
-  },
-};
-
-export const Completed: Story = {
-  args: {
-    session: {
-      id: "gs-5",
-      title: "Boxing Fundamentals",
-      scheduledAt: daysFromNow(-1),
-      duration: 60,
-      maxParticipants: 10,
-      currentParticipants: 8,
-      status: "completed",
-      isGroupSession: true,
-    },
-  },
-};
-
-export const Cancelled: Story = {
-  args: {
-    session: {
-      id: "gs-6",
-      title: "Outdoor Bootcamp",
-      scheduledAt: daysFromNow(1),
-      duration: 90,
-      maxParticipants: 15,
-      currentParticipants: 5,
-      status: "cancelled",
-      isGroupSession: true,
-    },
-  },
-};
-
-export const WithYouTubeLink: Story = {
-  args: {
-    session: {
-      id: "gs-7",
-      title: "Recorded Session",
-      scheduledAt: daysFromNow(-2),
-      duration: 60,
-      maxParticipants: 10,
-      currentParticipants: 10,
-      status: "completed",
-      isGroupSession: true,
-      youtubeLink: "https://youtube.com/watch?v=abc123",
-    },
-  },
-};
-
-export const LongDuration: Story = {
-  args: {
-    session: {
-      id: "gs-8",
-      title: "Marathon Prep Workshop",
-      scheduledAt: daysFromNow(5),
-      duration: 180,
-      maxParticipants: 20,
-      currentParticipants: 15,
-      status: "scheduled",
-      isGroupSession: true,
-    },
-  },
-};
-
-export const Compact: Story = {
-  args: {
-    session: {
-      id: "gs-9",
-      title: "Quick Session",
-      scheduledAt: daysFromNow(1),
-      duration: 30,
-      maxParticipants: 8,
-      currentParticipants: 4,
-      status: "scheduled",
-      isGroupSession: true,
-    },
-    compact: true,
-  },
-};