Move playground to website (#765)

* Move playground to website

* add nx to make website build work

* fix dark theme

* add tailwindcss, move to src

* fix build on netlify

* revert _app change

* fix option panel width

Author: danez

.prettierrc.cjs

@@ -5,6 +5,7 @@ module.exports = {
   trailingComma: 'all',
   useTabs: false,
   printWidth: 80,
-  proseWrap: "always",
+  proseWrap: 'always',
   singleQuote: true,
+  plugins: [require('prettier-plugin-tailwindcss')],
 };

nx.json

@@ -0,0 +1,25 @@
+{
+  "implicitDependencies": {
+    "package.json": "*",
+    "package-lock.json": "*",
+    "nx.json": "*",
+    "tsconfig.base.json": "*"
+  },
+  "tasksRunnerOptions": {
+    "default": {
+      "runner": "nx/tasks-runners/default",
+      "options": {
+        "cacheableOperations": ["build", "test"]
+      }
+    }
+  },
+  "targetDefaults": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["{projectRoot}/dist"]
+    },
+    "test": {
+      "dependsOn": ["build"]
+    }
+  }
+}

package.json

@@ -5,12 +5,10 @@
     "pnpm": "7.30.3"
   },
   "scripts": {
-    "build": "pnpm --filter '!@react-docgen-internal/*' run build",
-    "watch": "pnpm --filter '!@react-docgen-internal/*' run watch",
+    "build": "nx run-many --target=build --exclude='@react-docgen-internal/*'",
     "lint": "eslint . --ext .js,.cjs,.mjs,.ts,.tsx --report-unused-disable-directives --max-warnings=0",
     "fix": "eslint . --ext .js,.cjs,.mjs,.ts,.tsx --fix --report-unused-disable-directives --max-warnings=0",
-    "test": "pnpm build && pnpm --filter '!@react-docgen-internal/*' exec vitest run",
-    "test:dev": "pnpm build && pnpm --filter '!@react-docgen-internal/*' exec vitest",
+    "test": "nx run-many --target=test --exclude='@react-docgen-internal/*' --output-style=stream",
     "playground:build": "pnpm --filter @react-docgen-internal/playground run build",
     "playground:start": "pnpm --filter @react-docgen-internal/playground run start",
     "copy:changelog:react-docgen": "cp ./packages/react-docgen/CHANGELOG.md ./packages/website/pages/docs/release-notes/react-docgen.mdx",
@@ -32,7 +30,9 @@
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-prettier": "4.2.1",
     "execa": "6.1.0",
+    "nx": "15.8.9",
     "prettier": "2.8.7",
+    "prettier-plugin-tailwindcss": "0.2.5",
     "rimraf": "4.4.1",
     "tempy": "3.0.0",
     "typescript": "5.0.2",

packages/react-docgen-cli/package.json

@@ -15,8 +15,7 @@
   },
   "scripts": {
     "build": "rimraf dist/ && tsc",
-    "test": "vitest run",
-    "watch": "rimraf dist/ && tsc --watch"
+    "test": "vitest run"
   },
   "keywords": [
     "react",

packages/react-docgen/package.json

@@ -20,8 +20,7 @@
   "typings": "dist/main.d.ts",
   "scripts": {
     "build": "rimraf dist/ && tsc",
-    "test": "vitest run",
-    "watch": "rimraf dist/ && tsc --watch"
+    "test": "vitest run"
   },
   "keywords": [
     "react",

packages/website/components/.keep

@@ -1,6 +1,14 @@
 const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
-  themeConfig: './theme.config.tsx',
+  themeConfig: './src/theme.config.tsx',
 });
 
-module.exports = withNextra();
+module.exports = withNextra({
+  webpack: (config) => {
+    if (!config.resolve.fallback) config.resolve.fallback = {};
+
+    config.resolve.fallback.fs = false;
+
+    return config;
+  },
+});

packages/website/next.config.js

@@ -4,20 +4,61 @@
   "version": "0.0.0",
   "description": "react-docgen website",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
+    "dev": "nx exec -- next dev",
+    "build": "NODE_ENV=production nx exec -- next build",
+    "start": "nx exec -- next start"
   },
   "author": "Daniel Tschinder (http://github.com/danez)",
   "license": "MIT",
   "dependencies": {
+    "@codemirror/lang-javascript": "6.1.4",
+    "@codemirror/view": "6.9.3",
+    "@headlessui/react": "1.7.13",
+    "@popperjs/core": "2.11.7",
+    "@types/react-dom": "18.0.11",
+    "@uiw/react-codemirror": "4.19.9",
+    "clsx": "1.2.1",
     "next": "13.2.4",
+    "next-themes": "0.2.1",
     "nextra": "2.2.20",
     "nextra-theme-docs": "2.2.20",
+    "postcss": "8.4.21",
+    "postcss-lightningcss": "0.6.0",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-docgen": "workspace:6.0.0-beta.5",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.2.7"
   },
   "devDependencies": {
     "@types/react": "18.0.29"
+  },
+  "browserslist": [
+    "chrome 64",
+    "edge 79",
+    "firefox 67",
+    "opera 51",
+    "safari 12"
+  ],
+  "nx": {
+    "targets": {
+      "build": {
+        "dependsOn": [
+          "^build"
+        ],
+        "outputs": [
+          "{projectRoot}/.next"
+        ]
+      },
+      "dev": {
+        "dependsOn": [
+          "^build"
+        ]
+      },
+      "start": {
+        "dependsOn": [
+          "build"
+        ]
+      }
+    }
   }
 }

packages/website/package.json

@@ -0,0 +1,7 @@
+/** @type {import('postcss').Postcss} */
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    'postcss-lightningcss': {},
+  },
+};