Merge pull request #53 from rootstrap/upstream-to-pr/rev-f17813e

Upstream branch master (revision f17813e)

Author: fernandatoledo

.eslintrc.js

@@ -3,104 +3,77 @@ const path = require('path');
 module.exports = {
   // Configuration for JavaScript files
   extends: [
-    '@react-native-community',
-    'plugin:prettier/recommended',
-    'plugin:sonarjs/recommended-legacy',
+    'expo', 
+    'plugin:tailwindcss/recommended', 
+    'prettier'
   ],
-  plugins: ['unicorn', 'sonarjs'],
+  plugins: [
+    'unicorn', 
+    '@typescript-eslint',
+    'unused-imports',
+    'tailwindcss',
+    'simple-import-sort',
+    'sonarjs'
+  ],
+  parserOptions: {
+    project: './tsconfig.json',
+  },
   rules: {
     '@typescript-eslint/no-explicit-any': 'error',
-    'prettier/prettier': [
-      'error',
-      {
-        singleQuote: true,
-        endOfLine: 'auto',
-      },
-    ],
     'unicorn/filename-case': [
       'error',
       {
         case: 'kebabCase',
         ignore: ['/android', '/ios'],
       },
     ],
+    'max-params': ['error', 3], // Limit the number of parameters in a function to use object instead
+    'max-lines-per-function': ['error', 70],
+    'react/display-name': 'off',
+    'react/no-inline-styles': 'off',
+    'react/destructuring-assignment': 'off', // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
+    'react/require-default-props': 'off', // Allow non-defined react props as undefined
+    '@typescript-eslint/comma-dangle': 'off', // Avoid conflict rule between Eslint and Prettier
+    '@typescript-eslint/consistent-type-imports': [
+      'warn',
+      {
+        prefer: 'type-imports',
+        fixStyle: 'inline-type-imports',
+        disallowTypeAnnotations: true,
+      },
+    ], // Ensure `import type` is used when it's necessary
+    'import/prefer-default-export': 'off', // Named export is easier to refactor automatically
+    'import/no-cycle': ['error', { maxDepth: '∞' }],
+    'tailwindcss/classnames-order': [
+      'warn',
+      {
+        officialSorting: true,
+      },
+    ], // Follow the same ordering as the official plugin `prettier-plugin-tailwindcss`
+    'simple-import-sort/imports': 'error', // Import configuration for `eslint-plugin-simple-import-sort`
+    'simple-import-sort/exports': 'error', // Export configuration for `eslint-plugin-simple-import-sort`
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/array-type': 'off',
+    'tailwindcss/no-custom-classname': 'off',
+    'unused-imports/no-unused-imports': 'error',
+    'unused-imports/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      }
+    ],
     curly: [2, 'all'],
     'prefer-const': [
       'error',
       {
         destructuring: 'any',
       },
     ],
+    'object-shorthand': 'error'
   },
   overrides: [
-    // Configuration for TypeScript files
-    {
-      files: ['**/*.ts', '**/*.tsx', '**/*.js'],
-      plugins: [
-        '@typescript-eslint',
-        'unused-imports',
-        'tailwindcss',
-        'simple-import-sort',
-      ],
-      extends: [
-        'plugin:tailwindcss/recommended',
-        '@react-native-community',
-        'plugin:prettier/recommended',
-      ],
-      parserOptions: {
-        project: './tsconfig.json',
-      },
-      rules: {
-        'react/react-in-jsx-scope': 'off',
-        'react/jsx-uses-react': 'off',
-        'prettier/prettier': [
-          'error',
-          {
-            singleQuote: true,
-            endOfLine: 'auto',
-          },
-        ],
-        'max-params': ['error', 3], // Limit the number of parameters in a function to use object instead
-        'max-lines-per-function': ['error', 70],
-        'react/destructuring-assignment': 'off', // Vscode doesn't support automatically destructuring, it's a pain to add a new variable
-        'react/require-default-props': 'off', // Allow non-defined react props as undefined
-        '@typescript-eslint/comma-dangle': 'off', // Avoid conflict rule between Eslint and Prettier
-        '@typescript-eslint/consistent-type-imports': 'error', // Ensure `import type` is used when it's necessary
-        'import/prefer-default-export': 'off', // Named export is easier to refactor automatically
-        'tailwindcss/classnames-order': [
-          'warn',
-          {
-            officialSorting: true,
-          },
-        ], // Follow the same ordering as the official plugin `prettier-plugin-tailwindcss`
-        'simple-import-sort/imports': 'error', // Import configuration for `eslint-plugin-simple-import-sort`
-        'simple-import-sort/exports': 'error', // Export configuration for `eslint-plugin-simple-import-sort`
-        '@typescript-eslint/no-unused-vars': 'off',
-        'tailwindcss/no-custom-classname': 'off',
-        'unused-imports/no-unused-imports': 'error',
-        'unused-imports/no-unused-vars': [
-          'error',
-          {
-            argsIgnorePattern: '^_',
-            varsIgnorePattern: '^_',
-            caughtErrorsIgnorePattern: '^_',
-          },
-        ],
-        'no-restricted-imports': [
-          'error',
-          {
-            paths: [
-              {
-                name: 'react',
-                importNames: ['default'],
-                message: 'No need to import React',
-              },
-            ],
-          },
-        ],
-        curly: [2, 'all'],
-      },
-    },
     // Configuration for  translations files (i18next)
     {
       files: ['src/translations/*.json'],

docs/astro.config.mjs

@@ -190,6 +190,10 @@ export default defineConfig({
             },
           ],
         },
+        {
+          label: 'Libraries Recommendation',
+          link: '/libraries-recommendation',
+        },
         {
           label: 'CHANGELOG',
           link: '/changelog',

docs/src/content/docs/changelog.md

@@ -3,14 +3,7 @@ title: CHANGELOG
 description: New features, improvements, and bug fixes for the React Native / Expo Starter.
 head:
   - tag: title
-    content: Obytes Starter ChangeLog | React Native / Expo Starter
+    content: Rootstrap Starter ChangeLog | React Native / Expo Starter
 ---
 
-## V5.0.0
-
-- Upgrade to Expo 50
-- Switch to `expo-router` for navigation
-- Upgrade to NativeWind 4.0
-- Refactor `ui` and update common components to use NativeWind 4.0 with `tailwind-variants`
-- Add checkbox, radio, and switch components
-- Improve eas setup with PNPM
+For complete changelog, please check the [GitHub releases](https://github.com/rootstrap/react-native-template/releases) page.

docs/src/content/docs/getting-started/environment-vars-config.mdx

@@ -69,6 +69,10 @@ const _buildTimeEnv = {
 NEW_ENV_VAR=my-new-var
 ```
 
+::: note
+if you are not pushing env files to your repo(recomended), please make sure to check the [App releasing process](/ci-cd/app-releasing-process/#github-action-and-env-variables) to see how to create the env file on the fly before the prebuild script in the github actions.
+:::
+
 4. Make sure to run `pnpm prebuild` to load the new values.
 
 ```bash

docs/src/content/docs/libraries-recommendation.md

@@ -0,0 +1,47 @@
+---
+title: Libraries Recommendation
+description: React Native / Expo Libraries recommendation for the project based on use cases.
+head:
+  - tag: title
+    content: Libraries Recommendation | React Native / Expo Starter
+---
+
+The starter kit comes with a set of pre-installed and configured libraries. We recommend using these libraries for your project.
+
+Below, we'll list other libraries we often use in our projects. These aren't included in the starter because:
+
+1. They're for specific use cases.
+2. They need a lot of setup.
+
+This way, you can add them to your project only if you need them, keeping things simple to start with.
+
+### State Management:
+
+The starter kit comes with Zustand out of the box but if your application implements a lot of workflows, you might want to use [XState](https://xstate.js.org/) as it's more powerful on managing complex workflows and state machines.
+
+For example, if you have a workflow to create a new card for user and this workflow has a lot of steps and conditions, Zustand might not be the best choice as it's more designed for simple state management and XState is your best choice in this case.
+
+### Error Reporting:
+
+- [Sentry](https://sentry.io/welcome/): very popular solution for error reporting in the javascript ecosystem and has a great integration with Expo.
+
+### Notifications:
+
+There is no solution fit all for notifications, but based on your use case we would recommend one of the following:
+
+- [Expo Push Notifications](https://docs.expo.dev/push-notifications/overview/)
+- [OneSignal](https://onesignal.com/)
+
+### Analytics:
+
+- [PostHog](https://posthog.com/docs/libraries/react-native) : Easy to setup and use and has a great free tier.
+
+- [Google Analytics](https://rnfirebase.io/analytics/usage)
+
+### Charts:
+
+- [Victory Native](https://github.com/FormidableLabs/victory-native-xl)
+
+---
+
+For sure we are missing some great libraries here, so we count on your contribution to add them in the comments sections below.

env.js

@@ -1,3 +1,4 @@
+/* eslint-env node */
 /*
  * Env file to load and validate env variables
  * Be cautious; this file should not be imported into your source folder. TODO: Add an eslint rule to prevent this.
@@ -54,8 +55,14 @@ const isRunning = EXPO_RUN_COMMANDS.some((script) =>
 const shouldValidateEnv =
   (isBuilding && scriptIsEnvironmentDependant) || isRunning;
 
-const easEnvironmentFileVariable = `ENVIRONMENT_FILE_${APP_ENV.toUpperCase()}`;
-const easEnvironmentFilePath = process.env[easEnvironmentFileVariable];
+const environmentFiles = {
+  development: process.env.ENVIRONMENT_FILE_DEVELOPMENT,
+  qa: process.env.ENVIRONMENT_FILE_QA,
+  production: process.env.ENVIRONMENT_FILE_PRODUCTION,
+  staging: process.env.ENVIRONMENT_FILE_STAGING,
+};
+
+const easEnvironmentFilePath = environmentFiles[APP_ENV];
 const localEnvironmentFilePath = path.resolve(__dirname, `.env.${APP_ENV}`);
 
 const envPath = isEASBuild ? easEnvironmentFilePath : localEnvironmentFilePath;
@@ -191,7 +198,7 @@ if (shouldValidateEnv) {
   const parsedWholeEnv = wholeEnvSchema.safeParse(_wholeEnv);
 
   if (parsedWholeEnv.success === false) {
-    const envFile = isEASBuild ? easEnvironmentFileVariable : `.env.${APP_ENV}`;
+    const envFile = isEASBuild ? environmentFiles[APP_ENV] : `.env.${APP_ENV}`;
 
     const messages = [
       '❌ Invalid environment variables:',
@@ -208,7 +215,7 @@ if (shouldValidateEnv) {
 
     if (isEASBuild) {
       messages.push(
-        `\n☁️ For \x1b[1m\x1b[32mEAS Build\x1b[0m deployments, ensure the secret\x1b[1m\x1b[4m\x1b[31m${easEnvironmentFileVariable} \x1b[0m is defined in Project Secrets and has the proper environment file attached.`
+        `\n☁️ For \x1b[1m\x1b[32mEAS Build\x1b[0m deployments, ensure the secret\x1b[1m\x1b[4m\x1b[31m${environmentFiles[APP_ENV]} \x1b[0m is defined in Project Secrets and has the proper environment file attached.`
       );
     }
 

index.js

@@ -1,3 +1,5 @@
+import '@testing-library/react-native/extend-expect';
+
 // react-hook form setup for testing
 // @ts-ignore
 global.window = {};

setup.ts jest-setup.tssetup.ts renamed to jest-setup.ts

@@ -1,8 +1,7 @@
 module.exports = {
   preset: 'jest-expo',
   setupFilesAfterEnv: [
-    '@testing-library/react-native/extend-expect',
-    '<rootDir>/setup.ts',
+    '<rootDir>/jest-setup.ts',
   ],
   testMatch: ['**/?(*.)+(spec|test).ts?(x)'],
   collectCoverageFrom: [

jest.config.js

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 const { getDefaultConfig } = require('expo/metro-config');
 const { withNativeWind } = require('nativewind/metro');