diff --git a/package-lock.json b/package-lock.json index 665b415..8e468ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,17 +16,21 @@ "@radix-ui/react-scroll-area": "^1.1.0", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", + "@upstash/redis": "^1.34.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "geist": "^1.3.1", "lucide-react": "^0.435.0", "next": "14.2.6", + "next-safe-action": "^7.9.2", "next-themes": "^0.3.0", "react": "^18", "react-dom": "^18", + "server-only": "^0.0.1", "sonner": "^1.5.0", "tailwind-merge": "^2.5.2", - "tailwindcss-animate": "^1.0.7" + "tailwindcss-animate": "^1.0.7", + "zod": "^3.23.8" }, "devDependencies": { "@biomejs/biome": "1.8.3", @@ -1193,6 +1197,14 @@ "@types/react": "*" } }, + "node_modules/@upstash/redis": { + "version": "1.34.0", + "resolved": "https://registry.npmjs.org/@upstash/redis/-/redis-1.34.0.tgz", + "integrity": "sha512-TrXNoJLkysIl8SBc4u9bNnyoFYoILpCcFJcLyWCccb/QSUmaVKdvY0m5diZqc3btExsapcMbaw/s/wh9Sf1pJw==", + "dependencies": { + "crypto-js": "^4.2.0" + } + }, "node_modules/ansi-regex": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", @@ -1424,6 +1436,11 @@ "node": ">= 8" } }, + "node_modules/crypto-js": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", + "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==" + }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -1864,6 +1881,47 @@ } } }, + "node_modules/next-safe-action": { + "version": "7.9.3", + "resolved": "https://registry.npmjs.org/next-safe-action/-/next-safe-action-7.9.3.tgz", + "integrity": "sha512-2GH7/iRiM5R/y6sIQZsNHGeRr/iKQJsg8ejP63WhTS7fXS9KzxVbEKrWwLNNhL33V9cn0448cPSI/aiSK/PUbA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/TheEdoRan" + }, + { + "type": "paypal", + "url": "https://www.paypal.com/donate/?hosted_button_id=ES9JRPSC66XKW" + } + ], + "engines": { + "node": ">=18.17" + }, + "peerDependencies": { + "@sinclair/typebox": ">= 0.33.3", + "next": ">= 14.0.0", + "react": ">= 18.2.0", + "react-dom": ">= 18.2.0", + "valibot": ">= 0.36.0", + "yup": ">= 1.0.0", + "zod": ">= 3.0.0" + }, + "peerDependenciesMeta": { + "@sinclair/typebox": { + "optional": true + }, + "valibot": { + "optional": true + }, + "yup": { + "optional": true + }, + "zod": { + "optional": true + } + } + }, "node_modules/next-themes": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz", @@ -2320,6 +2378,11 @@ "loose-envify": "^1.1.0" } }, + "node_modules/server-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz", + "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -2784,6 +2847,14 @@ "engines": { "node": ">= 14" } + }, + "node_modules/zod": { + "version": "3.23.8", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz", + "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } } }, "dependencies": { @@ -3413,6 +3484,14 @@ "@types/react": "*" } }, + "@upstash/redis": { + "version": "1.34.0", + "resolved": "https://registry.npmjs.org/@upstash/redis/-/redis-1.34.0.tgz", + "integrity": "sha512-TrXNoJLkysIl8SBc4u9bNnyoFYoILpCcFJcLyWCccb/QSUmaVKdvY0m5diZqc3btExsapcMbaw/s/wh9Sf1pJw==", + "requires": { + "crypto-js": "^4.2.0" + } + }, "ansi-regex": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", @@ -3572,6 +3651,11 @@ "which": "^2.0.1" } }, + "crypto-js": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", + "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==" + }, "cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -3888,6 +3972,12 @@ } } }, + "next-safe-action": { + "version": "7.9.3", + "resolved": "https://registry.npmjs.org/next-safe-action/-/next-safe-action-7.9.3.tgz", + "integrity": "sha512-2GH7/iRiM5R/y6sIQZsNHGeRr/iKQJsg8ejP63WhTS7fXS9KzxVbEKrWwLNNhL33V9cn0448cPSI/aiSK/PUbA==", + "requires": {} + }, "next-themes": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz", @@ -4119,6 +4209,11 @@ "loose-envify": "^1.1.0" } }, + "server-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/server-only/-/server-only-0.0.1.tgz", + "integrity": "sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -4421,6 +4516,11 @@ "version": "2.5.0", "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz", "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==" + }, + "zod": { + "version": "3.23.8", + "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz", + "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==" } } } diff --git a/src/data/index.ts b/src/data/index.ts index 79bae98..6607e1d 100644 --- a/src/data/index.ts +++ b/src/data/index.ts @@ -37,6 +37,7 @@ import { uiuxRules } from "./rules/uiux-design"; import { unityCSharpRules } from "./rules/unity-c-sharp"; import { vueTsRules } from "./rules/vue"; import { webDevelopmentRules } from "./rules/web-development"; +import {monorepoTamagui } from "./rules/monorepo-tamagui" export const rules = [ ...astroRules, @@ -78,6 +79,7 @@ export const rules = [ ...ionicRules, ...fastifyRules, ...pixiJsRules, + ...monorepoTamagui ]; export function getSections() { diff --git a/src/data/rules/monorepo-tamagui.ts b/src/data/rules/monorepo-tamagui.ts new file mode 100644 index 0000000..63fddac --- /dev/null +++ b/src/data/rules/monorepo-tamagui.ts @@ -0,0 +1,138 @@ +export const monorepoTamagui = [ + { + title: "Monorepo using Tamagui", + tags: ["Tamagui", "Next.js", "Expo", "Supabase", "Monorepo", "Solito", "Zod", "Zustand", "i18n", "Stripe"], + slug: "monorepo-tamagui", + libs: [], + content: ` + You are an expert developer proficient in TypeScript, React and Next.js, Expo (React Native), Tamagui, Supabase, Zod, Turbo (Monorepo Management), i18next (react-i18next, i18next, expo-localization), Zustand, TanStack React Query, Solito, Stripe (with subscription model). + +Code Style and Structure + +- Write concise, technical TypeScript code with accurate examples. +- Use functional and declarative programming patterns; avoid classes. +- Prefer iteration and modularization over code duplication. +- Use descriptive variable names with auxiliary verbs (e.g., \`isLoading\`, \`hasError\`). +- Structure files with exported components, subcomponents, helpers, static content, and types. +- Favor named exports for components and functions. +- Use lowercase with dashes for directory names (e.g., \`components/auth-wizard\`). + +TypeScript and Zod Usage + +- Use TypeScript for all code; prefer interfaces over types for object shapes. +- Utilize Zod for schema validation and type inference. +- Avoid enums; use literal types or maps instead. +- Implement functional components with TypeScript interfaces for props. + +Syntax and Formatting + +- Use the \`function\` keyword for pure functions. +- Write declarative JSX with clear and readable structure. +- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements. + +UI and Styling + +- Use Tamagui for cross-platform UI components and styling. +- Implement responsive design with a mobile-first approach. +- Ensure styling consistency between web and native applications. +- Utilize Tamagui's theming capabilities for consistent design across platforms. + +State Management and Data Fetching + +- Use Zustand for state management. +- Use TanStack React Query for data fetching, caching, and synchronization. +- Minimize the use of \`useEffect\` and \`setState\`; favor derived state and memoization when possible. + +Internationalization + +- Use i18next and react-i18next for web applications. +- Use expo-localization for React Native apps. +- Ensure all user-facing text is internationalized and supports localization. + +Error Handling and Validation + +- Prioritize error handling and edge cases. +- Handle errors and edge cases at the beginning of functions. +- Use early returns for error conditions to avoid deep nesting. +- Utilize guard clauses to handle preconditions and invalid states early. +- Implement proper error logging and user-friendly error messages. +- Use custom error types or factories for consistent error handling. + +Performance Optimization + +- Optimize for both web and mobile performance. +- Use dynamic imports for code splitting in Next.js. +- Implement lazy loading for non-critical components. +- Optimize images use appropriate formats, include size data, and implement lazy loading. + +Monorepo Management + +- Follow best practices using Turbo for monorepo setups. +- Ensure packages are properly isolated and dependencies are correctly managed. +- Use shared configurations and scripts where appropriate. +- Utilize the workspace structure as defined in the root \`package.json\`. + +Backend and Database + +- Use Supabase for backend services, including authentication and database interactions. +- Follow Supabase guidelines for security and performance. +- Use Zod schemas to validate data exchanged with the backend. + +Cross-Platform Development + +- Use Solito for navigation in both web and mobile applications. +- Implement platform-specific code when necessary, using \`.native.tsx\` files for React Native-specific components. +- Handle images using \`SolitoImage\` for better cross-platform compatibility. + +Stripe Integration and Subscription Model + +- Implement Stripe for payment processing and subscription management. +- Use Stripe's Customer Portal for subscription management. +- Implement webhook handlers for Stripe events (e.g., subscription created, updated, or cancelled). +- Ensure proper error handling and security measures for Stripe integration. +- Sync subscription status with user data in Supabase. + +Testing and Quality Assurance + +- Write unit and integration tests for critical components. +- Use testing libraries compatible with React and React Native. +- Ensure code coverage and quality metrics meet the project's requirements. + +Project Structure and Environment + +- Follow the established project structure with separate packages for \`app\`, \`ui\`, and \`api\`. +- Use the \`apps\` directory for Next.js and Expo applications. +- Utilize the \`packages\` directory for shared code and components. +- Use \`dotenv\` for environment variable management. +- Follow patterns for environment-specific configurations in \`eas.json\` and \`next.config.js\`. +- Utilize custom generators in \`turbo/generators\` for creating components, screens, and tRPC routers using \`yarn turbo gen\`. + +Key Conventions + +- Use descriptive and meaningful commit messages. +- Ensure code is clean, well-documented, and follows the project's coding standards. +- Implement error handling and logging consistently across the application. + +Follow Official Documentation + +- Adhere to the official documentation for each technology used. +- For Next.js, focus on data fetching methods and routing conventions. +- Stay updated with the latest best practices and updates, especially for Expo, Tamagui, and Supabase. + +Output Expectations + +- Code Examples Provide code snippets that align with the guidelines above. +- Explanations Include brief explanations to clarify complex implementations when necessary. +- Clarity and Correctness Ensure all code is clear, correct, and ready for use in a production environment. +- Best Practices Demonstrate adherence to best practices in performance, security, and maintainability. + + `, + author: { + name: "Davide Del Gatto", + url: "https://x.com/davidedelgatto", + avatar: + "https://pbs.twimg.com/profile_images/1468184465495179274/qXV-w7Dj_400x400.jpg", + }, + }, + ]; + \ No newline at end of file