feat: 🎸 add perfectionnist to eslint config

.markdownlint.jsonc

@@ -0,0 +1,6 @@
+{
+ "MD013": false, // https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md
+ "MD033": {
+ "allowed_elements": ["img", "table"]
+ }
+}

challenges/ecosystem/01.md

@@ -59,7 +59,7 @@ Example:
 ... paste an example result here
 ```
 
-Feel free to copy/paste some [React Native snippets from this list](https://davidl.fr/pattern).
+Feel free to copy/paste some [React Native snippets from this list](https://davidl.fr/snippets).
 
 ### React Native Snippets
 
@@ -69,7 +69,7 @@ Feel free to copy/paste some [React Native snippets from this list](https://davi
 code --install-extension dsznajder.es7-react-js-snippets
 ```
 
-- [ ] On your new `cheatcodes.md` write down [React Native components shortcuts](https://github.com/dsznajder/vs code-es7-javascript-react-snippets#react-native-components) you prefer (_Are you a `const` or a `function` person?_)
+- [ ] On your new `cheatcodes.md` write down [React Native components shortcuts](https://github.com/r5n-dev/vscode-react-javascript-snippets/blob/master/docs/Snippets.md#react-native-components) you prefer (_Are you a `const` or a `function` person?_).
 
 **🔭 Hint:** Using `ts` before `rn**` wil automatically add typescript definitions 🚀
 
@@ -81,9 +81,9 @@ code --install-extension dsznajder.es7-react-js-snippets
 code --install-extension nathanchapman.javascriptsnippets
 ```
 
-- [ ] add 3 [JavaScripts Snippets](https://github.com/nathanchapman/vs code-javascript-snippets) to your `cheatcodes.md`.
+- [ ] add 3 [JavaScripts Snippets](https://github.com/nathanchapman/vscode-javascript-snippets) to your `cheatcodes.md`.
 
-**🔭 Hint:** I use `map⇥` and `filter⇥` all the time.
+**🔭 Hint:** I use `fn⇥`, `map⇥` and `filter⇥` all the time.
 
 ### Turbo `console.log()`
 
@@ -134,7 +134,7 @@ In your `settings.json`:
 
 <img src="https://raw.githubusercontent.com/flexbox/react-native-bootcamp/main/challenges/ecosystem/autoDetectColorScheme.png" alt="VS Code theme for light and dark mode" />
 
-I use the theme [Night Owl](https://github.com/sdras/night-owl-vs code-theme)
+I use the theme [Night Owl](https://github.com/sdras/night-owl-vscode-theme)
 
 ```console
 code --install-extension sdras.night-owl

challenges/ecosystem/02.md

@@ -13,6 +13,8 @@
 - [ ] ❗ Commit your work if it's not already done.
 - [ ] Push your code to GitHub.
 
+You are going to create a `.eslintrc.js` file, here is a [preview of the one used on the spacecraft codebase](https://raw.githubusercontent.com/flexbox/react-native-bootcamp/main/hackathon/spacecraft/.eslintrc.js). We will create more or less the same with small steps.
+
 ## 👨‍🚀 Exercise 2
 
 ### [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) and [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) extensions
@@ -42,7 +44,7 @@ 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 
+### Setup ESLint
 
 - [ ] Setup ESLint in your project with the following command:
 
@@ -177,7 +179,7 @@ module.exports = {
  "trailingComma": "all",
  "tabWidth": 2, 
  "singleQuote": false,
- "endOfLine": "CRLF" // for windows users only
+ "endOfLine": "crlf" // for windows users only
 }
 ```
 
@@ -273,10 +275,6 @@ In our case `cargo_capacity`, `cost_in_credits` are not using `camelCase` and we
 
 ## 👽 Bonus
 
-### Avoid data layer issues
-
-- [ ] Install [TanStack Query ESLint plugin](https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query).
-
 ### Share your settings with your team
 
 You can share your VSCode settings with your team by adding a `.vscode` folder at the root of your project with the following content.
@@ -296,3 +294,7 @@ This will make sure everyone in your team is using the same settings.
 - [ ] create a `.vscode` folder.
 - [ ] create a `settings.json` file.
 - [ ] Add the content above.
+
+### Avoid data layer issues
+
+- [ ] Install [TanStack Query ESLint plugin](https://tanstack.com/query/latest/docs/eslint/eslint-plugin-query).

challenges/ecosystem/05.md

@@ -216,7 +216,10 @@ Now you can run `npm run test:watch` to watch your files and run tests automatic
 - https://reactnativetesting.io/
 - https://github.com/vanGalilea/react-native-testing?tab=readme-ov-file#covered-examples-
 
-
 ### 👽 Bonus
 
-- [ ] Check the [React Native Testing Library Cookbook](https://callstack.github.io/react-native-testing-library/cookbook/index) and add a new test to your component.
+- [ ] Check the [React Native Testing Library Cookbook](https://callstack.github.io/react-native-testing-library/cookbook/index) and add a new test to your component.
+
+### Improve your ESLint setup
+
+- [ ] Install [eslint-plugin-testing-library](https://callstack.github.io/react-native-testing-library/docs/start/quick-start#eslint-plugin)

challenges/foundation/04.md

@@ -70,7 +70,8 @@ We will use `JSON.stringify()` here to render a `string` version of the data.
 function App() {
  return (
  // <LoginScreen />
- <TermsScreen />
+ <StarshipFeedScreen />
+ // <TermsScreen />
  );
 };
 ```

hackathon/spacecraft/.eslintrc.js

@@ -2,49 +2,58 @@ 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:react/jsx-runtime", // Support for React 17 JSX
  "plugin:prettier/recommended", // Prettier recommended rules
+ "plugin:perfectionist/recommended-natural-legacy",
+ ],
+ overrides: [
+ {
+ // Test files only
+ extends: ["plugin:testing-library/react"],
+ files: ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
+ },
  ],
- plugins: ["react", "react-native", "simple-import-sort"], // add React and React Native plugins
+ parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+ plugins: [
+ "react",
+ "react-native",
+ "perfectionist", // Keep only 'perfectionist'
+ ],
+ root: true, // Make sure eslint picks up the config at the root of the directory
  rules: {
- camelcase: "off", // disable camelcase rule
- "@typescript-eslint/no-explicit-any": "warn", // detect usage of `any` type
- "prettier/prettier": [
- // Prettier rules
- "warn",
+ "@typescript-eslint/no-explicit-any": "warn", // Detect usage of `any` type
+ "@typescript-eslint/no-unused-vars": "warn", // Detect unused variables
+ camelcase: "off", // Disable camelcase rule
+ "perfectionist/sort-imports": "error", // Perfectionist import sorting https://perfectionist.dev/guide/introduction
+ "perfectionist/sort-interfaces": ["error"], // Perfectionist interfaces sorting
+ "perfectionist/sort-objects": [
+ "error",
  {
- usePrettierrc: true,
+ ignorePattern: ["useQuery*", "queries*", "useMutation*", "mutations*"],
+ type: "natural",
  },
  ],
- "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": [
+ "prettier/prettier": [
  "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.
- ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
- ],
+ usePrettierrc: true,
  },
  ],
+ "react/no-unescaped-entities": "off",
+ "react-native/no-color-literals": 2, // Enforce color literals are not used
+ "react-native/no-raw-text": 0, // Detect raw text outside of Text component
+ "react-native/no-unused-styles": 2, // Detect unused StyleSheet rules
+ "react-native/sort-styles": 2, // Enforce style definitions are sorted
+ },
+ settings: {
+ perfectionist: {
+ partitionByComment: true,
+ type: "line-length",
+ },
  },
 };

hackathon/spacecraft/App.tsx

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

hackathon/spacecraft/api/types.d.ts

@@ -1,5 +1,4 @@
 export interface StarshipProps {
- MGLT?: string;
  cargo_capacity?: string;
  consumables?: string;
  cost_in_credits?: string;
@@ -11,6 +10,7 @@ export interface StarshipProps {
  length?: string;
  manufacturer?: string;
  max_atmosphering_speed?: string;
+ MGLT?: string;
  model: string;
  name: string;
  passengers?: string;
@@ -20,20 +20,20 @@ export interface StarshipProps {
 }
 
 interface PeopleProps {
- name: string;
- height: string;
- mass: string;
- hair_color: string;
- skin_color: string;
- eye_color: string;
  birth_year: string;
+ created: string;
+ edited: string;
+ eye_color: string;
+ films: string[];
  gender: string;
+ hair_color: string;
+ height: string;
  homeworld: string;
- films: string[];
+ mass: string;
+ name: string;
+ skin_color: string;
  species: string[];
- vehicles: string[];
  starships: string[];
- created: string;
- edited: string;
  url: string;
+ vehicles: string[];
 }

hackathon/spacecraft/app.config.js

@@ -1,64 +1,64 @@
 module.exports = {
- name: "spacecraft",
- description: "Learning materials for the `react-native-bootcamp` repository.",
- slug: "spacecraft",
- owner: "weshipit",
- version: "1.0.2",
- orientation: "portrait",
- icon: "./assets/icon.png",
- splash: {
- image: "./assets/splash.png",
- resizeMode: "contain",
- backgroundColor: "#ffffff",
- },
- updates: {
- fallbackToCacheTimeout: 0,
- url: "https://u.expo.dev/012accc3-4ce5-4bae-9f4d-2f842489f07a",
- },
- assetBundlePatterns: ["**/*"],
- ios: {
- supportsTablet: true,
- bundleIdentifier: "weshipit.today.spacecraft",
- appStoreUrl:
- "https://apps.apple.com/fr/app/retail-shake-scanner/id1234567890",
- },
  android: {
  adaptiveIcon: {
- foregroundImage: "./assets/adaptive-icon.png",
  backgroundColor: "#FFFFFF",
+ foregroundImage: "./assets/adaptive-icon.png",
  },
  package: "weshipit.today.spacecraft",
  playStoreUrl:
  "https://play.google.com/store/apps/details?id=weshipit.today.spacecraft",
  },
- web: {
- favicon: "./assets/favicon.png",
- },
+ assetBundlePatterns: ["**/*"],
+ description: "Learning materials for the `react-native-bootcamp` repository.",
  extra: {
- storybookEnabled: process.env.STORYBOOK_ENABLED,
  eas: {
  projectId: "012accc3-4ce5-4bae-9f4d-2f842489f07a",
  },
+ storybookEnabled: process.env.STORYBOOK_ENABLED,
+ },
+ icon: "./assets/icon.png",
+ ios: {
+ appStoreUrl:
+ "https://apps.apple.com/fr/app/retail-shake-scanner/id1234567890",
+ bundleIdentifier: "weshipit.today.spacecraft",
+ supportsTablet: true,
  },
+ name: "spacecraft",
+ orientation: "portrait",
+ owner: "weshipit",
  plugins: [
  [
  "app-icon-badge",
  {
  // enable/ disable the plugin based on the environment (usually disabled for production builds)
- enabled: process.env.ENVIRONMENT === "production" ? false : true,
  badges: [
  {
+ background: "#FF0000", // by default it will be black and we are only supporting hex format for colors
+ color: "white", // by default it will be white and the only color supported for now is white and black
  text: process.env.ENVIRONMENT || "unkown", // banner text
  type: "banner", // banner or ribbon
- color: "white", // by default it will be white and the only color supported for now is white and black
- background: "#FF0000", // by default it will be black and we are only supporting hex format for colors
  },
  {
  text: process.env.version,
  type: "ribbon",
  },
  ],
+ enabled: process.env.ENVIRONMENT === "production" ? false : true,
  },
  ],
  ],
+ slug: "spacecraft",
+ splash: {
+ backgroundColor: "#ffffff",
+ image: "./assets/splash.png",
+ resizeMode: "contain",
+ },
+ updates: {
+ fallbackToCacheTimeout: 0,
+ url: "https://u.expo.dev/012accc3-4ce5-4bae-9f4d-2f842489f07a",
+ },
+ version: "1.0.2",
+ web: {
+ favicon: "./assets/favicon.png",
+ },
 };

hackathon/spacecraft/babel.config.js

@@ -1,7 +1,6 @@
 module.exports = function (api) {
  api.cache(true);
  return {
- presets: ["babel-preset-expo"],
  env: {
  production: {
  plugins: ["transform-remove-console", "react-native-paper/babel"],
@@ -10,5 +9,6 @@ module.exports = function (api) {
  plugins: [
  "react-native-reanimated/plugin", // order matters
  ],
+ presets: ["babel-preset-expo"],
  };
 };

hackathon/spacecraft/metro.config.js

@@ -1,8 +1,7 @@
 // metro.config.js
-const path = require("path");
-
-const { getDefaultConfig } = require("expo/metro-config");
 const { generate } = require("@storybook/react-native/scripts/generate");
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
 
 generate({
  configPath: path.resolve(__dirname, "./.storybook"),