feat: extract components and consolidat styles

.changeset/clear-plums-lay.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/devtools-ui': patch
+'@tanstack/devtools': patch
+---
+
+consolidate styles into devtools-ui

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

@@ -0,0 +1,27 @@
+import clsx from 'clsx'
+import { useStyles } from '../styles/use-styles'
+import type { JSX } from 'solid-js/jsx-runtime'
+
+type PanelProps = JSX.IntrinsicElements['div'] & {
+  children?: any
+  className?: string
+  withPadding?: boolean
+}
+
+export const MainPanel = ({
+  className,
+  children,
+  class: classStyles,
+  withPadding,
+}: PanelProps) => {
+  const styles = useStyles()
+  return (
+    <div
+      class={clsx(styles().mainPanel.panel, className, classStyles, {
+        [styles().mainPanel.withPadding]: withPadding,
+      })}
+    >
+      {children}
+    </div>
+  )
+}

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

@@ -0,0 +1,51 @@
+import clsx from 'clsx'
+import { useStyles } from '../styles/use-styles'
+import type { JSX } from 'solid-js/jsx-runtime'
+
+export const Section = ({
+  children,
+  ...rest
+}: JSX.IntrinsicElements['section']) => {
+  const styles = useStyles()
+  return (
+    <section class={clsx(styles().section.main, rest.class)} {...rest}>
+      {children}
+    </section>
+  )
+}
+
+export const SectionTitle = ({
+  children,
+  ...rest
+}: JSX.IntrinsicElements['h3']) => {
+  const styles = useStyles()
+  return (
+    <h3 class={clsx(styles().section.title, rest.class)} {...rest}>
+      {children}
+    </h3>
+  )
+}
+
+export const SectionDescription = ({
+  children,
+  ...rest
+}: JSX.IntrinsicElements['p']) => {
+  const styles = useStyles()
+  return (
+    <p class={clsx(styles().section.description, rest.class)} {...rest}>
+      {children}
+    </p>
+  )
+}
+
+export const SectionIcon = ({
+  children,
+  ...rest
+}: JSX.IntrinsicElements['span']) => {
+  const styles = useStyles()
+  return (
+    <span class={clsx(styles().section.icon, rest.class)} {...rest}>
+      {children}
+    </span>
+  )
+}

packages/devtools-ui/src/index.ts

@@ -5,3 +5,10 @@ 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'

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

@@ -391,6 +391,55 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
         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]};
+      `,
+    },
   }
 }
 

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

@@ -43,7 +43,6 @@ const stylesFactory = () => {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
-      margin: 1.5rem;
       margin-bottom: 2rem;
       border-radius: 0.75rem;
     `,
@@ -407,42 +406,6 @@ const stylesFactory = () => {
       overflow-y: auto;
     `,
 
-    settingsContainer: css`
-      padding: 1.5rem;
-      height: 100%;
-      overflow-y: auto;
-      background-color: ${colors.darkGray[700]};
-    `,
-    settingsSection: 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);
-    `,
-    sectionTitle: 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;
-    `,
-    sectionIcon: css`
-      color: ${colors.purple[400]};
-    `,
-    sectionDescription: css`
-      color: ${colors.gray[400]};
-      font-size: 0.875rem;
-      margin: 0 0 1.5rem 0;
-      line-height: 1.5;
-      text-align: left;
-    `,
     settingsGroup: css`
       display: flex;
       flex-direction: column;

packages/devtools/src/tabs/seo-tab.tsx

@@ -1,4 +1,11 @@
 import { For, createSignal } from 'solid-js'
+import {
+  MainPanel,
+  Section,
+  SectionDescription,
+  SectionIcon,
+  SectionTitle,
+} from '@tanstack/devtools-ui'
 import { useStyles } from '../styles/use-styles'
 import { useHeadChanges } from '../hooks/use-head-changes'
 
@@ -174,32 +181,33 @@ export const SeoTab = () => {
   })
 
   return (
-    <div class={styles().seoTabContainer}>
-      <section class={styles().seoTabSection}>
-        <h3 class={styles().sectionTitle}>
-          <svg
-            class={styles().sectionIcon}
-            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="m10 9-3 3 3 3" />
-            <path d="m14 15 3-3-3-3" />
-            <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
-          </svg>
+    <MainPanel withPadding>
+      <Section>
+        <SectionTitle>
+          <SectionIcon>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="m10 9-3 3 3 3" />
+              <path d="m14 15 3-3-3-3" />
+              <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
+            </svg>
+          </SectionIcon>
           Social previews
-        </h3>
-        <p class={styles().sectionDescription}>
+        </SectionTitle>
+        <SectionDescription>
           See how your current page will look when shared on popular social
           networks. The tool checks for essential meta tags and highlights any
           that are missing.
-        </p>
+        </SectionDescription>
         <div class={styles().seoPreviewSection}>
           <For each={reports()}>
             {(report, i) => {
@@ -231,8 +239,7 @@ export const SeoTab = () => {
             }}
           </For>
         </div>
-      </section>
-      {/* Future sections can be added here as <section class={styles().seoTabSection}>...</section> */}
-    </div>
+      </Section>
+    </MainPanel>
   )
 }