Add some simple documentation

docs/Dependencies.md

@@ -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

docs/Project_Structure.md

@@ -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
+```
+

src/Components/ElementsSidebar/ElementsSidebar.test.tsx

@@ -13,6 +13,7 @@ describe.concurrent('Elements sidebar', () => {
       SelectedContainer={null}
       onPropertyChange={() => {}}
       selectContainer={() => {}}
+      deleteContainer={() => {}}
     />);
 
     expect(screen.getByText(/Elements/i));
@@ -40,6 +41,7 @@ describe.concurrent('Elements sidebar', () => {
       SelectedContainer={null}
       onPropertyChange={() => {}}
       selectContainer={() => {}}
+      deleteContainer={() => {}}
     />);
 
     expect(screen.getByText(/Elements/i));
@@ -69,6 +71,7 @@ describe.concurrent('Elements sidebar', () => {
       SelectedContainer={MainContainer}
       onPropertyChange={() => {}}
       selectContainer={() => {}}
+      deleteContainer={() => {}}
     />);
 
     expect(screen.getByText(/Elements/i));
@@ -153,6 +156,7 @@ describe.concurrent('Elements sidebar', () => {
       SelectedContainer={MainContainer}
       onPropertyChange={() => {}}
       selectContainer={() => {}}
+      deleteContainer={() => {}}
     />);
 
     expect(screen.getByText(/Elements/i));
@@ -205,6 +209,7 @@ describe.concurrent('Elements sidebar', () => {
       SelectedContainer={SelectedContainer}
       onPropertyChange={() => {}}
       selectContainer={selectContainer}
+      deleteContainer={() => {}}
     />);
 
     expect(screen.getByText(/Elements/i));
@@ -226,6 +231,7 @@ describe.concurrent('Elements sidebar', () => {
       SelectedContainer={SelectedContainer}
       onPropertyChange={() => {}}
       selectContainer={selectContainer}
+      deleteContainer={() => {}}
     />);
 
     expect((propertyId as HTMLInputElement).value === 'main').toBeFalsy();