merge: promote feature-new-ui-2 to trunk

.github/dependabot.yml

@@ -1,12 +1,7 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
 version: 2
 updates:
-  - package-ecosystem: "npm" # See documentation for possible values
-    directory: "/" # Location of package manifests
+  - package-ecosystem: "npm"
+    directory: "/"
     schedule:
       interval: "daily"
 

.github/workflows/codeql.yml

@@ -1,21 +1,9 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
 name: "CodeQL"
 
 on:
   push:
     branches: [develop, feature-*, main, rel-*]
   pull_request:
-    # The branches below must be a subset of the branches above
     branches: [develop]
 
 jobs:
@@ -31,38 +19,14 @@ jobs:
       fail-fast: false
       matrix:
         language: ["javascript"]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
-        # Learn more:
-        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
 
     steps:
       - uses: actions/checkout@v3
-
-      # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v2
         with:
           languages: ${{ matrix.language }}
-          # If you wish to specify custom queries, you can do so here or in a config file.
-          # By default, queries listed here will override any specified in a config file.
-          # Prefix the list here with "+" to use these queries and those in the config file.
-          # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-      # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
         uses: github/codeql-action/autobuild@v2
-
-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 https://git.io/JvXDl
-
-      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-      #    and modify them (or add more) to build your code if your project
-      #    uses a compiled language
-
-      #- run: |
-      #   make bootstrap
-      #   make release
-
       - name: Perform CodeQL Analysis
         uses: github/codeql-action/analyze@v2

.github/workflows/deploy.yml

@@ -9,7 +9,7 @@ jobs:
   build:
     runs-on: ubuntu-20.04
     env:
-      - BUILD_ADD_PATH_PREFIX: true
+      BUILD_ADD_PATH_PREFIX: true
     steps:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3

.github/workflows/gatsby.yml

@@ -4,26 +4,6 @@ on: [push, pull_request]
 
 jobs:
   build:
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: actions/checkout@v3
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-          cache: "yarn"
-      - name: Set up dependencies
-        run: |
-          yarn install --immutable
-      - name: Static type check
-        run: |
-          yarn run check
-      - name: Build
-        run: |
-          yarn run build
-
-  test:
-    needs: [build]
     strategy:
       matrix:
         os:
@@ -41,12 +21,18 @@ jobs:
       - name: Set up dependencies
         run: |
           yarn install --immutable
+      - name: Build
+        run: |
+          yarn run build
+      - name: Static type check
+        run: |
+          yarn run check
       - name: Test
         run: |
           yarn run test
 
   coverage:
-    needs: [test]
+    needs: [build]
     if: ${{ github.event_name != 'pull_request' && github.ref == 'refs/heads/develop' }}
     runs-on: ubuntu-20.04
     steps:

.gitignore

@@ -131,3 +131,6 @@ temp/
 
 # TypeScript build artifacts
 build/
+
+# Generated Gatsby GraphQL types
+gatsby-types.d.ts

.vscode/launch.json

@@ -7,9 +7,30 @@
     {
       "name": "Launch Edge 8000",
       "request": "launch",
-      "type": "pwa-msedge",
+      "type": "msedge",
       "url": "http://localhost:8000",
       "webRoot": "${workspaceFolder}/public/"
+    },
+    {
+      "name": "Launch Firefox 8000",
+      "request": "launch",
+      "type": "firefox",
+      "url": "http://localhost:8000",
+      "webRoot": "${workspaceFolder}/public/"
+    },
+    {
+      "name": "Launch Edge 9000",
+      "request": "launch",
+      "type": "msedge",
+      "url": "http://localhost:9000",
+      "webRoot": "${workspaceFolder}/public/"
+    },
+    {
+      "name": "Launch Firefox 9000",
+      "request": "launch",
+      "type": "firefox",
+      "url": "http://localhost:9000",
+      "webRoot": "${workspaceFolder}/public/"
     }
   ]
 }

.vscode/settings.json

@@ -37,6 +37,7 @@
     "tetriminos",
     "topo",
     "toposort",
+    "typegen",
     "Unmount",
     "viewmodel",
     "workerloader"

.yarn/sdks/eslint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint",
-  "version": "8.38.0-sdk",
+  "version": "8.41.0-sdk",
   "main": "./lib/api.js",
   "type": "commonjs"
 }

.yarn/sdks/prettier/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prettier",
-  "version": "2.8.7-sdk",
+  "version": "2.8.8-sdk",
   "main": "./index.js",
   "type": "commonjs"
 }

README-zh.md

@@ -100,8 +100,8 @@ cd periotrisjs
 
 需要手动安装的依赖：
 
