@tanstack/devtools 0.0.0

package/src/styles/tokens.ts

@@ -0,0 +1,305 @@
+export const tokens = {
+  colors: {
+    inherit: 'inherit',
+    current: 'currentColor',
+    transparent: 'transparent',
+    black: '#000000',
+    white: '#ffffff',
+    neutral: {
+      50: '#f9fafb',
+      100: '#f2f4f7',
+      200: '#eaecf0',
+      300: '#d0d5dd',
+      400: '#98a2b3',
+      500: '#667085',
+      600: '#475467',
+      700: '#344054',
+      800: '#1d2939',
+      900: '#101828',
+    },
+    darkGray: {
+      50: '#525c7a',
+      100: '#49536e',
+      200: '#414962',
+      300: '#394056',
+      400: '#313749',
+      500: '#292e3d',
+      600: '#212530',
+      700: '#191c24',
+      800: '#111318',
+      900: '#0b0d10',
+    },
+    gray: {
+      50: '#f9fafb',
+      100: '#f2f4f7',
+      200: '#eaecf0',
+      300: '#d0d5dd',
+      400: '#98a2b3',
+      500: '#667085',
+      600: '#475467',
+      700: '#344054',
+      800: '#1d2939',
+      900: '#101828',
+    },
+    blue: {
+      25: '#F5FAFF',
+      50: '#EFF8FF',
+      100: '#D1E9FF',
+      200: '#B2DDFF',
+      300: '#84CAFF',
+      400: '#53B1FD',
+      500: '#2E90FA',
+      600: '#1570EF',
+      700: '#175CD3',
+      800: '#1849A9',
+      900: '#194185',
+    },
+    green: {
+      25: '#F6FEF9',
+      50: '#ECFDF3',
+      100: '#D1FADF',
+      200: '#A6F4C5',
+      300: '#6CE9A6',
+      400: '#32D583',
+      500: '#12B76A',
+      600: '#039855',
+      700: '#027A48',
+      800: '#05603A',
+      900: '#054F31',
+    },
+    red: {
+      50: '#fef2f2',
+      100: '#fee2e2',
+      200: '#fecaca',
+      300: '#fca5a5',
+      400: '#f87171',
+      500: '#ef4444',
+      600: '#dc2626',
+      700: '#b91c1c',
+      800: '#991b1b',
+      900: '#7f1d1d',
+      950: '#450a0a',
+    },
+    yellow: {
+      25: '#FFFCF5',
+      50: '#FFFAEB',
+      100: '#FEF0C7',
+      200: '#FEDF89',
+      300: '#FEC84B',
+      400: '#FDB022',
+      500: '#F79009',
+      600: '#DC6803',
+      700: '#B54708',
+      800: '#93370D',
+      900: '#7A2E0E',
+    },
+    purple: {
+      25: '#FAFAFF',
+      50: '#F4F3FF',
+      100: '#EBE9FE',
+      200: '#D9D6FE',
+      300: '#BDB4FE',
+      400: '#9B8AFB',
+      500: '#7A5AF8',
+      600: '#6938EF',
+      700: '#5925DC',
+      800: '#4A1FB8',
+      900: '#3E1C96',
+    },
+    teal: {
+      25: '#F6FEFC',
+      50: '#F0FDF9',
+      100: '#CCFBEF',
+      200: '#99F6E0',
+      300: '#5FE9D0',
+      400: '#2ED3B7',
+      500: '#15B79E',
+      600: '#0E9384',
+      700: '#107569',
+      800: '#125D56',
+      900: '#134E48',
+    },
+    pink: {
+      25: '#fdf2f8',
+      50: '#fce7f3',
+      100: '#fbcfe8',
+      200: '#f9a8d4',
+      300: '#f472b6',
+      400: '#ec4899',
+      500: '#db2777',
+      600: '#be185d',
+      700: '#9d174d',
+      800: '#831843',
+      900: '#500724',
+    },
+    cyan: {
+      25: '#ecfeff',
+      50: '#cffafe',
+      100: '#a5f3fc',
+      200: '#67e8f9',
+      300: '#22d3ee',
+      400: '#06b6d4',
+      500: '#0891b2',
+      600: '#0e7490',
+      700: '#155e75',
+      800: '#164e63',
+      900: '#083344',
+    },
+  },
+  alpha: {
+    100: 'ff',
+    90: 'e5',
+    80: 'cc',
+    70: 'b3',
+    60: '99',
+    50: '80',
+    40: '66',
+    30: '4d',
+    20: '33',
+    10: '1a',
+    0: '00',
+  },
+  font: {
+    size: {
+      '2xs': 'calc(var(--tsrd-font-size) * 0.625)',
+      xs: 'calc(var(--tsrd-font-size) * 0.75)',
+      sm: 'calc(var(--tsrd-font-size) * 0.875)',
+      md: 'var(--tsrd-font-size)',
+      lg: 'calc(var(--tsrd-font-size) * 1.125)',
+      xl: 'calc(var(--tsrd-font-size) * 1.25)',
+      '2xl': 'calc(var(--tsrd-font-size) * 1.5)',
+      '3xl': 'calc(var(--tsrd-font-size) * 1.875)',
+      '4xl': 'calc(var(--tsrd-font-size) * 2.25)',
+      '5xl': 'calc(var(--tsrd-font-size) * 3)',
+      '6xl': 'calc(var(--tsrd-font-size) * 3.75)',
+      '7xl': 'calc(var(--tsrd-font-size) * 4.5)',
+      '8xl': 'calc(var(--tsrd-font-size) * 6)',
+      '9xl': 'calc(var(--tsrd-font-size) * 8)',
+    },
+    lineHeight: {
+      '3xs': 'calc(var(--tsrd-font-size) * 0.75)',
+      '2xs': 'calc(var(--tsrd-font-size) * 0.875)',
+      xs: 'calc(var(--tsrd-font-size) * 1)',
+      sm: 'calc(var(--tsrd-font-size) * 1.25)',
+      md: 'calc(var(--tsrd-font-size) * 1.5)',
+      lg: 'calc(var(--tsrd-font-size) * 1.75)',
+      xl: 'calc(var(--tsrd-font-size) * 2)',
+      '2xl': 'calc(var(--tsrd-font-size) * 2.25)',
+      '3xl': 'calc(var(--tsrd-font-size) * 2.5)',
+      '4xl': 'calc(var(--tsrd-font-size) * 2.75)',
+      '5xl': 'calc(var(--tsrd-font-size) * 3)',
+      '6xl': 'calc(var(--tsrd-font-size) * 3.25)',
+      '7xl': 'calc(var(--tsrd-font-size) * 3.5)',
+      '8xl': 'calc(var(--tsrd-font-size) * 3.75)',
+      '9xl': 'calc(var(--tsrd-font-size) * 4)',
+    },
+    weight: {
+      thin: '100',
+      extralight: '200',
+      light: '300',
+      normal: '400',
+      medium: '500',
+      semibold: '600',
+      bold: '700',
+      extrabold: '800',
+      black: '900',
+    },
+    fontFamily: {
+      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',
+      mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,
+    },
+  },
+  breakpoints: {
+    xs: '320px',
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px',
+  },
+  border: {
+    radius: {
+      none: '0px',
+      xs: 'calc(var(--tsrd-font-size) * 0.125)',
+      sm: 'calc(var(--tsrd-font-size) * 0.25)',
+      md: 'calc(var(--tsrd-font-size) * 0.375)',
+      lg: 'calc(var(--tsrd-font-size) * 0.5)',
+      xl: 'calc(var(--tsrd-font-size) * 0.75)',
+      '2xl': 'calc(var(--tsrd-font-size) * 1)',
+      '3xl': 'calc(var(--tsrd-font-size) * 1.5)',
+      full: '9999px',
+    },
+  },
+  size: {
+    0: '0px',
+    0.25: 'calc(var(--tsrd-font-size) * 0.0625)',
+    0.5: 'calc(var(--tsrd-font-size) * 0.125)',
+    1: 'calc(var(--tsrd-font-size) * 0.25)',
+    1.5: 'calc(var(--tsrd-font-size) * 0.375)',
+    2: 'calc(var(--tsrd-font-size) * 0.5)',
+    2.5: 'calc(var(--tsrd-font-size) * 0.625)',
+    3: 'calc(var(--tsrd-font-size) * 0.75)',
+    3.5: 'calc(var(--tsrd-font-size) * 0.875)',
+    4: 'calc(var(--tsrd-font-size) * 1)',
+    4.5: 'calc(var(--tsrd-font-size) * 1.125)',
+    5: 'calc(var(--tsrd-font-size) * 1.25)',
+    5.5: 'calc(var(--tsrd-font-size) * 1.375)',
+    6: 'calc(var(--tsrd-font-size) * 1.5)',
+    6.5: 'calc(var(--tsrd-font-size) * 1.625)',
+    7: 'calc(var(--tsrd-font-size) * 1.75)',
+    8: 'calc(var(--tsrd-font-size) * 2)',
+    9: 'calc(var(--tsrd-font-size) * 2.25)',
+    10: 'calc(var(--tsrd-font-size) * 2.5)',
+    11: 'calc(var(--tsrd-font-size) * 2.75)',
+    12: 'calc(var(--tsrd-font-size) * 3)',
+    14: 'calc(var(--tsrd-font-size) * 3.5)',
+    16: 'calc(var(--tsrd-font-size) * 4)',
+    20: 'calc(var(--tsrd-font-size) * 5)',
+    24: 'calc(var(--tsrd-font-size) * 6)',
+    28: 'calc(var(--tsrd-font-size) * 7)',
+    32: 'calc(var(--tsrd-font-size) * 8)',
+    36: 'calc(var(--tsrd-font-size) * 9)',
+    40: 'calc(var(--tsrd-font-size) * 10)',
+    44: 'calc(var(--tsrd-font-size) * 11)',
+    48: 'calc(var(--tsrd-font-size) * 12)',
+    52: 'calc(var(--tsrd-font-size) * 13)',
+    56: 'calc(var(--tsrd-font-size) * 14)',
+    60: 'calc(var(--tsrd-font-size) * 15)',
+    64: 'calc(var(--tsrd-font-size) * 16)',
+    72: 'calc(var(--tsrd-font-size) * 18)',
+    80: 'calc(var(--tsrd-font-size) * 20)',
+    96: 'calc(var(--tsrd-font-size) * 24)',
+  },
+  shadow: {
+    xs: (_: string = 'rgb(0 0 0 / 0.1)') =>
+      `0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,
+    sm: (color: string = 'rgb(0 0 0 / 0.1)') =>
+      `0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,
+    md: (color: string = 'rgb(0 0 0 / 0.1)') =>
+      `0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,
+    lg: (color: string = 'rgb(0 0 0 / 0.1)') =>
+      `0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,
+    xl: (color: string = 'rgb(0 0 0 / 0.1)') =>
+      `0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,
+    '2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>
+      `0 25px 50px -12px ${color}` as const,
+    inner: (color: string = 'rgb(0 0 0 / 0.05)') =>
+      `inset 0 2px 4px 0 ${color}` as const,
+    none: () => `none` as const,
+  },
+  zIndices: {
+    hide: -1,
+    auto: 'auto',
+    base: 0,
+    docked: 10,
+    dropdown: 1000,
+    sticky: 1100,
+    banner: 1200,
+    overlay: 1300,
+    modal: 1400,
+    popover: 1500,
+    skipLink: 1600,
+    toast: 1700,
+    tooltip: 1800,
+  },
+} as const

package/src/styles/use-styles.ts

@@ -0,0 +1,252 @@
+import * as goober from 'goober'
+import { createSignal } from 'solid-js'
+import { tokens } from './tokens'
+import type { DevtoolsSettings } from '../context/devtools-context'
+import type { Accessor } from 'solid-js'
+
+const stylesFactory = () => {
+  const { colors, font, size, alpha, border } = tokens
+  const { fontFamily, size: fontSize } = font
+  const css = goober.css
+
+  return {
+    devtoolsPanelContainer: css`
+      direction: ltr;
+      position: fixed;
+      bottom: 0;
+      right: 0;
+      z-index: 99999;
+      width: 100%;
+
+      max-height: 90%;
+      border-top: 1px solid ${colors.gray[700]};
+      transform-origin: top;
+    `,
+    devtoolsPanelContainerVisibility: (isOpen: boolean) => {
+      return css`
+        visibility: ${isOpen ? 'visible' : 'hidden'};
+        height: ${isOpen ? 'auto' : '0'};
+      `
+    },
+    devtoolsPanelContainerResizing: (isResizing: Accessor<boolean>) => {
+      if (isResizing()) {
+        return css`
+          transition: none;
+        `
+      }
+
+      return css`
+        transition: all 0.4s ease;
+      `
+    },
+    devtoolsPanelContainerAnimation: (isOpen: boolean, height: number) => {
+      if (isOpen) {
+        return css`
+          pointer-events: auto;
+          transform: translateY(0);
+        `
+      }
+      return css`
+        pointer-events: none;
+        transform: translateY(${height}px);
+      `
+    },
+    logo: css`
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      background-color: transparent;
+      border: none;
+      width: ${size[12]};
+      height: ${size[12]};
+      font-family: ${fontFamily.sans};
+      gap: ${tokens.size[0.5]};
+      padding: 0px;
+      &:hover {
+        opacity: 0.7;
+      }
+    `,
+
+    devtoolsPanel: css`
+      display: flex;
+      font-size: ${fontSize.sm};
+      font-family: ${fontFamily.sans};
+      background-color: ${colors.darkGray[700]};
+      color: ${colors.gray[300]};
+      width: w-screen;
+      flex-direction: row;
+      overflow: auto;
+      height: 100%;
+    `,
+    dragHandle: css`
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 4px;
+      cursor: row-resize;
+      z-index: 100000;
+      &:hover {
+        background-color: ${colors.purple[400]}${alpha[90]};
+      }
+    `,
+
+    mainCloseBtn: css`
+      background: transparent;
+      position: fixed;
+      z-index: 99999;
+      display: inline-flex;
+      width: fit-content;
+      cursor: pointer;
+      appearance: none;
+      border: 0;
+      align-items: center;
+      padding: 0;
+      font-size: ${font.size.xs};
+      cursor: pointer;
+      transition: all 0.25s ease-out;
+      &:focus-visible {
+        outline-offset: 2px;
+        border-radius: ${border.radius.full};
+        outline: 2px solid ${colors.blue[800]};
+      }
+    `,
+    mainCloseBtnPosition: (position: DevtoolsSettings['position']) => {
+      const base = css`
+        ${position === 'top-left' ? `top: ${size[2]}; left: ${size[2]};` : ''}
+        ${position === 'top-right' ? `top: ${size[2]}; right: ${size[2]};` : ''}
+        ${position === 'middle-left'
+          ? `top: 50%; left: ${size[2]}; transform: translateY(-50%);`
+          : ''}
+        ${position === 'middle-right'
+          ? `top: 50%; right: ${size[2]}; transform: translateY(-50%);`
+          : ''}
+        ${position === 'bottom-left'
+          ? `bottom: ${size[2]}; left: ${size[2]};`
+          : ''}
+        ${position === 'bottom-right'
+          ? `bottom: ${size[2]}; right: ${size[2]};`
+          : ''}
+      `
+      return base
+    },
+    mainCloseBtnAnimation: (isOpen: boolean) => {
+      if (!isOpen) {
+        return css`
+          opacity: 1;
+          pointer-events: auto;
+          visibility: visible;
+        `
+      }
+      return css`
+        opacity: 0;
+        pointer-events: none;
+        visibility: hidden;
+      `
+    },
+    tabContainer: css`
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      height: 100%;
+      background-color: ${colors.darkGray[800]};
+      border-right: 1px solid ${colors.gray[700]};
+      box-shadow: 0 1px 0 ${colors.gray[700]};
+      position: relative;
+      width: ${size[10]};
+    `,
+
+    tab: css`
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: ${size[10]};
+      cursor: pointer;
+      font-size: ${fontSize.sm};
+      font-family: ${fontFamily.sans};
+      color: ${colors.gray[300]};
+      background-color: transparent;
+      border: none;
+      transition: all 0.2s ease-in-out;
+      border-left: 2px solid transparent;
+      &:hover:not(.close):not(.active) {
+        background-color: ${colors.gray[700]};
+        color: ${colors.gray[100]};
+        border-left: 2px solid ${colors.purple[500]};
+      }
+      &.active {
+        background-color: ${colors.purple[500]};
+        color: ${colors.gray[100]};
+        border-left: 2px solid ${colors.purple[500]};
+      }
+      &.close {
+        margin-top: auto;
+        &:hover {
+          background-color: ${colors.gray[700]};
+        }
+        &:hover {
+          color: ${colors.red[500]};
+        }
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+        opacity: 0.2;
+        pointer-events: none;
+      }
+      &.disabled:hover {
+        background-color: transparent;
+        color: ${colors.gray[300]};
+      }
+    `,
+    tabContent: css`
+      transition: all 0.2s ease-in-out;
+      width: 100%;
+      height: 100%;
+    `,
+    pluginsTabPanel: css`
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    `,
+    pluginsTabSidebar: css`
+      width: ${size[48]};
+      background-color: ${colors.darkGray[800]};
+      border-right: 1px solid ${colors.gray[700]};
+      box-shadow: 0 1px 0 ${colors.gray[700]};
+      overflow-y: auto;
+    `,
+    pluginName: css`
+      font-size: ${fontSize.xs};
+      font-family: ${fontFamily.sans};
+      color: ${colors.gray[300]};
+      padding: ${size[2]};
+      cursor: pointer;
+      text-align: center;
+      transition: all 0.2s ease-in-out;
+      &:hover {
+        background-color: ${colors.gray[700]};
+        color: ${colors.gray[100]};
+        padding: ${size[2]};
+      }
+      &.active {
+        background-color: ${colors.purple[500]};
+        color: ${colors.gray[100]};
+      }
+    `,
+    pluginsTabContent: css`
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+    `,
+  }
+}
+
+export function useStyles() {
+  const [_styles] = createSignal(stylesFactory())
+  return _styles
+}

package/src/tabs/index.tsx

@@ -0,0 +1,62 @@
+import { SettingsTab } from './settings-tab'
+import { PluginsTab } from './plugins-tab'
+
+export const tabs = [
+  {
+    name: 'Plugins',
+    id: 'plugins',
+    component: () => <PluginsTab />,
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M8 6h10" />
+        <path d="M6 12h9" />
+        <path d="M11 18h7" />
+      </svg>
+    ),
+  },
+  {
+    name: 'Settings',
+    id: 'settings',
+    component: () => <SettingsTab />,
+    icon: (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" />
+        <path d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
+        <path d="M12 2v2" />
+        <path d="M12 22v-2" />
+        <path d="m17 20.66-1-1.73" />
+        <path d="M11 10.27 7 3.34" />
+        <path d="m20.66 17-1.73-1" />
+        <path d="m3.34 7 1.73 1" />
+        <path d="M14 12h8" />
+        <path d="M2 12h2" />
+        <path d="m20.66 7-1.73 1" />
+        <path d="m3.34 17 1.73-1" />
+        <path d="m17 3.34-1 1.73" />
+        <path d="m11 13.73-4 6.93" />
+      </svg>
+    ),
+  },
+] as const
+
+export type TabName = (typeof tabs)[number]['id']

package/src/tabs/plugins-tab.tsx

@@ -0,0 +1,47 @@
+import { For, createEffect } from 'solid-js'
+import clsx from 'clsx'
+import { usePlugins } from '../context/use-devtools-context'
+import { useStyles } from '../styles/use-styles'
+
+export const PluginsTab = () => {
+  const { plugins, activePlugin, setActivePlugin } = usePlugins()
+  let activePluginRef: HTMLDivElement | undefined
+  createEffect(() => {
+    const currentActivePlugin = plugins()?.find(
+      (plugin) => plugin.id === activePlugin()?.id,
+    )
+    if (activePluginRef && currentActivePlugin) {
+      currentActivePlugin.render(activePluginRef)
+    }
+  })
+  const styles = useStyles()
+  return (
+    <div class={styles().pluginsTabPanel}>
+      <div class={styles().pluginsTabSidebar}>
+        <For each={plugins()}>
+          {(plugin) => {
+            let pluginHeading: HTMLHeadingElement | undefined
+            createEffect(() => {
+              if (pluginHeading) {
+                typeof plugin.name === 'string'
+                  ? (pluginHeading.textContent = plugin.name)
+                  : plugin.name(pluginHeading)
+              }
+            })
+            return (
+              <div
+                onClick={() => setActivePlugin(plugin)}
+                class={clsx(styles().pluginName, {
+                  active: activePlugin()?.id === plugin.id,
+                })}
+              >
+                <h3 ref={pluginHeading} />
+              </div>
+            )
+          }}
+        </For>
+      </div>
+      <div ref={activePluginRef} class={styles().pluginsTabContent}></div>
+    </div>
+  )
+}

package/src/tabs/settings-tab.tsx

@@ -0,0 +1,3 @@
+export const SettingsTab = () => {
+  return <div>Settings</div>
+}

package/src/utils/sanitize.ts

@@ -0,0 +1,8 @@
+export const tryParseJson = <T>(json: string | null): T | undefined => {
+  if (!json) return undefined
+  try {
+    return JSON.parse(json)
+  } catch (_e) {
+    return undefined
+  }
+}

package/src/utils/storage.ts

@@ -0,0 +1,12 @@
+export const getStorageItem = (key: string) => localStorage.getItem(key)
+export const setStorageItem = (key: string, value: string) => {
+  try {
+    localStorage.setItem(key, value)
+  } catch (_e) {
+    return
+  }
+}
+
+export const TANSTACK_DEVTOOLS = 'tanstack_devtools'
+export const TANSTACK_DEVTOOLS_STATE = 'tanstack_devtools_state'
+export const TANSTACK_DEVTOOLS_SETTINGS = 'tanstack_devtools_settings'