Merge branch 'feat/improve-ui-component-library' of https://github.com/TanStack/devtools into feat/improve-ui-component-library

Author: AlemTuzlak

packages/devtools-ui/src/components/button.tsx

@@ -1,22 +1,38 @@
-import { splitProps } from 'solid-js';
-import clsx from 'clsx';
-import { useStyles } from '../styles/use-styles';
-import type { JSX } from 'solid-js';
+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';
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'danger'
+  | 'success'
+  | 'info'
+  | 'warning'
 type ButtonProps = JSX.ButtonHTMLAttributes<HTMLButtonElement> & {
-  variant?: ButtonVariant;
-  outline?: boolean;
-  ghost?: boolean;
-  children?: any;
-  className?: string;
-};
+  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)
+  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}>

packages/devtools-ui/src/styles/use-styles.ts

@@ -3,7 +3,10 @@ import { createSignal } from 'solid-js'
 import { tokens } from './tokens'
 import type { ButtonVariant } from '../components/button'
 
-const buttonVariantColors: Record<ButtonVariant, { bg: string; hover: string; active: string; text: string; border: string }> = {
+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],
@@ -46,8 +49,8 @@ const buttonVariantColors: Record<ButtonVariant, { bg: string; hover: string; ac
     text: '#fff',
     border: tokens.colors.green[500],
   },
-};
-const stylesFactory = (theme: 'light' | 'dark' = "dark") => {
+}
+const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
   const { colors, font, size, alpha } = tokens
   const { fontFamily } = font
   const css = goober.css
@@ -240,22 +243,26 @@ const stylesFactory = (theme: 'light' | 'dark' = "dark") => {
     `,
     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;
-`,
+        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];
+        const v = buttonVariantColors[variant]
         if (ghost) {
           return goober.css`
             background: transparent;
@@ -267,7 +274,7 @@ const stylesFactory = (theme: 'light' | 'dark' = "dark") => {
             &:active {
               background: ${tokens.colors.purple[200]};
             }
-          `;
+          `
         }
         if (outline) {
           return goober.css`
@@ -282,7 +289,7 @@ const stylesFactory = (theme: 'light' | 'dark' = "dark") => {
               background: ${tokens.colors.purple[200]};
               border-color: ${v.active};
             }
-          `;
+          `
         }
         // Default solid button
         return goober.css`
@@ -297,8 +304,8 @@ const stylesFactory = (theme: 'light' | 'dark' = "dark") => {
             background: ${v.active};
             border-color: ${v.active};
           }
-        `;
-      }
+        `
+      },
     },
     tag: {
       dot: (color: keyof typeof tokens.colors) => css`