@locusai/web 0.1.7 → 0.2.2

package/src/components/CreateModal/CreateModal.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import React from "react";
+import { SecondaryText } from "@/components/typography";
+import { Button, Modal } from "@/components/ui";
+import { cn } from "@/lib/utils";
+
+export interface CreateModalField {
+  /** Field identifier */
+  name: string;
+  /** Display label */
+  label: string;
+  /** Form component (Input, Textarea, etc) */
+  component: React.ReactNode;
+  /** Whether field is required */
+  required?: boolean;
+  /** Help text for field */
+  help?: string;
+}
+
+export interface CreateModalProps {
+  /** Whether modal is open */
+  isOpen: boolean;
+  /** Modal title */
+  title: string;
+  /** Array of form fields */
+  fields: CreateModalField[];
+  /** Form submission handler */
+  onSubmit: (e: React.FormEvent) => Promise<void> | void;
+  /** Called to close modal */
+  onClose: () => void;
+  /** Submit button text */
+  submitText?: string;
+  /** Submit button variant */
+  submitVariant?: "primary" | "secondary";
+  /** Cancel button text */
+  cancelText?: string;
+  /** Whether submission is in progress */
+  isPending?: boolean;
+  /** Whether submit button is disabled */
+  submitDisabled?: boolean;
+  /** Optional icon for modal header */
+  icon?: React.ReactNode;
+  /** Modal size */
+  size?: "sm" | "md" | "lg";
+}
+
+/**
+ * Create Modal Component
+ *
+ * Reusable compound component for create/edit modals.
+ * Provides consistent styling, field rendering, and form submission.
+ * Supports custom fields, icons, and submission handlers.
+ *
+ * Features:
+ * - Customizable form fields
+ * - Consistent styling and layout
+ * - Submit and cancel actions
+ * - Loading state handling
+ * - Optional icon display
+ * - Multiple size options
+ *
+ * @component
+ * @example
+ * <CreateModal
+ *   isOpen={isOpen}
+ *   title="Create Task"
+ *   fields={[
+ *     {
+ *       name: "title",
+ *       label: "Task Title",
+ *       component: <Input {...titleProps} />,
+ *       required: true,
+ *     },
+ *   ]}
+ *   onSubmit={handleSubmit}
+ *   onClose={handleClose}
+ *   submitText="Create"
+ *   isPending={isLoading}
+ * />
+ */
+export function CreateModal({
+  isOpen,
+  title,
+  fields,
+  onSubmit,
+  onClose,
+  submitText = "Submit",
+  submitVariant = "primary",
+  cancelText = "Cancel",
+  isPending = false,
+  submitDisabled = false,
+  icon,
+  size = "md",
+}: CreateModalProps) {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title={title} size={size}>
+      <form
+        onSubmit={onSubmit}
+        className={cn("space-y-6 py-2", "md:space-y-8")}
+      >
+        {fields.map((field) => (
+          <div key={field.name} className="space-y-3">
+            <SecondaryText as="label" size="xs" className="block ml-1">
+              {field.label}
+              {field.required && <span className="text-destructive">*</span>}
+            </SecondaryText>
+            {field.component}
+            {field.help && (
+              <p className="text-xs text-muted-foreground/60 ml-1">
+                {field.help}
+              </p>
+            )}
+          </div>
+        ))}
+
+        <div className="flex justify-end gap-3 pt-6 border-t mt-4">
+          <Button
+            type="button"
+            onClick={onClose}
+            variant="ghost"
+            className="px-6"
+            disabled={isPending}
+          >
+            {cancelText}
+          </Button>
+          <Button
+            type="submit"
+            variant={submitVariant}
+            disabled={submitDisabled || isPending}
+            isLoading={isPending}
+            loadingText={`${submitText}...`}
+            className="px-8 shadow-lg shadow-primary/10"
+          >
+            {icon && <span className="mr-2">{icon}</span>}
+            {submitText}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}

package/src/components/CreateModal/index.ts

@@ -0,0 +1 @@
+export * from "./CreateModal";

package/src/components/Editor.tsx

