diff --git a/README.md b/README.md index ef6d1ce..635d01b 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,8 @@ An svg layout designer. Requierements : - NodeJS -- NPM +- npm +- pnpm (optional but recommanded unless you prefer having a huge `node_modules` directory) # Developping diff --git a/docs/CICD.md b/docs/CICD.md new file mode 100644 index 0000000..7c3543f --- /dev/null +++ b/docs/CICD.md @@ -0,0 +1,12 @@ +# Azure Pipelines + +This project uses Azure Pipelines to runs automatic tests. + +Its `azure-pipelines.yml` configuration file can be found at the root project folder. + + +# Drone.io + +Due to the limitations of Azure Pipelines (limited free usage, no parallel, no dockerhub...), it might be more useful to use Drone.io. + +Its config file can be found in `.drone.yml`. \ No newline at end of file diff --git a/docs/Dependencies.md b/docs/Dependencies.md new file mode 100644 index 0000000..626458e --- /dev/null +++ b/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 diff --git a/docs/Project_Structure.md b/docs/Project_Structure.md new file mode 100644 index 0000000..890daf8 --- /dev/null +++ b/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 +``` +