Merge pull request #1002 from w3bdesign/1001-refactor-and-improve-code-quality

1001 refactor and improve code quality

Author: w3bdesign

.babelrc

@@ -1,7 +1,7 @@
 NEXT_PUBLIC_GRAPHQL_URL="https://wordpress.url.com/graphql"
 NEXT_PUBLIC_ALGOLIA_INDEX_NAME= "algolia"
 NEXT_PUBLIC_PLACEHOLDER_SMALL_IMAGE_URL="https://res.cloudinary.com/placeholder-337_utsb7h.jpg"
-NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL="https://res.cloudinary.com/placeholder-616-616_beecp5.jpg"
+NEXT_PUBLIC_PLACEHOLDER_LARGE_IMAGE_URL="https://via.placeholder.com/600"
 NEXT_PUBLIC_ALGOLIA_APP_ID = "changeme"
 NEXT_PUBLIC_ALGOLIA_PUBLIC_API_KEY = "changeme"
 NODE_ENV="development"

.env.example

@@ -1,3 +1,15 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "eslint:recommended"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "@next/next/no-img-element": "off",
+    "no-useless-escape": "off",
+    "@typescript-eslint/no-unused-vars": 1
+  },
+  "globals": { "JSX": true },
+  "env": {
+    "browser": true,
+    "es6": true
+  }
 }

.eslintrc.json

@@ -1,11 +1,12 @@
----
+* * *
+
 name: Bug report
 about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
 
----
+* * *
 
 **Describe the bug**
 A clear and concise description of what the bug is.
@@ -24,15 +25,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+-   OS: [e.g. iOS]
+-   Browser [e.g. chrome, safari]
+-   Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+-   Device: [e.g. iPhone6]
+-   OS: [e.g. iOS8.1]
+-   Browser [e.g. stock browser, safari]
+-   Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,30 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: windows-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+      env:
+          CI: true
+          NEXT_PUBLIC_GRAPHQL_URL: ${{ secrets.NEXT_PUBLIC_GRAPHQL_URL }}
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.github/workflows/playwright.yml

@@ -1,24 +1,40 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
-node_modules
-.next
+/.pnp
+.pnp.js
 
 # testing
 /coverage
 
+# next.js
+/.next/
+/out/
+
 # production
 /build
 
 # misc
 .DS_Store
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+*.pem
 
+# debug
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+/test-results/
+/playwright-report/
+/playwright/.cache/

.gitignore

@@ -14,22 +14,22 @@ appearance, race, religion, or sexual identity and orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+-   Using welcoming and inclusive language
+-   Being respectful of differing viewpoints and experiences
+-   Gracefully accepting constructive criticism
+-   Focusing on what is best for the community
+-   Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
+-   The use of sexualized language or imagery and unwelcome sexual attention or
+    advances
+-   Trolling, insulting/derogatory comments, and personal or political attacks
+-   Public or private harassment
+-   Publishing others' private information, such as a physical or electronic
+    address, without explicit permission
+-   Other conduct which could reasonably be considered inappropriate in a
+    professional setting
 
 ## Our Responsibilities
 
@@ -68,9 +68,9 @@ members of the project's leadership.
 ## Attribution
 
 This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+available at <https://www.contributor-covenant.org/version/1/4/code-of-conduct.html>
 
 [homepage]: https://www.contributor-covenant.org
 
 For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq
+<https://www.contributor-covenant.org/faq>

CODE_OF_CONDUCT.md

@@ -7,14 +7,14 @@ Please note we have a code of conduct, please follow it in all your interactions
 
 ## Pull Request Process
 
