diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml index ee6dc3c..1357849 100644 --- a/.github/workflows/commitlint.yml +++ b/.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 diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 7221182..0bfdd58 100644 --- a/.github/workflows/lint.yml +++ b/.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 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index b835508..2e4c8f8 100644 --- a/.github/workflows/release.yml +++ b/.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 }} diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index cb02a4c..93e5ecc 100644 --- a/.github/workflows/tests.yml +++ b/.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,7 +28,7 @@ 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 @@ -36,13 +36,13 @@ jobs: # 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 diff --git a/.nvmrc b/.nvmrc index 6a9d9e2..90e4166 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -14.18 +16.15 diff --git a/.prettierrc b/.prettierrc index d53fdca..4738d72 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,8 +1,7 @@ { - "useTabs": true, + "useTabs": true, "printWidth": 120, "singleQuote": true, "trailingComma": "es5", - "jsxBracketSameLine": true, "semi": false } diff --git a/.vscode/settings.json b/.vscode/settings.json index a2d1840..7e7364a 100644 --- a/.vscode/settings.json +++ b/.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" } diff --git a/components/button/index.module.scss b/components/button/index.module.scss index 6af9b1b..61684b9 100644 --- a/components/button/index.module.scss +++ b/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; diff --git a/components/drag-and-drop/index.tsx b/components/drag-and-drop/index.tsx index d7d715b..f5b0469 100644 --- a/components/drag-and-drop/index.tsx +++ b/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 && ( <>
setIsHover(true)} - onMouseLeave={() => setIsHover(false)}> + onMouseLeave={() => setIsHover(false)} + >
@@ -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" + > Generate all the sizes for your
@@ -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" + > Drag &  @@ -313,7 +318,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { weight="semiBold" color="gray" tag="div" - className={styles.filenameWrapper}> + className={styles.filenameWrapper} + > {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" + > PWA compatible @@ -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" + > Dark Mode version @@ -392,14 +400,18 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { onClick={() => { splitbee.track('Re-upload') resetImage() - }}> + }} + > Re-upload
@@ -442,7 +454,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { className={styles.showCode} variant="regularTransparent" color="gray" - onClick={() => setIsModalOpen(true)}> + onClick={() => setIsModalOpen(true)} + > Show
@@ -455,14 +468,16 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { onClick={() => { splitbee.track('Make a new one') resetImage() - }}> + }} + > Make a new one @@ -475,7 +490,8 @@ const DragAndDrop = ({ onFile, onGenerate, onError }: DragAndDropProps) => { className={styles.content} overlayClassName={styles.overlay} closeTimeoutMS={200} - contentLabel="Code generated"> + contentLabel="Code generated" + >
diff --git a/components/favycon-error/index.tsx b/components/favycon-error/index.tsx index 4094c5b..8f260a4 100644 --- a/components/favycon-error/index.tsx +++ b/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} diff --git a/components/favycon-info/index.tsx b/components/favycon-info/index.tsx index dffbe7a..ddbb7c2 100644 --- a/components/favycon-info/index.tsx +++ b/components/favycon-info/index.tsx @@ -102,7 +102,8 @@ const FavyconInfo = ({ className={styles.content} overlayClassName={styles.overlay} closeTimeoutMS={200} - contentLabel="About Us"> + contentLabel="About Us" + >
@@ -166,7 +167,8 @@ const FavyconInfo = ({ href={`https://twitter.com/${person.screenName}`} className={styles.personTwitter} target="_blank" - rel="noopener noreferrer"> + rel="noopener noreferrer" + > {person.screenName} @@ -176,7 +178,8 @@ const FavyconInfo = ({ href={`https://github.com/${person.screenName}`} className={classnames(styles.personTwitter, styles.personGithub)} target="_blank" - rel="noopener noreferrer"> + rel="noopener noreferrer" + > {person.screenName} @@ -194,7 +197,8 @@ const FavyconInfo = ({ className={styles.repo} href="https://github.com/ruisaraiva19/favycon" target="_blank" - rel="noopener noreferrer"> + rel="noopener noreferrer" + > GitHub . Have feedback? Send it to{' '} diff --git a/components/typography/index.module.scss b/components/typography/index.module.scss index 8b3abae..411d3ab 100644 --- a/components/typography/index.module.scss +++ b/components/typography/index.module.scss @@ -1,7 +1,7 @@ @import '../../styles/variables.scss'; .root { - font-family: Manrope, Arial, Helvetica Neue, Helvetica, sans-serif; + font-family: 'Manrope', Arial, Helvetica Neue, Helvetica, sans-serif; } .h1 { diff --git a/cypress.config.ts b/cypress.config.ts new file mode 100644 index 0000000..13ae46d --- /dev/null +++ b/cypress.config.ts @@ -0,0 +1,15 @@ +import { defineConfig } from 'cypress' + +export default defineConfig({ + viewportWidth: 1280, + viewportHeight: 720, + e2e: { + // We've imported your old cypress plugins here. + // You may want to clean this up later by importing these. + setupNodeEvents(on, config) { + // eslint-disable-next-line @typescript-eslint/no-var-requires + return require('./cypress/plugins/index.js')(on, config) + }, + baseUrl: 'http://localhost:3000', + }, +}) diff --git a/cypress.json b/cypress.json deleted file mode 100644 index 4a68c37..0000000 --- a/cypress.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "baseUrl": "http://localhost:3000", - "viewportWidth": 1280, - "viewportHeight": 720 -} diff --git a/cypress/integration/drag-and-drop.spec.js b/cypress/e2e/drag-and-drop.cy.js similarity index 100% rename from cypress/integration/drag-and-drop.spec.js rename to cypress/e2e/drag-and-drop.cy.js diff --git a/cypress/support/index.js b/cypress/support/e2e.js similarity index 100% rename from cypress/support/index.js rename to cypress/support/e2e.js diff --git a/next.config.js b/next.config.js index 37cd1a8..1f9ace0 100644 --- a/next.config.js +++ b/next.config.js @@ -1,3 +1,4 @@ +/** @type {import('next').NextConfig} */ module.exports = { poweredByHeader: false, images: { @@ -5,28 +6,30 @@ module.exports = { imageSizes: [56, 112, 185, 370, 370, 375, 540, 740, 750, 1080], }, headers() { - return [ - { - source: '/(.*)', - headers: [ + return process.env.NODE_ENV === 'production' + ? [ { - key: 'X-XSS-Protection', - value: '1; mode=block', + source: '/(.*)', + headers: [ + { + key: 'X-XSS-Protection', + value: '1; mode=block', + }, + { + key: 'X-Frame-Options', + value: 'SAMEORIGIN', + }, + { + key: 'X-Content-Type-Options', + value: 'nosniff', + }, + { + key: 'Content-Security-Policy', + value: `default-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://hive.splitbee.io https://vitals.vercel-insights.com; script-src 'self' https://cdn.splitbee.io; font-src 'self'; frame-ancestors 'self'`, + }, + ], }, - { - key: 'X-Frame-Options', - value: 'SAMEORIGIN', - }, - { - key: 'X-Content-Type-Options', - value: 'nosniff', - }, - { - key: 'Content-Security-Policy', - value: `default-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://hive.splitbee.io https://vitals.vercel-insights.com; script-src 'self' https://cdn.splitbee.io; font-src 'self' https://fonts.gstatic.com; frame-ancestors 'self'`, - }, - ], - }, - ] + ] + : [] }, } diff --git a/package.json b/package.json index 3eb70bf..b515b98 100644 --- a/package.json +++ b/package.json @@ -44,93 +44,94 @@ "dependencies": { "@fiahfy/ico-convert": "0.0.12", "@splitbee/web": "0.3.0", - "@use-gesture/react": "10.2.0", + "@use-gesture/react": "10.2.16", "adm-zip": "0.5.9", - "blurhash": "1.1.4", + "blurhash": "1.1.5", "classnames": "2.3.1", "multer": "1.4.3", - "next": "12.0.6", + "next": "12.2.0", "nprogress": "0.2.0", - "prismjs": "1.25.0", - "prop-types": "15.7.2", + "prismjs": "1.28.0", + "prop-types": "15.8.1", "react": "17.0.2", "react-clipboard.js": "2.0.16", "react-dom": "17.0.2", "react-dropzone": "11.4.2", - "react-modal": "3.14.4", + "react-modal": "3.15.1", "react-transition-group": "4.4.2", - "react-use": "17.3.1" + "react-use": "17.4.0" }, "devDependencies": { - "@babel/core": "7.16.0", - "@commitlint/cli": "15.0.0", - "@commitlint/config-conventional": "15.0.0", - "@storybook/addon-a11y": "6.4.7", - "@storybook/addon-actions": "6.4.7", + "@babel/core": "7.18.6", + "@commitlint/cli": "17.0.3", + "@commitlint/config-conventional": "17.0.3", + "@storybook/addon-a11y": "6.5.9", + "@storybook/addon-actions": "6.5.9", "@storybook/addon-console": "1.2.3", - "@storybook/addon-docs": "6.4.7", - "@storybook/addon-essentials": "6.4.7", - "@storybook/addon-links": "6.4.7", + "@storybook/addon-docs": "6.5.9", + "@storybook/addon-essentials": "6.5.9", + "@storybook/addon-links": "6.5.9", "@storybook/addon-postcss": "2.0.0", - "@storybook/addons": "6.4.7", - "@storybook/api": "6.4.7", - "@storybook/builder-webpack5": "6.4.7", - "@storybook/client-api": "6.4.7", - "@storybook/components": "6.4.7", - "@storybook/core-events": "6.4.7", - "@storybook/manager-webpack5": "6.4.7", - "@storybook/node-logger": "6.4.7", - "@storybook/react": "6.4.7", - "@storybook/theming": "6.4.7", + "@storybook/addons": "6.5.9", + "@storybook/api": "6.5.9", + "@storybook/builder-webpack5": "6.5.9", + "@storybook/client-api": "6.5.9", + "@storybook/components": "6.5.9", + "@storybook/core-events": "6.5.9", + "@storybook/manager-webpack5": "6.5.9", + "@storybook/node-logger": "6.5.9", + "@storybook/react": "6.5.9", + "@storybook/theming": "6.5.9", "@types/adm-zip": "0.4.34", "@types/multer": "1.4.7", "@types/node": "16.11.11", "@types/nprogress": "0.2.0", - "@types/prismjs": "1.16.6", + "@types/prismjs": "1.26.0", "@types/react": "17.0.37", "@types/react-modal": "3.13.1", - "@types/react-transition-group": "4.4.4", + "@types/react-transition-group": "4.4.5", "@types/sharp": "0.29.4", - "@typescript-eslint/eslint-plugin": "5.5.0", - "@typescript-eslint/parser": "5.5.0", + "@typescript-eslint/eslint-plugin": "5.30.5", + "@typescript-eslint/parser": "5.30.5", "all-contributors-cli": "6.20.0", - "babel-loader": "8.2.3", + "babel-loader": "8.2.5", "commitizen": "4.2.4", - "cypress": "9.1.1", + "cypress": "10.3.0", "cypress-file-upload": "5.0.8", "cz-conventional-changelog": "3.3.0", - "dotenv": "10.0.0", - "eslint": "8.4.0", - "eslint-config-next": "12.0.6", - "eslint-config-prettier": "8.3.0", + "dotenv": "16.0.1", + "eslint": "8.19.0", + "eslint-config-next": "12.2.0", + "eslint-config-prettier": "8.5.0", "eslint-plugin-cypress": "2.12.1", - "eslint-plugin-prettier": "4.0.0", - "eslint-plugin-storybook": "0.5.3", - "husky": "7.0.4", - "lint-staged": "12.1.2", + "eslint-plugin-prettier": "4.2.1", + "eslint-plugin-storybook": "0.5.13", + "husky": "8.0.1", + "lint-staged": "13.0.3", "npm-run-all": "4.1.5", - "postcss": "8.4.4", + "postcss": "8.4.14", "postcss-100vh-fix": "1.0.2", "postcss-flexbugs-fixes": "5.0.2", - "postcss-preset-env": "7.0.1", - "postcss-scss": "4.0.2", - "prettier": "2.3.2", - "react-refresh": "0.11.0", - "sass": "1.44.0", - "sass-loader": "12.3.0", - "semantic-release": "18.0.1", + "postcss-preset-env": "7.7.2", + "postcss-scss": "4.0.4", + "prettier": "2.7.1", + "react-refresh": "0.14.0", + "require-from-string": "2.0.2", + "sass": "1.53.0", + "sass-loader": "13.0.2", + "semantic-release": "19.0.3", "start-server-and-test": "1.14.0", - "storybook-addon-next-router": "3.1.0", - "storybook-dark-mode": "1.0.8", - "stylelint": "14.1.0", - "stylelint-config-css-modules": "2.3.0", + "storybook-addon-next-router": "4.0.0", + "storybook-dark-mode": "1.1.0", + "stylelint": "14.9.1", + "stylelint-config-css-modules": "4.1.0", "stylelint-config-prettier": "9.0.3", "stylelint-config-recess-order": "3.0.0", - "stylelint-config-standard": "24.0.0", + "stylelint-config-standard": "26.0.0", "stylelint-prettier": "2.0.0", - "stylelint-scss": "4.0.0", - "typescript": "4.4.4", - "webpack": "5.64.4" + "stylelint-scss": "4.2.0", + "typescript": "4.7.4", + "webpack": "5.73.0" }, "config": { "commitizen": { diff --git a/pages/_document.tsx b/pages/_document.tsx index 7fe41c2..aad13d7 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -5,10 +5,7 @@ class MyDocument extends Document { render() { return ( - - - - +