Skip to content

Commit ec1e4d6

Browse files
birkskyumbirkskyum
authored
docs(solid-router): search-validator-adapters (#5848)
1 parent ee241f3 commit ec1e4d6

25 files changed

+840
-0
lines changed

‎examples/solid/search-validator-adapters/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎examples/solid/search-validator-adapters/.vscode/settings.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"files.watcherExclude": {
3+
"**/routeTree.gen.ts": true
4+
},
5+
"search.exclude": {
6+
"**/routeTree.gen.ts": true
7+
},
8+
"files.readonlyInclude": {
9+
"**/routeTree.gen.ts": true
10+
}
11+
}

‎examples/solid/search-validator-adapters/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm start` or `yarn start`

‎examples/solid/search-validator-adapters/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎examples/solid/search-validator-adapters/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "tanstack-solid-router-search-validator-adapters",
3+
"private": true,
4+
"type": "module",
5+
"scripts": {
6+
"dev": "vite --port 3000",
7+
"build": "vite build && tsc --noEmit",
8+
"serve": "vite preview",
9+
"start": "vite",
10+
"test:unit": "vitest"
11+
},
12+
"dependencies": {
13+
"@tailwindcss/postcss": "^4.1.15",
14+
"@tanstack/arktype-adapter": "^1.135.2",
15+
"@tanstack/solid-query": "^5.90.0",
16+
"@tanstack/solid-router": "^1.135.2",
17+
"@tanstack/solid-router-devtools": "^1.135.2",
18+
"@tanstack/router-plugin": "^1.135.2",
19+
"@tanstack/valibot-adapter": "^1.135.2",
20+
"@tanstack/zod-adapter": "^1.135.2",
21+
"arktype": "^2.1.7",
22+
"postcss": "^8.5.1",
23+
"solid-js": "^1.9.10",
24+
"tailwindcss": "^4.1.15",
25+
"valibot": "1.0.0-beta.15",
26+
"zod": "^3.24.2"
27+
},
28+
"devDependencies": {
29+
"@testing-library/jest-dom": "^6.6.3",
30+
"@solidjs/testing-library": "^0.8.10",
31+
"vite-plugin-solid": "^2.11.10",
32+
"typescript": "^5.7.2",
33+
"vite": "^7.1.7"
34+
}
35+
}

‎examples/solid/search-validator-adapters/postcss.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
plugins: {
3+
'@tailwindcss/postcss': {},
4+
},
5+
}

‎examples/solid/search-validator-adapters/src/components/Content.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import type { JSX } from 'solid-js'
2+
3+
export interface ContentProps {
4+
readonly children: JSX.Element
5+
}
6+
7+
export const Content = ({ children }: ContentProps) => {
8+
return <section class="my-2 flex flex-col gap-2">{children}</section>
9+
}

‎examples/solid/search-validator-adapters/src/components/Header.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Link } from '@tanstack/solid-router'
2+
3+
const HeaderLink: typeof Link = (props) => {
4+
return <Link class="text-lg text-blue-700" {...props} />
5+
}
6+
7+
export interface HeaderProps {
8+
readonly title: string
9+
}
10+
11+
export const Header = ({ title }: HeaderProps) => {
12+
return (
13+
<header class="flex items-end gap-8 border-b-2 border-slate-150 py-4">
14+
<h1 class="text-4xl">{title}</h1>
15+
<nav class="flex gap-4">
16+
<HeaderLink to="/users/zod">Zod</HeaderLink>
17+
<HeaderLink to="/users/valibot">Valibot</HeaderLink>
18+
<HeaderLink to="/users/arktype">Arktype</HeaderLink>
19+
</nav>
20+
</header>
21+
)
22+
}

‎examples/solid/search-validator-adapters/src/components/Search.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export interface SearchProps {
2+
search: string
3+
onChange: (search: string) => void
4+
}
5+
6+
export const Search = ({ search, onChange }: SearchProps) => {
7+
return (
8+
<div class="flex gap-2 align-center items-center">
9+
<label>Search</label>
10+
<input
11+
type="search"
12+
class="border p-1 px-2 rounded-sm"
13+
value={search}
14+
onInput={(e) => onChange(e.currentTarget.value)}
15+
></input>
16+
</div>
17+
)
18+
}

‎examples/solid/search-validator-adapters/src/components/Users.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { queryOptions, useQuery } from '@tanstack/solid-query'
2+
3+
export interface Geo {
4+
lat: string
5+
lng: string
6+
}
7+
8+
export interface Address {
9+
street: string
10+
suite: string
11+
city: string
12+
zipcode: string
13+
geo: Geo
14+
}
15+
16+
export interface Company {
17+
name: string
18+
catchPhrase: string
19+
bs: string
20+
}
21+
22+
export interface User {
23+
id: number
24+
name: string
25+
username: string
26+
email: string
27+
address: Address
28+
phone: string
29+
website: string
30+
company: Company
31+
}
32+
33+
export const getUsers = async (): Promise<Array<User>> => {
34+
const response = await fetch('https://jsonplaceholder.typicode.com/users')
35+
const users: Array<User> = await response.json()
36+
return users
37+
}
38+
39+
export const searchUsers = async (search: string): Promise<Array<User>> => {
40+
const users = await getUsers()
41+
const normalizedSearch = search.toLowerCase()
42+
return users.filter(
43+
(user) =>
44+
user.name.toLowerCase().includes(normalizedSearch) ||
45+
user.username.toLowerCase().includes(normalizedSearch),
46+
)
47+
}
48+
49+
export const usersQueryOptions = (search: string) =>
50+
queryOptions({
51+
queryKey: ['users', search],
52+
queryFn: async () => {
53+
return await searchUsers(search)
54+
},
55+
})
56+
57+
export interface UsersProps {
58+
search: string
59+
}
60+
61+
export const Users = ({ search }: UsersProps) => {
62+
const users = useQuery(() => usersQueryOptions(search))
63+
64+
return (
65+
<table class="table-auto">
66+
<thead>
67+
<tr class="border text-left">
68+
<th class="p-4">Username</th>
69+
<th class="p-4">Name</th>
70+
<th class="p-4">Email</th>
71+
</tr>
72+
</thead>
73+
<tbody>
74+
{users.data?.map((user) => (
75+
<tr class="border">
76+
<td class="p-4">{user.username}</td>
77+
<td class="p-4">{user.name}</td>
78+
<td class="p-4">{user.email}</td>
79+
</tr>
80+
))}
81+
</tbody>
82+
</table>
83+
)
84+
}

0 commit comments

Comments
 (0)