Krosmez/hanzo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add more default components + scripts

Browse Source
This commit is contained in:
Krosmez 2024-04-06 18:03:49 -04:00
parent f5788251fa
commit 85e11bad1e
20 changed files with 319 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -6,12 +6,16 @@
"@testing-library/jest-dom": "^5.17.0", "@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0", "@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0", "@testing-library/user-event": "^13.5.0",
"fs-extra": "^11.2.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-scripts": "5.0.1", "react-scripts": "5.0.1",
"web-vitals": "^2.1.4" "web-vitals": "^2.1.4"
}, },
"devDependencies": {
},
"scripts": { "scripts": {
"nc": "node scripts/new-component.mjs",
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",

10
public/index.html
View File

@ -29,15 +29,5 @@
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <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> </body>
</html> </html>

63
scripts/new-component.mjs Normal file
View File

@ -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!");
}
);
}
);

BIN
src/assets/img/logo512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

28
src/components/Heading/index.js Normal file
View File

@ -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;

38
src/components/Heading/styles.css Normal file
View File

@ -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);
}

7
src/components/Navbar/index.js Normal file
View File

@ -0,0 +1,7 @@
import './styles.css';
const Navbar = () => {
return <div className="navbar"></div>;
};
export default Navbar;

1
src/components/Navbar/styles.css Normal file
View File

@ -0,0 +1 @@
.navbar {}

38
src/contexts/GlobalContext/index.js Normal file
View File

@ -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;

12
src/contexts/reducers/closeModal.js Normal file
View File

@ -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;

10
src/contexts/reducers/handleModal.js Normal file
View File

@ -0,0 +1,10 @@
const handleModal = (state, action) => {
const { payload } = action;
return {
...state,
modal: payload,
};
};
export default handleModal;

30
src/hooks/useModal.js Normal file
View File

@ -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;

30
src/hooks/useResize.js Normal file
View File

@ -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;

19
src/index.js
View File

@ -1,13 +1,18 @@
import React from 'react'; import "./index.css";
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
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( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <GlobalContextProvider>
<App />
</GlobalContextProvider>
</React.StrictMode> </React.StrictMode>
); );

7
src/layouts/Footer/index.js Normal file
View File

@ -0,0 +1,7 @@
import './styles.css';
const Footer = () => {
return <div className="footer"></div>;
};
export default Footer;

1
src/layouts/Footer/styles.css Normal file
View File

@ -0,0 +1 @@
.footer {}

29
src/layouts/Modals/index.js Normal file
View File

@ -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;

1
src/layouts/Modals/styles.css Normal file
View File

@ -0,0 +1 @@
.modals {}

7
src/pages/Home/index.js Normal file
View File

@ -0,0 +1,7 @@
import './styles.css';
const Home = () => {
return <div className="home"></div>;
};
export default Home;

1
src/pages/Home/styles.css Normal file
View File

@ -0,0 +1 @@
.home {}