Separate yext/studio into yext/studio-ui

.github/setup-acceptance/action.yml

@@ -4,9 +4,7 @@ runs:
   using: composite
   steps:
     - uses: ./.github/setup-ci
-    - run: |
-        npm run build -w=packages/studio-plugin
-        npm run build -w=packages/studio
+    - run: npm run build
       shell: bash
     - uses: actions/cache@v3
       with:

.github/workflows/run-tests.yml

@@ -2,7 +2,7 @@ name: Run Tests
 on: workflow_call
 
 jobs:
-  studio:
+  studio-ui:
     strategy:
       matrix:
         os: [windows-latest, ubuntu-latest]
@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/setup-ci
       - run: npm run build -w=packages/studio-plugin
-      - run: npm test -w=packages/studio -- --coverage=false
+      - run: npm test -w=packages/studio-ui -- --coverage=false
 
   studio_plugin:
     strategy:
@@ -32,4 +32,5 @@ jobs:
       - uses: actions/checkout@v3
       - uses: ./.github/setup-ci
       - run: npm run build
+      - run: npm run build-test-site -w=apps/test-site
       - run: npm run typecheck-jest

apps/test-site/package.json

@@ -34,7 +34,7 @@
     "dev": "studio",
     "localData": "yext pages generate-test-data -a",
     "start": "craco start",
-    "build": "craco build"
+    "build-test-site": "craco build"
   },
   "browserslist": {
     "production": [

packages/studio/src/utils/generateTailwindSafelist.ts → packages/studio-plugin/src/utils/generateTailwindSafelist.ts

@@ -1,4 +1,4 @@
-import type { StudioTailwindTheme } from "@yext/studio-plugin";
+import { StudioTailwindTheme } from "../types";
 
 /**
  * Generates a safelist for custom test colors, background colors, and font sizes.

packages/studio-plugin/src/utils/index.ts

@@ -1,3 +1,4 @@
 export { default as TypeGuards } from "./TypeGuards";
 export { default as ComponentTreeHelpers } from "./ComponentTreeHelpers";
 export { default as transformPropValuesToRaw } from "./transformPropValuesToRaw";
+export { default as generateTailwindSafelist } from "./generateTailwindSafelist";

packages/studio/jest.config.ts → packages/studio-ui/jest.config.ts

@@ -15,5 +15,6 @@ const config: Config = {
     "\\.[jt]sx?$": "babel-jest",
     "\\.svg$": "<rootDir>/tests/__setup__/svgTransformer.cjs",
   },
+  testPathIgnorePatterns: ["lib"],
 };
 export default config;

packages/studio-ui/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@yext/studio-ui",
+  "version": "0.22.0",
+  "types": "./lib/src/index.d.ts",
+  "main": "./lib/src/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/src/index.d.ts",
+      "import": "./lib/src/index.js",
+      "require": "./lib/src/index.js"
+    }
+  },
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "dev": "npm run copy-svg && tsc --watch --preserveWatchOutput -p tsconfig.json",
+    "copy-svg": "npx copyfiles \"src/**/*.svg\" lib",
+    "build": "rimraf lib && npm run copy-svg && tsc -p tsconfig.json",
+    "test": "jest",
+    "typecheck-jest": "npx tsc -p tests/tsconfig.json"
+  },
+  "dependencies": {
+    "@dhmk/zustand-lens": "^2.0.5",
+    "@minoru/react-dnd-treeview": "^3.4.1",
+    "@restart/ui": "^1.5.2",
+    "@vitejs/plugin-react": "^4.0.4",
+    "autoprefixer": "^10.4.14",
+    "cac": "^6.7.14",
+    "classnames": "^2.3.2",
+    "cross-env": "^7.0.3",
+    "immer": "^9.0.21",
+    "lodash": "^4.17.21",
+    "path-browserify": "^1.0.1",
+    "postcss": "^8.4.27",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-modal": "3.16.1",
+    "react-toastify": "^9.1.1",
+    "react-tooltip": "^5.18.0",
+    "tailwind-merge": "^1.8.1",
+    "tailwindcss": "^3.3.3",
+    "zundo": "2.0.0-beta.12",
+    "zustand": "^4.3.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.5",
+    "@babel/plugin-syntax-flow": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
+    "@rollup/plugin-typescript": "^10.0.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.4",
+    "@types/lodash": "^4.14.191",
+    "@types/node": "^18.11.15",
+    "@types/path-browserify": "^1.0.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@types/react-modal": "3.13.1",
+    "@yext/studio-plugin": "*",
+    "copyfiles": "^2.4.1",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.3.1",
+    "resize-observer-polyfill": "^1.5.1",
+    "vite-plugin-svgr": "^3.2.0"
+  },
+  "peerDependencies": {
+    "@yext/studio-plugin": "*"
+  }
+}