@@ -0,0 +1,279 @@
+/**
+ * Rich Text Editor Component
+ *
+ * TipTap-based rich text editor with markdown support.
+ * Includes formatting toolbar and multiple editing modes.
+ * Supports headings, lists, code blocks, links, and more.
+ *
+ * Features:
+ * - Markdown support with live preview
+ * - Rich formatting toolbar
+ * - Code syntax highlighting
+ * - Task lists and checkboxes
+ * - Link editing
+ * - Undo/redo functionality
+ * - Heading and list formatting
+ * - Quote and code block support
+ *
+ * @example
+ * <Editor
+ *   value={markdown}
+ *   onChange={handleChange}
+ *   placeholder="Write your documentation..."
+ * />
+ */
+
+"use client";
+
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import { Color } from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import Link from "@tiptap/extension-link";
+import Placeholder from "@tiptap/extension-placeholder";
+import TaskItem from "@tiptap/extension-task-item";
+import TaskList from "@tiptap/extension-task-list";
+import { TextStyle } from "@tiptap/extension-text-style";
+import Typography from "@tiptap/extension-typography";
+import type { Editor as TiptapEditor } from "@tiptap/react";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { common, createLowlight } from "lowlight";
+import {
+  Bold,
+  CheckSquare,
+  Code as CodeIcon,
+  Heading1,
+  Heading2,
+  Heading3,
+  Highlighter,
+  Italic,
+  List,
+  ListOrdered,
+  Quote,
+  Redo,
+  Terminal,
+  Undo,
+} from "lucide-react";
+import { useEffect } from "react";
+import { Markdown } from "tiptap-markdown";
+import { cn } from "@/lib/utils";
+
+const lowlight = createLowlight(common);
+
+interface EditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  readOnly?: boolean;
+}
+
+const MenuBar = ({ editor }: { editor: TiptapEditor | null }) => {
+  if (!editor) {
+    return null;
+  }
+
+  const buttons = [
+    {
+      icon: Heading1,
+      onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+      isActive: editor.isActive("heading", { level: 1 }),
+      label: "H1",
+    },
+    {
+      icon: Heading2,
+      onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+      isActive: editor.isActive("heading", { level: 2 }),
+      label: "H2",
+    },
+    {
+      icon: Heading3,
+      onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+      isActive: editor.isActive("heading", { level: 3 }),
+      label: "H3",
+    },
+    {
+      icon: Bold,
+      onClick: () => editor.chain().focus().toggleBold().run(),
+      isActive: editor.isActive("bold"),
+      label: "Bold",
+    },
+    {
+      icon: Italic,
+      onClick: () => editor.chain().focus().toggleItalic().run(),
+      isActive: editor.isActive("italic"),
+      label: "Italic",
+    },
+    {
+      icon: Highlighter,
+      onClick: () => editor.chain().focus().toggleHighlight().run(),
+      isActive: editor.isActive("highlight"),
+      label: "Highlight",
+    },
+    {
+      icon: CodeIcon,
+      onClick: () => editor.chain().focus().toggleCode().run(),
+      isActive: editor.isActive("code"),
+      label: "Code",
+    },
+    {
+      icon: Terminal,
+      onClick: () => editor.chain().focus().toggleCodeBlock().run(),
+      isActive: editor.isActive("codeBlock"),
+      label: "Code Block",
+    },
+    {
+      icon: List,
+      onClick: () => editor.chain().focus().toggleBulletList().run(),
+      isActive: editor.isActive("bulletList"),
+      label: "Bullet List",
+    },
+    {
+      icon: ListOrdered,
+      onClick: () => editor.chain().focus().toggleOrderedList().run(),
+      isActive: editor.isActive("orderedList"),
+      label: "Ordered List",
+    },
+    {
+      icon: CheckSquare,
+      onClick: () => editor.chain().focus().toggleTaskList().run(),
+      isActive: editor.isActive("taskList"),
+      label: "Task List",
+    },
+    {
+      icon: Quote,
+      onClick: () => editor.chain().focus().toggleBlockquote().run(),
+      isActive: editor.isActive("blockquote"),
+      label: "Quote",
+    },
+  ];
+
+  return (
+    <div className="flex flex-wrap items-center gap-1 p-2 bg-card/50 backdrop-blur-md border-b border-border/40 sticky top-0 z-10">
+      {buttons.map((btn, i) => (
+        <button
+          key={i}
+          onClick={(e) => {
+            e.preventDefault();
+            btn.onClick();
+          }}
+          className={cn(
+            "p-2 rounded-lg transition-all hover:bg-secondary/80",
+            btn.isActive
+              ? "bg-primary text-primary-foreground shadow-sm"
+              : "text-muted-foreground"
+          )}
+          title={btn.label}
+        >
+          <btn.icon size={16} />
+        </button>
+      ))}
+      <div className="w-px h-6 bg-border/40 mx-1" />
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.chain().focus().undo().run();
+        }}
+        disabled={!editor.can().chain().focus().undo().run()}
+        className="p-2 rounded-lg text-muted-foreground hover:bg-secondary/80 disabled:opacity-30"
+      >
+        <Undo size={16} />
+      </button>
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          editor.chain().focus().redo().run();
+        }}
+        disabled={!editor.can().chain().focus().redo().run()}
+        className="p-2 rounded-lg text-muted-foreground hover:bg-secondary/80 disabled:opacity-30"
+      >
+        <Redo size={16} />
+      </button>
+    </div>
+  );
+};
+
+export function Editor({ value, onChange, readOnly = false }: EditorProps) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        bulletList: {
+          keepMarks: true,
+          keepAttributes: false,
+        },
+        orderedList: {
+          keepMarks: true,
+          keepAttributes: false,
+        },
+        codeBlock: false,
+      }),
+      Placeholder.configure({
+        placeholder: "Initialize content flow...",
+      }),
+      Markdown.configure({
+        html: true,
+        tightLists: true,
+        tightListClass: "tight",
+        bulletListMarker: "-",
+        linkify: true,
+        breaks: true,
+      }),
+      Highlight.configure({ multicolor: true }),
+      TaskList,
+      TaskItem.configure({
+        nested: true,
+      }),
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: {
+          class: "text-primary underline underline-offset-4",
+        },
+      }),
+      Typography,
+      CodeBlockLowlight.configure({
+        lowlight,
+      }),
+      TextStyle,
+      Color,
+    ],
+    immediatelyRender: false,
+    content: value,
+    editable: !readOnly,
+    onUpdate: ({ editor }) => {
+      // biome-ignore lint/suspicious/noExplicitAny: Tiptap storage is not strictly typed
+      const markdown = (editor.storage as any).markdown.getMarkdown();
+      onChange(markdown);
+    },
+    editorProps: {
+      attributes: {
+        class: cn(
+          "prose prose-invert max-w-none min-h-[500px] p-8 focus:outline-none",
+          "prose-pre:bg-secondary/40 prose-pre:border prose-pre:border-border/40 prose-pre:rounded-xl",
+          "prose-p:text-muted-foreground prose-p:leading-relaxed",
+          "prose-li:text-muted-foreground",
+          "prose-strong:text-foreground prose-strong:font-bold",
+          "prose-code:text-primary prose-code:bg-primary/5 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none",
+          "prose-blockquote:border-l-primary prose-blockquote:bg-primary/5 prose-blockquote:py-2 prose-blockquote:rounded-r-xl"
+        ),
+      },
+    },
+  });
+
+  // Handle value updates from outside
+  useEffect(() => {
+    if (editor) {
+      // biome-ignore lint/suspicious/noExplicitAny: Tiptap storage is not strictly typed
+      const currentMarkdown = (editor.storage as any).markdown.getMarkdown();
+      if (value !== currentMarkdown) {
+        editor.commands.setContent(value);
+      }
+    }
+  }, [value, editor]);
+
+  return (
+    <div className="w-full h-full flex flex-col">
+      {!readOnly && <MenuBar editor={editor} />}
+      <div className="flex-1 overflow-y-auto custom-scrollbar">
+        <EditorContent editor={editor} />
+      </div>
+    </div>
+  );
+}

