doe-sdk 0.1.0

package/templates/extension/src/components/shared/InfoControls.tsx

@@ -0,0 +1,281 @@
+/**
+ * InfoControls - Shared Workspace + Theme info controls
+ *
+ * Used by both InfoStep (onboarding) and InfoTab (sandbox)
+ */
+import React, { useState, useCallback, useEffect } from "react";
+import type { DOEExtensionAPI } from "doe-sdk/runtime";
+import type { Theme, WorkspaceInfo, UserBasicInfo } from "doe-sdk";
+import { useInteractivePointerDown } from "../../hooks/usePointerHandlers";
+import { spacing, colors, typography, buttonStyles, cardStyles } from "../../styles";
+
+export interface InfoControlsProps {
+  api: DOEExtensionAPI;
+  /** Callback when result changes (for parent to display) */
+  onResult?: (result: string) => void;
+}
+
+export function InfoControls({
+  api,
+  onResult,
+}: InfoControlsProps): React.ReactElement {
+  const [workspace, setWorkspace] = useState<WorkspaceInfo | null>(null);
+  const [user, setUser] = useState<UserBasicInfo | null>(null);
+  const [theme, setTheme] = useState<Theme | null>(null);
+  const handlePointerDown = useInteractivePointerDown();
+
+  const setResult = useCallback(
+    (msg: string) => {
+      onResult?.(msg);
+    },
+    [onResult]
+  );
+
+  // Load all info on mount
+  useEffect(() => {
+    const loadInfo = async () => {
+      try {
+        const [ws, usr, thm] = await Promise.all([
+          api.workspace.getInfo(),
+          api.workspace.getCurrentUser(),
+          api.ui.getTheme(),
+        ]);
+        setWorkspace(ws);
+        setUser(usr);
+        setTheme(thm);
+        setResult("Loaded workspace, user, and theme info");
+      } catch (error) {
+        setResult(`Error: ${error instanceof Error ? error.message : "Unknown"}`);
+      }
+    };
+    loadInfo();
+
+    // Subscribe to theme changes
+    const unsubscribe = api.events.onThemeChange((payload) => {
+      api.ui.getTheme().then(setTheme);
+      setResult(`Theme changed to ${payload.mode}`);
+    });
+
+    return unsubscribe;
+  }, [api, setResult]);
+
+  const refreshAll = useCallback(async () => {
+    try {
+      const [ws, usr, thm] = await Promise.all([
+        api.workspace.getInfo(),
+        api.workspace.getCurrentUser(),
+        api.ui.getTheme(),
+      ]);
+      setWorkspace(ws);
+      setUser(usr);
+      setTheme(thm);
+      setResult("Refreshed all info");
+    } catch (error) {
+      setResult(`Error: ${error instanceof Error ? error.message : "Unknown"}`);
+    }
+  }, [api, setResult]);
+
+  return (
+    <div>
+      {/* Workspace info */}
+      <div style={{ marginBottom: spacing.md }}>
+        <div
+          style={{
+            fontSize: typography.sizes.sm,
+            fontWeight: typography.weights.medium,
+            color: colors.textSecondary,
+            marginBottom: spacing.xs,
+          }}
+        >
+          Workspace
+        </div>
+        <div
+          style={{
+            ...cardStyles.base,
+            background: colors.backgroundHover,
+          }}
+        >
+          {workspace ? (
+            <div>
+              <div
+                style={{
+                  fontSize: typography.sizes.base,
+                  fontWeight: typography.weights.semibold,
+                  color: colors.text,
+                }}
+              >
+                {workspace.name}
+              </div>
+              <div
+                style={{
+                  fontSize: typography.sizes.xs,
+                  color: colors.textMuted,
+                  fontFamily: "monospace",
+                }}
+              >
+                ID: {workspace.id.slice(0, 8)}...
+              </div>
+            </div>
+          ) : (
+            <span style={{ color: colors.textMuted }}>Loading...</span>
+          )}
+        </div>
+      </div>
+
+      {/* User info */}
+      <div style={{ marginBottom: spacing.md }}>
+        <div
+          style={{
+            fontSize: typography.sizes.sm,
+            fontWeight: typography.weights.medium,
+            color: colors.textSecondary,
+            marginBottom: spacing.xs,
+          }}
+        >
+          Current User
+        </div>
+        <div
+          style={{
+            ...cardStyles.base,
+            background: colors.backgroundHover,
+            display: "flex",
+            alignItems: "center",
+            gap: spacing.sm,
+          }}
+        >
+          {user ? (
+            <>
+              <div
+                style={{
+                  width: 36,
+                  height: 36,
+                  borderRadius: "50%",
+                  background: colors.primaryLight,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  overflow: "hidden",
+                }}
+              >
+                {user.avatarUrl ? (
+                  <img
+                    src={user.avatarUrl}
+                    alt={user.displayName}
+                    style={{ width: "100%", height: "100%", objectFit: "cover" }}
+                  />
+                ) : (
+                  <span style={{ fontSize: typography.sizes.lg }}>
+                    {user.displayName.charAt(0).toUpperCase()}
+                  </span>
+                )}
+              </div>
+              <div>
+                <div
+                  style={{
+                    fontSize: typography.sizes.base,
+                    fontWeight: typography.weights.medium,
+                    color: colors.text,
+                  }}
+                >
+                  {user.displayName}
+                </div>
+                <div
+                  style={{
+                    fontSize: typography.sizes.xs,
+                    color: colors.textMuted,
+                    fontFamily: "monospace",
+                  }}
+                >
+                  ID: {user.id.slice(0, 8)}...
+                </div>
+              </div>
+            </>
+          ) : (
+            <span style={{ color: colors.textMuted }}>Not signed in</span>
+          )}
+        </div>
+      </div>
+
+      {/* Theme info */}
+      <div style={{ marginBottom: spacing.md }}>
+        <div
+          style={{
+            fontSize: typography.sizes.sm,
+            fontWeight: typography.weights.medium,
+            color: colors.textSecondary,
+            marginBottom: spacing.xs,
+          }}
+        >
+          Theme
+        </div>
+        <div
+          style={{
+            ...cardStyles.base,
+            background: colors.backgroundHover,
+          }}
+        >
+          {theme ? (
+            <div>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: spacing.sm,
+                  marginBottom: spacing.sm,
+                }}
+              >
+                <span style={{ fontSize: typography.sizes.lg }}>
+                  {theme.mode === "dark" ? "🌙" : "☀️"}
+                </span>
+                <span
+                  style={{
+                    fontSize: typography.sizes.base,
+                    fontWeight: typography.weights.medium,
+                    color: colors.text,
+                    textTransform: "capitalize",
+                  }}
+                >
+                  {theme.mode} Mode
+                </span>
+              </div>
+              <div
+                style={{
+                  display: "flex",
+                  gap: spacing.xs,
+                  flexWrap: "wrap",
+                }}
+              >
+                {Object.entries(theme.colors)
+                  .slice(0, 6)
+                  .map(([name, colorValue]) => (
+                    <div
+                      key={name}
+                      title={`${name}: ${colorValue}`}
+                      style={{
+                        width: 24,
+                        height: 24,
+                        borderRadius: 4,
+                        background: colorValue as string,
+                        border: `1px solid ${colors.border}`,
+                      }}
+                    />
+                  ))}
+              </div>
+            </div>
+          ) : (
+            <span style={{ color: colors.textMuted }}>Loading...</span>
+          )}
+        </div>
+      </div>
+
+      {/* Refresh button */}
+      <button
+        onClick={refreshAll}
+        onPointerDown={handlePointerDown}
+        style={{ ...buttonStyles.secondary, width: "100%" }}
+      >
+        ↻ Refresh All
+      </button>
+    </div>
+  );
+}

