Add Redux Toolkit support

.github/workflows/merge-jobs.yml

@@ -48,6 +48,17 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
+      - name: Setup Next.js cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-
+
       - name: Run merge tasks
         run: |
           pnpm install

.github/workflows/pages.yml

@@ -0,0 +1,96 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy to GitHub Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["master"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow one concurrent deployment
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  # Single deploy job since we're just deploying
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel Workflow Action
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ github.token }}
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Read .nvmrc
+        run: echo ::set-output name=NVMRC::$(cat .nvmrc)
+        id: nvm
+
+      - name: Use Node.js ${{ steps.nvm.outputs.NVMRC }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ steps.nvm.outputs.NVMRC }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 9
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Setup Next.js cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-
+
+      - name: Build docs
+        run: |
+          pnpm install
+          pnpm run build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+        with:
+          # Automatically inject basePath in your Next.js configuration file and disable
+          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
+          static_site_generator: next
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './build'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/pull-request-jobs.yml

@@ -48,6 +48,17 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-pnpm-store-
 
+      - name: Setup Next.js cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/pnpm-lock.yaml') }}-
+
       - name: Run test tasks
         run: |
           pnpm install
@@ -56,3 +67,6 @@ jobs:
           pnpm run lint:tsc
           pnpm run build
           pnpm run test --silent
+          pnpm run generate:component Foo --dry-run
+          pnpm run generate:component-loading Foo --dry-run
+          pnpm run generate:feature Foo --dry-run

src/pages/index.css → app/index.css

@@ -2,3 +2,7 @@ body {
     font-family: system-ui;
     margin: 0;
 }
+
+main {
+    padding: 36px;
+}

app/layout.tsx

@@ -0,0 +1,18 @@
+import type {ReactNode} from 'react';
+
+import {StoreProvider} from '@/src/state/StoreProvider';
+import './index.css';
+
+type Props = {
+    readonly children: ReactNode;
+};
+
+export default function RootLayout({children}: Props) {
+    return (
+        <StoreProvider>
+            <html lang="en" suppressHydrationWarning>
+                <body>{children}</body>
+            </html>
+        </StoreProvider>
+    );
+}

app/page.tsx

@@ -0,0 +1,22 @@
+import type {Metadata} from 'next';
+import {Fragment} from 'react';
+
+import Counter from '@/src/components/Counter';
+import Random from '@/src/components/Random';
+import {NavHeader} from '@/src/layout/NavHeader';
+
+export default function IndexPage() {
+    return (
+        <Fragment>
+            <NavHeader />
+            <main>
+                <Counter />
+                <Random />
+            </main>
+        </Fragment>
+    );
+}
+
+export const metadata: Metadata = {
+    title: 'First page',
+};

app/second/page.tsx

@@ -0,0 +1,19 @@
+import type {Metadata} from 'next';
+import {Fragment} from 'react';
+
+import {NavHeader} from '@/src/layout/NavHeader';
+
+export default function IndexPage() {
+    return (
+        <Fragment>
+            <NavHeader />
+            <main>
+                <p>Boring second page. Use to test global state and routes behavior.</p>
+            </main>
+        </Fragment>
+    );
+}
+
+export const metadata: Metadata = {
+    title: 'First page',
+};

generate-react-cli.json

