@hydralms/components 0.2.0 → 0.3.1

package/src/sections/ContentAuthoringStudio/block-editor-item.tsx

@@ -0,0 +1,487 @@
+import { memo, useCallback } from "react";
+import {
+  GripVertical,
+  ChevronDown,
+  ChevronRight,
+  Trash2,
+  Copy,
+} from "lucide-react";
+import { Button } from "../../ui/button";
+import { Input } from "../../ui/input";
+import { Badge } from "../../ui/badge";
+import { RichTextEditor } from "../../ui/rich-text-editor";
+import { Separator } from "../../ui/separator";
+import { cn } from "../../lib/utils";
+import type { LessonBlock } from "../../content/types";
+import type { AuthoringBlock } from "./types";
+import { getBlockIcon, getBlockLabel } from "./block-type-picker";
+
+interface BlockEditorItemProps {
+  item: AuthoringBlock;
+  onChange: (id: string, block: LessonBlock) => void;
+  onRemove: (id: string) => void;
+  onDuplicate: (id: string) => void;
+  onToggleCollapse: (id: string) => void;
+  dragProps: Record<string, unknown>;
+  isDragging: boolean;
+  isDragOver: boolean;
+}
+
+export const BlockEditorItem = memo(function BlockEditorItem({
+  item,
+  onChange,
+  onRemove,
+  onDuplicate,
+  onToggleCollapse,
+  dragProps,
+  isDragging,
+  isDragOver,
+}: BlockEditorItemProps) {
+  const { id, block, collapsed } = item;
+  const Icon = getBlockIcon(block.type);
+  const label = getBlockLabel(block.type);
+
+  const handleChange = useCallback(
+    (updated: LessonBlock) => onChange(id, updated),
+    [id, onChange],
+  );
+  const handleRemove = useCallback(() => onRemove(id), [id, onRemove]);
+  const handleDuplicate = useCallback(() => onDuplicate(id), [id, onDuplicate]);
+  const handleToggle = useCallback(() => onToggleCollapse(id), [id, onToggleCollapse]);
+
+  return (
+    <div
+      {...dragProps}
+      className={cn(
+        "group rounded-lg border border-border bg-background transition-all",
+        isDragging && "opacity-50",
+        isDragOver && "border-primary shadow-sm",
+      )}
+    >
+      {/* Header bar */}
+      <div className="flex items-center gap-1 px-2 py-1.5 border-b border-border/50">
+        <span
+          className="cursor-grab text-muted-foreground/50 hover:text-muted-foreground"
+          aria-label="Drag to reorder"
+        >
+          <GripVertical className="size-4" />
+        </span>
+
+        <button
+          type="button"
+          onClick={handleToggle}
+          className="text-muted-foreground hover:text-foreground p-0.5"
+        >
+          {collapsed ? (
+            <ChevronRight className="size-3.5" />
+          ) : (
+            <ChevronDown className="size-3.5" />
+          )}
+        </button>
+
+        <Badge variant="secondary" className="text-[10px] gap-1 px-1.5 py-0">
+          <Icon className="size-3" />
+          {label}
+        </Badge>
+
+        <div className="flex-1" />
+
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleDuplicate}
+          className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 text-muted-foreground"
+        >
+          <Copy className="size-3" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleRemove}
+          className="h-6 w-6 p-0 opacity-0 group-hover:opacity-100 text-destructive"
+        >
+          <Trash2 className="size-3" />
+        </Button>
+      </div>
+
+      {/* Editor body */}
+      {!collapsed && (
+        <div className="p-3">
+          <BlockEditor block={block} onChange={handleChange} />
+        </div>
+      )}
+    </div>
+  );
+});
+
+/* ── Per-type editors ──────────────────────────────────── */
+
+function BlockEditor({
+  block,
+  onChange,
+}: {
+  block: LessonBlock;
+  onChange: (block: LessonBlock) => void;
+}) {
+  switch (block.type) {
+    case "richtext":
+      return (
+        <RichTextEditor
+          value={block.html}
+          onChange={(html) => onChange({ ...block, html })}
+          placeholder="Write your content..."
+        />
+      );
+
+    case "heading":
+      return (
+        <div className="flex gap-2">
+          <select
+            value={block.level ?? 2}
+            onChange={(e) =>
+              onChange({ ...block, level: Number(e.target.value) as 1 | 2 | 3 })
+            }
+            className="h-9 rounded-md border border-input bg-transparent px-2 text-sm"
+          >
+            <option value={1}>H1</option>
+            <option value={2}>H2</option>
+            <option value={3}>H3</option>
+          </select>
+          <Input
+            value={block.text}
+            onChange={(e) => onChange({ ...block, text: e.target.value })}
+            placeholder="Heading text..."
+            className="flex-1"
+          />
+        </div>
+      );
+
+    case "image":
+      return (
+        <div className="space-y-2">
+          <Input
+            value={block.src}
+            onChange={(e) => onChange({ ...block, src: e.target.value })}
+            placeholder="Image URL..."
+          />
+          <div className="flex gap-2">
+            <Input
+              value={block.alt ?? ""}
+              onChange={(e) => onChange({ ...block, alt: e.target.value })}
+              placeholder="Alt text..."
+              className="flex-1"
+            />
+            <Input
+              value={block.caption ?? ""}
+              onChange={(e) => onChange({ ...block, caption: e.target.value })}
+              placeholder="Caption..."
+              className="flex-1"
+            />
+          </div>
+          {block.src && (
+            <img
+              src={block.src}
+              alt={block.alt ?? ""}
+              className="max-h-40 rounded-md object-cover"
+            />
+          )}
+        </div>
+      );
+
+    case "video":
+      return (
+        <div className="space-y-2">
+          <Input
+            value={block.video.src ?? ""}
+            onChange={(e) =>
+              onChange({ ...block, video: { ...block.video, src: e.target.value } })
+            }
+            placeholder="Video URL..."
+          />
+          <Input
+            value={block.video.title ?? ""}
+            onChange={(e) =>
+              onChange({ ...block, video: { ...block.video, title: e.target.value } })
+            }
+            placeholder="Video title..."
+          />
+        </div>
+      );
+
+    case "code":
+      return (
+        <div className="space-y-2">
+          <div className="flex gap-2">
+            <Input
+              value={block.language ?? ""}
+              onChange={(e) => onChange({ ...block, language: e.target.value })}
+              placeholder="Language (e.g. javascript)"
+              className="w-40"
+            />
+            <Input
+              value={block.filename ?? ""}
+              onChange={(e) => onChange({ ...block, filename: e.target.value })}
+              placeholder="Filename (optional)"
+              className="flex-1"
+            />
+          </div>
+          <textarea
+            value={block.code}
+            onChange={(e) => onChange({ ...block, code: e.target.value })}
+            placeholder="Paste your code..."
+            className="w-full min-h-24 rounded-md border border-input bg-muted p-3 font-mono text-sm resize-y focus:outline-none focus:ring-2 focus:ring-ring"
+            spellCheck={false}
+          />
+        </div>
+      );
+
+    case "callout":
+      return (
+        <div className="space-y-2">
+          <select
+            value={block.variant ?? "info"}
+            onChange={(e) =>
+              onChange({
+                ...block,
+                variant: e.target.value as "info" | "warning" | "tip",
+              })
+            }
+            className="h-9 rounded-md border border-input bg-transparent px-2 text-sm"
+          >
+            <option value="info">Info</option>
+            <option value="warning">Warning</option>
+            <option value="tip">Tip</option>
+          </select>
+          <Input
+            value={block.content}
+            onChange={(e) => onChange({ ...block, content: e.target.value })}
+            placeholder="Callout text..."
+          />
+        </div>
+      );
+
+    case "audio":
+      return (
+        <div className="space-y-2">
+          <Input
+            value={block.src}
+            onChange={(e) => onChange({ ...block, src: e.target.value })}
+            placeholder="Audio URL..."
+          />
+          <Input
+            value={block.title ?? ""}
+            onChange={(e) => onChange({ ...block, title: e.target.value })}
+            placeholder="Title (optional)"
+          />
+        </div>
+      );
+
+    case "embed":
+      return (
+        <div className="space-y-2">
+          <Input
+            value={block.src}
+            onChange={(e) => onChange({ ...block, src: e.target.value })}
+            placeholder="Embed URL..."
+          />
+          <div className="flex gap-2">
+            <Input
+              value={block.title ?? ""}
+              onChange={(e) => onChange({ ...block, title: e.target.value })}
+              placeholder="Title (optional)"
+              className="flex-1"
+            />
+            <select
+              value={block.aspectRatio ?? "16/9"}
+              onChange={(e) =>
+                onChange({
+                  ...block,
+                  aspectRatio: e.target.value as "16/9" | "4/3" | "1/1",
+                })
+              }
+              className="h-9 rounded-md border border-input bg-transparent px-2 text-sm"
+            >
+              <option value="16/9">16:9</option>
+              <option value="4/3">4:3</option>
+              <option value="1/1">1:1</option>
+            </select>
+          </div>
+        </div>
+      );
+
+    case "table":
+      return <TableEditor block={block} onChange={onChange} />;
+
+    case "file":
+      return (
+        <p className="text-sm text-muted-foreground">
+          File attachments are managed via the <code className="text-xs">files</code> prop.
+          {block.files.length > 0 && (
+            <span className="ml-1">
+              ({block.files.length} file{block.files.length !== 1 && "s"} attached)
+            </span>
+          )}
+        </p>
+      );
+
+    case "divider":
+      return <Separator />;
+
+    case "question":
+    case "flashcards":
+      return (
+        <p className="text-sm text-muted-foreground italic">
+          Interactive {block.type} blocks are configured via props.
+        </p>
+      );
+
+    case "custom":
+      return (
+        <p className="text-sm text-muted-foreground italic">
+          Custom blocks are not editable in the authoring studio.
+        </p>
+      );
+
+    default:
+      return null;
+  }
+}
+
+/* ── Table editor ──────────────────────────────────────── */
+
+function TableEditor({
+  block,
+  onChange,
+}: {
+  block: Extract<LessonBlock, { type: "table" }>;
+  onChange: (block: LessonBlock) => void;
+}) {
+  const { headers, rows, caption } = block;
+
+  function updateHeader(colIndex: number, value: string) {
+    const next = [...headers];
+    next[colIndex] = value;
+    onChange({ ...block, headers: next });
+  }
+
+  function updateCell(rowIndex: number, colIndex: number, value: string) {
+    const next = rows.map((row) => [...row]);
+    next[rowIndex][colIndex] = value;
+    onChange({ ...block, rows: next });
+  }
+
+  function addColumn() {
+    onChange({
+      ...block,
+      headers: [...headers, ""],
+      rows: rows.map((row) => [...row, ""]),
+    });
+  }
+
+  function removeColumn(colIndex: number) {
+    if (headers.length <= 1) return;
+    onChange({
+      ...block,
+      headers: headers.filter((_, i) => i !== colIndex),
+      rows: rows.map((row) => row.filter((_, i) => i !== colIndex)),
+    });
+  }
+
+  function addRow() {
+    onChange({
+      ...block,
+      rows: [...rows, headers.map(() => "")],
+    });
+  }
+
+  function removeRow(rowIndex: number) {
+    onChange({
+      ...block,
+      rows: rows.filter((_, i) => i !== rowIndex),
+    });
+  }
+
+  return (
+    <div className="space-y-2">
+      <Input
+        value={caption ?? ""}
+        onChange={(e) => onChange({ ...block, caption: e.target.value })}
+        placeholder="Table caption (optional)"
+        className="text-sm"
+      />
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr>
+              {headers.map((header, i) => (
+                <th key={i} className="p-1">
+                  <div className="flex gap-0.5">
+                    <Input
+                      value={header}
+                      onChange={(e) => updateHeader(i, e.target.value)}
+                      placeholder={`Col ${i + 1}`}
+                      className="h-7 text-xs font-semibold"
+                    />
+                    {headers.length > 1 && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => removeColumn(i)}
+                        className="h-7 w-7 p-0 text-destructive shrink-0"
+                      >
+                        <Trash2 className="size-3" />
+                      </Button>
+                    )}
+                  </div>
+                </th>
+              ))}
+              <th className="p-1 w-8">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={addColumn}
+                  className="h-7 w-7 p-0 text-muted-foreground"
+                >
+                  +
+                </Button>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row, ri) => (
+              <tr key={ri}>
+                {row.map((cell, ci) => (
+                  <td key={ci} className="p-1">
+                    <Input
+                      value={cell}
+                      onChange={(e) => updateCell(ri, ci, e.target.value)}
+                      className="h-7 text-xs"
+                    />
+                  </td>
+                ))}
+                <td className="p-1">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => removeRow(ri)}
+                    className="h-7 w-7 p-0 text-destructive"
+                  >
+                    <Trash2 className="size-3" />
+                  </Button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={addRow}
+        className="text-xs text-muted-foreground"
+      >
+        + Add row
+      </Button>
+    </div>
+  );
+}

