fix(wab): remaining style variant changes

Change-Id: If9dd67e8cba7b22301ef14e63ce23a2a792e30bf GitOrigin-RevId: c6d1c7f132c45d4576e21d5b3887360b61151988
plasmicapp · Dec 13, 2024 · 2701636 · 2701636
1 parent d0d7fe5
commit 2701636
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 56 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": "error",
+        "@typescript-eslint/switch-exhaustiveness-check": "off",
         "no-shadow": "off",
         "no-extra-boolean-cast": "off",
         "@typescript-eslint/no-shadow": "error",

diff --git a/platform/wab/src/wab/client/__snapshots__/figma.spec.ts.snap b/platform/wab/src/wab/client/__snapshots__/figma.spec.ts.snap
@@ -38846,6 +38846,8 @@ exports[`Figma module tplNodeFromFigmaData convert demo 1`] = `
     },
     "7": {
       "__type": "Variant",
+      "codeComponentName": null,
+      "codeComponentVariantKeys": null,
       "description": null,
       "forTpl": null,
       "mediaQuery": null,
@@ -44758,6 +44760,8 @@ exports[`Figma module tplNodeFromFigmaData convert img 1`] = `
     },
     "4": {
       "__type": "Variant",
+      "codeComponentName": null,
+      "codeComponentVariantKeys": null,
       "description": null,
       "forTpl": null,
       "mediaQuery": null,
@@ -52217,6 +52221,8 @@ Get more done.",
     },
     "5": {
       "__type": "Variant",
+      "codeComponentName": null,
+      "codeComponentVariantKeys": null,
       "description": null,
       "forTpl": null,
       "mediaQuery": null,
@@ -60130,6 +60136,8 @@ exports[`Figma module tplNodeFromFigmaData convert rect 1`] = `
     },
     "3": {
       "__type": "Variant",
+      "codeComponentName": null,
+      "codeComponentVariantKeys": null,
       "description": null,
       "forTpl": null,
       "mediaQuery": null,
@@ -60230,6 +60238,8 @@ exports[`Figma module tplNodeFromFigmaData convert rect2 1`] = `
     },
     "4": {
       "__type": "Variant",
+      "codeComponentName": null,
+      "codeComponentVariantKeys": null,
       "description": null,
       "forTpl": null,
       "mediaQuery": null,
@@ -60850,6 +60860,8 @@ exports[`Figma module tplNodeFromFigmaData convert svg 1`] = `
     },
     "4": {
       "__type": "Variant",
+      "codeComponentName": null,
+      "codeComponentVariantKeys": null,
       "description": null,
       "forTpl": null,
       "mediaQuery": null,

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,15 +21,14 @@ 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,
@@ -162,7 +161,6 @@ export const ComponentArenaLayout = observer(
     );
 
     const vController = makeVariantsController(studioCtx);
-    const tplRoot = component.tplTree;
     return (
       <div>
         <GridFramesLayout
@@ -235,21 +233,18 @@ export const ComponentArenaLayout = observer(
               return (
                 <GhostFrame
                   tooltip={`Add ${
-                    isTplRootWithCodeComponentVariants(component.tplTree)
+                    hasCodeComponentRoot(component)
                       ? "registered"
                       : "interaction"
                   } variant`}
                   width={framesWidth}
                   height={framesHeight}
                   onClick={() =>
                     studioCtx.changeUnsafe(() =>
-                      isTplCodeComponent(tplRoot)
+                      hasCodeComponentRoot(component)
                         ? studioCtx
                             .siteOps()
-                            .createCodeComponentVariant(
-                              component,
-                              tplRoot.component.name
-                            )
+                            .createCodeComponentVariant(component)
                         : 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,19 +49,18 @@ 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,
@@ -317,8 +316,6 @@ export const VariantsPanel = observer(
         return success();
       });
 
-    const tplRoot = component.tplTree;
-
     return (
       <div
         className="pass-through"
@@ -497,25 +494,22 @@ export const VariantsPanel = observer(
                   showIcon
                   icon={<Icon icon={BoltIcon} />}
                   title={
-                    isTplRootWithCodeComponentVariants(tplRoot)
+                    hasCodeComponentRoot(component)
                       ? "Registered Variants"
                       : "Interaction Variants"
                   }
                   emptyAddButtonText="Add variant"
                   emptyAddButtonTooltip={
-                    isTplRootWithCodeComponentVariants(tplRoot)
+                    hasCodeComponentRoot(component)
                       ? "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 }) => {
-                      isTplCodeComponent(tplRoot)
+                      hasCodeComponentRoot(component)
                         ? studioCtx
                             .siteOps()
-                            .createCodeComponentVariant(
-                              component,
-                              tplRoot.component.name
-                            )
+                            .createCodeComponentVariant(component)
                         : studioCtx.siteOps().createStyleVariant(component);
                       return success();
                     })

diff --git a/platform/wab/src/wab/shared/TplMgr.ts b/platform/wab/src/wab/shared/TplMgr.ts
@@ -46,7 +46,7 @@ import {
   getBaseVariant,
   getPartitionedScreenVariants,
   hasScreenVariant,
-  hasStyleVariant,
+  hasStyleOrCodeComponentVariant,
   isBaseVariant,
   isCodeComponentVariant,
   isGlobalVariant,
@@ -2562,7 +2562,8 @@ export class TplMgr {
     }[] = [];
 
     const isScreenOrStyleVS = (vs: VariantSetting) =>
-      hasScreenVariant(vs.variants) || hasStyleVariant(vs.variants);
+      hasScreenVariant(vs.variants) ||
+      hasStyleOrCodeComponentVariant(vs.variants);
 
     for (const component of this.site().components) {
       for (const tpl of flattenComponent(component)) {

diff --git a/platform/wab/src/wab/shared/TplQuery.ts b/platform/wab/src/wab/shared/TplQuery.ts
@@ -19,7 +19,7 @@ import {
   tryRemove,
 } from "@/wab/shared/common";
 import {
-  allStyleVariants,
+  allStyleOrCodeComponentVariants,
   isCodeComponent,
   removeComponentParam,
 } from "@/wab/shared/core/components";
@@ -387,7 +387,7 @@ export class TplQuery {
 
     if (isTplVariantable(node)) {
       // Remove private variants referencing this node
-      const privateVariants = allStyleVariants(component).filter(
+      const privateVariants = allStyleOrCodeComponentVariants(component).filter(
         (v) =>
           v.forTpl &&
           $$$(v.forTpl).ancestors().toArrayOfTplNodes().includes(node)

diff --git a/platform/wab/src/wab/shared/Variants.ts b/platform/wab/src/wab/shared/Variants.ts
@@ -272,9 +272,18 @@ export function isMaybeInteractiveCodeComponentVariant(
   );
 }
 
-// TODO: Check if this is still needed / check usages
-export function hasStyleVariant(variantCombo: VariantCombo) {
-  return variantCombo.some((v) => isStyleVariant(v));
+export function getStyleOrCodeComponentVariantIdentifierName(
+  variant: StyleOrCodeComponentVariant
+) {
+  if (isCodeComponentVariant(variant)) {
+    return "codeComponentVariantKeys";
+  } else {
+    return "selectors";
+  }
+}
+
+export function hasStyleOrCodeComponentVariant(variantCombo: VariantCombo) {
+  return variantCombo.some(isStyleOrCodeComponentVariant);
 }
 
 export function tryGetPrivateStyleVariant(variantCombo: VariantCombo) {
@@ -778,7 +787,6 @@ export function isValidComboForToken(combo: VariantCombo) {
 /**
  * Return style variants whose selectors are all active
  */
-// TODO: Change for registered variants
 export function getImplicitlyActivatedStyleVariants(
   variants: Variant[],
   activeVariants: Set<Variant>,
@@ -788,7 +796,7 @@ export function getImplicitlyActivatedStyleVariants(
   const activePrivateSelectors = new Set<string>();
 
   for (const variant of activeVariants) {
-    if (!isStyleVariant(variant)) {
+    if (!isStyleOrCodeComponentVariant(variant)) {
       continue;
     }
 
@@ -805,7 +813,7 @@ export function getImplicitlyActivatedStyleVariants(
 
   const newActivatedVariants = new Set<Variant>();
   for (const variant of variants) {
-    if (!isStyleVariant(variant)) {
+    if (!isStyleOrCodeComponentVariant(variant)) {
       continue;
     }
     if (

diff --git a/platform/wab/src/wab/shared/codegen/react-p/utils.ts b/platform/wab/src/wab/shared/codegen/react-p/utils.ts
@@ -51,7 +51,7 @@ import { PlumeType } from "@/wab/shared/plume/plume-registry";
 import { sortedVariantSettings } from "@/wab/shared/variant-sort";
 import { VariantedStylesHelper } from "@/wab/shared/VariantedStylesHelper";
 import {
-  hasStyleVariant,
+  hasStyleOrCodeComponentVariant,
   isActiveVariantSetting,
   isBaseVariant,
   isStyleVariant,
@@ -166,7 +166,7 @@ export function getOrderedExplicitVSettings(
   const res = vsettings.filter(
     (vs) =>
       shouldGenVariantSetting(ctx, vs) &&
-      (!hasStyleVariant(vs.variants) ||
+      (!hasStyleOrCodeComponentVariant(vs.variants) ||
         shouldGenReactHook(vs, ctx.component) ||
         isTplRootWithCodeComponentVariants(ctx.component.tplTree))
   );