Merge pull request #42 from scio-labs/feat/21-migrate-to-nextjs-13-ap…

…p-dir

feat: Migrate to next js app dir, vanilla tailwind and shadcn/ui

.changeset/big-seals-reply.md

@@ -0,0 +1,6 @@
+---
+'@inkathon/contracts': minor
+'@inkathon/frontend': minor
+---
+
+Update project default to Node 20.

.changeset/strange-snakes-grin.md

@@ -0,0 +1,6 @@
+---
+'@inkathon/frontend': minor
+---
+
+- Migrate the current pages directory to the Next.js 13 app directory.
+- Migrate to `shadcn/ui` components and vanilla tailwind.

.github/workflows/release.yml

@@ -14,8 +14,8 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18]
-        pnpm-version: [8.8]
+        node-version: [20]
+        pnpm-version: [8.11]
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3

.nvmrc

@@ -1 +1 @@
-v18
+v20

.vscode/extensions.json

@@ -2,13 +2,13 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "bradlc.vscode-tailwindcss",
-    "lightyen.tailwindcss-intellisense-twin",
     "wayou.vscode-todo-highlight",
     "tamasfe.even-better-toml",
     "rust-lang.rust-analyzer",
     "ink-analyzer.ink-analyzer",
     "gruntfuggly.todo-tree",
-    "mikestead.dotenv"
+    "mikestead.dotenv",
+    "bradlc.vscode-tailwindcss",
+    "zoma.vscode-auto-open-workspace"
   ]
 }

README.md

@@ -163,7 +163,7 @@ For general scripts, the same environment variable initialization & configuratio
 - Smart Contract Development: Rust, ink!, `cargo-contract`, `substrate-contracts-node`
 - Frontend: Next.js, React, TypeScript
   - Contract Interactions: `polkadot-js`, [`useInkathon`](https://github.com/scio-labs/use-inkathon) React Hooks & Utility Library (alternatively: [`useInk`](https://use.ink/frontend/getting-started))
-  - Styling: `chakra`, `tailwindcss`, `twin.macro`, `emotion`
+  - Styling: `shadcn/ui`, `tailwindcss`
   - Linting & Formatting: `eslint`, `prettier`, `simple-git-hooks`, `lint-staged`
 
 <small>Styling, linting, and formatting libraries can be fully dropped or replaced with alternatives.</small>
@@ -309,8 +309,7 @@ To fix this, you can delete the build cache at `frontend/.next`. This is current
 
 This boilerplate currently offers styling via the following options.
 
-- [Chakra UI](https://chakra-ui.com/) – Component library for quick prototyping e.g. during hackathons)
-- [twin.macro](https://github.com/ben-rogerson/twin.macro) – [Tailwindcss](https://tailwindcss.com/) within Styled Components via [Emotion](https://emotion.sh/docs/styled) (see [snippets](#snippets))
+- [shadcn/ui](https://ui.shadcn.com/) - Re-usable components built using [Radix UI](https://radix-ui.com/) and [Tailwindcss](https://tailwindcss.com/).
 - Standard (S)CSS styles via `className` and `*.module.(s)css` files.
 
 > [!IMPORTANT]  

contracts/package.json

@@ -13,26 +13,29 @@
     "contracts-ui": "open https://contracts-ui.substrate.io/?rpc=ws://127.0.0.1:9944",
     "explorer-ui": "open https://polkadot.js.org/apps/#/explorer?rpc=ws://127.0.0.1:9944",
     "type-check": "tsc --pretty --noEmit",
+    "sync-types": "typesync",
     "lint": "prettier . --check && eslint",
     "lint:fix": "prettier . --write && eslint --fix",
     "lint:format": "prettier . --write",
     "eslint": "eslint . --ext .js,.ts"
   },
   "devDependencies": {
-    "@polkadot/api": "^10.10.1",
-    "@polkadot/api-contract": "^10.10.1",
-    "@polkadot/keyring": "^12.5.1",
-    "@polkadot/types": "^10.10.1",
-    "@polkadot/util": "^12.5.1",
-    "@polkadot/util-crypto": "^12.5.1",
-    "@scio-labs/use-inkathon": "^0.4.4",
-    "@types/node": "^18.18.9",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
+    "@polkadot/api": "^10.11.1",
+    "@polkadot/api-contract": "^10.11.1",
+    "@polkadot/keyring": "^12.6.1",
+    "@polkadot/types": "^10.11.1",
+    "@polkadot/util": "^12.6.1",
+    "@polkadot/util-crypto": "^12.6.1",
+    "@scio-labs/use-inkathon": "^0.6.1",
+    "@types/eslint": "^8.44.8",
+    "@types/eslint-config-prettier": "^6.11.3",
+    "@types/node": "^20.10.3",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "dotenv": "^16.3.1",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "tsx": "^4.1.2",
-    "typescript": "^5.2.2"
+    "eslint": "^8.55.0",
+    "eslint-config-prettier": "^9.1.0",
+    "tsx": "^4.6.2",
+    "typescript": "^5.3.2"
   }
 }

frontend/.eslintignore

@@ -1,4 +1,8 @@
+package-lock.json
+pnpm-lock.yaml
 node_modules
+LICENSE
+
 out
 .next
 public

frontend/.prettierignore

@@ -1,6 +1,10 @@
 package-lock.json
 pnpm-lock.yaml
 node_modules
+LICENSE
+
 out
 .next
-public
+public
+
+src/components/ui

frontend/.prettierrc.js

@@ -1,4 +1,24 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-env node */
+
+/** @type {import('prettier').Config} */
 module.exports = {
   ...require('../.prettierrc.js'),
-  plugins: ['prettier-plugin-twin.macro'],
+  plugins: ['@trivago/prettier-plugin-sort-imports', 'prettier-plugin-tailwindcss'],
+  importOrder: [
+    '^((react|next)/(.*)$)|^((react|next)$)',
+    '<THIRD_PARTY_MODULES>',
+    '^@(config|types|styles|shared|lib|utils|hooks|components|app|pages|features)/(.*)$',
+    '^[./]',
+  ],
+  importOrderSeparation: true,
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      options: {
+        parser: 'typescript',
+        importOrderParserPlugins: ['typescript', 'jsx'],
+      },
+    },
+  ],
 }

