skrazzo-public/bolderjara-serviss
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prettier / main page

Browse Source
This commit is contained in:
Leons Aleksandrovs
2025-07-02 14:51:00 +03:00
parent 20d173b276
commit 9803b5b35d
19 changed files with 341 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/.cta.json
View File

@@ -7,7 +7,5 @@
"git": true, "git": true,
"version": 1, "version": 1,
"framework": "react-cra", "framework": "react-cra",
"chosenAddOns": [ "chosenAddOns": ["tanstack-query"]
"tanstack-query"
]
} }

9
frontend/.prettierrc.mjs Normal file
View File

@@ -0,0 +1,9 @@
const config = {
trailingComma: "es5",
printWidth: 120,
tabWidth: 4,
semi: true,
singleQuote: false,
};
export default config;

19
frontend/README.md
View File

@@ -29,10 +29,8 @@ bunx --bun run test
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling. This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
## Routing ## Routing
This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`. This project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.
### Adding A Route ### Adding A Route
@@ -68,8 +66,8 @@ In the File Based Routing setup the layout is located in `src/routes/__root.tsx`
Here is an example layout that includes a header: Here is an example layout that includes a header:
```tsx ```tsx
import { Outlet, createRootRoute } from '@tanstack/react-router' import { Outlet, createRootRoute } from "@tanstack/react-router";
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools' import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import { Link } from "@tanstack/react-router"; import { Link } from "@tanstack/react-router";
@@ -86,14 +84,13 @@ export const Route = createRootRoute({
<TanStackRouterDevtools /> <TanStackRouterDevtools />
</> </>
), ),
}) });
``` ```
The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout. The `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.
More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts). More information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/react/guide/routing-concepts#layouts).
## Data Fetching ## Data Fetching
There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered. There are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.
@@ -231,9 +228,7 @@ function App() {
const count = useStore(countStore); const count = useStore(countStore);
return ( return (
<div> <div>
<button onClick={() => countStore.setState((n) => n + 1)}> <button onClick={() => countStore.setState((n) => n + 1)}>Increment - {count}</button>
Increment - {count}
</button>
</div> </div>
); );
} }
@@ -264,9 +259,7 @@ function App() {
return ( return (
<div> <div>
<button onClick={() => countStore.setState((n) => n + 1)}> <button onClick={() => countStore.setState((n) => n + 1)}>Increment - {count}</button>
Increment - {count}
</button>
<div>Doubled - {doubledCount}</div> <div>Doubled - {doubledCount}</div>
</div> </div>
); );

1
frontend/bun.lock
View File

@@ -21,6 +21,7 @@
"@types/react-dom": "^19.0.3", "@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.3.4", "@vitejs/plugin-react": "^4.3.4",
"jsdom": "^26.0.0", "jsdom": "^26.0.0",
"prettier": "^3.6.2",
"typescript": "^5.7.2", "typescript": "^5.7.2",
"vite": "^6.1.0", "vite": "^6.1.0",
"vitest": "^3.0.5", "vitest": "^3.0.5",

11
frontend/index.html
View File

@@ -1,19 +1,16 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta name="description" content="Web site created using create-tsrouter-app" />
name="description"
content="Web site created using create-tsrouter-app"
/>
<link rel="apple-touch-icon" href="/logo192.png" /> <link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<title>Create TanStack App - .</title> <title>Bolderjara Serviss</title>
</head> </head>
<body> <body class="bg-gray-900">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>

1
frontend/package.json
View File

@@ -27,6 +27,7 @@
"@types/react-dom": "^19.0.3", "@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.3.4", "@vitejs/plugin-react": "^4.3.4",
"jsdom": "^26.0.0", "jsdom": "^26.0.0",
"prettier": "^3.6.2",
"typescript": "^5.7.2", "typescript": "^5.7.2",
"vite": "^6.1.0", "vite": "^6.1.0",
"vitest": "^3.0.5", "vitest": "^3.0.5",

14
frontend/src/components/Header.tsx
View File

@@ -1,17 +1,11 @@
import { Link } from '@tanstack/react-router' import { Link } from "@tanstack/react-router";
export default function Header() { export default function Header() {
return ( return (
<header className="p-2 flex gap-2 bg-white text-black justify-between"> <header className="flex gap-4 p-4 bg-gray-800 font-bold text-gray-100">
<nav className="flex flex-row"> <nav className="">
<div className="px-2 font-bold">
<Link to="/">Home</Link> <Link to="/">Home</Link>
</div>
<div className="px-2 font-bold">
<Link to="/demo/tanstack-query">TanStack Query</Link>
</div>
</nav> </nav>
</header> </header>
) );
} }

3
frontend/src/components/MainContainer.tsx Normal file
View File

@@ -0,0 +1,3 @@
export default function MainContainer(props: { children: React.ReactNode; className?: string }) {
return <main className={`max-w-4xl mx-auto ${props.className || ""}`}>{props.children}</main>;
}

4
frontend/src/integrations/tanstack-query/layout.tsx
View File

@@ -1,5 +1,5 @@
import { ReactQueryDevtools } from '@tanstack/react-query-devtools' import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
export default function LayoutAddition() { export default function LayoutAddition() {
return <ReactQueryDevtools buttonPosition="bottom-right" /> return <ReactQueryDevtools buttonPosition="bottom-right" />;
} }

10
frontend/src/integrations/tanstack-query/root-provider.tsx
View File

@@ -1,15 +1,13 @@
import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient() const queryClient = new QueryClient();
export function getContext() { export function getContext() {
return { return {
queryClient, queryClient,
} };
} }
export function Provider({ children }: { children: React.ReactNode }) { export function Provider({ children }: { children: React.ReactNode }) {
return ( return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
)
} }

32
frontend/src/main.tsx
View File

@@ -1,14 +1,14 @@
import { StrictMode } from 'react' import { StrictMode } from "react";
import ReactDOM from 'react-dom/client' import ReactDOM from "react-dom/client";
import { RouterProvider, createRouter } from '@tanstack/react-router' import { RouterProvider, createRouter } from "@tanstack/react-router";
import * as TanStackQueryProvider from './integrations/tanstack-query/root-provider.tsx' import * as TanStackQueryProvider from "./integrations/tanstack-query/root-provider.tsx";
// Import the generated route tree // Import the generated route tree
import { routeTree } from './routeTree.gen' import { routeTree } from "./routeTree.gen";
import './styles.css' import "./styles.css";
import reportWebVitals from './reportWebVitals.ts' import reportWebVitals from "./reportWebVitals.ts";
// Create a new router instance // Create a new router instance
const router = createRouter({ const router = createRouter({
@@ -16,33 +16,31 @@ const router = createRouter({
context: { context: {
...TanStackQueryProvider.getContext(), ...TanStackQueryProvider.getContext(),
}, },
defaultPreload: 'intent', defaultPreload: "intent",
scrollRestoration: true, scrollRestoration: true,
defaultStructuralSharing: true, defaultStructuralSharing: true,
defaultPreloadStaleTime: 0, defaultPreloadStaleTime: 0,
}) });
// Register the router instance for type safety // Register the router instance for type safety
declare module '@tanstack/react-router' { declare module "@tanstack/react-router" {
interface Register { interface Register {
router: typeof router router: typeof router;
} }
} }
// Render the app // Render the app
const rootElement = document.getElementById('app') const rootElement = document.getElementById("app");
if (rootElement && !rootElement.innerHTML) { if (rootElement && !rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement) const root = ReactDOM.createRoot(rootElement);
root.render( root.render(
<StrictMode>
<TanStackQueryProvider.Provider> <TanStackQueryProvider.Provider>
<RouterProvider router={router} /> <RouterProvider router={router} />
</TanStackQueryProvider.Provider> </TanStackQueryProvider.Provider>
</StrictMode>, );
)
} }
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log)) // to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals() reportWebVitals();

