[WIP] Features/vite plays outside updated json/578

.eslintrc.js

@@ -18,11 +18,20 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module'
   },
-  plugins: ['react-hooks', 'react', '@typescript-eslint', 'prettier'],
+  plugins: [
+	  'react-hooks',
+	  'react',
+	  '@typescript-eslint',
+	  'prettier'
+  ],
   ignorePatterns: ['**/plays/index.js'],
 
   rules: {
-    'import/extensions': 0,
+    // Note: you must disable the base rule as it can report incorrect errors
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "warn",
+
+	'import/extensions': 0,
 
     'import/no-named-as-default-member': 0,
     'react/prop-types': 0,

.github/ISSUE_TEMPLATE/#2PlaysAMonth.yml

@@ -25,17 +25,6 @@ body:
     validations:
       required: true
 
-  - type: checkboxes
-    id: record
-    attributes:
-      label: Record
-      options:
-        - label: I have checked the existing [issues](https://github.com/reactplay/react-play/issues)
-          required: true
-        - label: I have read the [Contributing Guidelines](https://github.com/reactplay/react-play/blob/main/CONTRIBUTING.md)
-          required: true
-        - label: I want to work on this issue
-
   - type: checkboxes
     id: terms
     attributes:

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -72,17 +72,6 @@ body:
       description: Add any other context about the problem here.
       render: shell
 
-  - type: checkboxes
-    id: record
-    attributes:
-      label: Record
-      options:
-        - label: I have checked the existing [issues](https://github.com/reactplay/react-play/issues)
-          required: true
-        - label: I have read the [Contributing Guidelines](https://github.com/reactplay/react-play/blob/main/CONTRIBUTING.md)
-          required: true
-        - label: I want to work on this issue
-
   - type: checkboxes
     id: terms
     attributes:

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -45,17 +45,6 @@ body:
       label: Additional context
       description: Add other additional context about the feature.
 
-  - type: checkboxes
-    id: record
-    attributes:
-      label: Record
-      options:
-        - label: I have checked the existing [issues](https://github.com/reactplay/react-play/issues)
-          required: true
-        - label: I have read the [Contributing Guidelines](https://github.com/reactplay/react-play/blob/main/CONTRIBUTING.md)
-          required: true
-        - label: I want to work on this issue
-
   - type: checkboxes
     id: terms
     attributes:

.github/ISSUE_TEMPLATE/new-play.yml

@@ -25,16 +25,16 @@ body:
     validations:
       required: true
 
-  - type: checkboxes
-    id: record
+  - type: dropdown
+    id: implementation
     attributes:
-      label: Record
+      label: Are you willing to take it up for implementation?
+      multiple: false
       options:
-        - label: I have checked the existing [issues](https://github.com/reactplay/react-play/issues)
-          required: true
-        - label: I have read the [Contributing Guidelines](https://github.com/reactplay/react-play/blob/main/CONTRIBUTING.md)
-          required: true
-        - label: I want to work on this issue
+        - 'Yes'
+        - 'No'
+    validations:
+      required: true
 
   - type: checkboxes
     id: terms

.github/actions/install-dependencies/action.yaml

@@ -0,0 +1,42 @@
+ # * Taken from https://github.com/nhost/nhost/blob/main/
+name: Install Node and package dependencies
+description: 'Install Node dependencies with pnpm'
+inputs:
+  BUILD:
+    description: 'Build packages'
+    default: 'default'
+
+runs:
+  using: 'composite'
+  steps:
+    - uses: pnpm/action-setup@v2.2.4
+      with:
+        version: 8.6.9
+        run_install: false
+    - name: Get pnpm cache directory
+      id: pnpm-cache-dir
+      shell: bash
+      run: echo "dir=$(pnpm store path)" >> $GITHUB_OUTPUT
+    - uses: actions/cache@v3
+      id: pnpm-cache
+      with:
+        path: ${{ steps.pnpm-cache-dir.outputs.dir }}
+        key: ${{ runner.os }}-node-${{ hashFiles('pnpm-lock.yaml') }}
+        restore-keys: ${{ runner.os }}-node-
+    - name: Use Node.js v18
+      uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - shell: bash
+      name: Install packages
+      run: pnpm install --no-frozen-lockfile
+    # * Build all Nhost packages as they are all supposed to be tested.
+    # * They are reused through the Turborepo cache
+    - shell: bash
+      name: Build packages
+      if: ${{ inputs.BUILD == 'all' }}
+      run: pnpm run build:all
+    - shell: bash
+      name: Build everything in the monorepo
+      if: ${{ inputs.BUILD == 'default' }}
+      run: pnpm run build

.github/workflows/cypress.yml

@@ -16,17 +16,16 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v3
       - name: Install Packages
-        run: |
-          npm install --legacy-peer-deps
-
+        uses: ./.github/actions/install-dependencies
+
       # Install NPM dependencies, cache them correctly
       # and run all Cypress tests
       - name: Cypress run
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@v6
         with:
           install-command: |
-            npm install --legacy-peer-deps
-          start: npm start
+            pnpm install
+          start: pnpm start
           wait-on: "http://localhost:3000"
           browser: chrome
         env:

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 
@@ -13,6 +13,10 @@
 # production
 /build
 
+# development
+/dev-dist
+
+
 # misc
 .env
 .DS_Store
@@ -22,6 +26,8 @@
 .env.test.local
 .env.production.local
 package-lock.json
+pnpm-lock.yaml
+.yalc
 
 npm-debug.log*
 yarn-debug.log*
@@ -34,5 +40,8 @@ yarn.lock
 # play index
 src/plays/index.js
 
+# play test
+cypress/e2e/play.cy.ts
+
 # vscode setting
 .vscode

.husky/pre-commit

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

.husky/pre-push

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

.npmrc

@@ -0,0 +1,6 @@
+fetch-timeout=600000
+timeout=600000
+fetch-retries=5
+fetch-retry-mintimeout=100000
+fetch-retry-maxtimeout=600000
+network-concurrency=4

cypress.config.ts

@@ -1,11 +1,14 @@
 import { defineConfig } from 'cypress';
+import vitePreprocessor from 'cypress-vite';
 
 export default defineConfig({
   e2e: {
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
+    setupNodeEvents(on) {
+      on('file:preprocessor', vitePreprocessor());
     },
     baseUrl: 'http://localhost:3000',
-    watchForFileChanges: false
+    watchForFileChanges: false,
+    pageLoadTimeout: 100000,
+    responseTimeout: 100000
   }
 });

cypress/e2e/homePage.cy.ts

@@ -1,38 +1,26 @@
-/// <reference types="cypress" />
+// / <reference types="cypress" />
 
-import { CONTRIBUTORS_COUNT, TWEET_COUNT } from '../support/constant';
+import { CONTRIBUTORS_COUNT, TESTIMONIALS_COUNT } from '../support/constant';
 
 describe('Test home page', () => {
   beforeEach(() => {
+    cy.intercept('POST', '**/v1/graphql').as('contribs');
     cy.visit('/');
+    cy.wait('@contribs');
   });
 
   it('Header component should render properly', () => {
-    cy.get('[data-testid="app-header"]').should('be.visible');
-    cy.get('[data-testid="app-logo"]').should('be.visible');
-    cy.get('[data-testid="plays-search-box-container"]').should('not.exist');
-    cy.get('[data-testid="header-links-container"]').should('be.visible');
-    cy.get('[data-testid="browse-btn"]').should('be.visible').as('browseBtn');
-    cy.get('[data-testid="create-btn"]').should('be.visible');
-    cy.get('[data-testid="ideas-btn"]').should('be.visible');
-    cy.get('[data-testid="github-btn"]').should('be.visible');
-    cy.get('[data-testid="twitter-btn"]').should('be.visible');
-    cy.get('[data-testid="share-btn"]').should('be.visible');
-    cy.get('[data-testid="leaderboard-btn"]').should('be.visible');
+    cy.header();
+  });
 
-    cy.get('@browseBtn').click();
-    cy.get('[data-testid="plays-search-box-container"]').should('be.visible');
+  it('Testitomonials section should render and navigation must be clickable', () => {
+    cy.get('[data-testid="testimonials-section"]').scrollIntoView().should('be.visible');
+    cy.get('[data-testid="testimonials-swiper"]').scrollIntoView().should('be.visible');
   });
 
-  it('Tweet section should render with all tweets', () => {
-    cy.intercept('GET', 'https://cdn.syndication.twimg.com/*').as('tweets');
-    cy.wait('@tweets');
-    cy.get('[data-testid="tweet-container"]').scrollIntoView().should('be.visible');
-    cy.get('[data-testid="tweet-container"] [id*="twitter-widget"]').should(
-      'have.length',
-      TWEET_COUNT
-    );
-    cy.get('[data-testid="watch-svg"]').should('not.exist');
+  it('Testitomonials should have a number of slides', () => {
+    cy.get('[data-testid="testimonials-swiper"]').scrollIntoView().should('be.visible');
+    cy.get('.swiper-slide').should('have.length', TESTIMONIALS_COUNT);
   });
 
   it('Contributors section should render with all contributors', () => {

cypress/e2e/ideasPage.cy.ts

@@ -0,0 +1,11 @@
+// / <reference types="cypress" />
+
+describe('Test play ideas page', () => {
+  beforeEach(() => {
+    cy.visit('/ideas');
+  });
+
+  it('Header component should render properly', () => {
+    cy.header();
+  });
+});

cypress/e2e/leaderboardPage.cy.ts

@@ -0,0 +1,11 @@
+// / <reference types="cypress" />
+
+describe('Test leaderboard page', () => {
+  beforeEach(() => {
+    cy.visit('/leaderboard');
+  });
+
+  it('Header component should render properly', () => {
+    cy.header();
+  });
+});

cypress/support/commands.ts

@@ -1,4 +1,4 @@
-/// <reference types="cypress" />
+// / <reference types="cypress" />
 // ***********************************************
 // This example commands.ts shows you how to
 // create various custom commands and overwrite
@@ -35,3 +35,20 @@
 //     }
 //   }
 // }
+
+// methods
+Cypress.Commands.add('header', () => {
+  cy.get('[data-testid="app-header"]').should('be.visible');
+  cy.get('[data-testid="app-logo"]').should('be.visible');
+  cy.get('[data-testid="plays-search-box-container"]').should('not.exist');
+  cy.get('[data-testid="header-links-container"]').should('be.visible');
+  cy.get('[data-testid="browse-btn"]').should('be.visible').as('browseBtn');
+  cy.get('[data-testid="create-btn"]').should('be.visible');
+  cy.get('[data-testid="ideas-btn"]').should('be.visible');
+  cy.get('[data-testid="github-btn"]').should('be.visible');
+  cy.get('[data-testid="twitter-btn"]').should('be.visible');
+  cy.get('[data-testid="share-btn"]').should('be.visible');
+  cy.get('[data-testid="leaderboard-btn"]').should('be.visible');
+  cy.get('@browseBtn').click();
+  cy.get('[data-testid="plays-search-box-container"]').should('be.visible');
+});

cypress/support/constant.ts

@@ -1,2 +1,2 @@
-export const TWEET_COUNT = 11;
+export const TESTIMONIALS_COUNT = 9;
 export const CONTRIBUTORS_COUNT = 29;

dev-dist/registerSW.js

@@ -0,0 +1,2 @@
+if ('serviceWorker' in navigator)
+  navigator.serviceWorker.register('/dev-sw.js?dev-sw', { scope: '/', type: 'classic' });