✨(frontend) Create and init the next.js backoffice admin (#223)

* 🎉(frontend) add and init next js app for the back office

Today, the creation and management of products is complicated and tedious.
We therefore created a back office to facilitate this management and other
aspects in Joanie such as invoicing

* 🌐(frontend) add react-intl stack

Added react-intl for app internationalization.

* ✨(frontend) set up the test and mock stack

Add and init jest and MSW (to mock API calls in tests + components)

* 🔧(frontend) update circleci config

Add tests, lints, etc from next.js stack in circleci

* 🎨(frontend) run prettier-write

the tests in the ci failed because prettier is broken

Author: PanchoutNathan

.DS_Store

@@ -240,9 +240,78 @@ jobs:
             - ./node_modules
           key: v1-mail-dependencies-{{ .Revision }}
 
+  # ---- frontend admin jobs ----
+  build-front-admin:
+    docker:
+      - image: cimg/node:16.15
+        auth:
+          username: $DOCKER_HUB_USER
+          password: $DOCKER_HUB_PASSWORD
+    working_directory: ~/joanie/src/frontend/admin
+    steps:
+      - checkout:
+          path: ~/joanie
+      - restore_cache:
+          keys:
+            - v0-frontend-admin-dependencies-{{ checksum "~/joanie/src/frontend/admin/yarn.lock" }}
+            - v0-frontend-admin-dependencies-
+      - run:
+          name: Install front-end dependencies
+          command: yarn install
+      - run:
+          name: Build admin application
+          command: yarn build
+      - run:
+          name: Use format-js cli to generate frontend.json file
+          command: yarn i18n:extract
+      - persist_to_workspace:
+          root: ~/joanie
+          paths:
+            - src/frontend/admin/i18n/frontend.json
+      - save_cache:
+          paths:
+            - ./node_modules
+          key: v0-frontend-admin-dependencies-{{ checksum "yarn.lock" }}
+
+  lint-front-admin:
+    docker:
+      - image: cimg/node:16.15
+        auth:
+          username: $DOCKER_HUB_USER
+          password: $DOCKER_HUB_PASSWORD
+    working_directory: ~/joanie/src/frontend/admin
+    steps:
+      - checkout:
+          path: ~/joanie
+      - restore_cache:
+          keys:
+            - v0-frontend-admin-dependencies-{{ checksum "~/joanie/src/frontend/admin/yarn.lock" }}
+            - v0-frontend-admin-dependencies-
+      - run:
+          name: Run lint command
+          command: yarn lint
+
+  test-front-admin:
+    docker:
+      - image: cimg/node:16.15
+        auth:
+          username: $DOCKER_HUB_USER
+          password: $DOCKER_HUB_PASSWORD
+    working_directory: ~/joanie/src/frontend/admin
+    steps:
+      - checkout:
+          path: ~/joanie
+      - restore_cache:
+          keys:
+            - v0-frontend-admin-dependencies-{{ checksum "~/joanie/src/frontend/admin/yarn.lock" }}
+            - v0-frontend-admin-dependencies-
+      - run:
+          name: Run test command
+          command: yarn test
+
 
   # ---- Internationalization jobs ----
-  build-i18n:
+  build-back-i18n:
     docker:
       - image: cimg/python:3.10
         auth:
@@ -541,15 +610,35 @@ workflows:
           requires:
             - build-back
             - build-mails
-            - build-i18n
+            - build-back-i18n
+          filters:
+            tags:
+              only: /.*/
+
+      # Frontend admin jobs
+      #
+      # Build, lint and test frontend admin application
+      - build-front-admin:
+          filters:
+            tags:
+              only: /.*/
+      - lint-front-admin:
           filters:
             tags:
               only: /.*/
+          requires:
+            - build-front-admin
+      - test-front-admin:
+          filters:
+            tags:
+              only: /.*/
+          requires:
+            - build-front-admin
 
       # Internationalization jobs
       #
       # Extract strings and upload them to our translation management platform
-      - build-i18n:
+      - build-back-i18n:
           requires:
             - build-back
             - build-mails
@@ -558,7 +647,8 @@ workflows:
               only: /.*/
       - upload-i18n-strings:
           requires:
-            - build-i18n
+            - build-back-i18n
+            - build-front-admin
           filters:
             branches:
               only: main

.circleci/config.yml

@@ -26,6 +26,10 @@ share/python-wheels/
 .installed.cfg
 *.egg
 MANIFEST
+.idea
+.DS_Store
+*.iml
+.next/
 
 # Translations	# Translations
 *.pot

.gitignore

@@ -36,6 +36,7 @@ DOCKER_USER          = $(DOCKER_UID):$(DOCKER_GID)
 COMPOSE              = DOCKER_USER=$(DOCKER_USER) docker-compose
 COMPOSE_RUN          = $(COMPOSE) run --rm
 COMPOSE_RUN_APP      = $(COMPOSE_RUN) app-dev
+COMPOSE_RUN_FRONT_ADMIN = $(COMPOSE_RUN) app-dev-front-admin
 COMPOSE_RUN_CROWDIN  = $(COMPOSE_RUN) crowdin crowdin
 COMPOSE_RUN_MAIL_YARN= $(COMPOSE_RUN) mail-generator yarn
 COMPOSE_TEST_RUN     = $(COMPOSE_RUN)
@@ -67,7 +68,9 @@ bootstrap: \
 	migrate \
 	i18n-compile \
 	install-mails \
-	build-mails
+	build-mails \
+	front-admin-install \
+	front-admin-build
 .PHONY: bootstrap
 
 # -- Docker/compose
@@ -171,6 +174,14 @@ superuser: ## create a Django superuser
 	@$(MANAGE) createsuperuser
 .PHONY: superuser
 
+back-i18n-compile: ## compile the gettext files
+	@$(MANAGE) compilemessages --ignore="venv/**/*"
+.PHONY: back-i18n-compile
+
+back-i18n-generate: ## create the .pot files used for i18n
+	@$(MANAGE) makemessages -a --keep-pot
+.PHONY: back-i18n-generate
+
 shell: ## connect to database shell
 	@$(MANAGE) shell_plus
 .PHONY: dbshell
@@ -181,6 +192,35 @@ dbshell: ## connect to database shell
 	docker-compose exec app-dev python manage.py dbshell
 .PHONY: dbshell
 
+# -- Frontend admin
+front-admin-install: ## Install node_modules
+	@${COMPOSE_RUN_FRONT_ADMIN} yarn install
+.PHONY: front-admin-install
+
+front-admin-lint: ## Lint frontend admin app
+	@${COMPOSE_RUN_FRONT_ADMIN} yarn lint
+.PHONY: front-admin-lint
+
+front-admin-test: ## Test frontend admin app
+	@${COMPOSE_RUN_FRONT_ADMIN} yarn test
+.PHONY: front-admin-test
+
+front-admin-build: ## Build frontend admin app
+	@${COMPOSE_RUN_FRONT_ADMIN} yarn build
+.PHONY: front-admin-build
+
+front-admin-dev: ## Launch frontend admin app in development mode
+	@${COMPOSE_RUN_FRONT_ADMIN} yarn dev
+.PHONY: front-admin-dev
+
+front-admin-i18n-extract: ## Extract translations of frontend admin app
+	@${COMPOSE_RUN_FRONT_ADMIN} yarn i18n:extract
+.PHONY: front-admin-i18n-extract
+
+front-admin-i18n-compile: ## Compile translations of frontend admin app
+	@${COMPOSE_RUN_FRONT_ADMIN} yarn i18n:compile
+.PHONY: front-admin-i18n-compile
+
 # -- Internationalization
 
 env.d/development/crowdin:
@@ -194,20 +234,24 @@ crowdin-upload: ## Upload source translations to crowdin
 	@$(COMPOSE_RUN_CROWDIN) upload sources -c crowdin/config.yml
 .PHONY: crowdin-upload
 
-i18n-compile: ## compile the gettext files
-	@$(MANAGE) compilemessages --ignore="venv/**/*"
+i18n-compile: ## compile all translations
+i18n-compile: \
+	back-i18n-compile \
+	front-admin-i18n-compile
 .PHONY: i18n-compile
 
+i18n-generate: ## create the .pot files and extract frontend messages
+i18n-generate: \
+	back-i18n-generate \
+	front-admin-i18n-extract
+.PHONY: i18n-generate
+
 i18n-download-and-compile: ## download all translated messages and compile them to be used by all applications
 i18n-download-and-compile: \
   crowdin-download \
   i18n-compile
 .PHONY: i18n-download-and-compile
 
-i18n-generate: ## create the .pot files used for i18n
-	@$(MANAGE) makemessages -a --keep-pot
-.PHONY: i18n-generate
-
 i18n-generate-and-upload: ## generate source translations for all applications and upload them to crowdin
 i18n-generate-and-upload: \
   i18n-generate \

Makefile

@@ -19,5 +19,10 @@ files: [
   source : "/backend/locale/django.pot",
   dest: "/backend.pot",
   translation : "/backend/locale/%locale_with_underscore%/LC_MESSAGES/django.po"
+ },
+ {
+  source : "/frontend/admin/i18n/frontend.json",
+  dest: "/admin/frontend.json",
+  translation : "/frontend/admin/i18n/locales/%locale%.json"
  }
 ]

