@tanstack/devtools 0.0.0 → 0.1.0

package/src/styles/use-styles.ts

@@ -1,7 +1,7 @@
 import * as goober from 'goober'
 import { createSignal } from 'solid-js'
 import { tokens } from './tokens'
-import type { DevtoolsSettings } from '../context/devtools-context'
+import type { TanStackDevtoolsConfig } from '../context/devtools-context'
 import type { Accessor } from 'solid-js'
 
 const stylesFactory = () => {
@@ -10,10 +10,14 @@ const stylesFactory = () => {
   const css = goober.css
 
   return {
-    devtoolsPanelContainer: css`
+    devtoolsPanelContainer: (
+      panelLocation: TanStackDevtoolsConfig['panelLocation'],
+    ) => css`
       direction: ltr;
       position: fixed;
-      bottom: 0;
+      overflow-y: hidden;
+      overflow-x: hidden;
+      ${panelLocation}: 0;
       right: 0;
       z-index: 99999;
       width: 100%;
@@ -75,13 +79,14 @@ const stylesFactory = () => {
       color: ${colors.gray[300]};
       width: w-screen;
       flex-direction: row;
-      overflow: auto;
+      overflow-x: hidden;
+      overflow-y: hidden;
       height: 100%;
     `,
-    dragHandle: css`
+    dragHandle: (panelLocation: TanStackDevtoolsConfig['panelLocation']) => css`
       position: absolute;
       left: 0;
-      top: 0;
+      ${panelLocation === 'bottom' ? 'top' : 'bottom'}: 0;
       width: 100%;
       height: 4px;
       cursor: row-resize;
@@ -105,13 +110,23 @@ const stylesFactory = () => {
       font-size: ${font.size.xs};
       cursor: pointer;
       transition: all 0.25s ease-out;
+      &:hide-until-hover {
+        opacity: 0;
+        pointer-events: none;
+        visibility: hidden;
+      }
+      &:hide-until-hover:hover {
+        opacity: 1;
+        pointer-events: auto;
+        visibility: visible;
+      }
       &:focus-visible {
         outline-offset: 2px;
         border-radius: ${border.radius.full};
         outline: 2px solid ${colors.blue[800]};
       }
     `,
-    mainCloseBtnPosition: (position: DevtoolsSettings['position']) => {
+    mainCloseBtnPosition: (position: TanStackDevtoolsConfig['position']) => {
       const base = css`
         ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}
         ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}
@@ -130,13 +145,23 @@ const stylesFactory = () => {
       `
       return base
     },
-    mainCloseBtnAnimation: (isOpen: boolean) => {
+    mainCloseBtnAnimation: (isOpen: boolean, hideUntilHover: boolean) => {
       if (!isOpen) {
-        return css`
-          opacity: 1;
-          pointer-events: auto;
-          visibility: visible;
-        `
+        return hideUntilHover
+          ? css`
+              opacity: 0;
+
+              &:hover {
+                opacity: 1;
+                pointer-events: auto;
+                visibility: visible;
+              }
+            `
+          : css`
+              opacity: 1;
+              pointer-events: auto;
+              visibility: visible;
+            `
       }
       return css`
         opacity: 0;
@@ -243,6 +268,225 @@ const stylesFactory = () => {
       height: 100%;
       overflow-y: auto;
     `,
+    selectWrapper: css`
+      width: 100%;
+      max-width: 300px;
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    `,
+    selectContainer: css`
+      width: 100%;
+    `,
+    selectLabel: css`
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${colors.gray[100]};
+    `,
+    selectDescription: css`
+      font-size: 0.8rem;
+      color: ${colors.gray[400]};
+      margin: 0;
+      line-height: 1.3;
+    `,
+    select: css`
+      appearance: none;
+      width: 100%;
+      padding: 0.75rem 3rem 0.75rem 0.75rem;
+      border-radius: 0.5rem;
+      background-color: ${colors.darkGray[800]};
+      color: ${colors.gray[100]};
+      border: 1px solid ${colors.gray[700]};
+      font-size: 0.875rem;
+      transition: all 0.2s ease;
+      cursor: pointer;
+
+      /* Custom arrow */
+      background-image: url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
+      background-repeat: no-repeat;
+      background-position: right 0.75rem center;
+      background-size: 1.25rem;
+
+      &:hover {
+        border-color: ${colors.gray[600]};
+      }
+
+      &:focus {
+        outline: none;
+        border-color: ${colors.purple[400]};
+        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
+      }
+    `,
+    inputWrapper: css`
+      width: 100%;
+      max-width: 300px;
+      display: flex;
+      flex-direction: column;
+      gap: 0.375rem;
+    `,
+    inputContainer: css`
+      width: 100%;
+    `,
+    inputLabel: css`
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${colors.gray[100]};
+    `,
+    inputDescription: css`
+      font-size: 0.8rem;
+      color: ${colors.gray[400]};
+      margin: 0;
+      line-height: 1.3;
+    `,
+    input: css`
+      appearance: none;
+      width: 100%;
+      padding: 0.75rem;
+      border-radius: 0.5rem;
+      background-color: ${colors.darkGray[800]};
+      color: ${colors.gray[100]};
+      border: 1px solid ${colors.gray[700]};
+      font-size: 0.875rem;
+      font-family: ${fontFamily.mono};
+      transition: all 0.2s ease;
+
+      &::placeholder {
+        color: ${colors.gray[500]};
+      }
+
+      &:hover {
+        border-color: ${colors.gray[600]};
+      }
+
+      &:focus {
+        outline: none;
+        border-color: ${colors.purple[400]};
+        box-shadow: 0 0 0 3px ${colors.purple[400]}${alpha[20]};
+      }
+    `,
+    checkboxWrapper: css`
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+      cursor: pointer;
+      user-select: none;
+      padding: 0.5rem;
+      border-radius: 0.5rem;
+      transition: background-color 0.2s ease;
+
+      &:hover {
+        background-color: ${colors.darkGray[800]};
+      }
+    `,
+    checkboxContainer: css`
+      width: 100%;
+    `,
+    checkboxLabelContainer: css`
+      display: flex;
+      flex-direction: column;
+      gap: 0.25rem;
+      flex: 1;
+    `,
+    checkbox: css`
+      appearance: none;
+      width: 1.25rem;
+      height: 1.25rem;
+      border: 2px solid ${colors.gray[700]};
+      border-radius: 0.375rem;
+      background-color: ${colors.darkGray[800]};
+      display: grid;
+      place-items: center;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
+      margin-top: 0.125rem;
+
+      &:hover {
+        border-color: ${colors.purple[400]};
+      }
+
+      &:checked {
+        background-color: ${colors.purple[500]};
+        border-color: ${colors.purple[500]};
+      }
+
+      &:checked::after {
+        content: '';
+        width: 0.4rem;
+        height: 0.6rem;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        transform: rotate(45deg);
+        margin-top: -3px;
+      }
+    `,
+    checkboxLabel: css`
+      color: ${colors.gray[100]};
+      font-size: 0.875rem;
+      font-weight: 500;
+      line-height: 1.4;
+    `,
+    checkboxDescription: css`
+      color: ${colors.gray[400]};
+      font-size: 0.8rem;
+      line-height: 1.3;
+    `,
+    settingsContainer: css`
+      padding: 1.5rem;
+      height: 100%;
+      overflow-y: auto;
+      background-color: ${colors.darkGray[700]};
+    `,
+    settingsSection: css`
+      margin-bottom: 2rem;
+      padding: 1.5rem;
+      background-color: ${colors.darkGray[800]};
+      border: 1px solid ${colors.gray[700]};
+      border-radius: 0.75rem;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    `,
+    sectionTitle: css`
+      font-size: 1.125rem;
+      font-weight: 600;
+      color: ${colors.gray[100]};
+      margin: 0 0 1rem 0;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid ${colors.gray[700]};
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    `,
+    sectionIcon: css`
+      color: ${colors.purple[400]};
+    `,
+    sectionDescription: css`
+      color: ${colors.gray[400]};
+      font-size: 0.875rem;
+      margin: 0 0 1.5rem 0;
+      line-height: 1.5;
+    `,
+    settingsGroup: css`
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    `,
+    conditionalSetting: css`
+      margin-left: 1.5rem;
+      padding-left: 1rem;
+      border-left: 2px solid ${colors.purple[400]};
+      background-color: ${colors.darkGray[800]};
+      padding: 1rem;
+      border-radius: 0.5rem;
+      margin-top: 0.5rem;
+    `,
+    settingRow: css`
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+
+      @media (max-width: 768px) {
+        grid-template-columns: 1fr;
+      }
+    `,
   }
 }
 

package/src/tabs/plugins-tab.tsx

@@ -2,13 +2,15 @@ import { For, createEffect } from 'solid-js'
 import clsx from 'clsx'
 import { usePlugins } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
+import { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from '../constants'
 
 export const PluginsTab = () => {
   const { plugins, activePlugin, setActivePlugin } = usePlugins()
   let activePluginRef: HTMLDivElement | undefined
+
   createEffect(() => {
     const currentActivePlugin = plugins()?.find(
-      (plugin) => plugin.id === activePlugin()?.id,
+      (plugin) => plugin.id === activePlugin(),
     )
     if (activePluginRef && currentActivePlugin) {
       currentActivePlugin.render(activePluginRef)
@@ -30,18 +32,22 @@ export const PluginsTab = () => {
             })
             return (
               <div
-                onClick={() => setActivePlugin(plugin)}
+                onClick={() => setActivePlugin(plugin.id!)}
                 class={clsx(styles().pluginName, {
-                  active: activePlugin()?.id === plugin.id,
+                  active: activePlugin() === plugin.id,
                 })}
               >
-                <h3 ref={pluginHeading} />
+                <h3 id={PLUGIN_TITLE_CONTAINER_ID} ref={pluginHeading} />
               </div>
             )
           }}
         </For>
       </div>
-      <div ref={activePluginRef} class={styles().pluginsTabContent}></div>
+      <div
+        id={PLUGIN_CONTAINER_ID}
+        ref={activePluginRef}
+        class={styles().pluginsTabContent}
+      ></div>
     </div>
   )
 }

package/src/tabs/settings-tab.tsx

@@ -1,3 +1,219 @@
+import { Show } from 'solid-js'
+import { Input } from '../components/input'
+import { Select } from '../components/select'
+import { useDevtoolsSettings } from '../context/use-devtools-context'
+import { uppercaseFirstLetter } from '../utils/sanitize'
+import { Checkbox } from '../components/checkbox'
+import { useStyles } from '../styles/use-styles'
+
 export const SettingsTab = () => {
-  return <div>Settings</div>
+  const { setSettings, settings } = useDevtoolsSettings()
+  const styles = useStyles()
+
+  return (
+    <div class={styles().settingsContainer}>
+      {/* General Settings */}
+      <div class={styles().settingsSection}>
+        <h3 class={styles().sectionTitle}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class={styles().sectionIcon}
+          >
+            <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+          General
+        </h3>
+        <p class={styles().sectionDescription}>
+          Configure general behavior of the devtools panel.
+        </p>
+        <div class={styles().settingsGroup}>
+          <Checkbox
+            label="Default open"
+            description="Automatically open the devtools panel when the page loads"
+            onChange={() =>
+              setSettings({ defaultOpen: !settings().defaultOpen })
+            }
+            checked={settings().defaultOpen}
+          />
+          <Checkbox
+            label="Hide trigger until hovered"
+            description="Keep the devtools trigger button hidden until you hover over its area"
+            onChange={() =>
+              setSettings({ hideUntilHover: !settings().hideUntilHover })
+            }
+            checked={settings().hideUntilHover}
+          />
+        </div>
+      </div>
+
+      {/* URL Flag Settings */}
+      <div class={styles().settingsSection}>
+        <h3 class={styles().sectionTitle}>
+          <svg
+            class={styles().sectionIcon}
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M9 17H7A5 5 0 0 1 7 7h2" />
+            <path d="M15 7h2a5 5 0 1 1 0 10h-2" />
+            <line x1="8" x2="16" y1="12" y2="12" />
+          </svg>
+          URL Configuration
+        </h3>
+        <p class={styles().sectionDescription}>
+          Control when devtools are available based on URL parameters.
+        </p>
+        <div class={styles().settingsGroup}>
+          <Checkbox
+            label="Require URL Flag"
+            description="Only show devtools when a specific URL parameter is present"
+            checked={settings().requireUrlFlag}
+            onChange={(checked) =>
+              setSettings({
+                requireUrlFlag: checked,
+              })
+            }
+          />
+          <Show when={settings().requireUrlFlag}>
+            <div class={styles().conditionalSetting}>
+              <Input
+                label="URL flag"
+                description="Enter the URL parameter name (e.g., 'debug' for ?debug=true)"
+                placeholder="debug"
+                value={settings().urlFlag}
+                onChange={(e) =>
+                  setSettings({
+                    urlFlag: e,
+                  })
+                }
+              />
+            </div>
+          </Show>
+        </div>
+      </div>
+
+      {/* Keyboard Settings */}
+      <div class={styles().settingsSection}>
+        <h3 class={styles().sectionTitle}>
+          <svg
+            class={styles().sectionIcon}
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M10 8h.01" />
+            <path d="M12 12h.01" />
+            <path d="M14 8h.01" />
+            <path d="M16 12h.01" />
+            <path d="M18 8h.01" />
+            <path d="M6 8h.01" />
+            <path d="M7 16h10" />
+            <path d="M8 12h.01" />
+            <rect width="20" height="16" x="2" y="4" rx="2" />
+          </svg>
+          Keyboard
+        </h3>
+        <p class={styles().sectionDescription}>
+          Customize keyboard shortcuts for quick access.
+        </p>
+        <div class={styles().settingsGroup}>
+          <Input
+            label="Hotkey to open/close devtools"
+            description="Use '+' to combine keys (e.g., 'Ctrl+Shift+D' or 'Alt+D')"
+            placeholder="Ctrl+Shift+D"
+            value={settings().openHotkey.join('+')}
+            onChange={(e) =>
+              setSettings({
+                openHotkey: e
+                  .split('+')
+                  .map((key) => uppercaseFirstLetter(key))
+                  .filter(Boolean),
+              })
+            }
+          />
+        </div>
+      </div>
+
+      {/* Position Settings */}
+      <div class={styles().settingsSection}>
+        <h3 class={styles().sectionTitle}>
+          <svg
+            class={styles().sectionIcon}
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0" />
+            <circle cx="12" cy="10" r="3" />
+          </svg>
+          Position
+        </h3>
+        <p class={styles().sectionDescription}>
+          Adjust the position of the trigger button and devtools panel.
+        </p>
+        <div class={styles().settingsGroup}>
+          <div class={styles().settingRow}>
+            <Select
+              label="Trigger Position"
+              options={[
+                { label: 'Bottom Right', value: 'bottom-right' },
+                { label: 'Bottom Left', value: 'bottom-left' },
+                { label: 'Top Right', value: 'top-right' },
+                { label: 'Top Left', value: 'top-left' },
+                { label: 'Middle Right', value: 'middle-right' },
+                { label: 'Middle Left', value: 'middle-left' },
+              ]}
+              value={settings().position}
+              onChange={(value) =>
+                setSettings({
+                  position: value,
+                })
+              }
+            />
+            <Select
+              label="Panel Position"
+              value={settings().panelLocation}
+              options={[
+                { label: 'Top', value: 'top' },
+                { label: 'Bottom', value: 'bottom' },
+              ]}
+              onChange={(value) =>
+                setSettings({
+                  panelLocation: value,
+                })
+              }
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }

package/src/utils/sanitize.ts

@@ -6,3 +6,6 @@ export const tryParseJson = <T>(json: string | null): T | undefined => {
     return undefined
   }
 }
+
+export const uppercaseFirstLetter = (value: string) =>
+  value.charAt(0).toUpperCase() + value.slice(1)