From 5282b7ff5998baf4ef29b94dd08db60ea2c85203 Mon Sep 17 00:00:00 2001 From: Alem Tuzlak Date: Wed, 27 Aug 2025 18:33:36 +0200 Subject: [PATCH 1/2] feat: extract components and consolidat styles --- .changeset/clear-plums-lay.md | 6 + .../devtools-ui/src/components/main-panel.tsx | 18 ++ .../devtools-ui/src/components/section.tsx | 31 +++ packages/devtools-ui/src/index.ts | 2 + packages/devtools-ui/src/styles/use-styles.ts | 50 +++++ packages/devtools/src/styles/use-styles.ts | 39 +--- packages/devtools/src/tabs/seo-tab.tsx | 51 ++--- packages/devtools/src/tabs/settings-tab.tsx | 193 +++++++++--------- 8 files changed, 232 insertions(+), 158 deletions(-) create mode 100644 .changeset/clear-plums-lay.md create mode 100644 packages/devtools-ui/src/components/main-panel.tsx create mode 100644 packages/devtools-ui/src/components/section.tsx diff --git a/.changeset/clear-plums-lay.md b/.changeset/clear-plums-lay.md new file mode 100644 index 00000000..2b621604 --- /dev/null +++ b/.changeset/clear-plums-lay.md @@ -0,0 +1,6 @@ +--- +'@tanstack/devtools-ui': patch +'@tanstack/devtools': patch +--- + +consolidate styles into devtools-ui diff --git a/packages/devtools-ui/src/components/main-panel.tsx b/packages/devtools-ui/src/components/main-panel.tsx new file mode 100644 index 00000000..e1155202 --- /dev/null +++ b/packages/devtools-ui/src/components/main-panel.tsx @@ -0,0 +1,18 @@ +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 ( +
+ {children} +
+ ); +} \ No newline at end of file diff --git a/packages/devtools-ui/src/components/section.tsx b/packages/devtools-ui/src/components/section.tsx new file mode 100644 index 00000000..800f98f9 --- /dev/null +++ b/packages/devtools-ui/src/components/section.tsx @@ -0,0 +1,31 @@ +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
+ {children} +
+} + +export const SectionTitle = ({ children, ...rest }: JSX.IntrinsicElements["h3"]) => { + const styles = useStyles(); + return

+ {children} +

+} + +export const SectionDescription = ({ children, ...rest }: JSX.IntrinsicElements["p"]) => { + const styles = useStyles(); + return

+ {children} +

+} + +export const SectionIcon = ({ children, ...rest }: JSX.IntrinsicElements["span"]) => { + const styles = useStyles(); + return + {children} + +} \ No newline at end of file diff --git a/packages/devtools-ui/src/index.ts b/packages/devtools-ui/src/index.ts index b7044322..62e6e737 100644 --- a/packages/devtools-ui/src/index.ts +++ b/packages/devtools-ui/src/index.ts @@ -5,3 +5,5 @@ 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' \ No newline at end of file diff --git a/packages/devtools-ui/src/styles/use-styles.ts b/packages/devtools-ui/src/styles/use-styles.ts index c0620f60..1887082c 100644 --- a/packages/devtools-ui/src/styles/use-styles.ts +++ b/packages/devtools-ui/src/styles/use-styles.ts @@ -391,6 +391,56 @@ 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]}; + ` + } + } } diff --git a/packages/devtools/src/styles/use-styles.ts b/packages/devtools/src/styles/use-styles.ts index 2587e951..81b7604c 100644 --- a/packages/devtools/src/styles/use-styles.ts +++ b/packages/devtools/src/styles/use-styles.ts @@ -42,8 +42,7 @@ const stylesFactory = () => { border: 1px solid ${colors.gray[700]}; display: flex; flex-direction: column; - gap: 0.5rem; - margin: 1.5rem; + gap: 0.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; diff --git a/packages/devtools/src/tabs/seo-tab.tsx b/packages/devtools/src/tabs/seo-tab.tsx index 39a7d9e2..134dfaf5 100644 --- a/packages/devtools/src/tabs/seo-tab.tsx +++ b/packages/devtools/src/tabs/seo-tab.tsx @@ -1,4 +1,5 @@ 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 +175,33 @@ export const SeoTab = () => { }) return ( -
-
-

- - - - - + +
+ + + + + + + + Social previews -

-

+ + 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. -

+
{(report, i) => { @@ -231,8 +233,7 @@ export const SeoTab = () => { }}
-
- {/* Future sections can be added here as
...
*/} -
+ + ) } diff --git a/packages/devtools/src/tabs/settings-tab.tsx b/packages/devtools/src/tabs/settings-tab.tsx index 3292f0d1..a301039c 100644 --- a/packages/devtools/src/tabs/settings-tab.tsx +++ b/packages/devtools/src/tabs/settings-tab.tsx @@ -1,5 +1,5 @@ import { Show, createMemo } from 'solid-js' -import { Button, Checkbox, Input, Select } from '@tanstack/devtools-ui' +import { Button, Checkbox, Input, MainPanel, Section, SectionDescription, SectionIcon, SectionTitle, Select } from '@tanstack/devtools-ui' import { useDevtoolsSettings } from '../context/use-devtools-context' import { uppercaseFirstLetter } from '../utils/sanitize' import { useStyles } from '../styles/use-styles' @@ -27,30 +27,31 @@ export const SettingsTab = () => { }) } return ( -
+ {/* General Settings */} -
-

- - - - +
+ + + + + + + General -

-

+ + Configure general behavior of the devtools panel. -

+
{ checked={settings().hideUntilHover} />
-
+ {/* URL Flag Settings */} -
-

- - - - - +
+ + + + + + + + URL Configuration -

-

+ + Control when devtools are available based on URL parameters. -

+
{
-
+ {/* Keyboard Settings */} -
-

- - - - - - - - - - - +
+ + + + + + + + + + + + + + Keyboard -

-

+ + Customize keyboard shortcuts for quick access. -

+
@@ -220,31 +222,32 @@ export const SettingsTab = () => { /> Final shortcut is: {hotkey().join(' + ')}
-
+ {/* Position Settings */} -
-

- - - - +
+ + + + + + + Position -

-

+ + Adjust the position of the trigger button and devtools panel. -

+