@almadar/cli 0.3.2 → 1.0.3

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/NoteContent.tsx

@@ -0,0 +1,163 @@
+/**
+ * NoteContent Molecule Component
+ *
+ * Editable content area for notes with click-to-edit functionality.
+ *
+ * Event Contract:
+ * - Emits: UI:EDIT_NOTE_CONTENT { noteId }
+ * - Emits: UI:SAVE_NOTE_CONTENT { noteId, content }
+ * - entityAware: true
+ */
+
+import React, { useState, useRef, useEffect } from "react";
+import { Box } from "../../../components/atoms/Box";
+import { Textarea } from "../../../components/atoms/Textarea";
+import { Typography } from "../../../components/atoms/Typography";
+import { useEventBus } from "../../../hooks/useEventBus";
+
+export interface NoteContentProps {
+  /** Note ID */
+  noteId: string;
+  /** Current content value */
+  content: string;
+  /** Whether the content is being edited */
+  isEditing?: boolean;
+  /** Show full content or truncated preview */
+  showFullContent?: boolean;
+  /** Maximum characters to show in preview */
+  previewLength?: number;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Number of rows for textarea */
+  rows?: number;
+  /** Callback when content changes */
+  onChange?: (content: string) => void;
+  /** Callback when editing starts */
+  onStartEditing?: () => void;
+  /** Callback when editing ends (save) */
+  onSave?: (content: string) => void;
+  /** Callback when editing is cancelled */
+  onCancel?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const NoteContent: React.FC<NoteContentProps> = ({
+  noteId,
+  content,
+  isEditing: externalIsEditing,
+  showFullContent = false,
+  previewLength = 100,
+  placeholder = "Add your notes here...",
+  rows = 4,
+  onChange,
+  onStartEditing,
+  onSave,
+  onCancel,
+  className,
+}) => {
+  const eventBus = useEventBus();
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [internalEditing, setInternalEditing] = useState(false);
+  const [editValue, setEditValue] = useState(content);
+
+  const isEditing = externalIsEditing ?? internalEditing;
+
+  // Reset edit value when content changes externally
+  useEffect(() => {
+    if (!isEditing) {
+      setEditValue(content);
+    }
+  }, [content, isEditing]);
+
+  // Focus textarea when editing starts
+  useEffect(() => {
+    if (isEditing && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [isEditing]);
+
+  const handleStartEditing = () => {
+    setInternalEditing(true);
+    setEditValue(content);
+    eventBus.emit("UI:EDIT_NOTE_CONTENT", { noteId, entity: "Note" });
+    onStartEditing?.();
+  };
+
+  const handleSave = () => {
+    setInternalEditing(false);
+    eventBus.emit("UI:SAVE_NOTE_CONTENT", {
+      noteId,
+      content: editValue,
+      entity: "Note",
+    });
+    onSave?.(editValue);
+  };
+
+  const handleCancel = () => {
+    setInternalEditing(false);
+    setEditValue(content);
+    onCancel?.();
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    setEditValue(newValue);
+    onChange?.(newValue);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      handleCancel();
+    } else if (e.key === "Enter" && e.ctrlKey) {
+      e.preventDefault();
+      handleSave();
+    }
+  };
+
+  // Editing mode
+  if (isEditing) {
+    return (
+      <Box className={className} onClick={(e) => e.stopPropagation()}>
+        <Textarea
+          ref={textareaRef}
+          value={editValue}
+          onChange={handleChange}
+          onBlur={handleSave}
+          onKeyDown={handleKeyDown}
+          rows={rows}
+          placeholder={placeholder}
+          className="w-full border-2 border-blue-500 focus:ring-2 focus:ring-blue-200"
+        />
+        <Typography variant="small" className="text-gray-400 mt-1">
+          Ctrl+Enter to save, Esc to cancel
+        </Typography>
+      </Box>
+    );
+  }
+
+  // Display mode
+  const displayContent = showFullContent
+    ? content || "No content"
+    : content.length > previewLength
+      ? `${content.substring(0, previewLength)}...`
+      : content || "No content";
+
+  return (
+    <Box
+      className={`cursor-pointer hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded px-2 py-1 transition-colors ${className || ""}`}
+      onClick={handleStartEditing}
+      title="Click to edit content"
+    >
+      <Typography
+        variant="body"
+        className={`${content ? "text-gray-700 dark:text-gray-300" : "text-gray-400 italic"}`}
+      >
+        {displayContent}
+      </Typography>
+    </Box>
+  );
+};
+
+NoteContent.displayName = "NoteContent";

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/NoteListItem.stories.tsx

@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { NoteListItem, NoteData } from "./NoteListItem";
+
+const meta: Meta<typeof NoteListItem> = {
+  title: "KFlow/Molecules/NoteListItem",
+  component: NoteListItem,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof NoteListItem>;
+
+const sampleNote: NoteData = {
+  id: "note-1",
+  title: "Introduction to Photosynthesis",
+  content:
+    "Photosynthesis is the process by which plants convert light energy into chemical energy. This is fundamental to life on Earth.",
+  tags: ["biology", "plants", "energy"],
+  level: 0,
+  isExpanded: true,
+  hasChildren: false,
+  updatedAt: "2024-01-15T10:30:00Z",
+};
+
+export const Default: Story = {
+  args: {
+    note: sampleNote,
+    isSelected: false,
+    onSelect: action("UI:SELECT_NOTE"),
+    onDelete: action("UI:DELETE_NOTE"),
+    onEdit: action("UI:EDIT_NOTE"),
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    note: sampleNote,
+    isSelected: true,
+    onSelect: action("UI:SELECT_NOTE"),
+    onDelete: action("UI:DELETE_NOTE"),
+    onEdit: action("UI:EDIT_NOTE"),
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    note: {
+      ...sampleNote,
+      hasChildren: true,
+      isExpanded: true,
+    },
+    isSelected: false,
+    onSelect: action("UI:SELECT_NOTE"),
+    onToggleExpand: action("UI:EXPAND_NOTE"),
+    onAddChild: action("UI:ADD_CHILD_NOTE"),
+  },
+  render: (args) => (
+    <NoteListItem {...args}>
+      <NoteListItem
+        note={{
+          id: "child-1",
+          title: "Light Reactions",
+          content: "The first stage of photosynthesis occurs in the thylakoid.",
+          tags: ["detail"],
+          level: 1,
+        }}
+        depth={1}
+        onSelect={action("UI:SELECT_NOTE")}
+      />
+      <NoteListItem
+        note={{
+          id: "child-2",
+          title: "Calvin Cycle",
+          content: "The second stage occurs in the stroma.",
+          tags: ["detail"],
+          level: 1,
+        }}
+        depth={1}
+        onSelect={action("UI:SELECT_NOTE")}
+      />
+    </NoteListItem>
+  ),
+};
+
+export const Collapsed: Story = {
+  args: {
+    note: {
+      ...sampleNote,
+      hasChildren: true,
+      isExpanded: false,
+    },
+    isSelected: false,
+    onToggleExpand: action("UI:EXPAND_NOTE"),
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    note: {
+      ...sampleNote,
+      content:
+        "This is a much longer note content that demonstrates how the component handles text that exceeds the preview limit. The content will be truncated in the default view mode and only show the first 100 characters followed by an ellipsis to indicate there is more content available.",
+    },
+    showFullContent: false,
+    onSelect: action("UI:SELECT_NOTE"),
+  },
+};
+
+export const FullContent: Story = {
+  args: {
+    note: {
+      ...sampleNote,
+      content:
+        "This is a much longer note content that demonstrates how the component handles text when showFullContent is true. All of the content will be displayed without truncation.",
+    },
+    showFullContent: true,
+    onSelect: action("UI:SELECT_NOTE"),
+  },
+};
+
+export const NoTags: Story = {
+  args: {
+    note: {
+      ...sampleNote,
+      tags: [],
+    },
+    onSelect: action("UI:SELECT_NOTE"),
+  },
+};
+
+export const ManyTags: Story = {
+  args: {
+    note: {
+      ...sampleNote,
+      tags: ["biology", "plants", "energy", "chlorophyll", "glucose", "oxygen", "carbon-dioxide"],
+    },
+    onSelect: action("UI:SELECT_NOTE"),
+  },
+};
+
+export const EmptyContent: Story = {
+  args: {
+    note: {
+      ...sampleNote,
+      content: "",
+    },
+    onSelect: action("UI:SELECT_NOTE"),
+  },
+};
+
+export const NestedHierarchy: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <NoteListItem
+        note={{
+          id: "root",
+          title: "Root Note",
+          content: "This is the top level note.",
+          hasChildren: true,
+          isExpanded: true,
+        }}
+        depth={0}
+        onSelect={action("select-root")}
+        onToggleExpand={action("expand-root")}
+      >
+        <NoteListItem
+          note={{
+            id: "level-1",
+            title: "Level 1 Note",
+            content: "First level child.",
+            hasChildren: true,
+            isExpanded: true,
+          }}
+          depth={1}
+          onSelect={action("select-level-1")}
+          onToggleExpand={action("expand-level-1")}
+        >
+          <NoteListItem
+            note={{
+              id: "level-2",
+              title: "Level 2 Note",
+              content: "Second level child.",
+              hasChildren: false,
+            }}
+            depth={2}
+            onSelect={action("select-level-2")}
+          />
+        </NoteListItem>
+      </NoteListItem>
+    </div>
+  ),
+};

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/NoteListItem.tsx

@@ -0,0 +1,239 @@
+/**
+ * NoteListItem Molecule Component
+ *
+ * A single note item in a hierarchical note list with expand/collapse,
+ * inline editing, and action buttons.
+ *
+ * Event Contract:
+ * - Emits: UI:SELECT_NOTE { noteId }
+ * - Emits: UI:DELETE_NOTE { noteId }
+ * - Emits: UI:EDIT_NOTE { noteId, field }
+ * - Emits: UI:EXPAND_NOTE { noteId, expanded }
+ * - Emits: UI:ADD_CHILD_NOTE { parentNoteId }
+ * - entityAware: true
+ */
+
+import React, { useState } from "react";
+import {
+  ChevronDown,
+  ChevronRight,
+  Edit2,
+  Trash2,
+  Plus,
+  Tag,
+} from "lucide-react";
+import { Box } from "../../../components/atoms/Box";
+import { Button } from "../../../components/atoms/Button";
+import { Badge } from "../../../components/atoms/Badge";
+import { Typography } from "../../../components/atoms/Typography";
+import { Icon } from "../../../components/atoms/Icon";
+import { Card } from "../../../components/atoms/Card";
+import { HStack, VStack } from "../../../components/atoms/Stack";
+import { useEventBus } from "../../../hooks/useEventBus";
+
+export interface NoteData {
+  id: string;
+  title: string;
+  content: string;
+  tags?: string[];
+  level?: number;
+  isExpanded?: boolean;
+  hasChildren?: boolean;
+  createdAt?: string;
+  updatedAt?: string;
+}
+
+export interface NoteListItemProps {
+  /** Note data */
+  note: NoteData;
+  /** Whether this note is selected */
+  isSelected?: boolean;
+  /** Depth level for indentation */
+  depth?: number;
+  /** Show full content or truncated */
+  showFullContent?: boolean;
+  /** Callback when note is selected */
+  onSelect?: (note: NoteData) => void;
+  /** Callback when note is deleted */
+  onDelete?: (noteId: string) => void;
+  /** Callback when edit is requested */
+  onEdit?: (note: NoteData) => void;
+  /** Callback when expand/collapse is toggled */
+  onToggleExpand?: (noteId: string) => void;
+  /** Callback when add child is clicked */
+  onAddChild?: (parentNoteId: string) => void;
+  /** Children notes to render */
+  children?: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const NoteListItem: React.FC<NoteListItemProps> = ({
+  note,
+  isSelected = false,
+  depth = 0,
+  showFullContent = false,
+  onSelect,
+  onDelete,
+  onEdit,
+  onToggleExpand,
+  onAddChild,
+  children,
+  className,
+}) => {
+  const eventBus = useEventBus();
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleSelect = () => {
+    eventBus.emit("UI:SELECT_NOTE", { noteId: note.id, entity: "Note" });
+    onSelect?.(note);
+  };
+
+  const handleDelete = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    eventBus.emit("UI:DELETE_NOTE", { noteId: note.id, entity: "Note" });
+    onDelete?.(note.id);
+  };
+
+  const handleEdit = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    eventBus.emit("UI:EDIT_NOTE", { noteId: note.id, entity: "Note" });
+    onEdit?.(note);
+  };
+
+  const handleToggleExpand = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    eventBus.emit("UI:EXPAND_NOTE", {
+      noteId: note.id,
+      expanded: !note.isExpanded,
+    });
+    onToggleExpand?.(note.id);
+  };
+
+  const handleAddChild = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    eventBus.emit("UI:ADD_CHILD_NOTE", {
+      parentNoteId: note.id,
+      entity: "Note",
+    });
+    onAddChild?.(note.id);
+  };
+
+  const contentPreview = showFullContent
+    ? note.content
+    : note.content.length > 100
+      ? `${note.content.substring(0, 100)}...`
+      : note.content;
+
+  return (
+    <Box style={{ marginLeft: depth * 24 }}>
+      <Card
+        className={`transition-all duration-200 ${
+          isSelected
+            ? "border-2 border-indigo-500 bg-indigo-50 dark:bg-indigo-900/20 shadow-md"
+            : "border border-gray-200 dark:border-gray-700 hover:border-gray-300 hover:shadow-sm"
+        } ${className || ""}`}
+        onClick={handleSelect}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <Box className="p-4">
+          <VStack gap="sm">
+            {/* Header row */}
+            <HStack justify="between" align="center">
+              <HStack gap="sm" align="center">
+                {/* Expand/Collapse button */}
+                {note.hasChildren && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleToggleExpand}
+                    className="p-1"
+                  >
+                    <Icon
+                      icon={note.isExpanded ? ChevronDown : ChevronRight}
+                      size="sm"
+                    />
+                  </Button>
+                )}
+
+                {/* Title */}
+                <Typography
+                  variant="h4"
+                  className={`font-medium ${isSelected ? "text-indigo-900 dark:text-indigo-100" : ""}`}
+                >
+                  {note.title}
+                </Typography>
+              </HStack>
+
+              {/* Action buttons */}
+              {isHovered && (
+                <HStack gap="xs">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleEdit}
+                    title="Edit"
+                  >
+                    <Icon icon={Edit2} size="sm" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleAddChild}
+                    title="Add child note"
+                  >
+                    <Icon icon={Plus} size="sm" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={handleDelete}
+                    title="Delete"
+                    className="text-red-500 hover:text-red-700"
+                  >
+                    <Icon icon={Trash2} size="sm" />
+                  </Button>
+                </HStack>
+              )}
+            </HStack>
+
+            {/* Content preview */}
+            {note.content && (
+              <Typography
+                variant="body"
+                className="text-gray-600 dark:text-gray-400"
+              >
+                {contentPreview}
+              </Typography>
+            )}
+
+            {/* Tags */}
+            {note.tags && note.tags.length > 0 && (
+              <HStack gap="xs" className="flex-wrap">
+                <Icon icon={Tag} size="sm" className="text-gray-400" />
+                {note.tags.map((tag) => (
+                  <Badge key={tag} variant="default" size="sm">
+                    {tag}
+                  </Badge>
+                ))}
+              </HStack>
+            )}
+
+            {/* Metadata */}
+            {note.updatedAt && (
+              <Typography variant="small" className="text-gray-400">
+                Updated: {new Date(note.updatedAt).toLocaleDateString()}
+              </Typography>
+            )}
+          </VStack>
+        </Box>
+      </Card>
+
+      {/* Children notes */}
+      {note.isExpanded && children && <Box className="mt-2">{children}</Box>}
+    </Box>
+  );
+};
+
+NoteListItem.displayName = "NoteListItem";

package/shells/typescript-shell/packages/client/src/clients/kflow/molecules/QuizBlock.tsx

@@ -0,0 +1,3 @@
+// Re-export from learning directory for compatibility with generated code
+export { QuizBlock } from "./learning/QuizBlock";
+export type { QuizBlockProps } from "./learning/QuizBlock";