package/src/sections/ContentAuthoringStudio/block-type-picker.tsx

@@ -0,0 +1,123 @@
+import { useState, useRef, useEffect } from "react";
+import {
+  Type,
+  Heading,
+  Image,
+  Video,
+  Code,
+  MessageSquare,
+  Music,
+  Globe,
+  Table,
+  Paperclip,
+  Minus,
+  Plus,
+} from "lucide-react";
+import { Button } from "../../ui/button";
+import { cn } from "../../lib/utils";
+import type { LessonBlock } from "../../content/types";
+import type { BlockTypeOption } from "./types";
+
+const ALL_BLOCK_TYPES: BlockTypeOption[] = [
+  { type: "richtext", label: "Rich Text", description: "Formatted text content" },
+  { type: "heading", label: "Heading", description: "Section heading" },
+  { type: "image", label: "Image", description: "Image with caption" },
+  { type: "video", label: "Video", description: "Video player" },
+  { type: "code", label: "Code", description: "Code snippet" },
+  { type: "callout", label: "Callout", description: "Info, warning, or tip" },
+  { type: "audio", label: "Audio", description: "Audio player" },
+  { type: "embed", label: "Embed", description: "External embed" },
+  { type: "table", label: "Table", description: "Data table" },
+  { type: "file", label: "Files", description: "File attachments" },
+  { type: "divider", label: "Divider", description: "Horizontal separator" },
+];
+
+const BLOCK_ICONS: Record<string, React.ComponentType<{ className?: string }>> = {
+  richtext: Type,
+  heading: Heading,
+  image: Image,
+  video: Video,
+  code: Code,
+  callout: MessageSquare,
+  audio: Music,
+  embed: Globe,
+  table: Table,
+  file: Paperclip,
+  divider: Minus,
+};
+
+export function getBlockIcon(type: string) {
+  return BLOCK_ICONS[type] ?? Type;
+}
+
+export function getBlockLabel(type: string) {
+  return ALL_BLOCK_TYPES.find((b) => b.type === type)?.label ?? type;
+}
+
+interface BlockTypePickerProps {
+  onSelect: (type: LessonBlock["type"]) => void;
+  allowedTypes?: LessonBlock["type"][];
+  className?: string;
+}
+
+export function BlockTypePicker({
+  onSelect,
+  allowedTypes,
+  className,
+}: BlockTypePickerProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const types = allowedTypes
+    ? ALL_BLOCK_TYPES.filter((t) => allowedTypes.includes(t.type))
+    : ALL_BLOCK_TYPES;
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+
+  return (
+    <div className={cn("relative", className)} ref={ref}>
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => setOpen(!open)}
+        className="text-muted-foreground hover:text-foreground gap-1 h-7 text-xs"
+      >
+        <Plus className="size-3.5" />
+        Add block
+      </Button>
+
+      {open && (
+        <div className="absolute left-1/2 -translate-x-1/2 top-full mt-1 z-50 w-72 rounded-lg border border-border bg-background shadow-lg p-2">
+          <div className="grid grid-cols-3 gap-1">
+            {types.map(({ type, label }) => {
+              const Icon = BLOCK_ICONS[type] ?? Type;
+              return (
+                <button
+                  key={type}
+                  type="button"
+                  onClick={() => {
+                    onSelect(type);
+                    setOpen(false);
+                  }}
+                  className="flex flex-col items-center gap-1 rounded-md p-2 text-xs text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                >
+                  <Icon className="size-4" />
+                  <span>{label}</span>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/sections/ContentAuthoringStudio/types.ts

@@ -0,0 +1,67 @@
+import type { LessonBlock } from "../../content/types";
+
+/**
+ * A single authoring block wrapping a LessonBlock with editor metadata.
+ */
+export interface AuthoringBlock {
+  /** Unique identifier for keying and drag operations */
+  id: string;
+  /** The underlying content block data */
+  block: LessonBlock;
+  /** Whether this block is collapsed in the editor UI */
+  collapsed?: boolean;
+}
+
+/**
+ * Metadata for a block type option in the picker.
+ */
+export interface BlockTypeOption {
+  type: LessonBlock["type"];
+  label: string;
+  description: string;
+}
+
+/**
+ * ContentAuthoringStudio is a premium block-based content editor
+ * for creating lessons. It produces the same `LessonBlock[]` data
+ * model that `LessonPage` renders, providing a WYSIWYG authoring
+ * experience with drag-and-drop reordering, per-block editors,
+ * and live preview.
+ *
+ * @example
+ * <ContentAuthoringStudio
+ *   title="React Hooks Deep Dive"
+ *   blocks={lessonBlocks}
+ *   onBlocksChange={setLessonBlocks}
+ *   onTitleChange={setTitle}
+ *   onSave={({ title, blocks }) => api.saveLesson(title, blocks)}
+ * />
+ */
+export interface ContentAuthoringStudioProps {
+  /** Lesson title (editable in edit mode) */
+  title?: string;
+  /** Initial content blocks */
+  blocks?: LessonBlock[];
+  /** Called when blocks change (add, edit, remove, reorder) */
+  onBlocksChange?: (blocks: LessonBlock[]) => void;
+  /** Called when the title changes */
+  onTitleChange?: (title: string) => void;
+  /** Called when the user clicks Save */
+  onSave?: (data: { title: string; blocks: LessonBlock[] }) => void;
+  /** Show the edit/preview toggle. @default true */
+  showPreviewToggle?: boolean;
+  /** Restrict available block types. Defaults to all types. */
+  allowedBlockTypes?: LessonBlock["type"][];
+  /** When true, shows preview only (no editing controls). @default false */
+  readOnly?: boolean;
+  /** Render skeleton placeholders instead of content */
+  isLoading?: boolean;
+  /** Error message — renders an error state with optional retry */
+  error?: string | null;
+  /** Called when the user clicks retry in the error state */
+  onRetry?: () => void;
+  /** CSS class name for the root element */
+  className?: string;
+  /** Inline styles for the root element */
+  style?: React.CSSProperties;
+}