From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sun, 20 Feb 2022 16:11:50 +0100 Subject: chore!: restructure repo I separated public files from the config/dev files. It improves repo readability. I also moved dotenv helper to public/inc directory and extract the Matomo tracker in the same directory. --- public/projects/react-small-apps/.gitignore | 10 + public/projects/react-small-apps/.husky/commit-msg | 4 + public/projects/react-small-apps/CHANGELOG.md | 35 + public/projects/react-small-apps/LICENSE | 21 + public/projects/react-small-apps/README.md | 15 + .../apps/meme-generator/.env.example | 11 + .../apps/meme-generator/.gitignore | 24 + .../react-small-apps/apps/meme-generator/README.md | 29 + .../apps/meme-generator/package.json | 39 + .../apps/meme-generator/public/favicon.ico | Bin 0 -> 3870 bytes .../apps/meme-generator/public/index.html | 20 + .../apps/meme-generator/public/logo192.png | Bin 0 -> 5347 bytes .../apps/meme-generator/public/logo512.png | Bin 0 -> 9664 bytes .../apps/meme-generator/public/manifest.json | 25 + .../public/preview-meme-generator.jpg | Bin 0 -> 67333 bytes .../apps/meme-generator/public/robots.txt | 3 + .../meme-generator/src/components/Footer/Footer.js | 11 + .../meme-generator/src/components/Header/Header.js | 9 + .../meme-generator/src/components/Main/Main.js | 16 + .../MemeForm/MemeFieldset/MemeFieldset.js | 103 + .../src/components/MemeForm/MemeForm.js | 54 + .../components/MemePreview/Headline/Headline.js | 120 + .../src/components/MemePreview/MemePreview.js | 61 + .../src/components/commons/Button.js | 11 + .../src/components/commons/Fieldset.js | 10 + .../meme-generator/src/components/commons/Form.js | 21 + .../meme-generator/src/components/commons/Input.js | 41 + .../src/components/commons/InputRange.js | 37 + .../src/components/commons/Option.js | 5 + .../src/components/commons/Select.js | 31 + .../apps/meme-generator/src/index.js | 21 + .../apps/meme-generator/src/logo.svg | 1 + .../apps/meme-generator/src/reportWebVitals.js | 13 + .../apps/meme-generator/src/setupTests.js | 5 + .../apps/meme-generator/src/style.css | 151 + .../react-small-apps/apps/notebook/.env.example | 11 + .../react-small-apps/apps/notebook/.gitignore | 24 + .../react-small-apps/apps/notebook/README.md | 31 + .../react-small-apps/apps/notebook/package.json | 41 + .../apps/notebook/public/favicon.ico | Bin 0 -> 3870 bytes .../apps/notebook/public/index.html | 20 + .../apps/notebook/public/manifest.json | 25 + .../apps/notebook/public/preview-cover.jpg | Bin 0 -> 32434 bytes .../apps/notebook/public/preview-page.jpg | Bin 0 -> 34118 bytes .../apps/notebook/public/robots.txt | 3 + .../react-small-apps/apps/notebook/src/App.css | 40 + .../react-small-apps/apps/notebook/src/App.js | 174 + .../react-small-apps/apps/notebook/src/App.test.js | 8 + .../src/components/commons/Button/Button.css | 78 + .../src/components/commons/Button/Button.js | 26 + .../components/commons/FormElements/Input/Input.js | 31 + .../commons/FormElements/TextArea/TextArea.js | 52 + .../src/components/commons/FormElements/index.js | 4 + .../notebook/src/components/commons/List/List.css | 3 + .../notebook/src/components/commons/List/List.js | 25 + .../apps/notebook/src/components/commons/index.js | 5 + .../src/components/helpers/hooks/useToggle.js | 10 + .../src/components/layout/Footer/Footer.css | 8 + .../src/components/layout/Footer/Footer.js | 11 + .../src/components/layout/Header/Header.css | 7 + .../src/components/layout/Header/Header.js | 12 + .../notebook/src/components/layout/Main/Main.css | 3 + .../notebook/src/components/layout/Main/Main.js | 7 + .../notebook/src/components/layout/Nav/Nav.css | 65 + .../apps/notebook/src/components/layout/Nav/Nav.js | 62 + .../notebook/src/components/layout/Nav/NavJump.js | 28 + .../notebook/src/components/layout/Page/Cover.css | 30 + .../notebook/src/components/layout/Page/Page.css | 83 + .../notebook/src/components/layout/Page/Page.js | 107 + .../src/components/layout/Page/PageToolbar.js | 27 + .../apps/notebook/src/components/layout/index.js | 7 + .../apps/notebook/src/config/pages.js | 16 + .../apps/notebook/src/images/restore.svg | 24 + .../apps/notebook/src/images/trash.svg | 48 + .../react-small-apps/apps/notebook/src/index.js | 20 + .../react-small-apps/apps/notebook/src/logo.svg | 1 + .../apps/notebook/src/reportWebVitals.js | 13 + .../apps/notebook/src/setupTests.js | 5 + .../react-small-apps/apps/todos/.env.example | 11 + .../react-small-apps/apps/todos/.gitignore | 24 + .../projects/react-small-apps/apps/todos/README.md | 56 + .../apps/todos/assets/preview-single-todo.jpg | Bin 0 -> 25081 bytes .../apps/todos/assets/preview-todo-account.jpg | Bin 0 -> 23922 bytes .../apps/todos/assets/preview-todo-login.jpg | Bin 0 -> 25720 bytes .../apps/todos/assets/preview-todos-list.jpg | Bin 0 -> 45601 bytes .../react-small-apps/apps/todos/package.json | 48 + .../react-small-apps/apps/todos/public/favicon.ico | Bin 0 -> 3585 bytes .../react-small-apps/apps/todos/public/index.html | 43 + .../react-small-apps/apps/todos/public/logo192.png | Bin 0 -> 4153 bytes .../react-small-apps/apps/todos/public/logo512.png | Bin 0 -> 12066 bytes .../apps/todos/public/manifest.json | 25 + .../react-small-apps/apps/todos/public/robots.txt | 2 + .../react-small-apps/apps/todos/src/App.js | 47 + .../react-small-apps/apps/todos/src/App.scss | 42 + .../todos/src/components/forms/Button/Button.js | 17 + .../src/components/forms/Fieldset/Fieldset.js | 10 + .../apps/todos/src/components/forms/Form.scss | 163 + .../apps/todos/src/components/forms/Input/Input.js | 39 + .../src/components/forms/TextArea/TextArea.js | 24 + .../apps/todos/src/components/forms/index.js | 7 + .../todos/src/components/layout/Footer/Footer.js | 15 + .../todos/src/components/layout/Footer/Footer.scss | 8 + .../todos/src/components/layout/Header/Header.js | 39 + .../todos/src/components/layout/Header/Header.scss | 18 + .../layout/Header/UserOptions/UserOptions.js | 38 + .../layout/Header/UserOptions/UserOptions.scss | 50 + .../apps/todos/src/components/layout/Main/Main.js | 7 + .../todos/src/components/layout/Main/Main.scss | 3 + .../apps/todos/src/components/layout/index.js | 5 + .../react-small-apps/apps/todos/src/index.js | 17 + .../apps/todos/src/sass/abstracts/_mixins.scss | 24 + .../todos/src/sass/abstracts/_placeholders.scss | 5 + .../apps/todos/src/sass/abstracts/_variables.scss | 12 + .../todos/src/services/LocalStorage.service.js | 26 + .../apps/todos/src/store/auth/auth.slice.js | 23 + .../react-small-apps/apps/todos/src/store/index.js | 56 + .../apps/todos/src/store/todos/todos.slice.js | 54 + .../apps/todos/src/store/users/users.slice.js | 39 + .../apps/todos/src/utilities/helpers.js | 20 + .../apps/todos/src/utilities/hooks.js | 10 + .../apps/todos/src/views/Account/Account.js | 26 + .../apps/todos/src/views/Account/Account.scss | 15 + .../apps/todos/src/views/LoginForm/LoginForm.js | 84 + .../apps/todos/src/views/Logout/Logout.js | 18 + .../apps/todos/src/views/Todo/Todo.js | 86 + .../apps/todos/src/views/Todo/Todo.scss | 31 + .../apps/todos/src/views/TodoForm/TodoForm.js | 42 + .../apps/todos/src/views/TodoList/TodoList.js | 84 + .../apps/todos/src/views/TodoList/TodoList.scss | 63 + .../todos/src/views/TodoList/TodoListFilters.js | 47 + .../apps/todos/src/views/TodoList/TodoListItem.js | 55 + .../projects/react-small-apps/commitlint.config.js | 1 + public/projects/react-small-apps/package.json | 33 + public/projects/react-small-apps/yarn.lock | 9872 ++++++++++++++++++++ 134 files changed, 13636 insertions(+) create mode 100644 public/projects/react-small-apps/.gitignore create mode 100755 public/projects/react-small-apps/.husky/commit-msg create mode 100644 public/projects/react-small-apps/CHANGELOG.md create mode 100644 public/projects/react-small-apps/LICENSE create mode 100644 public/projects/react-small-apps/README.md create mode 100644 public/projects/react-small-apps/apps/meme-generator/.env.example create mode 100644 public/projects/react-small-apps/apps/meme-generator/.gitignore create mode 100644 public/projects/react-small-apps/apps/meme-generator/README.md create mode 100644 public/projects/react-small-apps/apps/meme-generator/package.json create mode 100644 public/projects/react-small-apps/apps/meme-generator/public/favicon.ico create mode 100644 public/projects/react-small-apps/apps/meme-generator/public/index.html create mode 100644 public/projects/react-small-apps/apps/meme-generator/public/logo192.png create mode 100644 public/projects/react-small-apps/apps/meme-generator/public/logo512.png create mode 100644 public/projects/react-small-apps/apps/meme-generator/public/manifest.json create mode 100644 public/projects/react-small-apps/apps/meme-generator/public/preview-meme-generator.jpg create mode 100644 public/projects/react-small-apps/apps/meme-generator/public/robots.txt create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/Footer/Footer.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/Header/Header.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/Main/Main.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeFieldset/MemeFieldset.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeForm.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/MemePreview/Headline/Headline.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/MemePreview/MemePreview.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/commons/Button.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/commons/Fieldset.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/commons/Form.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/commons/Input.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/commons/InputRange.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/commons/Option.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/components/commons/Select.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/index.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/logo.svg create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/reportWebVitals.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/setupTests.js create mode 100644 public/projects/react-small-apps/apps/meme-generator/src/style.css create mode 100644 public/projects/react-small-apps/apps/notebook/.env.example create mode 100644 public/projects/react-small-apps/apps/notebook/.gitignore create mode 100644 public/projects/react-small-apps/apps/notebook/README.md create mode 100644 public/projects/react-small-apps/apps/notebook/package.json create mode 100644 public/projects/react-small-apps/apps/notebook/public/favicon.ico create mode 100644 public/projects/react-small-apps/apps/notebook/public/index.html create mode 100644 public/projects/react-small-apps/apps/notebook/public/manifest.json create mode 100644 public/projects/react-small-apps/apps/notebook/public/preview-cover.jpg create mode 100644 public/projects/react-small-apps/apps/notebook/public/preview-page.jpg create mode 100644 public/projects/react-small-apps/apps/notebook/public/robots.txt create mode 100644 public/projects/react-small-apps/apps/notebook/src/App.css create mode 100644 public/projects/react-small-apps/apps/notebook/src/App.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/App.test.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/commons/Button/Button.css create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/commons/Button/Button.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/Input/Input.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/TextArea/TextArea.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/commons/FormElements/index.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/commons/List/List.css create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/commons/List/List.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/commons/index.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/helpers/hooks/useToggle.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Footer/Footer.css create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Footer/Footer.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Header/Header.css create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Header/Header.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Main/Main.css create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Main/Main.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.css create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/Nav.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Nav/NavJump.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Cover.css create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.css create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Page/Page.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/Page/PageToolbar.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/components/layout/index.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/config/pages.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/images/restore.svg create mode 100644 public/projects/react-small-apps/apps/notebook/src/images/trash.svg create mode 100644 public/projects/react-small-apps/apps/notebook/src/index.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/logo.svg create mode 100644 public/projects/react-small-apps/apps/notebook/src/reportWebVitals.js create mode 100644 public/projects/react-small-apps/apps/notebook/src/setupTests.js create mode 100644 public/projects/react-small-apps/apps/todos/.env.example create mode 100644 public/projects/react-small-apps/apps/todos/.gitignore create mode 100644 public/projects/react-small-apps/apps/todos/README.md create mode 100644 public/projects/react-small-apps/apps/todos/assets/preview-single-todo.jpg create mode 100644 public/projects/react-small-apps/apps/todos/assets/preview-todo-account.jpg create mode 100644 public/projects/react-small-apps/apps/todos/assets/preview-todo-login.jpg create mode 100644 public/projects/react-small-apps/apps/todos/assets/preview-todos-list.jpg create mode 100644 public/projects/react-small-apps/apps/todos/package.json create mode 100644 public/projects/react-small-apps/apps/todos/public/favicon.ico create mode 100644 public/projects/react-small-apps/apps/todos/public/index.html create mode 100644 public/projects/react-small-apps/apps/todos/public/logo192.png create mode 100644 public/projects/react-small-apps/apps/todos/public/logo512.png create mode 100644 public/projects/react-small-apps/apps/todos/public/manifest.json create mode 100644 public/projects/react-small-apps/apps/todos/public/robots.txt create mode 100644 public/projects/react-small-apps/apps/todos/src/App.js create mode 100644 public/projects/react-small-apps/apps/todos/src/App.scss create mode 100644 public/projects/react-small-apps/apps/todos/src/components/forms/Button/Button.js create mode 100644 public/projects/react-small-apps/apps/todos/src/components/forms/Fieldset/Fieldset.js create mode 100644 public/projects/react-small-apps/apps/todos/src/components/forms/Form.scss create mode 100644 public/projects/react-small-apps/apps/todos/src/components/forms/Input/Input.js create mode 100644 public/projects/react-small-apps/apps/todos/src/components/forms/TextArea/TextArea.js create mode 100644 public/projects/react-small-apps/apps/todos/src/components/forms/index.js create mode 100644 public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.js create mode 100644 public/projects/react-small-apps/apps/todos/src/components/layout/Footer/Footer.scss create mode 100644 public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.js create mode 100644 public/projects/react-small-apps/apps/todos/src/components/layout/Header/Header.scss create mode 100644 public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.js create mode 100644 public/projects/react-small-apps/apps/todos/src/components/layout/Header/UserOptions/UserOptions.scss create mode 100644 public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.js create mode 100644 public/projects/react-small-apps/apps/todos/src/components/layout/Main/Main.scss create mode 100644 public/projects/react-small-apps/apps/todos/src/components/layout/index.js create mode 100644 public/projects/react-small-apps/apps/todos/src/index.js create mode 100644 public/projects/react-small-apps/apps/todos/src/sass/abstracts/_mixins.scss create mode 100644 public/projects/react-small-apps/apps/todos/src/sass/abstracts/_placeholders.scss create mode 100644 public/projects/react-small-apps/apps/todos/src/sass/abstracts/_variables.scss create mode 100644 public/projects/react-small-apps/apps/todos/src/services/LocalStorage.service.js create mode 100644 public/projects/react-small-apps/apps/todos/src/store/auth/auth.slice.js create mode 100644 public/projects/react-small-apps/apps/todos/src/store/index.js create mode 100644 public/projects/react-small-apps/apps/todos/src/store/todos/todos.slice.js create mode 100644 public/projects/react-small-apps/apps/todos/src/store/users/users.slice.js create mode 100644 public/projects/react-small-apps/apps/todos/src/utilities/helpers.js create mode 100644 public/projects/react-small-apps/apps/todos/src/utilities/hooks.js create mode 100644 public/projects/react-small-apps/apps/todos/src/views/Account/Account.js create mode 100644 public/projects/react-small-apps/apps/todos/src/views/Account/Account.scss create mode 100644 public/projects/react-small-apps/apps/todos/src/views/LoginForm/LoginForm.js create mode 100644 public/projects/react-small-apps/apps/todos/src/views/Logout/Logout.js create mode 100644 public/projects/react-small-apps/apps/todos/src/views/Todo/Todo.js create mode 100644 public/projects/react-small-apps/apps/todos/src/views/Todo/Todo.scss create mode 100644 public/projects/react-small-apps/apps/todos/src/views/TodoForm/TodoForm.js create mode 100644 public/projects/react-small-apps/apps/todos/src/views/TodoList/TodoList.js create mode 100644 public/projects/react-small-apps/apps/todos/src/views/TodoList/TodoList.scss create mode 100644 public/projects/react-small-apps/apps/todos/src/views/TodoList/TodoListFilters.js create mode 100644 public/projects/react-small-apps/apps/todos/src/views/TodoList/TodoListItem.js create mode 100644 public/projects/react-small-apps/commitlint.config.js create mode 100644 public/projects/react-small-apps/package.json create mode 100644 public/projects/react-small-apps/yarn.lock (limited to 'public/projects/react-small-apps') diff --git a/public/projects/react-small-apps/.gitignore b/public/projects/react-small-apps/.gitignore new file mode 100644 index 0000000..ef1353e --- /dev/null +++ b/public/projects/react-small-apps/.gitignore @@ -0,0 +1,10 @@ +# Dependencies +node_modules +yarn-error* + +# Misc +.vscode + +# Dotenv +.env* +!.env.example diff --git a/public/projects/react-small-apps/.husky/commit-msg b/public/projects/react-small-apps/.husky/commit-msg new file mode 100755 index 0000000..0bd658f --- /dev/null +++ b/public/projects/react-small-apps/.husky/commit-msg @@ -0,0 +1,4 @@ +#!/bin/sh +. "$(dirname "$0")/_/husky.sh" + +npx --no-install commitlint --edit "$1" diff --git a/public/projects/react-small-apps/CHANGELOG.md b/public/projects/react-small-apps/CHANGELOG.md new file mode 100644 index 0000000..5573077 --- /dev/null +++ b/public/projects/react-small-apps/CHANGELOG.md @@ -0,0 +1,35 @@ +# Changelog + +All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. + +## 2.0.0 (2022-02-17) + + +### ⚠ BREAKING CHANGES + +* **todos:** migrate to react router dom v6 +* **notebook:** migrate app to react router dom v6 +* the repo structure has changed. Apps are under +`/apps` directory. + +### Features + +* **meme:** add a button to delete each text settings ([6f2a4ce](https://github.com/ArmandPhilippot/react-small-apps/commit/6f2a4ce0c6d3dd82416db6b33af03785f0123283)) +* **meme:** add the possibility to enter 4 different texts ([dd81737](https://github.com/ArmandPhilippot/react-small-apps/commit/dd8173778dae5888e3bf973e508c72d9ae604cb7)) +* **notebook:** allow user to delete the current page ([2dae7c1](https://github.com/ArmandPhilippot/react-small-apps/commit/2dae7c13f0baaec35c61fc898b5fcab8040bc18e)) +* **notebook:** allow users to set a custom page title ([0138c91](https://github.com/ArmandPhilippot/react-small-apps/commit/0138c910e6d099c2f5fb946a291425d5120cd9c5)) +* **notebook:** allows user to delete then restore multiple pages ([84b9da2](https://github.com/ArmandPhilippot/react-small-apps/commit/84b9da2ac2683da980d3d3aed5f48f051a1e2ee5)) + + +### Bug Fixes + +* **todos:** redirect to login page if user is not logged in ([3e4934b](https://github.com/ArmandPhilippot/react-small-apps/commit/3e4934baecf7bb0e089f2e8602d8502dbd291295)) + + +### build + +* setup yarn to use this repo as a monorepo ([885cc3e](https://github.com/ArmandPhilippot/react-small-apps/commit/885cc3e54ad0b6b25ce3ec081f3beb9a2fa5166b)) + + +* **notebook:** migrate app to react router dom v6 ([93df0d0](https://github.com/ArmandPhilippot/react-small-apps/commit/93df0d081500d2c6876c5055b37f8633402a05d6)) +* **todos:** migrate to react router dom v6 ([aabdd05](https://github.com/ArmandPhilippot/react-small-apps/commit/aabdd05a8c995537823794674fff2306fcbfe944)) diff --git a/public/projects/react-small-apps/LICENSE b/public/projects/react-small-apps/LICENSE new file mode 100644 index 0000000..fb17359 --- /dev/null +++ b/public/projects/react-small-apps/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2021 Armand Philippot + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/public/projects/react-small-apps/README.md b/public/projects/react-small-apps/README.md new file mode 100644 index 0000000..15217cb --- /dev/null +++ b/public/projects/react-small-apps/README.md @@ -0,0 +1,15 @@ +# React Small Apps + +A collection of small apps implemented with ReactJS. + +## Description + +I want to keep track of some small apps but I don't want to pollute my Github space with multiple repositories. So, I decided to gather them inside an unique repo. + +## Preview + +You can see a live preview of each app here: https://demo.armandphilippot.com/ + +## License + +These projects are open-source and available under the [MIT License](./LICENSE). diff --git a/public/projects/react-small-apps/apps/meme-generator/.env.example b/public/projects/react-small-apps/apps/meme-generator/.env.example new file mode 100644 index 0000000..1b48ea9 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/.env.example @@ -0,0 +1,11 @@ +# Create React App config. +# See: https://create-react-app.dev/docs/advanced-configuration/ + +# Development +BROWSER='firefox-developer-edition' +BUILD_PATH='build' +PORT=3000 +HTTPS=false + +# Production +PUBLIC_URL='./' diff --git a/public/projects/react-small-apps/apps/meme-generator/.gitignore b/public/projects/react-small-apps/apps/meme-generator/.gitignore new file mode 100644 index 0000000..0732bb1 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/.gitignore @@ -0,0 +1,24 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local +.vscode + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/public/projects/react-small-apps/apps/meme-generator/README.md b/public/projects/react-small-apps/apps/meme-generator/README.md new file mode 100644 index 0000000..e0d510a --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/README.md @@ -0,0 +1,29 @@ +# React Meme Generator + +A meme generator implementation with React. + +## Requirements + +- Yarn + +## How to + +### Start the development version + +`yarn run start` + +### Start the build version: + +1. `yarn run build` +2. (`yarn global add serve`) +3. `serve -s build` + +## Preview + +You can see a live preview here: https://demo.armandphilippot.com/#meme-generator + +![Meme generator preview](./public/preview-meme-generator.jpg) + +## License + +This project is open source and available under the [MIT license](../LICENSE). diff --git a/public/projects/react-small-apps/apps/meme-generator/package.json b/public/projects/react-small-apps/apps/meme-generator/package.json new file mode 100644 index 0000000..0fd09d0 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/package.json @@ -0,0 +1,39 @@ +{ + "name": "react-meme-generator", + "description": "A meme generator implementation with ReactJS.", + "version": "1.0.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^5.16.2", + "@testing-library/react": "^12.1.3", + "@testing-library/user-event": "^13.5.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-scripts": "5.0.0", + "web-vitals": "^2.1.4" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/public/projects/react-small-apps/apps/meme-generator/public/favicon.ico b/public/projects/react-small-apps/apps/meme-generator/public/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/public/projects/react-small-apps/apps/meme-generator/public/favicon.ico differ diff --git a/public/projects/react-small-apps/apps/meme-generator/public/index.html b/public/projects/react-small-apps/apps/meme-generator/public/index.html new file mode 100644 index 0000000..fe333ac --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/public/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + Meme Generator + + + +
+ + diff --git a/public/projects/react-small-apps/apps/meme-generator/public/logo192.png b/public/projects/react-small-apps/apps/meme-generator/public/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/public/projects/react-small-apps/apps/meme-generator/public/logo192.png differ diff --git a/public/projects/react-small-apps/apps/meme-generator/public/logo512.png b/public/projects/react-small-apps/apps/meme-generator/public/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/public/projects/react-small-apps/apps/meme-generator/public/logo512.png differ diff --git a/public/projects/react-small-apps/apps/meme-generator/public/manifest.json b/public/projects/react-small-apps/apps/meme-generator/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/public/projects/react-small-apps/apps/meme-generator/public/preview-meme-generator.jpg b/public/projects/react-small-apps/apps/meme-generator/public/preview-meme-generator.jpg new file mode 100644 index 0000000..7d4579a Binary files /dev/null and b/public/projects/react-small-apps/apps/meme-generator/public/preview-meme-generator.jpg differ diff --git a/public/projects/react-small-apps/apps/meme-generator/public/robots.txt b/public/projects/react-small-apps/apps/meme-generator/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/Footer/Footer.js b/public/projects/react-small-apps/apps/meme-generator/src/components/Footer/Footer.js new file mode 100644 index 0000000..fbbe582 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/Footer/Footer.js @@ -0,0 +1,11 @@ +function Footer() { + return ( + + ); +} + +export default Footer; diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/Header/Header.js b/public/projects/react-small-apps/apps/meme-generator/src/components/Header/Header.js new file mode 100644 index 0000000..118ca1a --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/Header/Header.js @@ -0,0 +1,9 @@ +function Header() { + return ( +
+

Meme Generator

+
+ ); +} + +export default Header; diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/Main/Main.js b/public/projects/react-small-apps/apps/meme-generator/src/components/Main/Main.js new file mode 100644 index 0000000..8878002 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/Main/Main.js @@ -0,0 +1,16 @@ +import { useState } from "react"; +import MemeForm from "../MemeForm/MemeForm"; +import MemePreview from "../MemePreview/MemePreview"; + +function Main() { + const [headlines, setHeadlines] = useState([]); + + return ( +
+ + +
+ ); +} + +export default Main; diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeFieldset/MemeFieldset.js b/public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeFieldset/MemeFieldset.js new file mode 100644 index 0000000..2c0520e --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeFieldset/MemeFieldset.js @@ -0,0 +1,103 @@ +import { useEffect, useState } from "react"; +import Button from "../../commons/Button"; +import Fieldset from "../../commons/Fieldset"; +import Input from "../../commons/Input"; +import InputRange from "../../commons/InputRange"; +import Select from "../../commons/Select"; + +function MemeFieldset({ headline, setHeadline, xOptions, yOptions }) { + const { id, legend, text, fontSize, fontUnit, xPos, yPos } = headline; + const [inputTextValue, setInputTextValue] = useState(text); + const [inputRangeValue, setInputRangeValue] = useState(fontSize); + const [selectX, setSelectX] = useState(xPos); + const [selectY, setSelectY] = useState(yPos); + + useEffect(() => { + setInputTextValue(text); + }, [text]); + + useEffect(() => { + setHeadline((previous) => { + return previous.map((object) => { + if (object.id !== id) return object; + return { + ...object, + text: inputTextValue, + fontSize: inputRangeValue, + xPos: selectX, + yPos: selectY, + }; + }); + }); + }, [setHeadline, id, inputTextValue, inputRangeValue, selectX, selectY]); + + const onChange = (e) => { + switch (e.target.name) { + case "inputText": + setInputTextValue(e.target.value); + break; + case "inputRange": + setInputRangeValue(Number(e.target.value)); + break; + case "selectX": + setSelectX(e.target.value); + break; + case "selectY": + setSelectY(e.target.value); + break; + default: + break; + } + }; + + const onClick = (e) => { + setHeadline((previous) => previous.filter((object) => object.id !== id)); + }; + + return ( +
+
+ ); +} + +export default MemeFieldset; diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeForm.js b/public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeForm.js new file mode 100644 index 0000000..b6ce40f --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/MemeForm/MemeForm.js @@ -0,0 +1,54 @@ +import { useState } from "react"; +import Button from "../commons/Button"; +import Form from "../commons/Form"; +import MemeFieldset from "./MemeFieldset/MemeFieldset"; + +function MemeForm({ headlines, setHeadlines }) { + const [fieldsetId, setFieldsetId] = useState(1); + const horizontalOptions = ["Left", "Right", "Center"]; + const verticalOptions = ["Top", "Bottom", "Middle"]; + + const fieldsetData = { + id: fieldsetId, + legend: `Text settings ${fieldsetId}`, + text: "Edit here...", + fontSize: 100, + fontUnit: "%", + xPos: horizontalOptions[(fieldsetId - 1) % horizontalOptions.length], + yPos: verticalOptions[(fieldsetId - 1) % verticalOptions.length], + }; + + const onSubmit = (e) => { + e.preventDefault(); + }; + + const fieldsetsList = headlines.map((headline) => { + return ( + + ); + }); + + const addNewFieldset = () => { + setFieldsetId((previous) => previous + 1); + setHeadlines((array) => [...array, fieldsetData]); + }; + + return ( +
+
+ {fieldsetsList} + {fieldsetsList.length < 4 && ( +
+ ); +} + +export default MemeForm; diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/MemePreview/Headline/Headline.js b/public/projects/react-small-apps/apps/meme-generator/src/components/MemePreview/Headline/Headline.js new file mode 100644 index 0000000..e7ed579 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/MemePreview/Headline/Headline.js @@ -0,0 +1,120 @@ +import { useEffect, useRef, useState } from "react"; +import Form from "../../commons/Form"; +import Input from "../../commons/Input"; + +function Headline({ id, text, fontSize, xPos, yPos, setHeadlines }) { + const inputRef = useRef(null); + const [isEditing, setIsEditing] = useState(false); + useEffect(() => { + isEditing && inputRef.current.focus(); + }); + + const [inputValue, setInputValue] = useState(text); + useEffect(() => { + setInputValue(text); + }, [text]); + + const getXPos = () => { + let styles = {}; + switch (xPos) { + case "Left": + styles = { gridColumn: 1, textAlign: "left" }; + break; + case "Right": + styles = { gridColumn: 2, textAlign: "right" }; + break; + case "Center": + styles = { + gridColumnStart: 1, + gridColumnEnd: "span 2", + justifySelf: "center", + textAlign: "center", + }; + break; + default: + break; + } + return styles; + }; + + const getYPos = () => { + let styles = {}; + switch (yPos) { + case "Top": + styles = { gridRow: 1 }; + break; + case "Bottom": + styles = { gridRow: 3, alignSelf: "end" }; + break; + case "Middle": + styles = { gridRow: 2, alignSelf: "center" }; + break; + default: + break; + } + return styles; + }; + + const styles = { + fontSize: fontSize, + ...getYPos(), + ...getXPos(), + }; + + const onSubmit = (e) => { + e.preventDefault(); + setIsEditing(false); + }; + + const updateText = (e) => { + setInputValue(e.target.value); + }; + + useEffect(() => { + setHeadlines((previous) => { + return previous.map((headline) => { + if (headline.id !== id) return headline; + return { ...headline, text: inputValue }; + }); + }); + }, [setHeadlines, id, inputValue]); + + useEffect(() => { + setHeadlines((previous) => { + return previous.map((headline) => { + if (headline.id !== id) return headline; + return { ...headline, text: inputValue }; + }); + }); + }, [setHeadlines, id, inputValue]); + + const onBlur = () => { + setIsEditing(false); + }; + + return ( + <> + {isEditing ? ( +
+ +
+ ) : ( +

setIsEditing(true)} + style={styles} + > + {inputValue} +

+ )} + + ); +} + +export default Headline; diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/MemePreview/MemePreview.js b/public/projects/react-small-apps/apps/meme-generator/src/components/MemePreview/MemePreview.js new file mode 100644 index 0000000..6577e53 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/MemePreview/MemePreview.js @@ -0,0 +1,61 @@ +import { useEffect, useState } from "react"; +import Button from "../commons/Button"; +import Headline from "./Headline/Headline"; + +async function fetchMemes() { + const response = await fetch("https://api.imgflip.com/get_memes"); + const result = await response.json(); + return await result; +} + +function MemePreview({ headlines, setHeadlines }) { + const [memesList, setMemesList] = useState([]); + const [isFetched, setIsFetched] = useState(false); + useEffect(() => { + fetchMemes().then((object) => setMemesList(object.data.memes)); + setIsFetched(true); + return () => setIsFetched(false); + }, [setIsFetched]); + + const [selectedMeme, setSelectedMeme] = useState({}); + useEffect(() => { + setSelectedMeme(memesList[5]); + }, [memesList]); + + const getRandomMeme = () => { + const randomIndex = Math.floor(Math.random() * memesList.length); + setSelectedMeme(memesList[randomIndex]); + }; + + const headlinesList = headlines.map((headline) => ( + + )); + + return ( +
+
+ {isFetched && selectedMeme ? ( + {selectedMeme.name} + ) : ( + "Loading..." + )} + {headlinesList} +
+
+ ); +} + +export default MemePreview; diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Button.js b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Button.js new file mode 100644 index 0000000..98967a8 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Button.js @@ -0,0 +1,11 @@ +function Button({ body, modifier, onClick }) { + const classNames = `btn ${modifier ? `btn--${modifier}` : ""}`; + + return ( + + ); +} + +export default Button; diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Fieldset.js b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Fieldset.js new file mode 100644 index 0000000..d76e3e7 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Fieldset.js @@ -0,0 +1,10 @@ +function Fieldset({ children, legend = "Legend" }) { + return ( +
+ {legend} + {children} +
+ ); +} + +export default Fieldset; diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Form.js b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Form.js new file mode 100644 index 0000000..5ab1948 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Form.js @@ -0,0 +1,21 @@ +function Form({ + children, + action = "#", + method = "post", + styles, + onSubmitHandler, +}) { + return ( +
+ {children} +
+ ); +} + +export default Form; diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Input.js b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Input.js new file mode 100644 index 0000000..68e4e77 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Input.js @@ -0,0 +1,41 @@ +import { forwardRef } from "react"; + +function Input( + { + label, + id, + name, + type = "text", + value, + onChangeHandler, + onBlurHandler, + additionalClasses = "", + }, + ref +) { + const classNames = `form__input ${additionalClasses}`; + + return ( + <> + {label ? ( + + ) : ( + "" + )} + + + ); +} + +export default forwardRef(Input); diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/commons/InputRange.js b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/InputRange.js new file mode 100644 index 0000000..1172966 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/InputRange.js @@ -0,0 +1,37 @@ +function InputRange({ + label, + id, + name, + min = 5, + max = 200, + step = 1, + unit = "px", + value, + onChangeHandler, +}) { + return ( + <> + {label ? ( + + ) : ( + "" + )} + + + ); +} + +export default InputRange; diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Option.js b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Option.js new file mode 100644 index 0000000..4064798 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Option.js @@ -0,0 +1,5 @@ +function Option({ value, body }) { + return ; +} + +export default Option; diff --git a/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Select.js b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Select.js new file mode 100644 index 0000000..9517b23 --- /dev/null +++ b/public/projects/react-small-apps/apps/meme-generator/src/components/commons/Select.js @@ -0,0 +1,31 @@ +import Option from "./Option"; + +function Select({ id, name, label, options, value, onChangeHandler }) { + const optionsList = options.map((option) => { + const optionValue = option.replace(" ", "-"); + return