@echothink-ui/developer 0.1.0

package/src/components/APIExplorer.tsx

@@ -0,0 +1,205 @@
+import * as React from "react";
+import { Button, FormField, Select, TextInput, Textarea } from "@echothink-ui/core";
+import type { APIEndpoint, APIExplorerProps, APIRequest } from "./types";
+import { formatUnknown } from "./devUtils";
+
+type ResponseState =
+  | { status: "idle" }
+  | { status: "loading" }
+  | { status: "success"; value: unknown }
+  | { status: "error"; value: unknown };
+
+export function APIExplorer({
+  endpoints,
+  selectedId,
+  onSelect,
+  onSend,
+  className,
+  ...props
+}: APIExplorerProps) {
+  const [internalId, setInternalId] = React.useState(selectedId ?? endpoints[0]?.id);
+  const selected =
+    endpoints.find((endpoint) => endpoint.id === (selectedId ?? internalId)) ?? endpoints[0];
+  const [method, setMethod] = React.useState(selected?.method ?? "GET");
+  const [path, setPath] = React.useState(selected?.path ?? "");
+  const [headers, setHeaders] = React.useState(() => formatEndpointValue(selected?.headers, "{}"));
+  const [body, setBody] = React.useState(() => formatEndpointValue(selected?.body, ""));
+  const [response, setResponse] = React.useState<ResponseState>({ status: "idle" });
+  const headerError = validateHeaderJson(headers);
+
+  React.useEffect(() => {
+    if (!selected) return;
+    setMethod(selected.method);
+    setPath(selected.path);
+    setHeaders(formatEndpointValue(selected.headers, "{}"));
+    setBody(formatEndpointValue(selected.body, ""));
+  }, [selected?.id]);
+
+  const choose = (endpoint: APIEndpoint) => {
+    setInternalId(endpoint.id);
+    onSelect?.(endpoint.id);
+  };
+
+  const send = async () => {
+    if (headerError || !path.trim()) return;
+
+    const request: APIRequest = { endpointId: selected?.id, method, path, headers, body };
+    setResponse({ status: "loading" });
+
+    try {
+      const result = await onSend?.(request);
+      setResponse({ status: "success", value: result ?? { ok: true, request } });
+    } catch (error) {
+      setResponse({ status: "error", value: formatError(error) });
+    }
+  };
+
+  const isLoading = response.status === "loading";
+  const responseStateLabel = response.status === "idle" ? "Ready" : response.status;
+
+  return (
+    <section
+      {...props}
+      className={`eth-dev-api-explorer ${className ?? ""}`}
+      data-eth-component="APIExplorer"
+    >
+      <nav className="eth-dev-api-explorer__nav" aria-label="Endpoints">
+        <div className="eth-dev-api-explorer__nav-heading">
+          <span>Endpoints</span>
+          <span>{endpoints.length}</span>
+        </div>
+        <div className="eth-dev-api-explorer__endpoint-list">
+          {endpoints.length ? (
+            endpoints.map((endpoint) => (
+              <button
+                key={endpoint.id}
+                type="button"
+                aria-current={selected?.id === endpoint.id}
+                onClick={() => choose(endpoint)}
+              >
+                <span
+                  className={`eth-dev-api-explorer__method eth-dev-api-explorer__method--${methodToken(endpoint.method)}`}
+                >
+                  {endpoint.method}
+                </span>
+                <span className="eth-dev-api-explorer__endpoint-copy">
+                  <code>{endpoint.path}</code>
+                  {endpoint.summary ? <small>{endpoint.summary}</small> : null}
+                </span>
+              </button>
+            ))
+          ) : (
+            <p className="eth-dev-api-explorer__empty">No endpoints configured.</p>
+          )}
+        </div>
+      </nav>
+      <form
+        className="eth-dev-api-explorer__request"
+        onSubmit={(event) => {
+          event.preventDefault();
+          void send();
+        }}
+      >
+        <header className="eth-dev-api-explorer__request-header">
+          <div>
+            <p>Request</p>
+            <h3>{selected?.summary ?? "Custom endpoint"}</h3>
+          </div>
+          {selected ? <code>{selected.id}</code> : null}
+        </header>
+        <div className="eth-dev-api-explorer__method-path">
+          <FormField label="Method">
+            <Select
+              value={method}
+              options={["GET", "POST", "PUT", "PATCH", "DELETE"].map((item) => ({
+                value: item,
+                label: item
+              }))}
+              onChange={(event) => setMethod(event.currentTarget.value)}
+            />
+          </FormField>
+          <FormField label="Path">
+            <TextInput value={path} onChange={(event) => setPath(event.currentTarget.value)} />
+          </FormField>
+        </div>
+        <FormField label="Headers" error={headerError}>
+          <Textarea
+            className="eth-dev-api-explorer__code-field"
+            value={headers}
+            onChange={(event) => setHeaders(event.currentTarget.value)}
+            rows={5}
+          />
+        </FormField>
+        <FormField label="Body">
+          <Textarea
+            className="eth-dev-api-explorer__code-field"
+            value={body}
+            onChange={(event) => setBody(event.currentTarget.value)}
+            rows={8}
+          />
+        </FormField>
+        <div className="eth-dev-api-explorer__actions">
+          <span>
+            {method} {path || "/"}
+          </span>
+          <Button type="submit" loading={isLoading} disabled={Boolean(headerError) || !path.trim()}>
+            Send
+          </Button>
+        </div>
+      </form>
+      <section className="eth-dev-api-explorer__response" aria-live="polite" aria-busy={isLoading}>
+        <header className="eth-dev-api-explorer__response-header">
+          <h3>Response</h3>
+          <span
+            className={`eth-dev-api-explorer__response-state eth-dev-api-explorer__response-state--${response.status}`}
+          >
+            {responseStateLabel}
+          </span>
+        </header>
+        {response.status === "idle" ? (
+          <div className="eth-dev-api-explorer__response-empty">No response yet.</div>
+        ) : response.status === "loading" ? (
+          <div className="eth-dev-api-explorer__response-empty">Waiting for response.</div>
+        ) : (
+          <pre>
+            <code>{formatUnknown(response.value)}</code>
+          </pre>
+        )}
+      </section>
+    </section>
+  );
+}
+
+function formatEndpointValue(value: unknown, fallback: string) {
+  if (value == null) return fallback;
+  if (typeof value === "string") return value;
+  return formatUnknown(value);
+}
+
+function validateHeaderJson(value: string) {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (!parsed || Array.isArray(parsed) || typeof parsed !== "object") {
+      return "Headers must be a JSON object.";
+    }
+  } catch {
+    return "Headers must be valid JSON.";
+  }
+
+  return null;
+}
+
+function formatError(error: unknown) {
+  if (error instanceof Error) {
+    return { error: error.message };
+  }
+
+  return error;
+}
+
+function methodToken(method: string) {
+  return method.toLowerCase().replace(/[^a-z0-9-]/g, "");
+}

