Skip to content

Commit b3e375f

Browse files
harry-whorlowAlemTuzlak
harry-whorlow
and
AlemTuzlak
authored
feat(devtools-ui): json tree handles dates (#258)
Co-authored-by: Alem Tuzlak <t.zlak97@gmail.com>
1 parent 9bf08e2 commit b3e375f

File tree

15 files changed

+4386
-6434
lines changed

15 files changed

+4386
-6434
lines changed

‎.changeset/dry-animals-dig.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@tanstack/devtools-ui': minor
3+
---
4+
5+
Updates devtools-ui JsonTree to display dates, as well as provide configuration for custom date format.

‎examples/react/bundling-repro/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
"devDependencies": {
5050
"@biomejs/biome": "2.2.4",
5151
"@tanstack/devtools-event-client": "latest",
52-
"@tanstack/devtools-vite": "latest",
52+
"@tanstack/devtools-vite": "0.5.3",
5353
"@testing-library/dom": "^10.4.0",
5454
"@testing-library/react": "^16.2.0",
5555
"@types/node": "^22.15.2",

‎examples/solid/devtools-ui/.eslintrc.cjs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// @ts-check
2+
3+
/** @type {import('eslint').Linter.Config} */
4+
const config = {
5+
settings: {
6+
extends: [],
7+
rules: {},
8+
},
9+
}
10+
11+
module.exports = config

‎examples/solid/devtools-ui/.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
pnpm-lock.yaml
15+
yarn.lock
16+
package-lock.json
17+
18+
# misc
19+
.DS_Store
20+
.env.local
21+
.env.development.local
22+
.env.test.local
23+
.env.production.local
24+
25+
npm-debug.log*
26+
yarn-debug.log*
27+
yarn-error.log*

‎examples/solid/devtools-ui/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install`
6+
- `npm run dev`

‎examples/solid/devtools-ui/index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" type="image/svg+xml" href="/emblem-light.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
9+
<title>TanStack Devtools Example</title>
10+
</head>
11+
<body>
12+
<noscript>You need to enable JavaScript to run this app.</noscript>
13+
<div id="root"></div>
14+
<script type="module" src="/src/index.tsx"></script>
15+
</body>
16+
</html>

‎examples/solid/devtools-ui/package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "@tanstack/devtools-example-devtools-ui",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite --port=3005",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"test:types": "tsc"
10+
},
11+
"dependencies": {
12+
"@tanstack/devtools-ui": "0.4.4",
13+
"@tanstack/solid-devtools": "^0.7.28",
14+
"solid-js": "^1.9.9"
15+
},
16+
"devDependencies": {
17+
"@tanstack/devtools-vite": "0.5.3",
18+
"vite": "^7.1.7",
19+
"vite-plugin-inspect": "11.3.3",
20+
"vite-plugin-solid": "^2.11.8"
21+
},
22+
"browserslist": {
23+
"production": [
24+
">0.2%",
25+
"not dead",
26+
"not op_mini all"
27+
],
28+
"development": [
29+
"last 1 chrome version",
30+
"last 1 firefox version",
31+
"last 1 safari version"
32+
]
33+
}
34+
}

‎examples/solid/devtools-ui/public/emblem-light.svg‎

Lines changed: 13 additions & 0 deletions
Loading

‎examples/solid/devtools-ui/src/index.css‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
:root {
2+
--app-background-color: #f9fafb;
3+
--app-heading-color: #101828;
4+
--app-button-bg: #f2f4f7;
5+
--app-button-border: #d0d5dd;
6+
--app-button-text: #101828;
7+
--app-button-hover: #eaecf0;
8+
--app-card-bg: #f9fafb;
9+
--app-card-border: #d0d5dd;
10+
}
11+
12+
[data-theme='light'] {
13+
--app-background-color: #f9fafb;
14+
--app-heading-color: #101828;
15+
--app-button-bg: #f2f4f7;
16+
--app-button-border: #d0d5dd;
17+
--app-button-text: #101828;
18+
--app-button-hover: #eaecf0;
19+
--app-card-bg: #f9fafb;
20+
--app-card-border: #d0d5dd;
21+
}
22+
23+
[data-theme='dark'] {
24+
--app-background-color: #191c24;
25+
--app-heading-color: #f2f4f7;
26+
--app-button-bg: #212530;
27+
--app-button-border: #292e3d;
28+
--app-button-text: #f2f4f7;
29+
--app-button-hover: #292e3d;
30+
--app-card-bg: #212530;
31+
--app-card-border: #292e3d;
32+
}
33+
34+
@media (prefers-color-scheme: dark) {
35+
:root:not([data-theme]) {
36+
--app-background-color: #191c24;
37+
--app-heading-color: #f2f4f7;
38+
--app-button-bg: #212530;
39+
--app-button-border: #292e3d;
40+
--app-button-text: #f2f4f7;
41+
--app-button-hover: #292e3d;
42+
--app-card-bg: #212530;
43+
--app-card-border: #292e3d;
44+
}
45+
}
46+
47+
body {
48+
background-color: var(--app-background-color);
49+
}
50+
51+
.app-shell {
52+
padding: 16px;
53+
}
54+
55+
.theme-toggle {
56+
border: 1px solid var(--app-button-border);
57+
background-color: var(--app-button-bg);
58+
color: var(--app-button-text);
59+
border-radius: 8px;
60+
padding: 8px 12px;
61+
font-size: 14px;
62+
font-weight: 600;
63+
cursor: pointer;
64+
transition:
65+
background-color 0.15s ease,
66+
border-color 0.15s ease,
67+
transform 0.1s ease;
68+
}
69+
70+
.theme-toggle:hover {
71+
background-color: var(--app-button-hover);
72+
}
73+
74+
.theme-toggle:active {
75+
transform: translateY(1px);
76+
}
77+
78+
.theme-toggle:focus-visible {
79+
outline: 2px solid #1570ef;
80+
outline-offset: 2px;
81+
}
82+
83+
.json-tree-container {
84+
margin-top: 16px;
85+
padding: 16px;
86+
border: 1px solid var(--app-card-border);
87+
border-radius: 10px;
88+
background-color: var(--app-card-bg);
89+
}
90+
91+
h1,
92+
h2,
93+
h3,
94+
h4,
95+
h5,
96+
h6 {
97+
font-family: Arial;
98+
color: var(--app-heading-color);
99+
}

‎examples/solid/devtools-ui/src/index.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { createEffect, createSignal } from 'solid-js'
2+
import { render } from 'solid-js/web'
3+
4+
import { JsonTree, ThemeContextProvider } from '@tanstack/devtools-ui'
5+
6+
import './index.css'
7+
8+
const JsonTreeDate = {
9+
name: 'date format',
10+
value: { period: 'past', data: new Date() },
11+
isoValue: new Date().toISOString(),
12+
}
13+
14+
const JsonTreePath = {
15+
name: 'path collapse',
16+
foo: { bar: 'foo' },
17+
test: [[], [['hi']]],
18+
}
19+
20+
const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')
21+
22+
function App() {
23+
const [theme, setTheme] = createSignal<'light' | 'dark'>(
24+
darkThemeMq.matches ? 'dark' : 'light',
25+
)
26+
27+
createEffect(() => {
28+
document.documentElement.setAttribute('data-theme', theme())
29+
})
30+
31+
const toggleTheme = () => {
32+
setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))
33+
}
34+
35+
return (
36+
<div class="app-shell">
37+
<button type="button" class="theme-toggle" onClick={toggleTheme}>
38+
Toggle theme ({theme()})
39+
</button>
40+
41+
<ThemeContextProvider theme={theme()}>
42+
<h1>Json tree - dates</h1>
43+
44+
<div class="json-tree-container">
45+
<JsonTree
46+
value={JsonTreeDate}
47+
config={{ dateFormat: 'DD-MM-YYYY' }}
48+
/>
49+
</div>
50+
51+
<h1>Json tree - paths</h1>
52+
53+
<div class="json-tree-container">
54+
<JsonTree value={JsonTreePath} collapsePaths={['foo']} />
55+
</div>
56+
</ThemeContextProvider>
57+
</div>
58+
)
59+
}
60+
61+
const root = document.getElementById('root')
62+
if (root) render(() => <App />, root)

0 commit comments

Comments
 (0)