Feature/refactor responsive provider

README.md

@@ -76,3 +76,21 @@ Styled components is a popular CSS-in-JS library developed for React. It is conf
 There are already base functions to add responsive padding, margin and frames to your components.
 
 > See IPadding, IMargin and IFrames available at `./interfaces/layout.ts`
+
+---
+
+# Contributing
+
+### Creating a new template
+
+1. Create a new folder in `./packages` with the name of your template.
+2. Create the following files, inspired by other templates (see `./packages/base` for an example):
+   - `./packages/[template-name]/package.json`
+   - `./packages/[template-name]/pages/index.tsx`
+   - `./packages/[template-name]/tsconfig.json`
+   - `./packages/[template-name]/next.config.js`
+   - `./packages/[template-name]/next-env.d.ts`
+3. Open `./scripts/build.js` and add your template to the `templates` array (the name has to be the same as the template directory name in `./packages`).
+   - `const templates = ['base', 'mui', 'styled-components', 'new-template-name'];`
+4. Go to the project root directory `./` and run `npm run build` to copy the template common files to the new template.
+5. Go to your template (`cd ./packages/[template-name]`) and start development with `npm run dev`.

common/contexts/ResponsiveContext/ResponsiveContext.functions.ts

@@ -0,0 +1,40 @@
+import { IFrames } from './ResponsiveContext.type';
+
+function getResponsive(): IFrames {
+	if (typeof window === 'undefined') {
+		return {
+			width: 1200,
+			height: 900
+		};
+	}
+
+	const { innerWidth: width, innerHeight: height } = window;
+
+	return {
+		width,
+		height
+	};
+}
+
+/**
+ * Create a function that will delay the execution of the passed
+ * function for at least `wait` milliseconds.
+ *
+ * @param {Function} func The function to delay execution of.
+ * @param {Number} wait The number of milliseconds to delay execution by.
+ * @returns {Function} A new function that, when executed, will delay the
+ * execution of `func` for at least `wait` milliseconds.
+ */
+function debounce(func: (...args: any[]) => void, wait: number): () => void {
+	let timeout: ReturnType<typeof setTimeout>;
+	return function executedFunction(...args: any[]) {
+		const later = () => {
+			clearTimeout(timeout);
+			func(...args);
+		};
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+	};
+}
+
+export { getResponsive, debounce };

common/contexts/ResponsiveContext/ResponsiveContext.tsx

@@ -1,67 +1,45 @@
 import { createContext, FC, useEffect, useState } from 'react';
+import { debounce, getResponsive } from './ResponsiveContext.functions';
 import { IFrames, IUseResponsive } from './ResponsiveContext.type';
 
-export const ResponsiveContext = createContext<IUseResponsive | undefined>(undefined);
+const ResponsiveContext = createContext<IUseResponsive | undefined>(undefined);
 
-const mqSm: number = 600;
-const mqMd: number = 900;
-const mqLg: number = 1200;
-const mqXl: number = 1536;
-
-function getResponsive(): IFrames {
-	if (typeof window === 'undefined') {
-		return {
-			width: 1200,
-			height: 900
-		};
-	}
-
-	const { innerWidth: width, innerHeight: height } = window;
-
-	return {
-		width,
-		height
-	};
-}
+const breakpoints = [600, 900, 1200, 1536];
 
 const ResponsiveProvider: FC<{ children: any }> = ({ children }) => {
 	const [screenFrames, setScreenFrames] = useState<IFrames>(getResponsive());
-	const [isBiggerThanSm, setIsBiggerThanSm] = useState<boolean | undefined>(undefined);
-	const [isBiggerThanMd, setIsBiggerThanMd] = useState<boolean | undefined>(undefined);
-	const [isBiggerThanLg, setIsBiggerThanLg] = useState<boolean | undefined>(undefined);
-	const [isBiggerThanXl, setIsBiggerThanXl] = useState<boolean | undefined>(undefined);
+	const [isSmallerThanBreakpoint, setIsSmallerThanBreakpoint] = useState<boolean[]>(breakpoints.map(() => false));
 
 	useEffect(() => {
 		function handleResize() {
 			const newScreenFrames = getResponsive();
 			setScreenFrames(newScreenFrames);
-			setIsBiggerThanSm(newScreenFrames.width > mqSm);
-			setIsBiggerThanMd(newScreenFrames.width > mqMd);
-			setIsBiggerThanLg(newScreenFrames.width > mqLg);
-			setIsBiggerThanXl(newScreenFrames.width > mqXl);
+			const newIsSmallerThanBreakpoint = breakpoints.map((breakpoint) => newScreenFrames.width > breakpoint);
+			setIsSmallerThanBreakpoint(newIsSmallerThanBreakpoint);
 		}
 
-		setTimeout(() => {
-			handleResize();
-		}, 100);
+		const handleResizeDebounced = debounce(handleResize, 100);
+
+		handleResize();
+
+		window.addEventListener('resize', handleResizeDebounced);
 
-		window.addEventListener('resize', handleResize);
-		return () => window.removeEventListener('resize', handleResize);
+		return () => window.removeEventListener('resize', handleResizeDebounced);
 	}, []);
 
 	return (
 		<ResponsiveContext.Provider
 			value={{
 				screenFrames,
-				isBiggerThanSm,
-				isBiggerThanMd,
-				isBiggerThanLg,
-				isBiggerThanXl
+				isBiggerThanSm: isSmallerThanBreakpoint[0],
+				isBiggerThanMd: isSmallerThanBreakpoint[1],
+				isBiggerThanLg: isSmallerThanBreakpoint[2],
+				isBiggerThanXl: isSmallerThanBreakpoint[3]
 			}}
 		>
 			{children}
 		</ResponsiveContext.Provider>
 	);
 };
 
