Demo URL's
- PROD Apps Lib (AWS)
- STAGE - Apps Lib (AWS)
- STAGE - Component Lib w. Storybook (AWS)
- TEST - Apps Lib (AWS)
- TEST - Component Lib w. Storybook (AWS)
- DEV - Apps Lib (AWS)
- DEV - Component Lib w. Storybook (AWS)
- Visual Regression Testing w. Chromatic & Storybook (AWS)
1. Introduction
The project comprises multiple packages as sub-projects, with dependencies between them. The monorepo structure is managed using Yarn and Lerna. The following sections provide a detailed breakdown of the project structure, technologies used, and the configuration of various tools and libraries to ensure consistency, quality, and automated workflows across the project.
2. Project Structure
2.1 Monorepo Setup
- Monorepo Management: Yarn and Lerna are used to manage the monorepo, ensuring consistent dependency versions and streamlined project scripts across packages.
- Atomic Design: Used to organize components into atoms, molecules, organisms, templates, and pages.
- Node.js: 18.17.1
- Yarn: 1.22.10
- Lerna: 7.3.0
2.2 Packages
- React Components Library (frontend/components/react-cmp-lib): A library of reusable React components with a custom build system using Rollup.
- Design System Playground (frontend/ds-playgrounds/*): A playground for testing components, with a custom build using Parcel.
- Foundation (shared/foundation): A collection of utilities written in TypeScript, packaged separately.
- Storybook (frontend/ds-storybook): A separate package for documenting and visually testing components in isolation.
- Living Style Guide - Generic Styles (frontend/lsg-design-system): A collections of SCSS variables, mixins, and functions, and component styles packaged separately.
3. Technology Stack
- Front-end: React.js, TypeScript, SCSS
- React.js - for building user interfaces and component-based architecture.
- TypeScript - for extended JavaScript functionality, string type checking, and code consistency - catch and fix type related error before runtime - sometimes that comes with the expense of having to define complex types.
- Testing: Jest for unit testing, Storybook and Chromatic for visual testing.
- Linting and Formatting: Prettier, ESLint, and Stylelint.
- Version Control: Git, with Husky for git hooks, Commit Lint, and Commitzen for structured commit messages.
4. Development and Build Tools
- Component Development: Storybook for developing and documenting components in an isolated environment.
- Build Systems: Custom build setups using Rollup for the component library and Parcel for the playground.
5. Continuous Integration and Deployment
- GitHub Actions: Set up to automate testing, building, and deployment workflows.
- Chromatic Deployment: Automatic deployment to Chromatic for visual regression testing and Storybook hosting.
6. Testing and Quality Assurance
- Unit Testing: Jest is used for unit testing components and utility functions.
- Visual Testing: Storybook and Chromatic are used for visual testing of components.
- Linting and Formatting: Prettier, ESLint, and Stylelint are configured to ensure code consistency and quality.
7. Version Control and Commit Conventions
- Git Hooks: Husky is configured to enforce linting and testing before commits and pushes.
- Commit Conventions: Commit Lint and Commitzen are used to ensure structured and meaningful commit messages.