blodemd 0.0.15 → 0.2.0

package/docs/components/api/api-playground.tsx

@@ -1,467 +0,0 @@
-"use client";
-
-import { useCallback, useMemo, useReducer } from "react";
-import type { ChangeEvent } from "react";
-
-import { Button } from "@/components/ui/button";
-import { Field, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
-import type { OpenApiEntry } from "@/lib/openapi";
-
-interface OperationParameter {
-  description?: string;
-  name?: string;
-  required?: boolean;
-}
-
-const extractParams = (entry: OpenApiEntry, location: "path" | "query") =>
-  (entry.operation.parameters ?? []).filter(
-    (param) => (param as { in?: string }).in === location
-  ) as OperationParameter[];
-
-interface PlaygroundState {
-  authToken: string;
-  body: string;
-  isLoading: boolean;
-  pathValues: Record<string, string>;
-  queryValues: Record<string, string>;
-  response: string | null;
-  serverIndex: number;
-  status: number | null;
-  useProxyPreference: boolean;
-}
-
-type PlaygroundAction =
-  | { type: "requestError"; response: string }
-  | { type: "requestStart" }
-  | { type: "requestSuccess"; response: string; status: number }
-  | { type: "setAuthToken"; value: string }
-  | { type: "setBody"; value: string }
-  | { type: "setPathValue"; name: string; value: string }
-  | { type: "setQueryValue"; name: string; value: string }
-  | { type: "setServerIndex"; value: number }
-  | { type: "setUseProxyPreference"; value: boolean };
-
-const initialPlaygroundState: PlaygroundState = {
-  authToken: "",
-  body: "{}",
-  isLoading: false,
-  pathValues: {},
-  queryValues: {},
-  response: null,
-  serverIndex: 0,
-  status: null,
-  useProxyPreference: true,
-};
-
-const playgroundReducer = (
-  state: PlaygroundState,
-  action: PlaygroundAction
-) => {
-  switch (action.type) {
-    case "requestError": {
-      return {
-        ...state,
-        isLoading: false,
-        response: action.response,
-        status: 0,
-      };
-    }
-    case "requestStart": {
-      return {
-        ...state,
-        isLoading: true,
-        response: null,
-        status: null,
-      };
-    }
-    case "requestSuccess": {
-      return {
-        ...state,
-        isLoading: false,
-        response: action.response,
-        status: action.status,
-      };
-    }
-    case "setAuthToken": {
-      return {
-        ...state,
-        authToken: action.value,
-      };
-    }
-    case "setBody": {
-      return {
-        ...state,
-        body: action.value,
-      };
-    }
-    case "setPathValue": {
-      return {
-        ...state,
-        pathValues: {
-          ...state.pathValues,
-          [action.name]: action.value,
-        },
-      };
-    }
-    case "setQueryValue": {
-      return {
-        ...state,
-        queryValues: {
-          ...state.queryValues,
-          [action.name]: action.value,
-        },
-      };
-    }
-    case "setServerIndex": {
-      return {
-        ...state,
-        serverIndex: action.value,
-      };
-    }
-    case "setUseProxyPreference": {
-      return {
-        ...state,
-        useProxyPreference: action.value,
-      };
-    }
-    default: {
-      return state;
-    }
-  }
-};
-
-const ParameterFieldGrid = ({
-  idPrefix,
-  onChange,
-  parameters,
-  values,
-}: {
-  idPrefix: "path" | "query";
-  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-  parameters: OperationParameter[];
-  values: Record<string, string>;
-}) => {
-  if (!parameters.length) {
-    return null;
-  }
-
-  return (
-    <div className="grid gap-2.5 grid-cols-[repeat(auto-fit,minmax(180px,1fr))]">
-      {parameters.map((param) => (
-        <Field key={param.name}>
-          <FieldLabel htmlFor={`${idPrefix}-${param.name}`}>
-            {param.name}
-          </FieldLabel>
-          <Input
-            id={`${idPrefix}-${param.name}`}
-            name={param.name ?? ""}
-            onChange={onChange}
-            placeholder={param.required ? "Required" : "Optional"}
-            type="text"
-            value={values[param.name ?? ""] ?? ""}
-          />
-        </Field>
-      ))}
-    </div>
-  );
-};
-
-const ResponsePanel = ({
-  response,
-  status,
-}: {
-  response: string | null;
-  status: number | null;
-}) => {
-  if (response === null) {
-    return null;
-  }
-
-  return (
-    <div className="rounded-xl border border-border bg-primary/[0.08] p-3">
-      <div className="font-semibold">Status: {status}</div>
-      <pre className="mt-2 overflow-x-auto">{response}</pre>
-    </div>
-  );
-};
-
-export const ApiPlayground = ({
-  entry,
-  proxyEnabled,
-  proxyPath = "/_internal/proxy",
-  tenantSlug,
-}: {
-  entry: OpenApiEntry;
-  proxyEnabled: boolean;
-  proxyPath?: string;
-  tenantSlug?: string;
-}) => {
-  const servers = entry.spec.servers ?? [];
-  const [state, dispatch] = useReducer(
-    playgroundReducer,
-    initialPlaygroundState
-  );
-  const {
-    authToken,
-    body,
-    isLoading,
-    pathValues,
-    queryValues,
-    response,
-    serverIndex,
-    status,
-  } = state;
-  const useProxy = proxyEnabled && state.useProxyPreference;
-
-  const pathParams = useMemo(() => extractParams(entry, "path"), [entry]);
-  const queryParams = useMemo(() => extractParams(entry, "query"), [entry]);
-
-  const baseUrl = servers[serverIndex]?.url ?? "";
-  const canSend = Boolean(baseUrl);
-
-  const buildUrl = useCallback(() => {
-    let { path } = entry.operation;
-    for (const param of pathParams) {
-      const key = param.name ?? "";
-      const value = pathValues[key] ?? "";
-      path = path.replace(`{${key}}`, encodeURIComponent(value));
-    }
-
-    const url = new URL(path, baseUrl || "http://localhost");
-    for (const param of queryParams) {
-      const key = param.name ?? "";
-      const value = queryValues[key];
-      if (value) {
-        url.searchParams.set(key, value);
-      }
-    }
-
-    return url.toString();
-  }, [
-    baseUrl,
-    entry.operation,
-    pathParams,
-    pathValues,
-    queryParams,
-    queryValues,
-  ]);
-
-  const handleUseProxyChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      dispatch({
-        type: "setUseProxyPreference",
-        value: event.target.checked,
-      });
-    },
-    []
-  );
-  const handleServerChange = useCallback(
-    (event: ChangeEvent<HTMLSelectElement>) => {
-      dispatch({
-        type: "setServerIndex",
-        value: Number(event.target.value),
-      });
-    },
-    []
-  );
-  const handlePathValueChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      dispatch({
-        name: event.target.name,
-        type: "setPathValue",
-        value: event.target.value,
-      });
-    },
-    []
-  );
-  const handleQueryValueChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      dispatch({
-        name: event.target.name,
-        type: "setQueryValue",
-        value: event.target.value,
-      });
-    },
-    []
-  );
-  const handleAuthTokenChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      dispatch({
-        type: "setAuthToken",
-        value: event.target.value,
-      });
-    },
-    []
-  );
-  const handleBodyChange = useCallback(
-    (event: ChangeEvent<HTMLTextAreaElement>) => {
-      dispatch({
-        type: "setBody",
-        value: event.target.value,
-      });
-    },
-    []
-  );
-
-  const handleSend = useCallback(async () => {
-    const url = buildUrl();
-    dispatch({ type: "requestStart" });
-
-    try {
-      const { method } = entry.operation;
-      const requestHeaders = {
-        "Content-Type": "application/json",
-        ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
-      };
-
-      const payload = {
-        body,
-        headers: requestHeaders,
-        method,
-        url,
-        ...(tenantSlug ? { tenantSlug } : {}),
-      };
-
-      const requestUrl = useProxy ? proxyPath : url;
-      const requestMethod = useProxy ? "POST" : method;
-      const requestHeadersToSend = useProxy
-        ? { "Content-Type": "application/json" }
-        : requestHeaders;
-
-      let requestBody: string | undefined;
-      if (useProxy) {
-        requestBody = JSON.stringify(payload);
-      } else if (method === "GET") {
-        requestBody = undefined;
-      } else {
-        requestBody = body;
-      }
-
-      const res = await fetch(requestUrl, {
-        body: requestBody,
-        headers: requestHeadersToSend,
-        method: requestMethod,
-      });
-
-      const text = await res.text();
-      let formatted = text;
-      try {
-        formatted = JSON.stringify(JSON.parse(text), null, 2);
-      } catch {
-        formatted = text;
-      }
-      dispatch({
-        response: formatted || "(empty response)",
-        status: res.status,
-        type: "requestSuccess",
-      });
-    } catch (error) {
-      dispatch({
-        response: error instanceof Error ? error.message : "Request failed.",
-        type: "requestError",
-      });
-    }
-  }, [
-    authToken,
-    body,
-    buildUrl,
-    entry.operation,
-    proxyPath,
-    tenantSlug,
-    useProxy,
-  ]);
-
-  return (
-    <section className="mt-7 grid gap-3">
-      <div className="grid gap-3 rounded-xl border border-border bg-surface p-4">
-        <div className="flex items-center justify-between">
-          <h2>Try it out</h2>
-          {proxyEnabled ? (
-            <label className="flex items-center gap-2 text-sm">
-              <input
-                checked={useProxy}
-                className="accent-primary"
-                onChange={handleUseProxyChange}
-                type="checkbox"
-              />
-              Use docs proxy
-            </label>
-          ) : null}
-        </div>
-
-        {servers.length ? (
-          <Field>
-            <FieldLabel htmlFor="api-server">Server</FieldLabel>
-            <select
-              className="flex h-[var(--field-height)] w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-sans text-base text-foreground transition-colors hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background"
-              id="api-server"
-              onChange={handleServerChange}
-              value={serverIndex}
-            >
-              {servers.map((server, index) => (
-                <option key={server.url} value={index}>
-                  {server.url}
-                </option>
-              ))}
-            </select>
-          </Field>
-        ) : null}
-
-        <ParameterFieldGrid
-          idPrefix="path"
-          onChange={handlePathValueChange}
-          parameters={pathParams}
-          values={pathValues}
-        />
-
-        <ParameterFieldGrid
-          idPrefix="query"
-          onChange={handleQueryValueChange}
-          parameters={queryParams}
-          values={queryValues}
-        />
-
-        <Field>
-          <FieldLabel htmlFor="auth-token">Auth token</FieldLabel>
-          <Input
-            id="auth-token"
-            onChange={handleAuthTokenChange}
-            placeholder="Bearer token"
-            type="password"
-            value={authToken}
-          />
-        </Field>
-
-        {entry.operation.method === "GET" ? null : (
-          <Field>
-            <FieldLabel htmlFor="request-body">Request body</FieldLabel>
-            <textarea
-              className="flex w-full rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] font-sans text-base text-foreground transition-colors placeholder:text-placeholder-foreground hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background"
-              id="request-body"
-              onChange={handleBodyChange}
-              rows={6}
-              value={body}
-            />
-          </Field>
-        )}
-
-        <Button
-          className="w-full"
-          disabled={isLoading || !canSend}
-          onClick={handleSend}
-          type="button"
-        >
-          {isLoading ? "Sending..." : "Send request"}
-        </Button>
-        {canSend ? null : (
-          <p className="text-sm text-muted-foreground">
-            Add a server URL in your OpenAPI spec to enable requests.
-          </p>
-        )}
-
-        <ResponsePanel response={response} status={status} />
-      </div>
-    </section>
-  );
-};

