From 33342be40080942b0619488a6d2c254ed12afee3 Mon Sep 17 00:00:00 2001 From: sarah Date: Tue, 10 Dec 2024 11:23:39 +0500 Subject: [PATCH] fix(wab): replace isStyleVariant with isCodeComponentOrStyleVariant Change-Id: Icc09e8ab03c19f9d765ad08c501cc2f772eb085b GitOrigin-RevId: d52420b8fb4c11470278b0c8169fb7474711b574 --- .../wab/client/ProjectDependencyManager.ts | 22 +- .../wab/client/components/VariantControls.tsx | 14 +- .../canvas/CanvasFrame/CanvasHeader.tsx | 6 +- .../canvas/VariantsBar/VariantBadge.tsx | 11 +- .../components/canvas/canvas-rendering.ts | 4 +- .../wab/client/components/canvas/site-ops.tsx | 16 +- .../private-style-variants-section.tsx | 2 +- .../components/sidebar/RuleSetControls.tsx | 4 +- .../studio/arenas/ComponentArenaLayout.tsx | 4 +- .../style-controls/DefinedIndicator.tsx | 15 +- .../style-controls/OutlineControls.tsx | 11 +- .../top-bar/VariantsComboSelect.tsx | 4 +- .../components/top-bar/VariantsMenu.tsx | 6 +- .../components/variants/VariantSection.tsx | 4 +- .../components/variants/VariantsController.ts | 4 +- .../components/variants/VariantsDrawer.tsx | 286 ------------------ .../variants/VariantsDrawerHeader.tsx | 42 --- .../components/variants/VariantsDrawerRow.tsx | 97 ------ .../components/variants/VariantsPanel.tsx | 20 +- platform/wab/src/wab/shared/PinManager.ts | 12 +- platform/wab/src/wab/shared/TplMgr.ts | 10 +- platform/wab/src/wab/shared/Variants.ts | 34 ++- .../wab/src/wab/shared/cached-selectors.ts | 5 + .../src/wab/shared/core/components.spec.ts | 1 + .../wab/src/wab/shared/core/components.ts | 15 +- platform/wab/src/wab/shared/core/styles.ts | 3 +- .../src/wab/shared/model/model-change-util.ts | 39 +-- .../shared/site-diffs/__tests__/merge.spec.ts | 1 + .../wab/src/wab/shared/site-invariants.ts | 4 +- .../wab/src/wab/shared/variant-sort.spec.ts | 15 +- platform/wab/src/wab/shared/variant-sort.ts | 17 +- 31 files changed, 170 insertions(+), 558 deletions(-) delete mode 100644 platform/wab/src/wab/client/components/variants/VariantsDrawer.tsx delete mode 100644 platform/wab/src/wab/client/components/variants/VariantsDrawerHeader.tsx delete mode 100644 platform/wab/src/wab/client/components/variants/VariantsDrawerRow.tsx diff --git a/platform/wab/src/wab/client/ProjectDependencyManager.ts b/platform/wab/src/wab/client/ProjectDependencyManager.ts index 385bf635e52..cdcf9f163f3 100644 --- a/platform/wab/src/wab/client/ProjectDependencyManager.ts +++ b/platform/wab/src/wab/client/ProjectDependencyManager.ts @@ -113,17 +113,17 @@ export class ProjectDependencyManager { }); // We no longer plan to make any updates to plume site. So its unnecessary to re-fetch it if it has already been fetched. - if (!this.plumeSite) { - const bundler = new FastBundler(); - // Get Plume site - const plumePkg = await this._sc.appCtx.api.getPlumePkg(); - const plumeSite = unbundleProjectDependency( - bundler, - plumePkg.pkg, - plumePkg.depPkgs - ).projectDependency.site; - this.plumeSite = this.inlineAssets(plumeSite); - } + // if (!this.plumeSite) { + // const bundler = new FastBundler(); + // // Get Plume site + // const plumePkg = await this._sc.appCtx.api.getPlumePkg(); + // const plumeSite = unbundleProjectDependency( + // bundler, + // plumePkg.pkg, + // plumePkg.depPkgs + // ).projectDependency.site; + // this.plumeSite = this.inlineAssets(plumeSite); + // } } /** diff --git a/platform/wab/src/wab/client/components/VariantControls.tsx b/platform/wab/src/wab/client/components/VariantControls.tsx index 2ffb0736042..d93cecbf576 100644 --- a/platform/wab/src/wab/client/components/VariantControls.tsx +++ b/platform/wab/src/wab/client/components/VariantControls.tsx @@ -18,14 +18,14 @@ import { isTplCodeComponent, isTplTag } from "@/wab/shared/core/tpls"; import { VARIANT_CAP, VARIANT_LOWER } from "@/wab/shared/Labels"; import { Component, isKnownTplTag, Variant } from "@/wab/shared/model/classes"; import { + CodeComponentOrStyleVariant, isBaseVariant, + isCodeComponentOrStyleVariant, isCodeComponentVariant, isGlobalVariant, isPrivateStyleVariant, - isRegisteredVariant, isStyleVariant, makeVariantName, - RegisteredVariant, StyleVariant, } from "@/wab/shared/Variants"; import { Menu } from "antd"; @@ -93,7 +93,9 @@ const VariantLabel_: ForwardRefRenderFunction< - {isRegisteredVariant(variant) + {isCodeComponentOrStyleVariant(variant) ? `Change ${VARIANT_LOWER} selectors` : `Rename ${VARIANT_LOWER}`} @@ -175,7 +177,7 @@ export const StyleVariantEditor = observer(function StyleVariantEditor_({ if ( (isCodeComponentVariant(variant) && variant.codeComponentVariantKeys?.length === 0) || - (isStyleVariant(variant) && variant.selectors?.length === 0) + (isStyleVariant(variant) && variant.selectors.length === 0) ) { spawn(studioCtx.siteOps().removeVariant(component, variant)); } @@ -239,7 +241,7 @@ export const StyleVariantLabel = observer(forwardRef(StyleVariantLabel_)); function StyleVariantLabel_( props: { defaultEditing?: boolean; - variant: RegisteredVariant; + variant: CodeComponentOrStyleVariant; forTag: string; onSelectorsChange: (selectors: Selector[]) => void; onBlur?: () => void; diff --git a/platform/wab/src/wab/client/components/canvas/CanvasFrame/CanvasHeader.tsx b/platform/wab/src/wab/client/components/canvas/CanvasFrame/CanvasHeader.tsx index 2da0a1fc0e7..47cf9023f74 100644 --- 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, - isRegisteredVariant, + isCodeComponentOrStyleVariant, 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 (isRegisteredVariant(variant)) { + if (isCodeComponentOrStyleVariant(variant)) { setShowStyleVariantEditor(true); } else { variantLabelRef.current?.setEditing(true); @@ -226,7 +226,7 @@ export const VariantName = observer(function VariantName_({ }} > ( { if (studioCtx.latestVariantCreated === variant) { - if (isRegisteredVariant(variant)) { + if (isCodeComponentOrStyleVariant(variant)) { setShowStyleVariantEditor(true); } else { variantLabelRef.current?.setEditing(true); @@ -68,7 +71,7 @@ const VariantBadge = observer(function VariantBadge_({ variant, component, onRequestEditing: () => { - if (isRegisteredVariant(variant)) { + if (isCodeComponentOrStyleVariant(variant)) { setShowStyleVariantEditor(true); } else { variantLabelRef.current?.setEditing(true); @@ -86,7 +89,7 @@ const VariantBadge = observer(function VariantBadge_({ }} > ( { - if (!isRegisteredVariant(variant)) { + if (!isCodeComponentOrStyleVariant(variant)) { return false; } // We include the style variants dynamically here to handle changes that require JS diff --git a/platform/wab/src/wab/client/components/canvas/site-ops.tsx b/platform/wab/src/wab/client/components/canvas/site-ops.tsx index 38839e8f936..9c651133ecb 100644 --- a/platform/wab/src/wab/client/components/canvas/site-ops.tsx +++ b/platform/wab/src/wab/client/components/canvas/site-ops.tsx @@ -48,7 +48,6 @@ import { isGlobalVariantGroup, isScreenVariantGroup, isStandaloneVariantGroup, - isStyleVariant, makeVariantName, removeTplVariantSettings, removeTplVariantSettingsContaining, @@ -567,9 +566,7 @@ export class SiteOps { ) { const usingComps = !component ? findComponentsUsingGlobalVariant(this.site, variant) - : !isStyleVariant(variant) - ? findComponentsUsingComponentVariant(this.site, component, variant) - : new Set(); + : findComponentsUsingComponentVariant(this.site, component, variant); if (opts.confirm === "always" || usingComps.size > 0) { return await reactConfirm({ title: ( @@ -1399,9 +1396,7 @@ export class SiteOps { await this.studioCtx.changeObserved( () => { return Array.from( - !isStyleVariant(variant) - ? findComponentsUsingComponentVariant(this.site, component, variant) - : new Set() + findComponentsUsingComponentVariant(this.site, component, variant) ); }, ({ success }) => { @@ -1494,11 +1489,14 @@ export class SiteOps { ); } - removeRegisteredVariantIfEmptyAndUnused( + removeCodeComponentOrStyleVariantIfEmptyAndUnused( component: Component, variant: Variant ) { - this.tplMgr.removeRegisteredVariantIfEmptyAndUnused(component, variant); + this.tplMgr.removeCodeComponentOrStyleVariantIfEmptyAndUnused( + component, + variant + ); this.studioCtx.ensureComponentStackFramesHasOnlyValidVariants(component); this.studioCtx.pruneInvalidViewCtxs(); } diff --git a/platform/wab/src/wab/client/components/sidebar-tabs/private-style-variants-section.tsx b/platform/wab/src/wab/client/components/sidebar-tabs/private-style-variants-section.tsx index 2a4c772f9a6..547d5de7195 100644 --- a/platform/wab/src/wab/client/components/sidebar-tabs/private-style-variants-section.tsx +++ b/platform/wab/src/wab/client/components/sidebar-tabs/private-style-variants-section.tsx @@ -144,7 +144,7 @@ export const PrivateStyleVariantsPanel = observer( studioCtx.changeUnsafe(() => { studioCtx .siteOps() - .removeRegisteredVariantIfEmptyAndUnused( + .removeCodeComponentOrStyleVariantIfEmptyAndUnused( component, variant ); diff --git a/platform/wab/src/wab/client/components/sidebar/RuleSetControls.tsx b/platform/wab/src/wab/client/components/sidebar/RuleSetControls.tsx index 0306f867044..ab101d2e683 100644 --- a/platform/wab/src/wab/client/components/sidebar/RuleSetControls.tsx +++ b/platform/wab/src/wab/client/components/sidebar/RuleSetControls.tsx @@ -9,9 +9,9 @@ import { } from "@/wab/shared/core/styles"; import { Site } from "@/wab/shared/model/classes"; import { + CodeComponentOrStyleVariant, isCodeComponentVariant, isStyleVariant, - RegisteredVariant, } from "@/wab/shared/Variants"; import { Tooltip } from "antd"; import { default as React, useLayoutEffect, useState } from "react"; @@ -87,7 +87,7 @@ function areSelectorsEqual(a: Selector, b: Selector) { * TODO: write migration so code components use key, presets use selector */ export function styleVariantToSelectors( - variant: RegisteredVariant, + variant: CodeComponentOrStyleVariant, site: Site ): Selector[] { if (isCodeComponentVariant(variant)) { diff --git a/platform/wab/src/wab/client/components/studio/arenas/ComponentArenaLayout.tsx b/platform/wab/src/wab/client/components/studio/arenas/ComponentArenaLayout.tsx index 9fb2a3bd6b1..ec66a82a6ea 100644 --- a/platform/wab/src/wab/client/components/studio/arenas/ComponentArenaLayout.tsx +++ b/platform/wab/src/wab/client/components/studio/arenas/ComponentArenaLayout.tsx @@ -50,7 +50,7 @@ import { } from "@/wab/shared/model/classes"; import { VariantOptionsType } from "@/wab/shared/TplMgr"; import { - canHaveRegisteredVariant, + canHaveCodeComponentOrStyleVariant, isGlobalVariantGroup, isScreenVariantGroup, isStandaloneVariantGroup, @@ -229,7 +229,7 @@ export const ComponentArenaLayout = observer( rowEndControls={(row) => { const group = ensureMaybeKnownVariantGroup(row.rowKey); if (!group) { - if (!canHaveRegisteredVariant(component)) { + if (!canHaveCodeComponentOrStyleVariant(component)) { return null; } return ( diff --git a/platform/wab/src/wab/client/components/style-controls/DefinedIndicator.tsx b/platform/wab/src/wab/client/components/style-controls/DefinedIndicator.tsx index cf89abe08b6..b6fe2fb1db3 100644 --- a/platform/wab/src/wab/client/components/style-controls/DefinedIndicator.tsx +++ b/platform/wab/src/wab/client/components/style-controls/DefinedIndicator.tsx @@ -69,6 +69,7 @@ import { VariantedStylesHelper } from "@/wab/shared/VariantedStylesHelper"; import { clearVariantSetting, isBaseVariant, + isCodeComponentVariant, isDefaultIgnorableStyleValue, isGlobalVariant, isPrivateStyleVariant, @@ -93,12 +94,16 @@ export const variantComboName = (combo: VariantCombo) => { return `element:${ensure( variant.selectors, "style variants have selectors" - ).join(":")}`; + ).join(", ")}`; } else if (isStyleVariant(variant)) { - return `:${ensure( - variant.selectors, - "style variants have selectors" - ).join(":")}`; + return `${ensure(variant.selectors, "style variants have selectors").join( + ", " + )}`; + } else if (isCodeComponentVariant(variant)) { + return `${ensure( + variant.codeComponentVariantKeys, + "code component variants have keys" + ).join(", ")}`; } else if (isBaseVariant(variant)) { return "Base"; } else { diff --git a/platform/wab/src/wab/client/components/style-controls/OutlineControls.tsx b/platform/wab/src/wab/client/components/style-controls/OutlineControls.tsx index c78e54295ec..4b0bac7e0d2 100644 --- a/platform/wab/src/wab/client/components/style-controls/OutlineControls.tsx +++ b/platform/wab/src/wab/client/components/style-controls/OutlineControls.tsx @@ -13,7 +13,7 @@ import MinusIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Minus"; import PlusIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Plus"; import { StandardMarkdown } from "@/wab/client/utils/StandardMarkdown"; import { TokenType } from "@/wab/commons/StyleToken"; -import { hasStyleVariant } from "@/wab/shared/Variants"; +import { isCodeComponentOrStyleVariant } from "@/wab/shared/Variants"; import { ensure } from "@/wab/shared/common"; import { Alert } from "antd"; import { observer } from "mobx-react"; @@ -48,9 +48,10 @@ export const OutlinePanelSection = observer(function OutlinePanelSection() { studioCtx.focusedViewCtx(), "Expected view ctx to exist" ); - const isStyleVariantTargeted = hasStyleVariant( - viewCtx.variantTplMgr().getCurrentVariantCombo() - ); + const isCodeComponentOrStyleVariantTargeted = viewCtx + .variantTplMgr() + .getCurrentVariantCombo() + .some(isCodeComponentOrStyleVariant); const onClick = async () => { if (isVisible) { @@ -83,7 +84,7 @@ export const OutlinePanelSection = observer(function OutlinePanelSection() { > {isVisible && ( <> - {!isStyleVariantTargeted && ( + {!isCodeComponentOrStyleVariantTargeted && ( - !isRegisteredVariant(v) && + !isCodeComponentOrStyleVariant(v) && !isScreenVariant(v) && !isPrivateStyleVariant(v) && !isBaseVariant(v) diff --git a/platform/wab/src/wab/client/components/top-bar/VariantsMenu.tsx b/platform/wab/src/wab/client/components/top-bar/VariantsMenu.tsx index ec6f4b2e495..fc9f799d88c 100644 --- a/platform/wab/src/wab/client/components/top-bar/VariantsMenu.tsx +++ b/platform/wab/src/wab/client/components/top-bar/VariantsMenu.tsx @@ -14,9 +14,8 @@ import { VARIANTS_LOWER } from "@/wab/shared/Labels"; import { getAllVariantsForTpl, isBaseVariant, - isPrivateStyleVariant, + isCodeComponentOrStyleVariant, isScreenVariant, - isStyleVariant, } from "@/wab/shared/Variants"; import { observer } from "mobx-react"; import * as React from "react"; @@ -148,9 +147,8 @@ function VariantsMenu_({ site: studioCtx.site, }).filter( (v) => - !isStyleVariant(v) && + !isCodeComponentOrStyleVariant(v) && !isScreenVariant(v) && - !isPrivateStyleVariant(v) && !isBaseVariant(v) && uuidSet.has(v.uuid) ); diff --git a/platform/wab/src/wab/client/components/variants/VariantSection.tsx b/platform/wab/src/wab/client/components/variants/VariantSection.tsx index 2a6a3909289..fcbddab7630 100644 --- a/platform/wab/src/wab/client/components/variants/VariantSection.tsx +++ b/platform/wab/src/wab/client/components/variants/VariantSection.tsx @@ -15,7 +15,7 @@ import { } from "@/wab/client/plasmic/plasmic_kit_variants/PlasmicVariantSection"; import { StudioCtx } from "@/wab/client/studio-ctx/StudioCtx"; import { ViewCtx } from "@/wab/client/studio-ctx/view-ctx"; -import { isStyleVariant } from "@/wab/shared/Variants"; +import { isCodeComponentOrStyleVariant } from "@/wab/shared/Variants"; import { spawn } from "@/wab/shared/common"; import { isTplCodeComponent } from "@/wab/shared/core/tpls"; import { Component, Variant } from "@/wab/shared/model/classes"; @@ -183,7 +183,7 @@ export function makeReadOnlySection(opts: { : undefined } label={ - isStyleVariant(variant) ? ( + isCodeComponentOrStyleVariant(variant) ? ( (null); - const component = viewCtx.currentComponent(); - const allVariants = getAllVariantsForTpl({ - component, - tpl: viewCtx.focusedTpl(), - site: viewCtx.site, - includeSuperVariants: true, - }); - - const [query, setQuery] = React.useState(""); - const matcher = new Matcher(query); - const filteredVariants = allVariants.filter((v) => { - if ( - isScreenVariant(v) && - v.parent !== viewCtx.site.activeScreenVariantGroup - ) { - return false; - } else if (isStyleVariant(v)) { - return ensure(v.selectors).some((sel) => matcher.matches(sel)); - } else { - return matcher.matches(v.name); - } - }); - - const groupToSuperComp = getSuperComponentVariantGroupToComponent(component); - - const [ - privateStyleVariants, - compStyleVariants, - compVariants, - globalVariants, - ] = partitions(filteredVariants, [ - isPrivateStyleVariant, - isComponentStyleVariant, - (v) => !isGlobalVariant(v), - ]); - - const makeGroupName = (group: VariantGroup) => { - const superComp = ensure(groupToSuperComp.get(group)); - if (superComp) { - return `${getNamespacedComponentName(superComp)} - ${ - group.param.variable.name - }`; - } else { - return group.param.variable.name; - } - }; - - const makeVariantRow = (variant: Variant) => ( -
  • - - viewCtx.change(() => vcontroller?.onTargetVariant(variant, target)) - } - onToggle={() => - viewCtx.change(() => vcontroller?.onToggleVariant(variant)) - } - focusedTpl={viewCtx.focusedTpl() ?? undefined} - superComp={ - variant.parent ? groupToSuperComp.get(variant.parent) : undefined - } - /> -
    • - ); - - const { - highlightedIndex, - getInputProps, - getItemProps, - getComboboxProps, - getMenuProps, - setHighlightedIndex, - } = useCombobox({ - isOpen: true, - defaultIsOpen: true, - items: filteredVariants, - selectedItem: null, - itemToString: (variant) => variant?.uuid ?? "", - onInputValueChange: ({ inputValue }) => { - setQuery(inputValue ?? ""); - }, - onSelectedItemChange: ({ selectedItem }) => { - viewCtx.change(() => { - if (selectedItem) { - vcontroller?.onClickVariant(selectedItem); - } - viewCtx.studioCtx.setShowVariantsDrawer(false); - }); - }, - }); - - const groupedCompVariants = useMemo( - () => [...xGroupBy(compVariants, (v) => ensure(v.parent)).entries()], - [compVariants] - ); - - return ( - - { - e.stopPropagation(); - - // We install a key handler at root, to handle case where - // focus has left the textbox, but we still want to - // be able to keyboard-navigate around - if (e.key === "ArrowDown") { - if (highlightedIndex >= 0) { - setHighlightedIndex(highlightedIndex + 1); - } else { - setHighlightedIndex(0); - } - inputRef.current && inputRef.current.focus(); - } else if (e.key === "ArrowUp") { - if (highlightedIndex >= 0) { - setHighlightedIndex(highlightedIndex - 1); - } else { - setHighlightedIndex(0); - } - inputRef.current && inputRef.current.focus(); - } else if (e.key.length === 1) { - inputRef.current && inputRef.current.focus(); - } - }, - "data-test-id": "variants-drawer", - } as any - } - searchContainer={{ - ...getComboboxProps(), - }} - searchbox={{ - ...getInputProps({ - placeholder: "Select a variant", - autoFocus: true, - refKey: "ref", - onBlur: (e) => { - (e.nativeEvent as any).preventDownshiftDefault = true; - }, - value: query, - ref: inputRef as any, - }), - }} - optionsContainer={{ - ...getMenuProps({ - "aria-label": "Select variant", - }), - - style: { - maxHeight: 400, - }, - - // Make the drawer focusable (but not in the tab order), so that - // clicking on an option here will not blurWithin, closing the - // popup. - tabIndex: -1, - className: "overflow-scroll-y", - }} - > - {compStyleVariants.length > 0 && ( - <> - }> - Component Interactions - - {compStyleVariants.map(makeVariantRow)} - - )} - - {privateStyleVariants.length > 0 && ( - <> - }> - {PRIVATE_STYLE_VARIANTS_CAP} - - {privateStyleVariants.map(makeVariantRow)} - - )} - - {compVariants.length > 0 && - groupedCompVariants.map(([group, variants]) => ( - - {!isStandaloneVariantGroup(group) && ( - }> - {makeGroupName(group)} - - )} - - {variants.map(makeVariantRow)} - - ))} - - {globalVariants.length > 0 && - [...xGroupBy(globalVariants, (v) => ensure(v.parent)).entries()].map( - ([group, variants]) => ( - - - } - > - {group.param.variable.name} - - {variants.map(makeVariantRow)} - - ) - )} - - - ); -}); - -export default VariantsDrawer; diff --git a/platform/wab/src/wab/client/components/variants/VariantsDrawerHeader.tsx b/platform/wab/src/wab/client/components/variants/VariantsDrawerHeader.tsx deleted file mode 100644 index 5315248cd7e..00000000000 --- a/platform/wab/src/wab/client/components/variants/VariantsDrawerHeader.tsx +++ /dev/null @@ -1,42 +0,0 @@ -// This is a skeleton starter React component generated by Plasmic. -// This file is owned by you, feel free to edit as you see fit. -import { - DefaultVariantsDrawerHeaderProps, - PlasmicVariantsDrawerHeader, -} from "@/wab/client/plasmic/plasmic_kit_variants/PlasmicVariantsDrawerHeader"; -import * as React from "react"; - -// Your component props start with props for variants and slots you defined -// in Plasmic, but you can add more here, like event handlers that you can -// attach to named nodes in your component. -// -// If you don't want to expose certain variants or slots as a prop, you can use -// Omit to hide them: -// -// interface VariantsDrawerHeaderProps extends Omit { -// // etc. -// } -// -// You can also stop extending from DefaultVariantsDrawerHeaderProps altogether and have -// total control over the props for your component. -type VariantsDrawerHeaderProps = DefaultVariantsDrawerHeaderProps; - -function VariantsDrawerHeader(props: VariantsDrawerHeaderProps) { - // Use PlasmicVariantsDrawerHeader to render this component as it was - // designed in Plasmic, by activating the appropriate variants, - // attaching the appropriate event handlers, etc. You - // can also install whatever React hooks you need here to manage state or - // fetch data. - // - // Props you can pass into PlasmicVariantsDrawerHeader are: - // 1. Variants you want to activate, - // 2. Contents for slots you want to fill, - // 3. Overrides for any named node in the component to attach behavior and data, - // 4. Props to set on the root node. - // - // By default, we are just piping all VariantsDrawerHeaderProps here, but feel free - // to do whatever works for you. - return ; -} - -export default VariantsDrawerHeader; diff --git a/platform/wab/src/wab/client/components/variants/VariantsDrawerRow.tsx b/platform/wab/src/wab/client/components/variants/VariantsDrawerRow.tsx deleted file mode 100644 index 202b6cd0ae3..00000000000 --- a/platform/wab/src/wab/client/components/variants/VariantsDrawerRow.tsx +++ /dev/null @@ -1,97 +0,0 @@ -// This is a skeleton starter React component generated by Plasmic. -// This file is owned by you, feel free to edit as you see fit. -import { pinStateToPlasmicPinState } from "@/wab/client/components/variants/VariantRow"; -import { Matcher } from "@/wab/client/components/view-common"; -import Chip from "@/wab/client/components/widgets/Chip"; -import { PlasmicVariantsDrawerRow } from "@/wab/client/plasmic/plasmic_kit_variants/PlasmicVariantsDrawerRow"; -import { ensure, maybe } from "@/wab/shared/common"; -import { getNamespacedComponentName } from "@/wab/shared/core/components"; -import { VariantPinState } from "@/wab/shared/PinManager"; -import { - isStandaloneVariant, - isStyleVariant, - isVariantSettingEmpty, - tryGetVariantSetting, -} from "@/wab/shared/Variants"; -import { Component, TplNode, Variant } from "@/wab/shared/model/classes"; -import { isTplVariantable } from "@/wab/shared/core/tpls"; -import { observer } from "mobx-react"; -import * as React from "react"; - -interface VariantsDrawerRowProps { - variant: Variant; - pinState: VariantPinState | undefined; - isFocused?: boolean; - matcher: Matcher; - onToggle?: () => void; - onTarget?: (target: boolean) => void; - focusedTpl?: TplNode; - superComp?: Component; -} - -const VariantsDrawerRow = observer(function VariantsDrawerRow( - props: VariantsDrawerRowProps -) { - const { - variant, - pinState, - isFocused, - matcher, - onToggle, - onTarget, - focusedTpl, - superComp, - } = props; - const indicatedVs = - focusedTpl && - isTplVariantable(focusedTpl) && - maybe(tryGetVariantSetting(focusedTpl, [variant]), (vs) => - isVariantSettingEmpty(vs) ? undefined : vs - ); - - const isRecording = pinState?.startsWith("selected"); - return ( - null } - } - recordButton={ - onTarget - ? { - tooltip: isRecording ? "Stop recording" : "Add to recording", - onClick: (e) => { - e.stopPropagation(); - onTarget(!isRecording); - }, - tabIndex: isFocused ? 0 : -1, - } - : { render: () => null } - } - isStandalone={isStandaloneVariant(variant)} - > - {isStyleVariant(variant) ? ( - ensure(variant.selectors).map((sel) => ( - {matcher.boldSnippets(sel)} - )) - ) : superComp && isStandaloneVariant(variant) ? ( - - {getNamespacedComponentName(superComp)} - {" - "} - {matcher.boldSnippets(variant.name)} - - ) : ( - matcher.boldSnippets(variant.name) - )} - - ); -}); - -export default VariantsDrawerRow; diff --git a/platform/wab/src/wab/client/components/variants/VariantsPanel.tsx b/platform/wab/src/wab/client/components/variants/VariantsPanel.tsx index fee68c76da1..d3c481d259e 100644 --- a/platform/wab/src/wab/client/components/variants/VariantsPanel.tsx +++ b/platform/wab/src/wab/client/components/variants/VariantsPanel.tsx @@ -52,8 +52,8 @@ 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 { + allCodeComponentOrStyleVariants, allComponentStyleVariants, - allRegisteredVariants, getSuperComponents, isPageComponent, } from "@/wab/shared/core/components"; @@ -78,7 +78,8 @@ import { VariantPinState } from "@/wab/shared/PinManager"; import { getPlumeVariantDef } from "@/wab/shared/plume/plume-registry"; import { VariantOptionsType } from "@/wab/shared/TplMgr"; import { - canHaveRegisteredVariant, + canHaveCodeComponentOrStyleVariant, + CodeComponentOrStyleVariant, getBaseVariant, isBaseVariant, isGlobalVariantGroup, @@ -86,7 +87,6 @@ import { isStandaloneVariantGroup, moveVariant, moveVariantGroup, - RegisteredVariant, variantComboKey, } from "@/wab/shared/Variants"; import { Menu } from "antd"; @@ -187,7 +187,8 @@ export const VariantsPanel = observer( const superComps = getSuperComponents(component); const styleVariants = allComponentStyleVariants(component); - const registeredVariants = allRegisteredVariants(component); + const codeComponentOrStyleVariants = + allCodeComponentOrStyleVariants(component); const baseVariant = getBaseVariant(component); const combos = findNonEmptyCombos(component); const selectedVariants = vcontroller.getTargetedVariants(); @@ -489,7 +490,7 @@ export const VariantsPanel = observer( ) )} - {canHaveRegisteredVariant(component) && + {canHaveCodeComponentOrStyleVariant(component) && !isPageComponent(component) && ( - {registeredVariants.map((variant) => ( + {codeComponentOrStyleVariants.map((variant) => ( void; onClick?: () => void; @@ -1039,7 +1040,10 @@ const ComponentStyleVariantRow = observer( studioCtx.change(({ success }) => { studioCtx .siteOps() - .removeRegisteredVariantIfEmptyAndUnused(component, variant); + .removeCodeComponentOrStyleVariantIfEmptyAndUnused( + component, + variant + ); return success(); }) } diff --git a/platform/wab/src/wab/shared/PinManager.ts b/platform/wab/src/wab/shared/PinManager.ts index 1bd43a3dc1b..d14eda0e5da 100644 --- a/platform/wab/src/wab/shared/PinManager.ts +++ b/platform/wab/src/wab/shared/PinManager.ts @@ -30,9 +30,9 @@ import { getOrderedScreenVariants, getPartitionedScreenVariants, isBaseVariant, + isCodeComponentOrStyleVariant, isGlobalVariant, isPrivateStyleVariant, - isRegisteredVariant, isScreenVariant, isStandaloneVariantGroup, } from "@/wab/shared/Variants"; @@ -99,7 +99,9 @@ export class PinStateManager { // much value in allowing targeting a combo of component style variants. // Better to start strict than not! We pick the last one, as that would // be the most-recently-added. - const registeredVariant = L.last(locals.filter(isRegisteredVariant)); + const codeComponentOrStyleVariant = L.last( + locals.filter(isCodeComponentOrStyleVariant) + ); // We also only allow targeting a single screen variant at a time. const screenVariant = L.last(globals.filter(isScreenVariant)); @@ -116,8 +118,10 @@ export class PinStateManager { ), ] : privates), - ...locals.filter((v) => !isBaseVariant(v) && !isRegisteredVariant(v)), - ...(registeredVariant ? [registeredVariant] : []), + ...locals.filter( + (v) => !isBaseVariant(v) && !isCodeComponentOrStyleVariant(v) + ), + ...(codeComponentOrStyleVariant ? [codeComponentOrStyleVariant] : []), ...globals.filter((v) => !isScreenVariant(v)), ...(screenVariant ? [screenVariant] : []), ]), diff --git a/platform/wab/src/wab/shared/TplMgr.ts b/platform/wab/src/wab/shared/TplMgr.ts index 4020ffa9823..da48d2d3710 100644 --- a/platform/wab/src/wab/shared/TplMgr.ts +++ b/platform/wab/src/wab/shared/TplMgr.ts @@ -48,10 +48,10 @@ import { hasScreenVariant, hasStyleVariant, isBaseVariant, + isCodeComponentOrStyleVariant, isCodeComponentVariant, isGlobalVariant, isGlobalVariantGroup, - isRegisteredVariant, isScreenVariant, isScreenVariantGroup, isStandaloneVariant, @@ -560,7 +560,7 @@ export class TplMgr { // This is to ensure that we are able to use the parent in the previous // steps for (const v of variants) { - if (isRegisteredVariant(v)) { + if (isCodeComponentOrStyleVariant(v)) { tryRemove( ensure(component, "Expected component to be not null").variants, v @@ -602,12 +602,12 @@ export class TplMgr { }); } - removeRegisteredVariantIfEmptyAndUnused( + removeCodeComponentOrStyleVariantIfEmptyAndUnused( component: Component, variant: Variant ) { assert( - isRegisteredVariant(variant), + isCodeComponentOrStyleVariant(variant), "Given variant should be a registered variant" ); @@ -2270,7 +2270,7 @@ export class TplMgr { this.renameVariant(newVariant, newVariant.name); } else { assert( - isRegisteredVariant(variant), + isCodeComponentOrStyleVariant(variant), "Variant with no parent is expected to be a registered variant" ); component.variants.push(newVariant); diff --git a/platform/wab/src/wab/shared/Variants.ts b/platform/wab/src/wab/shared/Variants.ts index cae356bfdd9..871c4374d51 100644 --- a/platform/wab/src/wab/shared/Variants.ts +++ b/platform/wab/src/wab/shared/Variants.ts @@ -111,7 +111,7 @@ export function isBaseVariant(variants: Variant | VariantCombo) { return variants.name === BASE_VARIANT_NAME; } -export function canHaveRegisteredVariant(component: Component) { +export function canHaveCodeComponentOrStyleVariant(component: Component) { const tplRoot = component.tplTree; return isTplTag(tplRoot) || isTplRootWithCodeComponentVariants(tplRoot); } @@ -242,7 +242,7 @@ export type PrivateStyleVariant = SetNonNullable< /** Any style-only variant. */ export type StyleVariant = ComponentStyleVariant | PrivateStyleVariant; -export type RegisteredVariant = CodeComponentVariant | StyleVariant; +export type CodeComponentOrStyleVariant = CodeComponentVariant | StyleVariant; export function isStyleVariant(variant: Variant): variant is StyleVariant { return !!variant.selectors; @@ -254,9 +254,9 @@ export function isCodeComponentVariant( return !!variant.codeComponentName && !!variant.codeComponentVariantKeys; } -export function isRegisteredVariant( +export function isCodeComponentOrStyleVariant( variant: Variant -): variant is RegisteredVariant { +): variant is CodeComponentOrStyleVariant { return isStyleVariant(variant) || isCodeComponentVariant(variant); } @@ -272,6 +272,7 @@ export function isMaybeInteractiveCodeComponentVariant( ); } +// TODO: Check if this is still needed / check usages export function hasStyleVariant(variantCombo: VariantCombo) { return variantCombo.some((v) => isStyleVariant(v)); } @@ -693,6 +694,10 @@ export function isBaseRuleVariant(variant: Variant) { // screen variant will be triggered via media query return false; } + if (isCodeComponentVariant(variant)) { + // code component variant will be triggered via code component interactions + return false; + } if (isStyleVariant(variant) && !isHookTriggeredStyleVariant(variant)) { // a style variant that doesn't have to be triggered by js will just // be triggered by css selectors instead @@ -723,7 +728,9 @@ export function ensureBaseRuleVariantSetting( // trigger the style variant (unless it's a private style variant) ensureVariantSetting( rootTpl, - variantCombo.filter((v) => !isStyleVariant(v) && !isScreenVariant(v)) + variantCombo.filter( + (v) => !isCodeComponentOrStyleVariant(v) && !isScreenVariant(v) + ) ); } } @@ -771,6 +778,7 @@ 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, @@ -893,8 +901,8 @@ export function isFrameWithVariantCombo({ return getDisplayVariants({ site, frame }).length > 1; } -export function getRegisteredVariantDisplayNames( - variant: RegisteredVariant, +export function getCodeComponentOrStyleVariantDisplayNames( + variant: CodeComponentOrStyleVariant, site?: Site ) { if (isCodeComponentVariant(variant)) { @@ -911,11 +919,11 @@ export function getRegisteredVariantDisplayNames( return []; } -export function makeRegisteredVariantName( - variant: RegisteredVariant, +export function makeCodeComponentOrStyleVariantName( + variant: CodeComponentOrStyleVariant, site?: Site ) { - return getRegisteredVariantDisplayNames(variant, site).join(", "); + return getCodeComponentOrStyleVariantDisplayNames(variant, site).join(", "); } export function makeVariantName({ @@ -934,12 +942,12 @@ export function makeVariantName({ (isPrivateStyleVariant(variant) ? [ focusedTag ? focusedTag.name || summarizeTplTag(focusedTag) : "", - makeRegisteredVariantName(variant, site), + makeCodeComponentOrStyleVariantName(variant, site), ] .filter(Boolean) .join(": ") - : isRegisteredVariant(variant) - ? makeRegisteredVariantName(variant, site) + : isCodeComponentOrStyleVariant(variant) + ? makeCodeComponentOrStyleVariantName(variant, site) : superComp ? `${getNamespacedComponentName(superComp)} • ${variant.name}` : variant.name) || "UnnamedVariant" diff --git a/platform/wab/src/wab/shared/cached-selectors.ts b/platform/wab/src/wab/shared/cached-selectors.ts index 27d86d78cf2..63bb2668cb0 100644 --- a/platform/wab/src/wab/shared/cached-selectors.ts +++ b/platform/wab/src/wab/shared/cached-selectors.ts @@ -13,7 +13,9 @@ import { VariantedStylesHelper } from "@/wab/shared/VariantedStylesHelper"; import { CodeComponentVariant, VariantCombo, + isCodeComponentOrStyleVariant, isCodeComponentVariant, + isGlobalVariant, isPrivateStyleVariant, isVariantSettingEmpty, variantComboKey, @@ -994,6 +996,9 @@ export const findComponentsUsingComponentVariant = maybeComputedFn( component: Component, variant: Variant ) { + if (isCodeComponentOrStyleVariant(variant) || isGlobalVariant(variant)) { + return new Set(); + } const results = new Set(); const referencers = componentToReferencers(site).get(component) ?? new Set(); diff --git a/platform/wab/src/wab/shared/core/components.spec.ts b/platform/wab/src/wab/shared/core/components.spec.ts index 04e6686c45d..5d4a072f1f1 100644 --- a/platform/wab/src/wab/shared/core/components.spec.ts +++ b/platform/wab/src/wab/shared/core/components.spec.ts @@ -168,6 +168,7 @@ describe("extractComponent", () => { ), }); + // TODO: same as variant-sort spec. Also update it to registered variants const variantName = (variant: Variant) => { if (isPrivateStyleVariant(variant)) { return `:private:${variant.selectors!.join(":")}`; diff --git a/platform/wab/src/wab/shared/core/components.ts b/platform/wab/src/wab/shared/core/components.ts index e395c5b9b31..423e4800fbd 100644 --- a/platform/wab/src/wab/shared/core/components.ts +++ b/platform/wab/src/wab/shared/core/components.ts @@ -18,12 +18,12 @@ import { getBaseVariant, getReferencedVariantGroups, isBaseVariant, + isCodeComponentOrStyleVariant, isCodeComponentVariant, isComponentStyleVariant, isGlobalVariant, isPrivateStyleVariant, isPseudoElementVariant, - isRegisteredVariant, isStyleVariant, isVariantSettingEmpty, mkBaseVariant, @@ -1211,7 +1211,7 @@ export function extractComponent({ // Remove all the vsettings that referenced style variants, as they do not // get carried over as args we can pass onto the new component tplComponent.vsettings = tplComponent.vsettings.filter( - (vs) => !vs.variants.some(isStyleVariant) + (vs) => !vs.variants.some(isCodeComponentOrStyleVariant) ); // Remove all width/height on the tplComponent; by default, we will defer @@ -1249,7 +1249,9 @@ export function extractComponent({ // specified in the old vsettings. const allUsedOldVariantCombo = L.uniqBy( [...findVariantSettingsUnderTpl(tpl)].map(([vs, _tpl]) => - vs.variants.filter((v) => !isBaseVariant(v) && !isStyleVariant(v)) + vs.variants.filter( + (v) => !isBaseVariant(v) && !isCodeComponentOrStyleVariant(v) + ) ), (combo) => combo @@ -1293,7 +1295,7 @@ export function extractComponent({ $$$(tpl).replaceWith(tplComponent); // Remove private style variants for the old nodes - allStyleVariants(containingComponent).forEach((v) => { + allCodeComponentOrStyleVariants(containingComponent).forEach((v) => { if (v.forTpl && oldFlattenedVariantablesSet.has(v.forTpl)) { tplMgr.tryRemoveVariant(v, containingComponent); } @@ -1760,6 +1762,7 @@ export function allComponentVariants( return variants; } +// TODO: Check usages of this and other helpers like this export function allStyleVariants(component: Component) { return component.variants.filter(isStyleVariant); } @@ -1772,8 +1775,8 @@ export function allCodeComponentVariants(component: Component) { return component.variants.filter(isCodeComponentVariant); } -export function allRegisteredVariants(component: Component) { - return component.variants.filter(isRegisteredVariant); +export function allCodeComponentOrStyleVariants(component: Component) { + return component.variants.filter(isCodeComponentOrStyleVariant); } export function allPrivateStyleVariants(component: Component, tpl: TplNode) { diff --git a/platform/wab/src/wab/shared/core/styles.ts b/platform/wab/src/wab/shared/core/styles.ts index 93eb5a55b78..dfd8ce5178a 100644 --- a/platform/wab/src/wab/shared/core/styles.ts +++ b/platform/wab/src/wab/shared/core/styles.ts @@ -731,7 +731,7 @@ function deriveCssRuleSetStyles( // Disable the outline when the element has a focused VariantSetting if ( vs.variants.some( - (v) => isStyleVariant(v) && v.selectors?.some((s) => s.includes("Focus")) + (v) => isStyleVariant(v) && v.selectors?.some((s) => s.includes(":focus")) ) && !hasOutlineStyle(m) ) { @@ -1816,6 +1816,7 @@ function showPseudoClassSelector( }; if (isRoot) { + // TODO: Investigate for registered variants (not launch blocking) const selectorVariants = vs.variants.filter(isStyleVariant); const baseRuleVariants = getBaseRuleVariants(vs.variants); const baseRuleVs = ensure( diff --git a/platform/wab/src/wab/shared/model/model-change-util.ts b/platform/wab/src/wab/shared/model/model-change-util.ts index 7d8eb79713a..c2446fb7025 100644 --- a/platform/wab/src/wab/shared/model/model-change-util.ts +++ b/platform/wab/src/wab/shared/model/model-change-util.ts @@ -1,4 +1,11 @@ import type { StudioCtx } from "@/wab/client/studio-ctx/StudioCtx"; +import { arrayReversed } from "@/wab/commons/collections"; +import { + componentToTplComponents, + deepComponentToReferencers, + extractComponentVariantSettings, + extractImageAssetRefsByAttrs, +} from "@/wab/shared/cached-selectors"; import { ensure, ensureArrayOfInstances, @@ -6,26 +13,30 @@ import { TypeStamped, xDifference, } from "@/wab/shared/common"; -import { arrayReversed } from "@/wab/commons/collections"; import { allComponentVariants } from "@/wab/shared/core/components"; -import { PLASMIC_DISPLAY_NONE } from "@/wab/shared/css"; import { ChangeNode, mkArrayBeforeSplice, ModelChange, RecordedChanges, } from "@/wab/shared/core/observable-model"; -import { - componentToTplComponents, - deepComponentToReferencers, - extractComponentVariantSettings, - extractImageAssetRefsByAttrs, -} from "@/wab/shared/cached-selectors"; import { ALWAYS_RESOLVE_MIXIN_PROPS, plasmicImgAttrStyles, SIZE_PROPS, } from "@/wab/shared/core/style-props"; +import { createRuleSetMerger } from "@/wab/shared/core/styles"; +import { + findVariantSettingsUnderTpl, + flattenTpls, + isComponentRoot, + isTplColumns, + isTplComponent, + isTplSlot, + isTplTag, + isTplVariantable, +} from "@/wab/shared/core/tpls"; +import { PLASMIC_DISPLAY_NONE } from "@/wab/shared/css"; import { getEffectiveVariantSetting } from "@/wab/shared/effective-variant-setting"; import { makeExpFromValues } from "@/wab/shared/exprs"; import { isFlexContainerWithGap } from "@/wab/shared/layoututils"; @@ -71,17 +82,6 @@ import { isStyleVariant, tryGetBaseVariantSetting, } from "@/wab/shared/Variants"; -import { createRuleSetMerger } from "@/wab/shared/core/styles"; -import { - findVariantSettingsUnderTpl, - flattenTpls, - isComponentRoot, - isTplColumns, - isTplComponent, - isTplSlot, - isTplTag, - isTplVariantable, -} from "@/wab/shared/core/tpls"; import L, { omit } from "lodash"; export enum ChangesType { @@ -735,6 +735,7 @@ function changeChangesImgSize(change: ModelChange) { * If this is a change on Variant.selectors, then we need to regenerate the css rule * for all VariantSettings that reference this variant */ +// TODO: Change for registered variants (also function is probably named wrong) function getChangedRuleSetsByVariantSelectors( studioCtx: StudioCtx, change: ModelChange diff --git a/platform/wab/src/wab/shared/site-diffs/__tests__/merge.spec.ts b/platform/wab/src/wab/shared/site-diffs/__tests__/merge.spec.ts index 2f7bdd98d70..6952f792d48 100644 --- a/platform/wab/src/wab/shared/site-diffs/__tests__/merge.spec.ts +++ b/platform/wab/src/wab/shared/site-diffs/__tests__/merge.spec.ts @@ -4549,6 +4549,7 @@ describe("merging", () => { ); const tpl = ensureKnownTplTag(ensureKnownTplTag(cmp.tplTree).children[0]); expect(tpl.vsettings.length).toBe(2); + // TODO: Test for registered variants expect(cmp.variants.filter((v) => isStyleVariant(v)).length).toBe(1); expect(tpl.vsettings[1].rs.values).toMatchObject({ color: "red", diff --git a/platform/wab/src/wab/shared/site-invariants.ts b/platform/wab/src/wab/shared/site-invariants.ts index ccdf6f8a92c..01eac288204 100644 --- a/platform/wab/src/wab/shared/site-invariants.ts +++ b/platform/wab/src/wab/shared/site-invariants.ts @@ -6,11 +6,11 @@ import { getTplSlot, isSlot } from "@/wab/shared/SlotUtils"; import { isBaseRuleVariant, isBaseVariant, + isCodeComponentOrStyleVariant, isComponentStyleVariant, isGlobalVariant, isPrivateStyleVariant, isScreenVariant, - isStyleVariant, splitVariantCombo, tryGetVariantSetting, } from "@/wab/shared/Variants"; @@ -784,7 +784,7 @@ function* _genTplErrors(site: Site, component: Component, tpl: TplNode) { if (isTplVariantable(component.tplTree)) { const rootTplVariants = vs.variants.filter( - (v) => !isStyleVariant(v) && !isScreenVariant(v) + (v) => !isCodeComponentOrStyleVariant(v) && !isScreenVariant(v) ); const rootTplVs = tryGetVariantSetting( component.tplTree, diff --git a/platform/wab/src/wab/shared/variant-sort.spec.ts b/platform/wab/src/wab/shared/variant-sort.spec.ts index 8731fa23719..c5145e6132b 100644 --- a/platform/wab/src/wab/shared/variant-sort.spec.ts +++ b/platform/wab/src/wab/shared/variant-sort.spec.ts @@ -1,19 +1,19 @@ import { ComponentType } from "@/wab/shared/core/components"; +import { createSite } from "@/wab/shared/core/sites"; +import { mkTplTagX } from "@/wab/shared/core/tpls"; +import { Variant } from "@/wab/shared/model/classes"; import { TplMgr } from "@/wab/shared/TplMgr"; import { $$$ } from "@/wab/shared/TplQuery"; +import { + makeVariantComboSorter, + sortedVariantCombos, +} from "@/wab/shared/variant-sort"; import { VariantCombo, getBaseVariant, isPrivateStyleVariant, isStyleVariant, } from "@/wab/shared/Variants"; -import { Variant } from "@/wab/shared/model/classes"; -import { - makeVariantComboSorter, - sortedVariantCombos, -} from "@/wab/shared/variant-sort"; -import { createSite } from "@/wab/shared/core/sites"; -import { mkTplTagX } from "@/wab/shared/core/tpls"; import L from "lodash"; describe("variant-sort", () => { @@ -56,6 +56,7 @@ describe("variant-sort", () => { const sorter = makeVariantComboSorter(site, component); + // TODO: ADd a test for registered variants const variantName = (variant: Variant) => { if (isPrivateStyleVariant(variant)) { return `private-${variant.selectors?.join(":")}`; diff --git a/platform/wab/src/wab/shared/variant-sort.ts b/platform/wab/src/wab/shared/variant-sort.ts index 9e381e87228..88ad1122e4c 100644 --- a/platform/wab/src/wab/shared/variant-sort.ts +++ b/platform/wab/src/wab/shared/variant-sort.ts @@ -7,6 +7,14 @@ import { } from "@/wab/shared/common"; import { getSuperComponents } from "@/wab/shared/core/components"; import { parseScreenSpec } from "@/wab/shared/css-size"; +import { maybeComputedFn } from "@/wab/shared/mobx-util"; +import { + Component, + Site, + Variant, + VariantGroup, + VariantSetting, +} from "@/wab/shared/model/classes"; import { VariantCombo, getBaseVariant, @@ -18,14 +26,6 @@ import { isScreenVariantGroup, isStyleVariant, } from "@/wab/shared/Variants"; -import { maybeComputedFn } from "@/wab/shared/mobx-util"; -import { - Component, - Site, - Variant, - VariantGroup, - VariantSetting, -} from "@/wab/shared/model/classes"; import L from "lodash"; // See https://coda.io/d/Plasmic-Wiki_dHQygjmQczq/Targeting-Multiple-Component-Variants_suH6g#_luNNY @@ -65,6 +65,7 @@ export function sortedVariantSettings( * - [primary] is an ancestor combo of [primary, small] * - [primary, :hover] is an ancestor combo of [primary, small, :hover:active] */ +// TODO: Test this in variant-sort.spec.ts. Also update it to registered variants export function isAncestorCombo( combo: VariantCombo, maybeAncestorCombo: VariantCombo