Add some simple documentation
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Siklos 2022-08-08 23:07:55 +02:00
parent bcf84b1f39
commit 822cd4107d
2 changed files with 111 additions and 0 deletions

73
docs/Dependencies.md Normal file
View file

@ -0,0 +1,73 @@
# 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-svg-pan-zoom](https://www.npmjs.com/package/react-svg-pan-zoom): component that offers pan + zoom to a svg element
# [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
# 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

38
docs/Project_Structure.md Normal file
View file

@ -0,0 +1,38 @@
# Project Structure
The project is structured this way
```
.
├── docs Documentation folder
├── public Public folder in which the index.html
│ import its resources
├── src Source folder for the react app
│ ├── assets Assets folder in which the react app
│ │ import its resources
│ ├── Components Components folder
│ ├── Enums Enums folder
│ ├── Interfaces Interface (+ types folder)
│ ├── test Setup folder for the tests
│ ├── tests Other tests + resources
│ ├── utils Utilities folder
│ ├── index.scss Tailwind CSS extends
│ ├── main.tsx Entrypoint for App injection
│ └── vite-env.d.ts Types for .env files
├── test-server Tests servers to test the API
│ ├── http.js Test server for bun.sh
│ └── node-http.js Test server for Node.js
├── azure-pipelines.yml Azure Pipelines YAML config file
├── index.html HTML Page
├── package-lock.json Describe the node_modules tree for npm
├── package.json Node.JS config file
├── pnpm-lock.yaml Describe the node_modules tree for pnpm
├── postcss.config.cjs Postcss config file for SCSS processing
├── README.md
├── tailwind.config.cjs Tailwind CSS config file
├── tsconfig.json Typescript config file
├── tsconfig.node.json Typescript config file for Node modules
├── vite.config.ts Vite config file
└── vitest.config.ts Vitest config file
```