@alepha/devtools 0.16.1 → 0.19.1

package/src/ui/components/actions/ActionGroup.tsx

@@ -1,37 +0,0 @@
-import { ui } from "@alepha/ui";
-import { Accordion, Badge, Box, Group, Text } from "@mantine/core";
-import { IconChevronRight } from "@tabler/icons-react";
-import type { DevActionMetadata } from "../../../api/schemas/DevActionMetadata.ts";
-import { ActionItem } from "./ActionItem.tsx";
-
-interface ActionGroupProps {
-  group: string;
-  actions: DevActionMetadata[];
-}
-
-export const ActionGroup = ({ group, actions }: ActionGroupProps) => (
-  <Box>
-    <Group gap="xs" mb="xs">
-      <IconChevronRight size={14} opacity={0.5} />
-      <Text size="xs" fw={600} tt="uppercase" c="dimmed">
-        {group}
-      </Text>
-      <Badge variant="light" color="gray" size="xs">
-        {actions.length}
-      </Badge>
-    </Group>
-    <Accordion
-      variant="separated"
-      styles={{
-        item: {
-          backgroundColor: ui.colors.surface,
-          border: `1px solid ${ui.colors.border}`,
-        },
-      }}
-    >
-      {actions.map((action) => (
-        <ActionItem key={action.fullPath} action={action} />
-      ))}
-    </Accordion>
-  </Box>
-);

package/src/ui/components/actions/ActionItem.tsx

@@ -1,138 +0,0 @@
-import {
-  Accordion,
-  ActionIcon,
-  Badge,
-  Box,
-  Code,
-  CopyButton,
-  Group,
-  Stack,
-  Tabs,
-  Text,
-  Tooltip,
-} from "@mantine/core";
-import {
-  IconCheck,
-  IconCopy,
-  IconLock,
-  IconTerminal,
-} from "@tabler/icons-react";
-import { useMemo } from "react";
-import type { DevActionMetadata } from "../../../api/schemas/DevActionMetadata.ts";
-import { generateCurl } from "./helpers.ts";
-import { MethodBadge } from "./MethodBadge.tsx";
-import { SchemaViewer } from "./SchemaViewer.tsx";
-import { TryItPanel } from "./TryItPanel.tsx";
-
-interface ActionItemProps {
-  action: DevActionMetadata;
-}
-
-export const ActionItem = ({ action }: ActionItemProps) => {
-  const curl = useMemo(() => generateCurl(action), [action]);
-
-  return (
-    <Accordion.Item value={action.fullPath} opacity={action.disabled ? 0.5 : 1}>
-      <Accordion.Control>
-        <Group gap="sm" wrap="nowrap">
-          <MethodBadge method={action.method} />
-          <Text size="sm" ff="monospace" style={{ wordBreak: "break-all" }}>
-            {action.fullPath}
-          </Text>
-          {action.secure && (
-            <Tooltip label="Requires authentication">
-              <IconLock size={14} opacity={0.5} />
-            </Tooltip>
-          )}
-          {action.disabled && (
-            <Badge size="xs" variant="light" color="gray">
-              disabled
-            </Badge>
-          )}
-        </Group>
-      </Accordion.Control>
-      <Accordion.Panel>
-        <Stack gap="md">
-          {(action.description || action.summary) && (
-            <Text size="sm" c="dimmed">
-              {action.description || action.summary}
-            </Text>
-          )}
-
-          <Tabs defaultValue="schema" variant="outline">
-            <Tabs.List>
-              <Tabs.Tab value="schema" size="xs">
-                Schema
-              </Tabs.Tab>
-              <Tabs.Tab value="try" size="xs">
-                Try It
-              </Tabs.Tab>
-              <Tabs.Tab
-                value="curl"
-                size="xs"
-                leftSection={<IconTerminal size={12} />}
-              >
-                cURL
-              </Tabs.Tab>
-            </Tabs.List>
-
-            <Tabs.Panel value="schema" pt="md">
-              <Stack gap="md">
-                <Group gap="xl" align="flex-start">
-                  <SchemaViewer
-                    schema={action.params}
-                    label="Path Parameters"
-                  />
-                  <SchemaViewer
-                    schema={action.query}
-                    label="Query Parameters"
-                  />
-                </Group>
-                <SchemaViewer schema={action.body} label="Request Body" />
-                <SchemaViewer schema={action.response} label="Response" />
-                {!action.params &&
-                  !action.query &&
-                  !action.body &&
-                  !action.response && (
-                    <Text size="sm" c="dimmed">
-                      No schema defined
-                    </Text>
-                  )}
-              </Stack>
-            </Tabs.Panel>
-
-            <Tabs.Panel value="try" pt="md">
-              <TryItPanel action={action} />
-            </Tabs.Panel>
-
-            <Tabs.Panel value="curl" pt="md">
-              <Box pos="relative">
-                <CopyButton value={curl}>
-                  {({ copied, copy }) => (
-                    <ActionIcon
-                      size="sm"
-                      variant="subtle"
-                      onClick={copy}
-                      pos="absolute"
-                      top={8}
-                      right={8}
-                    >
-                      {copied ? (
-                        <IconCheck size={14} />
-                      ) : (
-                        <IconCopy size={14} />
-                      )}
-                    </ActionIcon>
-                  )}
-                </CopyButton>
-                <Code block style={{ fontSize: 11 }}>
-                  {curl}
-                </Code>
-              </Box>
-            </Tabs.Panel>
-          </Tabs>
-        </Stack>
-      </Accordion.Panel>
-    </Accordion.Item>
-  );
-};

