Partial migration towards NextJs (#24)

* chore: Update postcss dependency to version 7.0.39

* chore: Move entire project into an "old" directory as reference

* chore: Installs a fresh setup of NextJs

* Update dependencies and move components (#21)

* chore: Update editorconfig and tailwind configuration files

* chore: Add "root" property to .eslintrc.json

* chore: Exclude "old" directory from TypeScript compilation

* chore: Update npm dependencies to latest versions

* chore: Update React import types to FC and PropsWithChildren

* chore: Update npm dependencies to include prop-types and react-ga

* chore: Update npm dependencies to include @material-ui/core

* chore: Update npm dependencies to include react-redux

* chore: Enable downlevel iteration in tsconfig.json

* chore: Refactor app-store middleware to use concat instead of spread operator

* chore: Remove commented out code for hot reload in app-store.ts

* Add null check in snapshot-middleware.ts

* chore: Adds GitHub actions for PR and merging into main/v2.0.x branches (#22)

* Chore: Update global styles, dependencies, and environment variables (#23)

* chore: Enable build step to run independent of lint, test, and storybooks

* chore: Add 'tw-neumorphism' package for neumorphic design styling

* chore: Update global styles and dependencies

* chore: Update import paths for components in page.tsx

* Update audio file paths to use relative URLs

* chore: add media to public folder

* chore: Remove unnecessary files and dependencies

* Update environment variables and audio file paths

* chore: Update environment variables and gitignore

.editorconfig

@@ -5,9 +5,22 @@ root = true
 charset = utf-8
 indent_style = space
 indent_size = 4
+end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 
 [*.md]
 max_line_length = off
 trim_trailing_whitespace = false
+
+[*.yaml]
+indent_size = 2
+
+[*.yml]
+indent_size = 2
+
+[*.sh]
+indent_size = 2
+
+[*.json]
+indent_size = 2

.env

@@ -1,7 +1,7 @@
-REACT_APP_BRAND_NAME=Tetromino
-REACT_APP_GITHUB=https://github.com/reactgular/tetromino
-REACT_APP_STORAGE_KEY=tetromino
-REACT_APP_VERSION=1.0.0
+NEXT_PUBLIC_BRAND_NAME=Tetromino
+NEXT_PUBLIC_GITHUB=https://github.com/reactgular/tetromino
+NEXT_PUBLIC_STORAGE_KEY=tetromino
+NEXT_PUBLIC_VERSION=2.0.0
 # Base path for loading audio files
-REACT_APP_BASE=/tetromino
-REACT_APP_ANALYTICS=
+NEXT_PUBLIC_BASE=/tetromino
+NEXT_PUBLIC_ANALYTICS=

.env.local

@@ -0,0 +1,3 @@
+NEXT_PUBLIC_BASE=http://localhost:3000/
+NEXT_PUBLIC_ANALYTICS=
+

.env.production

@@ -1,2 +1,2 @@
 # Please change to your Google Analytics ID
-REACT_APP_ANALYTICS=UA-141015392-3
+NEXT_PUBLIC_ANALYTICS=UA-141015392-3

.eslintrc.json

@@ -1,50 +1,3 @@
 {
-    "parser": "@typescript-eslint/parser",
-    "extends": [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:react/recommended",
-        "plugin:react-hooks/recommended",
-        "plugin:prettier/recommended",
-        "prettier",
-        "prettier/react",
-        "prettier/@typescript-eslint"
-    ],
-    "plugins": [
-        "@typescript-eslint",
-        "react",
-        "react-hooks",
-        "prettier"
-    ],
-    "rules": {
-        "no-unused-vars": "off",
-        "@typescript-eslint/no-unused-vars": "off",
-        "@typescript-eslint/explicit-module-boundary-types": "off",
-        "@typescript-eslint/no-inferrable-types": "off",
-        "@typescript-eslint/no-namespace": "off",
-        "@typescript-eslint/no-non-null-assertion": "off",
-        "@typescript-eslint/no-explicit-any": "off",
-        "react/prop-types": "off",
-        "react/react-in-jsx-scope": "off",
-        "react/jsx-first-prop-new-line": [
-            1,
-            "multiline"
-        ],
-        "react/jsx-closing-bracket-location": [
-            2,
-            "tag-aligned"
-        ],
-        "no-restricted-imports": [
-            "error",
-            {
-                "patterns": [
-                    "@material-ui/*/*/*",
-                    "!@material-ui/core/test-utils/*",
-                    "react-icons/all"
-                ]
-            }
-        ]
-    },
-    "globals": {
-        "React": "writable"
-    }
+  "extends": "next/core-web-vitals"
 }

.github/actions/install/README.md

@@ -0,0 +1,38 @@
+# 📥 Install GitHub Action
+
+This GitHub Action is designed to install dependencies for your project. It does so by first attempting to cache the `node_modules` directory to improve subsequent installation speeds. If the dependencies have not changed (i.e., the `yarn.lock` file remains unchanged), it retrieves the cached `node_modules`. Otherwise, it performs a fresh install.
+
+## Features:
+
+1. 📦 **Caching of `node_modules`**: This step caches the `node_modules` directory to improve the speed of subsequent installations. It uses the `actions/cache@v4` action for this purpose.
+2. 📥 **Installation of Dependencies**: If the cache was not hit (i.e., the dependencies or the `yarn.lock` file changed), it installs the dependencies using Yarn.
+
+## How it Works:
+
+1. **Cache Key Generation**: The key for the cache is generated using the operating system of the runner and a hash of the `yarn.lock` file. This ensures that the cache is only hit when the `yarn.lock` file remains unchanged across workflow runs.
+2. **Cache Retrieval**: If the cache is hit, the `node_modules` directory is restored, skipping the installation step.
+3. **Dependency Installation**: If the cache is not hit, it installs the dependencies using `yarn install --frozen-lockfile`.
+
+## Usage:
+
+To use this action in your workflow, add the following steps to your `.github/workflows/your-workflow-file.yml`:
+
+```yaml
+name: Your Workflow Name
+
+on:
+    push: # or any other GitHub event
+        branches:
+            - main
+
+jobs:
+    install:
+        runs-on: ubuntu-latest # or any other runner
+
+        steps:
+            -   name: Checkout code
+                uses: actions/checkout@v2
+
+            -   name: 📥 Install
+                uses: ./.github/actions/install
+```

.github/actions/install/action.yml

@@ -0,0 +1,17 @@
+name: "📥 Install"
+description: "📥 Install dependencies"
+
+runs:
+  using: "composite"
+  steps:
+    - name: "📦 Cache node_modules"
+      id: node-modules
+      uses: actions/cache@v4
+      with:
+        path: '**/node_modules'
+        key: ${{ runner.os }}-${{ runner.arch }}-node-modules-${{ hashFiles('**/yarn.lock') }}
+
+    - name: "📥 Install dependencies"
+      if: steps.node-modules.outputs.cache-hit != 'true'
+      shell: bash
+      run: yarn install --frozen-lockfile

.github/actions/restore/README.md

@@ -0,0 +1,57 @@
+# 📦 Node Modules - GitHub Action
+
+This GitHub Action is designed to restore the `node_modules` cache, improving the speed of workflows by using cached versions of dependencies. It specifically targets Node.js projects and uses the cache based on the content of the `yarn.lock` file.
+
+## 🚀 Features
+
+- Uses the `actions/cache` action to manage the caching of `node_modules`.
+- Takes into account the OS of the runner to ensure platform-specific dependencies are properly cached.
+- Relies on the `yarn.lock` file to ensure that the cache is as up-to-date as your dependencies.
+
+## 📝 Usage
+
+To use this action in your workflow, follow the steps below:
+
+1. Create (if you haven't already) a workflow `.yml` file in your `.github/workflows` directory.
+2. Incorporate the `📦 Node Modules` action from the local action path `./.github/actions/restore` as illustrated in the example below:
+
+```yaml
+name: Your Workflow Name
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Use Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'
+
+    - name: 📦 Node Modules
+      uses: ./.github/actions/restore
+
+    - name: Install dependencies
+      run: yarn install
+
+    # Add your other steps like running tests, build, etc.
+```
+
+## 📌 Notes
+
+- The action uses the `fail-on-cache-miss: true` setting, which means the workflow will fail if the cache can't be restored. Depending on your use-case, you might want to adjust this behavior.
+
+## 💡 Example
+
+Considering you've installed the action in the `./.github/actions/restore` directory:
+
+Your workflow will automatically attempt to restore the `node_modules` cache before installing the dependencies using `yarn install`. If the cache is found and matches the current `yarn.lock`, it will restore the `node_modules` directory from the cache. If not, the workflow will proceed to install the dependencies normally and cache them for future use.
+
+## 📖 Conclusion
+
+By utilizing this action, you can potentially save significant time during your workflow runs, especially for projects with a large number of dependencies. Make sure your workflow is set up correctly to make the most out of the caching capabilities provided by this action.

.github/actions/restore/action.yml

@@ -0,0 +1,12 @@
+name: "📦 Node Modules"
+description: "🔍 Restore node_modules cache"
+
+runs:
+  using: "composite"
+  steps:
+    - name: "🔍 Restore node_modules cache"
+      uses: actions/cache/restore@v4
+      with:
+        path: '**/node_modules'
+        key: ${{ runner.os }}-${{ runner.arch }}-node-modules-${{ hashFiles('**/yarn.lock') }}
+        fail-on-cache-miss: true

.github/workflows/deploy-artifacts.yml

@@ -0,0 +1,86 @@
+name: "🔧 Deploy to GitHub"
+
+on:
+  # When you push changes: only affected projects will be build/deploy
+  push:
+    branches:
+      - main
+      - v2.0.x
+  # When you manually trigger: all projects will be build/deploy
+  workflow_dispatch:
+
+concurrency: "deploy"
+
+jobs:
+  install:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "📥 Checkout code"
+        uses: actions/checkout@v4
+
+      - name: "📦 Install dependencies"
+        uses: ./.github/actions/install
+
+  lint:
+    runs-on: ubuntu-latest
+    needs: [ install ]
+    steps:
+      - name: "📥 Checkout code"
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: "💽 Restore node_modules cache"
+        uses: ./.github/actions/restore
+
+      - name: "🔨 Lint"
+        run: yarn lint
+
+  test:
+    runs-on: ubuntu-latest
+    needs: [ install ]
+    if: false
+    steps:
+      - name: "📥 Checkout code"
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: "💽 Restore node_modules cache"
+        uses: ./.github/actions/restore
+
+      - name: "🔨 Test"
+        run: ${{ env.NX }} affected -t test
+
+  storybooks:
+    runs-on: ubuntu-latest
+    needs: [ install ]
+    if: false
+    steps:
+      - name: "📥 Checkout code"
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: "💽 Restore node_modules cache"
+        uses: ./.github/actions/restore
+
+      - name: "🔨 Build storybooks"
+        run: yarn build-storybook
+
+  build:
+    runs-on: ubuntu-latest
+    #needs: [ lint, test, storybooks ]
+    needs: [ lint ]
+    steps:
+      - name: "📥 Checkout code"
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: "💽 Restore node_modules cache"
+        uses: ./.github/actions/restore
+
+      - name: "🔨 Build projects"
+        run: yarn build
+

.github/workflows/pull_request.yml

@@ -0,0 +1,81 @@
+name: "🔄 Pull Request"
+
+on:
+  pull_request:
+    types: [ opened, synchronize, reopened, converted_to_draft, ready_for_review ]
+
+concurrency:
+  group: "${{ github.workflow }}-${{ github.event.pull_request.number }}"
+  cancel-in-progress: true
+
+jobs:
+  install:
+    runs-on: ubuntu-latest
+    steps:
+      - name: "📥 Checkout code"
+        uses: actions/checkout@v4
+
+      - name: "📦 Install dependencies"
+        uses: ./.github/actions/install
+
+  lint:
+    runs-on: ubuntu-latest
+    needs: [ install ]
+    steps:
+      - name: "📥 Checkout code"
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: "💽 Restore node_modules cache"
+        uses: ./.github/actions/restore
+
+      - name: "🔨 Lint"
+        run: yarn lint
+
+  test:
+    runs-on: ubuntu-latest
+    needs: [ install ]
+    if: false
+    steps:
+      - name: "📥 Checkout code"
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: "💽 Restore node_modules cache"
+        uses: ./.github/actions/restore
+
+      - name: "🔨 Test"
+        run: ${{ env.NX }} affected -t test
+
+  storybooks:
+    runs-on: ubuntu-latest
+    needs: [ install ]
+    if: false
+    steps:
+      - name: "📥 Checkout code"
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: "💽 Restore node_modules cache"
+        uses: ./.github/actions/restore
+
+      - name: "🔨 Build storybooks"
+        run: yarn build-storybook
+
+  build:
+    runs-on: ubuntu-latest
+    needs: [ install ]
+    steps:
+      - name: "📥 Checkout code"
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: "💽 Restore node_modules cache"
+        uses: ./.github/actions/restore
+
+      - name: "🔨 Build projects"
+        run: yarn build