[ZN-551] - setup plop

package.json

@@ -8,6 +8,7 @@
     "start": "react-native start",
     "start-cache": "react-native start --reset-cache",
     "test": "jest",
+    "plop": "plop",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "fix-nativewind": "npx patch-package",
     "e2e:build-android-debug": "detox build -c android.emu.debug",
@@ -65,6 +66,7 @@
     "jest": "^29.7.0",
     "metro-react-native-babel-preset": "0.77.0",
     "msw": "1.3.2",
+    "plop": "4.0.0",
     "prettier": "^2.4.1",
     "react-native-url-polyfill": "^1.3.0",
     "react-test-renderer": "18.2.0",

plop-templates/apiActions/apiActions.mutations.hbs

@@ -0,0 +1,10 @@
+import { AxiosInstance } from 'axios';
+
+import {
+  {{pascalCase name}}Response
+  // MUTATION_TYPE_IMPORTS
+} from './{{camelCase name}}.types';
+
+export const {{camelCase name}}Mutations = {
+  // MUTATION_FUNCTIONS_SETUP
+};

plop-templates/apiActions/apiActions.queries.hbs

@@ -0,0 +1,10 @@
+import { AxiosInstance } from 'axios';
+
+import {
+  {{pascalCase name}}Response
+  // QUERY_TYPE_IMPORTS
+} from './{{camelCase name}}.types';
+
+export const {{camelCase name}}Queries = {
+  // QUERY_FUNCTIONS_SETUP
+};

plop-templates/apiActions/apiActions.types.hbs

@@ -0,0 +1,2 @@
+export type {{pascalCase name}}Response = {}
+// API_ACTION_TYPES

plop-templates/apiMutation/apiMutation.hbs

@@ -0,0 +1,4 @@
+{{camelCase name}}: (client: AxiosInstance) => async (body: {{pascalCase name}}Payload) => {
+    return (await client.{{method}}<{{pascalCase name}}Response>(`{{path}}`, body)).data;
+  },
+  $1

plop-templates/apiMutation/apiMutation.types.hbs

@@ -0,0 +1,5 @@
+export type {{pascalCase name}}Payload = {};
+
+export type {{pascalCase name}}Response = {};
+
+$1

plop-templates/apiQuery/apiQuery.hbs

@@ -0,0 +1,4 @@
+{{camelCase name}}: (client: AxiosInstance) => async ({}: {{pascalCase name}}Payload) => {
+    return (await client.get<{{pascalCase name}}Response>(`{{path}}`)).data;
+  },
+  $1

plop-templates/apiQuery/apiQuery.types.hbs

@@ -0,0 +1,5 @@
+export type {{pascalCase name}}Payload = {};
+
+export type {{pascalCase name}}Response = {};
+
+$1

plop-templates/component/Component.hbs

@@ -0,0 +1,11 @@
+import { Text, View } from 'react-native';
+
+import { {{pascalCase name}}Props } from './{{pascalCase name}}.types';
+
+export const {{pascalCase name}} = ({}: {{pascalCase name}}Props) => {
+  return (
+    <View>
+      <Text>{{pascalCase name}}</Text>
+    </View>
+  );
+};

plop-templates/component/Component.test.hbs

@@ -0,0 +1,16 @@
+import { screen } from '@testing-library/react-native';
+import React from 'react';
+
+import { render } from 'tests';
+
+import { {{pascalCase name}} } from './{{pascalCase name}}';
+
+describe('{{pascalCase name}}', () => {
+  test('renders', async () => {
+    render(<{{pascalCase name}} />);
+
+    const element = await screen.findByText('{{pascalCase name}}');
+
+    expect(element).toBeOnTheScreen();
+  });
+});

plop-templates/component/Component.types.hbs

@@ -0,0 +1 @@
+export type {{pascalCase name}}Props = {};

plop-templates/context/Context.hbs

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+import { {{pascalCase name}}ContextValue } from './{{pascalCase name}}Context.types';
+
+export const {{pascalCase name}}Context = createContext<{{pascalCase name}}ContextValue | undefined>(undefined);

plop-templates/context/Context.test.hbs

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react-native';
+import { Text, View } from 'react-native';
+
+import { {{pascalCase name}}Context } from './{{pascalCase name}}Context';
+
+describe('{{pascalCase name}}Context', () => {
+  test('is undefined by default', () => {
+    render(
+      <{{pascalCase name}}Context.Consumer>
+        {(context) => (
+          <View>
+            <Text testID="context">{typeof context}</Text>
+          </View>
+        )}
+      </{{pascalCase name}}Context.Consumer>,
+      {
+        wrapper: ({ children }) => <>{children}</>,
+      },
+    );
+
+    expect(screen.getByTestId('context')).toHaveTextContent('undefined');
+  });
+});

plop-templates/context/Context.types.hbs

@@ -0,0 +1 @@
+export type {{pascalCase name}}ContextValue = {};

plop-templates/context/ContextController.hbs

@@ -0,0 +1,10 @@
+import { {{pascalCase name}}Context } from '../{{camelCase name}}Context/{{pascalCase name}}Context';
+import { {{pascalCase name}}ContextValue } from '../{{camelCase name}}Context/{{pascalCase name}}Context.types';
+
+import { {{pascalCase name}}ContextControllerProps } from './{{pascalCase name}}ContextController.types';
+
+export const {{pascalCase name}}ContextController = ({ children }: {{pascalCase name}}ContextControllerProps) => {
+  const value: {{pascalCase name}}ContextValue = {};
+
+  return <{{pascalCase name}}Context.Provider value={value}>{children}</{{pascalCase name}}Context.Provider>;
+}

plop-templates/context/ContextController.types.hbs

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export type {{pascalCase name}}ContextControllerProps = {
+  children: ReactNode;
+};

plop-templates/context/useContext.hbs

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+
+import { {{pascalCase name}}Context } from 'context/{{camelCase name}}/{{camelCase name}}Context/{{pascalCase name}}Context';
+
+export const use{{pascalCase name}} = () => {
+  const context = useContext({{pascalCase name}}Context);
+
+  if (context === undefined) {
+    throw new Error('{{pascalCase name}}Context must be within {{pascalCase name}}Provider');
+  }
+
+  return context;
+};

plop-templates/context/useContext.test.hbs

@@ -0,0 +1,17 @@
+import { renderHook } from '@testing-library/react-native';
+
+import { {{pascalCase name}}ContextController } from 'context/{{camelCase name}}/{{camelCase name}}ContextController/{{pascalCase name}}ContextController';
+
+import { use{{pascalCase name}} } from './use{{pascalCase name}}';
+
+describe('use{{pascalCase name}}', () => {
+  test('throws when context is unavailable', () => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const renderFn = () =>
+      renderHook(() => use{{pascalCase name}}(), {
+        wrapper: ({ children }) => <>{children}</>,
+      });
+    expect(renderFn).toThrow('{{pascalCase name}}Context must be within {{pascalCase name}}Provider');
+  });
+});

plop-templates/screen/Screen.hbs

@@ -0,0 +1,11 @@
+import { Text, View } from 'react-native';
+
+import { RootStackScreenProps } from 'navigations/Navigator.types';
+
+export const {{pascalCase name}} = ({ route, navigation }: RootStackScreenProps<'{{pascalCase name}}'>) => {
+  return (
+    <View>
+      <Text>{{pascalCase name}}</Text>
+    </View>
+  );
+};