package/templates/extension/src/components/shared/NetworkControls.tsx

@@ -0,0 +1,328 @@
+/**
+ * NetworkControls - Shared Network API controls
+ *
+ * Used by both NetworkStep (onboarding) and NetworkTab (playground).
+ * Demonstrates calling external APIs with real-world examples.
+ */
+import React, { useState, useCallback } from "react";
+import type { DOEExtensionAPI } from "doe-sdk/runtime";
+import { useInteractivePointerDown } from "../../hooks/usePointerHandlers";
+import { spacing, colors, typography, buttonStyles, inputStyles } from "../../styles";
+
+export interface NetworkControlsProps {
+  api: DOEExtensionAPI;
+  /** Callback when result changes (for parent to display) */
+  onResult?: (result: string) => void;
+}
+
+type ApiExample = "joke" | "github";
+
+interface ApiResult {
+  type: ApiExample;
+  data: JokeData | GitHubData | null;
+}
+
+interface JokeData {
+  joke: string;
+}
+
+interface GitHubData {
+  login: string;
+  name: string | null;
+  avatar_url: string;
+  public_repos: number;
+  followers: number;
+}
+
+export function NetworkControls({
+  api,
+  onResult,
+}: NetworkControlsProps): React.ReactElement {
+  const [githubUsername, setGithubUsername] = useState("torvalds");
+  const [result, setApiResult] = useState<ApiResult | null>(null);
+  const [loading, setLoading] = useState<ApiExample | null>(null);
+  const handlePointerDown = useInteractivePointerDown();
+
+  const setResult = useCallback(
+    (msg: string) => {
+      onResult?.(msg);
+    },
+    [onResult]
+  );
+
+  const fetchJoke = useCallback(async () => {
+    setLoading("joke");
+    setApiResult(null);
+    try {
+      const response = await api.network.fetch(
+        "https://icanhazdadjoke.com/",
+        {
+          timeout: 10000,
+          headers: { Accept: "application/json" },
+        }
+      );
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const data = await response.json<{ joke: string }>();
+      setApiResult({ type: "joke", data: { joke: data.joke } });
+      setResult("Fetched random joke from icanhazdadjoke.com");
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : "Unknown";
+      setResult(`Error: ${errorMsg}`);
+    } finally {
+      setLoading(null);
+    }
+  }, [api, setResult]);
+
+  const fetchGitHub = useCallback(async () => {
+    if (!githubUsername.trim()) {
+      setResult("Please enter a GitHub username");
+      return;
+    }
+    setLoading("github");
+    setApiResult(null);
+    try {
+      const response = await api.network.fetch(
+        `https://api.github.com/users/${encodeURIComponent(githubUsername.trim())}`,
+        { timeout: 10000 }
+      );
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          throw new Error("User not found");
+        }
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const data = await response.json<GitHubData>();
+      setApiResult({
+        type: "github",
+        data: {
+          login: data.login,
+          name: data.name,
+          avatar_url: data.avatar_url,
+          public_repos: data.public_repos,
+          followers: data.followers,
+        },
+      });
+      setResult(`Fetched GitHub profile: ${data.login}`);
+    } catch (error) {
+      const errorMsg = error instanceof Error ? error.message : "Unknown";
+      setResult(`Error: ${errorMsg}`);
+    } finally {
+      setLoading(null);
+    }
+  }, [api, githubUsername, setResult]);
+
+  return (
+    <div>
+      {/* API Examples Header */}
+      <div
+        style={{
+          fontSize: typography.sizes.sm,
+          color: colors.textSecondary,
+          marginBottom: spacing.sm,
+        }}
+      >
+        Try calling external APIs:
+      </div>
+
+      {/* Random Joke API */}
+      <div
+        style={{
+          background: colors.backgroundHover,
+          borderRadius: 8,
+          padding: spacing.md,
+          marginBottom: spacing.sm,
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: spacing.sm,
+          }}
+        >
+          <div>
+            <div
+              style={{
+                fontSize: typography.sizes.sm,
+                fontWeight: typography.weights.medium,
+                color: colors.text,
+              }}
+            >
+              🎭 Random Joke API
+            </div>
+            <div
+              style={{
+                fontSize: typography.sizes.xs,
+                color: colors.textMuted,
+              }}
+            >
+              icanhazdadjoke.com
+            </div>
+          </div>
+          <button
+            onClick={fetchJoke}
+            onPointerDown={handlePointerDown}
+            style={buttonStyles.primary}
+            disabled={loading !== null}
+          >
+            {loading === "joke" ? "..." : "Get Joke"}
+          </button>
+        </div>
+      </div>
+
+      {/* GitHub API */}
+      <div
+        style={{
+          background: colors.backgroundHover,
+          borderRadius: 8,
+          padding: spacing.md,
+          marginBottom: spacing.md,
+        }}
+      >
+        <div
+          style={{
+            fontSize: typography.sizes.sm,
+            fontWeight: typography.weights.medium,
+            color: colors.text,
+            marginBottom: spacing.xs,
+          }}
+        >
+          🐙 GitHub User API
+        </div>
+        <div
+          style={{
+            fontSize: typography.sizes.xs,
+            color: colors.textMuted,
+            marginBottom: spacing.sm,
+          }}
+        >
+          api.github.com
+        </div>
+        <div style={{ display: "flex", gap: spacing.sm }}>
+          <input
+            type="text"
+            value={githubUsername}
+            onChange={(e) => setGithubUsername(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && fetchGitHub()}
+            onPointerDown={handlePointerDown}
+            placeholder="GitHub username"
+            style={{ ...inputStyles.base, flex: 1 }}
+          />
+          <button
+            onClick={fetchGitHub}
+            onPointerDown={handlePointerDown}
+            style={buttonStyles.primary}
+            disabled={loading !== null}
+          >
+            {loading === "github" ? "..." : "Fetch"}
+          </button>
+        </div>
+      </div>
+
+      {/* Result display */}
+      {result?.data && (
+        <div
+          style={{
+            background: `linear-gradient(135deg, ${colors.primaryLight} 0%, #e0e7ff 100%)`,
+            borderRadius: 8,
+            padding: spacing.md,
+            animation: "fadeIn 0.3s ease-out",
+          }}
+        >
+          {result.type === "joke" && result.data && (
+            <div
+              style={{
+                fontSize: typography.sizes.base,
+                color: colors.text,
+                lineHeight: 1.5,
+                fontStyle: "italic",
+              }}
+            >
+              "{(result.data as JokeData).joke}"
+            </div>
+          )}
+          {result.type === "github" && result.data && (
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: spacing.md,
+              }}
+            >
+              <img
+                src={(result.data as GitHubData).avatar_url}
+                alt="avatar"
+                style={{
+                  width: 48,
+                  height: 48,
+                  borderRadius: "50%",
+                  border: `2px solid ${colors.primary}`,
+                }}
+              />
+              <div style={{ flex: 1 }}>
+                <div
+                  style={{
+                    fontSize: typography.sizes.base,
+                    fontWeight: typography.weights.semibold,
+                    color: colors.text,
+                  }}
+                >
+                  {(result.data as GitHubData).name || (result.data as GitHubData).login}
+                </div>
+                <div
+                  style={{
+                    fontSize: typography.sizes.xs,
+                    color: colors.textSecondary,
+                  }}
+                >
+                  @{(result.data as GitHubData).login}
+                </div>
+                <div
+                  style={{
+                    display: "flex",
+                    gap: spacing.md,
+                    marginTop: spacing.xs,
+                    fontSize: typography.sizes.xs,
+                    color: colors.textMuted,
+                  }}
+                >
+                  <span>{(result.data as GitHubData).public_repos} repos</span>
+                  <span>{(result.data as GitHubData).followers} followers</span>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Host permissions note */}
+      <div
+        style={{
+          marginTop: spacing.md,
+          fontSize: typography.sizes.xs,
+          color: colors.textMuted,
+        }}
+      >
+        Note: Network requests are limited to domains listed in{" "}
+        <code style={{ background: colors.backgroundHover, padding: "2px 4px", borderRadius: 4 }}>
+          hostPermissions
+        </code>{" "}
+        in manifest.json
+      </div>
+
+      <style>{`
+        @keyframes fadeIn {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+      `}</style>
+    </div>
+  );
+}