@almadar/cli 0.3.2 → 0.3.3

package/shells/typescript-shell/packages/client/src/clients/kflow/organisms/MindMapCanvas.stories.tsx

@@ -0,0 +1,256 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { MindMapCanvas } from "./MindMapCanvas";
+
+const meta: Meta<typeof MindMapCanvas> = {
+  title: "KFlow/Organisms/MindMapCanvas",
+  component: MindMapCanvas,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ height: "500px", width: "100%", padding: "20px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof MindMapCanvas>;
+
+// Sample mindmap content for stories
+const SampleContent = () => (
+  <>
+    {/* Root node */}
+    <g transform="translate(300, 200)">
+      <rect
+        x="-60"
+        y="-25"
+        width="120"
+        height="50"
+        rx="8"
+        fill="#8b5cf6"
+        stroke="#7c3aed"
+        strokeWidth="2"
+      />
+      <text
+        x="0"
+        y="5"
+        textAnchor="middle"
+        fill="white"
+        fontSize="14"
+        fontWeight="bold"
+      >
+        Main Topic
+      </text>
+    </g>
+
+    {/* Child nodes */}
+    <g transform="translate(150, 100)">
+      <rect
+        x="-50"
+        y="-20"
+        width="100"
+        height="40"
+        rx="6"
+        fill="#3b82f6"
+        stroke="#2563eb"
+        strokeWidth="1"
+      />
+      <text x="0" y="5" textAnchor="middle" fill="white" fontSize="12">
+        Subtopic A
+      </text>
+    </g>
+
+    <g transform="translate(450, 100)">
+      <rect
+        x="-50"
+        y="-20"
+        width="100"
+        height="40"
+        rx="6"
+        fill="#3b82f6"
+        stroke="#2563eb"
+        strokeWidth="1"
+      />
+      <text x="0" y="5" textAnchor="middle" fill="white" fontSize="12">
+        Subtopic B
+      </text>
+    </g>
+
+    <g transform="translate(150, 300)">
+      <rect
+        x="-50"
+        y="-20"
+        width="100"
+        height="40"
+        rx="6"
+        fill="#10b981"
+        stroke="#059669"
+        strokeWidth="1"
+      />
+      <text x="0" y="5" textAnchor="middle" fill="white" fontSize="12">
+        Subtopic C
+      </text>
+    </g>
+
+    <g transform="translate(450, 300)">
+      <rect
+        x="-50"
+        y="-20"
+        width="100"
+        height="40"
+        rx="6"
+        fill="#10b981"
+        stroke="#059669"
+        strokeWidth="1"
+      />
+      <text x="0" y="5" textAnchor="middle" fill="white" fontSize="12">
+        Subtopic D
+      </text>
+    </g>
+
+    {/* Connections */}
+    <path
+      d="M 240 200 Q 195 150 150 120"
+      fill="none"
+      stroke="#94a3b8"
+      strokeWidth="2"
+    />
+    <path
+      d="M 360 200 Q 405 150 450 120"
+      fill="none"
+      stroke="#94a3b8"
+      strokeWidth="2"
+    />
+    <path
+      d="M 240 200 Q 195 250 150 280"
+      fill="none"
+      stroke="#94a3b8"
+      strokeWidth="2"
+    />
+    <path
+      d="M 360 200 Q 405 250 450 280"
+      fill="none"
+      stroke="#94a3b8"
+      strokeWidth="2"
+    />
+  </>
+);
+
+export const Default: Story = {
+  args: {
+    width: 600,
+    height: 400,
+    enablePan: true,
+    enableZoom: true,
+    onZoomChange: action("UI:MINDMAP_ZOOM"),
+    onPanChange: action("UI:MINDMAP_PAN"),
+  },
+  render: (args) => (
+    <MindMapCanvas {...args}>
+      <SampleContent />
+    </MindMapCanvas>
+  ),
+};
+
+export const ZoomedIn: Story = {
+  args: {
+    width: 600,
+    height: 400,
+    initialZoom: 1.5,
+    enablePan: true,
+    enableZoom: true,
+  },
+  render: (args) => (
+    <MindMapCanvas {...args}>
+      <SampleContent />
+    </MindMapCanvas>
+  ),
+};
+
+export const ZoomedOut: Story = {
+  args: {
+    width: 600,
+    height: 400,
+    initialZoom: 0.5,
+    enablePan: true,
+    enableZoom: true,
+  },
+  render: (args) => (
+    <MindMapCanvas {...args}>
+      <SampleContent />
+    </MindMapCanvas>
+  ),
+};
+
+export const PanOnly: Story = {
+  args: {
+    width: 600,
+    height: 400,
+    enablePan: true,
+    enableZoom: false,
+  },
+  render: (args) => (
+    <MindMapCanvas {...args}>
+      <SampleContent />
+    </MindMapCanvas>
+  ),
+};
+
+export const ZoomOnly: Story = {
+  args: {
+    width: 600,
+    height: 400,
+    enablePan: false,
+    enableZoom: true,
+  },
+  render: (args) => (
+    <MindMapCanvas {...args}>
+      <SampleContent />
+    </MindMapCanvas>
+  ),
+};
+
+export const NoInteraction: Story = {
+  args: {
+    width: 600,
+    height: 400,
+    enablePan: false,
+    enableZoom: false,
+  },
+  render: (args) => (
+    <MindMapCanvas {...args}>
+      <SampleContent />
+    </MindMapCanvas>
+  ),
+};
+
+export const AutoSize: Story = {
+  args: {
+    enablePan: true,
+    enableZoom: true,
+  },
+  render: (args) => (
+    <MindMapCanvas {...args}>
+      <SampleContent />
+    </MindMapCanvas>
+  ),
+};
+
+export const Empty: Story = {
+  args: {
+    width: 600,
+    height: 400,
+  },
+  render: (args) => (
+    <MindMapCanvas {...args}>
+      <text x="300" y="200" textAnchor="middle" fill="#9ca3af" fontSize="14">
+        Click to add a node
+      </text>
+    </MindMapCanvas>
+  ),
+};

package/shells/typescript-shell/packages/client/src/clients/kflow/organisms/MindMapCanvas.tsx

@@ -0,0 +1,185 @@
+/**
+ * MindMapCanvas Organism Component
+ *
+ * SVG canvas container for mindmap visualization with pan and zoom support.
+ *
+ * Event Contract:
+ * - Emits: UI:MINDMAP_PAN { x, y }
+ * - Emits: UI:MINDMAP_ZOOM { zoom }
+ * - Emits: UI:MINDMAP_FOCUS
+ * - Emits: UI:MINDMAP_BLUR
+ * - entityAware: false
+ */
+
+import React, { useRef, useState, useCallback, useEffect } from "react";
+import { Box } from "../../../components/atoms/Box";
+import { useEventBus } from "../../../hooks/useEventBus";
+
+export interface MindMapCanvasProps {
+  /** Width of the canvas */
+  width?: number;
+  /** Height of the canvas */
+  height?: number;
+  /** Initial zoom level */
+  initialZoom?: number;
+  /** Minimum zoom level */
+  minZoom?: number;
+  /** Maximum zoom level */
+  maxZoom?: number;
+  /** Enable pan interaction */
+  enablePan?: boolean;
+  /** Enable zoom interaction */
+  enableZoom?: boolean;
+  /** Children to render in the SVG */
+  children?: React.ReactNode;
+  /** Callback when zoom changes */
+  onZoomChange?: (zoom: number) => void;
+  /** Callback when pan changes */
+  onPanChange?: (pan: { x: number; y: number }) => void;
+  /** Additional CSS classes */
+  className?: string;
+  // Entity-aware props (for schema compatibility)
+  /** Entity type */
+  entity?: string;
+  /** Data to display */
+  data?: Record<string, unknown> | unknown;
+  /** Actions available */
+  actions?: Array<{ label: string; event: string }>;
+  /** Fields to display */
+  displayFields?: string[];
+  /** Show learning goals */
+  showLearningGoals?: boolean;
+}
+
+export const MindMapCanvas: React.FC<MindMapCanvasProps> = ({
+  width,
+  height,
+  initialZoom = 1,
+  minZoom = 0.25,
+  maxZoom = 2,
+  enablePan = true,
+  enableZoom = true,
+  children,
+  onZoomChange,
+  onPanChange,
+  className,
+}) => {
+  const eventBus = useEventBus();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = useState({
+    width: width || 800,
+    height: height || 600,
+  });
+  const [isFocused, setIsFocused] = useState(false);
+  const [zoom, setZoom] = useState(initialZoom);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const [isPanning, setIsPanning] = useState(false);
+  const [panStart, setPanStart] = useState({ x: 0, y: 0 });
+
+  // Auto-size to container
+  useEffect(() => {
+    if (width && height) {
+      return;
+    }
+
+    const updateDimensions = () => {
+      if (containerRef.current) {
+        setDimensions({
+          width: containerRef.current.clientWidth || 800,
+          height: containerRef.current.clientHeight || 600,
+        });
+      }
+    };
+    updateDimensions();
+    window.addEventListener("resize", updateDimensions);
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, [width, height]);
+
+  // Handle wheel zoom
+  const handleWheel = useCallback(
+    (e: React.WheelEvent) => {
+      if (!enableZoom) return;
+      e.preventDefault();
+
+      const delta = e.deltaY > 0 ? 0.9 : 1.1;
+      const newZoom = Math.max(minZoom, Math.min(maxZoom, zoom * delta));
+
+      setZoom(newZoom);
+      eventBus.emit("UI:MINDMAP_ZOOM", { zoom: newZoom });
+      onZoomChange?.(newZoom);
+    },
+    [enableZoom, zoom, minZoom, maxZoom, eventBus, onZoomChange],
+  );
+
+  // Handle pan start
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (!enablePan || e.button !== 0) return;
+      setIsPanning(true);
+      setPanStart({ x: e.clientX - pan.x, y: e.clientY - pan.y });
+    },
+    [enablePan, pan],
+  );
+
+  // Handle pan move
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isPanning) return;
+      const newPan = { x: e.clientX - panStart.x, y: e.clientY - panStart.y };
+      setPan(newPan);
+      eventBus.emit("UI:MINDMAP_PAN", newPan);
+      onPanChange?.(newPan);
+    },
+    [isPanning, panStart, eventBus, onPanChange],
+  );
+
+  // Handle pan end
+  const handleMouseUp = useCallback(() => {
+    setIsPanning(false);
+  }, []);
+
+  // Handle focus
+  const handleFocus = useCallback(() => {
+    setIsFocused(true);
+    eventBus.emit("UI:MINDMAP_FOCUS", {});
+  }, [eventBus]);
+
+  // Handle blur
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    eventBus.emit("UI:MINDMAP_BLUR", {});
+  }, [eventBus]);
+
+  return (
+    <Box
+      ref={containerRef}
+      className={`flex-1 bg-gray-50 dark:bg-gray-800 rounded-lg transition-all duration-200 ${
+        isFocused
+          ? "border-2 border-blue-500 dark:border-blue-400 ring-2 ring-blue-200 dark:ring-blue-800"
+          : "border border-gray-200 dark:border-gray-700"
+      } ${className || ""}`}
+      tabIndex={0}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    >
+      <svg
+        width={dimensions.width}
+        height={dimensions.height}
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+        style={{
+          cursor: isPanning ? "grabbing" : enablePan ? "grab" : "default",
+        }}
+      >
+        <g transform={`translate(${pan.x}, ${pan.y}) scale(${zoom})`}>
+          {children}
+        </g>
+      </svg>
+    </Box>
+  );
+};
+
+MindMapCanvas.displayName = "MindMapCanvas";

