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.

6 files changed, 260 insertions, 0 deletions

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 (
+    <button type={type} className={classNames} onClick={onClickHandler}>
+      {children}
+    </button>
+  );
+}
+
+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 (
+    <fieldset className="form__fieldset">
+      <legend className="form__legend">{legend}</legend>
+      {children}
+    </fieldset>
+  );
+}
+
+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 && (
+        <label htmlFor={id} className="form__label">
+          {label}
+        </label>
+      )}
+      <input
+        type={type}
+        id={id}
+        name={name}
+        value={type === "checkbox" ? undefined : value}
+        checked={type === "checkbox" ? value : null}
+        required={required ? "required" : false}
+        onChange={handleChange}
+        onBlur={onBlurHandler}
+        className="form__field"
+      />
+    </>
+  );
+}
+
+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 ? (
+        <label htmlFor={id} className="form__label">
+          {label}
+        </label>
+      ) : (
+        ""
+      )}
+      <textarea
+        value={value}
+        onChange={handleChange}
+        className="form__field form__field--textarea"
+      />
+    </>
+  );
+}
+
+export default TextArea;
diff --git a/public/projects/react-small-apps/apps/todos/src/components/forms/index.js b/public/projects/react-small-apps/apps/todos/src/components/forms/index.js
new file mode 100644
index 0000000..76cc2c4
--- /dev/null
+++ b/public/projects/react-small-apps/apps/todos/src/components/forms/index.js
@@ -0,0 +1,7 @@
+import Button from "./Button/Button";
+import Fieldset from "./Fieldset/Fieldset";
+import Input from "./Input/Input";
+import TextArea from "./TextArea/TextArea";
+import "./Form.scss";
+
+export { Button, Fieldset, Input, TextArea };