crowdin/config.yml

@@ -88,6 +88,17 @@ services:
       - ".:/app"
     working_dir: /app/src/mail
 
+  app-dev-front-admin:
+    image: node:16.15
+    user: ${DOCKER_USER:-1000}
+    volumes:
+      - "./src/frontend/admin:/app"
+    working_dir: /app
+    ports:
+      - "8072:3000"
+    depends_on:
+      - app-dev
+
   mailcatcher:
     image: sj26/mailcatcher:latest
     ports:

docker-compose.yml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="FacetManager">
+    <facet type="django" name="Django">
+      <configuration>
+        <option name="rootFolder" value="$MODULE_DIR$/src/backend/joanie/core" />
+        <option name="settingsModule" value="settings.py" />
+        <option name="manageScript" value="manage.py" />
+        <option name="environment" value="&lt;map/&gt;" />
+        <option name="doNotUseTestRunner" value="false" />
+        <option name="trackFilePattern" value="migrations" />
+      </configuration>
+    </facet>
+  </component>
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/src/frontend/admin/.next" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+  <component name="TemplatesService">
+    <option name="TEMPLATE_CONFIGURATION" value="Django" />
+    <option name="TEMPLATE_FOLDERS">
+      <list>
+        <option value="$MODULE_DIR$/src/backend/joanie/core/templates/mail/html" />
+        <option value="$MODULE_DIR$/src/backend/joanie/core/templates/joanie/admin" />
+      </list>
+    </option>
+  </component>
+</module>