package/src/ui/components/actions/DevActionsExplorer.tsx

@@ -1,132 +0,0 @@
-import {
-  Badge,
-  Flex,
-  Group,
-  Loader,
-  ScrollArea,
-  SegmentedControl,
-  Stack,
-  Text,
-  TextInput,
-} from "@mantine/core";
-import { IconApi, IconSearch } from "@tabler/icons-react";
-import { useInject } from "alepha/react";
-import { HttpClient } from "alepha/server";
-import { useEffect, useMemo, useState } from "react";
-import type { DevActionMetadata } from "../../../api/schemas/DevActionMetadata.ts";
-import { devMetadataSchema } from "../../../api/schemas/DevMetadata.ts";
-import { ActionGroup } from "./ActionGroup.tsx";
-
-export const DevActionsExplorer = () => {
-  const http = useInject(HttpClient);
-  const [actions, setActions] = useState<DevActionMetadata[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [search, setSearch] = useState("");
-  const [methodFilter, setMethodFilter] = useState("all");
-
-  useEffect(() => {
-    http
-      .fetch("/devtools/api/metadata", {
-        schema: { response: devMetadataSchema },
-      })
-      .then((res) => {
-        setActions(res.data.actions);
-        setLoading(false);
-      });
-  }, []);
-
-  const filteredActions = useMemo(() => {
-    return actions.filter((action) => {
-      if (action.hide) return false;
-      if (
-        methodFilter !== "all" &&
-        action.method.toUpperCase() !== methodFilter
-      ) {
-        return false;
-      }
-      if (search) {
-        const searchLower = search.toLowerCase();
-        return (
-          action.fullPath.toLowerCase().includes(searchLower) ||
-          action.name.toLowerCase().includes(searchLower) ||
-          action.group.toLowerCase().includes(searchLower) ||
-          action.description?.toLowerCase().includes(searchLower)
-        );
-      }
-      return true;
-    });
-  }, [actions, search, methodFilter]);
-
-  const groupedActions = useMemo(() => {
-    const groups: Record<string, DevActionMetadata[]> = {};
-    for (const action of filteredActions) {
-      const group = action.group || "Other";
-      if (!groups[group]) groups[group] = [];
-      groups[group].push(action);
-    }
-    return Object.entries(groups).sort(([a], [b]) => a.localeCompare(b));
-  }, [filteredActions]);
-
-  if (loading) {
-    return (
-      <Flex align="center" justify="center" h="100%">
-        <Loader size="sm" />
-      </Flex>
-    );
-  }
-
-  return (
-    <Flex direction="column" gap="md" w="100%" h="100%" p={"xl"}>
-      <Group justify="space-between" wrap="nowrap">
-        <Group gap="sm">
-          <IconApi size={24} opacity={0.7} />
-          <Text size="lg" fw={500}>
-            Actions
-          </Text>
-          <Badge variant="light" color="gray" size="sm">
-            {filteredActions.length}
-          </Badge>
-        </Group>
-      </Group>
-
-      <Group gap="sm">
-        <TextInput
-          placeholder="Search actions..."
-          leftSection={<IconSearch size={14} />}
-          value={search}
-          onChange={(e) => setSearch(e.currentTarget.value)}
-          style={{ flex: 1 }}
-          size="sm"
-        />
-        <SegmentedControl
-          size="xs"
-          value={methodFilter}
-          onChange={setMethodFilter}
-          data={[
-            { label: "All", value: "all" },
-            { label: "GET", value: "GET" },
-            { label: "POST", value: "POST" },
-            { label: "PUT", value: "PUT" },
-            { label: "DELETE", value: "DELETE" },
-          ]}
-        />
-      </Group>
-
-      <ScrollArea flex={1} offsetScrollbars>
-        {groupedActions.length === 0 ? (
-          <Flex align="center" justify="center" h={200}>
-            <Text c="dimmed">No actions found</Text>
-          </Flex>
-        ) : (
-          <Stack gap="md">
-            {groupedActions.map(([group, groupActions]) => (
-              <ActionGroup key={group} group={group} actions={groupActions} />
-            ))}
-          </Stack>
-        )}
-      </ScrollArea>
-    </Flex>
-  );
-};
-
-export default DevActionsExplorer;

package/src/ui/components/actions/MethodBadge.tsx

@@ -1,18 +0,0 @@
-import { Badge } from "@mantine/core";
-import { METHOD_COLORS } from "./constants.ts";
-
-interface MethodBadgeProps {
-  method: string;
-}
-
-export const MethodBadge = ({ method }: MethodBadgeProps) => (
-  <Badge
-    variant="light"
-    color={METHOD_COLORS[method.toUpperCase()] || "gray"}
-    size="sm"
-    radius="sm"
-    w={60}
-  >
-    {method.toUpperCase()}
-  </Badge>
-);

package/src/ui/components/actions/SchemaViewer.tsx

@@ -1,21 +0,0 @@
-import { Box, Code, Text } from "@mantine/core";
-
-interface SchemaViewerProps {
-  schema: unknown;
-  label: string;
-}
-
-export const SchemaViewer = ({ schema, label }: SchemaViewerProps) => {
-  if (!schema) return null;
-
-  return (
-    <Box>
-      <Text size="xs" fw={500} c="dimmed" mb={4}>
-        {label}
-      </Text>
-      <Code block style={{ fontSize: 11, maxHeight: 200, overflow: "auto" }}>
-        {JSON.stringify(schema, null, 2)}
-      </Code>
-    </Box>
-  );
-};

package/src/ui/components/actions/TryItPanel.tsx

@@ -1,140 +0,0 @@
-import {
-  ActionIcon,
-  Box,
-  Button,
-  Code,
-  CopyButton,
-  Group,
-  JsonInput,
-  Loader,
-  Paper,
-  ScrollArea,
-  Stack,
-  Text,
-} from "@mantine/core";
-import { IconCheck, IconCopy, IconPlayerPlay } from "@tabler/icons-react";
-import { useInject } from "alepha/react";
-import { HttpClient } from "alepha/server";
-import { useCallback, useState } from "react";
-import type { DevActionMetadata } from "../../../api/schemas/DevActionMetadata.ts";
-
-interface TryItPanelProps {
-  action: DevActionMetadata;
-}
-
-export const TryItPanel = ({ action }: TryItPanelProps) => {
-  const http = useInject(HttpClient);
-  const [body, setBody] = useState("{}");
-  const [response, setResponse] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [timing, setTiming] = useState<number | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const execute = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    setResponse(null);
-
-    const start = performance.now();
-
-    try {
-      let parsedBody: unknown;
-      if (action.body && body) {
-        try {
-          parsedBody = JSON.parse(body);
-        } catch {
-          setError("Invalid JSON body");
-          setLoading(false);
-          return;
-        }
-      }
-
-      const res = await http.fetch(action.fullPath, {
-        method: action.method.toUpperCase() as
-          | "GET"
-          | "POST"
-          | "PUT"
-          | "DELETE"
-          | "PATCH",
-        body: parsedBody ? JSON.stringify(parsedBody) : undefined,
-        headers: parsedBody
-          ? { "Content-Type": "application/json" }
-          : undefined,
-      });
-
-      setTiming(Math.round(performance.now() - start));
-      setResponse(JSON.stringify(res.data, null, 2));
-    } catch (err) {
-      setTiming(Math.round(performance.now() - start));
-      setError(err instanceof Error ? err.message : "Request failed");
-    } finally {
-      setLoading(false);
-    }
-  }, [http, action, body]);
-
-  return (
-    <Stack gap="md">
-      {action.body && (
-        <JsonInput
-          label="Request Body"
-          placeholder='{"key": "value"}'
-          value={body}
-          onChange={setBody}
-          minRows={4}
-          maxRows={10}
-          autosize
-          formatOnBlur
-          validationError="Invalid JSON"
-        />
-      )}
-
-      <Group>
-        <Button
-          leftSection={
-            loading ? <Loader size={14} /> : <IconPlayerPlay size={14} />
-          }
-          onClick={execute}
-          disabled={loading}
-          size="sm"
-        >
-          Execute
-        </Button>
-        {timing !== null && (
-          <Text size="xs" c="dimmed">
-            {timing}ms
-          </Text>
-        )}
-      </Group>
-
-      {error && (
-        <Paper p="sm" bg="var(--mantine-color-red-light)">
-          <Text size="sm" c="red">
-            {error}
-          </Text>
-        </Paper>
-      )}
-
-      {response && (
-        <Box>
-          <Group justify="space-between" mb={4}>
-            <Text size="xs" fw={500} c="dimmed">
-              Response
-            </Text>
-            <CopyButton value={response}>
-              {({ copied, copy }) => (
-                <ActionIcon size="xs" variant="subtle" onClick={copy}>
-                  {copied ? <IconCheck size={12} /> : <IconCopy size={12} />}
-                </ActionIcon>
-              )}
-            </CopyButton>
-          </Group>
-          <ScrollArea h={200}>
-            <Code block style={{ fontSize: 11 }}>
-              {response}
-            </Code>
-          </ScrollArea>
-        </Box>
-      )}
-    </Stack>
-  );
-};