packages/studio/src/components/TailwindPropInput.tsx → packages/studio-ui/src/components/TailwindPropInput.tsx

@@ -1,5 +1,5 @@
 import { RefObject, useCallback, useEffect, useRef, useState } from "react";
-import generateTailwindSafelist from "../utils/generateTailwindSafelist";
+import { generateTailwindSafelist } from "@yext/studio-plugin";
 import { StudioTailwindTheme } from "@yext/studio-plugin";
 import { ReactComponent as EmbedIcon } from "../icons/embed.svg";
 import { ReactComponent as X } from "../icons/x.svg";

packages/studio-ui/src/index.ts

@@ -0,0 +1,2 @@
+export { default as App } from "./App";
+export { default as hotReloadStore } from "./store/hotReloadStore";

packages/studio/tests/tsconfig.json → packages/studio-ui/tests/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "extends": "../tsconfig.json",
-  "include": ["**/*", "../src/index.d.ts"],
+  "include": ["**/*", "../src/global.d.ts"],
   "compilerOptions": {
     "noEmit": true,
     "types": [

packages/studio-ui/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "lib",
+    "types": ["@yext/studio-plugin/virtual-module", "vite-plugin-svgr/client"]
+  },
+  "include": ["src"]
+}

packages/studio/package.json

@@ -10,54 +10,23 @@
     "dev": "tsc --watch --preserveWatchOutput -p tsconfig.node.json & tsc --watch --preserveWatchOutput -p tsconfig.json",
     "build": "run-script-os",
     "build:default": "npm run build:windows && chmod 755 lib/bin/studio.js",
-    "build:windows": "rimraf lib && tsc -p tsconfig.node.json && tsc -p tsconfig.json",
-    "preview": "vite preview",
-    "test": "jest",
-    "typecheck-jest": "npx tsc -p tests/tsconfig.json"
+    "build:windows": "rimraf lib && tsc -p tsconfig.node.json && tsc -p tsconfig.json"
   },
   "dependencies": {
-    "@dhmk/zustand-lens": "^2.0.5",
-    "@minoru/react-dnd-treeview": "^3.4.1",
-    "@restart/ui": "^1.5.2",
     "@vitejs/plugin-react": "^4.0.4",
     "@yext/studio-plugin": "0.22.0",
+    "@yext/studio-ui": "0.22.0",
     "autoprefixer": "^10.4.14",
     "cac": "^6.7.14",
-    "classnames": "^2.3.2",
     "cross-env": "^7.0.3",
-    "immer": "^9.0.21",
-    "lodash": "^4.17.21",
-    "path-browserify": "^1.0.1",
     "postcss": "^8.4.27",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-modal": "3.16.1",
-    "react-toastify": "^9.1.1",
-    "react-tooltip": "^5.18.0",
-    "tailwind-merge": "^1.8.1",
-    "tailwindcss": "^3.3.3",
     "vite": "^4.4.7",
-    "vite-plugin-svgr": "^2.4.0",
-    "zundo": "2.0.0-beta.12",
-    "zustand": "^4.3.2"
+    "vite-plugin-svgr": "^2.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
-    "@babel/plugin-syntax-flow": "^7.18.6",
-    "@babel/plugin-transform-react-jsx": "^7.19.0",
-    "@rollup/plugin-typescript": "^10.0.1",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.2.4",
-    "@types/lodash": "^4.14.191",
     "@types/node": "^18.11.15",
-    "@types/path-browserify": "^1.0.0",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "@types/react-modal": "3.13.1",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.3.1",
-    "resize-observer-polyfill": "^1.5.1"
+    "@types/react": "^18.0.26"
   }
 }

packages/studio/src/main.tsx

@@ -1,10 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
-import "./tailwind-directives.css";
-import "react-tooltip/dist/react-tooltip.css";
+import { App, hotReloadStore } from "@yext/studio-ui";
 import { StudioHMRPayload, StudioHMRUpdateID } from "@yext/studio-plugin";
