feat: playground nextjs version

package.json

@@ -7,7 +7,11 @@
   "scripts": {
     "prepare": "husky",
     "dev": "pnpm -r --parallel dev",
+    "dev:playground": "pnpm --filter @tidbcloud/tisqleditor-playground... --parallel dev",
+    "dev:playground-nextjs": "pnpm --filter @tidbcloud/tisqleditor-playground-nextjs... --parallel dev",
     "build": "pnpm -r build",
+    "build:playground": "pnpm --filter @tidbcloud/tisqleditor-playground... run build",
+    "build:playground-nextjs": "pnpm --filter @tidbcloud/tisqleditor-playground-nextjs... run build",
     "test": "jest",
     "release": "changeset publish"
   },
@@ -46,5 +50,9 @@
     ],
     "*.+(json|css|md|html)": "prettier --write"
   },
-  "packageManager": "[email protected]"
+  "engines": {
+    "node": ">= 20",
+    "pnpm": ">= 9"
+  },
+  "packageManager": "[email protected]"
 }

packages/playground-nextjs/.env.example

@@ -0,0 +1,6 @@
+# Get these env vars from tidbcloud.com
+DATABASE_URL=
+TIDBCLOUD_CHAT2QUERY_CLUSTER_ID=
+TIDBCLOUD_CHAT2QUERY_APP_URL_ENDPOINT=
+TIDBCLOUD_CHAT2QUERY_APP_PUBLIC_KEY=
+TIDBCLOUD_CHAT2QUERY_APP_PRIVATE_KEY=

packages/playground-nextjs/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

packages/playground-nextjs/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env

packages/playground-nextjs/README.md

