Feat/improve UI library (#94)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: AlemTuzlak

.changeset/tidy-worlds-drop.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools-ui': patch
+'@tanstack/devtools': patch
+---
+
+improvements for tree view, added icons to devtools-ui, extracted components out of devtools core into ui, panel header

examples/react/basic/package.json

@@ -20,6 +20,7 @@
     "zod": "^4.0.14"
   },
   "devDependencies": {
+    "@tanstack/devtools-ui": "0.3.2",
     "@tanstack/devtools-vite": "0.2.10",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",

examples/react/basic/src/button.tsx

@@ -1,3 +1,3 @@
-export const Button = (props: any) => {
+export function Button(props: any) {
   return <button {...props} />
 }

examples/react/basic/src/feature.tsx

@@ -1,7 +1,7 @@
 import { Button } from './button'
 import { ButtonWithProps } from './button-with-props-only'
 
-export const Feature = () => {
+export function Feature() {
   return (
     <div>
       <h2>Feature component</h2>

examples/react/basic/src/index.tsx

@@ -171,6 +171,14 @@ function App() {
     <div>
       <Context.Provider value={{ count: state, setCount: setState }}>
         <QueryClientProvider client={queryClient}>
+          <h1>TanStack Devtools React Basic Example</h1>
+          current count: {state}
+          <Button onClick={() => setState(state + 1)}>Click me</Button>
+          <Button onClick={() => setWin(window.open('', '', 'popup'))}>
+            Click me to open new window
+          </Button>
+          {win && createPortal(<Mounted />, win.document.body)}
+          <Feature />
           <p>
             As you visit the posts below, you will notice them in a loading
             state the first time you load them. However, after you return to
@@ -189,14 +197,6 @@ function App() {
           )}
           <Devtools />
         </QueryClientProvider>
-        <h1>TanStack Devtools React Basic Example</h1>
-        current count: {state}
-        <Button onClick={() => setState(state + 1)}>Click me</Button>
-        <Button onClick={() => setWin(window.open('', '', 'popup'))}>
-          Click me to open new window
-        </Button>
-        {win && createPortal(<Mounted />, win.document.body)}
-        <Feature />
       </Context.Provider>
     </div>
   )

package.json

@@ -48,7 +48,7 @@
   "size-limit": [
     {
       "path": "packages/devtools/dist/esm/index.js",
-      "limit": "30 KB"
+      "limit": "40 KB"
     },
     {
       "path": "packages/event-bus-client/dist/esm/plugin.js",

packages/devtools-ui/package.json

@@ -19,17 +19,18 @@
   ],
   "type": "module",
   "types": "dist/esm/index.d.ts",
-  "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.js",
   "exports": {
     ".": {
       "import": {
         "types": "./dist/esm/index.d.ts",
         "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.cts",
-        "default": "./dist/cjs/index.cjs"
+      }
+    },
+    "./icons": {
+      "import": {
+        "types": "./dist/esm/icons.d.ts",
+        "default": "./dist/esm/icons.js"
       }
     },
     "./package.json": "./package.json"

packages/devtools-ui/src/components/header.tsx

@@ -0,0 +1,44 @@
+import clsx from 'clsx'
+import { useStyles } from '../styles/use-styles'
+import type { JSX } from 'solid-js/jsx-runtime'
+
+export function Header({
+  children,
+  class: className,
+  ...rest
+}: JSX.IntrinsicElements['header']) {
+  const styles = useStyles()
+  return (
+    <header
+      class={clsx(styles().header.row, 'tsqd-header', className)}
+      {...rest}
+    >
+      {children}
+    </header>
+  )
+}
+
+export function HeaderLogo({
+  children,
+  flavor,
+}: {
+  children: JSX.Element
+  flavor: {
+    light: string
+    dark: string
+  }
+}) {
+  const styles = useStyles()
+  return (
+    <div class={styles().header.logoAndToggleContainer}>
+      <button class={clsx(styles().header.logo)}>
+        <span class={clsx(styles().header.tanstackLogo)}>TANSTACK</span>
+        <span
+          class={clsx(styles().header.flavorLogo(flavor.light, flavor.dark))}
+        >
+          {children}
+        </span>
+      </button>
+    </div>
+  )
+}