-- [Node.js v14.x+](https://nodejs.org/)
-- [yarn berry+](https://yarnpkg.com/)
+- [Node.js 18.x](https://nodejs.org/)
+- [yarn 3+](https://yarnpkg.com/)
 
 之后，运行：
 

README.md

@@ -108,8 +108,8 @@ You may omit the `--depth=1` flag if you want a complete commit history rather t
 
 Dependencies that need to be installed manually:
 
-- [Node.js v14.x+](https://nodejs.org/)
-- [yarn berry+](https://yarnpkg.com/)
+- [Node.js 18.x](https://nodejs.org/)
+- [yarn 3+](https://yarnpkg.com/)
 
 Once you have installed all above, run the following commands:
 

gatsby-browser.tsx

@@ -15,16 +15,28 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/ .
  */
 
+import "@fontsource/roboto/300.css"
+import "@fontsource/roboto/400.css"
+import "@fontsource/roboto/500.css"
+import "@fontsource/roboto/700.css"
+
+import "./src/components/CommonLayout.css"
+
 import React from "react"
 
+import { CommonLayout, CommonProviders } from "./src/components"
+
 import type { GatsbyBrowser } from "gatsby"
 
 export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = ({
   element,
   props,
 }) => {
-  type TLayoutElement = typeof element.type & { Layout: React.ElementType }
+  return <CommonLayout {...props}>{element}</CommonLayout>
+}
 
-  const Layout = (element.type as TLayoutElement).Layout ?? React.Fragment
-  return <Layout {...props}>{element}</Layout>
+export const wrapRootElement: GatsbyBrowser["wrapRootElement"] = ({
+  element,
+}) => {
+  return <CommonProviders>{element}</CommonProviders>
 }

gatsby-config.ts

@@ -15,14 +15,13 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/ .
  */
 
+import { langs, defaultLang } from "./src/i18n"
+
 import type { GatsbyConfig } from "gatsby"
 
 const config: GatsbyConfig = {
   plugins: [
     "gatsby-plugin-typescript",
-    {
-      resolve: "gatsby-plugin-material-ui",
-    },
     {
       resolve: "gatsby-plugin-manifest",
       options: {
@@ -44,6 +43,28 @@ const config: GatsbyConfig = {
     },
     "gatsby-source-local-git",
     "gatsby-source-package",
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        path: `${__dirname}/src/i18n/locales`,
+        name: "locale",
+      },
+    },
+    {
+      resolve: "gatsby-plugin-react-i18next",
+      options: {
+        languages: langs,
+        defaultLanguage: defaultLang,
+        i18nextOptions: {
+          fallbackLng: defaultLang,
+          supportedLngs: langs,
+          defaultNS: "common",
+          interpolation: {
+            escapeValue: false,
+          },
+        },
+      },
+    },
   ],
   siteMetadata: {
     title: "Periotris.js",
@@ -52,6 +73,9 @@ const config: GatsbyConfig = {
     url: "https://csharpermantle.github.io/periotrisjs/",
   },
   pathPrefix: process.env.BUILD_ADD_PATH_PREFIX ? "/periotrisjs" : undefined,
+  graphqlTypegen: {
+    generateOnBuild: true,
+  },
 }
 
 export default config

gatsby-ssr.tsx

@@ -15,16 +15,28 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/ .
  */
 
+import "@fontsource/roboto/300.css"
+import "@fontsource/roboto/400.css"
+import "@fontsource/roboto/500.css"
+import "@fontsource/roboto/700.css"
+
+import "./src/components/CommonLayout.css"
+
 import React from "react"
 
+import { CommonLayout, CommonProviders } from "./src/components"
+
 import type { GatsbyBrowser } from "gatsby"
 
 export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = ({
   element,
   props,
 }) => {
-  type TLayoutElement = typeof element.type & { Layout: React.ElementType }
+  return <CommonLayout {...props}>{element}</CommonLayout>
+}
 
-  const Layout = (element.type as TLayoutElement).Layout ?? React.Fragment
-  return <Layout {...props}>{element}</Layout>
+export const wrapRootElement: GatsbyBrowser["wrapRootElement"] = ({
+  element,
+}) => {
+  return <CommonProviders>{element}</CommonProviders>
 }

package.json

@@ -33,22 +33,25 @@
     "@mui/material": "^5.12.0",
     "@mui/system": "^5.12.0",
     "@reduxjs/toolkit": "^1.9.3",
+    "@use-gesture/react": "^10.2.26",
     "ajv": "^8.12.0",
     "canvas-confetti": "^1.6.0",
     "events": "^3.3.0",
     "gatsby": "^5.8.1",
     "gatsby-plugin-manifest": "^5.8.0",
-    "gatsby-plugin-material-ui": "^4.1.0",
     "gatsby-plugin-offline": "^6.8.0",
+    "gatsby-plugin-react-i18next": "^3.0.1",
     "gatsby-plugin-typescript": "^5.8.0",
+    "gatsby-source-filesystem": "^5.10.0",
     "gatsby-source-local-git": "^1.3.0",
     "gatsby-source-package": "^1.0.1",
-    "hammerjs": "^2.0.8",
+    "i18next": "^22.5.0",
     "is-in-browser": "^2.0.0",
     "lodash": "^4.17.21",
     "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^12.3.1",
     "react-redux": "^8.0.5",
     "toposort": "^2.0.2"
   },
@@ -58,7 +61,6 @@
     "@testing-library/react": "^14.0.0",
     "@types/canvas-confetti": "^1.6.0",
     "@types/events": "^3.0.0",
-    "@types/hammerjs": "^2.0.41",
     "@types/jest": "^29.5.0",
     "@types/jsdom": "^21.1.1",
     "@types/lodash": "^4.14.194",

src/ThemeOptions.ts

@@ -15,7 +15,9 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/ .
  */
 
-import { createTheme, Theme, ThemeOptions } from "@mui/material/styles"
+import { createTheme } from "@mui/material/styles"
+
+import type { ThemeOptions } from "@mui/material/styles"
 
 export const themeOptions: ThemeOptions = {
   palette: {
@@ -29,4 +31,4 @@ export const themeOptions: ThemeOptions = {
   },
 }
 
-export const theme: Theme = createTheme(themeOptions)
+export const theme = createTheme(themeOptions)