feat(wab): Create code component variant type in code

Change-Id: I28114cd39ed5ac443d3e1c86911ae6106d08c78e GitOrigin-RevId: 4ce0868b19a30583413fbc5bfadcc101b8e79137
plasmicapp · Dec 13, 2024 · a67b663 · a67b663
1 parent c84b69f
commit a67b663
Show file tree

Hide file tree

Showing 23 changed files with 133,214 additions and 73,465 deletions.
diff --git a/platform/wab/src/wab/client/components/VariantControls.tsx b/platform/wab/src/wab/client/components/VariantControls.tsx
@@ -1,7 +1,6 @@
 import {
   Selector,
   SelectorsInput,
-  selectorsToVariantSelectors,
   SelectorTags,
   styleVariantToSelectors,
 } from "@/wab/client/components/sidebar/RuleSetControls";
@@ -19,10 +18,13 @@ import { VARIANT_CAP, VARIANT_LOWER } from "@/wab/shared/Labels";
 import { Component, isKnownTplTag, Variant } from "@/wab/shared/model/classes";
 import {
   isBaseVariant,
+  isCodeComponentVariant,
   isGlobalVariant,
   isPrivateStyleVariant,
+  isRegisteredVariant,
   isStyleVariant,
   makeVariantName,
+  RegisteredVariant,
   StyleVariant,
 } from "@/wab/shared/Variants";
 import { Menu } from "antd";
@@ -90,7 +92,7 @@ const VariantLabel_: ForwardRefRenderFunction<
     <EditableLabel
       ref={ref}
       value={variantName}
-      disabled={isBaseVariant(variant) || isStyleVariant(variant)}
+      disabled={isBaseVariant(variant) || isRegisteredVariant(variant)}
       onEdit={_onRename}
       defaultEditing={defaultEditing}
       programmaticallyTriggered={programmaticallyTriggered}
