@rtk-devtools/ui 0.1.0 → 0.3.1

package/README.md

@@ -0,0 +1,89 @@
+<p align="center">
+  <a href="https://lilohq.com">
+    <img src="../../lilo-logo.svg" alt="Lilo" width="200" />
+  </a>
+  <br />
+  This project couldn't be possible without <a href="https://lilohq.com">lilohq.com</a>.
+</p>
+
+---
+
+# @rtk-devtools/ui
+
+Shared React UI components and panels for RTK Devtools. This package provides the themed panel views and reusable components used by `@rtk-devtools/react`.
+
+This package is part of [RTK Devtools](https://github.com/enBonnet/rtk-devtools). For the full devtools experience, install all three packages:
+
+```bash
+npm install @rtk-devtools/core @rtk-devtools/ui @rtk-devtools/react
+```
+
+## Install
+
+```bash
+npm install @rtk-devtools/ui
+# or
+pnpm add @rtk-devtools/ui
+```
+
+## API
+
+### Panels
+
+| Panel                | Description                                                                                                                                                   |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `QueriesPanel`       | Browse cached queries with status, timing, subscriber count, and cache expiration countdowns. Master-detail view with data inspection, filtering, and sorting |
+| `MutationsPanel`     | Track mutation lifecycle with arguments, results, errors, and which tags each mutation invalidated                                                            |
+| `TagsPanel`          | Three-column visualization of tag relationships: tag types, provider queries, and invalidator mutations                                                       |
+| `SubscriptionsPanel` | Table view of subscriber counts per cache entry, polling intervals, and expiring cache entries with countdown timers                                          |
+| `TimelinePanel`      | Chronological event log of all RTK Query activity: starts, completions, failures, invalidations, and subscription changes                                     |
+
+### Components
+
+| Component         | Description                                                                             |
+| ----------------- | --------------------------------------------------------------------------------------- |
+| `StatusBadge`     | Query/mutation status indicator (pending, fulfilled, rejected)                          |
+| `TagChip`         | Tag type display chip                                                                   |
+| `CacheKeyDisplay` | Formatted cache key display                                                             |
+| `DataExplorer`    | Collapsible JSON data inspector                                                         |
+| `PanelTabs`       | Tab navigation for panels. Accepts `TabItem[]` with `id`, `label`, and optional `count` |
+| `SearchFilter`    | Search and filter input                                                                 |
+| `TimeAgo`         | Relative timestamp display                                                              |
+| `TimingBar`       | Visual timing indicator                                                                 |
+
+### Theme
+
+Built-in dark and light themes using [goober](https://github.com/cristianbote/goober) for CSS-in-JS.
+
+| Export                  | Description                                                                       |
+| ----------------------- | --------------------------------------------------------------------------------- |
+| `DevtoolsThemeProvider` | Theme context provider. Accepts a `mode` prop: `"light"`, `"dark"`, or `"system"` |
+| `useTheme()`            | Hook to access the current `Theme` object inside the provider                     |
+| `lightTheme`            | Light theme token set                                                             |
+| `darkTheme`             | Dark theme token set                                                              |
+
+```tsx
+import {
+  DevtoolsThemeProvider,
+  lightTheme,
+  darkTheme,
+  useTheme,
+} from "@rtk-devtools/ui";
+```
+
+### Exported Types
+
+`ThemeMode`, `Theme`, `TabItem`
+
+## Peer Dependencies
+
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+
+## Inspiration
+
+This project is inspired by [TanStack DevTools](https://github.com/tanstack/devtools).
+
+## License
+
+MIT

package/dist/index.cjs

@@ -449,9 +449,14 @@ function ExpandToggle({
     }
   );
 }
-function PanelTabs({ tabs, activeTab, onTabChange }) {
+function PanelTabs({
+  tabs,
+  activeTab,
+  onTabChange,
+  onClose
+}) {
   const { theme } = useTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: goober.css({
@@ -459,44 +464,86 @@ function PanelTabs({ tabs, activeTab, onTabChange }) {
         alignItems: "center",
         borderBottom: `1px solid ${theme.border.primary}`,
         backgroundColor: theme.bg.secondary,
-        padding: "0 8px",
-        gap: "2px",
-        overflowX: "auto",
         flexShrink: 0
       }),
-      children: tabs.map((tab) => {
-        const isActive = tab.id === activeTab;
-        return /* @__PURE__ */ jsxRuntime.jsxs(
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: goober.css({
+              display: "flex",
+              alignItems: "center",
+              padding: "0 8px",
+              gap: "2px",
+              overflowX: "auto",
+              flex: 1,
+              minWidth: 0
+            }),
+            children: tabs.map((tab) => {
+              const isActive = tab.id === activeTab;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => onTabChange(tab.id),
+                  className: goober.css({
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "4px",
+                    padding: "8px 12px",
+                    border: "none",
+                    background: "none",
+                    color: isActive ? theme.text.link : theme.text.secondary,
+                    fontSize: "12px",
+                    fontWeight: isActive ? 600 : 400,
+                    cursor: "pointer",
+                    borderBottom: isActive ? `2px solid ${theme.brand[500]}` : "2px solid transparent",
+                    marginBottom: "-1px",
+                    whiteSpace: "nowrap",
+                    transition: "color 0.15s, border-color 0.15s",
+                    ":hover": {
+                      color: theme.text.primary
+                    }
+                  }),
+                  children: [
+                    tab.label,
+                    tab.count !== void 0 && tab.count > 0 && /* @__PURE__ */ jsxRuntime.jsx(CountBadge, { count: tab.count, active: isActive })
+                  ]
+                },
+                tab.id
+              );
+            })
+          }
+        ),
+        onClose && /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: () => onTabChange(tab.id),
+            onClick: onClose,
+            "aria-label": "Close devtools",
             className: goober.css({
               display: "inline-flex",
               alignItems: "center",
-              gap: "4px",
-              padding: "8px 12px",
+              justifyContent: "center",
+              width: "28px",
+              height: "28px",
+              margin: "0 4px",
               border: "none",
               background: "none",
-              color: isActive ? theme.text.link : theme.text.secondary,
-              fontSize: "12px",
-              fontWeight: isActive ? 600 : 400,
+              color: theme.text.secondary,
+              fontSize: "14px",
+              lineHeight: 1,
               cursor: "pointer",
-              borderBottom: isActive ? `2px solid ${theme.brand[500]}` : "2px solid transparent",
-              marginBottom: "-1px",
-              whiteSpace: "nowrap",
-              transition: "color 0.15s, border-color 0.15s",
+              borderRadius: "4px",
+              flexShrink: 0,
+              transition: "color 0.15s, background-color 0.15s",
               ":hover": {
-                color: theme.text.primary
+                color: theme.text.primary,
+                backgroundColor: theme.bg.tertiary
               }
             }),
-            children: [
-              tab.label,
-              tab.count !== void 0 && tab.count > 0 && /* @__PURE__ */ jsxRuntime.jsx(CountBadge, { count: tab.count, active: isActive })
-            ]
-          },
-          tab.id
-        );
-      })
+            children: "\u2715"
+          }
+        )
+      ]
     }
   );
 }