Skip to content

Commit 1717c11

Browse files
swiinyswiiny
authored
Merge pull request #152 from JeremyTheintz/develop
Release of PRs #147 & #148
2 parents 7fc3000 + a950868 commit 1717c11

File tree

43 files changed

+2021
-3270
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

43 files changed

+2021
-3270
lines changed

‎README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,3 +76,21 @@ Styled components is a popular CSS-in-JS library developed for React. It is conf
7676
There are already base functions to add responsive padding, margin and frames to your components.
7777

7878
> See IPadding, IMargin and IFrames available at `./interfaces/layout.ts`
79+
80+
---
81+
82+
# Contributing
83+
84+
### Creating a new template
85+
86+
1. Create a new folder in `./packages` with the name of your template.
87+
2. Create the following files, inspired by other templates (see `./packages/base` for an example):
88+
- `./packages/[template-name]/package.json`
89+
- `./packages/[template-name]/pages/index.tsx`
90+
- `./packages/[template-name]/tsconfig.json`
91+
- `./packages/[template-name]/next.config.js`
92+
- `./packages/[template-name]/next-env.d.ts`
93+
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`).
94+
- `const templates = ['base', 'mui', 'styled-components', 'new-template-name'];`
95+
4. Go to the project root directory `./` and run `npm run build` to copy the template common files to the new template.
96+
5. Go to your template (`cd ./packages/[template-name]`) and start development with `npm run dev`.

‎common/contexts/ResponsiveContext/ResponsiveContext.functions.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { IFrames } from './ResponsiveContext.type';
2+
3+
function getResponsive(): IFrames {
4+
if (typeof window === 'undefined') {
5+
return {
6+
width: 1200,
7+
height: 900
8+
};
9+
}
10+
11+
const { innerWidth: width, innerHeight: height } = window;
12+
13+
return {
14+
width,
15+
height
16+
};
17+
}
18+
19+
/**
20+
* Create a function that will delay the execution of the passed
21+
* function for at least `wait` milliseconds.
22+
*
23+
* @param {Function} func The function to delay execution of.
24+
* @param {Number} wait The number of milliseconds to delay execution by.
25+
* @returns {Function} A new function that, when executed, will delay the
26+
* execution of `func` for at least `wait` milliseconds.
27+
*/
28+
function debounce(func: (...args: any[]) => void, wait: number): () => void {
29+
let timeout: ReturnType<typeof setTimeout>;
30+
return function executedFunction(...args: any[]) {
31+
const later = () => {
32+
clearTimeout(timeout);
33+
func(...args);
34+
};
35+
clearTimeout(timeout);
36+
timeout = setTimeout(later, wait);
37+
};
38+
}
39+
40+
export { getResponsive, debounce };

‎common/contexts/ResponsiveContext/ResponsiveContext.tsx‎

Lines changed: 17 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,45 @@
11
import { createContext, FC, useEffect, useState } from 'react';
2+
import { debounce, getResponsive } from './ResponsiveContext.functions';
23
import { IFrames, IUseResponsive } from './ResponsiveContext.type';
34

4-
export const ResponsiveContext = createContext<IUseResponsive | undefined>(undefined);
5+
const ResponsiveContext = createContext<IUseResponsive | undefined>(undefined);
56

6-
const mqSm: number = 600;
7-
const mqMd: number = 900;
8-
const mqLg: number = 1200;
9-
const mqXl: number = 1536;
10-
11-
function getResponsive(): IFrames {
12-
if (typeof window === 'undefined') {
13-
return {
14-
width: 1200,
15-
height: 900
16-
};
17-
}
18-
19-
const { innerWidth: width, innerHeight: height } = window;
20-
21-
return {
22-
width,
23-
height
24-
};
25-
}
7+
const breakpoints = [600, 900, 1200, 1536];
268

279
const ResponsiveProvider: FC<{ children: any }> = ({ children }) => {
2810
const [screenFrames, setScreenFrames] = useState<IFrames>(getResponsive());
29-
const [isBiggerThanSm, setIsBiggerThanSm] = useState<boolean | undefined>(undefined);
30-
const [isBiggerThanMd, setIsBiggerThanMd] = useState<boolean | undefined>(undefined);
31-
const [isBiggerThanLg, setIsBiggerThanLg] = useState<boolean | undefined>(undefined);
32-
const [isBiggerThanXl, setIsBiggerThanXl] = useState<boolean | undefined>(undefined);
11+
const [isSmallerThanBreakpoint, setIsSmallerThanBreakpoint] = useState<boolean[]>(breakpoints.map(() => false));
3312

3413
useEffect(() => {
3514
function handleResize() {
3615
const newScreenFrames = getResponsive();
3716
setScreenFrames(newScreenFrames);
38-
setIsBiggerThanSm(newScreenFrames.width > mqSm);
39-
setIsBiggerThanMd(newScreenFrames.width > mqMd);
40-
setIsBiggerThanLg(newScreenFrames.width > mqLg);
41-
setIsBiggerThanXl(newScreenFrames.width > mqXl);
17+
const newIsSmallerThanBreakpoint = breakpoints.map((breakpoint) => newScreenFrames.width > breakpoint);
18+
setIsSmallerThanBreakpoint(newIsSmallerThanBreakpoint);
4219
}
4320

44-
setTimeout(() => {
45-
handleResize();
46-
}, 100);
21+
const handleResizeDebounced = debounce(handleResize, 100);
22+
23+
handleResize();
24+
25+
window.addEventListener('resize', handleResizeDebounced);
4726

48-
window.addEventListener('resize', handleResize);
49-
return () => window.removeEventListener('resize', handleResize);
27+
return () => window.removeEventListener('resize', handleResizeDebounced);
5028
}, []);
5129

5230
return (
5331
<ResponsiveContext.Provider
5432
value={{
5533
screenFrames,
56-
isBiggerThanSm,
57-
isBiggerThanMd,
58-
isBiggerThanLg,
59-
isBiggerThanXl
34+
isBiggerThanSm: isSmallerThanBreakpoint[0],
35+
isBiggerThanMd: isSmallerThanBreakpoint[1],
36+
isBiggerThanLg: isSmallerThanBreakpoint[2],
37+
isBiggerThanXl: isSmallerThanBreakpoint[3]
6038
}}
6139
>
6240
{children}
6341
</ResponsiveContext.Provider>
6442
);
6543
};
6644

67-
export { ResponsiveProvider };
45+
export { ResponsiveProvider, ResponsiveContext };

‎packages/base/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Base Template
2+
3+
The base template has no UI framework configured. The default style is based on `.scss` with examples of how to use it.
4+
5+
## Quick Start
6+
7+
You can quickly start a new project with this template by running:
8+
9+
```bash
10+
npx create-nextjs-dapp base
11+
```

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
top: 0;
77

88
display: flex;
9-
justify-content: space-between;
9+
justify-content: flex-end;
1010

1111
width: 100%;
1212

@@ -15,6 +15,18 @@
1515
@include md() {
1616
padding: 2rem;
1717
}
18+
19+
& h1 {
20+
display: none;
21+
}
22+
23+
@include sm() {
24+
justify-content: space-between;
25+
26+
& h1 {
27+
display: initial;
28+
}
29+
}
1830
}
1931

2032
.mdVisible {

‎packages/base/components/default/Technologies/Technologies.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import Image from 'next/future/image';
1+
import Image from 'next/image';
22
import { FC } from 'react';
33
import styles from './Technologies.module.scss';
44
import { ITechnologies } from './Technologies.type';

‎packages/base/components/default/WalletModal/WalletModal.tsx‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,22 @@
11
import Portal from '@components/common/Portal';
2-
import useWeb3 from '@hooks/useWeb3';
3-
import { FC, MouseEvent, useEffect, useMemo, useState } from 'react';
4-
import { v4 as uuidv4 } from 'uuid';
5-
import GradientContainer from '../GradientContainer';
6-
import { IWalletModal } from './WalletModal.type';
7-
82
import { WALLETS_ARRAY } from '@contexts/Web3Context/Web3Context.variables';
3+
import useWeb3 from '@hooks/useWeb3';
94
import classNames from 'classnames';
10-
import Image from 'next/future/image';
5+
import Image from 'next/image';
6+
import { FC, MouseEvent, useEffect, useId, useState } from 'react';
117
import { ESize } from 'theme/theme.enum';
8+
import GradientContainer from '../GradientContainer';
129
import Text from '../Text';
1310
import { EFontWeight, ETextAlign } from '../Text/Text.enum';
1411
import styles from './WalletModal.module.scss';
12+
import { IWalletModal } from './WalletModal.type';
1513

1614
const WalletModal: FC<IWalletModal> = ({ isOpen = false, onClose = () => {} }) => {
1715
const { connectWallet, isConnectingWallet, disconnectWallet, isWalletConnected, walletName } = useWeb3();
1816

1917
const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
2018

21-
const uuid = useMemo(() => {
22-
return uuidv4();
23-
}, []);
19+
const uuid = useId();
2420

2521
useEffect(() => {
2622
if (!uuid) {

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { IFrames } from './ResponsiveContext.type';
2+
3+
function getResponsive(): IFrames {
4+
if (typeof window === 'undefined') {
5+
return {
6+
width: 1200,
7+
height: 900
8+
};
9+
}
10+
11+
const { innerWidth: width, innerHeight: height } = window;
12+
13+
return {
14+
width,
15+
height
16+
};
17+
}
18+
19+
/**
20+
* Create a function that will delay the execution of the passed
21+
* function for at least `wait` milliseconds.
22+
*
23+
* @param {Function} func The function to delay execution of.
24+
* @param {Number} wait The number of milliseconds to delay execution by.
25+
* @returns {Function} A new function that, when executed, will delay the
26+
* execution of `func` for at least `wait` milliseconds.
27+
*/
28+
function debounce(func: (...args: any[]) => void, wait: number): () => void {
29+
let timeout: ReturnType<typeof setTimeout>;
30+
return function executedFunction(...args: any[]) {
31+
const later = () => {
32+
clearTimeout(timeout);
33+
func(...args);
34+
};
35+
clearTimeout(timeout);
36+
timeout = setTimeout(later, wait);
37+
};
38+
}
39+
40+
export { getResponsive, debounce };

‎packages/base/contexts/ResponsiveContext/ResponsiveContext.tsx‎

Lines changed: 17 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,45 @@
11
import { createContext, FC, useEffect, useState } from 'react';
2+
import { debounce, getResponsive } from './ResponsiveContext.functions';
23
import { IFrames, IUseResponsive } from './ResponsiveContext.type';
34

4-
export const ResponsiveContext = createContext<IUseResponsive | undefined>(undefined);
5+
const ResponsiveContext = createContext<IUseResponsive | undefined>(undefined);
56

6-
const mqSm: number = 600;
7-
const mqMd: number = 900;
8-
const mqLg: number = 1200;
9-
const mqXl: number = 1536;
10-
11-
function getResponsive(): IFrames {
12-
if (typeof window === 'undefined') {
13-
return {
14-
width: 1200,
15-
height: 900
16-
};
17-
}
18-
19-
const { innerWidth: width, innerHeight: height } = window;
20-
21-
return {
22-
width,
23-
height
24-
};
25-
}
7+
const breakpoints = [600, 900, 1200, 1536];
268

279
const ResponsiveProvider: FC<{ children: any }> = ({ children }) => {
2810
const [screenFrames, setScreenFrames] = useState<IFrames>(getResponsive());
29-
const [isBiggerThanSm, setIsBiggerThanSm] = useState<boolean | undefined>(undefined);
30-
const [isBiggerThanMd, setIsBiggerThanMd] = useState<boolean | undefined>(undefined);
31-
const [isBiggerThanLg, setIsBiggerThanLg] = useState<boolean | undefined>(undefined);
32-
const [isBiggerThanXl, setIsBiggerThanXl] = useState<boolean | undefined>(undefined);
11+
const [isSmallerThanBreakpoint, setIsSmallerThanBreakpoint] = useState<boolean[]>(breakpoints.map(() => false));
3312

3413
useEffect(() => {
3514
function handleResize() {
3615
const newScreenFrames = getResponsive();
3716
setScreenFrames(newScreenFrames);
38-
setIsBiggerThanSm(newScreenFrames.width > mqSm);
39-
setIsBiggerThanMd(newScreenFrames.width > mqMd);
40-
setIsBiggerThanLg(newScreenFrames.width > mqLg);
41-
setIsBiggerThanXl(newScreenFrames.width > mqXl);
17+
const newIsSmallerThanBreakpoint = breakpoints.map((breakpoint) => newScreenFrames.width > breakpoint);
18+
setIsSmallerThanBreakpoint(newIsSmallerThanBreakpoint);
4219
}
4320

44-
setTimeout(() => {
45-
handleResize();
46-
}, 100);
21+
const handleResizeDebounced = debounce(handleResize, 100);
22+
23+
handleResize();
24+
25+
window.addEventListener('resize', handleResizeDebounced);
4726

48-
window.addEventListener('resize', handleResize);
49-
return () => window.removeEventListener('resize', handleResize);
27+
return () => window.removeEventListener('resize', handleResizeDebounced);
5028
}, []);
5129

5230
return (
5331
<ResponsiveContext.Provider
5432
value={{
5533
screenFrames,
56-
isBiggerThanSm,
57-
isBiggerThanMd,
58-
isBiggerThanLg,
59-
isBiggerThanXl
34+
isBiggerThanSm: isSmallerThanBreakpoint[0],
35+
isBiggerThanMd: isSmallerThanBreakpoint[1],
36+
isBiggerThanLg: isSmallerThanBreakpoint[2],
37+
isBiggerThanXl: isSmallerThanBreakpoint[3]
6038
}}
6139
>
6240
{children}
6341
</ResponsiveContext.Provider>
6442
);
6543
};
6644

67-
export { ResponsiveProvider };
45+
export { ResponsiveProvider, ResponsiveContext };

0 commit comments

Comments
 (0)