From 73a5c7fae9ffbe9ada721148c8c454a643aceebe Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
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.
---
 .../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 ++++++++++++++++
 7 files changed, 156 insertions(+)
 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

(limited to 'public/projects/react-small-apps/apps/meme-generator/src/components/commons')

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 (
+    <button className={classNames} onClick={onClick}>
+      {body}
+    </button>
+  );
+}
+
+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 (
+    <fieldset className="form__fieldset">
+      <legend className="form__legend">{legend}</legend>
+      {children}
+    </fieldset>
+  );
+}
+
+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 (
+    <form
+      action={action}
+      method={method}
+      onSubmit={onSubmitHandler}
+      className="form"
+      style={styles}
+    >
+      {children}
+    </form>
+  );
+}
+
+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 ? (
+        <label className="form__label" htmlFor={id}>
+          {label}
+        </label>
+      ) : (
+        ""
+      )}
+      <input
+        id={id}
+        name={name}
+        ref={ref}
+        type={type}
+        value={value}
+        onChange={onChangeHandler}
+        onBlur={onBlurHandler}
+        className={classNames}
+      />
+    </>
+  );
+}
+
+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 ? (
+        <label className="form__label" htmlFor={id}>
+          {label}
+        </label>
+      ) : (
+        ""
+      )}
+      <input
+        type="range"
+        id={id}
+        name={name}
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={onChangeHandler}
+        title={`${value}${unit}`}
+        className="form__input form__input--range"
+      />
+    </>
+  );
+}
+
+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 <option value={value}>{body}</option>;
+}
+
+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 <Option key={optionValue} value={optionValue} body={option} />;
+  });
+
+  return (
+    <>
+      {label ? (
+        <label className="form__label" htmlFor={id}>
+          {label}
+        </label>
+      ) : (
+        ""
+      )}
+      <select
+        id={id}
+        name={name}
+        className="form__select"
+        value={value}
+        onChange={onChangeHandler}
+      >
+        {optionsList}
+      </select>
+    </>
+  );
+}
+
+export default Select;
-- 
cgit v1.2.3