-export { ResponsiveProvider };
+export { ResponsiveProvider, ResponsiveContext };

packages/base/README.md

@@ -0,0 +1,11 @@
+# Base Template
+
+The base template has no UI framework configured. The default style is based on `.scss` with examples of how to use it.
+
+## Quick Start
+
+You can quickly start a new project with this template by running:
+
+```bash
+npx create-nextjs-dapp base
+```

packages/base/components/default/Navbar/Navbar.module.scss

@@ -6,7 +6,7 @@
 	top: 0;
 
 	display: flex;
-	justify-content: space-between;
+	justify-content: flex-end;
 
 	width: 100%;
 
@@ -15,6 +15,18 @@
 	@include md() {
 		padding: 2rem;
 	}
+
+	& h1 {
+		display: none;
+	}
+
+	@include sm() {
+		justify-content: space-between;
+
+		& h1 {
+			display: initial;
+		}
+	}
 }
 
 .mdVisible {

packages/base/contexts/ResponsiveContext/ResponsiveContext.functions.ts

@@ -0,0 +1,40 @@
+import { IFrames } from './ResponsiveContext.type';
+
+function getResponsive(): IFrames {
+	if (typeof window === 'undefined') {
+		return {
+			width: 1200,
+			height: 900
+		};
+	}
+
+	const { innerWidth: width, innerHeight: height } = window;
+
+	return {
+		width,
+		height
+	};
+}
+
+/**
+ * Create a function that will delay the execution of the passed
+ * function for at least `wait` milliseconds.
+ *
+ * @param {Function} func The function to delay execution of.
+ * @param {Number} wait The number of milliseconds to delay execution by.
+ * @returns {Function} A new function that, when executed, will delay the
+ * execution of `func` for at least `wait` milliseconds.
+ */
+function debounce(func: (...args: any[]) => void, wait: number): () => void {
+	let timeout: ReturnType<typeof setTimeout>;
+	return function executedFunction(...args: any[]) {
+		const later = () => {
+			clearTimeout(timeout);
+			func(...args);
+		};
+		clearTimeout(timeout);
+		timeout = setTimeout(later, wait);
+	};
+}
+
+export { getResponsive, debounce };

packages/base/contexts/ResponsiveContext/ResponsiveContext.tsx

@@ -1,67 +1,45 @@
 import { createContext, FC, useEffect, useState } from 'react';
+import { debounce, getResponsive } from './ResponsiveContext.functions';
 import { IFrames, IUseResponsive } from './ResponsiveContext.type';
 
-export const ResponsiveContext = createContext<IUseResponsive | undefined>(undefined);
+const ResponsiveContext = createContext<IUseResponsive | undefined>(undefined);
 
-const mqSm: number = 600;
-const mqMd: number = 900;
-const mqLg: number = 1200;
-const mqXl: number = 1536;
-
-function getResponsive(): IFrames {
-	if (typeof window === 'undefined') {
-		return {
-			width: 1200,
-			height: 900
-		};
-	}
-
-	const { innerWidth: width, innerHeight: height } = window;
-
-	return {
-		width,
-		height
-	};
-}
+const breakpoints = [600, 900, 1200, 1536];
 
 const ResponsiveProvider: FC<{ children: any }> = ({ children }) => {
 	const [screenFrames, setScreenFrames] = useState<IFrames>(getResponsive());
-	const [isBiggerThanSm, setIsBiggerThanSm] = useState<boolean | undefined>(undefined);
-	const [isBiggerThanMd, setIsBiggerThanMd] = useState<boolean | undefined>(undefined);
-	const [isBiggerThanLg, setIsBiggerThanLg] = useState<boolean | undefined>(undefined);
-	const [isBiggerThanXl, setIsBiggerThanXl] = useState<boolean | undefined>(undefined);
+	const [isSmallerThanBreakpoint, setIsSmallerThanBreakpoint] = useState<boolean[]>(breakpoints.map(() => false));
 
 	useEffect(() => {
 		function handleResize() {
 			const newScreenFrames = getResponsive();
 			setScreenFrames(newScreenFrames);
-			setIsBiggerThanSm(newScreenFrames.width > mqSm);
-			setIsBiggerThanMd(newScreenFrames.width > mqMd);
-			setIsBiggerThanLg(newScreenFrames.width > mqLg);
-			setIsBiggerThanXl(newScreenFrames.width > mqXl);
+			const newIsSmallerThanBreakpoint = breakpoints.map((breakpoint) => newScreenFrames.width > breakpoint);
+			setIsSmallerThanBreakpoint(newIsSmallerThanBreakpoint);
 		}
 
-		setTimeout(() => {
-			handleResize();
-		}, 100);
+		const handleResizeDebounced = debounce(handleResize, 100);
+
+		handleResize();
+
+		window.addEventListener('resize', handleResizeDebounced);
 
-		window.addEventListener('resize', handleResize);
-		return () => window.removeEventListener('resize', handleResize);
+		return () => window.removeEventListener('resize', handleResizeDebounced);
 	}, []);
 
 	return (
 		<ResponsiveContext.Provider
 			value={{
 				screenFrames,
-				isBiggerThanSm,
-				isBiggerThanMd,
-				isBiggerThanLg,
-				isBiggerThanXl
+				isBiggerThanSm: isSmallerThanBreakpoint[0],
+				isBiggerThanMd: isSmallerThanBreakpoint[1],
+				isBiggerThanLg: isSmallerThanBreakpoint[2],
+				isBiggerThanXl: isSmallerThanBreakpoint[3]
 			}}
 		>
 			{children}
 		</ResponsiveContext.Provider>
 	);
 };
 
-export { ResponsiveProvider };
+export { ResponsiveProvider, ResponsiveContext };

packages/mui/README.md

@@ -0,0 +1,21 @@
+# MUI Tempalte
+
+The MUI template is based on the [MUI](https://mui.com/) framework. It is configured with the [MUI System](https://mui.com/system/getting-started/overview/) and the [MUI Base](https://mui.com/base/getting-started/overview/).
+
+All is configured to work with the [Material UI](https://mui.com/material-ui/getting-started/overview/).
+
+## Quick Start
+
+You can quickly start a new project with this template by running:
+
+```bash
+npx create-nextjs-dapp mui
+```
+
+## Install Material UI
+
+You can run the following command to install it:
+
+```bash
+npm install @mui/material
+```

packages/mui/components/default/CTA/CTA.tsx

@@ -1,28 +1,29 @@
-import React, { FC } from 'react';
-import { ICTA } from './CTA.type';
 import { Box } from '@mui/system';
-import Text from '../Text';
+import { FC } from 'react';
 import { useTheme } from 'styled-components';
 import { ESize } from 'theme/theme.enum';
-import { ETextType, EFontWeight, ETextAlign } from '../Text/Text.enum';
 import Button from '../Button';
+import { EFontWeight, ETextAlign, ETextType } from '../Text/Text.enum';
 import { TextEx } from './CTA.styles';
+import { ICTA } from './CTA.type';
 
 const cloneCmd = 'npx create-nextjs-dapp';
 
+const boxStyles = {
+	display: 'flex',
+	flexDirection: 'column',
+	justifyContent: 'center',
+	alignItems: 'center',
+	transform: { xs: 'scale(0.9)', sm: 'unset' }
+};
+
+const gradientContainerProps = { marginTop: 4 };
+
 const CTA: FC<ICTA> = () => {
 	const theme = useTheme();
 
 	return (
-		<Box
-			sx={{
-				display: 'flex',
-				flexDirection: 'column',
-				justifyContent: 'center',
-				alignItems: 'center',
-				transform: { xs: 'scale(0.9)', sm: 'unset' }
-			}}
-		>
+		<Box sx={boxStyles}>
 			<TextEx
 				type={ETextType.h2}
 				size={ESize.s}
@@ -33,7 +34,7 @@ const CTA: FC<ICTA> = () => {
 				Start coding is easy as
 				<Button
 					color={theme.colors.lightBlue}
-					gradientContainerProps={{ marginTop: 4 }}
+					gradientContainerProps={gradientContainerProps}
 					valueToCopy={cloneCmd + '@latest'}
 					noPaddingResponsive
 				>