package/src/components/Header.tsx

@@ -1,21 +1,108 @@
+/**
+ * Page Header Component
+ *
+ * Displays page title, subtitle, icon, and actions.
+ * Supports optional search with keyboard shortcut (Cmd+K).
+ * Used on main application pages for consistent header layout.
+ *
+ * Features:
+ * - Title and subtitle display
+ * - Optional icon
+ * - Action buttons area
+ * - Search with Cmd+K keyboard shortcut
+ * - Flexible layout for custom content
+ *
+ * @example
+ * <PageHeader
+ *   title="Dashboard"
+ *   subtitle="Your workspace overview"
+ *   icon={<LayoutDashboard />}
+ *   actions={<Button>Export</Button>}
+ * />
+ */
+
 "use client";
 
 import { Search } from "lucide-react";
+import { type ReactNode, useEffect, useRef } from "react";
+
+interface PageHeaderProps {
+  title: string;
+  subtitle?: string;
+  icon?: ReactNode;
+  actions?: ReactNode;
+  children?: ReactNode;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+}
+
+export function PageHeader({
+  title,
+  subtitle,
+  icon,
+  actions,
+  children,
+  searchValue,
+  onSearchChange,
+}: PageHeaderProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, []);
 
-export function Header() {
   return (
-    <header className="flex items-center mb-6 py-3">
-      <div className="relative flex-1 max-w-md group">
-        <Search
-          size={16}
-          className="absolute left-3.5 top-1/2 -translate-y-1/2 text-muted-foreground group-focus-within:text-primary transition-colors"
-        />
-        <input
-          type="text"
-          placeholder="Search tasks, docs... (⌘K)"
-          className="w-full bg-secondary/40 border border-border/50 rounded-lg pl-10 pr-4 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/70 outline-none transition-all focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:bg-background hover:bg-secondary/60"
-        />
+    <header className="mb-6">
+      <div className="flex items-start justify-between gap-4">
+        {/* Left: Title area */}
+        <div className="flex items-center gap-4">
+          {icon && (
+            <div className="p-2.5 rounded-xl bg-linear-to-br from-primary/20 to-primary/5 border border-primary/20">
+              {icon}
+            </div>
+          )}
+          <div>
+            <h1 className="text-xl font-bold text-foreground">{title}</h1>
+            {subtitle && (
+              <p className="text-sm text-muted-foreground mt-0.5">{subtitle}</p>
+            )}
+          </div>
+        </div>
+
+        {/* Right: Search + Actions */}
+        <div className="flex items-center gap-3">
+          {/* Search */}
+          {onSearchChange && (
+            <div className="relative group hidden sm:block">
+              <Search
+                size={14}
+                className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground group-focus-within:text-primary transition-colors"
+              />
+              <input
+                ref={inputRef}
+                type="text"
+                placeholder="Search... (⌘K)"
+                value={searchValue}
+                onChange={(e) => onSearchChange(e.target.value)}
+                className="w-48 lg:w-56 bg-secondary/30 border border-border/40 rounded-lg pl-9 pr-3 py-2 text-xs text-foreground placeholder:text-muted-foreground/60 outline-none transition-all focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:bg-background hover:bg-secondary/50"
+              />
+            </div>
+          )}
+
+          {/* Actions */}
+          {actions}
+        </div>
       </div>
+
+      {/* Optional children (e.g., filter bar, inline forms) */}
+      {children}
     </header>
   );
 }

