feat(cubejs-client/playground): new query builder & new chart prototyping (#8678)

* feat(cubejs-client/playground): new query builder

* fix react ts errors

* fix(cubejs-client/playground): typings

* fix(cubejs-client/playground): e2e tests

* fix(cubejs-client/playground): e2e tests * 2

* fix(cubejs-client/playground): e2e tests * 3

* fix(cubejs-client/playground): e2e tests * 4

* fix(cubejs-client/playground): e2e tests * 5

* fix(cubejs-client/playground): e2e tests * 6

* fix(cubejs-client/playground): e2e tests * 7

* fix(cubejs-client/playground): e2e tests * 8

* fix(cubejs-client/playground): e2e tests * 9

* fix(cubejs-client/playground): e2e tests * 10

* fix(cubejs-client/playground): e2e tests * 11

* fix(cubejs-client/playground): e2e tests * 12

* fix(cubejs-client/playground): e2e tests * 13

* fix(cubejs-client/playground): e2e tests * 14

* fix(cubejs-client/playground): e2e tests * 15

* fix(cubejs-client/playground): graphql raw response

* fix(cubejs-client/playground): graphql raw response * 2

* feat(cubejs-playground): add chart prototyping

* feat(cubejs-playground): add chart prototyping * 2

* feat(cubejs-playground): update query builder

* fix(cubejs-playground): update build command

* fix(cubejs-playground): update build command and vizard version

* fix(cubejs-playground): update build command

* fix(cubejs-playground): update build command

---------

Co-authored-by: Alex Vasilev <vaspiring@gmail.com>

Author: tenphi

packages/cubejs-playground/.gitignore

@@ -11,6 +11,7 @@
 # production
 /build
 /dist
+/public/vizard
 
 # misc
 .DS_Store

packages/cubejs-playground/package.json

@@ -14,8 +14,9 @@
     "unit": "vitest run",
     "dev": "vite",
     "watch": "tsc --noEmit false --watch",
-    "build": "tsc && yarn build:playground && yarn build:lib",
     "build:lib": "tsc --noEmit false && node postbuild.js && cp -R src/img/ lib/img/",
+    "build:vizard": "cd ./vizard && yarn && yarn build && cp -R ./build ../public/vizard",
+    "build": "tsc && yarn build:vizard && yarn build:playground && yarn build:lib",
     "build:playground": "SKIP_PREFLIGHT_CHECK=true vite build && rm -Rf ../cubejs-server-core/playground/** && cp -R build/ ../cubejs-server-core/playground/"
   },
   "browserslist": [
@@ -29,12 +30,14 @@
   "homepage": ".",
   "license": "MIT",
   "dependencies": {
+    "@apollo/client": "^3.11.4",
     "@graphiql/toolkit": "^0.4.3",
     "anser": "^2.1.1",
     "camel-case": "^4.1.2",
     "codesandbox-import-utils": "^2.1.1",
     "cron-validator": "^1.2.1",
     "customize-cra": "^1.0.0",
+    "date-fns": "^2.16.1",
     "fast-deep-equal": "^3.1.3",
     "flexsearch": "^0.7.21",
     "graphiql": "^1.8.6",
@@ -53,24 +56,25 @@
     "react-is": "^16.8.4",
     "react-responsive": "^8.0.1",
     "react-router-dom": "^5.1.2",
+    "recharts": "^2.12.7",
     "sql-formatter": "^3.1.0",
     "throttle-debounce": "^3.0.1",
-    "uuid": "^8.3.2"
+    "uuid": "^8.3.2",
+    "vite-plugin-environment": "^1.1.3"
   },
   "devDependencies": {
-    "@ant-design/compatible": "^1.0.2",
-    "@ant-design/icons": "^4.7.0",
-    "@cube-dev/ui-kit": "0.31.2",
+    "@ant-design/compatible": "^1.0.1",
+    "@ant-design/icons": "^5.3.5",
+    "@cube-dev/ui-kit": "0.37.3",
     "@cubejs-client/core": "^0.35.23",
     "@cubejs-client/react": "^0.35.48",
     "@types/flexsearch": "^0.7.3",
     "@types/node": "^16",
-    "@types/react": "^17.0.3",
+    "@types/react": "^18.3.4",
     "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/react-dom": "^17.0.2",
-    "@types/react-router": "^5.1.12",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/styled-components": "^5.1.9",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.34",
     "@types/uuid": "^8.3.1",
     "@vitejs/plugin-react": "^2.1.0",
     "antd": "4.16.13",
@@ -81,25 +85,25 @@
     "graphql": "^15.8.0",
     "jsdom": "^24.0.0",
     "prismjs": "^1.25.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "recursive-readdir": "^2.2.2",
-    "styled-components": "5.2.0",
+    "styled-components": "6.1.12",
     "tslib": "^2.3.0",
     "typescript": "~5.2.2",
-    "vite": "^4.5.0",
+    "vite": "^5.4.2",
     "vitest": "^0.34.6"
   },
   "peerDependencies": {
     "@ant-design/icons": ">=4.7.0",
-    "@cube-dev/ui-kit": ">=0.30.0",
+    "@cube-dev/ui-kit": ">=0.37.2",
     "@cubejs-client/core": ">=0.30.0",
     "@cubejs-client/react": ">=0.30.0",
     "antd": ">=4.16.13",
     "graphql": ">=15.8.0",
     "prismjs": ">=1.25.0",
-    "react": ">=17.0.1",
-    "react-dom": ">=17.0.1",
-    "styled-components": ">=5.2.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "styled-components": ">=6.0.0"
   }
 }