Merge pull request #446 from ruisaraiva19/develop

ruisaraiva19 · web-flow · commit 6b484be63499 · 2021-02-07T19:26:51.000Z
chore: release
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -46,6 +46,12 @@
 			"rules": {
 				"@typescript-eslint/no-var-requires": "off"
 			}
+		},
+		{
+			"files": ["components/**/*.stories.tsx", "pages/api/**/*.ts"],
+			"rules": {
+				"import/no-anonymous-default-export": "off"
+			}
 		}
 	]
 }
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -9,10 +9,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v2
-      - name: Use Node.js 12
-        uses: actions/setup-node@v1
+      - name: Use Node.js 14
+        uses: actions/setup-node@v2
         with:
-          node-version: "12"
+          node-version: "14"
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
       - name: Lint Scripts
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -12,10 +12,10 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v2
-      - name: Use Node.js 12
-        uses: actions/setup-node@v1
+      - name: Use Node.js 14
+        uses: actions/setup-node@v2
         with:
-          node-version: '12'
+          node-version: '14'
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
       - name: Cache Next.js build cache
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -9,10 +9,10 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Use Node.js 12
-        uses: actions/setup-node@v1
+      - name: Use Node.js 14
+        uses: actions/setup-node@v2
         with:
-          node-version: "12"
+          node-version: "14"
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-12.19.0
+14.15.4
diff --git a/components/favycon-info/index.tsx b/components/favycon-info/index.tsx
@@ -21,18 +21,21 @@ const people = [
 		name: 'Augusto Lopes',
 		role: 'Product Designer',
 		social: 'twitter',
+		placeholderHash: 'UrLqFOIUS$-o_Nt6NGRkEkt7M{RjM{NHMxof',
 	},
 	{
 		screenName: 'ruisaraiva19',
 		name: 'Rui Saraiva',
 		role: 'Full-Stack Developer',
 		social: 'twitter',
+		placeholderHash: 'UNMQLqof_LWU?FRkkqt605fk9cjZbaWBt8of',
 	},
 	{
 		screenName: 'miguellteixeira',
 		name: 'Miguel Teixeira',
 		role: 'Full-Stack Developer',
 		social: 'github',
+		placeholderHash: 'UcI~*]o0uPXS?wWAMxog8_kCQ,e-tmbIVsjF',
 	},
 ]
 
