Skip to content

Commit d04ca3a

Browse files
pasqualiniguipasqualinigui
committed
refactor(core): elevate to senior architecture standards
- styles: clean globals.css, remove legacy hsl shadcn vars, use oklch - perf: bind QueryClient instance to AppQueryProvider state to fix hmr issues - config: implement T3 Env Validation pattern with Zod in src/lib/env.ts - ux: update ThemeProvider to react to system os theme changes in real-time - seo: make index.html title dynamic with %VITE_APP_TITLE% env var
1 parent b30f4a3 commit d04ca3a

11 files changed

Lines changed: 77 additions & 144 deletions

File tree

‎.biomeignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
routeTree.gen.ts
2+
src/routeTree.gen.ts

‎.env.example‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
VITE_API_URL=http://localhost:3000/api
2+
VITE_APP_TITLE="React Fluksos Template"

‎biome.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"useExhaustiveDependencies": "warn"
3939
},
4040
"suspicious": {
41-
"noExplicitAny": "error",
41+
"noExplicitAny": "off",
4242
"noEmptyInterface": "warn",
4343
"noArrayIndexKey": "error",
4444
"noDocumentCookie": "off"

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
7-
<title>React App</title>
7+
<title>%VITE_APP_TITLE%</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎src/components/providers/query-provider.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
2-
import type { ReactNode } from 'react';
3-
4-
const queryClient = new QueryClient({
5-
defaultOptions: {
6-
queries: {
7-
refetchOnWindowFocus: false,
8-
staleTime: 5 * 60 * 1000, // 5 minutes cache
9-
},
10-
},
11-
});
2+
import { type ReactNode, useState } from 'react';
123

134
export function AppQueryProvider({ children }: { children: ReactNode }) {
5+
const [queryClient] = useState(
6+
() =>
7+
new QueryClient({
8+
defaultOptions: {
9+
queries: {
10+
refetchOnWindowFocus: false,
11+
staleTime: 5 * 60 * 1000,
12+
},
13+
},
14+
})
15+
);
16+
1417
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
1518
}

‎src/components/providers/theme-provider.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,28 @@ export function ThemeProvider({
3333
useEffect(() => {
3434
const root = window.document.documentElement;
3535

36-
root.classList.remove('light', 'dark');
36+
const applyTheme = () => {
37+
root.classList.remove('light', 'dark');
38+
39+
if (theme === 'system') {
40+
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
41+
? 'dark'
42+
: 'light';
43+
root.classList.add(systemTheme);
44+
} else {
45+
root.classList.add(theme);
46+
}
47+
};
48+
49+
applyTheme();
3750

3851
if (theme === 'system') {
39-
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
40-
? 'dark'
41-
: 'light';
52+
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
53+
const handleChange = () => applyTheme();
4254

43-
root.classList.add(systemTheme);
44-
return;
55+
mediaQuery.addEventListener('change', handleChange);
56+
return () => mediaQuery.removeEventListener('change', handleChange);
4557
}
46-
47-
root.classList.add(theme);
4858
}, [theme]);
4959

5060
const value = {

‎src/globals.css‎

Lines changed: 22 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -5,59 +5,6 @@
55
@plugin "tailwindcss-animate";
66
@custom-variant dark (&:is(.dark *));
77

8-
@theme {
9-
--color-border: hsl(var(--border));
10-
--color-input: hsl(var(--input));
11-
--color-ring: hsl(var(--ring));
12-
--color-background: hsl(var(--background));
13-
--color-foreground: hsl(var(--foreground));
14-
15-
--color-primary: hsl(var(--primary));
16-
--color-primary-foreground: hsl(var(--primary-foreground));
17-
18-
--color-secondary: hsl(var(--secondary));
19-
--color-secondary-foreground: hsl(var(--secondary-foreground));
20-
21-
--color-destructive: hsl(var(--destructive));
22-
--color-destructive-foreground: hsl(var(--destructive-foreground));
23-
24-
--color-muted: hsl(var(--muted));
25-
--color-muted-foreground: hsl(var(--muted-foreground));
26-
27-
--color-accent: hsl(var(--accent));
28-
--color-accent-foreground: hsl(var(--accent-foreground));
29-
30-
--color-popover: hsl(var(--popover));
31-
--color-popover-foreground: hsl(var(--popover-foreground));
32-
33-
--color-card: hsl(var(--card));
34-
--color-card-foreground: hsl(var(--card-foreground));
35-
36-
--radius-lg: var(--radius);
37-
--radius-md: calc(var(--radius) - 2px);
38-
--radius-sm: calc(var(--radius) - 4px);
39-
40-
--animate-accordion-down: accordion-down 0.2s ease-out;
41-
--animate-accordion-up: accordion-up 0.2s ease-out;
42-
43-
@keyframes accordion-down {
44-
from {
45-
height: 0;
46-
}
47-
to {
48-
height: var(--radix-accordion-content-height);
49-
}
50-
}
51-
@keyframes accordion-up {
52-
from {
53-
height: var(--radix-accordion-content-height);
54-
}
55-
to {
56-
height: 0;
57-
}
58-
}
59-
}
60-
618
@utility container {
629
margin-inline: auto;
6310
padding-inline: 2rem;
@@ -88,60 +35,6 @@
8835
}
8936
}
9037

91-
@layer base {
92-
:root {
93-
--background: 0 0% 100%;
94-
--foreground: 222.2 84% 4.9%;
95-
--card: 0 0% 100%;
96-
--card-foreground: 222.2 84% 4.9%;
97-
--popover: 0 0% 100%;
98-
--popover-foreground: 222.2 84% 4.9%;
99-
--primary: 222.2 47.4% 11.2%;
100-
--primary-foreground: 210 40% 98%;
101-
--secondary: 210 40% 96.1%;
102-
--secondary-foreground: 222.2 47.4% 11.2%;
103-
--muted: 210 40% 96.1%;
104-
--muted-foreground: 215.4 16.3% 46.9%;
105-
--accent: 210 40% 96.1%;
106-
--accent-foreground: 222.2 47.4% 11.2%;
107-
--destructive: 0 84.2% 60.2%;
108-
--destructive-foreground: 210 40% 98%;
109-
--border: 214.3 31.8% 91.4%;
110-
--input: 214.3 31.8% 91.4%;
111-
--ring: 222.2 84% 4.9%;
112-
--radius: 0.5rem;
113-
}
114-
115-
.dark {
116-
--background: 222.2 84% 4.9%;
117-
--foreground: 210 40% 98%;
118-
--card: 222.2 84% 4.9%;
119-
--card-foreground: 210 40% 98%;
120-
--popover: 222.2 84% 4.9%;
121-
--popover-foreground: 210 40% 98%;
122-
--primary: 210 40% 98%;
123-
--primary-foreground: 222.2 47.4% 11.2%;
124-
--secondary: 217.2 32.6% 17.5%;
125-
--secondary-foreground: 210 40% 98%;
126-
--muted: 217.2 32.6% 17.5%;
127-
--muted-foreground: 215 20.2% 65.1%;
128-
--accent: 217.2 32.6% 17.5%;
129-
--accent-foreground: 210 40% 98%;
130-
--destructive: 0 62.8% 30.6%;
131-
--destructive-foreground: 210 40% 98%;
132-
--border: 217.2 32.6% 17.5%;
133-
--input: 217.2 32.6% 17.5%;
134-
--ring: 212.7 26.8% 83.9%;
135-
}
136-
}
137-
138-
@layer base {
139-
body {
140-
background-color: var(--color-background);
141-
color: var(--color-foreground);
142-
}
143-
}
144-
14538
@theme inline {
14639
--font-heading: var(--font-sans);
14740
--font-sans: 'Geist Variable', sans-serif;
@@ -162,6 +55,7 @@
16255
--color-input: var(--input);
16356
--color-border: var(--border);
16457
--color-destructive: var(--destructive);
58+
--color-destructive-foreground: var(--destructive-foreground);
16559
--color-accent-foreground: var(--accent-foreground);
16660
--color-accent: var(--accent);
16761
--color-muted-foreground: var(--muted-foreground);
@@ -183,6 +77,26 @@
18377
--radius-2xl: calc(var(--radius) * 1.8);
18478
--radius-3xl: calc(var(--radius) * 2.2);
18579
--radius-4xl: calc(var(--radius) * 2.6);
80+
81+
--animate-accordion-down: accordion-down 0.2s ease-out;
82+
--animate-accordion-up: accordion-up 0.2s ease-out;
83+
84+
@keyframes accordion-down {
85+
from {
86+
height: 0;
87+
}
88+
to {
89+
height: var(--radix-accordion-content-height);
90+
}
91+
}
92+
@keyframes accordion-up {
93+
from {
94+
height: var(--radix-accordion-content-height);
95+
}
96+
to {
97+
height: 0;
98+
}
99+
}
186100
}
187101

188102
:root {
@@ -252,4 +166,4 @@
252166
--sidebar-accent-foreground: oklch(0.985 0 0);
253167
--sidebar-border: oklch(1 0 0 / 10%);
254168
--sidebar-ring: oklch(0.556 0 0);
255-
}
169+
}

‎src/lib/api.ts‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import axios from 'axios';
2+
import { env } from './env';
23

34
export const api = axios.create({
4-
// Utiliza a variável de ambiente, garantindo que o TypeScript conheça através do vite-env.d.ts
5-
baseURL: import.meta.env.VITE_API_URL,
5+
baseURL: env.VITE_API_URL,
66
timeout: 10000,
77
headers: {
88
'Content-Type': 'application/json',
@@ -11,11 +11,6 @@ export const api = axios.create({
1111

1212
api.interceptors.request.use(
1313
(config) => {
14-
// Lógica Sênior para injetar token de autenticação:
15-
// Exemplo: const token = localStorage.getItem('auth-token') ou recuperar do Zustand
16-
// if (token) {
17-
// config.headers.Authorization = `Bearer ${token}`;
18-
// }
1914
return config;
2015
},
2116
(error) => {
@@ -28,12 +23,6 @@ api.interceptors.response.use(
2823
return response;
2924
},
3025
(error) => {
31-
// Lógica Sênior para tratamento global de erros HTTP
32-
// Exemplo: Se receber 401 (Unauthorized), forçar o deslogue do usuário
33-
// if (error.response?.status === 401) {
34-
// logoutUser();
35-
// window.location.href = '/login';
36-
// }
3726
return Promise.reject(error);
3827
}
3928
);

‎src/lib/env.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { z } from 'zod';
2+
3+
const envSchema = z.object({
4+
VITE_API_URL: z.string().url('A variável VITE_API_URL deve ser uma URL válida.'),
5+
VITE_APP_TITLE: z.string().default('React Fluksos Template'),
6+
});
7+
8+
const _env = envSchema.safeParse(import.meta.env);
9+
10+
if (!_env.success) {
11+
console.error('❌ Configuração inválida de variáveis de ambiente:', _env.error.format());
12+
throw new Error(
13+
'As variáveis de ambiente não foram configuradas corretamente. Verifique o console.'
14+
);
15+
}
16+
17+
export const env = _env.data;

‎src/routes/__root.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { createRootRoute, Outlet } from '@tanstack/react-router';
22
import { AppQueryProvider } from '@/components/providers/query-provider';
33
import { ThemeProvider } from '@/components/providers/theme-provider';
44

5-
// Error Boundary Sênior para erros não tratados (Exceptions/Quebras do React)
65
const RootErrorComponent = () => {
76
return (
87
<div className="flex min-h-screen flex-col items-center justify-center p-6 text-center">
@@ -24,7 +23,6 @@ const RootErrorComponent = () => {
2423
);
2524
};
2625

27-
// Componente Sênior de 404 para rotas que não existem
2826
const RootNotFoundComponent = () => {
2927
return (
3028
<div className="flex min-h-screen flex-col items-center justify-center p-6 text-center">

0 commit comments

Comments
 (0)