package/shells/typescript-shell/packages/client/src/clients/kflow/organisms/NoteList.stories.tsx

@@ -0,0 +1,178 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { NoteList } from "./NoteList";
+import { NoteData } from "../molecules/NoteListItem";
+
+const meta: Meta<typeof NoteList> = {
+  title: "KFlow/Organisms/NoteList",
+  component: NoteList,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof NoteList>;
+
+const sampleNotes: NoteData[] = [
+  {
+    id: "note-1",
+    title: "Photosynthesis Overview",
+    content:
+      "The process by which plants convert light energy into chemical energy.",
+    tags: ["biology", "plants"],
+    level: 0,
+    hasChildren: true,
+    isExpanded: true,
+    updatedAt: "2024-01-15T10:30:00Z",
+  },
+  {
+    id: "note-2",
+    title: "Light Reactions",
+    content: "Occurs in the thylakoid membrane. Produces ATP and NADPH.",
+    tags: ["detail"],
+    level: 1,
+    hasChildren: false,
+    updatedAt: "2024-01-15T11:00:00Z",
+  },
+  {
+    id: "note-3",
+    title: "Calvin Cycle",
+    content: "Occurs in the stroma. Uses ATP and NADPH to fix CO2.",
+    tags: ["detail"],
+    level: 1,
+    hasChildren: false,
+    updatedAt: "2024-01-15T11:30:00Z",
+  },
+  {
+    id: "note-4",
+    title: "Cellular Respiration",
+    content: "The reverse process - converting glucose back to energy.",
+    tags: ["biology", "energy"],
+    level: 0,
+    hasChildren: false,
+    updatedAt: "2024-01-16T09:00:00Z",
+  },
+];
+
+export const Default: Story = {
+  args: {
+    notes: sampleNotes,
+    selectedNoteId: undefined,
+    onSelectNote: action("UI:SELECT_NOTE"),
+    onDeleteNote: action("UI:DELETE_NOTE"),
+    onEditNote: action("UI:EDIT_NOTE"),
+    onToggleExpand: action("UI:EXPAND_NOTE"),
+    onAddChild: action("UI:ADD_CHILD_NOTE"),
+  },
+};
+
+export const WithSelection: Story = {
+  args: {
+    notes: sampleNotes,
+    selectedNoteId: "note-2",
+    onSelectNote: action("UI:SELECT_NOTE"),
+    onDeleteNote: action("UI:DELETE_NOTE"),
+    onEditNote: action("UI:EDIT_NOTE"),
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    notes: [],
+    isLoading: true,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    notes: [],
+    error: new globalThis.Error("Failed to load notes. Please try again."),
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    notes: [],
+    emptyMessage:
+      "No notes found. Click the button above to create your first note!",
+  },
+};
+
+export const FlatList: Story = {
+  args: {
+    notes: [
+      {
+        id: "flat-1",
+        title: "First Note",
+        content: "This is the first note in a flat list.",
+        tags: ["general"],
+        level: 0,
+      },
+      {
+        id: "flat-2",
+        title: "Second Note",
+        content: "This is the second note.",
+        tags: ["general"],
+        level: 0,
+      },
+      {
+        id: "flat-3",
+        title: "Third Note",
+        content: "This is the third note.",
+        tags: ["general"],
+        level: 0,
+      },
+    ],
+    onSelectNote: action("UI:SELECT_NOTE"),
+  },
+};
+
+export const ManyNotes: Story = {
+  args: {
+    notes: Array.from({ length: 10 }, (_, i) => ({
+      id: `note-${i}`,
+      title: `Note ${i + 1}`,
+      content: `This is the content of note ${i + 1}. It contains some sample text.`,
+      tags: i % 2 === 0 ? ["even"] : ["odd"],
+      level: 0,
+      hasChildren: false,
+      updatedAt: new Date(Date.now() - i * 86400000).toISOString(),
+    })),
+    onSelectNote: action("UI:SELECT_NOTE"),
+    onDeleteNote: action("UI:DELETE_NOTE"),
+  },
+};
+
+export const ShowFullContent: Story = {
+  args: {
+    notes: [
+      {
+        id: "long-1",
+        title: "Detailed Notes",
+        content: `# Photosynthesis
+
+Photosynthesis is the process used by plants, algae, and certain bacteria to convert light energy into chemical energy.
+
+## Key Components
+- Chlorophyll (green pigment)
+- Water (H2O)
+- Carbon dioxide (CO2)
+- Sunlight
+
+## The Process
+1. Light absorption by chlorophyll
+2. Water splitting (photolysis)
+3. Carbon fixation (Calvin cycle)
+
+## Equation
+6CO2 + 6H2O + light → C6H12O6 + 6O2`,
+        tags: ["biology", "comprehensive"],
+        level: 0,
+      },
+    ],
+    showFullContent: true,
+    onSelectNote: action("UI:SELECT_NOTE"),
+  },
+};