@alepha/devtools 0.16.1 → 0.19.2

package/src/ui/components/database/DatabaseEditor.tsx

@@ -0,0 +1,402 @@
+import { ActionButton, Flex, TypeForm, ui } from "@alepha/ui";
+import {
+  Badge,
+  Loader,
+  ScrollArea,
+  Text,
+  TextInput,
+  UnstyledButton,
+} from "@mantine/core";
+import {
+  IconDatabase,
+  IconPlus,
+  IconSearch,
+  IconTrash,
+} from "@tabler/icons-react";
+import { jsonSchemaToTypeBox, t } from "alepha";
+import { useInject } from "alepha/react";
+import { useForm } from "alepha/react/form";
+import { useRouter, useRouterState } from "alepha/react/router";
+import { HttpClient } from "alepha/server";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { TreeView, type TreeViewNode } from "../shared/TreeView.tsx";
+
+const EMPTY_SCHEMA = t.object({});
+
+const toTypeBoxSchema = (jsonSchema: any): any => {
+  if (!jsonSchema) return null;
+  try {
+    const converted = jsonSchemaToTypeBox(jsonSchema);
+    if (converted?.properties) return converted;
+  } catch {
+    // Schema conversion failed
+  }
+  return null;
+};
+
+const RecordForm = ({
+  entity,
+  record,
+  isNew,
+  onSave,
+  onDelete,
+  pkColumn,
+}: {
+  entity: any;
+  record: any;
+  isNew: boolean;
+  onSave: (values: any) => void;
+  onDelete: () => void;
+  pkColumn: string;
+}) => {
+  const schema = useMemo(() => {
+    const jsonSchema = isNew ? entity.insertSchema : entity.updateSchema;
+    return toTypeBoxSchema(jsonSchema) ?? EMPTY_SCHEMA;
+  }, [entity, isNew]);
+
+  const form = useForm(
+    {
+      schema,
+      handler: () => {},
+      initialValues: isNew ? undefined : record,
+    },
+    [schema, record, isNew],
+  );
+
+  return (
+    <Flex direction="column" gap="md">
+      <Flex justify="space-between">
+        <Text fz="sm" fw={600}>
+          {isNew
+            ? "New Record"
+            : `Edit Record (${pkColumn}: ${record?.[pkColumn]})`}
+        </Text>
+        <Flex gap="xs">
+          <ActionButton size="xs" onClick={() => onSave(form.currentValues)}>
+            {isNew ? "Create" : "Save"}
+          </ActionButton>
+          {!isNew && (
+            <ActionButton
+              size="sm"
+              variant="light"
+              intent="danger"
+              onClick={onDelete}
+              icon={<IconTrash size={14} />}
+            />
+          )}
+        </Flex>
+      </Flex>
+      <TypeForm form={form} skipSubmitButton skipFormElement columns={1} />
+    </Flex>
+  );
+};
+
+/** Parse /db/editor/:table/:id from pathname */
+const parseEditorPath = (pathname: string) => {
+  const prefix = "/db/editor/";
+  if (!pathname.startsWith(prefix)) return { table: "", recordId: "" };
+  const rest = pathname.slice(prefix.length);
+  const slashIdx = rest.indexOf("/");
+  if (slashIdx === -1) return { table: decodeURIComponent(rest), recordId: "" };
+  return {
+    table: decodeURIComponent(rest.slice(0, slashIdx)),
+    recordId: decodeURIComponent(rest.slice(slashIdx + 1)),
+  };
+};
+
+export const DatabaseEditor = ({ entities }: { entities: any[] }) => {
+  const http = useInject(HttpClient);
+  const router = useRouter();
+  const state = useRouterState();
+  const [records, setRecords] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [search, setSearch] = useState("");
+  const [pageInfo, setPageInfo] = useState<any>(null);
+
+  const { table: selectedEntity, recordId } = parseEditorPath(
+    state.url.pathname,
+  );
+  const isNew = recordId === "new";
+
+  const entity = entities.find((e) => e.name === selectedEntity);
+  const pkColumn =
+    entity?.columns?.find((c: any) => c.primaryKey)?.name ?? "id";
+
+  const fetchRecords = useCallback(async () => {
+    if (!selectedEntity) return;
+    setLoading(true);
+    try {
+      const res = await http.fetch(
+        `/__devtools/api/db/${selectedEntity}/records?size=50`,
+      );
+      setRecords((res.data as any)?.content ?? []);
+      setPageInfo((res.data as any)?.page);
+    } catch {
+      setRecords([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [http, selectedEntity]);
+
+  useEffect(() => {
+    fetchRecords();
+  }, [selectedEntity, fetchRecords]);
+
+  const selectedRecord = useMemo(() => {
+    if (!recordId || isNew) return null;
+    return records.find((r) => String(r[pkColumn]) === recordId) ?? null;
+  }, [records, recordId, isNew, pkColumn]);
+
+  const navigateToEntity = useCallback(
+    (name: string) => {
+      router.push(`/db/editor/${encodeURIComponent(name)}`);
+    },
+    [router],
+  );
+
+  const navigateToRecord = useCallback(
+    (record: any) => {
+      const id = record[pkColumn];
+      router.push(
+        `/db/editor/${encodeURIComponent(selectedEntity)}/${encodeURIComponent(String(id))}`,
+      );
+    },
+    [router, selectedEntity, pkColumn],
+  );
+
+  const navigateToNew = useCallback(() => {
+    router.push(`/db/editor/${encodeURIComponent(selectedEntity)}/new`);
+  }, [router, selectedEntity]);
+
+  const handleSave = async (data: any) => {
+    try {
+      if (isNew) {
+        await http.fetch(`/__devtools/api/db/${selectedEntity}/records`, {
+          method: "POST",
+          body: JSON.stringify(data),
+          headers: { "Content-Type": "application/json" },
+        });
+        router.push(`/db/editor/${encodeURIComponent(selectedEntity)}`);
+      } else if (selectedRecord) {
+        const idValue = selectedRecord[pkColumn];
+        await http.fetch(
+          `/__devtools/api/db/${selectedEntity}/records/${idValue}`,
+          {
+            method: "PUT",
+            body: JSON.stringify(data),
+            headers: { "Content-Type": "application/json" },
+          },
+        );
+      }
+      await fetchRecords();
+    } catch {
+      // handle error
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!selectedRecord) return;
+    const idValue = selectedRecord[pkColumn];
+    try {
+      await http.fetch(
+        `/__devtools/api/db/${selectedEntity}/records/${idValue}`,
+        { method: "DELETE" },
+      );
+      router.push(`/db/editor/${encodeURIComponent(selectedEntity)}`);
+      await fetchRecords();
+    } catch {
+      // handle error
+    }
+  };
+
+  const entityNodes: TreeViewNode[] = useMemo(() => {
+    const filtered = entities.filter((e) =>
+      e.name.toLowerCase().includes(search.toLowerCase()),
+    );
+    return filtered.map((e) => ({
+      id: `entity:${e.name}`,
+      label: e.name,
+      icon: (
+        <IconDatabase
+          size={13}
+          color="var(--mantine-color-blue-text)"
+          style={{ flexShrink: 0 }}
+        />
+      ),
+      badge: (
+        <Badge size="xs" variant="light" color="gray">
+          {e.columns?.length ?? 0}
+        </Badge>
+      ),
+    }));
+  }, [entities, search]);
+
+  const handleEntitySelect = useCallback(
+    (id: string) => {
+      const name = id.replace(/^entity:/, "");
+      navigateToEntity(name);
+    },
+    [navigateToEntity],
+  );
+
+  const emptyOpenNodes = useMemo(() => new Set<string>(), []);
+  const selectedEntityId = selectedEntity ? `entity:${selectedEntity}` : "";
+
+  return (
+    <Flex style={{ flex: 1, overflow: "hidden" }}>
+      {/* Entity list */}
+      <Flex
+        w={200}
+        style={{
+          borderRight: `1px solid ${ui.colors.border}`,
+          flexShrink: 0,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <Flex p="xs">
+          <TextInput
+            size="xs"
+            placeholder="Filter tables..."
+            leftSection={<IconSearch size={14} />}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+          />
+        </Flex>
+        <ScrollArea style={{ flex: 1 }} px="xs">
+          <TreeView
+            nodes={entityNodes}
+            selectedId={selectedEntityId}
+            openNodes={emptyOpenNodes}
+            onSelect={handleEntitySelect}
+            onToggle={() => {}}
+            showLeafCount={false}
+          />
+        </ScrollArea>
+      </Flex>
+
+      {/* Records list */}
+      {selectedEntity && (
+        <Flex
+          w={200}
+          style={{
+            borderRight: `1px solid ${ui.colors.border}`,
+            flexShrink: 0,
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          <Flex
+            px="xs"
+            py="xs"
+            style={{
+              borderBottom: `1px solid ${ui.colors.border}`,
+              flexShrink: 0,
+            }}
+          >
+            <Flex gap="xs" justify="space-between">
+              <Text fz={10} c="dimmed" tt="uppercase" fw={600} lts={0.5}>
+                Records{" "}
+                {pageInfo?.totalElements != null &&
+                  `(${pageInfo.totalElements})`}
+              </Text>
+              <ActionButton
+                size="xs"
+                variant="subtle"
+                color="teal"
+                onClick={navigateToNew}
+                icon={<IconPlus size={14} />}
+              />
+            </Flex>
+          </Flex>
+          <ScrollArea style={{ flex: 1 }} px="xs" py="xs">
+            <UnstyledButton
+              w="100%"
+              py={4}
+              className="devtools-tree-node"
+              data-selected={isNew || undefined}
+              style={{
+                borderRadius: 6,
+                paddingLeft: 8,
+                paddingRight: 8,
+                transition: "background 100ms ease",
+              }}
+              onClick={navigateToNew}
+            >
+              <Flex gap={8} wrap="nowrap">
+                <IconPlus
+                  size={13}
+                  color="var(--mantine-color-teal-text)"
+                  style={{ flexShrink: 0 }}
+                />
+                <Text fz={12} c="teal">
+                  New Record
+                </Text>
+              </Flex>
+            </UnstyledButton>
+            {loading ? (
+              <Flex justify="center" py="md">
+                <Loader size="xs" />
+              </Flex>
+            ) : (
+              records.map((record, i) => {
+                const idVal = record[pkColumn] ?? i;
+                const isActive = !isNew && String(idVal) === recordId;
+                return (
+                  <UnstyledButton
+                    key={String(idVal)}
+                    w="100%"
+                    py={4}
+                    className="devtools-tree-node"
+                    data-selected={isActive || undefined}
+                    style={{
+                      borderRadius: 6,
+                      paddingLeft: 8,
+                      paddingRight: 8,
+                      transition: "background 100ms ease",
+                    }}
+                    onClick={() => navigateToRecord(record)}
+                  >
+                    <Text fz={12} ff="monospace" truncate>
+                      {pkColumn}: {String(idVal)}
+                    </Text>
+                  </UnstyledButton>
+                );
+              })
+            )}
+          </ScrollArea>
+        </Flex>
+      )}
+
+      {/* Editor panel */}
+      <Flex style={{ flex: 1, overflow: "auto" }} p="md">
+        {!selectedEntity && (
+          <Flex align="center" justify="center" h="100%">
+            <Text c="dimmed" fz="sm">
+              Select a table to browse records
+            </Text>
+          </Flex>
+        )}
+
+        {selectedEntity && !selectedRecord && !isNew && (
+          <Flex align="center" justify="center" h="100%">
+            <Text c="dimmed" fz="sm">
+              Select a record or create a new one
+            </Text>
+          </Flex>
+        )}
+
+        {(selectedRecord || isNew) && entity && (
+          <RecordForm
+            entity={entity}
+            record={selectedRecord}
+            isNew={isNew}
+            onSave={handleSave}
+            onDelete={handleDelete}
+            pkColumn={pkColumn}
+          />
+        )}
+      </Flex>
+    </Flex>
+  );
+};

package/src/ui/components/database/DatabaseErd.page.tsx

@@ -0,0 +1,28 @@
+import { devMetadataSchema } from "@alepha/devtools";
+import { Flex } from "@mantine/core";
+import { useInject } from "alepha/react";
+import { HttpClient } from "alepha/server";
+import { useEffect, useState } from "react";
+import { DatabaseErd } from "./DatabaseErd.tsx";
+
+const DatabaseErdPage = () => {
+  const http = useInject(HttpClient);
+  const [entities, setEntities] = useState<any[]>([]);
+
+  useEffect(() => {
+    http
+      .fetch("/__devtools/api/metadata", {
+        schema: { response: devMetadataSchema },
+      })
+      .then((res) => setEntities(res.data.entities ?? []))
+      .catch(() => {});
+  }, [http]);
+
+  return (
+    <Flex flex={1} style={{ position: "relative" }}>
+      <DatabaseErd entities={entities} />
+    </Flex>
+  );
+};
+
+export default DatabaseErdPage;

package/src/ui/components/database/DatabaseErd.tsx

@@ -0,0 +1,107 @@
+import { ui } from "@alepha/ui";
+import { Flex } from "@mantine/core";
+import {
+  Background,
+  BackgroundVariant,
+  Controls,
+  type Edge,
+  MiniMap,
+  type Node,
+  ReactFlow,
+  ReactFlowProvider,
+  useEdgesState,
+  useNodesState,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { useEffect, useMemo } from "react";
+import { EntityNode } from "./EntityNode.tsx";
+
+const nodeTypes = { entity: EntityNode };
+
+const buildGraph = (entities: any[]): { nodes: Node[]; edges: Edge[] } => {
+  const nodes: Node[] = entities.map((entity, i) => {
+    const cols = Math.ceil(Math.sqrt(entities.length));
+    const row = Math.floor(i / cols);
+    const col = i % cols;
+    return {
+      id: entity.name,
+      type: "entity",
+      position: { x: col * 320, y: row * 300 },
+      data: entity,
+    };
+  });
+
+  const edges: Edge[] = [];
+  for (const entity of entities) {
+    for (const column of entity.columns ?? []) {
+      if (column.ref) {
+        edges.push({
+          id: `${entity.name}.${column.name}->${column.ref.entity}`,
+          source: entity.name,
+          target: column.ref.entity,
+          label: `${column.name} → ${column.ref.column}`,
+          style: { stroke: "var(--mantine-color-blue-6)", strokeWidth: 1.5 },
+          labelStyle: { fontSize: 10, fill: "var(--mantine-color-dimmed)" },
+          animated: true,
+        });
+      }
+    }
+  }
+
+  return { nodes, edges };
+};
+
+const ErdFlow = ({ entities }: { entities: any[] }) => {
+  const graph = useMemo(() => buildGraph(entities), [entities]);
+  const [nodes, setNodes, onNodesChange] = useNodesState(graph.nodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(graph.edges);
+
+  useEffect(() => {
+    setNodes(graph.nodes);
+    setEdges(graph.edges);
+  }, [graph, setNodes, setEdges]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      nodeTypes={nodeTypes}
+      fitView
+      fitViewOptions={{ padding: 0.2 }}
+      minZoom={0.1}
+      maxZoom={2}
+      proOptions={{ hideAttribution: true }}
+      style={{ background: ui.colors.background }}
+    >
+      <Background variant={BackgroundVariant.Dots} gap={20} size={1} />
+      <Controls />
+      <MiniMap
+        nodeColor="var(--mantine-color-dark-4)"
+        maskColor="rgba(0,0,0,0.6)"
+        style={{ backgroundColor: ui.colors.surface }}
+      />
+    </ReactFlow>
+  );
+};
+
+export const DatabaseErd = ({ entities }: { entities: any[] }) => {
+  return (
+    <Flex
+      flex={1}
+      h="100%"
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      }}
+    >
+      <ReactFlowProvider>
+        <ErdFlow entities={entities} />
+      </ReactFlowProvider>
+    </Flex>
+  );
+};

package/src/ui/components/database/DevDatabase.tsx

@@ -0,0 +1,36 @@
+import { Flex, ui } from "@alepha/ui";
+import { SegmentedControl } from "@mantine/core";
+import { NestedView, useRouter, useRouterState } from "alepha/react/router";
+
+export const DevDatabase = () => {
+  const router = useRouter();
+  const state = useRouterState();
+  const tab = state.url.pathname.startsWith("/db/editor") ? "editor" : "erd";
+
+  const handleTabChange = (value: string) => {
+    router.push(value === "editor" ? "/db/editor" : "/db/erd");
+  };
+
+  return (
+    <Flex direction="column" style={{ flex: 1 }}>
+      <Flex
+        px="md"
+        py="xs"
+        style={{ borderBottom: `1px solid ${ui.colors.border}` }}
+      >
+        <SegmentedControl
+          size="xs"
+          value={tab}
+          onChange={handleTabChange}
+          data={[
+            { label: "ERD", value: "erd" },
+            { label: "Editor", value: "editor" },
+          ]}
+        />
+      </Flex>
+      <NestedView />
+    </Flex>
+  );
+};
+
+export default DevDatabase;

package/src/ui/components/database/EntityNode.tsx

@@ -0,0 +1,83 @@
+import { Flex, ui } from "@alepha/ui";
+import { Badge, Text } from "@mantine/core";
+import { IconKey, IconLink } from "@tabler/icons-react";
+import { Handle, type NodeProps, Position } from "@xyflow/react";
+
+export const EntityNode = ({ data }: NodeProps) => {
+  const entity = data as any;
+
+  return (
+    <div
+      style={{
+        background: ui.colors.surface,
+        border: `1px solid ${ui.colors.border}`,
+        borderRadius: 8,
+        minWidth: 240,
+        overflow: "hidden",
+      }}
+    >
+      <Handle
+        type="target"
+        position={Position.Top}
+        style={{ background: "var(--mantine-color-blue-6)" }}
+      />
+
+      {/* Header */}
+      <div
+        style={{
+          padding: "8px 12px",
+          borderBottom: `1px solid ${ui.colors.border}`,
+          background: ui.colors.elevated,
+        }}
+      >
+        <Flex gap="xs">
+          <Text fz="sm" fw={700}>
+            {entity.name}
+          </Text>
+          <Badge size="xs" variant="light" color="gray">
+            {entity.provider}
+          </Badge>
+        </Flex>
+      </div>
+
+      {/* Columns */}
+      <Flex direction="column" gap={0} p={0}>
+        {(entity.columns ?? []).map((col: any) => (
+          <Flex
+            key={col.name}
+            gap="xs"
+            px="sm"
+            py={4}
+            style={{ borderBottom: `1px solid ${ui.colors.border}20` }}
+            wrap="nowrap"
+          >
+            {col.primaryKey && (
+              <IconKey size={10} color="var(--mantine-color-yellow-6)" />
+            )}
+            {col.ref && (
+              <IconLink size={10} color="var(--mantine-color-blue-6)" />
+            )}
+            {!col.primaryKey && !col.ref && <span style={{ width: 10 }} />}
+            <Text fz={11} ff="monospace" style={{ flex: 1 }}>
+              {col.name}
+            </Text>
+            <Text fz={10} c="dimmed" ff="monospace">
+              {col.type}
+            </Text>
+            {col.nullable && (
+              <Text fz={9} c="dimmed">
+                ?
+              </Text>
+            )}
+          </Flex>
+        ))}
+      </Flex>
+
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        style={{ background: "var(--mantine-color-blue-6)" }}
+      />
+    </div>
+  );
+};