Skip to content

Commit fc02e84

Browse files
AlemTuzlakautofix-ci[bot]
AlemTuzlak
and
autofix-ci[bot]
authored
feat: extract components and consolidat styles (#83)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent 6c15b49 commit fc02e84

File tree

8 files changed

+281
-157
lines changed

8 files changed

+281
-157
lines changed

‎.changeset/clear-plums-lay.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@tanstack/devtools-ui': patch
3+
'@tanstack/devtools': patch
4+
---
5+
6+
consolidate styles into devtools-ui

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import clsx from 'clsx'
2+
import { useStyles } from '../styles/use-styles'
3+
import type { JSX } from 'solid-js/jsx-runtime'
4+
5+
type PanelProps = JSX.IntrinsicElements['div'] & {
6+
children?: any
7+
className?: string
8+
withPadding?: boolean
9+
}
10+
11+
export const MainPanel = ({
12+
className,
13+
children,
14+
class: classStyles,
15+
withPadding,
16+
}: PanelProps) => {
17+
const styles = useStyles()
18+
return (
19+
<div
20+
class={clsx(styles().mainPanel.panel, className, classStyles, {
21+
[styles().mainPanel.withPadding]: withPadding,
22+
})}
23+
>
24+
{children}
25+
</div>
26+
)
27+
}

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import clsx from 'clsx'
2+
import { useStyles } from '../styles/use-styles'
3+
import type { JSX } from 'solid-js/jsx-runtime'
4+
5+
export const Section = ({
6+
children,
7+
...rest
8+
}: JSX.IntrinsicElements['section']) => {
9+
const styles = useStyles()
10+
return (
11+
<section class={clsx(styles().section.main, rest.class)} {...rest}>
12+
{children}
13+
</section>
14+
)
15+
}
16+
17+
export const SectionTitle = ({
18+
children,
19+
...rest
20+
}: JSX.IntrinsicElements['h3']) => {
21+
const styles = useStyles()
22+
return (
23+
<h3 class={clsx(styles().section.title, rest.class)} {...rest}>
24+
{children}
25+
</h3>
26+
)
27+
}
28+
29+
export const SectionDescription = ({
30+
children,
31+
...rest
32+
}: JSX.IntrinsicElements['p']) => {
33+
const styles = useStyles()
34+
return (
35+
<p class={clsx(styles().section.description, rest.class)} {...rest}>
36+
{children}
37+
</p>
38+
)
39+
}
40+
41+
export const SectionIcon = ({
42+
children,
43+
...rest
44+
}: JSX.IntrinsicElements['span']) => {
45+
const styles = useStyles()
46+
return (
47+
<span class={clsx(styles().section.icon, rest.class)} {...rest}>
48+
{children}
49+
</span>
50+
)
51+
}

‎packages/devtools-ui/src/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,10 @@ export { TanStackLogo } from './components/logo'
55
export { JsonTree } from './components/tree'
66
export { Button } from './components/button'
77
export { Tag } from './components/tag'
8+
export { MainPanel } from './components/main-panel'
9+
export {
10+
Section,
11+
SectionTitle,
12+
SectionDescription,
13+
SectionIcon,
14+
} from './components/section'

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -391,6 +391,55 @@ const stylesFactory = (theme: 'light' | 'dark' = 'dark') => {
391391
margin-left: ${isRoot ? '0' : '1rem'};
392392
`,
393393
},
394+
section: {
395+
main: css`
396+
margin-bottom: 2rem;
397+
padding: 1.5rem;
398+
background-color: ${colors.darkGray[800]};
399+
border: 1px solid ${colors.gray[700]};
400+
border-radius: 0.75rem;
401+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
402+
`,
403+
title: css`
404+
font-size: 1.125rem;
405+
font-weight: 600;
406+
color: ${colors.gray[100]};
407+
margin: 0 0 1rem 0;
408+
padding-bottom: 0.5rem;
409+
border-bottom: 1px solid ${colors.gray[700]};
410+
display: flex;
411+
align-items: center;
412+
gap: 0.5rem;
413+
text-align: left;
414+
`,
415+
icon: css`
416+
height: 20px;
417+
width: 20px;
418+
& > svg {
419+
height: 100%;
420+
width: 100%;
421+
}
422+
color: ${colors.purple[400]};
423+
`,
424+
description: css`
425+
color: ${colors.gray[400]};
426+
font-size: 0.875rem;
427+
margin: 0 0 1.5rem 0;
428+
line-height: 1.5;
429+
text-align: left;
430+
`,
431+
},
432+
mainPanel: {
433+
panel: css`
434+
padding: 0;
435+
background: ${colors.darkGray[700]};
436+
overflow-y: auto;
437+
height: 100%;
438+
`,
439+
withPadding: css`
440+
padding: ${tokens.size[4]};
441+
`,
442+
},
394443
}
395444
}
396445

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

Lines changed: 0 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ const stylesFactory = () => {
4343
display: flex;
4444
flex-direction: column;
4545
gap: 0.5rem;
46-
margin: 1.5rem;
4746
margin-bottom: 2rem;
4847
border-radius: 0.75rem;
4948
`,
@@ -407,42 +406,6 @@ const stylesFactory = () => {
407406
overflow-y: auto;
408407
`,
409408

410-
settingsContainer: css`
411-
padding: 1.5rem;
412-
height: 100%;
413-
overflow-y: auto;
414-
background-color: ${colors.darkGray[700]};
415-
`,
416-
settingsSection: css`
417-
margin-bottom: 2rem;
418-
padding: 1.5rem;
419-
background-color: ${colors.darkGray[800]};
420-
border: 1px solid ${colors.gray[700]};
421-
border-radius: 0.75rem;
422-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
423-
`,
424-
sectionTitle: css`
425-
font-size: 1.125rem;
426-
font-weight: 600;
427-
color: ${colors.gray[100]};
428-
margin: 0 0 1rem 0;
429-
padding-bottom: 0.5rem;
430-
border-bottom: 1px solid ${colors.gray[700]};
431-
display: flex;
432-
align-items: center;
433-
gap: 0.5rem;
434-
text-align: left;
435-
`,
436-
sectionIcon: css`
437-
color: ${colors.purple[400]};
438-
`,
439-
sectionDescription: css`
440-
color: ${colors.gray[400]};
441-
font-size: 0.875rem;
442-
margin: 0 0 1.5rem 0;
443-
line-height: 1.5;
444-
text-align: left;
445-
`,
446409
settingsGroup: css`
447410
display: flex;
448411
flex-direction: column;

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

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
import { For, createSignal } from 'solid-js'
2+
import {
3+
MainPanel,
4+
Section,
5+
SectionDescription,
6+
SectionIcon,
7+
SectionTitle,
8+
} from '@tanstack/devtools-ui'
29
import { useStyles } from '../styles/use-styles'
310
import { useHeadChanges } from '../hooks/use-head-changes'
411

@@ -174,32 +181,33 @@ export const SeoTab = () => {
174181
})
175182

176183
return (
177-
<div class={styles().seoTabContainer}>
178-
<section class={styles().seoTabSection}>
179-
<h3 class={styles().sectionTitle}>
180-
<svg
181-
class={styles().sectionIcon}
182-
xmlns="http://www.w3.org/2000/svg"
183-
width="24"
184-
height="24"
185-
viewBox="0 0 24 24"
186-
fill="none"
187-
stroke="currentColor"
188-
stroke-width="2"
189-
stroke-linecap="round"
190-
stroke-linejoin="round"
191-
>
192-
<path d="m10 9-3 3 3 3" />
193-
<path d="m14 15 3-3-3-3" />
194-
<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" />
195-
</svg>
184+
<MainPanel withPadding>
185+
<Section>
186+
<SectionTitle>
187+
<SectionIcon>
188+
<svg
189+
xmlns="http://www.w3.org/2000/svg"
190+
width="20"
191+
height="20"
192+
viewBox="0 0 24 24"
193+
fill="none"
194+
stroke="currentColor"
195+
stroke-width="2"
196+
stroke-linecap="round"
197+
stroke-linejoin="round"
198+
>
199+
<path d="m10 9-3 3 3 3" />
200+
<path d="m14 15 3-3-3-3" />
201+
<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" />
202+
</svg>
203+
</SectionIcon>
196204
Social previews
197-
</h3>
198-
<p class={styles().sectionDescription}>
205+
</SectionTitle>
206+
<SectionDescription>
199207
See how your current page will look when shared on popular social
200208
networks. The tool checks for essential meta tags and highlights any
201209
that are missing.
202-
</p>
210+
</SectionDescription>
203211
<div class={styles().seoPreviewSection}>
204212
<For each={reports()}>
205213
{(report, i) => {
@@ -231,8 +239,7 @@ export const SeoTab = () => {
231239
}}
232240
</For>
233241
</div>
234-
</section>
235-
{/* Future sections can be added here as <section class={styles().seoTabSection}>...</section> */}
236-
</div>
242+
</Section>
243+
</MainPanel>
237244
)
238245
}

0 commit comments

Comments
 (0)