Skip to content

Commit b55099e

Browse files
bean1352bean1352
authored
Merge pull request #827 from powersync-ja/feat/refactor-sync-diagnostics-client
Migrate sync diagnostics client from Material UI to shadcn/ui
2 parents 3f7c203 + 2d35959 commit b55099e

34 files changed

Lines changed: 3336 additions & 1445 deletions

‎.changeset/angry-eggs-whisper.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@powersync/diagnostics-app': minor
3+
---
4+
5+
Migrate from Material UI to shadcn/ui with Tailwind CSS for consistency with PowerSync Dashboard

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
node_modules
22
lib
3+
!tools/diagnostics-app/src/lib/
34
dist
45
*.tsbuildinfo
56
.vscode

‎pnpm-lock.yaml‎

Lines changed: 1264 additions & 609 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tools/diagnostics-app/components.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "src/app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎tools/diagnostics-app/package.json‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,46 @@
22
"name": "@powersync/diagnostics-app",
33
"version": "0.9.21",
44
"private": true,
5+
"type": "module",
56
"scripts": {
67
"dev": "vite",
78
"build": "tsc -b && vite build",
89
"preview": "vite preview",
910
"start": "pnpm build && pnpm preview"
1011
},
1112
"dependencies": {
12-
"@emotion/react": "^11.14.0",
13-
"@emotion/styled": "^11.14.1",
1413
"@journeyapps/wa-sqlite": "^1.4.1",
15-
"@mui/icons-material": "^7.3.5",
16-
"@mui/material": "^5.15.12",
17-
"@mui/x-data-grid": "^6.19.6",
1814
"@powersync/react": "workspace:*",
1915
"@powersync/web": "workspace:*",
16+
"@radix-ui/react-dialog": "^1.1.15",
17+
"@radix-ui/react-label": "^2.1.8",
18+
"@radix-ui/react-select": "^2.2.6",
19+
"@radix-ui/react-separator": "^1.1.8",
20+
"@radix-ui/react-slot": "^1.2.4",
21+
"@radix-ui/react-switch": "^1.2.6",
22+
"@radix-ui/react-tooltip": "^1.2.8",
23+
"class-variance-authority": "^0.7.1",
24+
"clsx": "^2.1.1",
2025
"formik": "^2.4.9",
26+
"lucide-react": "^0.562.0",
2127
"react": "^18.2.0",
2228
"react-dom": "^18.2.0",
23-
"react-router-dom": "^6.22.3"
29+
"react-router-dom": "^6.22.3",
30+
"tailwind-merge": "^3.4.0",
31+
"tw-animate-css": "^1.4.0"
2432
},
2533
"devDependencies": {
2634
"@swc/core": "~1.6.0",
27-
"@types/node": "^20.11.25",
35+
"@tailwindcss/vite": "^4.1.17",
36+
"@types/node": "^22.18.1",
2837
"@types/react": "^18.2.64",
2938
"@types/react-dom": "^18.2.21",
3039
"@vitejs/plugin-react": "^4.2.1",
31-
"autoprefixer": "^10.4.18",
32-
"babel-loader": "^9.1.3",
40+
"tailwindcss": "^4.1.17",
3341
"typescript": "^5.5.3",
3442
"vite": "^5.1.5",
35-
"vite-plugin-pwa": "^0.19.2"
43+
"vite-plugin-pwa": "^0.19.2",
44+
"vite-plugin-top-level-await": "^1.4.1",
45+
"vite-plugin-wasm": "^3.3.0"
3646
}
3747
}

‎tools/diagnostics-app/src/app/globals.css‎