@@ -0,0 +1,65 @@
+{
+  "usesTypeScript": true,
+  "usesCssModule": true,
+  "cssPreprocessor": "css",
+  "testLibrary": "Testing Library",
+  "usesStyledComponents": false,
+  "component": {
+    "default": {
+      "path": "src/components",
+      "withLazy": false,
+      "withStory": false,
+      "withStyle": true,
+      "withTest": true,
+      "withIndex": true,
+      "withMdx": false,
+      "withHook": false,
+      "withHookTest": false,
+      "customTemplates": {
+        "component": "templates/Component/TemplateName.tsx",
+        "style": "templates/Component/TemplateName.module.css",
+        "index": "templates/Component/index.ts",
+        "test": "templates/Component/TemplateName.spec.tsx"
+      }
+    },
+    "loading": {
+      "path": "src/components",
+      "withLazy": false,
+      "withStory": false,
+      "withStyle": true,
+      "withTest": true,
+      "withIndex": true,
+      "withMdx": false,
+      "withHook": false,
+      "withHookTest": false,
+      "customTemplates": {
+        "component": "templates/Loading/TemplateName.tsx",
+        "style": "templates/Loading/TemplateName.module.css",
+        "index": "templates/Loading/index.ts",
+        "test": "templates/Loading/TemplateName.spec.tsx"
+      }
+    },
+    "feature": {
+      "path": "src/features",
+      "withActionTypes": true,
+      "withIndex": true,
+      "withReadme": true,
+      "withSelectorsTest": true,
+      "withSelectors": true,
+      "withReducerTest": true,
+      "withQueryTest": true,
+      "withquery": true,
+      "customTemplates": {
+        "component": "templates/Feature/TemplateNameReducer.ts",
+        "actionTypes": "templates/Feature/actionTypes.ts",
+        "index": "templates/Feature/index.ts",
+        "readme": "templates/Feature/README.md",
+        "selectorsTest": "templates/Feature/selectors.spec.tsx",
+        "selectors": "templates/Feature/selectors.ts",
+        "reducerTest": "templates/Feature/TemplateNameReducer.spec.tsx",
+        "queryTest": "templates/Feature/useGetTemplateNameQuery.spec.tsx",
+        "query": "templates/Feature/useGetTemplateNameQuery.ts"
+      }
+    }
+  }
+}

jest.config.cjs

@@ -4,7 +4,7 @@ const nextJest = require('next/jest.js');
 const createJestConfig = nextJest({
     // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
     dir: './',
-})
+});
 
 /**
  * For a detailed explanation regarding each configuration property, visit:
@@ -19,4 +19,5 @@ module.exports = createJestConfig({
         '\\.css$': 'identity-obj-proxy',
     },
     setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+    modulePathIgnorePatterns: ['<rootDir>/templates/'],
 });

lint-staged.config.js

@@ -1,4 +1,4 @@
 module.exports = {
     '*.{js,jsx,ts,tsx}': ['eslint --fix'],
-    '*.style.{ts,tsx}': ['stylelint --fix']
+    '*.style.{ts,tsx}': ['stylelint --fix'],
 };

next.config.js

@@ -3,9 +3,7 @@ const nextConfig = {
     reactStrictMode: true,
     swcMinify: true,
     distDir: 'build',
-    compiler: {
-        styledComponents: true,
-    },
+    output: 'export',
 };
 
 /* Enable bundle analysis. Run `yarn analyze:build` to get report */

package.json

@@ -13,11 +13,14 @@
     "fix:style": "stylelint 'src/**/*.css' --fix",
     "lint:tsc": "tsc --pretty --noEmit",
     "prepare": "is-ci || husky install",
-    "test": "jest"
+    "test": "jest",
+    "generate:component": "npx generate-react-cli component",
+    "generate:component-loading": "npx generate-react-cli component --type=loading",
+    "generate:feature": "npx generate-react-cli component --type=feature"
   },
   "dependencies": {
-    "axios": "1.6.8",
-    "classnames": "^2.5.1",
+    "@reduxjs/toolkit": "2.2.4",
+    "classnames": "2.5.1",
     "next": "14.2.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -47,6 +50,7 @@
     "eslint-plugin-react": "7.34.1",
     "eslint-plugin-react-hooks": "4.6.2",
     "eslint-plugin-ssr-friendly": "1.3.0",
+    "generate-react-cli": "8.4.1",
     "husky": "8.0.3",
     "identity-obj-proxy": "3.0.0",
     "is-ci": "3.0.1",