first cut first draft blocks

package.json

@@ -11,6 +11,7 @@
     "storybook": "storybook dev -p 6006 --no-open",
     "storybook:build": "storybook build --output-dir dist/storybook",
     "build": "npm run app:build; npm run storybook:build",
+    "script:blocks": "cd scripts/blocks; node --env-file=../../.env app.mjs; cd -;",
     "script:icons": "cd scripts/icons; node --env-file=../../.env icons.cjs; cd -;",
     "script:styles": "cd scripts/styles; node --env-file=../../.env styles.cjs; cd -;",
     "script:tokens": "cd scripts/tokens; node --env-file=../../.env app.mjs --skip-rest-api; cd -;",

scripts/blocks/BuildingBlocks.figma.tsx.txt

@@ -0,0 +1,49 @@
+import { figma } from "@figma/code-connect"; import { Flex, FlexItem, Section } from "../../ui";
+
+// Building Blocks: Section Accordion
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2142:11009", { props: { children: figma.children(["Text Content Heading","Accordion"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Card Image Grid
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2142:12529", { props: { children: figma.children(["Text Content Heading","Card"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Content List
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2142:12241", { props: { children: figma.children(["Text Content Heading","Card"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Testimonials
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2142:10523", { props: { children: figma.children(["Text Content Heading","Testimonial Card"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Card Icon Grid
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2143:14417", { props: { children: figma.children(["Text Content Heading","Card"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Image Panel Images
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2143:14658", { props: { children: figma.children(["Image Panel"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Image Panel Default
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2171:21360", { props: { children: figma.children(["Image Panel"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Image Panel Swap
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2171:21397", { props: { children: figma.children(["Image Panel"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Image Panel Image
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2171:21434", { props: { children: figma.children(["Image Panel"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Hero
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2142:10483", { props: { children: figma.children(["Text Content Title"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Hero Actions
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2143:15053", { props: { children: figma.children(["Text Content Title","Button Group"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Pricing
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2142:10786", { props: { children: figma.children(["Navigation","Pricing Card"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Hero Newsletter
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2142:11090", { props: { children: figma.children(["Text Content Title","Newsletter Form"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Section Hero Contact
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2143:13799", { props: { children: figma.children(["Text Content Title","Contact Form"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Footer
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2171:21910", { props: { children: figma.children(["Standard Footer"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Building Blocks: Header
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2171:21984", { props: { children: figma.children(["Vertical Header"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })

scripts/blocks/Cards.figma.tsx.txt

@@ -0,0 +1,10 @@
+import { figma } from "@figma/code-connect"; import { Flex, FlexItem, Section } from "../../ui";
+
+// Cards: Product Info Card
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=7753:4465", { props: { children: figma.children(["Image","Text Heading","Text Price","Text","Button Group"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Cards: Pricing Card
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=7722:3736", { props: { children: figma.children(["Text Heading","Text Price","Text List","Button Group"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Cards: Testimonial Card
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=7717:3946", { props: { children: figma.children(["Text Heading","Avatar Block"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })

scripts/blocks/Forms.figma.tsx.txt

@@ -0,0 +1,19 @@
+import { figma } from "@figma/code-connect"; import { Flex, FlexItem, Section } from "../../ui";
+
+// Forms: Shipping Form
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=9762:3140", { props: { children: figma.children(["Legend","Description","Input Field","Select Field","Text Area Field","Switch Field","Checkbox Field","Button Group"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Forms: Contact Form
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=56:15992", { props: { children: figma.children(["Input Field","Text Area Field","Button Group"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Forms: Log in Form
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2143:14838", { props: { children: figma.children(["Input Field","Button Group"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Forms: Register Form
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2143:14829", { props: { children: figma.children(["Input Field","Checkbox Field","Button Group"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Forms: Forgot Password Form
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2143:14939", { props: { children: figma.children(["Input Field","Button Group"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Forms: Newsletter Form
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=56:15991", { props: { children: figma.children(["Input Field","Button"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })

scripts/blocks/Headers.figma.tsx.txt

@@ -0,0 +1,7 @@
+import { figma } from "@figma/code-connect"; import { Flex, FlexItem, Section } from "../../ui";
+
+// Headers: Vertical Header
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=7722:3364", { props: { children: figma.children(["Logo","Navigation"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })
+
+// Headers: Standard Header
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=7717:3642", { props: { children: figma.children(["Logo","Navigation","Button Group","Menu"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })

scripts/blocks/Panels.figma.tsx.txt

@@ -0,0 +1,4 @@
+import { figma } from "@figma/code-connect"; import { Flex, FlexItem, Section } from "../../ui";
+
+// Panels: Image Panel
+figma.connect(Section, "https://staging.figma.com/design/YfiqA0yWMXuLJAzkZNpBdy?node-id=2164:15467", { props: { children: figma.children(["Variant=Default","Variant=Swap","Variant=Images","Variant=Image"]) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })

scripts/blocks/app.mjs

@@ -0,0 +1,77 @@
+import fs from "fs";
+
+// run with node --env-file=.env app.mjs
+const TOKEN = process.env.FIGMA_ACCESS_TOKEN;
+const URL_BASE = "https://api.staging.figma.com/v1/files";
+const FILE_URL_BASE = "https://staging.figma.com/design/";
+const FILE_KEY = "YfiqA0yWMXuLJAzkZNpBdy";
+
+export async function getFileData(fileKey, pageName) {
+  try {
+    const fileResponse = await fetch(`${URL_BASE}/${fileKey}`, {
+      method: "GET",
+      headers: { "X-FIGMA-TOKEN": TOKEN },
+    });
+    const data = await fileResponse.json();
+    return fileRESTResponseToJSON(data, pageName);
+  } catch (e) {
+    throw e;
+  }
+}
+
+function fileRESTResponseToJSON(response, pageName) {
+  const page = response.document.children.find(({ name }) => name === pageName);
+  const result = [];
+  const files = [];
+  if (page) {
+    page.children.forEach((child) => {
+      if (child.type === "SECTION") {
+        const section = { name: child.name, components: [] };
+        const file = {
+          name: child.name.replace(/[^A-Za-z]/g, ""),
+          lines: [
+            `import { figma } from "@figma/code-connect"; import { Flex, FlexItem, Section } from "../../ui";`,
+          ],
+        };
+        files.push(file);
+        result.push(section);
+        child.children.forEach((item) => {
+          if (item.type === "COMPONENT" || item.type === "COMPONENT_SET") {
+            const children = [];
+            traverseChildren(item.children, children);
+            file.lines.push(
+              [
+                `// ${child.name}: ${item.name}`,
+                `figma.connect(Section, "${FILE_URL_BASE}${FILE_KEY}?node-id=${item.id}", { props: { children: figma.children(${JSON.stringify(children)}) }, example: ({ children }) => (<Section><Flex direction="row" wrap container>{children}</Flex></Section>) })`,
+              ].join("\n"),
+            );
+            section.components.push({ name: item.name, id: item.id, children });
+          }
+        });
+      }
+    });
+  }
+
+  fs.writeFileSync("./payload.json", JSON.stringify(result, null, 2));
+  files.forEach(({ name, lines }) =>
+    fs.writeFileSync(`./${name}.figma.tsx.txt`, lines.join("\n\n")),
+  );
+}
+
+function traverseChildren(children, agg) {
+  children.forEach((child) => {
+    if (["INSTANCE", "COMPONENT"].includes(child.type)) {
+      if (!agg.includes(child.name)) {
+        agg.push(child.name);
+      }
+    } else if ("children" in child) {
+      traverseChildren(child.children, agg);
+    }
+  });
+}
+
+async function run() {
+  const data = await getFileData(FILE_KEY, "Blocks");
+}
+
+run();