package/docs/components/api/api-reference.tsx

@@ -1,157 +0,0 @@
-import dynamic from "next/dynamic";
-
-import type { OpenApiEntry } from "@/lib/openapi";
-import { cn } from "@/lib/utils";
-
-const ApiPlayground = dynamic(async () => {
-  const apiModule = await import("@/components/api/api-playground");
-  return { default: apiModule.ApiPlayground };
-});
-
-const methodColors: Record<string, string> = {
-  delete: "bg-red-500",
-  get: "bg-blue-500",
-  patch: "bg-amber-500",
-  post: "bg-green-500",
-  put: "bg-orange-500",
-};
-
-export const ApiReference = ({
-  entry,
-  proxyEnabled,
-  proxyPath,
-  tenantSlug,
-}: {
-  entry: OpenApiEntry;
-  proxyEnabled: boolean;
-  proxyPath?: string;
-  tenantSlug?: string;
-}) => {
-  const { operation } = entry;
-  const parameters = operation.parameters ?? [];
-  const requestBody = operation.requestBody as
-    | { content?: Record<string, { schema?: unknown }> }
-    | undefined;
-  const responses = operation.responses ?? {};
-
-  return (
-    <div>
-      <header className="mb-4 flex items-center gap-4">
-        <div
-          className={cn(
-            "rounded-full px-2.5 py-1.5 text-xs font-semibold uppercase text-white",
-            methodColors[operation.method.toLowerCase()] ?? "bg-primary"
-          )}
-        >
-          {operation.method}
-        </div>
-        <div className="font-mono">{operation.path}</div>
-      </header>
-      {operation.summary ? (
-        <p className="font-semibold">{operation.summary}</p>
-      ) : null}
-      {operation.description ? (
-        <p className="text-muted-foreground">{operation.description}</p>
-      ) : null}
-
-      {parameters.length ? (
-        <section className="mt-7 grid gap-3">
-          <h2>Parameters</h2>
-          <div className="grid gap-2">
-            <div className="grid grid-cols-[120px_80px_80px_1fr] gap-3 rounded-lg border border-border bg-background/60 p-2.5 font-bold">
-              <span>Name</span>
-              <span>In</span>
-              <span>Required</span>
-              <span>Description</span>
-            </div>
-            {parameters.map((param) => {
-              const name = (param as { name?: string }).name ?? "";
-              const location = (param as { in?: string }).in ?? "";
-              const required = (param as { required?: boolean }).required
-                ? "Yes"
-                : "No";
-              const description =
-                (param as { description?: string }).description ?? "";
-
-              return (
-                <div
-                  className="grid grid-cols-[120px_80px_80px_1fr] gap-3 rounded-lg border border-border bg-background/60 p-2.5"
-                  key={name}
-                >
-                  <span>{name}</span>
-                  <span>{location}</span>
-                  <span>{required}</span>
-                  <span>{description}</span>
-                </div>
-              );
-            })}
-          </div>
-        </section>
-      ) : null}
-
-      {requestBody?.content ? (
-        <section className="mt-7 grid gap-3">
-          <h2>Request Body</h2>
-          <div className="grid gap-2">
-            {Object.entries(requestBody.content).map(([mediaType, value]) => {
-              const { schema } = value as { schema?: unknown };
-              const ref =
-                schema &&
-                typeof schema === "object" &&
-                "$ref" in schema &&
-                typeof (schema as { $ref?: unknown }).$ref === "string"
-                  ? ((schema as { $ref: string }).$ref.split("/").pop() ??
-                    "object")
-                  : null;
-              const type =
-                schema &&
-                typeof schema === "object" &&
-                "type" in schema &&
-                typeof (schema as { type?: unknown }).type === "string"
-                  ? (schema as { type: string }).type
-                  : "object";
-              return (
-                <div
-                  className="flex justify-between rounded-lg border border-border bg-background/60 p-2.5"
-                  key={mediaType}
-                >
-                  <span className="font-mono">{mediaType}</span>
-                  <span className="text-muted-foreground">{ref ?? type}</span>
-                </div>
-              );
-            })}
-          </div>
-        </section>
-      ) : null}
-
-      {Object.keys(responses).length ? (
-        <section className="mt-7 grid gap-3">
-          <h2>Responses</h2>
-          <div className="grid gap-2">
-            {Object.entries(responses).map(([status, response]) => {
-              const description =
-                (response as { description?: string }).description ?? "";
-              return (
-                <div
-                  className="flex justify-between rounded-lg border border-border bg-background/60 p-2.5"
-                  key={status}
-                >
-                  <span className="font-semibold">{status}</span>
-                  <span className="text-muted-foreground">{description}</span>
-                </div>
-              );
-            })}
-          </div>
-        </section>
-      ) : null}
-
-      <ApiPlayground
-        entry={entry}
-        key={`${entry.identifier}:${operation.method}:${operation.path}`}
-        proxyEnabled={proxyEnabled}
-        proxyPath={proxyPath}
-        tenantSlug={tenantSlug}
-      />
-    </div>
-  );
-};