Add more default components + scripts

2024-04-06 18:03:49 -04:00 · 2024-04-06 18:03:49 -04:00 · 85e11bad1e
commit 85e11bad1e
parent f5788251fa
20 changed files with 319 additions and 17 deletions
--- a/package.json
+++ b/package.json
@ -6,12 +6,16 @@
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
+    "fs-extra": "^11.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
+  "devDependencies": {
+  },
  "scripts": {
+    "nc": "node scripts/new-component.mjs",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
--- a/public/index.html
+++ b/public/index.html
@ -29,15 +29,5 @@
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
  </body>
 </html>
--- a/scripts/new-component.mjs
+++ b/scripts/new-component.mjs
@ -0,0 +1,63 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { outputFile } from "fs-extra";
+
+const componentName = process.argv[2];
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Note for later use //
+// To use this script :
+// yarn nc <folderName>/<componentName>
+// Exemple : "yarn nc components/MyComponent" will create
+// a folder MyComponent (and all the basic) within the components folder
+
+function lowerCaseFirstLetter(string) {
+  return string.charAt(0).toLowerCase() + string.slice(1);
+}
+
+function returnComponentPath(cpt, fileType) {
+  if (cpt.includes("/")) {
+    const pathName = cpt.split("/")[0];
+    const component = cpt.split("/")[1];
+    return `${pathName}/${component}/${fileType}`;
+  }
+  return `${cpt}/${fileType}`;
+}
+
+function checkComponentName(cpt) {
+  if (cpt.includes("/")) {
+    return cpt.split("/")[1];
+  }
+  return cpt;
+}
+
+// Create the default index.js file
+outputFile(
+  `${__dirname}/../src/${returnComponentPath(componentName, "index.js")}`,
+  `import './styles.css';
+
+const ${checkComponentName(componentName)} = () => {
+  return <div className="${lowerCaseFirstLetter(
+    checkComponentName(componentName)
+  )}"></div>;
+};
+
+export default ${checkComponentName(componentName)};`,
+  function (err) {
+    if (err) {
+      return console.log(err);
+    }
+    // Create the default styles.css file
+    outputFile(
+      `${__dirname}/../src/${returnComponentPath(componentName, "styles.css")}`,
+      `.${lowerCaseFirstLetter(checkComponentName(componentName))} {}`,
+      function (err) {
+        if (err) {
+          return console.log(err);
+        }
+        console.log("The file was saved!");
+      }
+    );
+  }
+);
--- a/src/assets/img/logo512.png
+++ b/src/assets/img/logo512.png
--- a/src/components/Heading/index.js
+++ b/src/components/Heading/index.js
@ -0,0 +1,28 @@
+import "./styles.css";
+
+/**
+ * Heading component.
+ *
+ * This is a reusable heading component. It accepts a prop `As` which determines the HTML element to be used for the heading.
+ * It also accepts a prop `className` which is used to add a class to the heading.
+ * Some default className can be added such as :
+ * ```scss
+ * subtitle
+ * h2-like
+ * h3-like
+ * h4-like
+ * ```
+ *
+ * Example usage:
+ *
+ * ```jsx
+ * <Heading As="h1" className='h2-like'>Title</Heading>
+ * ```
+ */
+const Heading = ({ As, className, children }) => {
+  return (
+    <As className={`heading ${className ? className : ""}`}>{children}</As>
+  );
+};
+
+export default Heading;
--- a/src/components/Heading/styles.css
+++ b/src/components/Heading/styles.css
@ -0,0 +1,38 @@
+/* Reminder
+The base font size is 16px. To use EM value for font size,
+divide the pixel value by 16.
+For example, 32px = 2em, 24px = 1.5em, 16px = 1em, 8px = 0.5em, etc.
+*/
+
+.heading {
+  font-family: "Poppins", "Arial", sans-serif;
+  font-size: 4em;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--color-primary);
+}
+
+.h2-like {
+  font-size: 3em;
+  font-weight: 600;
+}
+
+.h3-like {
+  font-size: 2em;
+  font-weight: 600;
+}
+
+.h4-like {
+  font-size: 1.5em;
+  font-weight: 400;
+}
+
+.h5-like,
+.h6-like {
+  font-size: 1em;
+  font-weight: 400;
+}
+
+.subtitle {
+  color: var(--color-secondary);
+}
--- a/src/components/Navbar/index.js
+++ b/src/components/Navbar/index.js
@ -0,0 +1,7 @@
+import './styles.css';
+
+const Navbar = () => {
+  return <div className="navbar"></div>;
+};
+
+export default Navbar;
--- a/src/components/Navbar/styles.css
+++ b/src/components/Navbar/styles.css
@ -0,0 +1 @@
+.navbar {}
--- a/src/contexts/GlobalContext/index.js
+++ b/src/contexts/GlobalContext/index.js
@ -0,0 +1,38 @@
+import { createContext, useReducer } from "react";
+
+import closeModals from "../reducers/closeModal";
+import handleModal from "../reducers/handleModal";
+
+const GlobalContext = createContext();
+
+export const GlobalContextProvider = (props) => {
+  const openModalWithUrl = () => {
+    return null;
+  };
+
+  let initialState = {
+    modal: openModalWithUrl(),
+  };
+
+  const reducer = (state, action) => {
+    switch (action.type) {
+      case "HANDLE_MODAL":
+        return handleModal(state, action);
+      case "CLOSE_MODALS":
+        return closeModals(state);
+
+      default:
+        return state;
+    }
+  };
+
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  return (
+    <GlobalContext.Provider value={{ state, dispatch }}>
+      {props.children}
+    </GlobalContext.Provider>
+  );
+};
+
+export default GlobalContext;
--- a/src/contexts/reducers/closeModal.js
+++ b/src/contexts/reducers/closeModal.js
@ -0,0 +1,12 @@
+// FYI : This reducer isn't used anymore unless
+// you need to force close a modal.
+// go to : hooks/useModal.js for the new usage.
+
+const closeModals = (state) => {
+  return {
+    ...state,
+    modal: null,
+  };
+};
+
+export default closeModals;
--- a/src/contexts/reducers/handleModal.js
+++ b/src/contexts/reducers/handleModal.js
@ -0,0 +1,10 @@
+const handleModal = (state, action) => {
+  const { payload } = action;
+
+  return {
+    ...state,
+    modal: payload,
+  };
+};
+
+export default handleModal;
--- a/src/hooks/useModal.js
+++ b/src/hooks/useModal.js
@ -0,0 +1,30 @@
+import { useContext } from "react";
+
+import GlobalContext from "../components/contexts/GlobalContext";
+
+const useModal = () => {
+  const { dispatch } = useContext(GlobalContext);
+
+  // Open a Component modal
+  const openModal = (Modal) => {
+    dispatch({
+      type: "HANDLE_MODAL",
+      payload: Modal,
+    });
+  };
+
+  // Close a Modal
+  const closeModal = () => {
+    dispatch({
+      type: "HANDLE_MODAL",
+      payload: null,
+    });
+  };
+
+  return {
+    openModal,
+    closeModal,
+  };
+};
+
+export default useModal;
--- a/src/hooks/useResize.js
+++ b/src/hooks/useResize.js
@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+
+const useResize = () => {
+  //   const isBrowser = typeof window !== "undefined";
+  const [dimensions, setDimensions] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  const handleWindowResize = () => {
+    setDimensions({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener("resize", handleWindowResize);
+    handleWindowResize();
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
+  }, [setDimensions]);
+
+  return {
+    dimensions,
+  };
+};
+
+export default useResize;
--- a/src/index.js
+++ b/src/index.js
@ -1,13 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import "./index.css";

-const root = ReactDOM.createRoot(document.getElementById('root'));
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { GlobalContextProvider } from "./contexts/GlobalContext";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
  <React.StrictMode>
+    <GlobalContextProvider>
      <App />
+    </GlobalContextProvider>
  </React.StrictMode>
 );

--- a/src/layouts/Footer/index.js
+++ b/src/layouts/Footer/index.js
@ -0,0 +1,7 @@
+import './styles.css';
+
+const Footer = () => {
+  return <div className="footer"></div>;
+};
+
+export default Footer;
--- a/src/layouts/Footer/styles.css
+++ b/src/layouts/Footer/styles.css
@ -0,0 +1 @@
+.footer {}
--- a/src/layouts/Modals/index.js
+++ b/src/layouts/Modals/index.js
@ -0,0 +1,29 @@
+import "./_styles.scss";
+
+import Container from "../Container";
+import Heading from "../../components/Heading";
+import { closeModal } from "../../hooks/useModal";
+
+const Modals = ({ headingTitle, className, children }) => {
+  return (
+    <div className={`modal__overlay ${className ? className : ""}`}>
+      <Container>
+        <div className="modal">
+          <div className="modal__header">
+            <Heading As="h3" className="modal__heading">
+              {headingTitle}
+            </Heading>
+            <div className="modalHeader__btn">
+              <span className="close" onClick={closeModal}>
+                Close SVG
+              </span>
+            </div>
+          </div>
+          <div className="modal__content">{children}</div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default Modals;
--- a/src/layouts/Modals/styles.css
+++ b/src/layouts/Modals/styles.css
@ -0,0 +1 @@
+.modals {}
--- a/src/pages/Home/index.js
+++ b/src/pages/Home/index.js
@ -0,0 +1,7 @@
+import './styles.css';
+
+const Home = () => {
+  return <div className="home"></div>;
+};
+
+export default Home;
--- a/src/pages/Home/styles.css
+++ b/src/pages/Home/styles.css
@ -0,0 +1 @@
+.home {}