Lines changed: 152 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,156 @@
1+
@import 'tailwindcss';
2+
@import 'tw-animate-css';
3+
4+
@custom-variant dark (&:is(.dark *));
5+
16
:root {
2-
--foreground-rgb: 255, 255, 255;
3-
--background-start-rgb: 0, 0, 0;
4-
--background-end-rgb: 0, 0, 0;
7+
--radius: 0.625rem;
8+
--background: oklch(1 0 0);
9+
--foreground: oklch(0.129 0.042 264.695);
10+
--card: oklch(1 0 0);
11+
--card-foreground: oklch(0.129 0.042 264.695);
12+
--popover: oklch(1 0 0);
13+
--popover-foreground: oklch(0.129 0.042 264.695);
14+
--primary: oklch(0.208 0.042 265.755);
15+
--primary-foreground: oklch(0.984 0.003 247.858);
16+
--secondary: oklch(0.968 0.007 247.896);
17+
--secondary-foreground: oklch(0.208 0.042 265.755);
18+
--muted: oklch(0.968 0.007 247.896);
19+
--muted-foreground: oklch(0.554 0.046 257.417);
20+
--accent: oklch(0.968 0.007 247.896);
21+
--accent-foreground: oklch(0.208 0.042 265.755);
22+
--destructive: oklch(0.577 0.245 27.325);
23+
--destructive-foreground: oklch(1 0 0);
24+
--border: oklch(0.929 0.013 255.508);
25+
--input: oklch(0.929 0.013 255.508);
26+
--ring: oklch(0.704 0.04 256.788);
27+
--chart-1: oklch(0.711 0.1651 242.37);
28+
--chart-2: oklch(0.6 0.118 184.704);
29+
--chart-3: oklch(0.398 0.07 227.392);
30+
--chart-4: oklch(0.828 0.189 84.429);
31+
--chart-5: oklch(0.769 0.188 70.08);
32+
--sidebar: oklch(0.984 0.003 247.858);
33+
--sidebar-foreground: oklch(0.129 0.042 264.695);
34+
--sidebar-primary: oklch(0.208 0.042 265.755);
35+
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
36+
--sidebar-accent: oklch(0.90 0 0);
37+
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
38+
--sidebar-border: oklch(0.929 0.013 255.508);
39+
--sidebar-ring: oklch(0.704 0.04 256.788);
40+
--success: oklch(62.7% 0.194 149.214);
41+
--success-foreground: oklch(1 0 0);
42+
--warning: oklch(0.769 0.188 70.08);
43+
--warning-foreground: oklch(1 0 0);
44+
--info: oklch(62.3% 0.214 259.815);
45+
--info-foreground: oklch(1 0 0);
46+
}
47+
48+
.dark {
49+
--background: oklch(0.129 0.042 264.695);
50+
--foreground: oklch(0.984 0.003 247.858);
51+
--card: oklch(0.208 0.042 265.755);
52+
--card-foreground: oklch(0.984 0.003 247.858);
53+
--popover: oklch(0.208 0.042 265.755);
54+
--popover-foreground: oklch(0.984 0.003 247.858);
55+
--primary: oklch(0.929 0.013 255.508);
56+
--primary-foreground: oklch(0.208 0.042 265.755);
57+
--secondary: oklch(0.279 0.041 260.031);
58+
--secondary-foreground: oklch(0.984 0.003 247.858);
59+
--muted: oklch(0.279 0.041 260.031);
60+
--muted-foreground: oklch(0.704 0.04 256.788);
61+
--accent: oklch(0.279 0.041 260.031);
62+
--accent-foreground: oklch(0.984 0.003 247.858);
63+
--destructive: oklch(0.704 0.191 22.216);
64+
--destructive-foreground: oklch(1 0 0);
65+
--border: oklch(1 0 0 / 10%);
66+
--input: oklch(1 0 0 / 15%);
67+
--ring: oklch(0.551 0.027 264.364);
68+
--chart-1: oklch(0.711 0.1651 242.37);
69+
--chart-2: oklch(0.696 0.17 162.48);
70+
--chart-3: oklch(0.769 0.188 70.08);
71+
--chart-4: oklch(0.627 0.265 303.9);
72+
--chart-5: oklch(0.645 0.246 16.439);
73+
--sidebar: oklch(0.208 0.042 265.755);
74+
--sidebar-foreground: oklch(0.984 0.003 247.858);
75+
--sidebar-primary: oklch(0.488 0.243 264.376);
76+
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
77+
--sidebar-accent: oklch(0.279 0.041 260.031);
78+
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
79+
--sidebar-border: oklch(1 0 0 / 10%);
80+
--sidebar-ring: oklch(0.551 0.027 264.364);
81+
--success: oklch(62.7% 0.194 149.214);
82+
--success-foreground: oklch(1 0 0);
83+
--warning: oklch(0.769 0.188 70.08);
84+
--warning-foreground: oklch(1 0 0);
85+
--info: oklch(0.488 0.243 264.376);
86+
--info-foreground: oklch(1 0 0);
587
}
688

