Merge branch 'main' into feature/add-page-improvements (#377)

Note: the size limit needed to be updated now that we are importing the default export from `react-select`

.eslintrc.cjs

@@ -58,12 +58,6 @@ module.exports = {
         "testing-library/prefer-screen-queries": "off",
       },
     },
-    {
-      files: ["**/modules/*.tsx"],
-      rules: {
-        "@typescript-eslint/no-explicit-any": "off",
-      },
-    },
     {
       files: ["**/*.js"],
       rules: {

.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,6 @@ 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
+      - run: npm run size-limit -w=packages/studio-ui

.prettierignore

@@ -1,7 +1,6 @@
 **/coverage
 **/lib
-packages/studio-plugin/tests/__fixtures__/PageFile/noReturnParenthesesPage.tsx
-packages/studio-plugin/tests/__fixtures__/PageFile/repeaterPage.tsx
+packages/studio-plugin/tests/__fixtures__/ComponentTreeParser/noReturnParentheses.tsx
 packages/studio-plugin/tests/__fixtures__/StudioConfigs/malformed/studio.config.js
 packages/studio/src/tailwind-full.css
 .github

README.md

@@ -38,7 +38,7 @@ Now that you have a page, you probably want to do some things with it. Specifica
 
 ![enter image description here](https://yext-studio-images.s3.amazonaws.com/Screen+Shot+2023-02-02+at+9.18.10+AM.png)
 
-These are the various Components that can be added to your page. For now, you can ignore Layouts and Modules. Those will be described later. Once you select a Component, such as `Banner`, it will appear in the middle preview pane and on the left-hand side under `Layers`:
+These are the various Components that can be added to your page. For now, you can ignore Layouts which will be described later. Once you select a Component, such as `Banner`, it will appear in the middle preview pane and on the left-hand side under `Layers`:
 
 ![enter image description here](https://yext-studio-images.s3.amazonaws.com/Screen+Shot+2023-02-03+at+9.41.51+AM.png)
 
@@ -116,26 +116,6 @@ When the new Component is added to a page, the `Properties` tab on the left-hand
 
 We've already added a few custom Components to the starter for you. One is a Banner, to prominently display an Entity's address. We also added an Entity Result Card and CTA in case you want to add Search functionality. You can use these Components as a guide when writing your own.
 
-## Reuse through Modules
-
-Users may find that they use a certain combination of Components often across pages. For example, they may often pair a Search Bar Component with a Results Component. Repeating this combination over and over, for each page is tedious. That's where Studio Modules come in. A Module represents a named combination of Components. They can be added to a Page just like a single Component.
-
-### Creating a Module
-
-Creating a Module is simple and can be done entirely within Studio. No Developer intervention is needed! To start, you will need to add a Layout. This is done by clicking the same Icon you did for adding a Component:
-
-![enter image description here](https://yext-studio-images.s3.amazonaws.com/Screen+Shot+2023-02-02+at+12.38.01+PM.png)
-
-A Layout groups a set of Studio Components. Once the Layout is in place on the page, add the Components that you want in the Layout. The Components will initially be siblings of the Layout. In the `Layers` pane, you will need to drag the Components under Layout.
-
-![enter image description here](https://yext-studio-images.s3.amazonaws.com/Screen+Shot+2023-02-02+at+1.07.06+PM.png)
-
-Once the Layout has all the necessary Components, click it and you will see a `Create Module` button appear:
-
-![enter image description here](https://yext-studio-images.s3.amazonaws.com/Screen+Shot+2023-02-02+at+1.00.17+PM.png)
-
-The button will open a modal that prompts you to name your Module. The Module is then available for use on any page! The TSX file for the Module will be under `src/modules` in the repo.
-
 ## Site Settings
 
 Often, you will want to have attributes that are accessible to all pages within a Site. In Classic Pages, these were known as Site Attributes. In the new Sites system, we usually recommend adding these attributes to a Site Entity. Studio provides an additional mechanism for supplying these values: the `src/siteSettings.ts` file. We cannot rely exclusively on a Site Entity because Studio can be used outside of PagesJS. The `siteSettings.ts` file is initially setup by the Developer:

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": [

apps/test-site/src/layouts/LocationLayout.tsx

@@ -0,0 +1,13 @@
+import Header from "../components/Header";
+
+function LocationLayout() {
+  return (
+    <Header
+      title="Yext"
+      logo="https://a.mktgcdn.com/p/R9FjcYjRNA5dAespqgHFLMvu2m18-E5Apnb3KON0oJY/300x300.png"
+      backgroundColor="#BAD8FD"
+    />
+  );
+}
+
+export default LocationLayout;

apps/test-site/src/templates/UniversalPage.tsx

@@ -24,9 +24,6 @@ export default function UniversalPage({ document }: TemplateProps) {
     <>
       <FixedText />
       <Cta label="[LABEL]" link="[URL]" linkType="[LINK TYPE]" />
-      {document.services.map((item, index) => (
-        <Banner title={`${item}!`} key={index} />
-      ))}
       <Container>
         <Button />
       </Container>

e2e-tests/tests/add-element.spec.ts

@@ -7,14 +7,14 @@ const expectedPage = fs.readFileSync(
   "utf-8"
 );
 
-studioTest("can add a Footer component", async ({ page, studioPage }) => {
+studioTest("can add a Footer component", async ({ studioPage }) => {
   await studioPage.switchPage("LocationPage");
   await studioPage.addElement("Footer", "Components");
   const previews = studioPage.preview.getByText("© 2023 Yext");
   await expect(previews).toHaveCount(1);
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
   await studioPage.saveButton.click();
   const pagePath = studioPage.getPagePath("LocationPage");
   await expect(pagePath).toHaveContents(expectedPage);
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
 });

e2e-tests/tests/add-entity-page.spec.ts

@@ -15,9 +15,9 @@ studioTest("can add an entity page", async ({ page, studioPage }) => {
   // the store with account content
   await studioPage.addEntityPage("EntityPage", {}, "entity-page");
   await expect(pageInTree).toHaveCount(1);
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
   await studioPage.saveButton.click();
   const expectedPagePath = studioPage.getPagePath("EntityPage");
   await expect(expectedPagePath).toHaveContents(expectedPage);
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
 });

e2e-tests/tests/add-static-page.spec.ts

@@ -12,9 +12,9 @@ studioTest("can add a static page", async ({ page, studioPage }) => {
   await expect(pageInTree).toHaveCount(0);
   await studioPage.addStaticPage("NewStaticPage", "index.html");
   await expect(pageInTree).toHaveCount(1);
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
   await studioPage.saveButton.click();
   const pagePath = studioPage.getPagePath("NewStaticPage");
   await expect(pagePath).toHaveContents(expectedPage);
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
 });

e2e-tests/tests/custom-tailwind.spec.ts

@@ -18,7 +18,7 @@ studioTest(
     const builtInTailwindClasses =
       "text-teal-300 line-through shadow-lg shadow-cyan-500/50";
     await classNameInput.type(safelistedClasses + builtInTailwindClasses);
-    await expect(studioPage.preview.locator("body")).toHaveScreenshot();
+    await studioPage.takePreviewScreenshotAfterImgRender();
   }
 );
 
@@ -39,7 +39,7 @@ studioTest("TailwindClass prop editor", async ({ studioPage, page }) => {
   await expect(editorSidebar).toHaveScreenshot();
   await editorSidebar.getByText("bg-primary").click();
   await expect(editorSidebar).toHaveScreenshot();
-  await expect(studioPage.preview.locator("body")).toHaveScreenshot();
+  await studioPage.takePreviewScreenshotAfterImgRender();
   await studioPage.saveButton.click();
   const pagePath = studioPage.getPagePath("BasicPage");
   const hasExpectedPageContents = fs

e2e-tests/tests/deploy.spec.ts

@@ -5,17 +5,17 @@ studioTest.use({
   createRemote: true,
 });
 
-studioTest("can deploy changes", async ({ page, studioPage }) => {
+studioTest("can deploy changes", async ({ studioPage }) => {
   const gitOps = studioPage.gitOps;
   const startingRef = await gitOps.getCurrentRef();
-  await studioPage.addElement("Container", "Layouts");
-  await expect(page).toHaveScreenshot();
+  await studioPage.addElement("Container", "Containers");
+  await studioPage.takePageScreenshotAfterImgRender();
 
   const numCommitsBeforeDeploy = await gitOps.getNumCommitsFromRef(startingRef);
   expect(numCommitsBeforeDeploy).toEqual(0);
   await studioPage.deployButton.click();
 
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
   const numCommitsMade = await gitOps.getNumCommitsFromRef(startingRef);
   expect(numCommitsMade).toEqual(1);
   const commitMsg = await gitOps.getCommitMessage();

e2e-tests/tests/error-component-preview.spec.ts

@@ -1,18 +1,17 @@
 import { studioTest } from "./infra/studioTest.js";
-import { expect } from "@playwright/test";
 
-studioTest("components with parsing errors", async ({ page, studioPage }) => {
+studioTest("components with parsing errors", async ({ studioPage }) => {
   await studioPage.switchPage("ErrorComponentPreviews");
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
 
   await studioPage.preview
     .getByText(
       "We will still try our best to render this component even with a parsing error."
     )
     .first()
     .hover();
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
 
   await studioPage.setActiveComponent("ErrorComponent");
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
 });

e2e-tests/tests/field-picker-dropdown.spec.ts

@@ -1,14 +1,13 @@
-import { expect } from "@playwright/test";
 import { studioTest } from "./infra/studioTest.js";
 
 studioTest("renders field picker dropdown", async ({ page, studioPage }) => {
   await studioPage.addElement("Button", "Components");
   await studioPage.setActiveComponent("Button");
   await page.getByLabel("Toggle field picker").click();
   await page.getByText("Meta").click();
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
   await page.setViewportSize({ width: 1000, height: 720 });
   await page.getByText("Meta").hover();
   await page.mouse.wheel(200, 0);
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
 });

e2e-tests/tests/fix-error-page.spec.ts

@@ -12,5 +12,5 @@ studioTest("can fix an error page", async ({ page, studioPage }) => {
   fs.writeFileSync(pagePath, errorPageScript);
   await page.getByRole("button", { name: "ErrorPage", exact: true }).click();
   await expect(studioPage.saveButton.button).toBeDisabled();
-  await expect(page).toHaveScreenshot();
+  await studioPage.takePageScreenshotAfterImgRender();
 });

e2e-tests/tests/hmr/update-component-body.spec.ts

@@ -18,13 +18,13 @@ studioTest(
 
     await studioPage.addElement("Button", "Components", false);
     await expect(updatedButtonPreviews).toHaveCount(0);
-    await expect(studioPage.preview.locator("body")).toHaveScreenshot();
+    await studioPage.takePreviewScreenshotAfterImgRender();
 
     const buttonPath = studioPage.getComponentPath("Button");
     fs.writeFileSync(buttonPath, updatedComponent);
     // Wait for the HMR to complete
     await page.waitForResponse(/Button\.tsx/, { timeout: 5000 });
     await expect(updatedButtonPreviews).toHaveCount(1);
-    await expect(studioPage.preview.locator("body")).toHaveScreenshot();
+    await studioPage.takePreviewScreenshotAfterImgRender();
   }
 );

e2e-tests/tests/hmr/update-component-initial-props.spec.ts

@@ -19,12 +19,12 @@ studioTest(
 
     await studioPage.addElement("Button", "Components");
     await expect(buttonPreviews).toHaveCount(1);
-    await expect(page).toHaveScreenshot();
+    await studioPage.takePageScreenshotAfterImgRender();
 
     expect(
       await studioPage.getStringPropValue("className", "Button", 0)
     ).toEqual("px-4 py-2 text-lg border-4 border-green-500");
-    await expect(page).toHaveScreenshot();
+    await studioPage.takePageScreenshotAfterImgRender();
 
     const buttonPath = studioPage.getComponentPath("Button");
     fs.writeFileSync(buttonPath, updatedComponent);
@@ -33,16 +33,16 @@ studioTest(
 
     await studioPage.addElement("Button", "Components");
     await expect(buttonPreviews).toHaveCount(2);
-    await expect(page).toHaveScreenshot();
+    await studioPage.takePageScreenshotAfterImgRender();
 
     expect(
       await studioPage.getStringPropValue("className", "Button", 1)
     ).toEqual("px-4");
-    await expect(page).toHaveScreenshot();
+    await studioPage.takePageScreenshotAfterImgRender();
 
     await studioPage.saveButton.click();
     const pagePath = studioPage.getPagePath("BasicPage");
     await expect(pagePath).toHaveContents(expectedPage);
-    await expect(page).toHaveScreenshot();
+    await studioPage.takePageScreenshotAfterImgRender();
   }
 );

e2e-tests/tests/hmr/update-page.spec.ts

@@ -9,7 +9,7 @@ const updatedPage = fs.readFileSync(
 
 studioTest(
   "can update page file and see changes in UI via HMR",
-  async ({ page, studioPage }) => {
+  async ({ studioPage }) => {
     const containerPreviews = studioPage.preview.getByText("I'm a container:");
     await expect(containerPreviews).toHaveCount(1);
     const buttonPreviews = studioPage.preview.getByText("Press me!");
@@ -19,6 +19,6 @@ studioTest(
     await expect(containerPreviews).toHaveCount(0);
     await expect(buttonPreviews).toHaveCount(2);
     await expect(studioPage.saveButton.button).toBeDisabled();
-    await expect(page).toHaveScreenshot();
+    await studioPage.takePageScreenshotAfterImgRender();
   }
 );