[FS-254]: Cycle 33 Maintenance (#131)

This PR:
* Migrates to `pnpm`
* Upgrades dev dependencies
* Upgrades UI dependencies
* Syncs the color tokens with the design.
* Removes default Martine's colors
* Refactors the `EmptyState` component
* Fixes design inconsistencies.
* Adds non-destructive confirm modals. 
* Adds "neutral" badge variant.
* Implements the new Login design
* Syncs typography with the design
* Adds cspell eslint plugin
* Renames `createTestAttr` to `tid`

.cspell.json

@@ -17,6 +17,7 @@
   "dictionaries": ["charity-en", "charity-fa"],
   "ignorePaths": [
     "node_modules/",
+    "pnpm-lock.yaml",
     "dist/",
     "*.svg",
     "*.tsbuildinfo",

.eslintrc.js

@@ -1,6 +1,7 @@
 const { init } = require('@fullstacksjs/eslint-config/init');
 
 module.exports = init({
+  root: true,
   modules: {
     auto: true,
     esm: true,
@@ -9,10 +10,12 @@ module.exports = init({
       resolverProject: ['./tsconfig.json'],
     },
   },
-  root: true,
+  extends: ['plugin:@cspell/recommended'],
   rules: {
     // NOTE: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md#known-issueslimitations
     'react/no-unused-prop-types': 'off',
+    // NOTE: Lot of false positive in props
+    'react/jsx-no-leaked-render': 'off',
     'no-console': 'error',
   },
   overrides: [

.github/workflows/CI.yml

@@ -18,25 +18,26 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
       - uses: actions/setup-node@v3
         with:
           node-version-file: 'package.json'
-          cache: 'npm'
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install
 
       - name: Lint and Format
-        run: npm run lint:ci
-
-      - name: Spell Check
-        run: npm run spell
+        run: pnpm run lint:ci
 
       - name: Build
-        run: npm run build
+        run: pnpm run build
 
       - name: Test
-        run: npm run test:unit
+        run: pnpm run test:unit
 
   chromatic:
     runs-on: ubuntu-latest
@@ -59,13 +60,17 @@ jobs:
           # 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: 'npm'
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm install
 
       - name: Deploy Chromatic
         uses: chromaui/action@v1
@@ -91,11 +96,15 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
 
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
       - name: Run E2E tests
         uses: cypress-io/github-action@v4
         with:
-          start: npx vite --port ${{ env.PORT }} --host 127.0.0.1
-          build: npm run build
+          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 }}
           wait-on-timeout: 20
           browser: chrome

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
   "*.{json,html}": ["prettier --write", "cspell --no-must-find-files"],
   "*.{md,yaml,yml}": ["cspell --no-must-find-files"],
-  "*.ts(x)?": ["eslint --fix", "cspell --no-must-find-files"]
+  "*.ts(x)?": ["eslint --fix"]
 }

@types/mantine.d.ts

@@ -1,6 +1,6 @@
 import type { Tuple } from '@mantine/core';
 
-import type { colors } from '../libs/design/theme/theme';
+import type { Palette } from '../libs/design/theme/palette';
 
 type DefaultMantineColors =
   | 'blue'
@@ -19,11 +19,9 @@ type DefaultMantineColors =
   | 'violet'
   | 'yellow';
 
-type IndexifyColor<T> = T extends DefaultMantineColors
-  ? T | `${T}.${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`
-  : T;
+type IndexifyColor<T> = T | `${T}.${0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9}`;
 
-type Colors = IndexifyColor<DefaultMantineColors | keyof typeof colors>;
+type Colors = IndexifyColor<Palette | 'transparent'>;
 
 declare module '@mantine/core' {
   export interface MantineThemeColorsOverride {

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 `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`.
+- 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`.
 - 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
-npm install
-npm run codegen
-npm run dev
+pnpm install
+pnpm run codegen
+pnpm 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
-npm run codegen
+pnpm 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
-npm run build
+pnpm run build
 ```
 
 ### Lint
 
 To run the linter to auto-fix all the problems run:
 
 ```bash
-npm run lint
+pnpm run lint
 ```
 
 ### Test
 
 To run the unit tests run:
 
 ```bash
-npm run test:unit
+pnpm run test:unit
 ```
 
 To run e2e tests you need to have the dev server running at configured port and run:
 
 ```bash
-npm run test:e2e
+pnpm 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
-npm run test:e2ep [PATTERN]
+pnpm 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
-npm run test:e2ep household
+pnpm run test:e2ep household
 ```
 
 To run component tests run:
 
 ```bash
-npm run test:component
+pnpm run test:component
 ```
 
 ### Storybook
@@ -157,18 +157,18 @@ npm run test:component
 To run the storybook dev server run:
 
 ```bash
-npm run storybook
+pnpm run storybook
 ```
 
 ### Spell Check
 
 To find spelling errors just run
 
 ```bash
-npm run spell
+pnpm 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 `.cspell/charity.txt` and separate it with a new line
+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
 
 > Note: These two (linting and finding spelling errors) are run automatically on each commit and the commit won't be done if there's anything wrong, even for the commit messages, so be careful what you write as a commit message :)
 

app/Auth/Login/Login.tsx

@@ -1,25 +1,24 @@
 import { useAuth0 } from '@camp/auth';
 import { messages } from '@camp/messages';
-import { Button, Center, Group, Image } from '@mantine/core';
+import { Button, Center, Flex, Image, Text, Title } from '@mantine/core';
 
 export const Login = () => {
   const { loginWithRedirect } = useAuth0();
 
   return (
-    <Group grow spacing={0} sx={{ height: '100%' }}>
-      <Center>
-        <Button size="xl" onClick={() => loginWithRedirect()}>
-          {messages.login.loginFrom.submitButton.text}
-        </Button>
-      </Center>
-      <Center
-        sx={theme => ({
-          backgroundColor: theme.colors.bgCanvas[6],
-          height: '100%',
-        })}
-      >
-        <Image fit="scale-down" alt="login" src="/login-logo.png" />
-      </Center>
-    </Group>
+    <Center sx={{ height: '100%' }}>
+      <Flex direction="column" w={270} sx={{ translate: '0 -8%' }}>
+        <Image fit="scale-down" alt="logo" src="/login-logo.png" />
+        <Flex direction="column" align="center" gap={30}>
+          <Flex direction="column" align="center">
+            <Title order={1}>{messages.login.title}</Title>
+            <Text color="secondary">{messages.login.desc}</Text>
+          </Flex>
+          <Button fullWidth onClick={() => loginWithRedirect()}>
+            {messages.login.button}
+          </Button>
+        </Flex>
+      </Flex>
+    </Center>
   );
 };

app/Dashboard/DashboardLayout.tsx

@@ -18,7 +18,7 @@ const useStyles = createStyles(theme => ({
     paddingTop: 30,
     paddingBottom: 0,
     paddingInline: 40,
-    backgroundColor: theme.colors.bgCanvas[6],
+    backgroundColor: theme.colors.bg[6],
     overflow: 'auto',
   },
 }));

app/Dashboard/Households/HouseholdDetail/HouseholdDetail.ids.ts

@@ -9,7 +9,9 @@ export const householdDetailIds = {
   submitBtn: 'household-submit-btn',
   editBtn: 'household-edit-btn',
   notification: {
-    success: 'household-successful-update',
-    failure: 'household-failed-update',
+    edit: {
+      success: 'edit-household-successful',
+      failure: 'edit-household-failed',
+    },
   },
 };