package/src/ui/components/actions/constants.ts

@@ -1,7 +0,0 @@
-export const METHOD_COLORS: Record<string, string> = {
-  GET: "teal",
-  POST: "blue",
-  PUT: "orange",
-  PATCH: "yellow",
-  DELETE: "red",
-};

package/src/ui/components/actions/helpers.ts

@@ -1,18 +0,0 @@
-import type { DevActionMetadata } from "../../../api/schemas/DevActionMetadata.ts";
-
-export const generateCurl = (
-  action: DevActionMetadata,
-  body?: string,
-): string => {
-  const parts = [`curl -X ${action.method.toUpperCase()}`];
-  parts.push(`  '${window.location.origin}${action.fullPath}'`);
-
-  if (action.body && body) {
-    parts.push(
-      `  -H 'Content-Type: ${action.bodyContentType || "application/json"}'`,
-    );
-    parts.push(`  -d '${body}'`);
-  }
-
-  return parts.join(" \\\n");
-};

package/src/ui/components/actions/index.ts

@@ -1,8 +0,0 @@
-export { ActionGroup } from "./ActionGroup.tsx";
-export { ActionItem } from "./ActionItem.tsx";
-export { METHOD_COLORS } from "./constants.ts";
-export { DevActionsExplorer } from "./DevActionsExplorer.tsx";
-export { generateCurl } from "./helpers.ts";
-export { MethodBadge } from "./MethodBadge.tsx";
-export { SchemaViewer } from "./SchemaViewer.tsx";
-export { TryItPanel } from "./TryItPanel.tsx";

