Prettier prettied
This commit is contained in:
Leons Aleksandrovs
@@ -1,14 +1,11 @@
|
||||
{
|
||||
"projectName": ".",
|
||||
"mode": "file-router",
|
||||
"typescript": true,
|
||||
"tailwind": true,
|
||||
"packageManager": "bun",
|
||||
"git": true,
|
||||
"version": 1,
|
||||
"framework": "react-cra",
|
||||
"chosenAddOns": [
|
||||
"form",
|
||||
"tanstack-query"
|
||||
]
|
||||
}
|
||||
"projectName": ".",
|
||||
"mode": "file-router",
|
||||
"typescript": true,
|
||||
"tailwind": true,
|
||||
"packageManager": "bun",
|
||||
"git": true,
|
||||
"version": 1,
|
||||
"framework": "react-cra",
|
||||
"chosenAddOns": ["form", "tanstack-query"]
|
||||
}
|
||||
|
||||
9
frontend/.prettierrc.mjs
Normal file
9
frontend/.prettierrc.mjs
Normal file
@@ -0,0 +1,9 @@
|
||||
const config = {
|
||||
trailingComma: "es5",
|
||||
printWidth: 120,
|
||||
tabWidth: 4,
|
||||
semi: true,
|
||||
singleQuote: false,
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -1,4 +1,4 @@
|
||||
Welcome to your new TanStack app!
|
||||
Welcome to your new TanStack app!
|
||||
|
||||
# Getting Started
|
||||
|
||||
@@ -6,7 +6,7 @@ To run this application:
|
||||
|
||||
```bash
|
||||
bun install
|
||||
bunx --bun run start
|
||||
bunx --bun run start
|
||||
```
|
||||
|
||||
# Building For Production
|
||||
@@ -29,10 +29,8 @@ bunx --bun run test
|
||||
|
||||
This project uses [Tailwind CSS](https://tailwindcss.com/) for styling.
|
||||
|
||||
|
||||
|
||||
|
||||
## 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`.
|
||||
|
||||
### Adding A Route
|
||||
@@ -68,32 +66,31 @@ In the File Based Routing setup the layout is located in `src/routes/__root.tsx`
|
||||
Here is an example layout that includes a header:
|
||||
|
||||
```tsx
|
||||
import { Outlet, createRootRoute } from '@tanstack/react-router'
|
||||
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
|
||||
import { Outlet, createRootRoute } from "@tanstack/react-router";
|
||||
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools";
|
||||
|
||||
import { Link } from "@tanstack/react-router";
|
||||
|
||||
export const Route = createRootRoute({
|
||||
component: () => (
|
||||
<>
|
||||
<header>
|
||||
<nav>
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="/about">About</Link>
|
||||
</nav>
|
||||
</header>
|
||||
<Outlet />
|
||||
<TanStackRouterDevtools />
|
||||
</>
|
||||
),
|
||||
})
|
||||
component: () => (
|
||||
<>
|
||||
<header>
|
||||
<nav>
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="/about">About</Link>
|
||||
</nav>
|
||||
</header>
|
||||
<Outlet />
|
||||
<TanStackRouterDevtools />
|
||||
</>
|
||||
),
|
||||
});
|
||||
```
|
||||
|
||||
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).
|
||||
|
||||
|
||||
## 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.
|
||||
@@ -102,26 +99,26 @@ For example:
|
||||
|
||||
```tsx
|
||||
const peopleRoute = createRoute({
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/people",
|
||||
loader: async () => {
|
||||
const response = await fetch("https://swapi.dev/api/people");
|
||||
return response.json() as Promise<{
|
||||
results: {
|
||||
name: string;
|
||||
}[];
|
||||
}>;
|
||||
},
|
||||
component: () => {
|
||||
const data = peopleRoute.useLoaderData();
|
||||
return (
|
||||
<ul>
|
||||
{data.results.map((person) => (
|
||||
<li key={person.name}>{person.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
},
|
||||
getParentRoute: () => rootRoute,
|
||||
path: "/people",
|
||||
loader: async () => {
|
||||
const response = await fetch("https://swapi.dev/api/people");
|
||||
return response.json() as Promise<{
|
||||
results: {
|
||||
name: string;
|
||||
}[];
|
||||
}>;
|
||||
},
|
||||
component: () => {
|
||||
const data = peopleRoute.useLoaderData();
|
||||
return (
|
||||
<ul>
|
||||
{data.results.map((person) => (
|
||||
<li key={person.name}>{person.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@@ -149,13 +146,13 @@ const queryClient = new QueryClient();
|
||||
// ...
|
||||
|
||||
if (!rootElement.innerHTML) {
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<RouterProvider router={router} />
|
||||
</QueryClientProvider>
|
||||
);
|
||||
root.render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<RouterProvider router={router} />
|
||||
</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@@ -165,13 +162,13 @@ You can also add TanStack Query Devtools to the root route (optional).
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
|
||||
const rootRoute = createRootRoute({
|
||||
component: () => (
|
||||
<>
|
||||
<Outlet />
|
||||
<ReactQueryDevtools buttonPosition="top-right" />
|
||||
<TanStackRouterDevtools />
|
||||
</>
|
||||
),
|
||||
component: () => (
|
||||
<>
|
||||
<Outlet />
|
||||
<ReactQueryDevtools buttonPosition="top-right" />
|
||||
<TanStackRouterDevtools />
|
||||
</>
|
||||
),
|
||||
});
|
||||
```
|
||||
|
||||
@@ -183,24 +180,24 @@ import { useQuery } from "@tanstack/react-query";
|
||||
import "./App.css";
|
||||
|
||||
function App() {
|
||||
const { data } = useQuery({
|
||||
queryKey: ["people"],
|
||||
queryFn: () =>
|
||||
fetch("https://swapi.dev/api/people")
|
||||
.then((res) => res.json())
|
||||
.then((data) => data.results as { name: string }[]),
|
||||
initialData: [],
|
||||
});
|
||||
const { data } = useQuery({
|
||||
queryKey: ["people"],
|
||||
queryFn: () =>
|
||||
fetch("https://swapi.dev/api/people")
|
||||
.then((res) => res.json())
|
||||
.then((data) => data.results as { name: string }[]),
|
||||
initialData: [],
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
{data.map((person) => (
|
||||
<li key={person.name}>{person.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<ul>
|
||||
{data.map((person) => (
|
||||
<li key={person.name}>{person.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -228,14 +225,12 @@ import "./App.css";
|
||||
const countStore = new Store(0);
|
||||
|
||||
function App() {
|
||||
const count = useStore(countStore);
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => countStore.setState((n) => n + 1)}>
|
||||
Increment - {count}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
const count = useStore(countStore);
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => countStore.setState((n) => n + 1)}>Increment - {count}</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -253,23 +248,21 @@ import "./App.css";
|
||||
const countStore = new Store(0);
|
||||
|
||||
const doubledStore = new Derived({
|
||||
fn: () => countStore.state * 2,
|
||||
deps: [countStore],
|
||||
fn: () => countStore.state * 2,
|
||||
deps: [countStore],
|
||||
});
|
||||
doubledStore.mount();
|
||||
|
||||
function App() {
|
||||
const count = useStore(countStore);
|
||||
const doubledCount = useStore(doubledStore);
|
||||
const count = useStore(countStore);
|
||||
const doubledCount = useStore(doubledStore);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => countStore.setState((n) => n + 1)}>
|
||||
Increment - {count}
|
||||
</button>
|
||||
<div>Doubled - {doubledCount}</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => countStore.setState((n) => n + 1)}>Increment - {count}</button>
|
||||
<div>Doubled - {doubledCount}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@@ -23,6 +23,7 @@
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"jsdom": "^26.0.0",
|
||||
"prettier": "^3.6.2",
|
||||
"typescript": "^5.7.2",
|
||||
"vite": "^6.1.0",
|
||||
"vitest": "^3.0.5",
|
||||
|
||||
@@ -1,20 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-tsrouter-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="/logo192.png" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<title>Create TanStack App - .</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Web site created using create-tsrouter-app" />
|
||||
<link rel="apple-touch-icon" href="/logo192.png" />
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<title>Create TanStack App - .</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
{
|
||||
"name": "Cover letter frontend",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --port 3000 --host",
|
||||
"build": "vite build && tsc",
|
||||
"serve": "vite preview",
|
||||
"test": "vitest run"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.0.6",
|
||||
"@tanstack/react-form": "^1.0.0",
|
||||
"@tanstack/react-query": "^5.66.5",
|
||||
"@tanstack/react-query-devtools": "^5.66.5",
|
||||
"@tanstack/react-router": "^1.121.2",
|
||||
"@tanstack/react-router-devtools": "^1.121.2",
|
||||
"@tanstack/router-plugin": "^1.121.2",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwindcss": "^4.0.6",
|
||||
"zod": "^3.24.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/dom": "^10.4.0",
|
||||
"@testing-library/react": "^16.2.0",
|
||||
"@types/react": "^19.0.8",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"jsdom": "^26.0.0",
|
||||
"typescript": "^5.7.2",
|
||||
"vite": "^6.1.0",
|
||||
"vitest": "^3.0.5",
|
||||
"web-vitals": "^4.2.4"
|
||||
}
|
||||
"name": "Cover letter frontend",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --port 3000 --host",
|
||||
"build": "vite build && tsc",
|
||||
"serve": "vite preview",
|
||||
"test": "vitest run"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.0.6",
|
||||
"@tanstack/react-form": "^1.0.0",
|
||||
"@tanstack/react-query": "^5.66.5",
|
||||
"@tanstack/react-query-devtools": "^5.66.5",
|
||||
"@tanstack/react-router": "^1.121.2",
|
||||
"@tanstack/react-router-devtools": "^1.121.2",
|
||||
"@tanstack/router-plugin": "^1.121.2",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwindcss": "^4.0.6",
|
||||
"zod": "^3.24.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/dom": "^10.4.0",
|
||||
"@testing-library/react": "^16.2.0",
|
||||
"@types/react": "^19.0.8",
|
||||
"@types/react-dom": "^19.0.3",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"jsdom": "^26.0.0",
|
||||
"prettier": "^3.6.2",
|
||||
"typescript": "^5.7.2",
|
||||
"vite": "^6.1.0",
|
||||
"vitest": "^3.0.5",
|
||||
"web-vitals": "^4.2.4"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
{
|
||||
"short_name": "TanStack App",
|
||||
"name": "Create TanStack App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
"short_name": "TanStack App",
|
||||
"name": "Create TanStack App Sample",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import { Link } from '@tanstack/react-router'
|
||||
import { Link } from "@tanstack/react-router";
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<header className="p-2 flex gap-2 bg-white text-black justify-between">
|
||||
<nav className="flex flex-row">
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/">Home</Link>
|
||||
</div>
|
||||
return (
|
||||
<header className="p-2 flex gap-2 bg-white text-black justify-between">
|
||||
<nav className="flex flex-row">
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/">Home</Link>
|
||||
</div>
|
||||
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/demo/form/simple">Simple Form</Link>
|
||||
</div>
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/demo/form/simple">Simple Form</Link>
|
||||
</div>
|
||||
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/demo/form/address">Address Form</Link>
|
||||
</div>
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/demo/form/address">Address Form</Link>
|
||||
</div>
|
||||
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/demo/tanstack-query">TanStack Query</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
)
|
||||
<div className="px-2 font-bold">
|
||||
<Link to="/demo/tanstack-query">TanStack Query</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,127 +1,108 @@
|
||||
import { useStore } from '@tanstack/react-form'
|
||||
import { useStore } from "@tanstack/react-form";
|
||||
|
||||
import { useFieldContext, useFormContext } from '../hooks/demo.form-context'
|
||||
import { useFieldContext, useFormContext } from "../hooks/demo.form-context";
|
||||
|
||||
export function SubscribeButton({ label }: { label: string }) {
|
||||
const form = useFormContext()
|
||||
return (
|
||||
<form.Subscribe selector={(state) => state.isSubmitting}>
|
||||
{(isSubmitting) => (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
)}
|
||||
</form.Subscribe>
|
||||
)
|
||||
const form = useFormContext();
|
||||
return (
|
||||
<form.Subscribe selector={(state) => state.isSubmitting}>
|
||||
{(isSubmitting) => (
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
)}
|
||||
</form.Subscribe>
|
||||
);
|
||||
}
|
||||
|
||||
function ErrorMessages({
|
||||
errors,
|
||||
}: {
|
||||
errors: Array<string | { message: string }>
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
{errors.map((error) => (
|
||||
<div
|
||||
key={typeof error === 'string' ? error : error.message}
|
||||
className="text-red-500 mt-1 font-bold"
|
||||
>
|
||||
{typeof error === 'string' ? error : error.message}
|
||||
function ErrorMessages({ errors }: { errors: Array<string | { message: string }> }) {
|
||||
return (
|
||||
<>
|
||||
{errors.map((error) => (
|
||||
<div key={typeof error === "string" ? error : error.message} className="text-red-500 mt-1 font-bold">
|
||||
{typeof error === "string" ? error : error.message}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function TextField({ label, placeholder }: { label: string; placeholder?: string }) {
|
||||
const field = useFieldContext<string>();
|
||||
const errors = useStore(field.store, (state) => state.meta.errors);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label htmlFor={label} className="block font-bold mb-1 text-xl">
|
||||
{label}
|
||||
<input
|
||||
value={field.state.value}
|
||||
placeholder={placeholder}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</label>
|
||||
{field.state.meta.isTouched && <ErrorMessages errors={errors} />}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export function TextField({
|
||||
label,
|
||||
placeholder,
|
||||
}: {
|
||||
label: string
|
||||
placeholder?: string
|
||||
}) {
|
||||
const field = useFieldContext<string>()
|
||||
const errors = useStore(field.store, (state) => state.meta.errors)
|
||||
export function TextArea({ label, rows = 3 }: { label: string; rows?: number }) {
|
||||
const field = useFieldContext<string>();
|
||||
const errors = useStore(field.store, (state) => state.meta.errors);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label htmlFor={label} className="block font-bold mb-1 text-xl">
|
||||
{label}
|
||||
<input
|
||||
value={field.state.value}
|
||||
placeholder={placeholder}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</label>
|
||||
{field.state.meta.isTouched && <ErrorMessages errors={errors} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function TextArea({
|
||||
label,
|
||||
rows = 3,
|
||||
}: {
|
||||
label: string
|
||||
rows?: number
|
||||
}) {
|
||||
const field = useFieldContext<string>()
|
||||
const errors = useStore(field.store, (state) => state.meta.errors)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label htmlFor={label} className="block font-bold mb-1 text-xl">
|
||||
{label}
|
||||
<textarea
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
rows={rows}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</label>
|
||||
{field.state.meta.isTouched && <ErrorMessages errors={errors} />}
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<label htmlFor={label} className="block font-bold mb-1 text-xl">
|
||||
{label}
|
||||
<textarea
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
rows={rows}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</label>
|
||||
{field.state.meta.isTouched && <ErrorMessages errors={errors} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Select({
|
||||
label,
|
||||
values,
|
||||
label,
|
||||
values,
|
||||
}: {
|
||||
label: string
|
||||
values: Array<{ label: string; value: string }>
|
||||
placeholder?: string
|
||||
label: string;
|
||||
values: Array<{ label: string; value: string }>;
|
||||
placeholder?: string;
|
||||
}) {
|
||||
const field = useFieldContext<string>()
|
||||
const errors = useStore(field.store, (state) => state.meta.errors)
|
||||
const field = useFieldContext<string>();
|
||||
const errors = useStore(field.store, (state) => state.meta.errors);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<label htmlFor={label} className="block font-bold mb-1 text-xl">
|
||||
{label}
|
||||
</label>
|
||||
<select
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
>
|
||||
{values.map((value) => (
|
||||
<option key={value.value} value={value.value}>
|
||||
{value.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{field.state.meta.isTouched && <ErrorMessages errors={errors} />}
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<label htmlFor={label} className="block font-bold mb-1 text-xl">
|
||||
{label}
|
||||
</label>
|
||||
<select
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
>
|
||||
{values.map((value) => (
|
||||
<option key={value.value} value={value.value}>
|
||||
{value.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{field.state.meta.isTouched && <ErrorMessages errors={errors} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { createFormHookContexts } from '@tanstack/react-form'
|
||||
import { createFormHookContexts } from "@tanstack/react-form";
|
||||
|
||||
export const { fieldContext, useFieldContext, formContext, useFormContext } =
|
||||
createFormHookContexts()
|
||||
export const { fieldContext, useFieldContext, formContext, useFormContext } = createFormHookContexts();
|
||||
|
||||
@@ -1,22 +1,17 @@
|
||||
import { createFormHook } from '@tanstack/react-form'
|
||||
import { createFormHook } from "@tanstack/react-form";
|
||||
|
||||
import {
|
||||
Select,
|
||||
SubscribeButton,
|
||||
TextArea,
|
||||
TextField,
|
||||
} from '../components/demo.FormComponents'
|
||||
import { fieldContext, formContext } from './demo.form-context'
|
||||
import { Select, SubscribeButton, TextArea, TextField } from "../components/demo.FormComponents";
|
||||
import { fieldContext, formContext } from "./demo.form-context";
|
||||
|
||||
export const { useAppForm } = createFormHook({
|
||||
fieldComponents: {
|
||||
TextField,
|
||||
Select,
|
||||
TextArea,
|
||||
},
|
||||
formComponents: {
|
||||
SubscribeButton,
|
||||
},
|
||||
fieldContext,
|
||||
formContext,
|
||||
})
|
||||
fieldComponents: {
|
||||
TextField,
|
||||
Select,
|
||||
TextArea,
|
||||
},
|
||||
formComponents: {
|
||||
SubscribeButton,
|
||||
},
|
||||
fieldContext,
|
||||
formContext,
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
|
||||
export default function LayoutAddition() {
|
||||
return <ReactQueryDevtools buttonPosition="bottom-right" />
|
||||
return <ReactQueryDevtools buttonPosition="bottom-right" />;
|
||||
}
|
||||
|
||||
@@ -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() {
|
||||
return {
|
||||
queryClient,
|
||||
}
|
||||
return {
|
||||
queryClient,
|
||||
};
|
||||
}
|
||||
|
||||
export function Provider({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
)
|
||||
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
|
||||
}
|
||||
|
||||
@@ -1,48 +1,48 @@
|
||||
import { StrictMode } from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { RouterProvider, createRouter } from '@tanstack/react-router'
|
||||
import { StrictMode } from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
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 { routeTree } from './routeTree.gen'
|
||||
import { routeTree } from "./routeTree.gen";
|
||||
|
||||
import './styles.css'
|
||||
import reportWebVitals from './reportWebVitals.ts'
|
||||
import "./styles.css";
|
||||
import reportWebVitals from "./reportWebVitals.ts";
|
||||
|
||||
// Create a new router instance
|
||||
const router = createRouter({
|
||||
routeTree,
|
||||
context: {
|
||||
...TanStackQueryProvider.getContext(),
|
||||
},
|
||||
defaultPreload: 'intent',
|
||||
scrollRestoration: true,
|
||||
defaultStructuralSharing: true,
|
||||
defaultPreloadStaleTime: 0,
|
||||
})
|
||||
routeTree,
|
||||
context: {
|
||||
...TanStackQueryProvider.getContext(),
|
||||
},
|
||||
defaultPreload: "intent",
|
||||
scrollRestoration: true,
|
||||
defaultStructuralSharing: true,
|
||||
defaultPreloadStaleTime: 0,
|
||||
});
|
||||
|
||||
// Register the router instance for type safety
|
||||
declare module '@tanstack/react-router' {
|
||||
interface Register {
|
||||
router: typeof router
|
||||
}
|
||||
declare module "@tanstack/react-router" {
|
||||
interface Register {
|
||||
router: typeof router;
|
||||
}
|
||||
}
|
||||
|
||||
// Render the app
|
||||
const rootElement = document.getElementById('app')
|
||||
const rootElement = document.getElementById("app");
|
||||
if (rootElement && !rootElement.innerHTML) {
|
||||
const root = ReactDOM.createRoot(rootElement)
|
||||
root.render(
|
||||
<StrictMode>
|
||||
<TanStackQueryProvider.Provider>
|
||||
<RouterProvider router={router} />
|
||||
</TanStackQueryProvider.Provider>
|
||||
</StrictMode>,
|
||||
)
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<StrictMode>
|
||||
<TanStackQueryProvider.Provider>
|
||||
<RouterProvider router={router} />
|
||||
</TanStackQueryProvider.Provider>
|
||||
</StrictMode>
|
||||
);
|
||||
}
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals()
|
||||
reportWebVitals();
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
const reportWebVitals = (onPerfEntry?: () => void) => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
|
||||
onCLS(onPerfEntry)
|
||||
onINP(onPerfEntry)
|
||||
onFCP(onPerfEntry)
|
||||
onLCP(onPerfEntry)
|
||||
onTTFB(onPerfEntry)
|
||||
})
|
||||
}
|
||||
}
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
|
||||
onCLS(onPerfEntry);
|
||||
onINP(onPerfEntry);
|
||||
onFCP(onPerfEntry);
|
||||
onLCP(onPerfEntry);
|
||||
onTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals
|
||||
export default reportWebVitals;
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
|
||||
import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
|
||||
import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
|
||||
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 {
|
||||
queryClient: QueryClient
|
||||
queryClient: QueryClient;
|
||||
}
|
||||
|
||||
export const Route = createRootRouteWithContext<MyRouterContext>()({
|
||||
component: () => (
|
||||
<>
|
||||
<Header />
|
||||
component: () => (
|
||||
<>
|
||||
<Header />
|
||||
|
||||
<Outlet />
|
||||
<TanStackRouterDevtools />
|
||||
<Outlet />
|
||||
<TanStackRouterDevtools />
|
||||
|
||||
<TanStackQueryLayout />
|
||||
</>
|
||||
),
|
||||
})
|
||||
<TanStackQueryLayout />
|
||||
</>
|
||||
),
|
||||
});
|
||||
|
||||
@@ -1,200 +1,191 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
|
||||
import { useAppForm } from '../hooks/demo.form'
|
||||
import { useAppForm } from "../hooks/demo.form";
|
||||
|
||||
export const Route = createFileRoute('/demo/form/address')({
|
||||
component: AddressForm,
|
||||
})
|
||||
export const Route = createFileRoute("/demo/form/address")({
|
||||
component: AddressForm,
|
||||
});
|
||||
|
||||
function AddressForm() {
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
fullName: '',
|
||||
email: '',
|
||||
address: {
|
||||
street: '',
|
||||
city: '',
|
||||
state: '',
|
||||
zipCode: '',
|
||||
country: '',
|
||||
},
|
||||
phone: '',
|
||||
},
|
||||
validators: {
|
||||
onBlur: ({ value }) => {
|
||||
const errors = {
|
||||
fields: {},
|
||||
} as {
|
||||
fields: Record<string, string>
|
||||
}
|
||||
if (value.fullName.trim().length === 0) {
|
||||
errors.fields.fullName = 'Full name is required'
|
||||
}
|
||||
return errors
|
||||
},
|
||||
},
|
||||
onSubmit: ({ value }) => {
|
||||
console.log(value)
|
||||
// Show success message
|
||||
alert('Form submitted successfully!')
|
||||
},
|
||||
})
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
fullName: "",
|
||||
email: "",
|
||||
address: {
|
||||
street: "",
|
||||
city: "",
|
||||
state: "",
|
||||
zipCode: "",
|
||||
country: "",
|
||||
},
|
||||
phone: "",
|
||||
},
|
||||
validators: {
|
||||
onBlur: ({ value }) => {
|
||||
const errors = {
|
||||
fields: {},
|
||||
} as {
|
||||
fields: Record<string, string>;
|
||||
};
|
||||
if (value.fullName.trim().length === 0) {
|
||||
errors.fields.fullName = "Full name is required";
|
||||
}
|
||||
return errors;
|
||||
},
|
||||
},
|
||||
onSubmit: ({ value }) => {
|
||||
console.log(value);
|
||||
// Show success message
|
||||
alert("Form submitted successfully!");
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
|
||||
}}
|
||||
>
|
||||
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
form.handleSubmit()
|
||||
}}
|
||||
className="space-y-6"
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
|
||||
style={{
|
||||
backgroundImage: "radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)",
|
||||
}}
|
||||
>
|
||||
<form.AppField name="fullName">
|
||||
{(field) => <field.TextField label="Full Name" />}
|
||||
</form.AppField>
|
||||
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
className="space-y-6"
|
||||
>
|
||||
<form.AppField name="fullName">{(field) => <field.TextField label="Full Name" />}</form.AppField>
|
||||
|
||||
<form.AppField
|
||||
name="email"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return 'Email is required'
|
||||
}
|
||||
if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value)) {
|
||||
return 'Invalid email address'
|
||||
}
|
||||
return undefined
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => <field.TextField label="Email" />}
|
||||
</form.AppField>
|
||||
<form.AppField
|
||||
name="email"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return "Email is required";
|
||||
}
|
||||
if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value)) {
|
||||
return "Invalid email address";
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => <field.TextField label="Email" />}
|
||||
</form.AppField>
|
||||
|
||||
<form.AppField
|
||||
name="address.street"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return 'Street address is required'
|
||||
}
|
||||
return undefined
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => <field.TextField label="Street Address" />}
|
||||
</form.AppField>
|
||||
<form.AppField
|
||||
name="address.street"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return "Street address is required";
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => <field.TextField label="Street Address" />}
|
||||
</form.AppField>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<form.AppField
|
||||
name="address.city"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return 'City is required'
|
||||
}
|
||||
return undefined
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => <field.TextField label="City" />}
|
||||
</form.AppField>
|
||||
<form.AppField
|
||||
name="address.state"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return 'State is required'
|
||||
}
|
||||
return undefined
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => <field.TextField label="State" />}
|
||||
</form.AppField>
|
||||
<form.AppField
|
||||
name="address.zipCode"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return 'Zip code is required'
|
||||
}
|
||||
if (!/^\d{5}(-\d{4})?$/.test(value)) {
|
||||
return 'Invalid zip code format'
|
||||
}
|
||||
return undefined
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => <field.TextField label="Zip Code" />}
|
||||
</form.AppField>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<form.AppField
|
||||
name="address.city"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return "City is required";
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => <field.TextField label="City" />}
|
||||
</form.AppField>
|
||||
<form.AppField
|
||||
name="address.state"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return "State is required";
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => <field.TextField label="State" />}
|
||||
</form.AppField>
|
||||
<form.AppField
|
||||
name="address.zipCode"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return "Zip code is required";
|
||||
}
|
||||
if (!/^\d{5}(-\d{4})?$/.test(value)) {
|
||||
return "Invalid zip code format";
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => <field.TextField label="Zip Code" />}
|
||||
</form.AppField>
|
||||
</div>
|
||||
|
||||
<form.AppField
|
||||
name="address.country"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return 'Country is required'
|
||||
}
|
||||
return undefined
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => (
|
||||
<field.Select
|
||||
label="Country"
|
||||
values={[
|
||||
{ label: 'United States', value: 'US' },
|
||||
{ label: 'Canada', value: 'CA' },
|
||||
{ label: 'United Kingdom', value: 'UK' },
|
||||
{ label: 'Australia', value: 'AU' },
|
||||
{ label: 'Germany', value: 'DE' },
|
||||
{ label: 'France', value: 'FR' },
|
||||
{ label: 'Japan', value: 'JP' },
|
||||
]}
|
||||
placeholder="Select a country"
|
||||
/>
|
||||
)}
|
||||
</form.AppField>
|
||||
<form.AppField
|
||||
name="address.country"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return "Country is required";
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => (
|
||||
<field.Select
|
||||
label="Country"
|
||||
values={[
|
||||
{ label: "United States", value: "US" },
|
||||
{ label: "Canada", value: "CA" },
|
||||
{ label: "United Kingdom", value: "UK" },
|
||||
{ label: "Australia", value: "AU" },
|
||||
{ label: "Germany", value: "DE" },
|
||||
{ label: "France", value: "FR" },
|
||||
{ label: "Japan", value: "JP" },
|
||||
]}
|
||||
placeholder="Select a country"
|
||||
/>
|
||||
)}
|
||||
</form.AppField>
|
||||
|
||||
<form.AppField
|
||||
name="phone"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return 'Phone number is required'
|
||||
}
|
||||
if (
|
||||
!/^(\+\d{1,3})?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/.test(
|
||||
value,
|
||||
)
|
||||
) {
|
||||
return 'Invalid phone number format'
|
||||
}
|
||||
return undefined
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => (
|
||||
<field.TextField label="Phone" placeholder="123-456-7890" />
|
||||
)}
|
||||
</form.AppField>
|
||||
<form.AppField
|
||||
name="phone"
|
||||
validators={{
|
||||
onBlur: ({ value }) => {
|
||||
if (!value || value.trim().length === 0) {
|
||||
return "Phone number is required";
|
||||
}
|
||||
if (!/^(\+\d{1,3})?\s?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$/.test(value)) {
|
||||
return "Invalid phone number format";
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
}}
|
||||
>
|
||||
{(field) => <field.TextField label="Phone" placeholder="123-456-7890" />}
|
||||
</form.AppField>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<form.AppForm>
|
||||
<form.SubscribeButton label="Submit" />
|
||||
</form.AppForm>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<div className="flex justify-end">
|
||||
<form.AppForm>
|
||||
<form.SubscribeButton label="Submit" />
|
||||
</form.AppForm>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,65 +1,63 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { z } from 'zod'
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { z } from "zod";
|
||||
|
||||
import { useAppForm } from '../hooks/demo.form'
|
||||
import { useAppForm } from "../hooks/demo.form";
|
||||
|
||||
export const Route = createFileRoute('/demo/form/simple')({
|
||||
component: SimpleForm,
|
||||
})
|
||||
// Routing
|
||||
export const Route = createFileRoute("/demo/form/simple")({
|
||||
component: SimpleForm,
|
||||
});
|
||||
|
||||
const schema = z.object({
|
||||
title: z.string().min(1, 'Title is required'),
|
||||
description: z.string().min(1, 'Description is required'),
|
||||
})
|
||||
title: z.string().min(1, "Title is required"),
|
||||
description: z.string().min(1, "Description is required"),
|
||||
});
|
||||
|
||||
function SimpleForm() {
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
title: '',
|
||||
description: '',
|
||||
},
|
||||
validators: {
|
||||
onBlur: schema,
|
||||
},
|
||||
onSubmit: ({ value }) => {
|
||||
console.log(value)
|
||||
// Show success message
|
||||
alert('Form submitted successfully!')
|
||||
},
|
||||
})
|
||||
const form = useAppForm({
|
||||
defaultValues: {
|
||||
title: "",
|
||||
description: "",
|
||||
},
|
||||
validators: {
|
||||
onBlur: schema,
|
||||
},
|
||||
onSubmit: ({ value }) => {
|
||||
console.log(value);
|
||||
// Show success message
|
||||
alert("Form submitted successfully!");
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'radial-gradient(50% 50% at 5% 40%, #add8e6 0%, #0000ff 70%, #00008b 100%)',
|
||||
}}
|
||||
>
|
||||
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
form.handleSubmit()
|
||||
}}
|
||||
className="space-y-6"
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
|
||||
style={{
|
||||
backgroundImage: "radial-gradient(50% 50% at 5% 40%, #add8e6 0%, #0000ff 70%, #00008b 100%)",
|
||||
}}
|
||||
>
|
||||
<form.AppField name="title">
|
||||
{(field) => <field.TextField label="Title" />}
|
||||
</form.AppField>
|
||||
<div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
className="space-y-6"
|
||||
>
|
||||
<form.AppField name="title">{(field) => <field.TextField label="Title" />}</form.AppField>
|
||||
|
||||
<form.AppField name="description">
|
||||
{(field) => <field.TextArea label="Description" />}
|
||||
</form.AppField>
|
||||
<form.AppField name="description">
|
||||
{(field) => <field.TextArea label="Description" />}
|
||||
</form.AppField>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<form.AppForm>
|
||||
<form.SubscribeButton label="Submit" />
|
||||
</form.AppForm>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<div className="flex justify-end">
|
||||
<form.AppForm>
|
||||
<form.SubscribeButton label="Submit" />
|
||||
</form.AppForm>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,26 +1,25 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { createFileRoute } from "@tanstack/react-router";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
export const Route = createFileRoute('/demo/tanstack-query')({
|
||||
component: TanStackQueryDemo,
|
||||
})
|
||||
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: [],
|
||||
})
|
||||
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>
|
||||
)
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,38 +2,38 @@ import { createFileRoute } from "@tanstack/react-router";
|
||||
import logo from "../logo.svg";
|
||||
|
||||
export const Route = createFileRoute("/")({
|
||||
component: App,
|
||||
component: App,
|
||||
});
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="text-center">
|
||||
<header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]">
|
||||
<img
|
||||
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>
|
||||
);
|
||||
return (
|
||||
<div className="text-center">
|
||||
<header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]">
|
||||
<img
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
body {
|
||||
@apply m-0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
@apply m-0;
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
|
||||
"Droid Sans", "Helvetica Neue", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
|
||||
monospace;
|
||||
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
{
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"jsx": "react-jsx",
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"types": ["vite/client"],
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"jsx": "react-jsx",
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"types": ["vite/client"],
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"noEmit": true,
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
/* Linting */
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,20 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import viteReact from '@vitejs/plugin-react'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
import { defineConfig } from "vite";
|
||||
import viteReact from "@vitejs/plugin-react";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
|
||||
import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
|
||||
import { resolve } from 'node:path'
|
||||
import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
|
||||
import { resolve } from "node:path";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
TanStackRouterVite({ autoCodeSplitting: true }),
|
||||
viteReact(),
|
||||
tailwindcss(),
|
||||
],
|
||||
test: {
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, './src'),
|
||||
plugins: [TanStackRouterVite({ autoCodeSplitting: true }), viteReact(), tailwindcss()],
|
||||
test: {
|
||||
globals: true,
|
||||
environment: "jsdom",
|
||||
},
|
||||
},
|
||||
})
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": resolve(__dirname, "./src"),
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
5
rebuild.sh
Executable file
5
rebuild.sh
Executable file
@@ -0,0 +1,5 @@
|
||||
#!/bin/bash
|
||||
|
||||
file=development.yml
|
||||
|
||||
docker compose -f $file down && docker compose -f $file up --build -d
|
||||
Reference in New Issue
Block a user