@@ -0,0 +1,26 @@
+# TiSQLEditor Playground (NextJS version)
+
+## Try it
+
+- [Full Featured Playground](https://tisqleditor.vercel.app/)
+- [Simple Example](https://tisqleditor.vercel.app/examples)
+
+## Tech Stack
+
+- nextjs
+- tailwindcss
+- shadcn ui
+- react-query
+
+## Getting Started
+
+First, rename `.env.example` to `.env`, config the environment variables, you can get those values from [tidbcloud](https://tidbcloud.com).
+
+Then, run the development server:
+
+```bash
+pnpm i
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

packages/playground-nextjs/api/mock/files-api.ts

@@ -0,0 +1,82 @@
+import { FILES } from './files-data'
+import { delay } from '@/lib/delay'
+import { IFile } from '@/contexts/files-context'
+import {
+  getLocalStorageItem,
+  removeLocalStorageItem,
+  setLocalStorageItem
+} from '@/lib/env-vars'
+
+let memoryFiles = FILES
+
+export async function loadFiles(): Promise<IFile[]> {
+  console.log('load files')
+  await delay(1000)
+
+  const localFiles = getLocalStorageItem('sql_files')
+  if (localFiles) {
+    memoryFiles = JSON.parse(localFiles)
+  } else {
+    setLocalStorageItem('sql_files', JSON.stringify(memoryFiles))
+  }
+  return memoryFiles.slice()
+}
+
+export async function openFile(id: string): Promise<IFile> {
+  await delay(1000)
+
+  const f = memoryFiles.find((file) => file.id === id)!
+
+  // replace content from local storage
+  const content = getLocalStorageItem(`sql_file.${id}`)
+  if (content !== null) {
+    f.content = content
+  }
+
+  return f
+}
+
+export async function addFile(name: string, content?: string): Promise<IFile> {
+  await delay(2000)
+
+  const newFile = {
+    id: crypto.randomUUID(),
+    name,
+    content: content ?? ''
+  }
+  memoryFiles.push(newFile)
+  setLocalStorageItem('sql_files', JSON.stringify(memoryFiles))
+
+  return newFile
+}
+
+export async function delFile(id: string): Promise<void> {
+  await delay(2000)
+
+  const index = memoryFiles.findIndex((file) => file.id === id)
+  memoryFiles.splice(index, 1)
+
+  setLocalStorageItem('sql_files', JSON.stringify(memoryFiles))
+  removeLocalStorageItem(`sql_file.${id}`)
+}
+
+export async function renameFile(id: string, name: string): Promise<void> {
+  await delay(2000)
+
+  const file = memoryFiles.find((file) => file.id === id)
+  if (file) {
+    file.name = name
+  }
+  setLocalStorageItem('sql_files', JSON.stringify(memoryFiles))
+}
+
+export async function saveFile(id: string, content: string) {
+  await delay(2000)
+
+  const file = memoryFiles.find((file) => file.id === id)
+
+  if (file) {
+    file.content = content
+  }
+  setLocalStorageItem(`sql_file.${id}`, content)
+}

packages/playground-nextjs/api/mock/files-data.ts

@@ -0,0 +1,101 @@
+import { IFile } from '@/contexts/files-context'
+
+export const FILES: IFile[] = [
+  {
+    // the id is generated by crypto.randomUUID()
+    id: '63f6794d-6158-424f-8cf4-7d03b1b9f48c',
+    name: 'file-1',
+    content: `
+USE sp500insight;
+SELECT sector, industry, COUNT(*) AS companies
+FROM companies c
+WHERE c.stock_symbol IN (SELECT stock_symbol FROM index_compositions WHERE index_symbol = "SP500")
+GROUP BY sector, industry
+ORDER BY sector, companies DESC;
+`
+  },
+  {
+    id: 'd7692e17-b97d-4342-a6b7-a5e6e4d50021',
+    name: 'file-2',
+    content: `
+USE sp500insight;
+SELECT
+    sector,
+    COUNT(*) AS companies,
+    SUM(market_cap) AS total_market_cap,
+    AVG(revenue_growth) AS avg_revenue_growth
+FROM companies c
+WHERE
+    stock_symbol IN (SELECT stock_symbol FROM index_compositions WHERE index_symbol = 'SP500')
+GROUP BY sector
+ORDER BY avg_revenue_growth DESC;
+`
+  },
+  {
+    id: '64c80ed3-f7b4-4959-9520-ad92706aa815',
+    name: 'file-3',
+    content: `
+USE sp500insight;
+SELECT
+    ic.stock_symbol,
+    c.short_name,
+    ic.weight,
+    c.market_cap
+  FROM
+    index_compositions ic
+    JOIN companies c ON ic.stock_symbol = c.stock_symbol
+  WHERE
+    ic.index_symbol = 'SP500'
+  ORDER BY
+    ic.weight DESC;
+`
+  },
+  {
+    id: '838e098a-752e-445d-bccb-6262c4529378',
+    name: 'file-4',
+    content: `
+USE game;
+With r AS (
+    SELECT
+        games.name,
+        genre.genre_name,
+        rank() over (partition by genre.genre_id order by games.metacritic_score desc) as ranking
+    FROM game_genre gg
+    LEFT JOIN genre ON genre.genre_id = gg.genre_id
+    LEFT JOIN games ON games.app_id = gg.app_id
+    WHERE games.metacritic_score != 0
+)
+SELECT *
+FROM r
+WHERE r.ranking <= 5;
+`
+  },
+  {
+    id: 'f0e3f7d4-1a1c-4c0e-9e9b-6f5b7e7d8d4d',
+    name: 'file-5',
+    content: `
+USE game;
+SELECT name, average_playtime_forever
+FROM games
+ORDER BY average_playtime_forever DESC
+LIMIT 10;
+`
+  },
+  {
+    id: '0ff8cf7c-fca3-45df-a275-e079d15ba90e', // generated by crypto.randomUUID()
+    name: 'file-6',
+    content: `
+USE game;
+SELECT g.*
+FROM game_genre gg
+LEFT JOIN games g ON g.app_id = gg.app_id
+WHERE gg.genre_id  = 9
+ORDER BY g.estimated_owners DESC;
+`
+  },
+  {
+    id: '64c80ed3-f7b4-4959-9520-ad92706aa817',
+    name: 'file-7',
+    content: ``
+  }
+]