@@ -143,6 +146,8 @@ const FavyconInfo = ({
 											srcRetina={`/images/people/${person.screenName}@2x.png`}
 											alt={person.name}
 											aspectRatio="56/56"
+											placeholderHash={person.placeholderHash}
+											rounded
 										/>
 									</div>
 									<div>
diff --git a/components/favycon-wizard/index.tsx b/components/favycon-wizard/index.tsx
@@ -13,14 +13,19 @@ type FavyconWizardProps = {
 const unsplashImageProps = (isMobile: boolean) => ({
 	src: `/images/unsplash${isMobile ? '-vertical' : ''}@1x.jpg`,
 	srcRetina: `/images/unsplash${isMobile ? '-vertical' : ''}@2x.jpg`,
-	srcPlaceholder: isMobile
-		? 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAgICAgJCAkKCgkNDgwODRMREBARExwUFhQWFBwrGx8bGx8bKyYuJSMlLiZENS8vNUROQj5CTl9VVV93cXecnNEBCAgICAkICQoKCQ0ODA4NExEQEBETHBQWFBYUHCsbHxsbHxsrJi4lIyUuJkQ1Ly81RE5CPkJOX1VVX3dxd5yc0f/CABEIAGQAUAMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAAEBQECAwcABv/aAAgBAQAAAAD4xWtDGwpX0dUVKl4eGdYnraxQrBGzr6ewLU6lcLnWZ7CvUJ1ouVZnsQChOtEyr6exAKU60bLP3uwgqU64fLOI7AErTrh8qUr2AVaoWiZZ517DgCrVAYY0z7HmMuUrQx88+xxgCrUgC40//8QAGgEAAgMBAQAAAAAAAAAAAAAABAUBAgMGAP/aAAgBAhAAAADqZVrKdPZcrjo7BrYe6UXjttbign6aUAKtp4H/xAAbAQACAgMBAAAAAAAAAAAAAAAEBQMHAAEGAv/aAAgBAxAAAADj3R82+DfNp8r5+5IyvXzgj1XzpwTJXbF4fNXZTtsT/8QAGxAAAwEBAQEBAAAAAAAAAAAAAAECAyAQMRH/2gAIAQEAAT8A1zNoNJLRRQ+NYN4NpNEWUPjSTaTaTVFlD4tG0m8myLKHxaNkbr6bI0RSHxZsbr6bGiKQ1xRsbmxaKQ0fntGxubFlIaGvaNTdGyLRSGhoflGiNpNoNJKQ0MYxlyawbZmsFyUhj9pGkm0G2ZpBaKQx+MtGqNkjYsoYz//EABwRAAMBAQEAAwAAAAAAAAAAAAABAgMQMRESIf/aAAgBAgEBPwBMrw3L4h+G5fokLm0lx+ikQi4+UaZn1ESM0gueJiZaNFxElGp//8QAHBEAAgEFAQAAAAAAAAAAAAAAAAEDAgQQITER/9oACAEDAQE/ALeUhq9RQLEFWy2q4RixC9lq+Eb0J4h6Wr4RsTxE9ltXwjq0JiKWW8vnhBJ6ihixD0tiMR//2Q=='
-		: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAgICAgJCAkKCgkNDgwODRMREBARExwUFhQWFBwrGx8bGx8bKyYuJSMlLiZENS8vNUROQj5CTl9VVV93cXecnNEBCAgICAkICQoKCQ0ODA4NExEQEBETHBQWFBYUHCsbHxsbHxsrJi4lIyUuJkQ1Ly81RE5CPkJOX1VVX3dxd5yc0f/CABEIADsAWgMBIgACEQEDEQH/xAAaAAABBQEAAAAAAAAAAAAAAAAFAAECAwQI/9oACAEBAAAAANwAKFE4M1bJ36HBBggcflqZ3fogIGBhx+WqDyXRAQOEDj81ME66HChwgfDnqrZl0MFEBQ+GiquMV0MGFBRGDPVCuMehhAwMHH5qoVwX/8QAGAEAAwEBAAAAAAAAAAAAAAAAAwQFAgb/2gAIAQIQAAAA606cVUvRnDLT1dY0lPFYYKGep//EABoBAAEFAQAAAAAAAAAAAAAAAAUBAgMEBwb/2gAIAQMQAAAAzI6fvOTMDfQ3pEzE10FyVcyLH70z/wD/xAAhEAACAgEEAwEBAAAAAAAAAAAAAQIDMQQFIDMQQXEjEf/aAAgBAQABPwDcl+0vpesmojkvWS1EyQ+O4r9pFyNQsl6yXIsRJD47j3SLlk1CyahZLkWIkhrjuHdIuNQaj2XE0SQ0fzhuHdIuNR7NR7LiaJIaGuG4d0vpaXrJqFktRNDQ0NcNw7pfS1F8cl8cl0SaGhoaGvO4d0vpYXF/suLCQxj8/wD/xAAdEQACAgIDAQAAAAAAAAAAAAAAAgEDETIQEnEh/9oACAECAQE/AKtV84vj4XL9OpCleq+EFi5gurOhCleqikrmC2seswV6L4Lw8FqwTB//xAAgEQACAQQCAwEAAAAAAAAAAAAAAQIDBBAxIXIRIzND/9oACAEDAQE/AFL3z7FpLRReiOf2n2LR6KD4RFnnD+8+xaPRRfBFieJfafYtZaKL4RFix//Z',
+	placeholderHash: isMobile ? 'UT0Lxlh2ghgMeSeoe@fkflf5e.e:e.e.f6fk' : 'Un0V-,h2g#gMe,f8f9fif8f6f6f8f6f7fQfQ',
 	alt: 'Unsplash',
 	aspectRatio: isMobile ? '614/768' : '540/354',
 	stretch: isMobile,
 })
 
+const dndImageProps = (isDark: boolean) => ({
+	src: `/images/dnd-${isDark ? 'dark' : 'light'}@1x.png`,
+	srcRetina: `/images/dnd-${isDark ? 'dark' : 'light'}@2x.png`,
+	alt: 'Drag and drop here!',
+	aspectRatio: '185/109',
+})
+
 const FavyconWizardComponent = ({ children, showDndImage }: FavyconWizardProps) => {
 	return (
 		<div className={styles.root}>
@@ -30,20 +35,8 @@ const FavyconWizardComponent = ({ children, showDndImage }: FavyconWizardProps)
 			</div>
 			{children}
 			<div className={classnames(styles.image, { [styles.hide]: !showDndImage })}>
-				<LazyImage
-					src={`/images/dnd-light@1x.png`}
-					srcRetina={`/images/dnd-light@2x.png`}
-					alt="Drag and drop here!"
-					aspectRatio="185/109"
-					className={styles.imageLight}
-				/>
-				<LazyImage
-					src={`/images/dnd-dark@1x.png`}
-					srcRetina={`/images/dnd-dark@2x.png`}
-					alt="Drag and drop here!"
-					aspectRatio="185/109"
-					className={styles.imageDark}
-				/>
+				<LazyImage {...dndImageProps(false)} className={styles.imageLight} />
+				<LazyImage {...dndImageProps(true)} className={styles.imageDark} />
 			</div>
 		</div>
 	)
diff --git a/components/lazy-image/index.module.scss b/components/lazy-image/index.module.scss
@@ -8,6 +8,24 @@
 		height: 100%;
 		padding-bottom: 0 !important;
 	}
+
+	&.rounded {
+		border-radius: 50%;
+	}
+
+	canvas {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
+
+	&.rounded canvas {
+		border-radius: 50%;
+	}
 }
 
 .image {
diff --git a/components/lazy-image/index.tsx b/components/lazy-image/index.tsx
@@ -1,26 +1,29 @@
 import React, { useRef, useEffect } from 'react'
 import { LazyImageFull, ImageState } from 'react-lazy-images'
 import objectFitImages from 'object-fit-images'
+import { BlurhashCanvas } from 'react-blurhash'
 import classNames from 'classnames'
 
 import styles from './index.module.scss'
 
 type LazyImageProps = {
 	src: string
 	srcRetina?: string
-	srcPlaceholder?: string
+	placeholderHash?: string
 	alt: string
 	aspectRatio: string
 	stretch?: boolean
+	rounded?: boolean
 } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
 
 const LazyImage = ({
 	src,
 	srcRetina = src,
-	srcPlaceholder = src,
+	placeholderHash,
 	alt,
 	aspectRatio,
 	stretch = false,
+	rounded = false,
 	...props
 }: LazyImageProps) => {
 	const [widthString, heightString] = aspectRatio.split('/')
@@ -41,22 +44,26 @@ const LazyImage = ({
 				const loaded = imageState === ImageState.LoadSuccess
 				return (
 					<div
-						className={classNames(styles.root, { [styles.stretch]: stretch })}
+						className={classNames(styles.root, { [styles.stretch]: stretch, [styles.rounded]: rounded })}
 						ref={ref}
 						style={{ paddingBottom: `${(height / width) * 100}%` }}
 						{...props}>
-						<img
-							className={styles.placeholder}
-							src={srcPlaceholder}
-							alt={imageProps.alt}
-							style={{ opacity: loaded ? 0 : 1 }}
-						/>
+						{placeholderHash ? (
+							<BlurhashCanvas
+								className={styles.placeholder}
+								hash={placeholderHash}
+								width={32}
+								height={32}
+								style={{ opacity: loaded ? 0 : 1 }}
+							/>
+						) : null}
 						<img
 							ref={imgRef}
 							className={styles.normal}
 							{...imageProps}
 							alt={imageProps.alt}
 							style={{ opacity: loaded ? 1 : 0 }}
+							loading="lazy"
 						/>
 					</div>
 				)
diff --git a/package.json b/package.json
@@ -25,9 +25,6 @@
 		"url": "https://github.com/ruisaraiva19/favycon/issues"
 	},
 	"homepage": "https://github.com/ruisaraiva19/favycon#readme",
-	"engines": {
-		"node": ">= 10.13"
-	},
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
@@ -43,22 +40,24 @@
 	},
 	"dependencies": {
 		"@fiahfy/ico-convert": "0.0.7",
-		"@prefresh/next": "1.3.0",
+		"@prefresh/next": "1.4.4",
 		"adm-zip": "0.4.16",
+		"blurhash": "1.1.3",
 		"classnames": "2.2.6",
 		"multer": "1.4.2",
-		"next": "9.5.5",
+		"next": "10.0.6",
 		"nprogress": "0.2.0",
 		"object-fit-images": "3.2.4",
-		"preact": "10.5.4",
-		"preact-render-to-string": "5.1.10",
-		"preact-ssr-prepass": "1.1.2",
-		"prismjs": "1.22.0",
+		"preact": "10.5.12",
+		"preact-render-to-string": "5.1.12",
+		"preact-ssr-prepass": "1.1.3",
+		"prismjs": "1.23.0",
 		"prop-types": "15.7.2",
 		"react": "16.14.0",
+		"react-blurhash": "0.1.3",
 		"react-clipboard.js": "2.0.16",
 		"react-dom": "16.14.0",
-		"react-dropzone": "11.2.0",
+		"react-dropzone": "11.2.4",
 		"react-lazy-images": "1.1.0",
 		"react-modal": "3.11.2",
 		"react-transition-group": "4.4.1",
@@ -68,7 +67,7 @@
 		"use-media": "1.4.0"
 	},
 	"devDependencies": {
-		"@babel/core": "7.11.6",
+		"@babel/core": "7.12.13",
 		"@commitlint/cli": "11.0.0",
 		"@commitlint/config-conventional": "11.0.0",
 		"@storybook/addon-actions": "5.3.21",
@@ -82,61 +81,61 @@
 		"@storybook/react": "5.3.21",
 		"@storybook/source-loader": "5.3.21",
 		"@types/adm-zip": "0.4.33",
-		"@types/classnames": "2.2.10",
+		"@types/classnames": "2.2.11",
 		"@types/multer": "1.4.4",
-		"@types/node": "14.11.8",
+		"@types/node": "14.14.25",
 		"@types/nprogress": "0.2.0",
 		"@types/object-fit-images": "3.2.0",
-		"@types/prismjs": "1.16.1",
-		"@types/react": "16.9.53",
+		"@types/prismjs": "1.16.2",
+		"@types/react": "17.0.1",
 		"@types/react-modal": "3.10.6",
 		"@types/react-transition-group": "4.4.0",
 		"@types/sharp": "0.25.1",
-		"@typescript-eslint/eslint-plugin": "4.4.1",
-		"@typescript-eslint/parser": "4.4.1",
+		"@typescript-eslint/eslint-plugin": "4.14.2",
+		"@typescript-eslint/parser": "4.14.2",
 		"all-contributors-cli": "6.19.0",
 		"babel-eslint": "10.1.0",
-		"babel-loader": "8.1.0",
+		"babel-loader": "8.2.2",
 		"babel-plugin-prismjs": "2.0.1",
-		"babel-preset-react-app": "9.1.2",
-		"commitizen": "4.2.1",
-		"cypress": "5.4.0",
+		"babel-preset-react-app": "10.0.0",
+		"commitizen": "4.2.3",
+		"cypress": "5.6.0",
 		"cypress-file-upload": "4.1.1",
 		"cz-conventional-changelog": "3.3.0",
 		"dotenv": "8.2.0",
-		"eslint": "7.11.0",
-		"eslint-config-prettier": "6.12.0",
+		"eslint": "7.19.0",
+		"eslint-config-prettier": "7.2.0",
 		"eslint-config-react": "1.1.7",
-		"eslint-config-react-app": "5.2.1",
+		"eslint-config-react-app": "6.0.0",
 		"eslint-plugin-cypress": "2.11.2",
 		"eslint-plugin-flowtype": "5.2.0",
 		"eslint-plugin-import": "2.22.1",
-		"eslint-plugin-jsx-a11y": "6.3.1",
-		"eslint-plugin-prettier": "3.1.4",
-		"eslint-plugin-react": "7.21.4",
-		"eslint-plugin-react-hooks": "4.1.2",
-		"husky": "4.3.0",
-		"lint-staged": "10.4.0",
+		"eslint-plugin-jsx-a11y": "6.4.1",
+		"eslint-plugin-prettier": "3.3.1",
+		"eslint-plugin-react": "7.22.0",
+		"eslint-plugin-react-hooks": "4.2.0",
+		"husky": "4.3.8",
+		"lint-staged": "10.5.4",
 		"npm-run-all": "4.1.5",
-		"postcss-100vh-fix": "0.1.1",
-		"postcss-flexbugs-fixes": "4.2.1",
+		"postcss-100vh-fix": "1.0.2",
+		"postcss-flexbugs-fixes": "5.0.2",
 		"postcss-preset-env": "6.7.0",
-		"prettier": "2.1.2",
-		"react-refresh": "0.8.3",
+		"prettier": "2.2.1",
+		"react-refresh": "0.9.0",
 		"regenerator-runtime": "0.13.7",
-		"sass": "1.27.0",
-		"sass-loader": "10.0.3",
-		"semantic-release": "17.2.1",
-		"start-server-and-test": "1.11.5",
-		"stylelint": "13.7.2",
+		"sass": "1.32.6",
+		"sass-loader": "10.1.1",
+		"semantic-release": "17.3.7",
+		"start-server-and-test": "1.12.0",
+		"stylelint": "13.9.0",
 		"stylelint-config-css-modules": "2.2.0",
 		"stylelint-config-prettier": "8.0.2",
-		"stylelint-config-recess-order": "2.1.0",
+		"stylelint-config-recess-order": "2.3.0",
 		"stylelint-config-standard": "20.0.0",
 		"stylelint-prettier": "1.1.2",
 		"stylelint-scss": "3.18.0",
 		"typescript": "3.9.7",
-		"webpack-notifier": "1.8.0"
+		"webpack-notifier": "1.13.0"
 	},
 	"config": {
 		"commitizen": {
diff --git a/pages/api/favycon.ts b/pages/api/favycon.ts
@@ -58,7 +58,7 @@ export default async (req: MulterApiRequest, res: NextApiResponse) => {
 						.toBuffer()
 						.then((scaledPng) => {
 							zip.addFile(`icons/favicon-${size}.png`, scaledPng)
-							resolve()
+							resolve(true)
 						})
 				})
 			})
@@ -72,7 +72,7 @@ export default async (req: MulterApiRequest, res: NextApiResponse) => {
 					.then(async (scaledPng) => {
 						const ico = await convert(scaledPng)
 						zip.addFile('icons/favicon.ico', ico)
-						resolve()
+						resolve(true)
 					})
 			})
 
diff --git a/public/images/unsplash-vertical@placeholder.jpg b/public/images/unsplash-vertical@placeholder.jpg
diff --git a/public/images/unsplash@placeholder.jpg b/public/images/unsplash@placeholder.jpg
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,12 @@`
`46`	`46`	`"rules": {`
`47`	`47`	`"@typescript-eslint/no-var-requires": "off"`
`48`	`48`	`}`
	`49`	`+ },`
	`50`	`+ {`
	`51`	`+ "files": ["components/*/.stories.tsx", "pages/api/*/.ts"],`
	`52`	`+ "rules": {`
	`53`	`+ "import/no-anonymous-default-export": "off"`
	`54`	`+ }`
`49`	`55`	`}`
`50`	`56`	`]`
`51`	`57`	`}`