Upgrade project dependencies; Bump node; Update yarn lockfile

.editorconfig

@@ -0,0 +1,14 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+end_of_line = lf
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,jsx,ts,tsx}]
+quote_type = single

.env.example

@@ -1,4 +1,4 @@
 SITE_URL=http://localhost:3000
 NEXT_PUBLIC_WOO_SITE_URL=http://yourwocommercesite.com
 WOO_CONSUMER_KEY=xxxxx
-WOO_SECRET=xxxxx
+WOO_SECRET=xxxxx

.eslintignore

@@ -5,4 +5,4 @@
 **/node_modules/**
 **/vendor/**
 **/build/**
-**/src/components/**/vendor-*
+**/src/components/**/vendor-*

.eslintrc.js

@@ -1,39 +1,6 @@
-module.exports = {
-    root: true, // Make sure eslint picks up the config at the root of the directory
-    parserOptions: {
-        ecmaVersion: 2020, // Use the latest ecmascript standard
-        sourceType: 'module', // Allows using import/export statements
-        ecmaFeatures: {
-            jsx: true // Enable JSX since we're using React
-        }
-    },
-    settings: {
-        react: {
-            version: 'detect' // Automatically detect the react version
-        }
-    },
-    env: {
-        browser: true, // Enables browser globals like window and document
-        amd: true, // Enables require() and define() as global variables as per the amd spec.
-        node: true // Enables Node.js global variables and Node.js scoping.
-    },
-    extends: [
-        'eslint:recommended',
-        'plugin:react/recommended',
-        'plugin:jsx-a11y/recommended',
-        'plugin:prettier/recommended' // Make this the last element so prettier config overrides other formatting rules
-    ],
-    rules: {
-        'prettier/prettier': ['error', {}, { usePrettierrc: true }], // Use our .prettierrc file as source
-        'react/react-in-jsx-scope': 'off',
-        'jsx-a11y/anchor-is-valid': [
-            'error',
-            {
-                components: ['Link'],
-                specialLink: ['hrefLeft', 'hrefRight'],
-                aspects: ['invalidHref', 'preferButton']
-            }
-        ],
-        'react/prop-types': 'off'
-    }
+const eslintConfig = {
+  root: true,
+  extends: ['next/core-web-vitals', 'plugin:prettier/recommended'],
 };
+
+module.exports = eslintConfig;

.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+# Apply prettier formatting.
+e78e8b49d22f81980b855644de7cd78c80c9673f

.gitignore

@@ -11,5 +11,4 @@ dist/
 client-config.js
 .next
 wooConfig.js
-
-.now
+.now

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn run lint:staged

.lintstagedrc.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+const buildEslintCommand = (filenames) =>
+  `next lint --file ${filenames
+    .map((f) => path.relative(process.cwd(), f))
+    .join(' --file ')}`;
+
+module.exports = {
+  '*.{js,jsx,ts,tsx}': [buildEslintCommand],
+};

.nowignore

@@ -1,2 +1,2 @@
 .next
-.cache
+.cache

.nvmrc

@@ -1 +1 @@
-14.15.0
+18

.prettierignore

@@ -1,9 +1,5 @@
-node_modules
 public
-src/styles/vendor/
 *.md
 .next
-.eslintrc.js
-next.config.js
-package-lock.json
-package.json
+node_modules
+src/styles/vendor/

.prettierrc

@@ -1,8 +1,9 @@
 {
-    "semi": true,
-    "tabWidth": 4,
-    "printWidth": 100,
-    "singleQuote": true,
-    "trailingComma": "none",
-    "jsxBracketSameLine": true
-}
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 80,
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "trailingComma": "es5",
+  "bracketSameLine": false
+}

README.md