18
frontend/src/reportWebVitals.ts
View File

@@ -1,13 +1,13 @@
const reportWebVitals = (onPerfEntry?: () => void) => { const reportWebVitals = (onPerfEntry?: () => void) => {
if (onPerfEntry && onPerfEntry instanceof Function) { if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => { import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
onCLS(onPerfEntry) onCLS(onPerfEntry);
onINP(onPerfEntry) onINP(onPerfEntry);
onFCP(onPerfEntry) onFCP(onPerfEntry);
onLCP(onPerfEntry) onLCP(onPerfEntry);
onTTFB(onPerfEntry) onTTFB(onPerfEntry);
}) });
}
} }
};
export default reportWebVitals export default reportWebVitals;

59
frontend/src/routeTree.gen.ts Normal file
View File

@@ -0,0 +1,59 @@
/* eslint-disable */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// This file was automatically generated by TanStack Router.
// You should NOT make any changes in this file as it will be overwritten.
// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
import { Route as rootRouteImport } from './routes/__root'
import { Route as IndexRouteImport } from './routes/index'
const IndexRoute = IndexRouteImport.update({
id: '/',
path: '/',
getParentRoute: () => rootRouteImport,
} as any)
export interface FileRoutesByFullPath {
'/': typeof IndexRoute
}
export interface FileRoutesByTo {
'/': typeof IndexRoute
}
export interface FileRoutesById {
__root__: typeof rootRouteImport
'/': typeof IndexRoute
}
export interface FileRouteTypes {
fileRoutesByFullPath: FileRoutesByFullPath
fullPaths: '/'
fileRoutesByTo: FileRoutesByTo
to: '/'
id: '__root__' | '/'
fileRoutesById: FileRoutesById
}
export interface RootRouteChildren {
IndexRoute: typeof IndexRoute
}
declare module '@tanstack/react-router' {
interface FileRoutesByPath {
'/': {
id: '/'
path: '/'
fullPath: '/'
preLoaderRoute: typeof IndexRouteImport
parentRoute: typeof rootRouteImport
}
}
}
const rootRouteChildren: RootRouteChildren = {
IndexRoute: IndexRoute,
}
export const routeTree = rootRouteImport
._addFileChildren(rootRouteChildren)
._addFileTypes<FileRouteTypes>()

