From 4e12412fa34d926c0247941719322b600ab94bf7 Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Thu, 18 Jul 2024 15:57:59 -0700 Subject: [PATCH 1/2] Designer: Added ability to mark a node `inline` for styling --- .../adaptive-ui-designer-core/src/index.ts | 1 + .../adaptive-ui-designer-core/src/model.ts | 18 ++++++++++++ .../adaptive-ui-designer-core/src/node.ts | 6 ++++ .../src/lib/anatomy.ts | 29 +++++++++---------- .../src/lib/node-parser.ts | 6 ++++ 5 files changed, 44 insertions(+), 16 deletions(-) diff --git a/packages/adaptive-ui-designer-core/src/index.ts b/packages/adaptive-ui-designer-core/src/index.ts index 0142de04..2fd89b57 100644 --- a/packages/adaptive-ui-designer-core/src/index.ts +++ b/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, diff --git a/packages/adaptive-ui-designer-core/src/model.ts b/packages/adaptive-ui-designer-core/src/model.ts index 33089e60..25040c3a 100644 --- a/packages/adaptive-ui-designer-core/src/model.ts +++ b/packages/adaptive-ui-designer-core/src/model.ts @@ -40,6 +40,18 @@ export const AdditionalDataKeys = { export type AdditionalDataKeys = ValuesOf; +/** + * 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 {} * 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, diff --git a/packages/adaptive-ui-designer-core/src/node.ts b/packages/adaptive-ui-designer-core/src/node.ts index 4623098e..e49a2aee 100644 --- a/packages/adaptive-ui-designer-core/src/node.ts +++ b/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; + /** + * Configuration options for a node. + */ + public config: Config; + protected deserializeLocalDesignTokens(): DesignTokenValues { const json = this.getPluginData("designTokens"); // console.log(" deserializeLocalDesignTokens", this.debugInfo, json); diff --git a/packages/adaptive-ui-designer-figma/src/lib/anatomy.ts b/packages/adaptive-ui-designer-figma/src/lib/anatomy.ts index 50cc3486..512b275a 100644 --- a/packages/adaptive-ui-designer-figma/src/lib/anatomy.ts +++ b/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 | 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); diff --git a/packages/adaptive-ui-designer-figma/src/lib/node-parser.ts b/packages/adaptive-ui-designer-figma/src/lib/node-parser.ts index b570d1aa..186bb627 100644 --- a/packages/adaptive-ui-designer-figma/src/lib/node-parser.ts +++ b/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, From 9320637c738a99ba60e75e44cfd42c60576e1b5c Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Thu, 18 Jul 2024 16:03:36 -0700 Subject: [PATCH 2/2] Change files --- ...designer-core-a1d3a17c-d392-4dd1-ba4f-07204ba4b955.json | 7 +++++++ ...esigner-figma-602338ac-be9f-4281-8f99-be2dd70df37e.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@adaptive-web-adaptive-ui-designer-core-a1d3a17c-d392-4dd1-ba4f-07204ba4b955.json create mode 100644 change/@adaptive-web-adaptive-ui-designer-figma-602338ac-be9f-4281-8f99-be2dd70df37e.json diff --git a/change/@adaptive-web-adaptive-ui-designer-core-a1d3a17c-d392-4dd1-ba4f-07204ba4b955.json b/change/@adaptive-web-adaptive-ui-designer-core-a1d3a17c-d392-4dd1-ba4f-07204ba4b955.json new file mode 100644 index 00000000..16121e92 --- /dev/null +++ b/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" +} diff --git a/change/@adaptive-web-adaptive-ui-designer-figma-602338ac-be9f-4281-8f99-be2dd70df37e.json b/change/@adaptive-web-adaptive-ui-designer-figma-602338ac-be9f-4281-8f99-be2dd70df37e.json new file mode 100644 index 00000000..1ecd9b4b --- /dev/null +++ b/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" +}