Low-Level Design

Architecture Overview

We're building a React component library to make charting and mapping easier and more consistent across TC projects. The library will be divided into several key parts:

  1. Component Layer: Where all the chart and maps components live.
  2. Service Layer: Handles all the data fetching and API calls and also stores JWT.
  3. Utility Layer: Contains helper functions to make data transform easier and unified.
  4. Styling Layer: Ensures everything looks good and stays consistent.

1. Component Layer

This is the heart of Akvo charts library, containing reusable React components that are easy to configure and use.

Each component will be designed to accept props for data, options, and styling, to making them flexible and reusable.

2. Service Layer

The service layer takes care of all the heavy lifting related to data. This includes fetching data from APIs and processing it into a format Akvo-Charts components can use.

3. Utility Layer

This layer is packed with helpful functions that make our components and services work smoothly together.

4. Styling Layer

The styling layer ensures our components look good and consistent across different projects.

Build and Deployment Scripts

The Akvo-Charts project utilizes a set of scripts defined in the package.json file to handle various tasks related to building, testing, and deploying the library.

  "scripts": {
    "build": "microbundle-crl --no-compress --format modern,cjs --css-modules 'ae-[local]'",
    "start": "microbundle-crl watch --no-compress --format modern,cjs --css-module 'ae-[local]'",
    "prepare": "run-s build",
    "test": "run-s test:unit test:lint test:build ",
    "test:build": "run-s build",
    "test:lint": "eslint --config .eslintrc.json ./src/ --ext .js,.jsx",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom",
    "predeploy": "cd example && yarn install && yarn run build",
    "deploy": "gh-pages -d example/build"
  }

Here’s a breakdown of what each script does:

  1. build: This script uses microbundle-crl to bundle the library. It generates two formats (modern and cjs) without compression and applies CSS modules with a naming convention of ac-[local].
  2. start: This script is for development purposes. It watches for changes and rebuilds the library on the fly, using the same settings as the build script.
  3. prepare: This script runs the build script as a part of the package preparation before publishing or deploying.
  4. test: This script runs a series of sub-scripts to execute unit tests, linting, and build tests.
    • test:build: This script triggers the build process as part of the testing sequence.
    • test:lint: This script uses ESLint to lint the source files according to the configurations specified in .eslintrc.json.
    • test:unit: This script runs unit tests in a CI environment using react-scripts with jsdom as the test environment.
    • test:watch: This script runs unit tests in watch mode for ongoing development.
  5. predeploy: This script prepares the example project for deployment by navigating into the example directory, installing dependencies, and building the example project.
  6. deploy: This script deploys the built example project to GitHub Pages.


Revision #2
Created 23 July 2024 08:20:40 by Deden Bangkit
Updated 23 July 2024 08:41:08 by Deden Bangkit