31 | Этот стартовый комплект нацелен на предоставление разработчикам надежной основы
32 | для создания приложений на Next.js, обеспечивая соблюдение лучших практик по
33 | качеству кода, стилю и эффективности рабочих процессов.
34 |
164 | );
165 | }
166 |
167 | FormMessage.displayName = 'FormMessage';
168 |
169 | export { FormProvider as Form } from 'react-hook-form';
170 |
--------------------------------------------------------------------------------
/packages/routes/src/utils.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod';
2 |
3 | type ParsedData = { data?: T; error?: string };
4 |
5 | function processSchema(
6 | schema: z.ZodTypeAny,
7 | paramsArray: Record
8 | ): Record {
9 | if (schema instanceof z.ZodOptional) {
10 | schema = schema._def.innerType;
11 | }
12 | switch (schema.constructor) {
13 | case z.ZodObject: {
14 | const { shape } = schema as z.ZodObject;
15 |
16 | return parseShape(shape, paramsArray);
17 | }
18 | case z.ZodUnion: {
19 | const { options } = (
20 | schema as z.ZodUnion<[z.ZodObject, ...z.ZodObject[]]>
21 | )._def;
22 |
23 | for (const option of options) {
24 | const { shape } = option;
25 | const requireds = getRequireds(shape);
26 |
27 | const result = parseShape(shape, paramsArray, true);
28 | const keys = Object.keys(result);
29 |
30 | if (requireds.every(key => keys.includes(key))) {
31 | return result;
32 | }
33 | }
34 |
35 | return {};
36 | }
37 | default: {
38 | throw new Error('Unsupported schema type');
39 | }
40 | }
41 | }
42 |
43 | function getRequireds(shape: z.ZodRawShape) {
44 | const keys: string[] = [];
45 |
46 | for (const key in shape) {
47 | const fieldShape = shape[key];
48 |
49 | if (!(fieldShape instanceof z.ZodDefault) && !(fieldShape instanceof z.ZodOptional)) {
50 | keys.push(key);
51 | }
52 | }
53 |
54 | return keys;
55 | }
56 |
57 | function parseShape(
58 | shape: z.ZodRawShape,
59 | paramsArray: Record,
60 | isPartOfUnion = false
61 | ): Record {
62 | const parsed: Record = {};
63 |
64 | for (const key in shape) {
65 | if (shape.hasOwnProperty(key)) {
66 | const fieldSchema: z.ZodTypeAny = shape[key]!;
67 |
68 | if (paramsArray[key]) {
69 | const fieldData = convertToRequiredType(paramsArray[key], fieldSchema);
70 |
71 | if (fieldData.error) {
72 | if (isPartOfUnion) {
73 | return {};
74 | }
75 | continue;
76 | }
77 | const result = fieldSchema.safeParse(fieldData.data);
78 |
79 | if (result.success) {
80 | parsed[key] = result.data;
81 | }
82 | } else if (fieldSchema instanceof z.ZodDefault) {
83 | const result = fieldSchema.safeParse();
84 |
85 | if (result.success) {
86 | parsed[key] = result.data;
87 | }
88 | }
89 | }
90 | }
91 |
92 | return parsed;
93 | }
94 |
95 | function getAllParamsAsArrays(searchParams: URLSearchParams): Record {
96 | const params: Record = {};
97 |
98 | for (const [key, value] of searchParams.entries()) {
99 | if (!params[key]) {
100 | params[key] = [];
101 | }
102 | params[key].push(value);
103 | }
104 |
105 | return params;
106 | }
107 |
108 | function convertToRequiredType(values: string[], schema: z.ZodTypeAny): ParsedData {
109 | const usedSchema = getInnerType(schema);
110 |
111 | if (values.length > 1 && !(usedSchema instanceof z.ZodArray)) {
112 | return { error: 'Multiple values for non-array field' };
113 | }
114 | const value = parseValues(usedSchema, values);
115 |
116 | if (value.error && schema.constructor === z.ZodDefault) {
117 | return { data: undefined };
118 | }
119 |
120 | return value;
121 | }
122 |
123 | function parseValues(schema: any, values: string[]): ParsedData {
124 | switch (schema.constructor) {
125 | case z.ZodBoolean: {
126 | return parseBoolean(values[0]!);
127 | }
128 | case z.ZodNumber: {
129 | return parseNumber(values[0]!);
130 | }
131 | case z.ZodString: {
132 | return { data: values[0] };
133 | }
134 | case z.ZodArray: {
135 | const elementSchema = schema._def.type;
136 |
137 | switch (elementSchema.constructor) {
138 | case z.ZodBoolean: {
139 | return parseArray(values, parseBoolean);
140 | }
141 | case z.ZodNumber: {
142 | return parseArray(values, parseNumber);
143 | }
144 | case z.ZodString: {
145 | return { data: values };
146 | }
147 | default: {
148 | return {
149 | error: `unsupported array element type ${String(elementSchema.constructor)}`,
150 | };
151 | }
152 | }
153 | }
154 | default: {
155 | return { error: `unsupported type ${String(schema.constructor)}` };
156 | }
157 | }
158 | }
159 |
160 | function getInnerType(schema: z.ZodTypeAny) {
161 | switch (schema.constructor) {
162 | case z.ZodDefault:
163 | case z.ZodOptional: {
164 | return schema._def.innerType;
165 | }
166 | default: {
167 | return schema;
168 | }
169 | }
170 | }
171 |
172 | function parseNumber(string_: string): ParsedData {
173 | const number_ = +string_;
174 |
175 | return isNaN(number_) ? { error: `${string_} is NaN` } : { data: number_ };
176 | }
177 |
178 | function parseBoolean(string_: string): ParsedData {
179 | switch (string_) {
180 | case 'false': {
181 | return { data: false };
182 | }
183 | case 'true': {
184 | return { data: true };
185 | }
186 | default: {
187 | return { error: `${string_} is not a boolean` };
188 | }
189 | }
190 | }
191 |
192 | function parseArray(
193 | values: string[],
194 | parseFunction: (string_: string) => ParsedData
195 | ): ParsedData {
196 | const numbers = values.map(parseFunction);
197 | const error = numbers.find(n => n.error)?.error;
198 |
199 | if (error) {
200 | return { error };
201 | }
202 |
203 | return { data: numbers.map(n => n.data!) };
204 | }
205 |
206 | export function safeParseSearchParams(
207 | schema: T,
208 | searchParams: URLSearchParams
209 | ): z.infer {
210 | const paramsArray = getAllParamsAsArrays(searchParams);
211 |
212 | return processSchema(schema, paramsArray);
213 | }
214 |
--------------------------------------------------------------------------------
/packages/core/select/select.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import type { ComponentProps, Ref } from 'react';
4 |
5 | import * as SelectPrimitive from '@radix-ui/react-select';
6 | import { Check, ChevronDown, ChevronUp } from 'lucide-react';
7 |
8 | import { cn } from '../cn';
9 |
10 | export const Select = SelectPrimitive.Root;
11 |
12 | export const SelectGroup = SelectPrimitive.Group;
13 |
14 | export const SelectValue = SelectPrimitive.Value;
15 |
16 | type SelectTriggerProps = {
17 | ref?: Ref;
18 | } & ComponentProps;
19 |
20 | export function SelectTrigger({ children, className, ref, ...props }: SelectTriggerProps) {
21 | return (
22 | span]:line-clamp-1',
25 | className
26 | )}
27 | ref={ref}
28 | {...props}
29 | >
30 | {children}
31 |
32 |
33 |
34 |
35 | );
36 | }
37 |
38 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
39 |
40 | type SelectScrollUpButtonProps = {
41 | ref?: Ref;
42 | } & ComponentProps;
43 |
44 | export function SelectScrollUpButton({ className, ref, ...props }: SelectScrollUpButtonProps) {
45 | return (
46 |
51 |
52 |
53 | );
54 | }
55 |
56 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
57 |
58 | type SelectScrollDownButtonProps = {
59 | ref?: Ref;
60 | } & ComponentProps;
61 |
62 | export function SelectScrollDownButton({ className, ref, ...props }: SelectScrollDownButtonProps) {
63 | return (
64 |
69 |
70 |
71 | );
72 | }
73 |
74 | SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
75 |
76 | type SelectContentProps = {
77 | ref?: Ref;
78 | } & ComponentProps;
79 |
80 | export function SelectContent({
81 | children,
82 | className,
83 | position = 'popper',
84 | ref,
85 | ...props
86 | }: SelectContentProps) {
87 | return (
88 |
89 |
100 |
101 |
108 | {children}
109 |
110 |
111 |
112 |
113 | );
114 | }
115 |
116 | SelectContent.displayName = SelectPrimitive.Content.displayName;
117 |
118 | type SelectLabelProps = {
119 | ref?: Ref;
120 | } & ComponentProps;
121 |
122 | export function SelectLabel({ className, ref, ...props }: SelectLabelProps) {
123 | return (
124 |
129 | );
130 | }
131 |
132 | SelectLabel.displayName = SelectPrimitive.Label.displayName;
133 |
134 | type SelectItemProps = {
135 | ref?: Ref;
136 | } & ComponentProps;
137 |
138 | export function SelectItem({ children, className, ref, ...props }: SelectItemProps) {
139 | return (
140 |
148 |
149 |
150 |
151 |
152 |
153 |
154 | {children}
155 |
156 | );
157 | }
158 |
159 | SelectItem.displayName = SelectPrimitive.Item.displayName;
160 |
161 | type SelectSeparatorProps = {
162 | ref?: Ref;
163 | } & ComponentProps;
164 |
165 | export function SelectSeparator({ className, ref, ...props }: SelectSeparatorProps) {
166 | return (
167 |
172 | );
173 | }
174 |
175 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
176 |
--------------------------------------------------------------------------------
/packages/routes/README.md:
--------------------------------------------------------------------------------
1 | This application supports typesafe routing for NextJS using the `declarative-routing` system.
2 |
3 | # What is `declarative-routing`?
4 |
5 | Declarative Routes is a system for typesafe routing in React. It uses a combination of TypeScript and a custom routing system to ensure that your routes are always in sync with your code. You'll never have to worry about broken links or missing routes again.
6 |
7 | In NextJS applications, Declarative Routes also handles API routes, so you'll have typesafe input and output from all of your APIs. In addition to `fetch` functions that are written for you automatically.
8 |
9 | # Route List
10 |
11 | Here are the routes of the application:
12 |
13 | | Route | Verb | Route Name | Using It |
14 | | ----------------- | ---- | ------------ | -------------------- |
15 | | `/(home)` | - | `Home` | `` |
16 | | `/(home)/ui-demo` | - | `HomeUiDemo` | `` |
17 | | `/api/health` | GET | `ApiHealth` | `getApiHealth(...)` |
18 | | `/api/metrics` | GET | `ApiMetrics` | `getApiMetrics(...)` |
19 | | `/api/ready` | GET | `ApiReady` | `getApiReady(...)` |
20 |
21 | To use the routes, you can import them from `@/routes` and use them in your code.
22 |
23 | # Using the routes in your application
24 |
25 | For pages, use the `Link` component (built on top of `next/link`) to link to other pages. For example:
26 |
27 | ```tsx
28 | import { ProductDetail } from '@repo/routes"
29 |
30 | return Product abc123;
31 | ```
32 |
33 | This is the equivalent of doing `Product abc123` but with typesafety. And you never have to remember the URL. If the route moves, the typesafe route will be updated automatically.
34 |
35 | For APIs, use the exported `fetch` wrapping functions. For example:
36 |
37 | ```tsx
38 | import { useEffect } from 'react';
39 | import { getProductInfo } from '@repo/routes';
40 |
41 | useEffect(() => {
42 | // Parameters are typed to the input of the API
43 | getProductInfo({ productId: 'abc123' }).then(data => {
44 | // Data is typed to the result of the API
45 | console.log(data);
46 | });
47 | }, []);
48 | ```
49 |
50 | This is the equivalent of doing `fetch('/api/product/abc123')` but with typesafety, and you never have to remember the URL. If the API moves, the typesafe route will be updated automatically.
51 |
52 | ## Using typed hooks
53 |
54 | The system provides three typed hooks to use in your application `usePush`, `useParams`, and `useSearchParams`.
55 |
56 | - `usePush` wraps the NextJS `useRouter` hook and returns a typed version of the `push` function.
57 | - `useParams` wraps `useNextParams` and returns the typed parameters for the route.
58 | - `useSearchParams` wraps `useNextSearchParams` and returns the typed search parameters for the route.
59 |
60 | For each hook you give the route to get the appropriate data back.
61 |
62 | ```ts
63 | import { Search } from "@/routes";
64 | import { useSearchParams } from "@repo/routes/hooks";
65 |
66 | export default MyClientComponent() {
67 | const searchParams = useSearchParams(Search);
68 | return
{searchParams.query}
;
69 | }
70 | ```
71 |
72 | We had to extract the hooks into a seperate module because NextJS would not allow the routes to include hooks directly if
73 | they were used by React Server Components (RSCs).
74 |
75 | # Configure declarative-routing
76 |
77 | After running `npx declarative-routing init`, you don't need to configure anything to use it.
78 | However, you may want to customize some options to change the behavior of route generation.
79 |
80 | You can edit `declarative-routing.config.json` in the root of your project. The following options are available:
81 |
82 | - `mode`: choose between `react-router`, `nextjs` or `qwikcity`. It is automatically picked on init based on the project type.
83 | - `routes`: the directory where the routes are defined. It is picked from the initial wizard (and defaults to `./src/components/declarativeRoutes`).
84 | - `importPathPrefix`: the path prefix to add to the import path of the self-generated route objects, in order to be able to resolve them. It defaults to `@/app`.
85 |
86 | # When your routes change
87 |
88 | You'll need to run `npm run dr:build` to update the generated files. This will update the types and the `@/routes` module to reflect the changes.
89 |
90 | The way the system works the `.info.ts` files are link to the `@/routes/index.ts` file. So changing the Zod schemas for the routes does **NOT** require a rebuild. You need to run the build command when:
91 |
92 | - You change the name of the route in the `.info.ts` file
93 | - You change the location of the route (e.g. `/product` to `/products`)
94 | - You change the parameters of the route (e.g. `/product/[id]` to `/product/[productId]`)
95 | - You add or remove routes
96 | - You add or remove verbs from API routes (e.g. adding `POST` to an existing route)
97 |
98 | You can also run the build command in watch mode using `npm run dr:build:watch` but we don't recommend using that unless you are changing routes a lot. It's a neat party trick to change a route directory name and to watch the links automagically change with hot module reloading, but routes really don't change that much.
99 |
100 | # Finishing your setup
101 |
102 | Post setup there are some additional tasks that you need to complete to completely typesafe your routes. We've compiled a handy check list so you can keep track of your progress.
103 |
104 | - [ ] `/(home)/page.info.ts`: Add search typing to if the page supports search paramaters
105 | - [ ] Convert `Link` components for `/(home)` to ``
106 | - [ ] `/(home)/ui-demo/page.info.ts`: Add search typing to if the page supports search paramaters
107 | - [ ] Convert `Link` components for `/(home)/ui-demo` to ``
108 | - [ ] `/api/health/route.info.ts`: Add typing for `GET`
109 | - [ ] Convert `GET` fetch calls to `/api/health` to `getApiHealth(...)` calls
110 | - [ ] `/api/metrics/route.info.ts`: Add typing for `GET`
111 | - [ ] Convert `GET` fetch calls to `/api/metrics` to `getApiMetrics(...)` calls
112 | - [ ] `/api/ready/route.info.ts`: Add typing for `GET`
113 | - [ ] Convert `GET` fetch calls to `/api/ready` to `getApiReady(...)` calls
114 | Once you've got that done you can remove this section.
115 |
116 | # Why is `makeRoute` copied into the `@repo/routes` module?
117 |
118 | You **own** this routing system once you install it. And we anticipate as part of that ownership you'll want to customize the routing system. That's why we create a `makeRoute.tsx` file in the `@repo/routes` module. This file is a copy of the `makeRoute.tsx` file from the `declarative-routing` package. You can modify this file to change the behavior of the routing system.
119 |
120 | For example, you might want to change the way `GET`, `POST`, `PUT`, and `DELETE` are handled. Or you might want to change the way the `Link` component works. You can do all of that by modifying the `makeRoute.tsx` file.
121 |
122 | We do **NOT** recommend changing the parameters of `makeRoute`, `makeGetRoute`, `makePostRoute`, `makePutRoute`, or `makeDeleteRoute` functions because that would cause incompatibility with the `build` command of `declarative-routing`.
123 |
--------------------------------------------------------------------------------
/app/(public)/ui-demo/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import { Button } from '@repo/core/button';
3 | import { Checkbox } from '@repo/core/checkbox';
4 | import {
5 | Dialog,
6 | DialogClose,
7 | DialogContent,
8 | DialogDescription,
9 | DialogFooter,
10 | DialogHeader,
11 | DialogTitle,
12 | DialogTrigger,
13 | } from '@repo/core/dialog';
14 | import { Input } from '@repo/core/input';
15 | import { Label } from '@repo/core/label';
16 | import { RadioGroup, RadioGroupItem } from '@repo/core/radio-group';
17 | import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@repo/core/select';
18 | import { Skeleton } from '@repo/core/skeleton';
19 | import { toast } from '@repo/core/sonner';
20 | import { Switch } from '@repo/core/switch';
21 | import { Tabs } from '@repo/core/tabs';
22 | import { TabsContent, TabsList, TabsTrigger } from '@repo/core/tabs/tabs';
23 | import { Textarea } from '@repo/core/textarea';
24 | import {
25 | Tooltip,
26 | TooltipContent,
27 | TooltipProvider,
28 | TooltipTrigger,
29 | } from '@repo/core/tooltip/tooltip';
30 | import { Typography } from '@repo/core/typography';
31 | import { CircleHelp } from 'lucide-react';
32 |
33 | const gridItemClassName =
34 | 'flex place-content-center items-center col-span-1 border border-dashed border-slate-200 p-4 rounded-2xl';
35 |
36 | export default function UiPage() {
37 | return (
38 |