Merge pull request #239 from flexbox/feat/sdk51

fix: 🐛 upgrade to sdk 51

Author: MatthysDev

challenges/ecosystem/02.md

@@ -42,30 +42,41 @@ Prettier is an opinionated code formatter. It enforces a consistent style by par
 
 ![Prettier format on save preview on VS Code](https://raw.githubusercontent.com/flexbox/react-native-workshop/main/challenges/ecosystem/format-on-save.png)
 
-### Setup ESLint rules for React Native project
 
-- [ ] Install ESLint as a dev dependency.
+### Setup ESLint in your expo project
 
 ```console
-npm install --dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser
-# same as `yarn add --dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser`
+npx expo lint
 ```
 
-- [ ] Create a `.eslintrc.js` file at the root of your project with the following content: (you can use `touch .eslintrc.js` from the terminal).
+You can lint your code manually by rerunning `npx expo lint` in your terminal.
 
-```javascript
-// .eslintrc.js
+- [ ] Setup ESLint in your project.
+- [ ] Run `npx expo lint` in your terminal.
 
+### Prettier
+
+For other packages managers
+```console
+npx expo install -- --save-dev prettier eslint-config-prettier eslint-plugin-prettier
+```
+
+For yarn
+```console
+yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
+```
+
+- [ ] add the dependencies to your project.
+
+- [ ] Update your `eslintrc.js` file to add the following rules:
+
+```javascript
 module.exports = {
-  env: {
-    node: true
+  extends: ["expo", "prettier"],
+  plugins: ["prettier"],
+  rules: {
+    "prettier/prettier": "warn",
   },
-  parser: "@typescript-eslint/parser",
-  root: true,
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-  ],
 };
 ```
 
@@ -113,7 +124,10 @@ We are making progress, but we are not done yet. We need to add rules for React
 - [ ] Install the following plugins
 
 ```console
-npm install --dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-native eslint-plugin-simple-import-sort
+npm install --dev prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react
+```
+```console
+yarn add -D prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react 
 ```
 
 - [ ] Update your `.eslintrc.js` file to add the following rules:
@@ -134,37 +148,15 @@ module.exports = {
     "plugin:react/jsx-runtime", // support for React 17 JSX
     "plugin:prettier/recommended" // Prettier recommended rules
   ],
-  plugins: ["react", "react-native", "simple-import-sort"], // add React and React Native plugins
+  plugins: ["react"], // add React and React Native plugins
   rules: {
     "prettier/prettier": [ // Prettier rules
       "warn",
       {
         usePrettierrc: true
       }
     ],
-    "react-native/no-color-literals": 2, // enforce color literals are not used
-    "react-native/no-unused-styles": 2, // detect unused StyleSheet rules
-    "react-native/no-raw-text": 0, // detect raw text outside of Text component
-    "react-native/sort-styles": 2, // enforce style definitions are sorted
     "@typescript-eslint/no-unused-vars": "warn", // detect unused variables
-    "simple-import-sort/exports": "warn", // enforce sorting exports within module
-    "simple-import-sort/imports": [
-      "warn",
-      {
-        groups: [
-          // Side effect imports.
-          ["^\\u0000"],
-          // Packages `react` related packages come first.
-          ["^react", "^@?\\w"],
-          // Environment variables
-          ["^(@env)(/.*|$)"],
-          // Parent imports. Put `..` last.
-          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-          // Other relative imports. Put same-folder imports and `.` last.
-          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
-        ]
-      }
-    ]
   }
 };
 ```
@@ -185,11 +177,80 @@ module.exports = {
 }
 ```
 
-- [ ] Run `--fix` to automatically fix your errors.
 - [ ] if you encounter a difference between errors on your terminal and VSCode, reload VSCode with `⌘ + ⇧ + P` "Developer: Reload Window".
 
 ### Updating ESLint rules
 
+We want to add some rules to our ESLint configuration.
+
+```console
+npm install --dev eslint-plugin-react-native
+```
+```console
+yarn add -D eslint-plugin-react-native
+```
+
+- [ ] Update your `.eslintrc.js` file to add the following react-native rules:
+
+```json
+// .eslintrc.js
+
+{
+  plugins: ["react", "react-native"],
+  "rules": {
+    ...
+    "react-native/no-color-literals": 2, // enforce color literals are not used
+    "react-native/no-unused-styles": 2, // detect unused StyleSheet rules
+    "react-native/no-raw-text": 0, // detect raw text outside of Text component
+    "react-native/sort-styles": 2, // enforce style definitions are sorted
+  },
+}
+```
+
+- [ ] Lint your code and push your changes to GitHub.
+
+We now want to sort our imports automatically. We can use the `simple-import-sort` plugin.
+
+```console
+npm install --dev eslint-plugin-simple-import-sort
+```
+```console
+yarn add -D eslint-plugin-simple-import-sort
+```
+
+- [ ] Update your `.eslintrc.js` file to add the following import rules:
+
+```json
+// .eslintrc.js
+
+{
+  "rules": {
+    plugins: ["react", "react-native", "eslint-plugin-simple-import-sort"],
+    ...
+    "simple-import-sort/exports": "warn", // enforce sorting exports within module
+    "simple-import-sort/imports": [
+      "warn",
+      {
+        groups: [
+          // Side effect imports.
+          ["^\\u0000"],
+          // Packages `react` related packages come first.
+          ["^react", "^@?\\w"],
+          // Environment variables
+          ["^(@env)(/.*|$)"],
+          // Parent imports. Put `..` last.
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+        ]
+      }
+    ],
+  },
+}
+```
+
+- [ ] Lint your code and push your changes to GitHub.
+
 We have no control on the api data we are pulling from SWAPI. Sometimes we want to update our rules to reflect differences.
 
 In our case `cargo_capacity`, `cost_in_credits` are not using `camelCase` and we want to disable this rule.
@@ -202,12 +263,14 @@ In our case `cargo_capacity`, `cost_in_credits` are not using `camelCase` and we
 {
   "rules": {
     ...
-    "camelcase": "off", // disable camelcase rule
+    camelcase: "off", // disable camelcase rule
     "@typescript-eslint/no-explicit-any": "warn" // detect usage of `any` type
   },
 }
 ```
 
+- [ ] Lint your code and push your changes to GitHub.
+
 ## 👽 Bonus
 
 You can share your VSCode settings with your team by adding a `.vscode` folder at the root of your project with the following content:

hackathon/spacecraft/.eslintrc

@@ -0,0 +1,50 @@
+module.exports = {
+  env: {
+    node: true,
+  },
+  parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+  root: true, // make sure eslint picks up the config at the root of the directory
+  extends: [
+    "expo",
+    "eslint:recommended", // ESLint rules
+    "plugin:@typescript-eslint/recommended", // TypeScript rules
+    "plugin:react/recommended", // React rules
+    "plugin:react/jsx-runtime", // support for React 17 JSX
+    "plugin:prettier/recommended", // Prettier recommended rules
+  ],
+  plugins: ["react", "react-native", "simple-import-sort"], // add React and React Native plugins
+  rules: {
+    camelcase: "off", // disable camelcase rule
+    "@typescript-eslint/no-explicit-any": "warn", // detect usage of `any` type
+    "prettier/prettier": [
+      // Prettier rules
+      "warn",
+      {
+        usePrettierrc: true,
+      },
+    ],
+    "react-native/no-color-literals": 2, // enforce color literals are not used
+    "react-native/no-unused-styles": 2, // detect unused StyleSheet rules
+    "react-native/no-raw-text": 0, // detect raw text outside of Text component
+    "react-native/sort-styles": 2, // enforce style definitions are sorted
+    "@typescript-eslint/no-unused-vars": "warn", // detect unused variables
+    "simple-import-sort/exports": "warn", // enforce sorting exports within module
+    "simple-import-sort/imports": [
+      "warn",
+      {
+        groups: [
+          // Side effect imports.
+          ["^\\u0000"],
+          // Packages `react` related packages come first.
+          ["^react", "^@?\\w"],
+          // Environment variables
+          ["^(@env)(/.*|$)"],
+          // Parent imports. Put `..` last.
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
+          // Other relative imports. Put same-folder imports and `.` last.
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
+        ],
+      },
+    ],
+  },
+};

hackathon/spacecraft/.eslintrc.js

@@ -1,4 +1,8 @@
 {
+  "$schema": "http://json.schemastore.org/prettierrc",
   "semi": true,
+  "singleAttributePerLine": true,
+  "trailingComma": "all",
+  "tabWidth": 2,
   "singleQuote": false
-}
+}

