feat: add cursor rules + few prompts

yjose · asdolo · commit 2777299e61ac · 2025-09-19T11:39:04.000-03:00
diff --git a/prompts/expo-doctor.md b/prompts/expo-doctor.md
@@ -0,0 +1,11 @@
+You are an expert in TypeScript, Expo, and React Native.
+
+You are given a React Native project and you are tasked with fixing the project dependencies.
+
+You should follow the following steps:
+
+1. Run expo doctor command using `pnpm run doctor`
+2. Analyze the check results and provide an explanation of what we need to do to fix the issues
+3. Run commands to fix the issues in case there are any
+4. Run expo doctor command again to check if the issues are fixed
+5. If the issues is fixed, make sure to commit changes for package.json and pnpm-lock.yaml with the message `git add package.json pnpm-lock.yaml && git commit -m "fix(deps): expo doctor issues"`
diff --git a/prompts/image-to-components.md b/prompts/image-to-components.md
@@ -0,0 +1,143 @@
+You are an expert in TypeScript, React Native, Expo, and Mobile UI development with Nativewind.
+
+Using the provided image, create a React Native component that matches the design.
+
+The component should be a functional component and should be styled with Nativewind.
+
+Follow the following steps:
+
+1. Layout Analysis:
+
+   - Describe the main layout structure you observe in the image
+   - Identify key UI components (buttons, cards, lists, etc.)
+   - Identify components from `@/components/ui` we can use to build the layout if needed
+   - Note any specific spacing, alignment, or positioning patterns
+
+2. Component Implementation:
+
+   - Use Nativewind for styling
+   - Use shared components from `@/components/ui` in case you need them
+   - Component should be accessible and follow the accessibility best practices
+   - Prefer using colors from tailwind config
+   - For images, use a placeholder image from `@assets/images/placeholder.png`
+   - Animated View doesn't support `className` prop, so you need to use `style` prop instead
+
+## Example
+
+Here is a example of how to write the component:
+
+```tsx
+import * as React from 'react';
+
+import { Text, View, Image, SavaAreaView } from '@/components/ui';
+
+// Props should be defined in the top of the component
+type TitleProps = {
+  text: string;
+};
+
+export function Title({ text }: TitleProps) {
+  return (
+    <View className="flex-row items-center justify-center  py-4 pb-2">
+      <Text className="pr-2 text-2xl">{text}</Text>
+      <View className="h-[2px] flex-1 bg-neutral-300" />
+      <Image
+        source={require('@assets/images/placeholder.png')}
+        style={{ width: 24, height: 24 }}
+        contentFit="contain"
+      />
+    </View>
+  );
+}
+```
+
+- If the screen is a form, create a form component that uses `react-hook-form` and `zod` to validate the form data and handle the form submission using the `onSubmit` prop and a console log of the form data for debugging
+
+Here is an example of how to write the form component:
+
+```tsx
+import { zodResolver } from '@hookform/resolvers/zod';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import * as z from 'zod';
+
+import { Button, ControlledInput, Text, View } from '@/components/ui';
+
+const schema = z.object({
+  name: z.string().optional(),
+  email: z
+    .string({
+      required_error: 'Email is required',
+    })
+    .email('Invalid email format'),
+  password: z
+    .string({
+      required_error: 'Password is required',
+    })
+    .min(6, 'Password must be at least 6 characters'),
+});
+
+export type FormType = z.infer<typeof schema>;
+
+export type LoginFormProps = {
+  onSubmit?: SubmitHandler<FormType>;
+};
+
+export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => {
+  const { handleSubmit, control } = useForm<FormType>({
+    resolver: zodResolver(schema),
+  });
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior="padding"
+      keyboardVerticalOffset={10}
+    >
+      <View className="flex-1 justify-center p-4">
+        <View className="items-center justify-center">
+          <Text
+            testID="form-title"
+            className="pb-6 text-center text-4xl font-bold"
+          >
+            Sign In
+          </Text>
+
+          <Text className="mb-6 max-w-xs text-center text-gray-500">
+            Welcome! 👋 This is a demo login screen! Feel free to use any email
+            and password to sign in and try it out.
+          </Text>
+        </View>
+
+        <ControlledInput
+          testID="name"
+          control={control}
+          name="name"
+          label="Name"
+        />
+
+        <ControlledInput
+          testID="email-input"
+          control={control}
+          name="email"
+          label="Email"
+        />
+        <ControlledInput
+          testID="password-input"
+          control={control}
+          name="password"
+          label="Password"
+          placeholder="***"
+          secureTextEntry={true}
+        />
+        <Button
+          testID="login-button"
+          label="Login"
+          onPress={handleSubmit(onSubmit)}
+        />
+      </View>
+    </KeyboardAvoidingView>
+  );
+};
+```
diff --git a/prompts/svg-icon.md b/prompts/svg-icon.md
@@ -0,0 +1,42 @@
+You are an expert in TypeScript, Expo, nativeWind and React Native
+
+You are given an svg icon as string file or url and you are tasked with creating a react native component for it.
+
+You should follow the following steps:
+
+1. Analyze the svg icon and create a react native component for it
+2. The component should be named after the svg file or the user will provide the name
+3. The component should be placed in the src/components/ui/icons folder
+4. The component should be exported in the src/components/ui/icons/index.ts file
+
+Here is an example of how to create a react native component for an svg icon:
+
+```tsx
+import * as React from 'react';
+import Svg, { Path, type SvgProps } from 'react-native-svg';
+
+export function ArrowLeft({
+  color = 'white',
+  size = 24,
+  ...props
+}: SvgProps & { size?: number }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" {...props}>
+      <Path
+        d="m12 19-7-7 7-7"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <Path
+        d="M19 12H5"
+        stroke={color}
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}
+```
diff --git a/prompts/write-unit-tests.md b/prompts/write-unit-tests.md
@@ -0,0 +1,95 @@
+You are an expert in TypeScript, React Native, Expo, Testing with Jest and React Native testing library.
+
+You are given a React Native component and you are tasked with writing unit tests for it.
+
+## Steps
+
+Follow the following steps one by one:
+
+1. Component Analysis:
+   Before writing tests, analyze your component by answering these questions:
+
+   - What is the primary purpose of this component?
+   - What props does it accept?
+   - What user interactions does it handle?
+   - What state management does it use?
+   - What external dependencies does it have?
+
+2. Extract and document all possible scenarios for testing while following the Testing Hierarchy:
+
+   - Test basic rendering first
+   - Test props and their effects
+   - Test user interactions
+   - Test state changes
+   - Test error handling
+   - Test edge cases
+
+3. Write the unit tests while following the guidelines of React Native testing library and Jest and make sure:
+
+   - Test file should be named like `component-name.test.tsx`
+   - Use meaningful test descriptions
+   - Keep tests focused and isolated
+   - Use proper cleanup in afterEach/afterAll blocks
+   - Add testID props for reliable element selection
+   - Test both success and failure scenarios
+   - Avoid testing implementation details
+   - Avoid using multiple assertions within a waitFor callback
+   - While mocking functions, make sure to mock the function with the correct type and arguments
+
+4. Run the tests for the file with test coverage: `pnpm test <component-name> -- --coverage --coverageReporters="text"`
+
+5. Check Tests Results and Coverage:
+
+   - If the tests fail, analyze the issue and fix it.
+   - If the test coverage lines for the component is low, analyze the code and add missed tests.
+
+## Example
+
+Here is an example of how a unit tests should look like:
+
+```tsx
+import React from 'react';
+
+import { cleanup, screen, setup, waitFor } from '@/lib/test-utils';
+afterEach(cleanup);
+
+const onSubmitMock: jest.Mock<LoginFormProps['onSubmit']> = jest.fn();
+
+describe('ComponentName', () => {
+  // Setup section
+  beforeAll(() => {
+    // Global setup
+  });
+
+  beforeEach(() => {
+    // Reset mocks and state
+    jest.clearAllMocks();
+  });
+
+  // Test cases grouped by functionality
+  describe('Rendering', () => {
+    test('renders correctly with default props', async () => {
+      setup(<ComponentName />);
+      expect(await screen.findByTestId('component-name')).toBeOnTheScreen();
+    });
+    test('renders correctly with custom props', async () => {});
+  });
+
+  describe('Interactions', () => {
+    test('handles user input correctly', async () => {
+      const { user } = setup(<ComponentName />);
+      const input = screen.getByTestId('input-id');
+      await user.type(input, 'test');
+      expect(input).toHaveValue('test');
+    });
+    test('triggers appropriate callbacks', async () => {});
+  });
+
+  describe('State Management', () => {
+    test('updates state correctly', async () => {});
+    test('handles side effects', async () => {});
+  });
+});
+```
+
+Refer to the official documentation of the React Native Testing Library and Jest for more information: https://callstack.github.io/react-native-testing-library/
