Prettier prettied
This commit is contained in:
Leons Aleksandrovs
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user