feat: APP-201 buy credits flow step 1 (#2408)

Co-authored-by: “Ralph“ <“[email protected]>

.eslintrc.js

@@ -65,5 +65,17 @@ module.exports = {
         'import/no-anonymous-default-export': 'off',
       },
     },
+    {
+      files: [
+        '*.test.ts',
+        '*.spec.ts',
+        '*.test.tsx',
+        '*.spec.tsx',
+        '*.stories.tsx',
+      ],
+      rules: {
+        'lingui/no-unlocalized-strings': 'off',
+      },
+    },
   ],
 };

README.md

@@ -17,7 +17,6 @@ The website for the [Regen Network](https://regen.network) decentralized infrast
       - [GraphQL Type generation](#graphql-type-generation)
     - [Storybook](#storybook)
     - [Website](#website)
-    - [Deploying the Custom Login form to Auth0](#deploying-the-custom-login-form-to-auth0)
   - [Testing](#testing)
   - [Code style](#code-style)
   - [i18n](#i18n)
@@ -34,7 +33,6 @@ This project uses [bun](https://bun.sh/) with [bun workspaces](https://bun.sh/do
 - `web-marketplace`: Registry React application
 - `web-components`: React components and [material-ui](https://material-ui.com/) custom theme
 - `web-storybook`: [Storybook](https://storybook.js.org/) config
-- `web-auth`: React application used for Auth0 Custom Universal Login
 
 [Lerna](https://github.com/lerna/lerna) is also used to bump packages versions and push new releases.
 
@@ -62,7 +60,6 @@ bun install
 
 Set variables in `.env` files in `web-marketplace/` and `web-storybook/` folders based on provided `.env.example` files.
 
-For `web-auth`, follow these [setup instructions](web-auth/README.md#setup).
 
 ## Development
 
@@ -136,31 +133,29 @@ bun run build-storybook
 bun run build-www
 ```
 
-### Deploying the Custom Login form to Auth0
+## Testing
 
-Please, follow [these instructions](web-auth/README.md#setup) and then:
+#### - Running tests
+We are using [Vitest](https://vitest.dev/) as a test runner.
 
-1. Run `bun run build-auth` command.
-2. Copy the code from `./build/index.html`.
-3. Paste it into the Universal Login HTML form from [Auth dashboard](https://manage.auth0.com/dashboard/us/regen-network-registry/login_page) and save.
+Tests can be run in the terminal with the following commands from the project root: 
 
-This could be automated in the future.
+* To run `web-marketplace` tests
+  ```sh
+  bun run test-marketplace
+  ```
 
-## Testing
+* To run `web-components` tests
+  ```sh
+  bun run test-components
+  ```
+In both cases the test runner is launched in the interactive watch mode.
 
-```sh
-bun run test
-```
+#### - Writing tests
+When writing test in `web-marketplace` remember to import the methods from`'web-marketplace/test/test-utils'`, specially the `render` method, as it is a custom render that wraps components with the necessary providers.
 
-Launches the test runner in the interactive watch mode.
-[Jest](https://jestjs.io/) is used as test runner.
+In `web-components`, methods should be imported directly from `'@testing-library/*'`
 
-We're using [StoryShots](https://storybook.js.org/docs/testing/structural-testing/#using-storyshots) for snapshots testing.
-Update web-components snapshots:
-
-```sh
-bun run test-update-snapshot
-```
 
 ## Code style
 

lerna.json

@@ -6,7 +6,6 @@
     "web-marketplace",
     "web-components",
     "web-storybook",
-    "web-auth",
     "web-www"
   ]
 }

package.json

@@ -14,24 +14,21 @@
     "web-marketplace",
     "web-components",
     "web-storybook",
-    "web-auth",
     "web-www"
   ],
   "scripts": {
     "build": "bun run --cwd web-marketplace build",
     "build-www": "bun run --cwd web-www build",
     "build-components": "bun run --cwd web-components build",
     "build-storybook": "bun run --cwd web-storybook build-storybook",
-    "build-auth": "bun run --cwd web-auth build",
     "clean": "find . -iname 'node_modules' -maxdepth 2 | xargs rm -rf",
     "format": "bun run --cwd web-components format & bun run --cwd web-marketplace format & bun run --cwd web-www format",
     "lint": "bun run --cwd web-components lint & bun run --cwd web-marketplace lint & bun run --cwd web-www lint",
     "format-and-fix": "bun run --cwd web-components format-and-fix & bun run --cwd web-marketplace format-and-fix & bun run --cwd web-www format-and-fix",
     "storybook": "bun run --cwd web-storybook storybook",
-    "test": "bun run --cwd web-marketplace test-no-watch",
+    "test-marketplace": "bun run --cwd web-marketplace test",
     "test-components": "bun run --cwd web-components test",
     "start": "bun run --cwd web-marketplace start",
-    "start-auth": "bun run --cwd web-auth start",
     "watch": "bun run --cwd web-components watch",
     "test-update-snapshot": "bun run --cwd web-marketplace test-update-snapshot",
     "bump": "lerna version --no-push --conventional-commits",
@@ -46,7 +43,6 @@
     "@graphql-codegen/typescript-operations": "^1.18.0",
     "@graphql-codegen/typescript-react-apollo": "2.2.4",
     "@types/css-mediaquery": "^0.1.1",
-    "@types/jest": "27.0.3",
     "@types/node": "13.1.1",
     "babel-loader": "8.1.0",
     "css-mediaquery": "0.1.2",
@@ -59,13 +55,13 @@
     "prettier": "2.4.1",
     "shx": "^0.3.2",
     "storybook": "^7.3.2",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "unplugin-auto-import": "^0.18.2"
   },
   "resolutions": {
     "eslint": "^8.42.0",
     "formik-mui": "^5.0.0-alpha.0",
     "formik": "2.2.9",
-    "@types/jest": "^29.0.0",
     "@types/react": "^18.0.23",
     "@types/react-dom": "^18.0.7",
     "babel-eslint": "^10.1.0",

tailwind.common.js

@@ -4,6 +4,7 @@ module.exports = {
   theme: {
     fontFamily: {
       sans: ['"Lato"', '-apple-system', 'sans-serif'],
+      muli: ['"Muli"', '-apple-system', 'sans-serif'],
     },
     colors: {
       // Make sure these guidelines are followed when adding new colors: https://tailwindcss.com/docs/customizing-colors#using-css-variables

tailwind.css

@@ -47,6 +47,7 @@
     --purple-300: 128 142 171;
     --purple-200: 187 195 210;
     --purple-100: 221 225 233;
+
   }
 
   .dark {
@@ -86,4 +87,9 @@
     --purple-200: 128 142 171;
     --purple-100: 86 104 143;
   }
+
+  .bg-transparent {
+    background-color: transparent;
+  }
+
 }