package/src/components/BranchSelector.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { Select } from "@echothink-ui/core";
+import type { BranchSelectorProps } from "./types";
+
+export function BranchSelector({
+  branches,
+  value,
+  onChange,
+  className,
+  disabled,
+  labelText = "Branch",
+  helperText,
+  density = "compact",
+  ...props
+}: BranchSelectorProps) {
+  const hasBranches = branches.length > 0;
+  const branchCountLabel =
+    branches.length === 1 ? "1 branch available" : `${branches.length} branches available`;
+  const resolvedHelperText =
+    helperText === undefined
+      ? hasBranches
+        ? branchCountLabel
+        : "No branches available"
+      : helperText;
+
+  return (
+    <Select
+      {...props}
+      className={[
+        "eth-dev-branch-selector",
+        !hasBranches && "eth-dev-branch-selector--empty",
+        className
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      data-eth-component="BranchSelector"
+      density={density}
+      disabled={disabled || !hasBranches}
+      helperText={resolvedHelperText}
+      labelText={labelText}
+      value={hasBranches ? value : ""}
+      options={
+        hasBranches
+          ? branches.map((branch) => ({ value: branch, label: branch }))
+          : [{ value: "", label: "No branches available", disabled: true }]
+      }
+      onChange={(event) => {
+        if (hasBranches) {
+          onChange?.(event.currentTarget.value);
+        }
+      }}
+    />
+  );
+}

package/src/components/CodeBlock.tsx

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { Checkmark, Copy } from "@carbon/icons-react";
+import { IconButton } from "@echothink-ui/core";
+import type { CodeBlockProps } from "./types";
+import { splitLines } from "./devUtils";
+
+const keywordPattern =
+  /\b(?:async|await|break|case|catch|class|const|continue|default|else|export|extends|false|finally|for|from|function|if|import|interface|let|new|null|return|throw|true|try|type|undefined|var|while)\b/;
+const tokenPattern =
+  /\/\/.*|\/\*.*?\*\/|"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`(?:\\.|[^`\\])*`|\b\d+(?:\.\d+)?\b|\b(?:async|await|break|case|catch|class|const|continue|default|else|export|extends|false|finally|for|from|function|if|import|interface|let|new|null|return|throw|true|try|type|undefined|var|while)\b/g;
+
+function getTokenKind(token: string) {
+  if (token.startsWith("//") || token.startsWith("/*")) return "comment";
+  if (token.startsWith('"') || token.startsWith("'") || token.startsWith("`")) return "string";
+  if (/^\d/.test(token)) return "number";
+  if (keywordPattern.test(token)) return "keyword";
+  return "plain";
+}
+
+function renderCodeLine(line: string) {
+  const parts: React.ReactNode[] = [];
+  let lastIndex = 0;
+  tokenPattern.lastIndex = 0;
+  for (let match = tokenPattern.exec(line); match; match = tokenPattern.exec(line)) {
+    const token = match[0];
+    if (match.index > lastIndex) {
+      parts.push(line.slice(lastIndex, match.index));
+    }
+
+    const kind = getTokenKind(token);
+    parts.push(
+      <span
+        key={`${match.index}-${token}`}
+        className={`eth-dev-code-block__token eth-dev-code-block__token--${kind}`}
+      >
+        {token}
+      </span>
+    );
+    lastIndex = match.index + token.length;
+  }
+
+  if (lastIndex < line.length) {
+    parts.push(line.slice(lastIndex));
+  }
+
+  return parts.length ? parts : line;
+}
+
+export function CodeBlock({
+  code,
+  language = "text",
+  showLineNumbers = false,
+  className,
+  ...props
+}: CodeBlockProps) {
+  const [copied, setCopied] = React.useState(false);
+  const resetTimer = React.useRef<number | undefined>(undefined);
+  const lines = splitLines(code);
+
+  React.useEffect(() => {
+    return () => {
+      if (resetTimer.current !== undefined && typeof window !== "undefined") {
+        window.clearTimeout(resetTimer.current);
+      }
+    };
+  }, []);
+
+  const copy = React.useCallback(() => {
+    if (typeof navigator === "undefined" || !navigator.clipboard) return;
+
+    void navigator.clipboard
+      .writeText(code)
+      .then(() => {
+        if (typeof window !== "undefined") {
+          setCopied(true);
+          if (resetTimer.current !== undefined) {
+            window.clearTimeout(resetTimer.current);
+          }
+          resetTimer.current = window.setTimeout(() => setCopied(false), 1200);
+        }
+      })
+      .catch(() => {
+        setCopied(false);
+      });
+  }, [code]);
+
+  const normalizedLanguage = language.trim() || "text";
+  const languageClass = normalizedLanguage.toLowerCase().replace(/[^a-z0-9_-]/g, "-");
+
+  return (
+    <section
+      {...props}
+      className={`eth-dev-code-block ${showLineNumbers ? "eth-dev-code-block--numbered" : ""} ${className ?? ""}`}
+      data-eth-component="CodeBlock"
+      data-language={normalizedLanguage}
+    >
+      <header className="eth-dev-code-block__header">
+        <span className="eth-dev-code-block__language">{normalizedLanguage}</span>
+        <IconButton
+          className="eth-dev-code-block__copy-button"
+          label={copied ? "Copied" : "Copy code"}
+          intent="ghost"
+          density="compact"
+          icon={copied ? <Checkmark size={16} /> : <Copy size={16} />}
+          onClick={copy}
+        />
+        <span className="eth-dev-code-block__copy-status" aria-live="polite">
+          {copied ? "Code copied" : ""}
+        </span>
+      </header>
+      <pre className={`eth-dev-code-block__pre language-${languageClass}`}>
+        <code className="eth-dev-code-block__code">
+          {lines.map((line, index) => (
+            <span key={index} className="eth-dev-code-block__line">
+              {showLineNumbers ? (
+                <span className="eth-dev-code-block__gutter" aria-hidden>
+                  {index + 1}
+                </span>
+              ) : null}
+              <span className="eth-dev-code-block__line-code">{renderCodeLine(line)}</span>
+            </span>
+          ))}
+        </code>
+      </pre>
+    </section>
+  );
+}

package/src/components/CodeEditor.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+import type { CodeEditorProps } from "./types";
+import { splitLines } from "./devUtils";
+
+export function CodeEditor({
+  value,
+  onChange,
+  language = "text",
+  readonly,
+  readOnly,
+  schemaRef,
+  className,
+  disabled,
+  onScroll,
+  rows,
+  wrap,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel,
+  ...props
+}: CodeEditorProps) {
+  const lines = splitLines(value);
+  const isReadonly = readonly ?? readOnly ?? false;
+  const isInvalid =
+    ariaInvalid === true ||
+    ariaInvalid === "true" ||
+    ariaInvalid === "grammar" ||
+    ariaInvalid === "spelling";
+  const languageLabel = language || "text";
+  const lineCount = lines.length;
+  const visibleRows = rows ?? Math.min(Math.max(lineCount, 8), 16);
+  const statusId = React.useId();
+  const gutterRef = React.useRef<HTMLDivElement>(null);
+  const describedBy = [ariaDescribedBy, statusId].filter(Boolean).join(" ") || undefined;
+  const modeLabel = disabled ? "Disabled" : isReadonly ? "Read-only" : "Editable";
+
+  const handleScroll = (event: React.UIEvent<HTMLTextAreaElement>) => {
+    if (gutterRef.current) {
+      gutterRef.current.scrollTop = event.currentTarget.scrollTop;
+    }
+
+    onScroll?.(event);
+  };
+
+  return (
+    <section
+      className={`eth-dev-code-editor ${className ?? ""}`}
+      data-eth-component="CodeEditor"
+      data-language={language}
+      data-readonly={isReadonly ? "true" : undefined}
+      data-disabled={disabled ? "true" : undefined}
+      data-invalid={isInvalid ? "true" : undefined}
+      data-schema-ref={schemaRef}
+    >
+      <header className="eth-dev-code-editor__header">
+        <div className="eth-dev-code-editor__heading">
+          <span className="eth-dev-code-editor__title">Code editor</span>
+          <span className="eth-dev-code-editor__language">{languageLabel}</span>
+        </div>
+        <div className="eth-dev-code-editor__badges" aria-hidden="true">
+          <span className="eth-dev-code-editor__badge">{modeLabel}</span>
+          {schemaRef ? <span className="eth-dev-code-editor__badge">{schemaRef}</span> : null}
+        </div>
+      </header>
+      <div className="eth-dev-code-editor__body">
+        <div ref={gutterRef} className="eth-dev-code-editor__gutter" aria-hidden="true">
+          {lines.map((_, index) => (
+            <span key={index}>{index + 1}</span>
+          ))}
+        </div>
+        <textarea
+          {...props}
+          aria-describedby={describedBy}
+          aria-invalid={ariaInvalid}
+          aria-label={ariaLabel ?? `${languageLabel} code editor`}
+          value={value}
+          disabled={disabled}
+          readOnly={isReadonly}
+          rows={visibleRows}
+          spellCheck={false}
+          wrap={wrap ?? "off"}
+          className="eth-dev-code-editor__textarea"
+          onChange={(event) => onChange?.(event.currentTarget.value)}
+          onScroll={handleScroll}
+        />
+      </div>
+      <footer id={statusId} className="eth-dev-code-editor__footer">
+        <span>{modeLabel}</span>
+        <span>
+          {lineCount} {lineCount === 1 ? "line" : "lines"} / {value.length} chars
+        </span>
+      </footer>
+    </section>
+  );
+}

package/src/components/CommitList.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { EmptyState } from "@echothink-ui/core";
+import { DataTable, type DataColumn } from "@echothink-ui/data";
+import type { CommitListProps, CommitRow } from "./types";
+import { compactSha } from "./devUtils";
+
+function authorInitials(author: string) {
+  const parts = author.trim().split(/\s+/).filter(Boolean);
+  if (!parts.length) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase();
+}
+
+export function CommitList({ commits, className, ...props }: CommitListProps) {
+  const latestCommit = commits[0];
+  const authorCount = new Set(commits.map((commit) => commit.author)).size;
+  const columns: DataColumn<CommitRow>[] = [
+    {
+      key: "sha",
+      header: "SHA",
+      width: "8.5rem",
+      render: (row) => (
+        <code className="eth-dev-commit-list__sha" title={row.sha}>
+          {compactSha(row.sha)}
+        </code>
+      )
+    },
+    {
+      key: "message",
+      header: "Message",
+      render: (row) => (
+        <span className="eth-dev-commit-list__message" title={row.message}>
+          {row.message}
+        </span>
+      )
+    },
+    {
+      key: "author",
+      header: "Author",
+      width: "12rem",
+      render: (row) => (
+        <span className="eth-dev-commit-list__author">
+          <span className="eth-dev-commit-list__avatar" aria-hidden="true">
+            {authorInitials(row.author)}
+          </span>
+          <span className="eth-dev-commit-list__author-name">{row.author}</span>
+        </span>
+      )
+    },
+    {
+      key: "date",
+      header: "Date",
+      width: "10rem",
+      render: (row) => <span className="eth-dev-commit-list__date">{row.date}</span>
+    }
+  ];
+
+  return (
+    <section
+      {...props}
+      aria-label={props["aria-label"] ?? "Commit history"}
+      className={`eth-dev-commit-list ${className ?? ""}`}
+      data-eth-component="CommitList"
+    >
+      <header className="eth-dev-commit-list__header">
+        <div className="eth-dev-commit-list__heading">
+          <p>Source control</p>
+          <h3>Commit history</h3>
+        </div>
+        <dl className="eth-dev-commit-list__summary" aria-label="Commit history summary">
+          <div>
+            <dt>Commits</dt>
+            <dd>{commits.length}</dd>
+          </div>
+          <div>
+            <dt>Authors</dt>
+            <dd>{authorCount}</dd>
+          </div>
+          <div>
+            <dt>Latest</dt>
+            <dd>{latestCommit ? compactSha(latestCommit.sha) : "None"}</dd>
+          </div>
+        </dl>
+      </header>
+      <DataTable
+        rows={commits}
+        columns={columns}
+        rowKey="sha"
+        density="compact"
+        className="eth-dev-commit-list__table"
+        emptyState={
+          <EmptyState
+            title="No commits"
+            description="Commit history will appear when this branch receives changes."
+          />
+        }
+      />
+    </section>
+  );
+}