@tanstack/devtools-ui 0.3.0 → 0.3.2

package/src/components/tree.tsx

@@ -1,4 +1,5 @@
-import { For } from 'solid-js'
+import { For, Show, createSignal } from 'solid-js'
+import clsx from 'clsx'
 import { useStyles } from '../styles/use-styles'
 
 export function JsonTree(props: { value: any }) {
@@ -16,115 +17,37 @@ function JsonValue(props: {
 
   return (
     <span class={styles().tree.valueContainer(isRoot)}>
+      {keyName && typeof value !== 'object' && !Array.isArray(value) && (
+        <span class={styles().tree.valueKey}>&quot;{keyName}&quot;: </span>
+      )}
       {(() => {
         if (typeof value === 'string') {
           return (
-            <span>
-              {keyName && (
-                <span class={styles().tree.valueKey}>
-                  &quot;{keyName}&quot;:{' '}
-                </span>
-              )}
-              <span class={styles().tree.valueString}>&quot;{value}&quot;</span>
-            </span>
+            <span class={styles().tree.valueString}>&quot;{value}&quot;</span>
           )
         }
         if (typeof value === 'number') {
-          return (
-            <span>
-              {keyName && (
-                <span class={styles().tree.valueKey}>
-                  &quot;{keyName}&quot;:{' '}
-                </span>
-              )}
-              <span class={styles().tree.valueNumber}>{value}</span>
-            </span>
-          )
+          return <span class={styles().tree.valueNumber}>{value}</span>
         }
         if (typeof value === 'boolean') {
-          return (
-            <span>
-              {keyName && (
-                <span class={styles().tree.valueKey}>
-                  &quot;{keyName}&quot;:{' '}
-                </span>
-              )}
-              <span class={styles().tree.valueBoolean}>{String(value)}</span>
-            </span>
-          )
+          return <span class={styles().tree.valueBoolean}>{String(value)}</span>
         }
         if (value === null) {
-          return (
-            <span>
-              {keyName && (
-                <span class={styles().tree.valueKey}>
-                  &quot;{keyName}&quot;:{' '}
-                </span>
-              )}
-              <span class={styles().tree.valueNull}>null</span>
-            </span>
-          )
+          return <span class={styles().tree.valueNull}>null</span>
         }
         if (value === undefined) {
+          return <span class={styles().tree.valueNull}>undefined</span>
+        }
+        if (typeof value === 'function') {
           return (
-            <span>
-              {keyName && (
-                <span class={styles().tree.valueKey}>
-                  &quot;{keyName}&quot;:{' '}
-                </span>
-              )}
-              <span class={styles().tree.valueNull}>undefined</span>
-            </span>
+            <span class={styles().tree.valueFunction}>{String(value)}</span>
           )
         }
         if (Array.isArray(value)) {
-          return (
-            <span>
-              {keyName && (
-                <span class={styles().tree.valueKey}>
-                  &quot;{keyName}&quot;:{' '}
-                </span>
-              )}
-              <span class={styles().tree.valueBraces}>[</span>
-              <For each={value}>
-                {(item, i) => {
-                  const isLastKey = i() === value.length - 1
-                  return (
-                    <>
-                      <JsonValue value={item} isLastKey={isLastKey} />
-                    </>
-                  )
-                }}
-              </For>
-              <span class={styles().tree.valueBraces}>]</span>
-            </span>
-          )
+          return <ArrayValue keyName={keyName} value={value} />
         }
         if (typeof value === 'object') {
-          const keys = Object.keys(value)
-          const lastKeyName = keys[keys.length - 1]
-          return (
-            <span>
-              {keyName && (
-                <span class={styles().tree.valueKey}>
-                  &quot;{keyName}&quot;:{' '}
-                </span>
-              )}
-              <span class={styles().tree.valueBraces}>{'{'}</span>
-              <For each={keys}>
-                {(k) => (
-                  <>
-                    <JsonValue
-                      value={value[k]}
-                      keyName={k}
-                      isLastKey={lastKeyName === k}
-                    />
-                  </>
-                )}
-              </For>
-              <span class={styles().tree.valueBraces}>{'}'}</span>
-            </span>
-          )
+          return <ObjectValue keyName={keyName} value={value} />
         }
         return <span />
       })()}
@@ -132,3 +55,113 @@ function JsonValue(props: {
     </span>
   )
 }
+
+const ArrayValue = ({
+  value,
+  keyName,
+}: {
+  value: Array<any>
+  keyName?: string
+}) => {
+  const styles = useStyles()
+  const [expanded, setExpanded] = createSignal(true)
+  return (
+    <span>
+      {keyName && (
+        <span
+          onclick={(e) => {
+            e.stopPropagation()
+            e.stopImmediatePropagation()
+            setExpanded(!expanded())
+          }}
+          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
+        >
+          &quot;{keyName}&quot;:{' '}
+        </span>
+      )}
+      <span class={styles().tree.valueBraces}>[</span>
+      <Show when={expanded()}>
+        <For each={value}>
+          {(item, i) => {
+            const isLastKey = i() === value.length - 1
+            return (
+              <>
+                <JsonValue value={item} isLastKey={isLastKey} />
+              </>
+            )
+          }}
+        </For>
+      </Show>
+      <Show when={!expanded()}>
+        <span
+          onClick={(e) => {
+            e.stopPropagation()
+            e.stopImmediatePropagation()
+            setExpanded(!expanded())
+          }}
+          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
+        >
+          {`... ${value.length} more`}
+        </span>
+      </Show>
+      <span class={styles().tree.valueBraces}>]</span>
+    </span>
+  )
+}
+
+const ObjectValue = ({
+  value,
+  keyName,
+}: {
+  value: Record<string, any>
+  keyName?: string
+}) => {
+  const styles = useStyles()
+  const [expanded, setExpanded] = createSignal(true)
+  const keys = Object.keys(value)
+  const lastKeyName = keys[keys.length - 1]
+
+  return (
+    <span>
+      {keyName && (
+        <span
+          onClick={(e) => {
+            e.stopPropagation()
+            e.stopImmediatePropagation()
+            setExpanded(!expanded())
+          }}
+          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
+        >
+          &quot;{keyName}&quot;:{' '}
+        </span>
+      )}
+      <span class={styles().tree.valueBraces}>{'{'}</span>
+      <Show when={expanded()}>
+        <For each={keys}>
+          {(k) => (
+            <>
+              <JsonValue
+                value={value[k]}
+                keyName={k}
+                isLastKey={lastKeyName === k}
+              />
+            </>
+          )}
+        </For>
+      </Show>
+      <Show when={!expanded()}>
+        <span
+          onClick={(e) => {
+            e.stopPropagation()
+            e.stopImmediatePropagation()
+            setExpanded(!expanded())
+          }}
+          class={clsx(styles().tree.valueKey, styles().tree.collapsible)}
+        >
+          {`... ${keys.length} more`}
+        </span>
+      </Show>
+      <span class={styles().tree.valueBraces}>{'}'}</span>
+    </span>
+  )
+}

package/src/index.ts

@@ -3,3 +3,12 @@ export { Input } from './components/input'
 export { Select } from './components/select'
 export { TanStackLogo } from './components/logo'
 export { JsonTree } from './components/tree'
+export { Button } from './components/button'
+export { Tag } from './components/tag'
+export { MainPanel } from './components/main-panel'
+export {
+  Section,
+  SectionTitle,
+  SectionDescription,
+  SectionIcon,
+} from './components/section'

package/src/styles/use-styles.ts

@@ -1,11 +1,60 @@
 import * as goober from 'goober'
 import { createSignal } from 'solid-js'
 import { tokens } from './tokens'
+import type { ButtonVariant } from '../components/button'
 
-const stylesFactory = () => {
+const buttonVariantColors: Record<
+  ButtonVariant,
+  { bg: string; hover: string; active: string; text: string; border: string }
+> = {
+  primary: {
+    bg: tokens.colors.purple[500],
+    hover: tokens.colors.purple[600],
+    active: tokens.colors.purple[700],
+    text: '#fff',
+    border: tokens.colors.purple[500],
+  },
+  secondary: {
+    bg: tokens.colors.gray[800],
+    hover: tokens.colors.gray[700],
+    active: tokens.colors.gray[600],
+    text: tokens.colors.gray[100],
+    border: tokens.colors.gray[700],
+  },
+  info: {
+    bg: tokens.colors.blue[500],
+    hover: tokens.colors.blue[600],
+    active: tokens.colors.blue[700],
+    text: '#fff',
+    border: tokens.colors.blue[500],
+  },
+  warning: {
+    bg: tokens.colors.yellow[500],
+    hover: tokens.colors.yellow[600],
+    active: tokens.colors.yellow[700],
+    text: '#fff',
+    border: tokens.colors.yellow[500],
+  },
+  danger: {
+    bg: tokens.colors.red[500],
+    hover: tokens.colors.red[600],
+    active: tokens.colors.red[700],
+    text: '#fff',
+    border: tokens.colors.red[500],
+  },
+  success: {
+    bg: tokens.colors.green[500],
+    hover: tokens.colors.green[600],
+    active: tokens.colors.green[700],
+    text: '#fff',
+    border: tokens.colors.green[500],
+  },
+}
+const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
   const { colors, font, size, alpha } = tokens
   const { fontFamily } = font
   const css = goober.css
+  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
 
   return {
     logo: css`
@@ -38,12 +87,14 @@ const stylesFactory = () => {
       font-size: 0.875rem;
       font-weight: 500;
       color: ${colors.gray[100]};
+      text-align: left;
     `,
     selectDescription: css`
       font-size: 0.8rem;
       color: ${colors.gray[400]};
       margin: 0;
       line-height: 1.3;
+      text-align: left;
     `,
     select: css`
       appearance: none;
@@ -87,12 +138,14 @@ const stylesFactory = () => {
       font-size: 0.875rem;
       font-weight: 500;
       color: ${colors.gray[100]};
+      text-align: left;
     `,
     inputDescription: css`
       font-size: 0.8rem;
       color: ${colors.gray[400]};
       margin: 0;
       line-height: 1.3;
+      text-align: left;
     `,
     input: css`
       appearance: none;
@@ -180,13 +233,140 @@ const stylesFactory = () => {
       font-size: 0.875rem;
       font-weight: 500;
       line-height: 1.4;
+      text-align: left;
     `,
     checkboxDescription: css`
       color: ${colors.gray[400]};
       font-size: 0.8rem;
       line-height: 1.3;
+      text-align: left;
     `,
+    button: {
+      base: css`
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-family: ${tokens.font.fontFamily.sans};
+        font-size: 0.8rem;
+        font-weight: 500;
+        border-radius: 0.2rem;
+        padding: 0.2rem 0.6rem;
+        cursor: pointer;
+        transition:
+          background 0.2s,
+          color 0.2s,
+          border 0.2s,
+          box-shadow 0.2s;
+        outline: none;
+        border-width: 1px;
+        border-style: solid;
+      `,
+      variant(variant: ButtonVariant, outline?: boolean, ghost?: boolean) {
+        const v = buttonVariantColors[variant]
+        if (ghost) {
+          return css`
+            background: transparent;
+            color: ${v.bg};
+            border-color: transparent;
+            &:hover {
+              background: ${tokens.colors.purple[100]};
+            }
+            &:active {
+              background: ${tokens.colors.purple[200]};
+            }
+          `
+        }
+        if (outline) {
+          return css`
+            background: transparent;
+            color: ${v.bg};
+            border-color: ${v.bg};
+            &:hover {
+              background: ${tokens.colors.purple[100]};
+              border-color: ${v.hover};
+            }
+            &:active {
+              background: ${tokens.colors.purple[200]};
+              border-color: ${v.active};
+            }
+          `
+        }
+        // Default solid button
+        return css`
+          background: ${v.bg};
+          color: ${v.text};
+          border-color: ${v.border};
+          &:hover {
+            background: ${v.hover};
+            border-color: ${v.hover};
+          }
+          &:active {
+            background: ${v.active};
+            border-color: ${v.active};
+          }
+        `
+      },
+    },
+    tag: {
+      dot: (color: keyof typeof tokens.colors) => css`
+        width: ${tokens.size[1.5]};
+        height: ${tokens.size[1.5]};
+        border-radius: ${tokens.border.radius.full};
+        background-color: ${tokens.colors[color][500]};
+      `,
+      base: css`
+        display: flex;
+        gap: ${tokens.size[1.5]};
+        box-sizing: border-box;
+        height: ${tokens.size[6.5]};
+        background: ${t(colors.gray[50], colors.darkGray[500])};
+        color: ${t(colors.gray[700], colors.gray[300])};
+        border-radius: ${tokens.border.radius.sm};
+        font-size: ${font.size.sm};
+        padding: ${tokens.size[1]};
+        padding-left: ${tokens.size[1.5]};
+        align-items: center;
+        font-weight: ${font.weight.medium};
+        border: ${t('1px solid ' + colors.gray[300], '1px solid transparent')};
+        user-select: none;
+        position: relative;
+        &:focus-visible {
+          outline-offset: 2px;
+          outline: 2px solid ${colors.blue[800]};
+        }
+      `,
+      label: css`
+        font-size: ${font.size.xs};
+      `,
+      count: css`
+        font-size: ${font.size.xs};
+        padding: 0 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${t(colors.gray[500], colors.gray[400])};
+        background-color: ${t(colors.gray[200], colors.darkGray[300])};
+        border-radius: 2px;
+        font-variant-numeric: tabular-nums;
+        height: ${tokens.size[4.5]};
+      `,
+    },
     tree: {
+      collapsible: css`
+        cursor: pointer;
+        transition: all 0.2s ease;
+        &:hover {
+          background-color: ${colors.darkGray[700]};
+          border-radius: ${tokens.border.radius.sm};
+          padding: 0 ${tokens.size[1]};
+        }
+      `,
+      valueCollapsed: css`
+        color: ${colors.gray[400]};
+      `,
+      valueFunction: css`
+        color: ${colors.cyan[400]};
+      `,
       valueString: css`
         color: ${colors.green[400]};
       `,
@@ -211,6 +391,55 @@ const stylesFactory = () => {
         margin-left: ${isRoot ? '0' : '1rem'};
       `,
     },
+    section: {
+      main: 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);
+      `,
+      title: 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;
+        text-align: left;
+      `,
+      icon: css`
+        height: 20px;
+        width: 20px;
+        & > svg {
+          height: 100%;
+          width: 100%;
+        }
+        color: ${colors.purple[400]};
+      `,
+      description: css`
+        color: ${colors.gray[400]};
+        font-size: 0.875rem;
+        margin: 0 0 1.5rem 0;
+        line-height: 1.5;
+        text-align: left;
+      `,
+    },
+    mainPanel: {
+      panel: css`
+        padding: 0;
+        background: ${colors.darkGray[700]};
+        overflow-y: auto;
+        height: 100%;
+      `,
+      withPadding: css`
+        padding: ${tokens.size[4]};
+      `,
+    },
   }
 }