Cursor rule

1---
2description: React
3globs: **/*.tsx
4alwaysApply: false
5---
6## React
7 
8 
9- You are using the latest version of React (v19)
10- Do not write any backend code. Just frontend logic.
11- If a complex skeleton is needed, create a component function `LoadingSkeleton` in the same file.
12- Store components for each major page or workflow in `app/components/$WORKFLOW/$COMPONENT.tsx`.
13  - If a single page has more than two dedicated components, create a subfolder `app/components/$WORKFLOW/$PAGE/$COMPONENT.tsx`
14- Use lowercase dash separated words for file names.
15- Use React 19, TypeScript, Tailwind CSS, and ShadCN components.
16- Prefer function components, hooks over classes.
17- Use ShadCN components in `web/app/components/ui` as your component library. If you need new components, ask for them.
18  - Never edit the `web/components/ui/*.tsx` files.
19  - You can find a list of components here https://ui.shadcn.com/docs/components
20- Break up large components into smaller components, but keep them in the same file unless they can be generalized.
21- Put any "magic" strings like API keys, hosts, etc into a "constants.ts" file.
22- For React functional components with three or fewer props, always inline the prop types as an object literal directly in the function signature after the destructured parameters (e.g., `function Component({ prop1, prop2 }: { prop1: string; prop2?: number }) { ... })`. Include default values in destructuring and mark optional props with ? in the type object. Do not use separate interfaces or type aliases; keep types inline. For complex types, add inline comments if needed.
23- Put the interface definition right above the related function
24- Internally, store all currency values as integers and convert them to floats when rendering visually
25- When building forms use React Hook Form.
26- Include a two line breaks between any `useHook()` calls and any `useState()` definitions for a component.
27- When using a function prop inside a `useEffect`, please use a pattern that avoids including the function in the dependency array, like the `useRef` trick.
28- When writing React components, always hoist complex conditional expressions into descriptively named constants at the top of the component function for better readability and maintainability.
29- When managing API response data, store the entire response object (or relevant subset) in a single `useState` rather than creating separate state variables for each field. Derive individual values from the response object when passing to child components using optional chaining (e.g., response?.field || defaultValue).
30- Refactor ternary to &&: `{condition ? <A/> : <B/>}` → `{condition && <A/>}{!condition && <B/>}`
31- Use the following pattern to reference query string values (i.e. `?theQueryStringParam=value`):
32 
33```typescript
34const [searchParams, _setSearchParams] = useSearchParams();
35// searchParams contains the value of all query string parameters
36const queryStringValue = searchParams.get("theQueryStringParam")
37```
38 
39### Mock Data
40 
41- For any backend communication, create mock responses. Use a async function to return mock data that I will swap out later for a async call to an API.
42- When creating mock data, always specify it in a dedicated `web/app/mock.ts` file
43- Load mock data using a react router `clientLoader`. Use the Skeleton component to present a loading state.
44 
45### React Hook Form
46 
47Follow this structure when generating a form.
48 
49```tsx
50 
51// add a mock function simulating server communication
52async function descriptiveServerSendFunction(values: any) {
53  const mockData = getMockReturnData(/* ... */)
54  return new Promise(resolve => setTimeout(() => resolve(mockData), 500));
55}
56 
57const formSchema = z.object({
58  field_name: z.string(),
59  // additional schema definition
60})
61 
62const form = useForm<z.infer<typeof formSchema>>({
63  resolver: zodResolver(formSchema),
64})
65 
66const {
67  formState: { isSubmitting, errors },
68  setError,
69  clearErrors,
70} = form
71 
72 
73async function onSubmit(values: z.infer<typeof formSchema>) {
74  clearErrors("root")
75 
76  // ...
77  const { data, error } = await descriptiveSendFunction(values)
78 
79  if (error) {
80    setError("root.serverError", { message: error.detail?.[0]?.msg })
81    return
82  }
83  // ...
84}
85 
86return (
87  <Form {...form}>
88    <form onSubmit={form.handleSubmit(onSubmit)}>
89      {/* form fields */}
90 
91      <ServerErrorAlert error={errors.root?.serverError} />
92 
93      <Button
94        type="submit"
95        disabled={isSubmitting}
96      >
97        {isSubmitting ? "Submitting..." : "Submit"}
98      </Button>
99    </form>
100  </Form>
101)
102```
103 
104### Styling
105 
106* Use `text-blue-link` for styling any simple `<a>` tags
107