fix: upgrade and make boilerplate client focus again (#44)

* refactor: make client focus again

* fix: build

* chore: add verbose for commitlint

* chore: upgrade node version

* chore: update cypress actions env

* fix: remove trpc + make client focus (#45)

* fix: remove trpc + make client focus

* fix: build error

* fix: lock file

* fix: cypress build command

* chore: update required node version

* fix: generate swagger script

* chore: clean up

* chore: upgrade node version

* chore: update readme

---------

Co-authored-by: Chinh Le <[email protected]>

.env.development

@@ -1,2 +1 @@
-NEXT_PUBLIC_BASE_URL='https://demo-api.dwarvesf.com/api/v1'
-NEXT_PUBLIC_API_MOCKING=disabled
+NEXT_PUBLIC_BASE_URL='/api'

.github/workflows/storybook-netlify.yml

@@ -28,14 +28,14 @@ jobs:
         with:
           access_token: ${{ github.token }}
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v3
         with:
-          version: 16.x
+          node-version: 20
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 8.2.0
+          version: 9.0.6
 
       - name: Build Storybook
         run: |

.github/workflows/test.yaml

@@ -6,9 +6,6 @@ on:
       - opened
       - synchronize
 
-env:
-  NEXT_PUBLIC_BASE_URL: https://demo-api.dwarvesf.com/api/v1
-
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -20,14 +17,14 @@ jobs:
         with:
           access_token: ${{ github.token }}
 
-      - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+      - name: Use Node.js 20.x
+        uses: actions/setup-node@v3
         with:
-          version: 16.x
+          node-version: 20
 
       - uses: pnpm/action-setup@v2
         with:
-          version: 8.2.0
+          version: 9.0.6
 
       - name: Jest run
         run: |

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npx --no-install commitlint --edit ""
+pnpm dlx commitlint --edit $1 --verbose

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 pnpm lint-staged

.nvmrc

@@ -0,0 +1 @@
+v20

.storybook/main.ts

@@ -0,0 +1,56 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+import path from 'path'
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
+
+const storybookConfig: StorybookConfig = {
+  framework: {
+    name: '@storybook/nextjs',
+    options: { builder: { useSWC: true } },
+  },
+  staticDirs: ['../public'],
+  stories: [
+    '../src/components/**/*.stories.mdx',
+    '../src/components/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-essentials',
+    '@storybook/addon-storysource',
+    '@storybook/addon-styling-webpack',
+  ],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.plugins = [
+        new TsconfigPathsPlugin({
+          configFile: path.resolve(__dirname, '../tsconfig.json'),
+        }),
+      ]
+    }
+
+    if (config.module?.rules) {
+      // This modifies the existing image rule to exclude `.svg` files
+      // since we handle those with `@svgr/webpack`.
+      const imageRule = config.module.rules.find((rule: any) => {
+        if (typeof rule !== 'string' && rule.test instanceof RegExp) {
+          return rule.test.test('.svg')
+        }
+      })
+      if (typeof imageRule !== 'string') {
+        ;(imageRule as any).exclude = /\.svg$/
+      }
+
+      config.module.rules.push({
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      })
+    }
+
+    config.module?.rules?.push({
+      test: /\.mjs$/,
+      include: [/node_modules/],
+      type: 'javascript/auto',
+    })
+
+    return config
+  },
+}
+export default storybookConfig

.storybook/preview.js → .storybook/preview.ts

@@ -1,7 +1,8 @@
-import { RouterContext } from 'next/dist/shared/lib/router-context' // next 11.2
-import './index.css'
+import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime'
+import './styles.css'
+import { Parameters } from '@storybook/react'
 
-export const parameters = {
+export const parameters: Parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   nextRouter: {
     Provider: RouterContext.Provider,

README.md

@@ -31,19 +31,12 @@ pnpm dev
 Open [http://localhost:3000](http://localhost:3000) with your favorite browser
 to see your project.
 
-## Deployment
+## Links
 
-| Environment | URL                                        |
-| ----------- | ------------------------------------------ |
-| Prod        | https://df-nextjs-boilerplate.netlify.app/ |
-
-## Resources
-
-| Name       | Description | Link                                                 |
-| ---------- | ----------- | ---------------------------------------------------- |
-| UI Docs    | Storybook   | https://df-nextjs-boilerplate-storybook.netlify.app/ |
-| API Docs   | Swagger     | https://demo-api.dwarvesf.com/swagger/index.html     |
-| API Source | Go          | https://github.com/dwarvesf/go-api.git               |
+| Environment | URL                                                  |
+| ----------- | ---------------------------------------------------- |
+| Preview     | https://df-nextjs-boilerplate.netlify.app/           |
+| Storybook   | https://df-nextjs-boilerplate-storybook.netlify.app/ |
 
 ## Documentation
 

cypress/e2e/auth.cy.ts

@@ -11,8 +11,8 @@ describe('User Sign-up and Login', () => {
 
   it('should allow a visitor to sign-up, login, and logout', function () {
     const userInfo = {
-      email: 'demo@dwarves.foundation',
-      password: 'Testing@123',
+      email: 'test@d.foundation',
+      password: 'Thepassword1',
     }
 
     cy.visit('/')

docs/GETTING_STARTED.md

@@ -43,8 +43,6 @@ to see your project.
 │── cypress                      # Cypress configuration and tests
 ├── tailwind.config.js           # Tailwind CSS configuration
 ├── tsconfig.json                # TypeScript configuration
-├── .spectral.js                 # IBM OpenAPI Ruleset for Orval used on validating the rules for Swagger
-└── orval.config.js              # Orval api generator configuration
 ```
 
 ### Develop UI components
@@ -63,26 +61,22 @@ The UI document then should be live at
 
 If your team use Swagger to document APIs, we support a node script to generate
 TypeScript interfaces via your Swagger scheme. In
-[orval.config.js](../orval.config.js), change the default path to the location
-of your Swagger JSON doc.
-
-```diff
-input: {
--  target: 'https://demo-api.dwarvesf.com/swagger/doc.json',
-+  target: 'your-api-swagger-json',
-  ...
-}
+[package.json](../package.json), change the default path to the location of your
+Swagger JSON doc.
+
 ```
+- "fetch-definitions": "swagger-typescript-api --no-client -p ./libs/swagger.json -o ./types -n schema.ts",
++ "fetch-definitions": "swagger-typescript-api --no-client -p your-api-swagger-json -o ./types -n schema.ts",
 
 Then, you can run the script locally to generate TypeScript definitions for the
 APIs:
 
 ```bash
-pnpm generate:api
+pnpm fetch-definitions
 ```
 
-The generated models and api clients will be located at [api](../src/api)
-folder.
+The generated interfaces will be located at
+[types/schema.ts](../types/schema.ts).
 
 ## Read on: