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. --- .../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 + 6 files changed, 260 insertions(+) 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 (limited to 'public/projects/react-small-apps/apps/todos/src/components/forms') diff --git a/public/projects/react-small-apps/apps/todos/src/components/forms/Button/Button.js b/public/projects/react-small-apps/apps/todos/src/components/forms/Button/Button.js new file mode 100644 index 0000000..f9c7956 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/forms/Button/Button.js @@ -0,0 +1,17 @@ +function Button({ children, modifiers, onClickHandler, type = "button" }) { + let classNames = "btn"; + + if (modifiers && modifiers.length > 0) { + for (let i = 0; i < modifiers.length; i++) { + classNames += ` btn--${modifiers[i]}`; + } + } + + return ( + + ); +} + +export default Button; diff --git a/public/projects/react-small-apps/apps/todos/src/components/forms/Fieldset/Fieldset.js b/public/projects/react-small-apps/apps/todos/src/components/forms/Fieldset/Fieldset.js new file mode 100644 index 0000000..53dafd4 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/forms/Fieldset/Fieldset.js @@ -0,0 +1,10 @@ +function Fieldset({ children, legend }) { + return ( +
+ {legend} + {children} +
+ ); +} + +export default Fieldset; diff --git a/public/projects/react-small-apps/apps/todos/src/components/forms/Form.scss b/public/projects/react-small-apps/apps/todos/src/components/forms/Form.scss new file mode 100644 index 0000000..1b07c07 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/forms/Form.scss @@ -0,0 +1,163 @@ +@use "../../sass/abstracts/variables" as var; + +.form { + &__fieldset { + border: 2px solid var.$primary-color; + padding: 1rem 1rem 2rem; + width: max-content; + } + + &--login & { + &__fieldset { + margin: auto; + } + } + + &--todo { + margin-top: 1rem; + } +} + +.form__legend { + color: var.$primary-color; + font-size: 1.1rem; + font-weight: 600; + padding: 0 1rem; +} + +.form__label { + display: block; + margin-bottom: 0.5rem; + color: var.$primary-color-dark; + font-size: 0.9rem; + font-weight: 600; + letter-spacing: 1px; + text-transform: uppercase; + cursor: pointer; +} + +.form__field { + border: 2px solid var.$primary-color; + transition: all 0.3s ease-in-out 0s; + + &:not([type="checkbox"]) { + width: 100%; + padding: 0.5rem; + + &:focus { + box-shadow: 2px 2px 2px var.$shadow-color; + outline: none; + transform: translateY(-2px) translateX(-2px); + } + + & + * { + margin-top: 1rem; + } + } + + &--textarea { + min-height: 10rem; + min-width: 20rem; + } +} + +.btn { + display: block; + padding: clamp(0.5rem, 3vw, 0.8rem) clamp(0.5rem, 3vw, 1rem); + border: none; + border-radius: 3px; + font-weight: 600; + cursor: pointer; +} + +.btn--submit { + background: var.$primary-color; + color: hsl(0, 0%, 100%); + margin-left: auto; + margin-right: auto; + transition: all 0.3s ease-in-out 0s; + + &:hover { + background-color: var.$primary-color-light; + transform: scale(1.1); + } + + &:active { + background-color: var.$primary-color-dark; + transform: scale(1); + } +} + +.btn--user { + background: var.$secondary-color; + border: 2px solid var.$primary-color; + border-radius: 50%; + width: 5rem; + height: 5rem; + padding: 1rem; + + &:hover { + background: var.$secondary-color-light; + border-color: var.$primary-color-light; + } + + &:active { + background: var.$secondary-color-dark; + border-color: var.$primary-color-dark; + } +} + +.btn--action { + background-image: linear-gradient( + to left, + var.$background-color, + var.$background-color 50%, + var.$primary-color 50% + ); + background-size: 201% 100%; + background-position: 100% 0; + background-repeat: no-repeat; + border: 3px solid var.$primary-color; + border-radius: 6px; + color: var.$primary-color; + transition: all 0.3s ease-in-out 0s; + + &:hover { + background-position: 0 0; + color: var.$foreground-color-alt; + } + + &:active { + background-position: 100% 0; + color: var.$primary-color-dark; + text-decoration: underline 1px; + } +} + +.btn--delete { + background-image: linear-gradient( + to left, + var.$background-color, + var.$background-color 50%, + var.$delete-color 50% + ); + border-color: var.$delete-color; + color: var.$delete-color; + + &:hover { + color: var.$foreground-color-alt; + } + + &:active { + color: var.$delete-color; + } +} + +.btn--filters { + background: var.$background-color; + border: 1px solid #666; + + &.btn--current { + background: #ededed; + } +} diff --git a/public/projects/react-small-apps/apps/todos/src/components/forms/Input/Input.js b/public/projects/react-small-apps/apps/todos/src/components/forms/Input/Input.js new file mode 100644 index 0000000..86e660c --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/forms/Input/Input.js @@ -0,0 +1,39 @@ +function Input({ + label, + id, + name, + value, + updateValue, + onBlurHandler, + required, + type = "text", +}) { + const handleChange = (e) => { + e.target.type === "checkbox" + ? updateValue(e.target.checked) + : updateValue(e.target.value); + }; + + return ( + <> + {label && ( + + )} + + + ); +} + +export default Input; diff --git a/public/projects/react-small-apps/apps/todos/src/components/forms/TextArea/TextArea.js b/public/projects/react-small-apps/apps/todos/src/components/forms/TextArea/TextArea.js new file mode 100644 index 0000000..78a10b6 --- /dev/null +++ b/public/projects/react-small-apps/apps/todos/src/components/forms/TextArea/TextArea.js @@ -0,0 +1,24 @@ +function TextArea({ label, id, value, updateValue }) { + const handleChange = (e) => { + updateValue(e.target.value); + }; + + return ( + <> + {label ? ( + + ) : ( + "" + )} +