package/src/components/PageLayout.tsx

@@ -0,0 +1,69 @@
+/**
+ * Page Layout Component
+ *
+ * Standard layout wrapper for content pages.
+ * Provides consistent header, title, description, and content area.
+ *
+ * @example
+ * <PageLayout
+ *   title="Team Management"
+ *   description="Manage your organization members"
+ *   actions={<Button>Invite</Button>}
+ * >
+ *   <TeamList />
+ * </PageLayout>
+ */
+
+"use client";
+
+import { getTypographyClass } from "@/lib/typography";
+import { cn } from "@/lib/utils";
+
+interface PageLayoutProps {
+  /** Page title */
+  title: string;
+  /** Page description or subtitle */
+  description?: React.ReactNode;
+  /** Action buttons/controls for header */
+  actions?: React.ReactNode;
+  /** Main page content */
+  children: React.ReactNode;
+  /** Optional className override */
+  className?: string;
+  /** Optional content className override */
+  contentClassName?: string;
+}
+
+export function PageLayout({
+  title,
+  description,
+  actions,
+  children,
+  className,
+  contentClassName,
+}: PageLayoutProps) {
+  return (
+    <div className={cn("flex flex-col h-full overflow-hidden", className)}>
+      <div className="flex-none pb-2">
+        <div className="flex items-center justify-between mb-2">
+          <div>
+            <h1 className={cn(getTypographyClass("h1"), "text-foreground/90")}>
+              {title}
+            </h1>
+            {description && (
+              <div className={cn(getTypographyClass("caption"), "mt-1")}>
+                {description}
+              </div>
+            )}
+          </div>
+          {actions && <div className="flex items-center gap-3">{actions}</div>}
+        </div>
+      </div>
+      <div
+        className={cn("flex-1 overflow-y-auto pb-12 mt-4", contentClassName)}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}