feat: upgrade nextjs13 (#334)

Because

- We want to use nextjs app directory and nested route

This commit

- upgrade console to nextjs13 and upgrade storybook to v7

.babelrc.json

@@ -0,0 +1,17 @@
+{
+  // This babel configuration is for storybook
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}

.storybook/main.js

@@ -1,5 +1,4 @@
 const path = require("path");
-
 module.exports = {
   webpackFinal: async (config) => {
     config.resolve.alias["@"] = path.resolve(__dirname, "../src");
@@ -34,8 +33,11 @@ module.exports = {
       },
     },
   ],
-  framework: "@storybook/react",
-  core: {
-    builder: "webpack5",
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
   },
 };

README.md

@@ -21,6 +21,10 @@ The repo mainly follows the guideline of Next.js and has some personal touch on
 - utils: utilities about common functions, such as time, javascript primitives and unit-function that don't suit other folders.
 - lib: Store all the interface that can be used standalone, such as instill-ai backend's query functions, airbyte’s form builder and schema transformer.
 
+### About configuration
+
+- babel.config.js: For storybook to work correctly. (We use experimental.forceSwcTransforms in next.config.js to force nextjs use SWC)
+
 ## About the UI components
 
 We are following the principles of Instill-ai's design system, you could find the detailed description [here](https://github.com/instill-ai/design-system).
@@ -113,10 +117,11 @@ We maintain another container `Dockerfile.playwright` specifically for test usag
 - In VDP folder: `make build PROFILE=all` 
 - In console folder: `pnpm dev` to setup local dev server
 - If you want to test in your host (Run the app with pnpm dev in the console folder) 
-  - In VDP folder: `make dev PROFILE=console ITMODE=true CONSOLE_BASE_URL_HOST=localhost CONSOLE_BASE_API_GATEWAY_URL_HOST=localhost`
+  - In VDP folder: `make dev PROFILE=console ITMODE=true`
+  - In console folder: `pnpm dev`
   - In console folder: `pnpm integration-test`
 - If you want to test in the docker-container (Run the app with VDP) 
-  - In VDP folder: `make dev PROFILE=all ITMODE=true`
+  - In VDP folder: `ake dev PROFILE=all ITMODE=true CONSOLE_BASE_URL_HOST=console CONSOLE_BASE_API_GATEWAY_URL_HOST=api-gateway`
   - In console folder: `pnpm docker-build-test`
   - In console folder: `pnpm docker-run-test`
 

next.config.js

@@ -5,4 +5,9 @@ module.exports = {
   swcMinify: true,
   reactStrictMode: true,
   output: "standalone",
+
+  // We need to ignore the babelrc.json at the root, that is for storybook
+  experimental: {
+    forceSwcTransforms: true,
+  },
 };

package.json

@@ -10,14 +10,14 @@
     "docker-build": "docker build -f Dockerfile -t instill-console .",
     "docker-run": "docker run --rm -t --entrypoint ./entrypoint.sh -p 3000:3000 -e NEXT_PUBLIC_CONSOLE_BASE_URL='http://localhost:3000' -e NEXT_PUBLIC_API_GATEWAY_BASE_URL='https://localhost:8080' -e NEXT_PUBLIC_API_VERSION='v1alpha' -e NEXT_PUBLIC_INSTILL_AI_USER_COOKIE_NAME='instill-ai-user' instill-console",
     "docker-build-test": "docker build -f Dockerfile.playwright --build-arg TEST_USER='root' -t instill-console-integration .",
