From 85e11bad1e0dd092d3d6cfddaad1c8ddb5ef8af0 Mon Sep 17 00:00:00 2001 From: Krosmez Date: Sat, 6 Apr 2024 18:03:49 -0400 Subject: [PATCH] Add more default components + scripts --- package.json | 4 ++ public/index.html | 10 ----- scripts/new-component.mjs | 63 +++++++++++++++++++++++++++ src/assets/img/logo512.png | Bin 0 -> 9664 bytes src/components/Heading/index.js | 28 ++++++++++++ src/components/Heading/styles.css | 38 ++++++++++++++++ src/components/Navbar/index.js | 7 +++ src/components/Navbar/styles.css | 1 + src/contexts/GlobalContext/index.js | 38 ++++++++++++++++ src/contexts/reducers/closeModal.js | 12 +++++ src/contexts/reducers/handleModal.js | 10 +++++ src/hooks/useModal.js | 30 +++++++++++++ src/hooks/useResize.js | 30 +++++++++++++ src/index.js | 19 +++++--- src/layouts/Footer/index.js | 7 +++ src/layouts/Footer/styles.css | 1 + src/layouts/Modals/index.js | 29 ++++++++++++ src/layouts/Modals/styles.css | 1 + src/pages/Home/index.js | 7 +++ src/pages/Home/styles.css | 1 + 20 files changed, 319 insertions(+), 17 deletions(-) create mode 100644 scripts/new-component.mjs create mode 100644 src/assets/img/logo512.png create mode 100644 src/components/Heading/index.js create mode 100644 src/components/Heading/styles.css create mode 100644 src/components/Navbar/index.js create mode 100644 src/components/Navbar/styles.css create mode 100644 src/contexts/GlobalContext/index.js create mode 100644 src/contexts/reducers/closeModal.js create mode 100644 src/contexts/reducers/handleModal.js create mode 100644 src/hooks/useModal.js create mode 100644 src/hooks/useResize.js create mode 100644 src/layouts/Footer/index.js create mode 100644 src/layouts/Footer/styles.css create mode 100644 src/layouts/Modals/index.js create mode 100644 src/layouts/Modals/styles.css create mode 100644 src/pages/Home/index.js create mode 100644 src/pages/Home/styles.css diff --git a/package.json b/package.json index 8ad1736..33c3b9f 100644 --- 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", diff --git a/public/index.html b/public/index.html index aa069f2..427f402 100644 --- a/public/index.html +++ b/public/index.html @@ -29,15 +29,5 @@
- diff --git a/scripts/new-component.mjs b/scripts/new-component.mjs new file mode 100644 index 0000000..9680977 --- /dev/null +++ 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 / +// 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
; +}; + +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!"); + } + ); + } +); diff --git a/src/assets/img/logo512.png b/src/assets/img/logo512.png new file mode 100644 index 0000000000000000000000000000000000000000..a4e47a6545bc15971f8f63fba70e4013df88a664 GIT binary patch literal 9664 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 b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN literal 0 HcmV?d00001 diff --git a/src/components/Heading/index.js b/src/components/Heading/index.js new file mode 100644 index 0000000..d9285fa --- /dev/null +++ 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 + * Title + * ``` + */ +const Heading = ({ As, className, children }) => { + return ( + {children} + ); +}; + +export default Heading; diff --git a/src/components/Heading/styles.css b/src/components/Heading/styles.css new file mode 100644 index 0000000..a58e2fa --- /dev/null +++ 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); +} \ No newline at end of file diff --git a/src/components/Navbar/index.js b/src/components/Navbar/index.js new file mode 100644 index 0000000..a2acadd --- /dev/null +++ b/src/components/Navbar/index.js @@ -0,0 +1,7 @@ +import './styles.css'; + +const Navbar = () => { + return
; +}; + +export default Navbar; \ No newline at end of file diff --git a/src/components/Navbar/styles.css b/src/components/Navbar/styles.css new file mode 100644 index 0000000..e4f1885 --- /dev/null +++ b/src/components/Navbar/styles.css @@ -0,0 +1 @@ +.navbar {} \ No newline at end of file diff --git a/src/contexts/GlobalContext/index.js b/src/contexts/GlobalContext/index.js new file mode 100644 index 0000000..1d471ca --- /dev/null +++ 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 ( + + {props.children} + + ); +}; + +export default GlobalContext; diff --git a/src/contexts/reducers/closeModal.js b/src/contexts/reducers/closeModal.js new file mode 100644 index 0000000..8a1aedc --- /dev/null +++ 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; diff --git a/src/contexts/reducers/handleModal.js b/src/contexts/reducers/handleModal.js new file mode 100644 index 0000000..15a07a2 --- /dev/null +++ b/src/contexts/reducers/handleModal.js @@ -0,0 +1,10 @@ +const handleModal = (state, action) => { + const { payload } = action; + + return { + ...state, + modal: payload, + }; +}; + +export default handleModal; diff --git a/src/hooks/useModal.js b/src/hooks/useModal.js new file mode 100644 index 0000000..efdedb3 --- /dev/null +++ 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; diff --git a/src/hooks/useResize.js b/src/hooks/useResize.js new file mode 100644 index 0000000..5119a7d --- /dev/null +++ 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; diff --git a/src/index.js b/src/index.js index d563c0f..cdca195 100644 --- 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( - + + + ); diff --git a/src/layouts/Footer/index.js b/src/layouts/Footer/index.js new file mode 100644 index 0000000..66c2e7e --- /dev/null +++ b/src/layouts/Footer/index.js @@ -0,0 +1,7 @@ +import './styles.css'; + +const Footer = () => { + return
; +}; + +export default Footer; \ No newline at end of file diff --git a/src/layouts/Footer/styles.css b/src/layouts/Footer/styles.css new file mode 100644 index 0000000..e246b7c --- /dev/null +++ b/src/layouts/Footer/styles.css @@ -0,0 +1 @@ +.footer {} \ No newline at end of file diff --git a/src/layouts/Modals/index.js b/src/layouts/Modals/index.js new file mode 100644 index 0000000..f3e1ab9 --- /dev/null +++ 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 ( +
+ +
+
+ + {headingTitle} + +
+ + Close SVG + +
+
+
{children}
+
+ +
+ ); +}; + +export default Modals; diff --git a/src/layouts/Modals/styles.css b/src/layouts/Modals/styles.css new file mode 100644 index 0000000..c04f7b8 --- /dev/null +++ b/src/layouts/Modals/styles.css @@ -0,0 +1 @@ +.modals {} \ No newline at end of file diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js new file mode 100644 index 0000000..6e9df12 --- /dev/null +++ b/src/pages/Home/index.js @@ -0,0 +1,7 @@ +import './styles.css'; + +const Home = () => { + return
; +}; + +export default Home; \ No newline at end of file diff --git a/src/pages/Home/styles.css b/src/pages/Home/styles.css new file mode 100644 index 0000000..f8ab51b --- /dev/null +++ b/src/pages/Home/styles.css @@ -0,0 +1 @@ +.home {} \ No newline at end of file