@@ -125,7 +127,7 @@ export function makeCanvasVariantContextMenu({
   return (
     <Menu>
       <Menu.Item onClick={onRequestEditing}>
-        {isStyleVariant(variant)
+        {isRegisteredVariant(variant)
           ? `Change ${VARIANT_LOWER} selectors`
           : `Rename ${VARIANT_LOWER}`}
       </Menu.Item>
@@ -161,9 +163,25 @@ export const StyleVariantEditor = observer(function StyleVariantEditor_({
   const maybeSubmit = async (opts?: { force?: boolean }) => {
     if (chosenSelectors.length || opts?.force) {
       return studioCtx.changeUnsafe(() => {
-        variant.selectors = selectorsToVariantSelectors(chosenSelectors);
+        if (isTplCodeComponent(component.tplTree)) {
+          variant.codeComponentVariantKeys = chosenSelectors
+            .filter((sel) => sel.type === "CodeComponentSelector")
+            .map((sel) => sel.key);
+        } else {
+          variant.selectors = chosenSelectors
+            .filter((sel) => sel.type === "CssSelector")
+            .map((sel) => sel.cssSelector);
+        }
         onDismiss?.();
 
+        if (
+          isCodeComponentVariant(variant) &&
+          variant.codeComponentVariantKeys?.length === 0
+        ) {
+          spawn(studioCtx.siteOps().removeVariant(component, variant));
+          return;
+        }
+
         if (isStyleVariant(variant) && variant.selectors?.length === 0) {
           spawn(studioCtx.siteOps().removeVariant(component, variant));
         }
@@ -227,7 +245,7 @@ export const StyleVariantLabel = observer(forwardRef(StyleVariantLabel_));
 function StyleVariantLabel_(
   props: {
     defaultEditing?: boolean;
-    variant: StyleVariant;
+    variant: RegisteredVariant;
     forTag: string;
     onSelectorsChange: (selectors: Selector[]) => void;
     onBlur?: () => void;
@@ -261,7 +279,10 @@ function StyleVariantLabel_(
         render={({ editing, onStart, onDone }) =>
           !editing ? (
             <div onDoubleClick={onStart}>
-              <SelectorTags selectors={selectors} />
+              <SelectorTags
+                isCodeComponent={isTplCodeComponent(tplRoot)}
+                selectors={selectors}
+              />
             </div>
           ) : (
             <SelectorsInput

diff --git a/platform/wab/src/wab/client/components/canvas/CanvasFrame/CanvasHeader.tsx b/platform/wab/src/wab/client/components/canvas/CanvasFrame/CanvasHeader.tsx
@@ -24,7 +24,7 @@ import {
 } from "@/wab/shared/Arenas";
 import {
   getDisplayVariants,
-  isStyleVariant,
+  isRegisteredVariant,
   StyleVariant,
 } from "@/wab/shared/Variants";
 import { cx } from "@/wab/shared/common";
@@ -215,7 +215,7 @@ export const VariantName = observer(function VariantName_({
             variant,
             component,
             onRequestEditing: () => {
-              if (isStyleVariant(variant)) {
+              if (isRegisteredVariant(variant)) {
                 setShowStyleVariantEditor(true);
               } else {
                 variantLabelRef.current?.setEditing(true);
@@ -226,7 +226,7 @@ export const VariantName = observer(function VariantName_({
       }}
     >
       <MaybeWrap
-        cond={isStyleVariant(variant)}
+        cond={isRegisteredVariant(variant)}
         wrapper={(children) => (
           <Popover
             placement="left"

diff --git a/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantBadge.tsx b/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantBadge.tsx
@@ -12,7 +12,7 @@ import {
 } from "@/wab/client/plasmic/plasmic_kit_variants_bar/PlasmicVariantBadge";
 import { useStudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
 import { MaybeWrap } from "@/wab/commons/components/ReactUtil";
-import { isStyleVariant, StyleVariant } from "@/wab/shared/Variants";
+import { isRegisteredVariant, StyleVariant } from "@/wab/shared/Variants";
 import { Component, Variant } from "@/wab/shared/model/classes";
 import { Popover } from "antd";
 import { observer } from "mobx-react";
@@ -41,7 +41,7 @@ const VariantBadge = observer(function VariantBadge_({
 
   useLayoutEffect(() => {
     if (studioCtx.latestVariantCreated === variant) {
-      if (isStyleVariant(variant)) {
+      if (isRegisteredVariant(variant)) {
         setShowStyleVariantEditor(true);
       } else {
         variantLabelRef.current?.setEditing(true);
@@ -68,7 +68,7 @@ const VariantBadge = observer(function VariantBadge_({
               variant,
               component,
               onRequestEditing: () => {
-                if (isStyleVariant(variant)) {
+                if (isRegisteredVariant(variant)) {
                   setShowStyleVariantEditor(true);
                 } else {
                   variantLabelRef.current?.setEditing(true);
@@ -86,7 +86,7 @@ const VariantBadge = observer(function VariantBadge_({
       }}
     >
       <MaybeWrap
-        cond={isStyleVariant(variant)}
+        cond={isRegisteredVariant(variant)}
         wrapper={(children) => (
           <Popover
             placement="left"

diff --git a/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantsDrawer.tsx b/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantsDrawer.tsx
@@ -11,13 +11,13 @@ import {
   PlasmicVariantsDrawer,
 } from "@/wab/client/plasmic/plasmic_kit_variants_bar/PlasmicVariantsDrawer";
 import { useStudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
-import { isCodeComponentVariant } from "@/wab/shared/code-components/variants";
 import { mod, partitions, spawn, xGroupBy } from "@/wab/shared/common";
 import { isTplTag } from "@/wab/shared/core/tpls";
 import { VARIANTS_LOWER } from "@/wab/shared/Labels";
 import { Component, isKnownVariant, Variant } from "@/wab/shared/model/classes";
 import {
   getAllVariantsForTpl,
+  isCodeComponentVariant,
   isComponentStyleVariant,
   isGlobalVariant,
   isPrivateStyleVariant,
@@ -80,17 +80,16 @@ function VariantsDrawer_({
 
   const [query, setQuery] = useState("");
   const matcher = new Matcher(query, { matchMiddleOfWord: true });
-
   const filteredVariants = allVariants.filter((v) => {
     if (
       isScreenVariant(v) &&
       v.parent !== studioCtx.site.activeScreenVariantGroup
     ) {
       return false;
     } else if (isCodeComponentVariant(v)) {
-      return v.selectors?.some(
-        (sel) =>
-          matcher.matches(sel) || matcher.matches(codeComponentVariantsLabel)
+      return v.codeComponentVariantKeys?.some(
+        (key) =>
+          matcher.matches(key) || matcher.matches(codeComponentVariantsLabel)
       );
     } else if (isStyleVariant(v)) {
       return v.selectors?.some(
@@ -258,42 +257,46 @@ function VariantsDrawer_({
       variantsList={{ ref: variantsListRef }}
       {...props}
     >
-      {groupedVariants.map(({ variants, isBase, groupLabel, withDivider }) => (
-        <Fragment key={isBase ? "base" : String(groupLabel)}>
-          <VariantsGroupLabel>{groupLabel}</VariantsGroupLabel>
-          {isBase ? (
-            <VariantRow
-              ref={baseVariantRef}
-              isBase
-              highlight={highlightIndex === 0}
-              onMouseDown={(e) => e.preventDefault()}
-              onClick={handleVariantClick(undefined)}
-              onMouseEnter={handleRowMouseEnter(0)}
-              onMouseLeave={handleRowMouseEnter(-1)}
-            >
-              {baseLabel}
-            </VariantRow>
-          ) : (
-            variants?.map((variant) => (
+      {groupedVariants.map(
+        ({ variants, key, isBase, groupLabel, withDivider }) => (
+          <Fragment key={key}>
+            <VariantsGroupLabel>{groupLabel}</VariantsGroupLabel>
+            {isBase ? (
               <VariantRow
-                key={variant.uuid}
-                ref={getVariantRowRef(variant)}
-                isRecording={targetedVariantsSet.has(variant)}
-                highlight={flattenedVariants[highlightIndex] === variant}
+                ref={baseVariantRef}
+                isBase
+                highlight={highlightIndex === 0}
                 onMouseDown={(e) => e.preventDefault()}
-                onClick={handleVariantClick(variant)}
-                onMouseEnter={handleRowMouseEnter(variantIndices.get(variant)!)}
+                onClick={handleVariantClick(undefined)}
+                onMouseEnter={handleRowMouseEnter(0)}
                 onMouseLeave={handleRowMouseEnter(-1)}
               >
-                {matcher.boldSnippets(getVariantName(variant))}
+                {baseLabel}
               </VariantRow>
-            ))
-          )}
-          {withDivider && (
-            <VariantsSectionDivider className={styles.sectionDivider} />
-          )}
-        </Fragment>
-      ))}
+            ) : (
+              variants?.map((variant) => (
+                <VariantRow
+                  key={variant.uuid}
+                  ref={getVariantRowRef(variant)}
+                  isRecording={targetedVariantsSet.has(variant)}
+                  highlight={flattenedVariants[highlightIndex] === variant}
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={handleVariantClick(variant)}
+                  onMouseEnter={handleRowMouseEnter(
+                    variantIndices.get(variant)!
+                  )}
+                  onMouseLeave={handleRowMouseEnter(-1)}
+                >
+                  {matcher.boldSnippets(getVariantName(variant))}
+                </VariantRow>
+              ))
+            )}
+            {withDivider && (
+              <VariantsSectionDivider className={styles.sectionDivider} />
+            )}
+          </Fragment>
+        )
+      )}
 
       {!shouldShowBase && !groupedVariants.length && (
         <div className={styles.emptyResultsMessage}>
@@ -326,6 +329,7 @@ function useGroupedVariants(
   const groupedVariants = useMemo<
     {
       isBase?: boolean;
+      key: string;
       withDivider?: boolean;
       groupLabel?: React.ReactNode;
       variants?: Variant[];
@@ -335,13 +339,15 @@ function useGroupedVariants(
       [
         {
           show: shouldShowBase,
+          key: "base",
           get withDivider() {
             return groupedVariants.length > 1;
           },
           isBase: true,
         },
         {
           withDivider: true,
+          key: elementInteractionsLabel,
           groupLabel: (
             <>
               {elementInteractionsLabel}
@@ -352,6 +358,7 @@ function useGroupedVariants(
         },
         {
           withDivider: true,
+          key: codeComponentVariantsLabel,
           groupLabel: (
             <>
               {codeComponentVariantsLabel}
@@ -362,6 +369,7 @@ function useGroupedVariants(
         },
         {
           withDivider: true,
+          key: styleVariantsLabel,
           groupLabel: (
             <>
               {styleVariantsLabel}
@@ -371,6 +379,7 @@ function useGroupedVariants(
           variants: shouldShowInteractions ? compStyleVariants : [],
         },
         {
+          key: "standalone variant groups",
           variants: compVariants.filter((it) =>
             isStandaloneVariantGroup(it.parent)
           ),
@@ -387,6 +396,7 @@ function useGroupedVariants(
             (v) => v.parent!
           ).entries(),
         ].map(([group, variants]) => ({
+          key: group.param.variable.name,
           groupLabel: group.param.variable.name,
           variants: variants as Variant[],
         })),

diff --git a/platform/wab/src/wab/client/components/canvas/canvas-rendering.ts b/platform/wab/src/wab/client/components/canvas/canvas-rendering.ts
@@ -92,10 +92,7 @@ import {
   isPlainObjectPropType,
   tryGetStateHelpers,
 } from "@/wab/shared/code-components/code-components";
-import {
-  isTplRootWithCodeComponentVariants,
-  withoutCodeComponentVariantPrefix,
-} from "@/wab/shared/code-components/variants";
+import { isTplRootWithCodeComponentVariants } from "@/wab/shared/code-components/variants";
 import { toReactAttr } from "@/wab/shared/codegen/image-assets";
 import { makeCssClassNameForVariantCombo } from "@/wab/shared/codegen/react-p/class-names";
 import { nodeNameBackwardsCompatibility } from "@/wab/shared/codegen/react-p/constants";
@@ -730,9 +727,7 @@ const mkTriggers = computedFn(
 
               // Non-interactive registered variants (like Button CC's disabled) do no harm to rich-text editing and can be applied in non-interactive mode
               return variant.selectors.reduce(
-                (prev, key) =>
-                  prev &&
-                  ctx.$ccVariants[withoutCodeComponentVariantPrefix(key)],
+                (prev, key) => prev && ctx.$ccVariants[key],
                 true
               );
             }),

diff --git a/platform/wab/src/wab/client/components/canvas/site-ops.tsx b/platform/wab/src/wab/client/components/canvas/site-ops.tsx
@@ -1607,6 +1607,14 @@ export class SiteOps {
     this.onVariantAdded(variant);
   }
 
+  createCodeComponentVariant(component: Component, codeComponentName: string) {
+    const variant = this.tplMgr.createCodeComponentVariant(
+      component,
+      codeComponentName
+    );
+    this.onVariantAdded(variant);
+  }
+
   createGlobalVariant(group: VariantGroup) {
     assert(isGlobalVariantGroup(group), "Expected a global variant group");
     const variant = this.tplMgr.createGlobalVariant(group);