Skip to content

Commit 08c3a30

Browse files
AlemTuzlakAlemTuzlak
committed
feat: add devtools/ui
1 parent ba84ffb commit 08c3a30

File tree

20 files changed

+664
-183
lines changed

20 files changed

+664
-183
lines changed

‎packages/devtools-ui/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# @tanstack/devtools-ui
2+
3+
Set of Solid.js UI components for TanStack Devtools.
4+
5+
These are used across the TanStack ecosystem to provide a consistent and customizable user interface for your devtools.

‎packages/devtools-ui/eslint.config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// @ts-check
2+
3+
import rootConfig from '../../eslint.config.js'
4+
5+
export default [
6+
...rootConfig,
7+
{
8+
rules: {},
9+
},
10+
]

‎packages/devtools-ui/package.json

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
{
2+
"name": "@tanstack/devtools-ui",
3+
"version": "0.2.1",
4+
"description": "TanStack Devtools UI is a set of UI components for building devtool panels for your application.",
5+
"author": "Tanner Linsley",
6+
"license": "MIT",
7+
"repository": {
8+
"type": "git",
9+
"url": "https://github.com/TanStack/devtools.git",
10+
"directory": "packages/devtools"
11+
},
12+
"homepage": "https://tanstack.com/devtools",
13+
"funding": {
14+
"type": "github",
15+
"url": "https://github.com/sponsors/tannerlinsley"
16+
},
17+
"keywords": [
18+
"devtools"
19+
],
20+
"type": "module",
21+
"types": "dist/esm/index.d.ts",
22+
"main": "dist/cjs/index.cjs",
23+
"module": "dist/esm/index.js",
24+
"exports": {
25+
".": {
26+
"import": {
27+
"types": "./dist/esm/index.d.ts",
28+
"default": "./dist/esm/index.js"
29+
},
30+
"require": {
31+
"types": "./dist/cjs/index.d.cts",
32+
"default": "./dist/cjs/index.cjs"
33+
}
34+
},
35+
"./package.json": "./package.json"
36+
},
37+
"sideEffects": false,
38+
"engines": {
39+
"node": ">=18"
40+
},
41+
"files": [
42+
"dist/",
43+
"src"
44+
],
45+
"scripts": {
46+
"clean": "premove ./build ./dist",
47+
"lint:fix": "eslint ./src --fix",
48+
"test:eslint": "eslint ./src",
49+
"test:lib": "vitest",
50+
"test:lib:dev": "pnpm test:lib --watch",
51+
"test:types": "tsc",
52+
"test:build": "publint --strict",
53+
"build": "vite build"
54+
},
55+
"dependencies": {
56+
"goober": "^2.1.16",
57+
"solid-js": "^1.9.7"
58+
},
59+
"peerDependencies": {
60+
"solid-js": ">=1.9.7"
61+
},
62+
"devDependencies": {
63+
"vite-plugin-solid": "^2.11.6"
64+
}
65+
}

‎packages/devtools/src/components/checkbox.tsx renamed to ‎packages/devtools-ui/src/components/checkbox.tsx

File renamed without changes.

‎packages/devtools/src/components/input.tsx renamed to ‎packages/devtools-ui/src/components/input.tsx

File renamed without changes.

‎packages/devtools/src/components/logo.tsx renamed to ‎packages/devtools-ui/src/components/logo.tsx

File renamed without changes.

‎packages/devtools/src/components/select.tsx renamed to ‎packages/devtools-ui/src/components/select.tsx

File renamed without changes.

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export { Checkbox } from "./components/checkbox"
2+
export { Input } from "./components/input"
3+
export { Select } from "./components/select"
4+
export { TanStackLogo } from "./components/logo"

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

