svg-layout-designer-react/docs/Dependencies.md

Dependencies

This document briefly explains the different dependencies located in the package.json.

This document will not explain how to use them. You can read their documentation for that and the codebase have exemples for references.

React

Main framework to build the js application.

It depends on Vite in order to build the project.

Others dependencies:

• react-dom: library used to inject the app to #root html element.
• react-window: component that offers component dynamic loading over scroll (very useful++)
• react-svg-pan-zoom: component that offers pan + zoom to a svg element

Vite

Vite is the main tool to develop the react application.

Its uses the following files to configure the project :

• vite.config.ts
• .env*
• src/vite-env.d.ts

Others dependencies:

• @vitejs/plugin-react

Tailwind CSS

CSS framework designed around constraints with utility classes in order to reduce dead css code.

Its uses the following files to configure the project :

• src/index.scss
• tailwind.config.cjs
• postcss.config.cjs

Other dependencies:

• postcss
• sass
• autoprefixer

Heroicons

SVG Icons that can be used as JSX elements with Tailwind CSS

Testing

• Vitest
• Testing Library
• jsdom

eslint

A Linter. Used for error checking, syntax checking and code style enforcing.

Currently using standard-with-typescript with a few modification.

See the .eslintrc.cjs for more informations.

Other dependencies:

• typescript-eslint/eslint-plugin
• typescript-eslint/parser
• eslint-plugin-import
• eslint-plugin-n
• eslint-plugin-promise
• eslint-plugin-react