Merge pull request #192 from qualcomm/olaf/parserless-code-connect

chore: add Figma CC files to Angular components

Author: R-Bower

.claude/agents/code-connect-generator.md

@@ -0,0 +1,11 @@
+{
+  "codeConnect": {
+    "include": ["src/**/*.ts.figma.js"],
+    "label": "Angular",
+    "language": "typescript",
+    "documentUrlSubstitutions": {
+      "<FIGMA_COMPONENTS_BASE>": "https://www.figma.com/design/G6YKSbQ5Jn83xQBRvlqe6M",
+      "<FIGMA_ICONS_BASE>": "https://www.figma.com/design/fJC9KDk1b8v5KxHRttSbqS"
+    }
+  }
+}

packages/frameworks/angular/figma/components-ts.config.json

@@ -1,12 +1,9 @@
 {
   "codeConnect": {
-    "include": ["src/**/*"],
-    "exclude": ["src/**/*.spec.ts"],
-    "parser": "html",
+    "include": ["src/**/*.figma.js"],
+    "exclude": ["src/**/*.ts.figma.js"],
     "label": "Angular",
-    "paths": {
-      "@qualcomm-ui/angular/*": ["./src/*/index.ts"]
-    },
+    "language": "html",
     "documentUrlSubstitutions": {
       "<FIGMA_COMPONENTS_BASE>": "https://www.figma.com/design/G6YKSbQ5Jn83xQBRvlqe6M",
       "<FIGMA_ICONS_BASE>": "https://www.figma.com/design/fJC9KDk1b8v5KxHRttSbqS"

packages/frameworks/angular/figma/components.config.json

@@ -30,7 +30,7 @@
     "analyze-bundle": "source-map-explorer bundle-size-dist/main.js",
     "explore-bundle": "run-s build:bundle-size analyze-bundle",
     "publish-angular-package": "tsx apply-package && qui-cli publish-angular qui-angular",
-    "figma:publish-components": "figma connect publish -c figma/components.config.json",
+    "figma:publish-components": "figma connect publish -c figma/components.config.json && figma connect publish -c figma/components-ts.config.json",
     "figma:publish-icons": "figma connect publish -c figma/icons.config.json --batch-size 500"
   },
   "devDependencies": {
@@ -57,7 +57,7 @@
     "@angular/ssr": "catalog:",
     "@faker-js/faker": "~9.6.0",
     "@floating-ui/dom": "^1.7.0",
-    "@figma/code-connect": "^1.3.13",
+    "@figma/code-connect": "^1.4.2",
     "@jsdevtools/coverage-istanbul-loader": "~3.0.5",
     "@module-federation/enhanced": "0.21.2",
     "@qualcomm-ui/angular-core": "workspace:^2.0.2",

packages/frameworks/angular/package.json

@@ -0,0 +1,35 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+// url=<FIGMA_COMPONENTS_BASE>?node-id=2191-5476
+// component=Accordion group
+
+const figma = require("figma")
+
+const instance = figma.selectedInstance
+
+const contained = instance.getBoolean("contained")
+const size = instance.getEnum("size", {lg: "lg", sm: "sm"})
+
+const sizeAttr = size ? ` size="${size}"` : ""
+const uncontainedAttr = !contained ? " uncontained" : ""
+
+const items = instance.findConnectedInstances(
+  (node) => typeof node.getBoolean("subHeader") === "boolean",
+  {traverseInstances: true},
+)
+
+const children = items.reduce(
+  (acc, item) => figma.code`${acc}${item.executeTemplate()?.example}`,
+  figma.code``,
+)
+
+export default {
+  example: figma.code`
+    <div q-accordion${sizeAttr}${uncontainedAttr} [defaultValue]="['a']">
+      ${children}
+    </div>`,
+  id: "AccordionGroup",
+  imports: [`import {AccordionModule} from "@qualcomm-ui/angular/accordion"`],
+  metadata: {nestable: true},
+}

packages/frameworks/angular/src/accordion/figma/accordion-group.figma.js

@@ -0,0 +1,59 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+// url=<FIGMA_COMPONENTS_BASE>?node-id=2161-18192
+// component=Accordion
+
+const figma = require("figma")
+
+const instance = figma.selectedInstance
+
+const leftChevron = instance.getEnum("chevron", {left: "left"})
+const disabled = instance.getEnum("state", {disabled: true})
+const header = instance.getString("headerText") || "Title of accordion"
+const icon = instance.getBoolean("icon")
+const subHeader = instance.getBoolean("subHeader")
+const subHeaderText = instance.getString("subHeaderText")
+
+const disabledAttr = disabled ? " disabled" : ""
+const iconAttr = icon ? ` icon="FileChartColumn"` : ""
+const secondaryTextAttr =
+  subHeader && subHeaderText ? ` secondaryText="${subHeaderText}"` : ""
+const textAttr = ` text="${header}"`
+
+let example
+if (leftChevron) {
+  const secondaryTextEl =
+    subHeader && subHeaderText
+      ? `<span q-accordion-item-secondary-text>${subHeaderText}</span>`
+      : ""
+  example = figma.code`
+    <div${disabledAttr} q-accordion-item-root value="a">
+      <button q-accordion-item-trigger>
+        <q-accordion-item-indicator />
+        <span q-accordion-item-text>${header}</span>
+        ${secondaryTextEl}
+      </button>
+      <div q-accordion-item-content>Panel contents</div>
+    </div>`
+} else {
+  example = figma.code`
+    <div${disabledAttr}${iconAttr} q-accordion-item${secondaryTextAttr}${textAttr} value="a">
+      Panel contents
+    </div>`
+}
+
+export default {
+  example,
+  id: "AccordionItem",
+  imports: [
+    `import {AccordionModule} from "@qualcomm-ui/angular/accordion"`,
+    ...(icon && !leftChevron
+      ? [
+          `import {IconDirective} from "@qualcomm-ui/angular/icon"`,
+          `import {FileChartColumn} from "lucide-angular"`,
+        ]
+      : []),
+  ],
+  metadata: {nestable: true},
+}

packages/frameworks/angular/src/accordion/figma/accordion-item.figma.js

@@ -0,0 +1,93 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+// url=<FIGMA_COMPONENTS_BASE>?node-id=3566-16209
+// component=Alert banner
+
+const figma = require("figma")
+
+const instance = figma.selectedInstance
+
+const emphasis = instance.getEnum("emphasis", {
+  danger: "danger",
+  neutral: "neutral",
+  success: "success",
+  warning: "warning",
+})
+const variant = instance.getEnum("variant", {subtle: "subtle"})
+const showIcon = instance.getBoolean("showIcon")
+const hasButton = instance.getBoolean("button")
+const dismissable = instance.getBoolean("dismiss")
+const hasDescription = instance.getBoolean("description")
+const descriptionText = instance.getString("descriptionText") || "Description"
+const heading = instance.getString("heading") || "Notification heading"
+
+const emphasisAttr = emphasis ? ` emphasis="${emphasis}"` : ""
+const variantAttr = variant ? ` variant="${variant}"` : ""
+
+const buttonEmphasis = variant
+  ? "neutral"
+  : emphasis === "warning"
+    ? "black-persistent"
+    : "white-persistent"
+const buttonEl = hasButton
+  ? `
+    <button
+      emphasis="${buttonEmphasis}"
+      q-alert-banner-action
+      q-button
+      size="sm"
+      variant="outline"
+    >
+      Button
+    </button>`
+  : ""
+
+let example
+if (showIcon) {
+  const descriptionAttr = hasDescription
+    ? ` description="${descriptionText}"`
+    : ""
+  const dismissableAttr = dismissable ? " dismissable" : ""
+
+  example = figma.code`
+    <div${dismissableAttr}${emphasisAttr}
+      heading="${heading}"
+      q-alert-banner${variantAttr}${descriptionAttr}
+    >
+      ${buttonEl}
+    </div>`
+} else {
+  const descriptionEl = hasDescription
+    ? `<div q-alert-banner-description>${descriptionText}</div>`
+    : ""
+  const closeButtonEl = dismissable
+    ? `<button q-alert-banner-close-button></button>`
+    : ""
+  const buttonActionEl = hasButton
+    ? `
+      <div q-alert-banner-action>
+        ${buttonEl}
+      </div>`
+    : ""
+
+  example = figma.code`
+    <div${emphasisAttr} q-alert-banner-root${variantAttr}>
+      <div q-alert-banner-heading>${heading}</div>
+      ${descriptionEl}
+      ${buttonActionEl}
+      ${closeButtonEl}
+    </div>`
+}
+
+export default {
+  example,
+  id: "AlertBanner",
+  imports: [
+    `import {AlertBannerModule} from "@qualcomm-ui/angular/alert-banner"`,
+    ...(hasButton
+      ? [`import {ButtonModule} from "@qualcomm-ui/angular/button"`]
+      : []),
+  ],
+  metadata: {nestable: true},
+}

packages/frameworks/angular/src/alert-banner/figma/alert-banner.figma.js

@@ -0,0 +1,38 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+// url=<FIGMA_COMPONENTS_BASE>?node-id=17804-5308
+// component=Avatar
+
+const figma = require("figma")
+
+const instance = figma.selectedInstance
+
+const emphasis = instance.getEnum("emphasis", {
+  brand: "brand",
+  "high-contrast": "contrast",
+})
+const size = instance.getEnum("size", {lg: "lg", sm: "sm", xl: "xl", xs: "xs"})
+const status = instance.getBoolean("status")
+
+const emphasisAttr = emphasis ? ` emphasis="${emphasis}"` : ""
+const sizeAttr = size ? ` size="${size}"` : ""
+const statusAttr = status ? ` status="active"` : ""
+const statusEl = status ? `<div q-avatar-status></div>` : ""
+
+export default {
+  example: figma.code`
+    <div q-avatar${emphasisAttr}${sizeAttr}${statusAttr}>
+      <div q-avatar-content>
+        <svg aria-label="User" qIcon="User"></svg>
+      </div>
+      ${statusEl}
+    </div>`,
+  id: "AvatarIcon",
+  imports: [
+    `import {AvatarModule} from "@qualcomm-ui/angular/avatar"`,
+    `import {IconDirective} from "@qualcomm-ui/angular/icon"`,
+    `import {User} from "lucide-angular"`,
+  ],
+  metadata: {nestable: true},
+}

packages/frameworks/angular/src/avatar/figma/avatar-icon.figma.js

@@ -0,0 +1,29 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+// url=<FIGMA_COMPONENTS_BASE>?node-id=17804-5726
+// component=Avatar
+
+const figma = require("figma")
+
+const instance = figma.selectedInstance
+
+const size = instance.getEnum("size", {lg: "lg", sm: "sm", xl: "xl", xs: "xs"})
+const status = instance.getBoolean("status")
+
+const sizeAttr = size ? ` size="${size}"` : ""
+const statusAttr = status ? ` status="active"` : ""
+const statusEl = status ? `<div q-avatar-status></div>` : ""
+
+export default {
+  example: figma.code`
+    <div q-avatar${sizeAttr}${statusAttr}>
+      <img alt="User avatar" q-avatar-image src="path/to/image.jpg" />
+      <!-- fallback -->
+      <div q-avatar-content>O</div>
+      ${statusEl}
+    </div>`,
+  id: "AvatarImage",
+  imports: [`import {AvatarModule} from "@qualcomm-ui/angular/avatar"`],
+  metadata: {nestable: true},
+}

packages/frameworks/angular/src/avatar/figma/avatar-image.figma.js

@@ -0,0 +1,33 @@
+// Copyright (c) Qualcomm Technologies, Inc. and/or its subsidiaries.
+// SPDX-License-Identifier: BSD-3-Clause-Clear
+
+// url=<FIGMA_COMPONENTS_BASE>?node-id=17804-5517
+// component=Avatar
+
+const figma = require("figma")
+
+const instance = figma.selectedInstance
+
+const emphasis = instance.getEnum("emphasis", {
+  brand: "brand",
+  "high-contrast": "contrast",
+})
+const initialText = instance.getString("initialText")
+const size = instance.getEnum("size", {lg: "lg", sm: "sm", xl: "xl", xs: "xs"})
+const status = instance.getBoolean("status")
+
+const emphasisAttr = emphasis ? ` emphasis="${emphasis}"` : ""
+const sizeAttr = size ? ` size="${size}"` : ""
+const statusAttr = status ? ` status="active"` : ""
+const statusEl = status ? `<div q-avatar-status></div>` : ""
+
+export default {
+  example: figma.code`
+    <div q-avatar${emphasisAttr}${sizeAttr}${statusAttr}>
+      <div q-avatar-content>${initialText}</div>
+      ${statusEl}
+    </div>`,
+  id: "AvatarInitial",
+  imports: [`import {AvatarModule} from "@qualcomm-ui/angular/avatar"`],
+  metadata: {nestable: true},
+}