Merge pull request #482 from ruisaraiva19/develop

Author: ruisaraiva19

.github/workflows/commitlint.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - name: Lint commit messages

.github/workflows/lint.yml

@@ -8,12 +8,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: ".nvmrc"
+          cache: "yarn"
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Lint Scripts

.github/workflows/release.yml

@@ -11,22 +11,22 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: ".nvmrc"
+          cache: "yarn"
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Cache Next.js build cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ github.workspace }}/.next/cache
           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}
       - name: Build static assets
         run: yarn build
       - name: Semantic Release
-        uses: cycjimmy/semantic-release-action@v2
+        uses: cycjimmy/semantic-release-action@v3
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/tests.yml

@@ -7,19 +7,19 @@ jobs:
     name: Run Cypress
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: ".nvmrc"
+          cache: "yarn"
 
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
       - name: Cache Next.js build cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: ${{ github.workspace }}/.next/cache
           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}
@@ -28,21 +28,21 @@ jobs:
         run: yarn build
 
       - name: Run Cypress
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
         with:
           start: npm start
           wait-on: http://localhost:3000
       # after the test run completes
       # store videos and any screenshots
       # NOTE: screenshots will be generated only if E2E test failed
       # thus we store screenshots only on failures
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: cypress-screenshots
           path: cypress/screenshots
       # Test run video was always captured, so this action uses "always()" condition
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v3
         if: always()
         with:
           name: cypress-videos

.nvmrc

@@ -1 +1 @@
-14.18
+16.15

.prettierrc

@@ -1,8 +1,7 @@
 {
-  "useTabs": true,
+	"useTabs": true,
 	"printWidth": 120,
 	"singleQuote": true,
 	"trailingComma": "es5",
-	"jsxBracketSameLine": true,
 	"semi": false
 }

.vscode/settings.json

@@ -9,5 +9,5 @@
 	"css.validate": false,
 	"less.validate": false,
 	"scss.validate": false,
-	"cssModules.camelCase": true
+	"typescript.tsdk": "node_modules/typescript/lib"
 }

components/button/index.module.scss

@@ -2,7 +2,7 @@
 
 .base {
 	padding: 5px 12px;
-	font-family: Manrope, Arial, '"Helvetica Neue"', Helvetica, sans-serif;
+	font-family: 'Manrope', Arial, '"Helvetica Neue"', Helvetica, sans-serif;
 	font-size: $font-size-title;
 	line-height: $line-height-title;
 	color: $black;

components/drag-and-drop/index.tsx

@@ -208,6 +208,7 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 	}
 
 	const { getRootProps, getInputProps, isDragActive } = useDropzone({
+		// eslint-disable-next-line @typescript-eslint/no-misused-promises
 		onDrop,
 		accept: Object.keys(ACCEPT_MIME_TYPES),
 		maxSize: ONE_MB,
@@ -230,13 +231,15 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 				className={classnames(styles.container, {
 					[styles.loading]: isLoading,
 					[styles.transparent]: !image,
-				})}>
+				})}
+			>
 				{!image && !zipData && (
 					<>
 						<div
 							className={styles.dropZoneWrapper}
 							onMouseEnter={() => setIsHover(true)}
-							onMouseLeave={() => setIsHover(false)}>
+							onMouseLeave={() => setIsHover(false)}
+						>
 							<SvgDropZone className={classnames(styles.dashed, { [styles.dragActive]: isDragActive })} />
 							<div {...getRootProps()} className={styles.dropZone} data-cy="drag-and-drop">
 								<input {...getInputProps()} />
@@ -249,7 +252,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 									className={classnames(styles.imageUploadText, styles.mobileUploadText, {
 										[styles.dragActive]: isDragActive,
 									})}
-									data-cy="drag-and-drop-text">
+									data-cy="drag-and-drop-text"
+								>
 									<span>
 										Generate all the sizes for your
 										<br />
@@ -262,7 +266,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 									className={classnames(styles.imageUploadText, styles.desktopUploadText, {
 										[styles.dragActive]: isDragActive,
 									})}
-									data-cy="drag-and-drop-text">
+									data-cy="drag-and-drop-text"
+								>
 									<CSSTransition in={!isDragActive} timeout={200} classNames="collapse" unmountOnExit>
 										<span>Drag &amp;&nbsp;</span>
 									</CSSTransition>
@@ -313,7 +318,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 									weight="semiBold"
 									color="gray"
 									tag="div"
-									className={styles.filenameWrapper}>
+									className={styles.filenameWrapper}
+								>
 									<span className={styles.filename} data-cy="preview-filename">
 										{imageData.name}
 										{imageData.extension}
@@ -357,7 +363,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 										id="pwa"
 										disabled={PWADisabled}
 										onChange={togglePwa}
-										data-cy="preview-pwa-compatible">
+										data-cy="preview-pwa-compatible"
+									>
 										<Typography variant="regularBody" weight="semiBold" muted={PWADisabled}>
 											PWA compatible
 										</Typography>
@@ -373,7 +380,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 										id="dark"
 										disabled
 										onChange={toggleDarkMode}
-										data-cy="preview-dark-mode-version">
+										data-cy="preview-dark-mode-version"
+									>
 										<Typography variant="regularBody" weight="semiBold" muted>
 											Dark Mode version
 										</Typography>
@@ -392,14 +400,18 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 								onClick={() => {
 									splitbee.track('Re-upload')
 									resetImage()
-								}}>
+								}}
+							>
 								Re-upload
 							</Button>
 							<Button
 								color="white"
 								background="bgLink"
 								className={styles.imageGenerate}
-								onClick={() => generateFavicon(image)}>
+								onClick={() => {
+									generateFavicon(image)
+								}}
+							>
 								Generate Favicon
 							</Button>
 						</div>
@@ -442,7 +454,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 									className={styles.showCode}
 									variant="regularTransparent"
 									color="gray"
-									onClick={() => setIsModalOpen(true)}>
+									onClick={() => setIsModalOpen(true)}
+								>
 									Show
 								</Button>
 							</div>
@@ -455,14 +468,16 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 								onClick={() => {
 									splitbee.track('Make a new one')
 									resetImage()
-								}}>
+								}}
+							>
 								Make a new one
 							</Button>
 							<Button
 								color="white"
 								background="bgGreen"
 								className={styles.imageGenerate}
-								onClick={() => onDownload(zipData)}>
+								onClick={() => onDownload(zipData)}
+							>
 								Download Favicon
 							</Button>
 						</div>
@@ -475,7 +490,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => {
 					className={styles.content}
 					overlayClassName={styles.overlay}
 					closeTimeoutMS={200}
-					contentLabel="Code generated">
+					contentLabel="Code generated"
+				>
 					<div className={styles.modalContainer} {...bind()}>
 						<div className={classnames(styles.modalHeader, styles.modalHeaderMobile)}>
 							<Typography variant="extraLargeTitle" weight="extraBold" color="white" colorImmutable>

components/favycon-error/index.tsx

@@ -38,7 +38,8 @@ const FavyconError = ({ error, clearError }: FavyconErrorProps) => {
 					variant="regularBody"
 					color="white"
 					colorImmutable={true}
-					weight="semiBold">
+					weight="semiBold"
+				>
 					{error}
 				</Typography>
 				<svg height={20} width={20}>