frontend/components.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/utils/cn"
+  }
+}

frontend/next.config.js

@@ -5,7 +5,8 @@
 /**
  * @type {import('next').NextConfig}
  **/
-let nextConfig = {
+const nextConfig = {
+  reactStrictMode: true,
   // Fix for warnings about cjs/esm package duplication
   // See: https://github.com/polkadot-js/api/issues/5636
   transpilePackages: [
@@ -21,7 +22,4 @@ let nextConfig = {
   ],
 }
 
-const withTwin = require('./withTwin.js')
-nextConfig = withTwin(nextConfig)
-
 module.exports = nextConfig

frontend/package.json

@@ -2,19 +2,15 @@
   "name": "@inkathon/frontend",
   "private": true,
   "version": "0.3.2",
-  "babelMacros": {
-    "twin": {
-      "preset": "emotion"
-    }
-  },
   "scripts": {
     "postinstall": "bash postinstall.sh",
-    "dev": "NODE_ENV=development next dev",
+    "dev": "NODE_ENV=development POLKADOTJS_DISABLE_ESM_CJS_WARNING_FLAG=1 next dev",
     "node": "pnpm run -F contracts node",
     "dev-and-node": "concurrently \"pnpm dev\" \"pnpm node\" --names \"Next,Node\" --kill-others",
     "build": "NODE_ENV=production next build",
     "start": "NODE_ENV=production next start",
     "type-check": "tsc --pretty --noEmit",
+    "sync-types": "typesync",
     "lint": "prettier . --check && eslint",
     "lint:fix": "prettier . --write && eslint --fix",
     "lint:format": "prettier . --write",
@@ -23,57 +19,58 @@
   "dependencies": {
     "@azns/resolver-core": "^1.6.0",
     "@azns/resolver-react": "^1.6.0",
-    "@chakra-ui/react": "^2.8.2",
-    "@emotion/css": "^11.11.2",
-    "@emotion/react": "^11.11.1",
-    "@emotion/server": "^11.11.0",
-    "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.3.2",
     "@inkathon/contracts": "workspace:*",
-    "@polkadot/api": "^10.10.1",
-    "@polkadot/api-contract": "^10.10.1",
-    "@polkadot/extension-dapp": "^0.46.5",
-    "@polkadot/extension-inject": "^0.46.5",
-    "@polkadot/keyring": "^12.5.1",
-    "@polkadot/types": "^10.10.1",
-    "@polkadot/util": "^12.5.1",
-    "@polkadot/util-crypto": "^12.5.1",
-    "@scio-labs/use-inkathon": "^0.4.4",
-    "framer-motion": "^10.16.5",
-    "next": "^13.5.6",
-    "next-seo": "^6.4.0",
+    "@polkadot/api": "^10.11.1",
+    "@polkadot/api-contract": "^10.11.1",
+    "@polkadot/extension-dapp": "^0.46.6",
+    "@polkadot/extension-inject": "^0.46.6",
+    "@polkadot/keyring": "^12.6.1",
+    "@polkadot/types": "^10.11.1",
+    "@polkadot/util": "^12.6.1",
+    "@polkadot/util-crypto": "^12.6.1",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@scio-labs/use-inkathon": "^0.6.1",
+    "autoprefixer": "^10.4.16",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "geist": "^1.2.0",
+    "lucide-react": "^0.294.0",
+    "next": "^14.0.3",
+    "postcss": "^8.4.32",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.12.0",
-    "sharp": "^0.32.6",
+    "sharp": "^0.33.0",
     "spinners-react": "^1.0.7",
-    "use-async-effect": "^2.2.7"
+    "tailwind-merge": "^2.1.0",
+    "tailwindcss-animate": "^1.0.7",
+    "use-async-effect": "^2.2.7",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
-    "@emotion/babel-plugin": "^11.11.0",
-    "@testing-library/react": "^14.1.0",
-    "@types/downloadjs": "^1.4.6",
-    "@types/node": "^18.18.9",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
-    "babel-loader": "^9.1.3",
-    "babel-plugin-macros": "^3.1.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/downloadjs": "^1.4.5",
+    "@types/eslint": "^8.44.8",
+    "@types/eslint-config-prettier": "^6.11.3",
+    "@types/node": "^20.10.3",
+    "@types/react": "^18.2.41",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "concurrently": "^8.2.2",
-    "eslint": "^8.53.0",
-    "eslint-config-next": "^13.5.6",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.55.0",
+    "eslint-config-next": "^14.0.3",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.33.2",
-    "prettier": "^3.1.0",
-    "prettier-plugin-twin.macro": "^1.0.14",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "tailwindcss": "^3.3.5",
-    "twin.macro": "^3.4.0",
-    "typescript": "^5.2.2",
-    "webpack": "^5.89.0"
+    "typescript": "^5.3.2"
   }
 }

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}