feat: implement tab based UI

packages/swr-devtools/src/cache.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { cache } from "swr";
 
-type CacheData = {
+export type CacheData = {
   id: number;
   key: string;
   data: any;

packages/swr-devtools/src/components/Panel.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import * as CSS from "csstype";
+import { CacheData } from "../cache";
+
+const panelStyle: CSS.Properties = {
+  display: "flex",
+  justifyContent: "space-around",
+  padding: "2px",
+  height: "100%",
+};
+
+const logsStyle: CSS.Properties = {
+  overflow: "scroll",
+  overflowY: "scroll",
+  height: "100%",
+  margin: "0.2rem",
+  listStyle: "none",
+  paddingInlineStart: "0",
+};
+
+const logLineStyle: CSS.Properties = {
+  borderBottom: "solid 1px #CCC",
+  height: "100%",
+};
+
+const CacheDetail = ({ data }: { data: CacheData }) => (
+  <ul style={logLineStyle}>
+    <li>data: {JSON.stringify(data.data)}</li>
+    <li>isValidating: {data.isValidating.toString()}</li>
+    <li>error: {data.error || "null"}</li>
+  </ul>
+);
+
+const panelItemStyle: CSS.Properties = {
+  flex: 1,
+};
+
+const panelTitleStyle: CSS.Properties = {
+  margin: "5px",
+};
+
+export const Panel = ({ data: cacheData }: { data: CacheData[] }) => {
+  const [selectedItemKey, setSelectedItemKey] = useState<string | null>(null);
+  return (
+    <section style={panelStyle}>
+      <div style={panelItemStyle}>
+        <h3 style={panelTitleStyle}>Keys</h3>
+        <ul style={logsStyle}>
+          {cacheData.map(({ id, key, timestampString }) => (
+            <li
+              key={id}
+              style={
+                selectedItemKey === key
+                  ? { backgroundColor: "#DDD", padding: "0.3rem 0" }
+                  : { padding: "0.3rem 0" }
+              }
+            >
+              <button
+                style={{
+                  display: "inline-block",
+                  width: "100%",
+                  height: "100%",
+                  border: "none",
+                  background: "transparent",
+                  textAlign: "left",
+                }}
+                onClick={() => setSelectedItemKey(key)}
+              >
+                {key} ({timestampString})
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <hr />
+      <div style={panelItemStyle}>
+        <h3 style={panelTitleStyle}>Data</h3>
+        {selectedItemKey !== null && (
+          <CacheDetail
+            data={cacheData.find((c) => c.key === selectedItemKey)!}
+          />
+        )}
+      </div>
+    </section>
+  );
+};

packages/swr-devtools/src/components/SWRDevTool.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import * as CSS from "csstype";
+import { useSWRCache } from "../cache";
+import { Panel } from "./Panel";
+
+const devToolWindowStyle: CSS.Properties = {
+  position: "fixed",
+  bottom: 0,
+  width: "100%",
+  height: "400px",
+  backgroundColor: "#EEE",
+};
+
+const tabStyle: CSS.Properties = {
+  display: "inline-block",
+  width: "100%",
+  height: "100%",
+  border: "none",
+  borderBottom: "none",
+};
+
+const currentTabStyle: CSS.Properties = {
+  display: "inline-block",
+  width: "100%",
+  height: "100%",
+  border: "none",
+  borderBottom: "solid 2px red",
+};
+
+const Tab = ({
+  label,
+  current,
+  onChange,
+}: {
+  label: string;
+  current: boolean;
+  onChange: () => void;
+}) => (
+  <li style={{ width: "100%", height: "44px" }}>
+    <button
+      type="button"
+      onClick={onChange}
+      style={current ? currentTabStyle : tabStyle}
+    >
+      {label}
+    </button>
+  </li>
+);
+
+const tabGroupStyle: CSS.Properties = {
+  display: "flex",
+  justifyContent: "space-around",
+  borderBottom: "solid 1px #CCC",
+  marginTop: "3px",
+  marginBottom: "3px",
+  listStyle: "none",
+  paddingInlineStart: "0",
+};
+
+type Panel = { label: string; key: "current" | "logs" };
+
+const panels: Panel[] = [
+  {
+    label: "Current Cache",
+    key: "current",
+  },
+  {
+    label: "Cache Logs",
+    key: "logs",
+  },
+];
+
+const TabGroup = ({
+  tabs,
+  current,
+  onChange,
+}: {
+  tabs: Panel[];
+  current: Panel["key"];
+  onChange: (active: Panel["key"]) => void;
+}) => (
+  <ul style={tabGroupStyle}>
+    {tabs.map((tab) => (
+      <Tab
+        key={tab.key}
+        label={tab.label}
+        current={tab.key === current}
+        onChange={() => onChange(tab.key)}
+      />
+    ))}
+  </ul>
+);
+
+export const SWRDevTools = () => {
+  const [latestCache, cacheLogs] = useSWRCache();
+  const [activePanel, setActivePanel] = useState<Panel["key"]>("current");
+
+  return (
+    <div style={devToolWindowStyle}>
+      <TabGroup tabs={panels} current={activePanel} onChange={setActivePanel} />
+      {activePanel === "current" && <Panel data={latestCache} />}
+      {activePanel === "logs" && <Panel data={cacheLogs} />}
+    </div>
+  );
+};

packages/swr-devtools/src/index.ts

@@ -1 +1 @@
-export { SWRDevTools } from "./SWRDevTool";
+export { SWRDevTools } from "./components/SWRDevTool";