Make.org front end monorepo

This project gathers shared pakages and apps for make.org front end products.

Summary

1. Technical Stack
2. Core concepts
3. Getting started
4. Shared Packages
5. Apps
6. Contributing
7. Tooling
8. TODO

Technical Stack

The folowing technologies are used to build and test this repository :

• Typescript (open in a new tab)
• React (open in a new tab)
• Styled Components (open in a new tab)
• Jest (open in a new tab)
• Cypress (open in a new tab)
• PM2 (open in a new tab)

Core concepts

The main purpose of this repository is to optimize behaviours between various apps.

To ensure this we adopted a monorepository architecture with yarn workspace :

• Front office applications
• Global packages shared between front office apps

These packages are defined in the root package.json.

During development, to avoid untimely version switching between node versions, we use Docker (open in a new tab) and Docker Compose (open in a new tab). For further informations, refers to docker-compose dev configuration and Dockerfiles of each apps'.

Getting started

• Enable Yarn with corepack (open in a new tab)

corepack enable yarn
corepack prepare

• Clone repo from gitlab
• Add 127.0.0.1 local.makeorg.tech to hosts file in /etc/hosts
• Run yarn install to install dependencies.
• Install Docker (open in a new tab) and Docker Compose (open in a new tab).
• Refers to each apps' README file to build and run.

Shared Packages

The purpose of the shared packages is to gather parts of the codebase used to build various apps. They are splitted in 8 packages :

• API : Layers with stategies and splitted services by endpoints.
• ApiMock : Mocked API based on Core API. Mainly used for functional testing purposes.
• Assets : Fonts, images, stylesheets and various assets used to build Make.org web interfaces.
• Components : Components with style and business logic used in Make.org apps.
• Store : Actions, reducers and management for React Context in Make.org apps.
• Types : Types and data models for Make.org objects.
• UI : Styles and ui elements without business logic.
• Utils : Useful methods, constants, middlewares and hooks to handle i/o tranformation.
• Design System : design system package.

Apps

For further informations, please refers to each README.md :

• Front
• Widget

Contributing

Refers to CONTRIBUTING.md

Tooling

Unit testing

To launch test :

$ yarn jest

To enable watch mode:

$ yarn jest --watch

then touch the o key to re-launch test only on files changed

Linter

To launch linter :

$ yarn eslint ./

Detect duplications

To launch jscpd :

$ yarn jscpd

Prepush

Before push the following command will be executed yarn prepush Following commands are runned on prepush :

See: .husky/pre-prush

Convert SVG to React Component

Refers to @make.org/ui README.md.

Create a new Package

• Create the new folder in package directory
• Add a package.json with relevant name and dependencies in the new folder
• Add a tsconfig.json with relevant references in the new folder
• Update global package.json file with new package (under "workspaces")
• Update global tsconfig.json file with new package (under "paths")
• Update local package.json and tsconfig.json where needed (usually at least in front and widget), with the new package as "dependencies" for package.json and "references" for tsconfig.json
• Update front and widget Dockerfile with the new package
• Run yarn install
• Update and run docker-compose for app-ssr (clean containers and images first), to try to have a full updated build. If everything is good, there should be no error

TODO

• Add an a11y section
• Add Packages README.md
• Add CONTRIBUTING.md
• Handle source in widget state and isWidget conditional
• Adjust eslint config
• Clean any types
• Increase cypress testing coverage
• Increase unit testing coverage
• Add lighthouse acceptance testing suite