@almadar/cli 0.3.1 → 0.3.3

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

@@ -0,0 +1,360 @@
+/**
+ * NutritionSummary
+ *
+ * Daily/weekly nutrition summary with macro breakdown.
+ * Quick overview of nutrition compliance.
+ *
+ * Event Contract:
+ * - entityAware: true (display only, no events emitted)
+ */
+
+import React, { useMemo } 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 { Card } from "../../../components/atoms/Card";
+import { Badge } from "../../../components/atoms/Badge";
+import { Flame, Target, TrendingUp, TrendingDown, Minus } from "lucide-react";
+
+export interface NutritionData {
+  calories: number;
+  protein: number;
+  carbs: number;
+  fat: number;
+  date?: string | Date;
+}
+
+export interface NutritionTargets {
+  calories: number;
+  protein: number;
+  carbs: number;
+  fat: number;
+}
+
+export interface NutritionSummaryProps {
+  /** Nutrition data to display */
+  summary: NutritionData;
+  /** Target values for comparison */
+  targets?: NutritionTargets;
+  /** Summary period */
+  period?: "day" | "week";
+  /** Compact mode */
+  compact?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+// Macro configuration
+const macroConfig = {
+  protein: {
+    label: "Protein",
+    color: "text-red-600",
+    bgColor: "bg-red-100",
+    barColor: "bg-red-500",
+  },
+  carbs: {
+    label: "Carbs",
+    color: "text-amber-600",
+    bgColor: "bg-amber-100",
+    barColor: "bg-amber-500",
+  },
+  fat: {
+    label: "Fat",
+    color: "text-green-600",
+    bgColor: "bg-green-100",
+    barColor: "bg-green-500",
+  },
+};
+
+// Calculate percentage of target
+const getPercentage = (value: number, target: number): number => {
+  if (target === 0) return 0;
+  return Math.round((value / target) * 100);
+};
+
+// Get compliance status
+const getComplianceStatus = (
+  percentage: number,
+): { status: "under" | "on-track" | "over"; color: string } => {
+  if (percentage < 80) return { status: "under", color: "text-amber-600" };
+  if (percentage <= 110)
+    return { status: "on-track", color: "text-emerald-600" };
+  return { status: "over", color: "text-red-600" };
+};
+
+export const NutritionSummary: React.FC<NutritionSummaryProps> = ({
+  summary,
+  targets,
+  period = "day",
+  compact = false,
+  className,
+}) => {
+  // Calculate percentages if targets provided
+  const percentages = useMemo(() => {
+    if (!targets) return null;
+    return {
+      calories: getPercentage(summary.calories, targets.calories),
+      protein: getPercentage(summary.protein, targets.protein),
+      carbs: getPercentage(summary.carbs, targets.carbs),
+      fat: getPercentage(summary.fat, targets.fat),
+    };
+  }, [summary, targets]);
+
+  // Overall compliance
+  const overallCompliance = useMemo(() => {
+    if (!percentages) return null;
+    const avg =
+      (percentages.calories +
+        percentages.protein +
+        percentages.carbs +
+        percentages.fat) /
+      4;
+    return getComplianceStatus(avg);
+  }, [percentages]);
+
+  if (compact) {
+    return (
+      <Card className={cn("p-3", className)}>
+        <HStack justify="between" align="center">
+          <HStack gap="sm" align="center">
+            <Box
+              display="flex"
+              rounded="full"
+              padding="xs"
+              className="items-center justify-center bg-orange-100"
+            >
+              <Flame className="h-4 w-4 text-orange-600" />
+            </Box>
+            <VStack gap="none">
+              <Typography variant="body" className="font-semibold">
+                {summary.calories} kcal
+              </Typography>
+              {targets && percentages && (
+                <Typography variant="small" className="text-neutral-500">
+                  {percentages.calories}% of target
+                </Typography>
+              )}
+            </VStack>
+          </HStack>
+          <HStack gap="sm">
+            <Badge
+              variant="default"
+              size="sm"
+              className={macroConfig.protein.bgColor}
+            >
+              <span className={macroConfig.protein.color}>
+                {summary.protein}g P
+              </span>
+            </Badge>
+            <Badge
+              variant="default"
+              size="sm"
+              className={macroConfig.carbs.bgColor}
+            >
+              <span className={macroConfig.carbs.color}>
+                {summary.carbs}g C
+              </span>
+            </Badge>
+            <Badge
+              variant="default"
+              size="sm"
+              className={macroConfig.fat.bgColor}
+            >
+              <span className={macroConfig.fat.color}>{summary.fat}g F</span>
+            </Badge>
+          </HStack>
+        </HStack>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className={cn("p-4", className)}>
+      <VStack gap="md">
+        {/* Header */}
+        <HStack justify="between" align="center">
+          <VStack gap="none">
+            <Typography variant="h4">
+              {period === "day" ? "Daily" : "Weekly"} Nutrition
+            </Typography>
+            {summary.date && (
+              <Typography variant="small" className="text-neutral-500">
+                {new Date(summary.date).toLocaleDateString("en-US", {
+                  weekday: "long",
+                  month: "short",
+                  day: "numeric",
+                })}
+              </Typography>
+            )}
+          </VStack>
+          {overallCompliance && (
+            <Badge
+              variant={
+                overallCompliance.status === "on-track"
+                  ? "success"
+                  : overallCompliance.status === "over"
+                    ? "danger"
+                    : "warning"
+              }
+            >
+              {overallCompliance.status === "on-track" ? (
+                <Target className="h-3 w-3 mr-1" />
+              ) : overallCompliance.status === "over" ? (
+                <TrendingUp className="h-3 w-3 mr-1" />
+              ) : (
+                <TrendingDown className="h-3 w-3 mr-1" />
+              )}
+              {overallCompliance.status === "on-track"
+                ? "On Track"
+                : overallCompliance.status === "over"
+                  ? "Over Target"
+                  : "Under Target"}
+            </Badge>
+          )}
+        </HStack>
+
+        {/* Calories */}
+        <Box rounded="lg" padding="md" className="bg-orange-50">
+          <HStack justify="between" align="center">
+            <HStack gap="sm" align="center">
+              <Flame className="h-5 w-5 text-orange-600" />
+              <Typography variant="body" className="font-medium">
+                Calories
+              </Typography>
+            </HStack>
+            <VStack gap="none" align="end">
+              <Typography variant="h3" className="text-orange-600 font-bold">
+                {summary.calories}
+              </Typography>
+              {targets && (
+                <Typography variant="small" className="text-neutral-500">
+                  / {targets.calories} kcal ({percentages?.calories}%)
+                </Typography>
+              )}
+            </VStack>
+          </HStack>
+          {targets && percentages && (
+            <Box rounded="full" className="h-2 w-full mt-2 bg-orange-100">
+              <Box
+                rounded="full"
+                className="h-full bg-orange-500 transition-all"
+                style={{ width: `${Math.min(100, percentages.calories)}%` }}
+              />
+            </Box>
+          )}
+        </Box>
+
+        {/* Macros */}
+        <Box className="grid grid-cols-3 gap-3">
+          {(["protein", "carbs", "fat"] as const).map((macro) => {
+            const config = macroConfig[macro];
+            const value = summary[macro];
+            const target = targets?.[macro];
+            const percentage = percentages?.[macro];
+
+            return (
+              <Box
+                key={macro}
+                rounded="lg"
+                padding="sm"
+                className={config.bgColor}
+              >
+                <VStack gap="xs" align="center">
+                  <Typography variant="small" className={config.color}>
+                    {config.label}
+                  </Typography>
+                  <Typography
+                    variant="h4"
+                    className={cn("font-bold", config.color)}
+                  >
+                    {value}g
+                  </Typography>
+                  {target && percentage !== undefined && (
+                    <>
+                      <Typography variant="small" className="text-neutral-500">
+                        / {target}g
+                      </Typography>
+                      <Box rounded="full" className="h-1.5 w-full bg-white/50">
+                        <Box
+                          rounded="full"
+                          className={cn(
+                            "h-full transition-all",
+                            config.barColor,
+                          )}
+                          style={{ width: `${Math.min(100, percentage)}%` }}
+                        />
+                      </Box>
+                    </>
+                  )}
+                </VStack>
+              </Box>
+            );
+          })}
+        </Box>
+
+        {/* Macro Ratio Bar */}
+        {summary.protein + summary.carbs + summary.fat > 0 && (
+          <VStack gap="xs">
+            <Typography variant="small" className="text-neutral-500">
+              Macro Ratio
+            </Typography>
+            <Box
+              rounded="full"
+              className="h-3 w-full overflow-hidden bg-neutral-100"
+            >
+              <HStack gap="none" className="h-full">
+                <Box
+                  className={cn("h-full", macroConfig.protein.barColor)}
+                  style={{
+                    width: `${(summary.protein / (summary.protein + summary.carbs + summary.fat)) * 100}%`,
+                  }}
+                />
+                <Box
+                  className={cn("h-full", macroConfig.carbs.barColor)}
+                  style={{
+                    width: `${(summary.carbs / (summary.protein + summary.carbs + summary.fat)) * 100}%`,
+                  }}
+                />
+                <Box
+                  className={cn("h-full", macroConfig.fat.barColor)}
+                  style={{
+                    width: `${(summary.fat / (summary.protein + summary.carbs + summary.fat)) * 100}%`,
+                  }}
+                />
+              </HStack>
+            </Box>
+            <HStack justify="between">
+              <Typography variant="small" className={macroConfig.protein.color}>
+                {Math.round(
+                  (summary.protein /
+                    (summary.protein + summary.carbs + summary.fat)) *
+                    100,
+                )}
+                % P
+              </Typography>
+              <Typography variant="small" className={macroConfig.carbs.color}>
+                {Math.round(
+                  (summary.carbs /
+                    (summary.protein + summary.carbs + summary.fat)) *
+                    100,
+                )}
+                % C
+              </Typography>
+              <Typography variant="small" className={macroConfig.fat.color}>
+                {Math.round(
+                  (summary.fat /
+                    (summary.protein + summary.carbs + summary.fat)) *
+                    100,
+                )}
+                % F
+              </Typography>
+            </HStack>
+          </VStack>
+        )}
+      </VStack>
+    </Card>
+  );
+};
+
+NutritionSummary.displayName = "NutritionSummary";

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

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProgressChart, ChartDataPoint } from "./ProgressChart";
+
+const meta: Meta<typeof ProgressChart> = {
+  title: "Blaz-Klemenc/Molecules/ProgressChart",
+  component: ProgressChart,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProgressChart>;
+
+// Generate sample data for weight progress
+const weightProgressData: ChartDataPoint[] = [
+  { date: "2024-01-01", value: 85, label: "Weight (kg)" },
+  { date: "2024-01-08", value: 84.5, label: "Weight (kg)" },
+  { date: "2024-01-15", value: 84, label: "Weight (kg)" },
+  { date: "2024-01-22", value: 83.2, label: "Weight (kg)" },
+  { date: "2024-01-29", value: 82.8, label: "Weight (kg)" },
+  { date: "2024-02-05", value: 82.5, label: "Weight (kg)" },
+];
+
+// Lift progress data
+const liftProgressData: ChartDataPoint[] = [
+  { date: "2024-01-01", value: 80, label: "Squat (kg)" },
+  { date: "2024-01-08", value: 85, label: "Squat (kg)" },
+  { date: "2024-01-15", value: 87.5, label: "Squat (kg)" },
+  { date: "2024-01-22", value: 90, label: "Squat (kg)" },
+  { date: "2024-01-29", value: 92.5, label: "Squat (kg)" },
+  { date: "2024-02-05", value: 95, label: "Squat (kg)" },
+];
+
+// Wellness score data
+const wellnessData: ChartDataPoint[] = [
+  { date: "2024-01-01", value: 7, label: "Wellness Score" },
+  { date: "2024-01-02", value: 6, label: "Wellness Score" },
+  { date: "2024-01-03", value: 8, label: "Wellness Score" },
+  { date: "2024-01-04", value: 7, label: "Wellness Score" },
+  { date: "2024-01-05", value: 9, label: "Wellness Score" },
+  { date: "2024-01-06", value: 8, label: "Wellness Score" },
+  { date: "2024-01-07", value: 7, label: "Wellness Score" },
+];
+
+export const Default: Story = {
+  args: {
+    data: weightProgressData,
+    metric: "Weight Progress",
+    unit: "kg",
+  },
+};
+
+export const LiftProgress: Story = {
+  args: {
+    data: liftProgressData,
+    metric: "Squat Progress",
+    unit: "kg",
+    chartType: "line",
+  },
+};
+
+export const BarChart: Story = {
+  args: {
+    data: wellnessData,
+    metric: "Weekly Wellness",
+    chartType: "bar",
+  },
+};
+
+export const WithUnit: Story = {
+  args: {
+    data: weightProgressData,
+    metric: "Body Weight",
+    unit: "kg",
+  },
+};
+
+export const WeekDateRange: Story = {
+  args: {
+    data: wellnessData,
+    metric: "Wellness Score",
+    dateRange: "week",
+  },
+};
+
+export const MonthDateRange: Story = {
+  args: {
+    data: liftProgressData,
+    metric: "Lift Tracking",
+    unit: "kg",
+    dateRange: "month",
+  },
+};
+
+export const WithDateSelector: Story = {
+  args: {
+    data: weightProgressData,
+    metric: "Weight Over Time",
+    unit: "kg",
+    showDateSelector: true,
+  },
+};
+
+export const EmptyData: Story = {
+  args: {
+    data: [],
+    metric: "No Data Yet",
+  },
+};
+
+export const SingleDataPoint: Story = {
+  args: {
+    data: [{ date: "2024-01-15", value: 85, label: "Starting Weight" }],
+    metric: "Initial Measurement",
+    unit: "kg",
+  },
+};