lynx-console 0.0.0

package/src/components/LogPanel.tsx

@@ -0,0 +1,241 @@
+import { useEffect, useRef, useState } from "@lynx-js/react";
+import type { BaseEvent, InputInputEvent, NodesRef } from "@lynx-js/types";
+import { stringify } from "javascript-stringify";
+import type { LogEntry } from "../types";
+import * as css from "./ConsolePanel.css";
+
+interface LogPanelProps {
+  logs: LogEntry[];
+  clearLogs: () => void;
+}
+
+const runCode = (code: string) => {
+  try {
+    // biome-ignore lint: intentional REPL tool
+    const result = eval(code);
+    if (result instanceof Promise) {
+      result.then((r) => console.log(r)).catch((e) => console.error(e));
+    } else {
+      console.log(result);
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
+  const [expandedArgs, setExpandedArgs] = useState(new Set());
+  const [code, setCode] = useState("");
+  const inputRef = useRef<NodesRef>(null);
+  const listRef = useRef<NodesRef>(null);
+  const logsRef = useRef(logs);
+  logsRef.current = logs;
+
+  const scrollToBottom = (smooth: boolean) => {
+    if (logsRef.current.length === 0) return;
+    listRef.current
+      ?.invoke({
+        method: "scrollToPosition",
+        params: { position: logsRef.current.length - 1, smooth },
+      })
+      .exec();
+  };
+
+  useEffect(() => {
+    scrollToBottom(true);
+  }, [logs]);
+
+  const toggleArg = (key: string) => {
+    setExpandedArgs((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+
+  const handleRun = () => {
+    const trimmed = code.trim();
+    if (!trimmed) return;
+
+    setCode("");
+    inputRef.current
+      ?.invoke({ method: "setValue", params: { value: "" } })
+      .exec();
+    runCode(trimmed);
+    setTimeout(() => scrollToBottom(false), 100);
+  };
+
+  const renderArg = (
+    arg: unknown,
+    parentKey: string,
+    level: "log" | "info" | "warn" | "error",
+  ): React.ReactNode => {
+    const key = parentKey;
+    const isExpanded = expandedArgs.has(key);
+
+    if (arg === null) {
+      return <text className={css.argNull}>null</text>;
+    }
+
+    if (arg === undefined) {
+      return <text className={css.argUndefined}>undefined</text>;
+    }
+
+    if (typeof arg === "string") {
+      const MAX_LENGTH = 80;
+      const shouldTruncate = arg.length > MAX_LENGTH;
+
+      if (!shouldTruncate) {
+        return <text className={css.argString({ level })}>{arg}</text>;
+      }
+
+      // 문자열이 길 경우 토글 버튼 추가
+      return (
+        <view className={css.argObject}>
+          <view className={css.argObjectHeader} bindtap={() => toggleArg(key)}>
+            <text className={css.toggleIndicator}>
+              {isExpanded ? "▼" : "▶"}
+            </text>
+            <text className={css.argString({ level })}>
+              {isExpanded ? arg : `${arg.slice(0, MAX_LENGTH)}...`}
+            </text>
+          </view>
+        </view>
+      );
+    }
+
+    if (typeof arg === "number" || typeof arg === "boolean") {
+      return <text className={css.argPrimitive({ level })}>{String(arg)}</text>;
+    }
+
+    if (typeof arg === "object") {
+      let preview = "Object";
+      if (Array.isArray(arg)) {
+        preview = `Array(${arg.length})`;
+      } else if (arg instanceof Map) {
+        preview = `Map(${arg.size})`;
+      } else if (arg instanceof Set) {
+        preview = `Set(${arg.size})`;
+      } else if (arg instanceof Date) {
+        preview = `Date`;
+      } else if (arg instanceof RegExp) {
+        preview = `RegExp`;
+      } else if (arg instanceof Error) {
+        preview = `${arg.constructor.name}`;
+      } else if (arg?.constructor?.name && arg.constructor.name !== "Object") {
+        preview = arg.constructor.name;
+      }
+
+      let jsonString: string;
+      if (arg instanceof Map) {
+        const entries = Array.from(arg.entries()).map(
+          ([k, v]) => `  [${stringify(k)}, ${stringify(v)}]`,
+        );
+        jsonString = `{\n${entries.join(",\n")}\n}`;
+      } else if (arg instanceof Set) {
+        const values = Array.from(arg.values()).map((v) => stringify(v));
+        jsonString = `{\n${values.join(", ")}\n}`;
+      } else {
+        jsonString =
+          stringify(arg, null, 2, { references: true }) ?? String(arg);
+      }
+
+      return (
+        <view className={css.argObject}>
+          <view className={css.argObjectHeader} bindtap={() => toggleArg(key)}>
+            <text className={css.toggleIndicator}>
+              {isExpanded ? "▼" : "▶"}
+            </text>
+            <text className={css.argObjectPreview}>{preview}</text>
+          </view>
+          {isExpanded && (
+            <view className={css.argObjectContent}>
+              <text className={css.argObjectJson}>{jsonString}</text>
+            </view>
+          )}
+        </view>
+      );
+    }
+
+    return <text className={css.argPrimitive({ level })}>{String(arg)}</text>;
+  };
+
+  return (
+    <view className={css.logContainer}>
+      <view className={css.logHeader}>
+        <text className={css.logCount}>Total {logs.length} logs</text>
+        <view style={{ display: "flex", flexDirection: "row", gap: 8 }}>
+          <view className={css.clearButton} bindtap={clearLogs}>
+            <text className={css.clearButtonText}>Clear</text>
+          </view>
+        </view>
+      </view>
+      <list
+        ref={listRef}
+        scroll-orientation="vertical"
+        className={css.logList}
+        initial-scroll-index={Math.max(0, logs.length - 1)}
+      >
+        {logs.length === 0 ? (
+          <list-item item-key="empty-state">
+            <view className={css.placeholder}>
+              <text className={css.placeholderText}>
+                No logs yet. Try console.log("Hello!")
+              </text>
+            </view>
+          </list-item>
+        ) : (
+          logs.map((log) => {
+            return (
+              <list-item key={log.id} item-key={log.id}>
+                <view className={css.logItem({ level: log.level })}>
+                  <view className={css.logItemHeader}>
+                    <text className={css.logLevel({ level: log.level })}>
+                      {log.level.toUpperCase()}
+                    </text>
+                    <text className={css.logTime}>
+                      {new Date(log.timestamp).toISOString()}
+                    </text>
+                  </view>
+                  <view className={css.logArgsContainer}>
+                    {log.args.map((arg, index) => (
+                      <view
+                        key={`${log.id}-${index.toString()}`}
+                        className={css.logArgItem}
+                      >
+                        {renderArg(
+                          arg,
+                          `${log.id}-${index.toString()}`,
+                          log.level,
+                        )}
+                      </view>
+                    ))}
+                  </view>
+                </view>
+              </list-item>
+            );
+          })
+        )}
+      </list>
+      <view className={css.replInputRow}>
+        <text className={css.replPrompt}>{"›"}</text>
+        <input
+          ref={inputRef}
+          className={css.replInput}
+          placeholder="enter code..."
+          bindinput={(e: BaseEvent<"bindinput", InputInputEvent>) =>
+            setCode(e.detail.value)
+          }
+          bindconfirm={handleRun}
+        />
+        <view className={css.replRunButton} bindtap={handleRun}>
+          <text className={css.replRunButtonText}>Run</text>
+        </view>
+      </view>
+    </view>
+  );
+};

package/src/components/NetworkDetailSection.tsx

@@ -0,0 +1,42 @@
+import * as css from "./NetworkPanel.css";
+
+interface NetworkDetailSectionProps {
+  headers?: Record<string, string> | undefined;
+  body?: string | undefined;
+  error?: string | undefined;
+}
+
+export const NetworkDetailSection = ({
+  headers = {},
+  body = "",
+  error = "",
+}: NetworkDetailSectionProps) => {
+  return (
+    <>
+      {/* Headers */}
+      <view className={css.detailSection}>
+        <text className={css.detailSectionTitle}>Headers</text>
+        {headers && Object.keys(headers).length > 0 ? (
+          <view className={css.table}>
+            {Object.entries(headers).map(([key, value]) => (
+              <view key={key} className={css.tableRow}>
+                <text className={css.tableKey}>{key}</text>
+                <text className={css.tableValue}>{value}</text>
+              </view>
+            ))}
+          </view>
+        ) : (
+          <text className={css.emptyText}>No headers</text>
+        )}
+      </view>
+
+      {/* Body */}
+      <view className={css.detailSection}>
+        <text className={css.detailSectionTitle}>Body</text>
+        {error && <text className={css.errorText}>{error}</text>}
+        {body && <text className={css.bodyText}>{body}</text>}
+        {!error && !body && <text className={css.emptyText}>No body</text>}
+      </view>
+    </>
+  );
+};

package/src/components/NetworkPanel.css.ts

@@ -0,0 +1,280 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { typography } from "../styles/typography";
+import { vars } from "../styles/vars";
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  paddingTop: 4,
+});
+
+export const header = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  marginBottom: 8,
+  paddingBottom: 4,
+  borderBottomWidth: 1,
+  borderBottomColor: vars.$color.stroke.neutralSubtle,
+  borderBottomStyle: "solid",
+});
+
+export const count = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutralSubtle,
+});
+
+export const clearButton = style({
+  padding: "6px 12px",
+  backgroundColor: vars.$color.bg.neutralWeak,
+  borderRadius: 4,
+});
+
+export const clearButtonText = style({
+  ...typography("t3", "medium"),
+  color: vars.$color.fg.neutral,
+});
+
+export const list = style({
+  flex: 1,
+});
+
+export const placeholder = style({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  height: "100%",
+});
+
+export const placeholderText = style({
+  ...typography("t4", "regular"),
+  color: vars.$color.fg.disabled,
+});
+
+export const item = recipe({
+  base: {
+    padding: "8px",
+    borderBottomWidth: 1,
+    borderBottomColor: vars.$color.stroke.neutralWeak,
+    borderBottomStyle: "solid",
+  },
+  variants: {
+    status: {
+      pending: {
+        backgroundColor: vars.$color.palette.gray100,
+      },
+      success: {},
+      error: {
+        backgroundColor: vars.$color.palette.red100,
+      },
+    },
+  },
+});
+
+export const itemHeader = style({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  marginBottom: 4,
+  gap: 8,
+});
+
+export const method = recipe({
+  base: {
+    ...typography("t2", "bold"),
+    padding: "0 4px",
+    borderRadius: 2,
+    color: vars.$color.fg.neutral,
+    backgroundColor: vars.$color.bg.neutralWeak,
+  },
+  variants: {
+    type: {
+      GET: {
+        color: vars.$color.palette.blue600,
+        backgroundColor: vars.$color.palette.blue100,
+      },
+      POST: {
+        color: vars.$color.palette.green600,
+        backgroundColor: vars.$color.palette.green100,
+      },
+      PUT: {
+        color: vars.$color.palette.yellow600,
+        backgroundColor: vars.$color.palette.yellow100,
+      },
+      PATCH: {
+        color: vars.$color.palette.purple600,
+        backgroundColor: vars.$color.palette.purple100,
+      },
+      DELETE: {
+        color: vars.$color.palette.red600,
+        backgroundColor: vars.$color.palette.red100,
+      },
+    },
+  },
+});
+
+export const statusCode = recipe({
+  base: {
+    ...typography("t2", "bold"),
+  },
+  variants: {
+    type: {
+      success: {
+        color: vars.$color.palette.green600,
+      },
+      error: {
+        color: vars.$color.palette.red600,
+      },
+      pending: {
+        color: vars.$color.fg.neutralSubtle,
+      },
+    },
+  },
+});
+
+export const time = style({
+  ...typography("t2", "regular"),
+  color: vars.$color.fg.neutralSubtle,
+});
+
+export const url = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutral,
+  wordBreak: "break-all",
+  marginBottom: 4,
+});
+
+export const path = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutral,
+  wordBreak: "break-all",
+  whiteSpace: "pre-wrap",
+  overflow: "visible",
+  marginBottom: 4,
+});
+
+export const details = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutralSubtle,
+});
+
+export const detailsContainer = style({
+  marginTop: 12,
+  paddingTop: 12,
+  borderTopWidth: 1,
+  borderTopColor: vars.$color.stroke.neutralSubtle,
+  borderTopStyle: "solid",
+});
+
+export const tabs = style({
+  display: "flex",
+  flexDirection: "row",
+  gap: 4,
+  paddingBottom: 6,
+});
+
+export const tab = recipe({
+  base: {
+    padding: "4px 8px",
+    borderRadius: 4,
+    cursor: "pointer",
+  },
+  variants: {
+    active: {
+      true: {
+        backgroundColor: vars.$color.bg.neutralWeak,
+      },
+      false: {
+        backgroundColor: "transparent",
+      },
+    },
+  },
+});
+
+export const tabText = recipe({
+  base: {
+    ...typography("t4", "medium"),
+  },
+  variants: {
+    active: {
+      true: {
+        color: vars.$color.fg.neutral,
+      },
+      false: {
+        color: vars.$color.fg.neutralSubtle,
+      },
+    },
+  },
+});
+
+export const tabContent = style({
+  paddingTop: 8,
+});
+
+export const detailSection = style({
+  marginBottom: 12,
+});
+
+export const detailSectionTitle = style({
+  ...typography("t3", "bold"),
+  color: vars.$color.fg.neutral,
+  marginBottom: 8,
+});
+
+export const table = style({
+  display: "flex",
+  flexDirection: "column",
+  gap: 4,
+});
+
+export const tableRow = style({
+  display: "flex",
+  flexDirection: "row",
+  gap: 8,
+  padding: "4px 8px",
+  backgroundColor: vars.$color.bg.neutralWeak,
+  borderRadius: 2,
+});
+
+export const tableKey = style({
+  ...typography("t3", "bold"),
+  color: vars.$color.fg.neutralSubtle,
+  minWidth: 70,
+  flexShrink: 0,
+});
+
+export const tableValue = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutral,
+  wordBreak: "break-all",
+  flex: 1,
+});
+
+export const bodyText = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.neutral,
+  padding: 8,
+  backgroundColor: vars.$color.bg.neutralWeak,
+  borderRadius: 4,
+  wordBreak: "break-all",
+  whiteSpace: "pre-wrap",
+});
+
+export const errorText = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.palette.red600,
+  padding: 8,
+  backgroundColor: vars.$color.palette.red100,
+  borderRadius: 4,
+  wordBreak: "break-all",
+});
+
+export const emptyText = style({
+  ...typography("t3", "regular"),
+  color: vars.$color.fg.disabled,
+  textAlign: "center",
+  padding: "16px 0",
+});