7-
body {
8-
color: rgb(var(--foreground-rgb));
9-
min-height: 100vh;
10-
margin: 0;
11-
background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
89+
@theme inline {
90+
--color-background: var(--background);
91+
--color-foreground: var(--foreground);
92+
--color-card: var(--card);
93+
--color-card-foreground: var(--card-foreground);
94+
--color-popover: var(--popover);
95+
--color-popover-foreground: var(--popover-foreground);
96+
--color-primary: var(--primary);
97+
--color-primary-foreground: var(--primary-foreground);
98+
--color-secondary: var(--secondary);
99+
--color-secondary-foreground: var(--secondary-foreground);
100+
--color-muted: var(--muted);
101+
--color-muted-foreground: var(--muted-foreground);
102+
--color-accent: var(--accent);
103+
--color-accent-foreground: var(--accent-foreground);
104+
--color-destructive: var(--destructive);
105+
--color-destructive-foreground: var(--destructive-foreground);
106+
--color-border: var(--border);
107+
--color-input: var(--input);
108+
--color-ring: var(--ring);
109+
--color-chart-1: var(--chart-1);
110+
--color-chart-2: var(--chart-2);
111+
--color-chart-3: var(--chart-3);
112+
--color-chart-4: var(--chart-4);
113+
--color-chart-5: var(--chart-5);
114+
--color-sidebar: var(--sidebar);
115+
--color-sidebar-foreground: var(--sidebar-foreground);
116+
--color-sidebar-primary: var(--sidebar-primary);
117+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
118+
--color-sidebar-accent: var(--sidebar-accent);
119+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
120+
--color-sidebar-border: var(--sidebar-border);
121+
--color-sidebar-ring: var(--sidebar-ring);
122+
--color-success: var(--success);
123+
--color-success-foreground: var(--success-foreground);
124+
--color-warning: var(--warning);
125+
--color-warning-foreground: var(--warning-foreground);
126+
--color-info: var(--info);
127+
--color-info-foreground: var(--info-foreground);
128+
--radius-sm: calc(var(--radius) - 4px);
129+
--radius-md: calc(var(--radius) - 2px);
130+
--radius-lg: var(--radius);
131+
--radius-xl: calc(var(--radius) + 4px);
132+
}
133+
134+
@layer base {
135+
* {
136+
@apply border-border outline-ring/50;
137+
}
138+
139+
html,
140+
body {
141+
@apply overflow-x-hidden overscroll-none;
142+
}
143+
144+
body {
145+
@apply bg-background text-foreground antialiased;
146+
font-family:
147+
'Inter',
148+
-apple-system,
149+
BlinkMacSystemFont,
150+
'Segoe UI',
151+
Roboto,
152+
'Helvetica Neue',
153+
Arial,
154+
sans-serif;
155+
}
12156
}

‎tools/diagnostics-app/src/app/page.tsx‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
2-
import { CircularProgress, Grid, styled } from '@mui/material';
32
import { useNavigate, useSearchParams } from 'react-router-dom';
43
import { DEFAULT_ENTRY_ROUTE, LOGIN_ROUTE } from './router';
54
import { connector } from '@/library/powersync/ConnectionManager';
65
import { getTokenEndpoint } from '@/library/powersync/TokenConnector';
76
import { SyncClientImplementation } from '@powersync/web';
7+
import { Spinner } from '@/components/ui/spinner';
88

99
export default function EntryPage() {
1010
const navigate = useNavigate();
@@ -35,22 +35,10 @@ export default function EntryPage() {
3535
}, []);
3636

3737
return (
38-
<S.MainGrid container>
39-
<S.CenteredGrid item xs={12} md={6} lg={5}>
40-
<CircularProgress />
41-
</S.CenteredGrid>
42-
</S.MainGrid>
38+
<div className="flex min-h-screen items-center justify-center">
39+
<div className="flex items-center justify-center">
40+
<Spinner size="lg" />
41+
</div>
42+
</div>
4343
);
4444
}
45-
46-
namespace S {
47-
export const CenteredGrid = styled(Grid)`
48-
display: flex;
49-
justify-content: center;
50-
align-items: center;
51-
`;
52-
53-
export const MainGrid = styled(CenteredGrid)`
54-
min-height: 100vh;
55-
`;
56-
}

0 commit comments

Comments
 (0)