package/src/ui/components/db/ColumnBadge.tsx

@@ -1,55 +0,0 @@
-import { Badge, Tooltip } from "@mantine/core";
-import type { DevEntityColumn } from "./types.ts";
-
-interface ColumnBadgeProps {
-  column: DevEntityColumn;
-  size?: "xs" | "sm";
-}
-
-export const ColumnBadge = ({ column, size = "xs" }: ColumnBadgeProps) => {
-  const badges: Array<{ label: string; tooltip: string }> = [];
-
-  if (column.primaryKey) {
-    badges.push({ label: "PK", tooltip: "Primary Key" });
-  }
-  if (column.identity) {
-    badges.push({ label: "ID", tooltip: "Auto-increment Identity" });
-  }
-  if (column.ref) {
-    badges.push({
-      label: "FK",
-      tooltip: `Foreign Key → ${column.ref.entity}.${column.ref.column}`,
-    });
-  }
-  if (column.createdAt) {
-    badges.push({ label: "C", tooltip: "Created At (auto-set on insert)" });
-  }
-  if (column.updatedAt) {
-    badges.push({ label: "U", tooltip: "Updated At (auto-set on update)" });
-  }
-  if (column.deletedAt) {
-    badges.push({ label: "D", tooltip: "Deleted At (soft delete)" });
-  }
-  if (column.version) {
-    badges.push({ label: "V", tooltip: "Version (optimistic locking)" });
-  }
-
-  return (
-    <>
-      {badges.map((b) => (
-        <Tooltip key={b.label} label={b.tooltip}>
-          <Badge size={size} variant="light" color="blue">
-            {b.label}
-          </Badge>
-        </Tooltip>
-      ))}
-      {column.nullable && (
-        <Tooltip label="Nullable">
-          <Badge size={size} variant="outline" color="gray">
-            ?
-          </Badge>
-        </Tooltip>
-      )}
-    </>
-  );
-};