Added new rule for Monorepo using Tamagui

samzong · Sep 15, 2024 · 20be0b6 · 20be0b6
1 parent 9db8ad8
commit 20be0b6
Show file tree

Hide file tree

Showing 3 changed files with 241 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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",
+      },
+    },
+  ];
+