[FS-295]: Cycle 81 Maintenance (#141)

This PR cycles 81 maintenance.

.eslintrc.js → .eslintrc.cjs

@@ -24,5 +24,11 @@ module.exports = init({
         'node/prefer-global/buffer': 'off',
       },
     },
+    {
+      files: ['./app/**/*.tsx'],
+      rules: {
+        'react/function-component-definition': 'off',
+      },
+    },
   ],
 });

.github/workflows/CI.yml

@@ -16,28 +16,24 @@ jobs:
     timeout-minutes: 10
 
     steps:
-      - uses: actions/checkout@v3
-
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
+      - uses: actions/checkout@v4
 
       - uses: actions/setup-node@v3
         with:
-          node-version-file: 'package.json'
-          cache: 'pnpm'
+          node-version: 20
+          cache: 'npm'
 
       - name: Install dependencies
-        run: pnpm install
+        run: npm install
 
       - name: Lint and Format
-        run: pnpm run lint:ci
+        run: npm run lint:ci
 
       - name: Build
-        run: pnpm run build
+        run: npm run build
 
       - name: Test
-        run: pnpm run test:unit
+        run: npm run test:unit
 
   chromatic:
     runs-on: ubuntu-latest
@@ -55,23 +51,16 @@ jobs:
       APP_HASURA_ADMIN_SECRET: ${{ secrets.APP_HASURA_ADMIN_SECRET }}
 
     steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
-          # NOTE: required because https://www.chromatic.com/docs/github-actions#support-for-codeactionscheckoutv2code-and-above
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-
       - uses: actions/setup-node@v3
         with:
-          node-version-file: 'package.json'
-          cache: 'pnpm'
+          node-version: 20
+          cache: 'npm'
 
-      - name: Install dependencies
-        run: pnpm install
+      - run: npm install
 
       - name: Deploy Chromatic
         uses: chromaui/action@v1
@@ -95,29 +84,31 @@ jobs:
       NODE_TLS_REJECT_UNAUTHORIZED: 0
 
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v3
         with:
-          version: 8
+          node-version: 20
+          cache: 'npm'
 
       - name: Run E2E tests
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@v6
+        env:
+          PORT: 5173
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          CYPRESS_PROJECT_ID: ${{ secrets.CYPRESS_PROJECT_ID }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CYPRESS_RECORD_VIDEO: true
+
         with:
-          start: pnpm exec vite --port ${{ env.PORT }} --host 127.0.0.1
-          build: pnpm run build
-          wait-on: https://127.0.0.1:${{ env.PORT }}
+          start: npx vite --host 127.0.0.1
+          wait-on: https://127.0.0.1:5173
           wait-on-timeout: 20
           browser: chrome
-
-        env:
-          PORT: 3002
-          CYPRESS_RECORD_KEY: ${{ vars.CYPRESS_RECORD_KEY }}
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          record: true
 
       - name: Run Component tests
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@v6
         with:
           install: false
           component: true

.npmrc

@@ -1,3 +1,2 @@
 save-exact=true
 update-notifier=false
-legacy-peer-deps=true

.storybook/main.ts

@@ -1,13 +1,15 @@
 import { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
-  stories: ['../app/**/*.stories.tsx', '../libs/design/**/*.stories.tsx'],
+  stories: ['../libs/**/*.stories.tsx'],
   addons: [
     '@storybook/addon-essentials',
     'storybook-addon-apollo-client',
+    '@chromatic-com/storybook',
   ],
   framework: '@storybook/react-vite',
-  docs: {
-    autodocs: false,
+  docs: {},
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
   },
 };
 export default config;

.storybook/preview.tsx

@@ -2,17 +2,17 @@ import { MockedProvider } from '@apollo/client/testing';
 import { Notifications } from '@mantine/notifications';
 import { Decorator, Parameters, Preview } from '@storybook/react';
 import {
-  ReactLocation,
-  Router,
+  RouterProvider,
   createMemoryHistory,
-} from '@tanstack/react-location';
+  createRootRoute,
+  createRouter,
+} from '@tanstack/react-router';
 import 'dayjs/locale/fa';
 import React from 'react';
 import { ThemeProvider } from '../libs/design';
 import '../libs/zod-addons/monkeyPatchZod';
 
 const parameters: Parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     expanded: true,
     matchers: {
@@ -26,22 +26,27 @@ const parameters: Parameters = {
 const decorators: Decorator[] = [
   (Story, { args }) => {
     const router = args.router as any;
-    const { layout, ...routes } = args.router ?? ({} as any);
-    const Layout = layout ?? React.Fragment;
-    const location = new ReactLocation({
-      history: createMemoryHistory({ initialEntries: [router?.route ?? '/'] }),
-    });
-
-    return router ? (
-      <Router routes={[routes]} location={location}>
-        <Layout>
-          <Story />
-        </Layout>
-      </Router>
-    ) : (
-      <Router routes={[]} location={location}>
-        <Story />
-      </Router>
+    const Layout = router?.layout ?? React.Fragment;
+    return (
+      <RouterProvider
+        router={createRouter({
+          context: {
+            getTitle: () => router.context?.getTitle() ?? '',
+          },
+          history: createMemoryHistory({
+            initialEntries: [router?.route ?? '/'],
+          }),
+          routeTree: createRootRoute({
+            component: () => (
+              <Layout>
+                <Story />
+              </Layout>
+            ),
+            errorComponent: () => <Story />,
+          }),
+        })}
+        defaultComponent={() => <Story />}
+      ></RouterProvider>
     );
   },
   Story => (

@types/index.d.ts

@@ -4,4 +4,5 @@
 /// <reference path="./mantine.d.ts" />
 /// <reference path="./svg.d.ts" />
 /// <reference path="./vite-env.d.ts" />
+/// <reference path="./router.d.ts" />
 /// <reference types="@total-typescript/ts-reset" />

@types/mantine.d.ts

@@ -1,5 +1,3 @@
-import type { Tuple } from '@mantine/core';
-
 import type { Palette } from '../libs/design/theme/palette';
 
 type DefaultMantineColors =
@@ -25,6 +23,6 @@ type Colors = IndexifyColor<Palette | 'transparent'>;
 
 declare module '@mantine/core' {
   export interface MantineThemeColorsOverride {
-    colors: Record<Colors, Tuple<string, 10>>;
+    colors: Record<Colors, MantineColorsTuple>;
   }
 }

@types/router.d.ts

@@ -0,0 +1,10 @@
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof import('../app/main').router;
+  }
+  type AllRouteIds = import('@tanstack/react-router').RouteIds<
+    typeof import('../app/routeTree.gen').routeTree
+  >;
+}
+
+export {};

README.md

@@ -40,9 +40,9 @@ The FullstacksJS team is monitoring for pull requests. We will review your pull
 Before submitting a pull request, please make sure the following is done:
 
 - Fork/Clone the repository and create your feature branch from dev.
-- Run `pnpm install` to have all dependencies and husky hooks needed for development.
-- Run `pnpm run codegen` to have latest API types.
-- To start development run `pnpm start`.
+- Run `npm install` to have all dependencies and husky hooks needed for development.
+- Run `npm run codegen` to have latest API types.
+- To start development run `npm start`.
 - If you've fixed a bug or added code that should be tested, add tests, please.
 - Create a PR (You can use `./scripts/pr` to create one).
 
@@ -81,9 +81,9 @@ The project contains multiple modules which have their specific responsibilities
 To start the app first set the envs as described in the [envs section](#envs) then run:
 
 ```bash
-pnpm install
-pnpm run codegen
-pnpm run dev
+npm install
+npm run codegen
+npm run dev
 ```
 
 > If you're using [VSCode][vscode] you can install the [Apollo Graphql][apollo-graphql-extension] extension to get features like autocomplete in your graphql queries
@@ -95,7 +95,7 @@ This project uses [GraphQL Code Generator][codegen] to generate types and interf
 to generate the latest type from the API you need to have (a proper environment)[#Envs] in place and run:
 
 ```bash
-pnpm run codegen
+npm run codegen
 ```
 
 ### Verify
@@ -107,47 +107,47 @@ The verify command runs all tests to make sure that your changes are working.
 To build the app just run:
 
 ```bash
-pnpm run build
+npm run build
 ```
 
 ### Lint
 
 To run the linter to auto-fix all the problems run:
 
 ```bash
-pnpm run lint
+npm run lint
 ```
 
 ### Test
 
 To run the unit tests run:
 
 ```bash
-pnpm run test:unit
+npm run test:unit
 ```
 
 To run e2e tests you need to have the dev server running at configured port and run:
 
 ```bash
-pnpm run test:e2e
+npm run test:e2e
 ```
 
 If you want only to run a specific e2e test based on a pattern you can run the `test:e2ep` command:
 
 ```bash
-pnpm run test:e2ep [PATTERN]
+npm run test:e2ep [PATTERN]
 ```
 
 if the pattern matches more than one file it will still run all of them, for example, the following command will run the `createHousehold.cy.ts` and `householdList.cy.ts` test
 
 ```bash
-pnpm run test:e2ep household
+npm run test:e2ep household
 ```
 
 To run component tests run:
 
 ```bash
-pnpm run test:component
+npm run test:component
 ```
 
 ### Storybook
@@ -157,15 +157,15 @@ pnpm run test:component
 To run the storybook dev server run:
 
 ```bash
-pnpm run storybook
+npm run storybook
 ```
 
 ### Spell Check
 
 To find spelling errors just run
 
 ```bash
-pnpm run spell
+npm run spell
 ```
 
 And if you want to add a new word so that it won't count as a spelling error, just add it to the `configs/cspell/charity.en.txt` or `configs/cspell/charity.en.txt` and separate it with a new line