-1. Ensure any install or build dependencies are removed before the end of the layer when doing a 
-   build.
-2. Update the README.md with details of changes to the interface, this includes new environment 
-   variables, exposed ports, useful file locations and container parameters.
-3. Increase the version numbers in any examples files and the README.md to the new version that this
-   Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
-4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 
-   do not have permission to do that, you may request the second reviewer to merge it for you.
+1.  Ensure any install or build dependencies are removed before the end of the layer when doing a 
+    build.
+2.  Update the README.md with details of changes to the interface, this includes new environment 
+    variables, exposed ports, useful file locations and container parameters.
+3.  Increase the version numbers in any examples files and the README.md to the new version that this
+    Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/).
+4.  You may merge the Pull Request in once you have the sign-off of two other developers, or if you 
+    do not have permission to do that, you may request the second reviewer to merge it for you.
 
 ## Code of Conduct
 
@@ -32,22 +32,22 @@ orientation.
 Examples of behavior that contributes to creating a positive environment
 include:
 
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
+-   Using welcoming and inclusive language
+-   Being respectful of differing viewpoints and experiences
+-   Gracefully accepting constructive criticism
+-   Focusing on what is best for the community
+-   Showing empathy towards other community members
 
 Examples of unacceptable behavior by participants include:
 
-* The use of sexualized language or imagery and unwelcome sexual attention or
-advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
-  address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
+-   The use of sexualized language or imagery and unwelcome sexual attention or
+    advances
+-   Trolling, insulting/derogatory comments, and personal or political attacks
+-   Public or private harassment
+-   Publishing others' private information, such as a physical or electronic
+    address, without explicit permission
+-   Other conduct which could reasonably be considered inappropriate in a
+    professional setting
 
 ### Our Responsibilities
 
@@ -89,4 +89,5 @@ This Code of Conduct is adapted from the [Contributor Covenant][homepage], versi
 available at [http://contributor-covenant.org/version/1/4][version]
 
 [homepage]: http://contributor-covenant.org
+
 [version]: http://contributor-covenant.org/version/1/4/

CONTRIBUTING.md

@@ -48,12 +48,8 @@ The current release has been tested and is confirmed working with the following
 
     <https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm> (Chrome)
 
+3.  Make sure WooCommerce has some products already
 
-3.  Make sure WooCommerce has some products already or import some sample products
-
-    The WooCommerce sample products CSV file is available at `wp-content/plugins/woocommerce/sample-data/sample_products.csv` or [Sample products](sample_products/)
-
-    Import the products at `WP Dashboard > Tools > Import > WooCommerce products(CSV)`
 
 4.  Clone or fork the repo and modify `.env.example` and rename it to `.env`
 
@@ -77,14 +73,16 @@ The current release has been tested and is confirmed working with the following
 
 -   Next.js version 13.1.6
 -   React 18
+-   Typescript
 -   Connect to Woocommerce GraphQL API and list name, price and display image for products
 -   Support for simple products and variable products
 -   Cart handling and checkout with WooCommerce (Cash On Delivery only for now)
 -   Algolia search (requires [algolia-woo-indexer](https://github.com/w3bdesign/algolia-woo-indexer))
 -   Meets WCAG accessibility standards where possible
 -   Placeholder for products without images
 -   Apollo Client with GraphQL
--   React Hook Form with form validation and error display
+-   React Hook Form
+-   Native HTML5 form validation
 -   Animations with Framer motion, Styled components and Animate.css
 -   Loading spinner created with Styled Components
 -   Shows page load progress with Nprogress during navigation
@@ -94,7 +92,6 @@ The current release has been tested and is confirmed working with the following
 -   Pretty URLs with builtin Nextjs functionality
 -   Tailwind 3 for styling
 -   JSDoc comments
--   WooCommerce cart session is automatically deleted after 48 hours to prevent GraphQL session expiration errors
 
 ## Troubleshooting
 
@@ -119,7 +116,6 @@ With that said, keep the following in mind:
 ## TODO
 
 -   Add total to cart/checkout page
--   Show stock quantity on individual products
 -   Copy billing address to shipping address
 -   Display product variation name in cart / checkout
 -   Hide products not in stock