@almadar/cli 0.3.2 → 1.0.3

package/shells/typescript-shell/packages/client/src/clients/inspection-system/atoms/LawReferenceBadge.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { LawReferenceBadge } from "./LawReferenceBadge";
+
+const meta: Meta<typeof LawReferenceBadge> = {
+  title: "Clients/Inspection-System/Atoms/LawReferenceBadge",
+  component: LawReferenceBadge,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof LawReferenceBadge>;
+
+export const Default: Story = {
+  args: {
+    gazette: "2023/45",
+    article: "12",
+  },
+};
+
+export const GazetteOnly: Story = {
+  args: {
+    gazette: "2023/45",
+  },
+};
+
+export const ArticleOnly: Story = {
+  args: {
+    article: "Article 15, Section 3",
+  },
+};
+
+export const FullReference: Story = {
+  args: {
+    reference: "Law 45/2023, Art. 12, Para. 3",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    gazette: "2023/45",
+    article: "12",
+    size: "sm",
+  },
+};
+
+export const Large: Story = {
+  args: {
+    gazette: "2023/45",
+    article: "12",
+    size: "lg",
+  },
+};
+
+export const NoIcon: Story = {
+  args: {
+    gazette: "2023/45",
+    article: "12",
+    showIcon: false,
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    gazette: "2023/45",
+    article: "12",
+    clickable: true,
+    onClick: () => alert("Badge clicked!"),
+  },
+};

package/shells/typescript-shell/packages/client/src/clients/inspection-system/atoms/LawReferenceBadge.tsx

@@ -0,0 +1,87 @@
+/**
+ * LawReferenceBadge
+ *
+ * Displays a legal reference badge with gazette number and article.
+ * Used throughout the inspection system to reference legal requirements.
+ *
+ * Event Contract:
+ * - Emits: none (display only)
+ * - entityAware: true
+ */
+
+import React 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 { Badge } from "../../../components/atoms/Badge";
+import { Scale, BookOpen } from "lucide-react";
+
+export interface LawReferenceBadgeProps {
+  /** Official Gazette number */
+  gazette?: string;
+  /** Article reference */
+  article?: string;
+  /** Full law reference text */
+  reference?: string;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Show icon */
+  showIcon?: boolean;
+  /** Clickable - opens reference details */
+  clickable?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Click handler */
+  onClick?: () => void;
+}
+
+const sizeConfig = {
+  sm: { text: "text-xs", icon: "h-3 w-3", padding: "px-1.5 py-0.5" },
+  md: { text: "text-sm", icon: "h-4 w-4", padding: "px-2 py-1" },
+  lg: { text: "text-base", icon: "h-5 w-5", padding: "px-3 py-1.5" },
+};
+
+export const LawReferenceBadge: React.FC<LawReferenceBadgeProps> = ({
+  gazette,
+  article,
+  reference,
+  size = "md",
+  showIcon = true,
+  clickable = false,
+  className,
+  onClick,
+}) => {
+  const sizes = sizeConfig[size];
+
+  // Build display text
+  const displayText = reference || (gazette && article)
+    ? `${gazette ? `OG ${gazette}` : ""}${gazette && article ? " - " : ""}${article ? `Art. ${article}` : ""}`
+    : reference || "No reference";
+
+  return (
+    <Box
+      display="inline-flex"
+      rounded="md"
+      border
+      className={cn(
+        "items-center gap-1.5 bg-slate-50 border-slate-200",
+        sizes.padding,
+        clickable && "cursor-pointer hover:bg-slate-100 transition-colors",
+        className
+      )}
+      onClick={clickable ? onClick : undefined}
+      role={clickable ? "button" : undefined}
+      tabIndex={clickable ? 0 : undefined}
+    >
+      {showIcon && (
+        <Scale className={cn(sizes.icon, "text-slate-500")} />
+      )}
+      <Typography variant="small" className={cn(sizes.text, "font-medium text-slate-700")}>
+        {displayText}
+      </Typography>
+    </Box>
+  );
+};
+
+LawReferenceBadge.displayName = "LawReferenceBadge";

package/shells/typescript-shell/packages/client/src/clients/inspection-system/atoms/PhaseIndicator.stories.tsx

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PhaseIndicator } from "./PhaseIndicator";
+import { HStack, VStack } from "../../../components/atoms/Stack";
+
+const meta: Meta<typeof PhaseIndicator> = {
+  title: "Clients/Inspection-System/Atoms/PhaseIndicator",
+  component: PhaseIndicator,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    phase: {
+      control: "select",
+      options: ["preparation", "execution", "documentation", "review", "completed", "cancelled"],
+    },
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PhaseIndicator>;
+
+export const Preparation: Story = {
+  args: {
+    phase: "preparation",
+  },
+};
+
+export const Execution: Story = {
+  args: {
+    phase: "execution",
+  },
+};
+
+export const Documentation: Story = {
+  args: {
+    phase: "documentation",
+  },
+};
+
+export const Review: Story = {
+  args: {
+    phase: "review",
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    phase: "completed",
+  },
+};
+
+export const Cancelled: Story = {
+  args: {
+    phase: "cancelled",
+  },
+};
+
+export const AllPhases: Story = {
+  render: () => (
+    <VStack gap="md">
+      <PhaseIndicator phase="preparation" />
+      <PhaseIndicator phase="execution" />
+      <PhaseIndicator phase="documentation" />
+      <PhaseIndicator phase="review" />
+      <PhaseIndicator phase="completed" />
+      <PhaseIndicator phase="cancelled" />
+    </VStack>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <HStack gap="md" align="center">
+      <PhaseIndicator phase="execution" size="sm" />
+      <PhaseIndicator phase="execution" size="md" />
+      <PhaseIndicator phase="execution" size="lg" />
+    </HStack>
+  ),
+};
+
+export const IconOnly: Story = {
+  args: {
+    phase: "execution",
+    showLabel: false,
+  },
+};

package/shells/typescript-shell/packages/client/src/clients/inspection-system/atoms/PhaseIndicator.tsx

@@ -0,0 +1,142 @@
+/**
+ * PhaseIndicator
+ *
+ * Shows the current phase of an inspection process.
+ * Phases: preparation, execution, documentation, review, completed
+ *
+ * Event Contract:
+ * - Emits: none (display only)
+ * - entityAware: true
+ */
+
+import React 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 { Badge } from "../../../components/atoms/Badge";
+import {
+  ClipboardList,
+  Play,
+  FileText,
+  CheckCircle,
+  Flag,
+  Clock,
+} from "lucide-react";
+
+export type InspectionPhase =
+  | "preparation"
+  | "execution"
+  | "documentation"
+  | "review"
+  | "completed"
+  | "cancelled";
+
+export interface PhaseIndicatorProps {
+  /** Current inspection phase */
+  phase: InspectionPhase;
+  /** Show label text */
+  showLabel?: boolean;
+  /** Size variant */
+  size?: "sm" | "md" | "lg";
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const phaseConfig: Record<
+  InspectionPhase,
+  {
+    icon: typeof ClipboardList;
+    color: string;
+    bgColor: string;
+    borderColor: string;
+    label: string;
+  }
+> = {
+  preparation: {
+    icon: ClipboardList,
+    color: "text-blue-600",
+    bgColor: "bg-blue-50",
+    borderColor: "border-blue-200",
+    label: "Preparation",
+  },
+  execution: {
+    icon: Play,
+    color: "text-amber-600",
+    bgColor: "bg-amber-50",
+    borderColor: "border-amber-200",
+    label: "In Progress",
+  },
+  documentation: {
+    icon: FileText,
+    color: "text-purple-600",
+    bgColor: "bg-purple-50",
+    borderColor: "border-purple-200",
+    label: "Documentation",
+  },
+  review: {
+    icon: Clock,
+    color: "text-orange-600",
+    bgColor: "bg-orange-50",
+    borderColor: "border-orange-200",
+    label: "Under Review",
+  },
+  completed: {
+    icon: CheckCircle,
+    color: "text-green-600",
+    bgColor: "bg-green-50",
+    borderColor: "border-green-200",
+    label: "Completed",
+  },
+  cancelled: {
+    icon: Flag,
+    color: "text-red-600",
+    bgColor: "bg-red-50",
+    borderColor: "border-red-200",
+    label: "Cancelled",
+  },
+};
+
+const sizeConfig = {
+  sm: { icon: "h-3 w-3", text: "text-xs", padding: "px-2 py-0.5" },
+  md: { icon: "h-4 w-4", text: "text-sm", padding: "px-2.5 py-1" },
+  lg: { icon: "h-5 w-5", text: "text-base", padding: "px-3 py-1.5" },
+};
+
+export const PhaseIndicator: React.FC<PhaseIndicatorProps> = ({
+  phase,
+  showLabel = true,
+  size = "md",
+  className,
+}) => {
+  const config = phaseConfig[phase];
+  const sizes = sizeConfig[size];
+  const Icon = config.icon;
+
+  return (
+    <Box
+      display="inline-flex"
+      rounded="full"
+      border
+      className={cn(
+        "items-center gap-1.5",
+        config.bgColor,
+        config.borderColor,
+        sizes.padding,
+        className
+      )}
+    >
+      <Icon className={cn(sizes.icon, config.color)} />
+      {showLabel && (
+        <Typography
+          variant="small"
+          className={cn(sizes.text, "font-medium", config.color)}
+        >
+          {config.label}
+        </Typography>
+      )}
+    </Box>
+  );
+};
+
+PhaseIndicator.displayName = "PhaseIndicator";

package/shells/typescript-shell/packages/client/src/clients/inspection-system/atoms/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Inspection System Atoms
+ *
+ * Basic building blocks for the inspection system design system.
+ */
+
+export { LawReferenceBadge, type LawReferenceBadgeProps } from "./LawReferenceBadge";
+export { PhaseIndicator, type PhaseIndicatorProps, type InspectionPhase } from "./PhaseIndicator";

package/shells/typescript-shell/packages/client/src/clients/inspection-system/configs/index.ts

@@ -0,0 +1,79 @@
+/**
+ * Inspection System Form Configs
+ *
+ * These configs define the structure of each inspection form tab.
+ * They are parsed from the client's specification documents and
+ * drive the dynamic form rendering in the InspectionFormDemoTemplate.
+ *
+ * Source: projects/inspection-system/config/tabs/
+ */
+
+import T001 from "./tabs/T-001-uvod";
+import T002 from "./tabs/T-002-podjetje";
+import T003 from "./tabs/T-003-udelezenci";
+import T004 from "./tabs/T-004-izbira-podrocja";
+import T005 from "./tabs/T-005-trgovina";
+import T2_1 from "./tabs/T2-1-oznacevanje-cen";
+import T006 from "./tabs/T-006-ugotovitve";
+import T007 from "./tabs/T-007-odlocbe";
+import T008 from "./tabs/T-008-pripombe";
+import T009 from "./tabs/T-009-zakljucek";
+
+import type { FormTabConfig } from "../templates/InspectionFormDemoTemplate";
+
+// Export individual configs
+export const configs = {
+  "T-001": T001 as unknown as FormTabConfig,
+  "T-002": T002 as unknown as FormTabConfig,
+  "T-003": T003 as unknown as FormTabConfig,
+  "T-004": T004 as unknown as FormTabConfig,
+  "T-005": T005 as unknown as FormTabConfig,
+  "T2-1": T2_1 as unknown as FormTabConfig,
+  "T-006": T006 as unknown as FormTabConfig,
+  "T-007": T007 as unknown as FormTabConfig,
+  "T-008": T008 as unknown as FormTabConfig,
+  "T-009": T009 as unknown as FormTabConfig,
+};
+
+// Export by phase for convenience
+export const introductionConfigs = {
+  "T-001": configs["T-001"],
+  "T-002": configs["T-002"],
+  "T-003": configs["T-003"],
+  "T-004": configs["T-004"],
+};
+
+export const contentConfigs = {
+  "T-005": configs["T-005"],
+  "T2-1": configs["T2-1"],
+};
+
+export const preparationConfigs = {
+  "T-006": configs["T-006"],
+  "T-007": configs["T-007"],
+};
+
+export const recordConfigs = {
+  "T-008": configs["T-008"],
+};
+
+export const closingConfigs = {
+  "T-009": configs["T-009"],
+};
+
+// Export all configs as a single object
+export default configs;
+
+// Re-export raw JSON for direct access
+export {
+  T001,
+  T002,
+  T003,
+  T004,
+  T005,
+  T2_1,
+  T006,
+  T007,
+  T008,
+  T009,
+};