Lines changed: 305 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,305 @@
1+
export const tokens = {
2+
colors: {
3+
inherit: 'inherit',
4+
current: 'currentColor',
5+
transparent: 'transparent',
6+
black: '#000000',
7+
white: '#ffffff',
8+
neutral: {
9+
50: '#f9fafb',
10+
100: '#f2f4f7',
11+
200: '#eaecf0',
12+
300: '#d0d5dd',
13+
400: '#98a2b3',
14+
500: '#667085',
15+
600: '#475467',
16+
700: '#344054',
17+
800: '#1d2939',
18+
900: '#101828',
19+
},
20+
darkGray: {
21+
50: '#525c7a',
22+
100: '#49536e',
23+
200: '#414962',
24+
300: '#394056',
25+
400: '#313749',
26+
500: '#292e3d',
27+
600: '#212530',
28+
700: '#191c24',
29+
800: '#111318',
30+
900: '#0b0d10',
31+
},
32+
gray: {
33+
50: '#f9fafb',
34+
100: '#f2f4f7',
35+
200: '#eaecf0',
36+
300: '#d0d5dd',
37+
400: '#98a2b3',
38+
500: '#667085',
39+
600: '#475467',
40+
700: '#344054',
41+
800: '#1d2939',
42+
900: '#101828',
43+
},
44+
blue: {
45+
25: '#F5FAFF',
46+
50: '#EFF8FF',
47+
100: '#D1E9FF',
48+
200: '#B2DDFF',
49+
300: '#84CAFF',
50+
400: '#53B1FD',
51+
500: '#2E90FA',
52+
600: '#1570EF',
53+
700: '#175CD3',
54+
800: '#1849A9',
55+
900: '#194185',
56+
},
57+
green: {
58+
25: '#F6FEF9',
59+
50: '#ECFDF3',
60+
100: '#D1FADF',
61+
200: '#A6F4C5',
62+
300: '#6CE9A6',
63+
400: '#32D583',
64+
500: '#12B76A',
65+
600: '#039855',
66+
700: '#027A48',
67+
800: '#05603A',
68+
900: '#054F31',
69+
},
70+
red: {
71+
50: '#fef2f2',
72+
100: '#fee2e2',
73+
200: '#fecaca',
74+
300: '#fca5a5',
75+
400: '#f87171',
76+
500: '#ef4444',
77+
600: '#dc2626',
78+
700: '#b91c1c',
79+
800: '#991b1b',
80+
900: '#7f1d1d',
81+
950: '#450a0a',
82+
},
83+
yellow: {
84+
25: '#FFFCF5',
85+
50: '#FFFAEB',
86+
100: '#FEF0C7',
87+
200: '#FEDF89',
88+
300: '#FEC84B',
89+
400: '#FDB022',
90+
500: '#F79009',
91+
600: '#DC6803',
92+
700: '#B54708',
93+
800: '#93370D',
94+
900: '#7A2E0E',
95+
},
96+
purple: {
97+
25: '#FAFAFF',
98+
50: '#F4F3FF',
99+
100: '#EBE9FE',
100+
200: '#D9D6FE',
101+
300: '#BDB4FE',
102+
400: '#9B8AFB',
103+
500: '#7A5AF8',
104+
600: '#6938EF',
105+
700: '#5925DC',
106+
800: '#4A1FB8',
107+
900: '#3E1C96',
108+
},
109+
teal: {
110+
25: '#F6FEFC',
111+
50: '#F0FDF9',
112+
100: '#CCFBEF',
113+
200: '#99F6E0',
114+
300: '#5FE9D0',
115+
400: '#2ED3B7',
116+
500: '#15B79E',
117+
600: '#0E9384',
118+
700: '#107569',
119+
800: '#125D56',
120+
900: '#134E48',
121+
},
122+
pink: {
123+
25: '#fdf2f8',
124+
50: '#fce7f3',
125+
100: '#fbcfe8',
126+
200: '#f9a8d4',
127+
300: '#f472b6',
128+
400: '#ec4899',
129+
500: '#db2777',
130+
600: '#be185d',
131+
700: '#9d174d',
132+
800: '#831843',
133+
900: '#500724',
134+
},
135+
cyan: {
136+
25: '#ecfeff',
137+
50: '#cffafe',
138+
100: '#a5f3fc',
139+
200: '#67e8f9',
140+
300: '#22d3ee',
141+
400: '#06b6d4',
142+
500: '#0891b2',
143+
600: '#0e7490',
144+
700: '#155e75',
145+
800: '#164e63',
146+
900: '#083344',
147+
},
148+
},
149+
alpha: {
150+
100: 'ff',
151+
90: 'e5',
152+
80: 'cc',
153+
70: 'b3',
154+
60: '99',
155+
50: '80',
156+
40: '66',
157+
30: '4d',
158+
20: '33',
159+
10: '1a',
160+
0: '00',
161+
},
162+
font: {
163+
size: {
164+
'2xs': 'calc(var(--tsrd-font-size) * 0.625)',
165+
xs: 'calc(var(--tsrd-font-size) * 0.75)',
166+
sm: 'calc(var(--tsrd-font-size) * 0.875)',
167+
md: 'var(--tsrd-font-size)',
168+
lg: 'calc(var(--tsrd-font-size) * 1.125)',
169+
xl: 'calc(var(--tsrd-font-size) * 1.25)',
170+
'2xl': 'calc(var(--tsrd-font-size) * 1.5)',
171+
'3xl': 'calc(var(--tsrd-font-size) * 1.875)',
172+
'4xl': 'calc(var(--tsrd-font-size) * 2.25)',
173+
'5xl': 'calc(var(--tsrd-font-size) * 3)',
174+
'6xl': 'calc(var(--tsrd-font-size) * 3.75)',
175+
'7xl': 'calc(var(--tsrd-font-size) * 4.5)',
176+
'8xl': 'calc(var(--tsrd-font-size) * 6)',
177+
'9xl': 'calc(var(--tsrd-font-size) * 8)',
178+
},
179+
lineHeight: {
180+
'3xs': 'calc(var(--tsrd-font-size) * 0.75)',
181+
'2xs': 'calc(var(--tsrd-font-size) * 0.875)',
182+
xs: 'calc(var(--tsrd-font-size) * 1)',
183+
sm: 'calc(var(--tsrd-font-size) * 1.25)',
184+
md: 'calc(var(--tsrd-font-size) * 1.5)',
185+
lg: 'calc(var(--tsrd-font-size) * 1.75)',
186+
xl: 'calc(var(--tsrd-font-size) * 2)',
187+
'2xl': 'calc(var(--tsrd-font-size) * 2.25)',
188+
'3xl': 'calc(var(--tsrd-font-size) * 2.5)',
189+
'4xl': 'calc(var(--tsrd-font-size) * 2.75)',
190+
'5xl': 'calc(var(--tsrd-font-size) * 3)',
191+
'6xl': 'calc(var(--tsrd-font-size) * 3.25)',
192+
'7xl': 'calc(var(--tsrd-font-size) * 3.5)',
193+
'8xl': 'calc(var(--tsrd-font-size) * 3.75)',
194+
'9xl': 'calc(var(--tsrd-font-size) * 4)',
195+
},
196+
weight: {
197+
thin: '100',
198+
extralight: '200',
199+
light: '300',
200+
normal: '400',
201+
medium: '500',
202+
semibold: '600',
203+
bold: '700',
204+
extrabold: '800',
205+
black: '900',
206+
},
207+
fontFamily: {
208+
sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',
209+
mono: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`,
210+
},
211+
},
212+
breakpoints: {
213+
xs: '320px',
214+
sm: '640px',
215+
md: '768px',
216+
lg: '1024px',
217+
xl: '1280px',
218+
'2xl': '1536px',
219+
},
220+
border: {
221+
radius: {
222+
none: '0px',
223+
xs: 'calc(var(--tsrd-font-size) * 0.125)',
224+
sm: 'calc(var(--tsrd-font-size) * 0.25)',
225+
md: 'calc(var(--tsrd-font-size) * 0.375)',
226+
lg: 'calc(var(--tsrd-font-size) * 0.5)',
227+
xl: 'calc(var(--tsrd-font-size) * 0.75)',
228+
'2xl': 'calc(var(--tsrd-font-size) * 1)',
229+
'3xl': 'calc(var(--tsrd-font-size) * 1.5)',
230+
full: '9999px',
231+
},
232+
},
233+
size: {
234+
0: '0px',
235+
0.25: 'calc(var(--tsrd-font-size) * 0.0625)',
236+
0.5: 'calc(var(--tsrd-font-size) * 0.125)',
237+
1: 'calc(var(--tsrd-font-size) * 0.25)',
238+
1.5: 'calc(var(--tsrd-font-size) * 0.375)',
239+
2: 'calc(var(--tsrd-font-size) * 0.5)',
240+
2.5: 'calc(var(--tsrd-font-size) * 0.625)',
241+
3: 'calc(var(--tsrd-font-size) * 0.75)',
242+
3.5: 'calc(var(--tsrd-font-size) * 0.875)',
243+
4: 'calc(var(--tsrd-font-size) * 1)',
244+
4.5: 'calc(var(--tsrd-font-size) * 1.125)',
245+
5: 'calc(var(--tsrd-font-size) * 1.25)',
246+
5.5: 'calc(var(--tsrd-font-size) * 1.375)',
247+
6: 'calc(var(--tsrd-font-size) * 1.5)',
248+
6.5: 'calc(var(--tsrd-font-size) * 1.625)',
249+
7: 'calc(var(--tsrd-font-size) * 1.75)',
250+
8: 'calc(var(--tsrd-font-size) * 2)',
251+
9: 'calc(var(--tsrd-font-size) * 2.25)',
252+
10: 'calc(var(--tsrd-font-size) * 2.5)',
253+
11: 'calc(var(--tsrd-font-size) * 2.75)',
254+
12: 'calc(var(--tsrd-font-size) * 3)',
255+
14: 'calc(var(--tsrd-font-size) * 3.5)',
256+
16: 'calc(var(--tsrd-font-size) * 4)',
257+
20: 'calc(var(--tsrd-font-size) * 5)',
258+
24: 'calc(var(--tsrd-font-size) * 6)',
259+
28: 'calc(var(--tsrd-font-size) * 7)',
260+
32: 'calc(var(--tsrd-font-size) * 8)',
261+
36: 'calc(var(--tsrd-font-size) * 9)',
262+
40: 'calc(var(--tsrd-font-size) * 10)',
263+
44: 'calc(var(--tsrd-font-size) * 11)',
264+
48: 'calc(var(--tsrd-font-size) * 12)',
265+
52: 'calc(var(--tsrd-font-size) * 13)',
266+
56: 'calc(var(--tsrd-font-size) * 14)',
267+
60: 'calc(var(--tsrd-font-size) * 15)',
268+
64: 'calc(var(--tsrd-font-size) * 16)',
269+
72: 'calc(var(--tsrd-font-size) * 18)',
270+
80: 'calc(var(--tsrd-font-size) * 20)',
271+
96: 'calc(var(--tsrd-font-size) * 24)',
272+
},
273+
shadow: {
274+
xs: (_: string = 'rgb(0 0 0 / 0.1)') =>
275+
`0 1px 2px 0 rgb(0 0 0 / 0.05)` as const,
276+
sm: (color: string = 'rgb(0 0 0 / 0.1)') =>
277+
`0 1px 3px 0 ${color}, 0 1px 2px -1px ${color}` as const,
278+
md: (color: string = 'rgb(0 0 0 / 0.1)') =>
279+
`0 4px 6px -1px ${color}, 0 2px 4px -2px ${color}` as const,
280+
lg: (color: string = 'rgb(0 0 0 / 0.1)') =>
281+
`0 10px 15px -3px ${color}, 0 4px 6px -4px ${color}` as const,
282+
xl: (color: string = 'rgb(0 0 0 / 0.1)') =>
283+
`0 20px 25px -5px ${color}, 0 8px 10px -6px ${color}` as const,
284+
'2xl': (color: string = 'rgb(0 0 0 / 0.25)') =>
285+
`0 25px 50px -12px ${color}` as const,
286+
inner: (color: string = 'rgb(0 0 0 / 0.05)') =>
287+
`inset 0 2px 4px 0 ${color}` as const,
288+
none: () => `none` as const,
289+
},
290+
zIndices: {
291+
hide: -1,
292+
auto: 'auto',
293+
base: 0,
294+
docked: 10,
295+
dropdown: 1000,
296+
sticky: 1100,
297+
banner: 1200,
298+
overlay: 1300,
299+
modal: 1400,
300+
popover: 1500,
301+
skipLink: 1600,
302+
toast: 1700,
303+
tooltip: 1800,
304+
},
305+
} as const

0 commit comments

Comments
 (0)