From bcf84b1f399945c21543ee9107733adb3a29c297 Mon Sep 17 00:00:00 2001 From: Siklos Date: Mon, 8 Aug 2022 17:19:04 +0200 Subject: [PATCH 1/3] Fix ElementsSidebar.test.tsx --- src/Components/ElementsSidebar/ElementsSidebar.test.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx b/src/Components/ElementsSidebar/ElementsSidebar.test.tsx index 2dd5080..c56e372 100644 --- a/src/Components/ElementsSidebar/ElementsSidebar.test.tsx +++ b/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(); From 822cd4107de3d079141d8c4ba1839d9dfa4a672d Mon Sep 17 00:00:00 2001 From: Siklos Date: Mon, 8 Aug 2022 23:07:55 +0200 Subject: [PATCH 2/3] Add some simple documentation --- docs/Dependencies.md | 73 +++++++++++++++++++++++++++++++++++++++ docs/Project_Structure.md | 38 ++++++++++++++++++++ 2 files changed, 111 insertions(+) create mode 100644 docs/Dependencies.md create mode 100644 docs/Project_Structure.md 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 +``` + From ceaea43288865801e36e85138e7f29db42f7b43c Mon Sep 17 00:00:00 2001 From: Siklos Date: Mon, 8 Aug 2022 23:15:26 +0200 Subject: [PATCH 3/3] Added CICD doc + update README.md --- README.md | 3 ++- docs/CICD.md | 12 ++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 docs/CICD.md 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