@@ -32,22 +32,22 @@ These instructions will get you a copy of the project up and running on your loc
 	* [wp-graphiql](https://github.com/wp-graphql/wp-graphiql) Provides GraphiQL IDE (playground) to the WP-Admin
 	* [wp-graphql-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce) Adds Woocommerce functionality to a WPGraphQL schema( Tested upto [v0.7.0](https://github.com/wp-graphql/wp-graphql-woocommerce/releases/tag/v0.7.0) of wp-graphql-woocommerce)
 
-	
+
 2. You can also import default wooCommerce products that come with wooCommerce Plugin for development ( if you don't have any products in your WordPress install )
-   WP Dashboard > Tools > WooCommerce products(CSV) : The WooCommerce default products csv file is available at `wp-content/plugins/woocommerce/sample-data/sample_products.csv`   	
-   
+   WP Dashboard > Tools > WooCommerce products(CSV) : The WooCommerce default products csv file is available at `wp-content/plugins/woocommerce/sample-data/sample_products.csv`
+
 ### 2. For Authentication :lock:
 
 a. You can use any secret token of your choice, however it would be best if you generate one using WordPress Salt generator (https://api.wordpress.org/secret-key/1.1/salt/) to generate a Secret.
 And just pick up any one of the token and add it in place of 'your-secret-token' below:
-   
+
    Define a Secret in `wp-config.php` of your WordPress directory:
    ```
    define( 'GRAPHQL_JWT_AUTH_SECRET_KEY', 'your-secret-token' );
-   ```  
+   ```
 
 b. Depending on your particular environment, you may have to research how to enable these headers, but in Apache, you can do the following in your `.htaccess`:
-   
+
    ```
    SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
    ```
@@ -78,7 +78,7 @@ WOO_SECRET=xxxxx
 * Open the site in Chrome on your mobile and then click on add to home screen.
 * It will be downloaded and saved as a Progressive Web App on your mobile.
 * Once added Look `WP Decoupled` app on your mobile.
-* This PWA will work even when you are offline. 
+* This PWA will work even when you are offline.
 
 ## Branches Information :seedling:
 

bin/allow-yarn.js

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+const { basename, resolve } = require('path');
+const { unlinkSync, existsSync } = require('fs');
+
+if (basename(process.env.npm_execpath) !== 'yarn.js') {
+  console.log(`
+  ╔═════════════════════════════════════════════════════════════╗
+  ║                                                             ║
+  ║   Use "yarn" for installation in this project.              ║
+  ║                                                             ║
+  ║   If you don't have Yarn, install it via "npm i -g yarn".   ║
+  ║   For more details, go to https://yarnpkg.com/              ║
+  ║                                                             ║
+  ╚═════════════════════════════════════════════════════════════╝
+  `);
+
+  try {
+    if (existsSync(resolve(__dirname, '../pnpm-lock.yaml'))) {
+      unlinkSync(resolve(__dirname, '../pnpm-lock.yaml'));
+    }
+
+    if (existsSync(resolve(__dirname, '../package-lock.json'))) {
+      unlinkSync(resolve(__dirname, '../package-lock.json'));
+    }
+  } catch (err) {
+    // ignore
+  }
+
+  process.exit(1);
+}

cypress.json

@@ -1,3 +1,3 @@
 {
-    "baseUrl": "http://localhost:3000"
-}
+  "baseUrl": "http://localhost:3000"
+}

cypress/integration/homeProduct.spec.js

@@ -1,15 +1,15 @@
 /* eslint-disable */
 
 describe('Visit home , if products exists, check the links by clicking', () => {
-    it('visit and check first product', () => {
-        cy.visit('http://localhost:3000');
-        cy.get('.products-wrapper').find('.product-container').first().click()
-        cy.url().should('include','/product/');
-    });
+  it('visit and check first product', () => {
+    cy.visit('http://localhost:3000');
+    cy.get('.products-wrapper').find('.product-container').first().click();
+    cy.url().should('include', '/product/');
+  });
 
-    it('visit and check last product', () => {
-        cy.visit('http://localhost:3000');
-        cy.get('.products-wrapper').find('.product-container').last().click()
-        cy.url().should('include','/product/');
-    });
+  it('visit and check last product', () => {
+    cy.visit('http://localhost:3000');
+    cy.get('.products-wrapper').find('.product-container').last().click();
+    cy.url().should('include', '/product/');
+  });
 });

next.config.js

@@ -1,35 +1,18 @@
-const withCss = require('@zeit/next-css');
+/**
+ * External dependencies
+ */
 const path = require('path');
 
-const withOffline = require('next-offline');
-const withSass = require('@zeit/next-sass');
-
-const workBoxOptions = {
-    workboxOpts: {
-        swSrc: 'service-worker.js',
-        swDest: 'static/service-worker.js',
-        exclude: [/.+error\.js$/, /\.map$/]
-    }
+const nextConfig = {
+  images: {
+    domains: [
+      'https://via.placeholder.com',
+      new URL(process.env.NEXT_PUBLIC_WOO_SITE_URL).hostname,
+    ],
+  },
+  sassOptions: {
+    includePaths: [path.resolve('src', 'styles')],
+  },
 };
 
-const backend_hostname = new URL(process.env.NEXT_PUBLIC_WOO_SITE_URL).hostname;
-
-module.exports = withOffline(
-    withCss(
-        withSass({
-            workboxOpts: workBoxOptions.workboxOpts,
-            generateInDevMode: true,
-            dontAutoRegisterSw: true,
-            generateSw: false,
-            globPatterns: ['static/**/*'],
-            globDirectory: '.',
-            target: 'serverless',
-            images: {
-                  domains: [
-                        backend_hostname,
-                        'https://via.placeholder.com'
-                    ],
-            },
-        })
-    )
-);
+module.exports = nextConfig;