@tanstack/devtools-ui 0.2.2 → 0.3.1

package/src/components/button.tsx

@@ -0,0 +1,42 @@
+import { splitProps } from 'solid-js'
+import clsx from 'clsx'
+import { useStyles } from '../styles/use-styles'
+import type { JSX } from 'solid-js'
+
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'danger'
+  | 'success'
+  | 'info'
+  | 'warning'
+type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: ButtonVariant
+  outline?: boolean
+  ghost?: boolean
+  children?: any
+  className?: string
+}
+
+export function Button(props: ButtonProps) {
+  const styles = useStyles()
+  const [local, rest] = splitProps(props, [
+    'variant',
+    'outline',
+    'ghost',
+    'children',
+    'className',
+  ])
+  const variant = local.variant || 'primary'
+  const classes = clsx(
+    styles().button.base,
+    styles().button.variant(variant, local.outline, local.ghost),
+    local.className,
+  )
+
+  return (
+    <button {...rest} class={classes}>
+      {local.children}
+    </button>
+  )
+}

package/src/components/tag.tsx

@@ -0,0 +1,22 @@
+import { Show } from 'solid-js'
+import { useStyles } from '../styles/use-styles'
+import type { tokens } from '../styles/tokens'
+
+export const Tag = (props: {
+  color: keyof typeof tokens.colors
+  label: string
+  count?: number
+  disabled?: boolean
+}) => {
+  const styles = useStyles()
+  return (
+    <button disabled={props.disabled} class={styles().tag.base}>
+      <span class={styles().tag.dot(props.color)} />
+      <span class={styles().tag.label}>{props.label}</span>
+
+      <Show when={props.count && props.count > 0}>
+        <span class={styles().tag.count}>{props.count}</span>
+      </Show>
+    </button>
+  )
+}

package/src/components/tree.tsx

@@ -0,0 +1,167 @@
+import { For, Show, createSignal } from 'solid-js'
+import clsx from 'clsx'
+import { useStyles } from '../styles/use-styles'
+
+export function JsonTree(props: { value: any }) {
+  return <JsonValue isRoot value={props.value} />
+}
+
+function JsonValue(props: {
+  value: any
+  keyName?: string
+  isRoot?: boolean
+  isLastKey?: boolean
+}) {
+  const { value, keyName, isRoot = false, isLastKey } = props
+  const styles = useStyles()
+
+  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 class={styles().tree.valueString}>&quot;{value}&quot;</span>
+          )
+        }
+        if (typeof value === 'number') {
+          return <span class={styles().tree.valueNumber}>{value}</span>
+        }
+        if (typeof value === 'boolean') {
+          return <span class={styles().tree.valueBoolean}>{String(value)}</span>
+        }
+        if (value === null) {
+          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 class={styles().tree.valueFunction}>{String(value)}</span>
+          )
+        }
+        if (Array.isArray(value)) {
+          return <ArrayValue keyName={keyName} value={value} />
+        }
+        if (typeof value === 'object') {
+          return <ObjectValue keyName={keyName} value={value} />
+        }
+        return <span />
+      })()}
+      {isLastKey || isRoot ? '' : <span>,</span>}
+    </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

@@ -2,3 +2,6 @@ export { Checkbox } from './components/checkbox'
 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'

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,12 +233,164 @@ 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]};
+      `,
+      valueNumber: css`
+        color: ${colors.yellow[400]};
+      `,
+      valueBoolean: css`
+        color: ${colors.pink[400]};
+      `,
+      valueNull: css`
+        color: ${colors.gray[400]};
+        font-style: italic;
+      `,
+      valueKey: css`
+        color: ${colors.blue[300]};
+      `,
+      valueBraces: css`
+        color: ${colors.gray[500]};
+      `,
+      valueContainer: (isRoot: boolean) => css`
+        display: block;
+        margin-left: ${isRoot ? '0' : '1rem'};
+      `,
+    },
   }
 }