Merge pull request #4 from TanStack/feat/settings-page

feat: add settings page

Author: AlemTuzlak

package.json

@@ -47,7 +47,7 @@
   "size-limit": [
     {
       "path": "packages/devtools/dist/esm/index.js",
-      "limit": "20 KB"
+      "limit": "30 KB"
     }
   ],
   "devDependencies": {

packages/devtools/src/components/checkbox.tsx

@@ -0,0 +1,43 @@
+import { createSignal } from 'solid-js'
+import { useStyles } from '../styles/use-styles'
+
+interface CheckboxProps {
+  label?: string
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+  description?: string
+}
+
+export function Checkbox(props: CheckboxProps) {
+  const styles = useStyles()
+  const [isChecked, setIsChecked] = createSignal(props.checked || false)
+
+  const handleChange = (e: Event) => {
+    const checked = (e.target as HTMLInputElement).checked
+    setIsChecked(checked)
+    props.onChange?.(checked)
+  }
+
+  return (
+    <div class={styles().checkboxContainer}>
+      <label class={styles().checkboxWrapper}>
+        <input
+          type="checkbox"
+          checked={isChecked()}
+          class={styles().checkbox}
+          onInput={handleChange}
+        />
+        <div class={styles().checkboxLabelContainer}>
+          {props.label && (
+            <span class={styles().checkboxLabel}>{props.label}</span>
+          )}
+          {props.description && (
+            <span class={styles().checkboxDescription}>
+              {props.description}
+            </span>
+          )}
+        </div>
+      </label>
+    </div>
+  )
+}

packages/devtools/src/components/content-panel.tsx

@@ -1,3 +1,4 @@
+import { useDevtoolsSettings } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import type { JSX } from 'solid-js/jsx-runtime'
 
@@ -7,11 +8,12 @@ export const ContentPanel = (props: {
   handleDragStart?: (e: any) => void
 }) => {
   const styles = useStyles()
+  const { settings } = useDevtoolsSettings()
   return (
     <div ref={props.ref} class={styles().devtoolsPanel}>
       {props.handleDragStart ? (
         <div
-          class={styles().dragHandle}
+          class={styles().dragHandle(settings().panelLocation)}
           onMouseDown={props.handleDragStart}
         ></div>
       ) : null}

packages/devtools/src/components/input.tsx

@@ -0,0 +1,42 @@
+import { createSignal } from 'solid-js'
+import { useStyles } from '../styles/use-styles'
+
+interface InputProps {
+  label?: string
+  type?: 'text' | 'number' | 'password' | 'email'
+  value?: string
+  placeholder?: string
+  onChange?: (value: string) => void
+  description?: string
+}
+
+export function Input(props: InputProps) {
+  const styles = useStyles()
+  const [val, setVal] = createSignal(props.value || '')
+
+  const handleChange = (e: Event) => {
+    const value = (e.target as HTMLInputElement).value
+    setVal((prev) => (prev !== value ? value : prev))
+    props.onChange?.(value)
+  }
+
+  return (
+    <div class={styles().inputContainer}>
+      <div class={styles().inputWrapper}>
+        {props.label && (
+          <label class={styles().inputLabel}>{props.label}</label>
+        )}
+        {props.description && (
+          <p class={styles().inputDescription}>{props.description}</p>
+        )}
+        <input
+          type={props.type || 'text'}
+          class={styles().input}
+          value={val()}
+          placeholder={props.placeholder}
+          onInput={handleChange}
+        />
+      </div>
+    </div>
+  )
+}

packages/devtools/src/components/main-panel.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { useHeight } from '../context/use-devtools-context'
+import { useDevtoolsSettings, useHeight } from '../context/use-devtools-context'
 import { useStyles } from '../styles/use-styles'
 import { TANSTACK_DEVTOOLS } from '../utils/storage'
 import type { JSX } from 'solid-js/jsx-runtime'
@@ -12,14 +12,15 @@ export const MainPanel = (props: {
 }) => {
   const styles = useStyles()
   const { height } = useHeight()
+  const { settings } = useDevtoolsSettings()
   return (
     <div
       id={TANSTACK_DEVTOOLS}
       style={{
         height: height() + 'px',
       }}
       class={clsx(
-        styles().devtoolsPanelContainer,
+        styles().devtoolsPanelContainer(settings().panelLocation),
         styles().devtoolsPanelContainerAnimation(props.isOpen(), height()),
         styles().devtoolsPanelContainerVisibility(props.isOpen()),
         styles().devtoolsPanelContainerResizing(props.isResizing),

packages/devtools/src/components/select.tsx

@@ -0,0 +1,50 @@
+import { createSignal } from 'solid-js'
+import { useStyles } from '../styles/use-styles'
+
+interface SelectOption<T extends string | number> {
+  value: T
+  label: string
+}
+
+interface SelectProps<T extends string | number> {
+  label?: string
+  options: Array<SelectOption<T>>
+  value?: T
+  onChange?: (value: T) => void
+  description?: string
+}
+
+export function Select<T extends string | number>(props: SelectProps<T>) {
+  const styles = useStyles()
+  const [selected, setSelected] = createSignal(
+    props.value || props.options[0]?.value,
+  )
+
+  const handleChange = (e: Event) => {
+    const value = (e.target as HTMLSelectElement).value as T
+    setSelected((prev) => (prev !== value ? value : prev))
+    props.onChange?.(value)
+  }
+
+  return (
+    <div class={styles().selectContainer}>
+      <div class={styles().selectWrapper}>
+        {props.label && (
+          <label class={styles().selectLabel}>{props.label}</label>
+        )}
+        {props.description && (
+          <p class={styles().selectDescription}>{props.description}</p>
+        )}
+        <select
+          class={styles().select}
+          value={selected()}
+          onInput={handleChange}
+        >
+          {props.options.map((opt) => (
+            <option value={opt.value}>{opt.label}</option>
+          ))}
+        </select>
+      </div>
+    </div>
+  )
+}

packages/devtools/src/components/trigger.tsx

@@ -18,7 +18,7 @@ export const Trigger = ({
     return clsx(
       styles().mainCloseBtn,
       styles().mainCloseBtnPosition(settings().position),
-      styles().mainCloseBtnAnimation(isOpen()),
+      styles().mainCloseBtnAnimation(isOpen(), settings().hideUntilHover),
     )
   })
   return (

packages/devtools/src/devtools.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal } from 'solid-js'
+import { Show, createEffect, createSignal } from 'solid-js'
 import { createShortcut } from '@solid-primitives/keyboard'
 import {
   useDevtoolsSettings,
@@ -28,24 +28,27 @@ export default function DevTools() {
     setIsOpen(!open)
     setPersistOpen(!open)
   }
-
+  createEffect(() => {})
   // Used to resize the panel
   const handleDragStart = (
     panelElement: HTMLDivElement | undefined,
     startEvent: MouseEvent,
   ) => {
     if (startEvent.button !== 0) return // Only allow left click for drag
-
+    if (!panelElement) return
     setIsResizing(true)
 
     const dragInfo = {
-      originalHeight: panelElement?.getBoundingClientRect().height ?? 0,
+      originalHeight: panelElement.getBoundingClientRect().height,
       pageY: startEvent.pageY,
     }
 
     const run = (moveEvent: MouseEvent) => {
       const delta = dragInfo.pageY - moveEvent.pageY
-      const newHeight = dragInfo.originalHeight + delta
+      const newHeight =
+        settings().panelLocation === 'bottom'
+          ? dragInfo.originalHeight + delta
+          : dragInfo.originalHeight - delta
 
       setHeight(newHeight)
 
@@ -72,7 +75,8 @@ export default function DevTools() {
       const previousValue = rootEl()?.parentElement?.style.paddingBottom
 
       const run = () => {
-        const containerHeight = panelRef!.getBoundingClientRect().height
+        if (!panelRef) return
+        const containerHeight = panelRef.getBoundingClientRect().height
         if (rootEl()?.parentElement) {
           setRootEl((prev) => {
             if (prev?.parentElement) {
@@ -126,21 +130,33 @@ export default function DevTools() {
       el?.style.setProperty('--tsrd-font-size', fontSize)
     }
   })
-  createShortcut(settings().openHotkey, () => {
-    toggleOpen()
+  createEffect(() => {
+    createShortcut(settings().openHotkey, () => {
+      toggleOpen()
+    })
   })
+
+  createEffect(() => {})
   return (
     <div ref={setRootEl} data-testid={TANSTACK_DEVTOOLS}>
-      <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />
-      <MainPanel isResizing={isResizing} isOpen={isOpen}>
-        <ContentPanel
-          ref={(ref) => (panelRef = ref)}
-          handleDragStart={(e) => handleDragStart(panelRef, e)}
-        >
-          <Tabs toggleOpen={toggleOpen} />
-          <TabContent />
-        </ContentPanel>
-      </MainPanel>
+      <Show
+        when={
+          settings().requireUrlFlag
+            ? window.location.search.includes(settings().urlFlag)
+            : true
+        }
+      >
+        <Trigger isOpen={isOpen} setIsOpen={toggleOpen} />
+        <MainPanel isResizing={isResizing} isOpen={isOpen}>
+          <ContentPanel
+            ref={(ref) => (panelRef = ref)}
+            handleDragStart={(e) => handleDragStart(panelRef, e)}
+          >
+            <Tabs toggleOpen={toggleOpen} />
+            <TabContent />
+          </ContentPanel>
+        </MainPanel>
+      </Show>
     </div>
   )
 }