-import hotReloadStore from "./store/hotReloadStore";
+import "./tailwind-directives.css";
 
 if (import.meta.hot) {
   import.meta.hot.on(StudioHMRUpdateID, (hmrPayload: StudioHMRPayload) => {

packages/studio/tailwind.config.ts

@@ -7,7 +7,7 @@ import {
 } from "@yext/studio-plugin";
 import path from "path";
 import fs from "fs";
-import generateTailwindSafelist from "./src/utils/generateTailwindSafelist";
+import { generateTailwindSafelist } from "@yext/studio-plugin";
 
 const getRootDir = (): string => {
   const cliArgs: CliArgs = JSON.parse(
@@ -50,6 +50,7 @@ export default {
   content: [
     path.resolve(__dirname, "src/**/*.{ts,tsx}"),
     path.resolve(__dirname, "index.html"),
+    path.join(path.dirname(require.resolve("@yext/studio-ui")), "**/*.js"),
     ...transformedUserContent,
   ],
   safelist: generateTailwindSafelist(userTailwindTheme),

packages/studio/tsconfig.json

@@ -1,24 +1,12 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "module": "ESNext",
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "noImplicitAny": false,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "forceConsistentCasingInFileNames": true,
-    "declaration": true,
-    "declarationMap": true,
-    "sourceMap": true,
-    "jsx": "react-jsx",
-    "target": "ESNext",
     "outDir": "lib",
     "types": [
       "vite/client",
       "@yext/studio-plugin/virtual-module",
       "vite-plugin-svgr/client"
     ]
   },
-  "include": ["src", "types.ts"]
+  "include": ["src"]
 }

turbo.json

@@ -3,7 +3,7 @@
   "pipeline": {
     "build": {
       "dependsOn": ["^build"],
-      "outputs": ["dist/**", "lib/**"]
+      "outputs": ["lib/**"]
     },
     "dev": {
       "cache": false

update-minor-versions.mjs

@@ -1,35 +1,49 @@
 import { execSync } from "child_process";
 import fs from "fs";
 
-function readJson(filepath) {
-  return JSON.parse(fs.readFileSync(filepath, "utf-8"));
-}
-
 function bumpStudioPlugin() {
   console.log("... bumping studio-plugin");
   execSync("npm version minor -w=packages/studio-plugin");
-  const packageJson = readJson("./packages/studio-plugin/package.json");
-  const newVersion = packageJson?.version;
-  if (!newVersion) {
-    throw new Error("Could not parse studio-plugin version from package.json");
-  }
-  return newVersion;
+  return readVersion("./packages/studio-plugin/package.json");
 }
 
-function bumpStudio(newVersion) {
+function bumpStudio(pluginVersion, uiVersion) {
   console.log("... bumping studio");
   const packageJsonPath = "./packages/studio/package.json";
   const packageJson = readJson(packageJsonPath);
   // `npm i @yext/studio-plugin@${newVersion} --save-exact` does not update the package json,
   // likely because the new version does not exist yet.
-  packageJson.dependencies["@yext/studio-plugin"] = newVersion;
+  packageJson.dependencies["@yext/studio-plugin"] = pluginVersion;
+  packageJson.dependencies["@yext/studio-ui"] = uiVersion;
   fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
   execSync("npm version minor -w=packages/studio");
 }
 
+function bumpStudioUI() {
+  console.log("... bumping studio-ui");
+  execSync("npm version minor -w=packages/studio-ui");
+  return readVersion("./packages/studio-ui/package.json");
+}
+
+function readJson(filepath) {
+  return JSON.parse(fs.readFileSync(filepath, "utf-8"));
+}
+
+function readVersion(packageJsonPath) {
+  const packageJson = readJson(packageJsonPath);
+  const newVersion = packageJson?.version;
+  if (!newVersion) {
+    throw new Error(
+      `Could not parse version from package.json at ${packageJsonPath}`
+    );
+  }
+  return newVersion;
+}
+
 function main() {
-  const newVersion = bumpStudioPlugin();
-  bumpStudio(newVersion);
+  const pluginVersion = bumpStudioPlugin();
+  const uiVersion = bumpStudioUI();
+  bumpStudio(pluginVersion, uiVersion);
 }
 
 main();