14
frontend/src/routes/__root.tsx
View File

@@ -1,14 +1,14 @@
import { Outlet, createRootRouteWithContext } from '@tanstack/react-router' import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools' import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
import Header from '../components/Header' import Header from "../components/Header";
import TanStackQueryLayout from '../integrations/tanstack-query/layout.tsx' import TanStackQueryLayout from "../integrations/tanstack-query/layout.tsx";
import type { QueryClient } from '@tanstack/react-query' import type { QueryClient } from "@tanstack/react-query";
interface MyRouterContext { interface MyRouterContext {
queryClient: QueryClient queryClient: QueryClient;
} }
export const Route = createRootRouteWithContext<MyRouterContext>()({ export const Route = createRootRouteWithContext<MyRouterContext>()({
@@ -22,4 +22,4 @@ export const Route = createRootRouteWithContext<MyRouterContext>()({
<TanStackQueryLayout /> <TanStackQueryLayout />
</> </>
), ),
}) });

26
frontend/src/routes/demo.tanstack-query.tsx
View File

@@ -1,26 +0,0 @@
import { createFileRoute } from '@tanstack/react-router'
import { useQuery } from '@tanstack/react-query'
export const Route = createFileRoute('/demo/tanstack-query')({
component: TanStackQueryDemo,
})
function TanStackQueryDemo() {
const { data } = useQuery({
queryKey: ['people'],
queryFn: () =>
Promise.resolve([{ name: 'John Doe' }, { name: 'Jane Doe' }]),
initialData: [],
})
return (
<div className="p-4">
<h1 className="text-2xl mb-4">People list</h1>
<ul>
{data.map((person) => (
<li key={person.name}>{person.name}</li>
))}
</ul>
</div>
)
}

41
frontend/src/routes/index.tsx
View File

@@ -1,39 +1,14 @@
import { createFileRoute } from '@tanstack/react-router' import MainContainer from "@/components/MainContainer";
import logo from '../logo.svg' import { createFileRoute } from "@tanstack/react-router";
export const Route = createFileRoute('/')({ export const Route = createFileRoute("/")({
component: App, component: App,
}) });
function App() { function App() {
return ( return (
<div className="text-center"> <MainContainer className="pt-8">
<header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]"> <h1 className="text-4xl font-bold text-center text-gray-100">Darbinieki</h1>
<img </MainContainer>
src={logo} );
className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
alt="logo"
/>
<p>
Edit <code>src/routes/index.tsx</code> and save to reload.
</p>
<a
className="text-[#61dafb] hover:underline"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<a
className="text-[#61dafb] hover:underline"
href="https://tanstack.com"
target="_blank"
rel="noopener noreferrer"
>
Learn TanStack
</a>
</header>
</div>
)
} }

9
frontend/src/styles.css
View File

@@ -2,14 +2,13 @@
body { body {
@apply m-0; @apply m-0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", font-family:
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
sans-serif; "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
code { code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
monospace;
} }

2
frontend/tsconfig.json
View File

@@ -22,7 +22,7 @@
"noUncheckedSideEffectImports": true, "noUncheckedSideEffectImports": true,
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["./src/*"], "@/*": ["./src/*"]
} }
} }
} }

22
frontend/vite.config.ts
View File

@@ -1,24 +1,20 @@
import { defineConfig } from 'vite' import { defineConfig } from "vite";
import viteReact from '@vitejs/plugin-react' import viteReact from "@vitejs/plugin-react";
import tailwindcss from '@tailwindcss/vite' import tailwindcss from "@tailwindcss/vite";
import { TanStackRouterVite } from '@tanstack/router-plugin/vite' import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
import { resolve } from 'node:path' import { resolve } from "node:path";
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [TanStackRouterVite({ autoCodeSplitting: true }), viteReact(), tailwindcss()],
TanStackRouterVite({ autoCodeSplitting: true }),
viteReact(),
tailwindcss(),
],
test: { test: {
globals: true, globals: true,
environment: 'jsdom', environment: "jsdom",
}, },
resolve: { resolve: {
alias: { alias: {
'@': resolve(__dirname, './src'), "@": resolve(__dirname, "./src"),
}, },
}, },
}) });