@contractspec/example.saas-boilerplate 1.57.0 → 1.59.0

package/dist/node/ui/modals/CreateProjectModal.js

@@ -0,0 +1,153 @@
+// src/ui/modals/CreateProjectModal.tsx
+import { useState } from "react";
+import { Button, Input } from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var TIERS = [
+  { value: "FREE", label: "Free" },
+  { value: "PRO", label: "Pro" },
+  { value: "ENTERPRISE", label: "Enterprise" }
+];
+function CreateProjectModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  isLoading = false
+}) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [tier, setTier] = useState("FREE");
+  const [error, setError] = useState(null);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    if (!name.trim()) {
+      setError("Project name is required");
+      return;
+    }
+    try {
+      await onSubmit({
+        name: name.trim(),
+        description: description.trim() || undefined,
+        tier
+      });
+      setName("");
+      setDescription("");
+      setTier("FREE");
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to create project");
+    }
+  };
+  if (!isOpen)
+    return null;
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        onClick: onClose,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ")
+            onClose();
+        },
+        "aria-label": "Close modal"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        children: [
+          /* @__PURE__ */ jsxDEV("h2", {
+            className: "mb-4 text-xl font-semibold",
+            children: "Create New Project"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("form", {
+            onSubmit: handleSubmit,
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("label", {
+                    htmlFor: "project-name",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Project Name *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Input, {
+                    id: "project-name",
+                    value: name,
+                    onChange: (e) => setName(e.target.value),
+                    placeholder: "e.g., My Awesome Project",
+                    disabled: isLoading
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("label", {
+                    htmlFor: "project-description",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Description"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("textarea", {
+                    id: "project-description",
+                    value: description,
+                    onChange: (e) => setDescription(e.target.value),
+                    placeholder: "Describe what this project is about...",
+                    rows: 3,
+                    disabled: isLoading,
+                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("label", {
+                    htmlFor: "project-tier",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Tier"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("select", {
+                    id: "project-tier",
+                    value: tier,
+                    onChange: (e) => setTier(e.target.value),
+                    disabled: isLoading,
+                    className: "border-input bg-background focus:ring-ring h-10 w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50",
+                    children: TIERS.map((t) => /* @__PURE__ */ jsxDEV("option", {
+                      value: t.value,
+                      children: t.label
+                    }, t.value, false, undefined, this))
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    type: "button",
+                    variant: "ghost",
+                    onPress: onClose,
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    type: "submit",
+                    disabled: isLoading,
+                    children: isLoading ? "Creating..." : "Create Project"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  CreateProjectModal
+};

package/dist/node/ui/modals/ProjectActionsModal.js

@@ -0,0 +1,335 @@
+// src/ui/modals/ProjectActionsModal.tsx
+import { useEffect, useState } from "react";
+import { Button, Input } from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function ProjectActionsModal({
+  isOpen,
+  project,
+  onClose,
+  onUpdate,
+  onArchive,
+  onActivate,
+  onDelete,
+  isLoading = false
+}) {
+  const [mode, setMode] = useState("menu");
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [error, setError] = useState(null);
+  const resetForm = () => {
+    setMode("menu");
+    setError(null);
+    if (project) {
+      setName(project.name);
+      setDescription(project.description ?? "");
+    }
+  };
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+  useEffect(() => {
+    if (project) {
+      setName(project.name);
+      setDescription(project.description ?? "");
+    }
+  }, [project]);
+  const handleEdit = async () => {
+    if (!project)
+      return;
+    setError(null);
+    if (!name.trim()) {
+      setError("Project name is required");
+      return;
+    }
+    try {
+      await onUpdate({
+        id: project.id,
+        name: name.trim(),
+        description: description.trim() || undefined
+      });
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to update project");
+    }
+  };
+  const handleArchive = async () => {
+    if (!project)
+      return;
+    setError(null);
+    try {
+      await onArchive(project.id);
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to archive project");
+    }
+  };
+  const handleActivate = async () => {
+    if (!project)
+      return;
+    setError(null);
+    try {
+      await onActivate(project.id);
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to activate project");
+    }
+  };
+  const handleDelete = async () => {
+    if (!project)
+      return;
+    setError(null);
+    try {
+      await onDelete(project.id);
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to delete project");
+    }
+  };
+  if (!isOpen || !project)
+    return null;
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "fixed inset-0 z-50 flex items-center justify-center",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "bg-background/80 absolute inset-0 backdrop-blur-sm",
+        onClick: handleClose,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ")
+            handleClose();
+        },
+        "aria-label": "Close modal"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl",
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "border-border mb-4 border-b pb-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("h2", {
+                className: "text-xl font-semibold",
+                children: project.name
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground text-sm",
+                children: [
+                  project.tier,
+                  " · ",
+                  project.status
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "menu" && /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-3",
+            children: [
+              /* @__PURE__ */ jsxDEV(Button, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => setMode("edit"),
+                children: [
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "mr-2",
+                    children: "✏️"
+                  }, undefined, false, undefined, this),
+                  " Edit Project"
+                ]
+              }, undefined, true, undefined, this),
+              project.status === "ACTIVE" || project.status === "DRAFT" ? /* @__PURE__ */ jsxDEV(Button, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: () => setMode("archive"),
+                children: [
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDCE6"
+                  }, undefined, false, undefined, this),
+                  " Archive Project"
+                ]
+              }, undefined, true, undefined, this) : project.status === "ARCHIVED" ? /* @__PURE__ */ jsxDEV(Button, {
+                className: "w-full justify-start",
+                variant: "ghost",
+                onPress: handleActivate,
+                disabled: isLoading,
+                children: [
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDD04"
+                  }, undefined, false, undefined, this),
+                  " Restore Project"
+                ]
+              }, undefined, true, undefined, this) : null,
+              /* @__PURE__ */ jsxDEV(Button, {
+                className: "w-full justify-start text-red-500 hover:text-red-600",
+                variant: "ghost",
+                onPress: () => setMode("delete"),
+                children: [
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "mr-2",
+                    children: "\uD83D\uDDD1️"
+                  }, undefined, false, undefined, this),
+                  " Delete Project"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "border-border border-t pt-3",
+                children: /* @__PURE__ */ jsxDEV(Button, {
+                  className: "w-full",
+                  variant: "outline",
+                  onPress: handleClose,
+                  children: "Close"
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "edit" && /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("label", {
+                    htmlFor: "edit-name",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Project Name *"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Input, {
+                    id: "edit-name",
+                    value: name,
+                    onChange: (e) => setName(e.target.value),
+                    disabled: isLoading
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("label", {
+                    htmlFor: "edit-description",
+                    className: "text-muted-foreground mb-1 block text-sm font-medium",
+                    children: "Description"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("textarea", {
+                    id: "edit-description",
+                    value: description,
+                    onChange: (e) => setDescription(e.target.value),
+                    rows: 3,
+                    disabled: isLoading,
+                    className: "border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              error && /* @__PURE__ */ jsxDEV("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Back"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    onPress: handleEdit,
+                    disabled: isLoading,
+                    children: isLoading ? "Saving..." : "Save Changes"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "archive" && /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Are you sure you want to archive",
+                  " ",
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "text-foreground font-medium",
+                    children: project.name
+                  }, undefined, false, undefined, this),
+                  "?"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground text-sm",
+                children: "Archived projects can be restored later."
+              }, undefined, false, undefined, this),
+              error && /* @__PURE__ */ jsxDEV("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    onPress: handleArchive,
+                    disabled: isLoading,
+                    children: isLoading ? "Archiving..." : "\uD83D\uDCE6 Archive"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          mode === "delete" && /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-4",
+            children: [
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-muted-foreground",
+                children: [
+                  "Are you sure you want to delete",
+                  " ",
+                  /* @__PURE__ */ jsxDEV("span", {
+                    className: "text-foreground font-medium",
+                    children: project.name
+                  }, undefined, false, undefined, this),
+                  "?"
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV("p", {
+                className: "text-destructive text-sm",
+                children: "This action cannot be undone."
+              }, undefined, false, undefined, this),
+              error && /* @__PURE__ */ jsxDEV("div", {
+                className: "bg-destructive/10 text-destructive rounded-md p-3 text-sm",
+                children: error
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("div", {
+                className: "flex justify-end gap-3 pt-2",
+                children: [
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    variant: "ghost",
+                    onPress: () => setMode("menu"),
+                    disabled: isLoading,
+                    children: "Cancel"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV(Button, {
+                    variant: "destructive",
+                    onPress: handleDelete,
+                    disabled: isLoading,
+                    children: isLoading ? "Deleting..." : "\uD83D\uDDD1️ Delete"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  ProjectActionsModal
+};