feat: upgrade mantine v7 & ui changes

.github/workflows/deploy.yml

@@ -23,47 +23,57 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - name: Detect package manager
-        id: detect-package-manager
-        run: |
-          echo "manager=yarn" >> $GITHUB_OUTPUT
-          echo "command=install --frozen-lockfile" >> $GITHUB_OUTPUT
-          echo "runner=yarn" >> $GITHUB_OUTPUT
-          exit 0
-      - name: Setup Node
+
+      - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: "18"
-          cache: ${{ steps.detect-package-manager.outputs.manager }}
-      - name: Cache node_modules
-        uses: actions/cache@v3
+          node-version: "20"
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
         with:
-          path: |
-            ~/.npm
-            ~/.cache/yarn
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-node-
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
       - name: Setup Pages
         uses: actions/configure-pages@v3
         with:
           static_site_generator: next
+
       - name: Restore cache
         uses: actions/cache@v3
         with:
           path: |
             .next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
           restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/pnpm-lock.yaml') }}-
+
       - name: Install dependencies
-        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+        run: pnpm install
+
       - name: Build with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+        run: pnpm next build
+
       - name: Upload Build Artifacts
         uses: actions/upload-artifact@v2
         with:
           name: build-files
           path: ./out/_next/static/chunks
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:

.github/workflows/pull-request.yml

@@ -5,20 +5,44 @@ on:
     branches: [ "main" ]
 
 jobs:
-  build:
+  cache-and-install:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'yarn'
-    - run: yarn install
-    - run: yarn lint
-    - run: yarn build
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm run lint
+
+      - name: Build
+        run: pnpm run build
+
+

.gitignore

@@ -21,8 +21,6 @@
 
 # debug
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 # local env files
 .env.local

.prettierrc

@@ -7,6 +7,8 @@
   "importOrder": [
     "^(react/(.*)$)|^(react$)",
     "^(next/(.*)$)|^(next$)",
+    "^@mantine/core",
+    "^@mantine",
     "styled",
     "<THIRD_PARTY_MODULES>",
     "^src/(.*)$",

CONTRIBUTING.md

@@ -23,13 +23,13 @@ git clone https://github.com/AykutSarac/jsoncrack.com.git
 After cloning the repository, you can install the required dependencies by running the following command:
 
 ```bash
-yarn install
+pnpm install
 ```
 
 To run the development server, you can run the following command:
 
 ```bash
-yarn dev
+pnpm dev
 ```
 
 ## Contributing Guidelines

Dockerfile

@@ -3,12 +3,12 @@ FROM node:18-alpine as builder
 WORKDIR /src
 
 # Cache dependencies first
-COPY package.json yarn.lock ./
-RUN yarn install --frozen-lockfile
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install
 
 # Copy other files and build
 COPY . /src/
-RUN yarn build
+RUN pnpm build
 
 # App
 FROM nginxinc/nginx-unprivileged

README.md

@@ -58,11 +58,11 @@ If you like the project, you can become a sponsor at [GitHub Sponsors](https://g
 After cloning the repository, run the following commands:
 ```console
 # Install the packages
-yarn install
+pnpm install
 
 # Start development server
 # Then the development server will run at http://localhost:3000
-yarn dev
+pnpm dev
 ```
 
 ### Docker

package.json

@@ -14,17 +14,14 @@
     "analyze": "ANALYZE=true npm run build"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/server": "^11.11.0",
-    "@mantine/core": "^6.0.17",
-    "@mantine/hooks": "^6.0.17",
-    "@mantine/next": "^6.0.21",
-    "@mantine/prism": "^6.0.21",
-    "@monaco-editor/react": "^4.5.2",
-    "@sentry/nextjs": "^7.72.0",
+    "@mantine/code-highlight": "^7.3.2",
+    "@mantine/core": "^7.3.2",
+    "@mantine/hooks": "^7.3.2",
+    "@monaco-editor/react": "^4.6.0",
+    "@sentry/nextjs": "^7.91.0",
     "@supabase/auth-helpers-nextjs": "^0.8.1",
     "@supabase/auth-helpers-react": "^0.4.2",
-    "@supabase/supabase-js": "^2.36.0",
+    "@supabase/supabase-js": "^2.39.1",
     "@tanstack/react-query": "^4.35.3",
     "allotment": "^1.19.3",
     "axios": "^1.5.0",
@@ -33,6 +30,7 @@
     "html-to-image": "^1.11.11",
     "jq-in-the-browser": "^0.7.2",
     "jq-web": "^0.5.1",
+    "js-yaml": "^4.1.0",
     "json-2-csv": "^5.0.1",
     "json-to-ts": "^1.7.0",
     "jsonc-parser": "^3.2.0",
@@ -42,7 +40,7 @@
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "maketypes": "^1.1.2",
-    "next": "13.4.12",
+    "next": "14.0.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
@@ -53,28 +51,29 @@
     "react-simple-typewriter": "^5.0.1",
     "react-zoomable-ui": "^0.11.0",
     "reaflow": "5.2.8",
-    "styled-components": "^6.1.1",
+    "styled-components": "^6.1.3",
     "toml": "^3.0.0",
     "use-long-press": "^3.1.5",
     "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^13.4.12",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/js-yaml": "^4.0.9",
     "@types/jsonwebtoken": "^9.0.5",
     "@types/jxon": "^2.0.5",
     "@types/lodash.debounce": "^4.0.9",
     "@types/lodash.get": "^4.4.9",
     "@types/lodash.set": "^4.3.9",
     "@types/node": "^20.4.7",
-    "@types/react": "18.2.18",
+    "@types/react": "18.2.45",
     "eslint": "8.56.0",
-    "eslint-config-next": "13.4.12",
+    "eslint-config-next": "14.0.4",
     "eslint-config-prettier": "^8.10.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-unused-imports": "^3.0.0",
     "prettier": "^3.1.1",
     "ts-node": "^10.9.1",
-    "typescript": "5.1.6"
+    "typescript": "5.3.3"
   }
 }