fix(wab): remaining style variant changes

Change-Id: I1da25b6309c4f42f0e1c9f6562a54cff22277ad5 GitOrigin-RevId: e0febc45d37c40bdcdd281164058fe20e63d1379
plasmicapp · Dec 13, 2024 · df002eb · df002eb
1 parent 2701636
commit df002eb
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 20 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -222,7 +222,7 @@ module.exports = {
         "platform/wab/src/wab/main.tsx",
       ],
       rules: {
-        "@typescript-eslint/switch-exhaustiveness-check": "off",
+        "@typescript-eslint/switch-exhaustiveness-check": "error",
         "no-shadow": "off",
         "no-extra-boolean-cast": "off",
         "@typescript-eslint/no-shadow": "error",

diff --git a/platform/wab/src/wab/client/components/studio/arenas/ComponentArenaLayout.tsx b/platform/wab/src/wab/client/components/studio/arenas/ComponentArenaLayout.tsx
@@ -21,14 +21,15 @@ import {
   ensureCustomFrameForActivatedVariants,
   getFrameHeight,
 } from "@/wab/shared/Arenas";
+import { isTplRootWithCodeComponentVariants } from "@/wab/shared/code-components/variants";
 import { maybe, spawn } from "@/wab/shared/common";
 import { getComponentArenaRowLabel } from "@/wab/shared/component-arenas";
 import {
   allComponentVariants,
   getSuperComponentVariantGroupToComponent,
-  hasCodeComponentRoot,
 } from "@/wab/shared/core/components";
 import { allGlobalVariantGroups } from "@/wab/shared/core/sites";
+import { isTplCodeComponent } from "@/wab/shared/core/tpls";
 import {
   COMBINATIONS_CAP,
   FRAME_LOWER,
@@ -161,6 +162,7 @@ export const ComponentArenaLayout = observer(
     );
 
     const vController = makeVariantsController(studioCtx);
+    const tplRoot = component.tplTree;
     return (
       <div>
         <GridFramesLayout
@@ -233,18 +235,21 @@ export const ComponentArenaLayout = observer(
               return (
                 <GhostFrame
                   tooltip={`Add ${
-                    hasCodeComponentRoot(component)
+                    isTplRootWithCodeComponentVariants(component.tplTree)
                       ? "registered"
                       : "interaction"
                   } variant`}
                   width={framesWidth}
                   height={framesHeight}
                   onClick={() =>
                     studioCtx.changeUnsafe(() =>
-                      hasCodeComponentRoot(component)
+                      isTplCodeComponent(tplRoot)
                         ? studioCtx
                             .siteOps()
-                            .createCodeComponentVariant(component)
+                            .createCodeComponentVariant(
+                              component,
+                              tplRoot.component.name
+                            )
                         : studioCtx.siteOps().createStyleVariant(component)
                     )
                   }

diff --git a/platform/wab/src/wab/client/components/variants/VariantsPanel.tsx b/platform/wab/src/wab/client/components/variants/VariantsPanel.tsx
@@ -49,18 +49,19 @@ import { StudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
 import { ViewCtx } from "@/wab/client/studio-ctx/view-ctx";
 import { testIds } from "@/wab/client/test-helpers/test-ids";
 import { findNonEmptyCombos } from "@/wab/shared/cached-selectors";
+import { isTplRootWithCodeComponentVariants } from "@/wab/shared/code-components/variants";
 import { ensure, ensureInstance, partitions, spawn } from "@/wab/shared/common";
 import {
   allComponentStyleVariants,
   allStyleOrCodeComponentVariants,
   getSuperComponents,
-  hasCodeComponentRoot,
   isPageComponent,
 } from "@/wab/shared/core/components";
 import {
   isGlobalVariantGroupUsedInSplits,
   isVariantUsedInSplits,
 } from "@/wab/shared/core/splits";
+import { isTplCodeComponent } from "@/wab/shared/core/tpls";
 import { ScreenSizeSpec } from "@/wab/shared/css-size";
 import {
   Component,
@@ -316,6 +317,8 @@ export const VariantsPanel = observer(
         return success();
       });
 
+    const tplRoot = component.tplTree;
+
     return (
       <div
         className="pass-through"
@@ -494,22 +497,25 @@ export const VariantsPanel = observer(
                   showIcon
                   icon={<Icon icon={BoltIcon} />}
                   title={
-                    hasCodeComponentRoot(component)
+                    isTplRootWithCodeComponentVariants(tplRoot)
                       ? "Registered Variants"
                       : "Interaction Variants"
                   }
                   emptyAddButtonText="Add variant"
                   emptyAddButtonTooltip={
-                    hasCodeComponentRoot(component)
+                    isTplRootWithCodeComponentVariants(tplRoot)
                       ? "Registered variants are registered in code component meta"
                       : "Interaction variants are automatically activated when the user interacts with the component -- by hovering, focusing, pressing, etc."
                   }
                   onAddNewVariant={() =>
                     studioCtx.change(({ success }) => {
-                      hasCodeComponentRoot(component)
+                      isTplCodeComponent(tplRoot)
                         ? studioCtx
                             .siteOps()
-                            .createCodeComponentVariant(component)
+                            .createCodeComponentVariant(
+                              component,
+                              tplRoot.component.name
+                            )
                         : studioCtx.siteOps().createStyleVariant(component);
                       return success();
                     })

diff --git a/platform/wab/src/wab/shared/core/components.ts b/platform/wab/src/wab/shared/core/components.ts
@@ -209,16 +209,6 @@ export interface CodeComponent extends Component {
   _meta?: ComponentRegistration<any> /* Unset when DEVFLAGS.ccStubs is set */;
 }
 
-export interface ComponentWithCodeComponentRoot extends Component {
-  tplTree: Tpls.TplCodeComponent;
-}
-
-export function hasCodeComponentRoot(
-  component: Component
-): component is ComponentWithCodeComponentRoot {
-  return Tpls.isTplCodeComponent(component.tplTree);
-}
-
 export function groupComponents(components: Component[]) {
   return {
     components: components.filter((it) => !isPageComponent(it) && it.name),
@@ -271,6 +261,7 @@ function mkRawComponent(props: Omit<ComponentParams, "uuid">) {
   }
   return component;
 }
+
 /**
  * If variants includes the base variant, it must be at index 0.  If it doesn't
  * include the base variant, a base variant will be automatically inserted at