-    "docker-run-test": "docker run --rm -t --network host --entrypoint ./entrypoint-playwright.sh -e NEXT_PUBLIC_CONSOLE_BASE_URL='http://localhost:3000' -e NEXT_PUBLIC_API_GATEWAY_BASE_URL='https://localhost:8080' -e NEXT_PUBLIC_API_VERSION='v1alpha' -e NEXT_PUBLIC_INSTILL_AI_USER_COOKIE_NAME='instill-ai-user' -e NEXT_PUBLIC_SELF_SIGNED_CERTIFICATION=true instill-console-integration",
+    "docker-run-test": "docker run --rm -t --network instill-network --entrypoint ./entrypoint-playwright.sh -e NEXT_PUBLIC_CONSOLE_BASE_URL='http://localhost:3000' -e NEXT_PUBLIC_API_GATEWAY_BASE_URL='https://localhost:8080' -e NEXT_PUBLIC_API_VERSION='v1alpha' -e NEXT_PUBLIC_INSTILL_AI_USER_COOKIE_NAME='instill-ai-user' -e NEXT_PUBLIC_SELF_SIGNED_CERTIFICATION=true instill-console-integration",
     "docker:prune-cache": "docker buildx prune",
     "dev": "bash env.sh && next dev",
     "build": "next build",
     "start": "next start",
     "test": "jest",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "sb": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "prepare": "node -e \"if (process.env.NODE_ENV === 'production'){process.exit(1)} \" || husky install",
     "prettier:fix": "prettier --write",
     "prettier:check": "prettier --check",
@@ -28,19 +28,18 @@
   "dependencies": {
     "@amplitude/analytics-browser": "^0.4.1",
     "@code-hike/mdx": "^0.7.3",
-    "@instill-ai/design-system": "^0.0.132",
-    "@playwright/test": "^1.25.2",
+    "@instill-ai/design-system": "^0.0.136",
     "axios": "^0.27.2",
     "clsx": "^1.1.1",
     "cookie": "^0.5.0",
     "copy-to-clipboard": "^3.3.2",
     "cross-env": "^7.0.3",
     "formik": "^2.2.9",
-    "next": "^12.1.0",
+    "next": "^13.1.2",
     "next-mdx-remote": "^4.1.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-code-blocks": "^0.0.9-0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-markdown": "^8.0.3",
     "react-query": "^3.38.0",
     "react-select": "^5.3.1",
@@ -53,25 +52,27 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
     "@next/env": "^12.2.3",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-docs": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.5.9",
-    "@storybook/builder-webpack5": "^6.5.9",
-    "@storybook/client-api": "^6.5.9",
-    "@storybook/manager-webpack5": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.0.0-beta.29",
+    "@storybook/addon-docs": "^7.0.0-beta.29",
+    "@storybook/addon-essentials": "^7.0.0-beta.29",
+    "@storybook/addon-interactions": "^7.0.0-beta.29",
+    "@storybook/addon-links": "^7.0.0-beta.29",
+    "@storybook/addon-postcss": "^3.0.0-alpha.1",
+    "@storybook/addons": "^7.0.0-beta.29",
+    "@storybook/client-api": "^7.0.0-beta.29",
+    "@storybook/react": "^7.0.0-beta.29",
+    "@storybook/react-webpack5": "^7.0.0-beta.29",
+    "@storybook/testing-library": "^0.0.14-next.1",
     "@tailwindcss/line-clamp": "^0.4.0",
     "@testing-library/dom": "^8.16.0",
     "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/cookie": "^0.5.1",
     "@types/jest": "^28.1.6",
@@ -95,19 +96,21 @@
     "eslint-plugin-playwright": "^0.9.0",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.4.0",
-    "eslint-plugin-storybook": "^0.5.13",
+    "eslint-plugin-storybook": "^0.6.10",
     "eslint-plugin-testing-library": "^5.3.1",
     "husky": "^7.0.0",
     "jest": "^27.5.1",
     "lint-staged": ">=10",
     "msw": "^0.42.1",
     "npm-run-all": "^4.1.5",
+    "@playwright/test": "^1.25.2",
     "postcss": "^8.4.12",
     "prettier": "^2.6.2",
     "prettier-plugin-tailwindcss": "^0.1.8",
     "react-is": "^18.2.0",
     "require-from-string": "^2.0.2",
-    "storybook-addon-next-router": "^4.0.0",
+    "storybook": "^7.0.0-beta.29",
+    "storybook-addon-next-router": "^4.0.2",
     "tailwindcss": "^3.0.23",
     "typescript": "^4.6.2",
     "webpack": "^5.70.0"