# 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](https://reactjs.org/)

Main framework to build the js application.

It depends on Vite in order to build the project.

Others dependencies:
- [react-dom](https://reactjs.org/docs/react-dom.html): library used to inject the app to `#root` html element.
- [react-window](https://www.npmjs.com/package/react-window): component that offers component dynamic loading over scroll (very useful++)
- [react-svg-pan-zoom](https://www.npmjs.com/package/react-svg-pan-zoom): component that offers pan + zoom to a svg element (if this gets deprecated, please try to migrate to HTML Canvas before trying a new library)


# [Vite](https://vitejs.dev/)

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](https://tailwindcss.com/)

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](https://heroicons.com/)

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

# [Interweave](https://interweave.dev/)

React library to render HTML from string.
In this project, it is particularly used for the CustomSVG property.

If this dependencies gets deprecated please revert [PR#18 e96e4f12](https://dev.azure.com/enguyen0660/SVGLayoutDesignerReact/_git/SVGLayoutDesignerReact/commit/e96e4f123b4aa4c9cdb327d4d617ab0e63dc4d0f?refName=refs%2Fheads%2Fdev)

# Testing

- [Vitest](https://vitest.dev/)
- [Testing Library](https://testing-library.com/)
- [jsdom](https://github.com/jsdom/jsdom)


# [eslint](https://eslint.org/)

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