Cursor rule

1---
2description: TypeScript coding standards and best practices
3globs: "**/*.{ts,tsx}"
4---
5---
6description: TypeScript Rules
7globs: "**/*.{ts,tsx}"
8---
9 
10# TypeScript Rules
11 
12### **Core Principles**
13- Use **TypeScript** for all code; prefer **interfaces** over types.
14- Use the **`function`** keyword for pure functions; **omit semicolons**.
15- Avoid **enums**; use **maps** or **union types** instead.
16- Use **descriptive variable names** with auxiliary verbs (e.g., `isLoading`, `hasError`).
17- Follow the **RORO (Receive an Object, Return an Object)** pattern for function arguments and return values.
18- Use **lowercase-with-dashes** for directories (e.g., `components/auth-wizard`).
19- Favor **named exports** for components.
20- Use **functional & declarative programming** patterns; **avoid classes**.
21- Prefer **iteration & modularization** over code duplication.
22- **Avoid unnecessary curly braces** in conditionals, especially for single-line statements.
23 
24### **Error Handling**
25- **Fail fast**: Handle errors early using **guard clauses & early returns**.
26- Place the **happy path last** for improved readability.
27- **Avoid unnecessary else statements**; prefer `if-return` pattern.
28- Use **preconditions** to check for invalid states upfront.
29- Throw errors from `@chaingraph/errors` for consistency.
30- Implement **proper error logging** and **user-friendly messages**.
31- Consider using **custom error types** or **error factories** for consistent error handling.
32 
33### **File Structure & Organization** IMPORTANT
34Maintain a structured and logical order when organizing files:
351. **Main Component** – The primary component that orchestrates logic and renders subcomponents.
362. **Subcomponents** – Smaller, reusable components that support the main component.
373. **Helpers & Utilities** – Functions or modules that provide reusable logic and utilities.
384. **Static Content** – Non-code assets such as constants, images, or localization files.
395. **Types & Interfaces** – Type definitions for TypeScript to ensure type safety and maintain consistency.
40 
41This hierarchy improves **readability, maintainability, and scalability**.
42 
43#### **Example**
44```tsx
45export function MainComponent() {
46  return (
47    <div className="flex flex-col gap-4">
48      <h1>{content.title}</h1>
49      <SubComponent message={content.welcome} />
50    </div>
51  )
52}
53 
54function SubComponent({ message }: SubComponentProps) {
55  return <p>{message}</p>
56}
57 
58const content = {
59  title: "Main Component",
60  welcome: "Welcome"
61} as const
62 
63interface SubComponentProps {
64  message: string
65}
66```