Designer: Added ability to mark a node inline for styling (#217)

Author: bheston

change/@adaptive-web-adaptive-ui-designer-core-a1d3a17c-d392-4dd1-ba4f-07204ba4b955.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Designer: Added ability to mark a node `inline` for styling",
+  "packageName": "@adaptive-web/adaptive-ui-designer-core",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-ui-designer-figma-602338ac-be9f-4281-8f99-be2dd70df37e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Designer: Added ability to mark a node `inline` for styling",
+  "packageName": "@adaptive-web/adaptive-ui-designer-figma",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/adaptive-ui-designer-core/src/index.ts

@@ -1,5 +1,6 @@
 export { Controller, PluginUIState, STYLE_REMOVE } from "./controller.js";
 export {
+    Config,
     PluginNodeData,
     AppliedStyleModules,
     AppliedStyleValues,

packages/adaptive-ui-designer-core/src/model.ts

@@ -40,6 +40,18 @@ export const AdditionalDataKeys = {
 
 export type AdditionalDataKeys = ValuesOf<typeof AdditionalDataKeys>;
 
+/**
+ * Configuration options for a node.
+ */
+export class Config {
+    /**
+     * Indicator to treat the node as flattened or inline with the containing hierarchy.
+     * Usable on Component nodes which exist as a construction convenience and are not
+     * actual implemented components.
+     */
+    public inline?: boolean;
+}
+
 /**
  * A design token value.
  */
@@ -113,6 +125,11 @@ export class AdditionalData extends Map<string, string> {}
  * Defines the data stored by the plugin on a node instance.
  */
 export interface PluginNodeData {
+    /**
+     * Configuration options for a node.
+     */
+    config: Config;
+
     /**
      * Design token values set directly to the node.
      */
@@ -216,6 +233,7 @@ export const pluginNodesToUINodes = (
                 componentAppliedDesignTokens: node.componentAppliedDesignTokens,
                 effectiveAppliedStyleValues: new AppliedStyleValues(),
                 children,
+                config: node.config,
                 designTokens: node.localDesignTokens as DesignTokenValues,
                 appliedStyleModules: node.appliedStyleModules as AppliedStyleModules,
                 appliedDesignTokens: node.appliedDesignTokens as AppliedDesignTokens,

packages/adaptive-ui-designer-core/src/node.ts

@@ -7,6 +7,7 @@ import {
     AppliedDesignTokens,
     AppliedStyleModules,
     AppliedStyleValues,
+    Config,
     DesignTokenValues,
     PluginNodeData,
     ReadonlyAppliedDesignTokens,
@@ -214,6 +215,11 @@ export abstract class PluginNode {
      */
     public abstract get supports(): Array<StyleProperty>;
 
+    /**
+     * Configuration options for a node.
+     */
+    public config: Config;
+
     protected deserializeLocalDesignTokens(): DesignTokenValues {
         const json = this.getPluginData("designTokens");
         // console.log("    deserializeLocalDesignTokens", this.debugInfo, json);

packages/adaptive-ui-designer-figma/src/lib/anatomy.ts

@@ -227,32 +227,29 @@ function parseComponent(node: PluginUINodeData): Anatomy {
     return anatomy;
 }
 
-function cleanNodeName(nodeName: string): string {
-    // Remove non-ascii characters
-    return nodeName.replace(/[^\x20-\x7F]/g, "").trim();
-}
-
-function isNotContextNode(nodeName: string, componentName: string): boolean {
-    return nodeName.toLowerCase() !== componentName.toLowerCase()
+function isContextNode(node: PluginUINodeData, componentName: string): boolean {
+    // Remove non-ascii characters (we tried a convention of decorating template node names)
+    const nodeName = node.name.replace(/[^\x20-\x7F]/g, "").trim();
+    return node.type === "COMPONENT" || nodeName.toLowerCase() === componentName.toLowerCase();
 }
 
 function walkNode(node: PluginUINodeData, componentName: string, condition: Record<string, string | boolean> | undefined, anatomy: Anatomy): void {
-    const nodeName = cleanNodeName(node.name);
-
-    if (nodeName === "Focus indicator") {
+    if (node.name === "Focus indicator") {
         // Ignore for now
         return;
     }
 
-    if (node.type === "INSTANCE" && isNotContextNode(nodeName, componentName)) {
+    const isContext = isContextNode(node, componentName);
+
+    if (node.type === "INSTANCE" && !(node.config.inline === true || isContext)) {
         // TODO: This is too simplified, but it addresses many nested component issues for now.
         return;
     }
 
     if (!node.name.endsWith(ignoreLayerName)) {
         // TODO, not only frames, but what?
-        if (node.type === "FRAME" && isNotContextNode(nodeName, componentName)) {
-            anatomy.parts.add(nodeName);
+        if (node.type === "FRAME" && !isContext) {
+            anatomy.parts.add(node.name);
         }
 
         if (node.appliedStyleModules.length > 0 || node.appliedDesignTokens.size > 0) {
@@ -271,9 +268,9 @@ function walkNode(node: PluginUINodeData, componentName: string, condition: Reco
                 styleRule.properties.set(target, tokenRef);
             });
 
-            if (isNotContextNode(nodeName, componentName)) {
-                anatomy.parts.add(nodeName)
-                styleRule.part = nodeName;
+            if (!isContext) {
+                anatomy.parts.add(node.name)
+                styleRule.part = node.name;
             }
 
             anatomy.styleRules.add(styleRule);

packages/adaptive-ui-designer-figma/src/lib/node-parser.ts

@@ -5,6 +5,7 @@ import {
     AppliedDesignTokens,
     AppliedStyleModules,
     AppliedStyleValues,
+    Config,
     deserializeMap,
     DesignTokenValues,
     PluginNodeData,
@@ -38,8 +39,12 @@ export function parseNode(node: FigmaRestAPI.Node): PluginUINodeData {
         additionalData.set(AdditionalDataKeys.codeGenName, node.name);
     }
 
+    const configData = getPluginData(node, "config");
     const appliedTokensPluginData = getPluginData(node, "appliedDesignTokens");
     const appliedStylesPluginData = getPluginData(node, "appliedStyleModules");
+    const config: Config = configData
+        ? JSON.parse(configData)
+        : new Config();
     const appliedDesignTokens: AppliedDesignTokens = appliedTokensPluginData
         ? deserializeMap(appliedTokensPluginData)
         : new AppliedDesignTokens();
@@ -53,6 +58,7 @@ export function parseNode(node: FigmaRestAPI.Node): PluginUINodeData {
         type: node.type,
         supports: [],
         children: children.map(parseNode),
+        config,
         additionalData,
         appliedDesignTokens,
         appliedStyleModules,