This is of a monorepo that contains library and application examples based on Nx, Typescript, ReactJs and Vite.
Ideally, you will have nvm. In that case you will get the required version automatically if you execute:
nvm useElse wise please use NodeJs 20.11.0.
Setting up the project is pretty straight forward. You can execute:
npm run setupThis will install all dependencies and allow you to build the application.
Starting the app locally can be done with a single command:
npm run start:data-tableor Nx command directly:
nx serve data-tableOpen your browser and navigate to http://localhost:4200/.
Starting the app locally can be done with a single command:
npm run storybookor Nx command directly:
nx run common-ui:storybookOpen your browser and navigate to http://localhost:4400/.
A single command will execute unit tests for all packages and report coverage:
npm run testor Nx command directly:
nx run-many -t test --verboseA single command will execute Cypress E2E tests for data-table package:
npm run e2eor to run in headed mode:
npm run e2e:headedor Nx command directly:
nx run data-table-e2e:e2eMonorepo source code is broken down into libraries (under libs folder) and applications (under apps folder). Each package has its source code under src folder.
There is a library package for common presentational components, called "common-ui" (libs/common-ui).
There is a package for the Data Table application, called "data-table" (apps/data-table).
This simple react application is using React router to serve a home page and handle errors or 404 urls. Salt Design System by JP. Morgan is being used to provide a consistent layout and branding. Ramda is used as lightweight utility library.
The home page contains a data table with sorting feature, preloaded sorting for all columns, and dummy data (FinancialInstrumentsTable).
The data table is reusing the presentational components from the "common-ui" package, extends/overrides for default row/cell renderers via configuration and uses headless component for multiple sorting feature with preloaded sortBy values.
Sorting can be applied in all columns with default or custom sort comparator functions per column. Based on configuration it can be turned on/off, have custom comparator and pre-populate a sort by state.
Multiple sorting rules can apply simultaneously with a priority order.
Table component allows extends/overrides for default row & cell renderers that are provided by the "common-ui" package.
This is a collection of presentational components required to compose a table within a simple page layout.
Salt Design System by JP. Morgan is being used to provide a consistent layout and branding. Additional styling has been done with Sass.
Storybook has been configured and a story for Table component has been created as sample.
Few tools have been configured and being used to improve the development experience in this project:
- SonarQube, code quality & SAST, additionally digests the reports from unit test and linting tools
- Snyk vulnerability scans, report
- Jest & RTL to execute unit tests
- Husky, pre-commit hooks in place
- Commitizen & Commit Lint for conventional commits, use "npm run commit" to get a cli wizard
- Github Actions, actions run on pull requests to verify quality and stability
- Dependabot to get notified for dependency version updates
- Jscpd to check on code duplications
- StyleLint sor Sass linting
- EsLint for JS & TS linting
- Prettier for formatting consistency
- Lint Staged, run linters on staged files
- Storybook, also a couple of samples of interactive tests
- Cypress with a sample of E2E tests
- Browserslist to define build target compatibility
- WDYR (why did you render), to debug excessive re-renders
- Typescript for type safe coding
- Madge to check for circular dependencies and generate code graphs