hackathon/spacecraft/.prettierrc

@@ -1,6 +1,10 @@
 /* do not change this file, it is auto generated by storybook. */
 
-import { start } from "@storybook/react-native";
+import {
+  start,
+  prepareStories,
+  getProjectAnnotations,
+} from "@storybook/react-native";
 
 import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -36,14 +40,37 @@ const normalizedStories = [
   },
 ];
 
-// @ts-ignore
+declare global {
+  var view: ReturnType<typeof start>;
+  var STORIES: typeof normalizedStories;
+}
+
+const annotations = [
+  require("./preview"),
+  require("@storybook/react-native/dist/preview"),
+  require("@storybook/addon-actions/preview"),
+];
+
 global.STORIES = normalizedStories;
 
-export const view = start({
-  annotations: [
-    require("./preview"),
-    require("@storybook/react-native/dist/preview"),
-    require("@storybook/addon-actions/preview"),
-  ],
-  storyEntries: normalizedStories,
-});
+// @ts-ignore
+module?.hot?.accept?.();
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+  });
+} else {
+  const { importMap } = prepareStories({ storyEntries: normalizedStories });
+
+  global.view._preview.onStoriesChanged({
+    importFn: async (importPath: string) => importMap[importPath],
+  });
+
+  global.view._preview.onGetProjectAnnotationsChanged({
+    getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+  });
+}
+
+export const view = global.view;

hackathon/spacecraft/.storybook/storybook.requires.ts

@@ -1,8 +1,8 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import Constants from "expo-constants";
 import React from "react";
 import { NetworkProvider } from "react-native-offline";
 import { Provider as PaperProvider } from "react-native-paper";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import Constants from "expo-constants";
 
 import { AuthenticationProvider } from "~/context/Authentication";
 import { useAppearanceTheme } from "~/hooks/useAppearanceTheme";

hackathon/spacecraft/App.tsx

@@ -1,18 +1,18 @@
 // metro.config.js
-const path = require('path');
-const { getDefaultConfig } = require('expo/metro-config');
+const path = require("path");
 
-const { generate } = require('@storybook/react-native/scripts/generate');
+const { getDefaultConfig } = require("expo/metro-config");
+const { generate } = require("@storybook/react-native/scripts/generate");
 
 generate({
-  configPath: path.resolve(__dirname, './.storybook'),
+  configPath: path.resolve(__dirname, "./.storybook"),
 });
 
 /** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname);
 
 config.transformer.unstable_allowRequireContext = true;
 
-config.resolver.sourceExts.push('mjs');
+config.resolver.sourceExts.push("mjs");
 
-module.exports = config;
+module.exports = config;