feat: display components in tab group

onyx-gen · Apr 23, 2024 · 989aa48 · 989aa48
1 parent 15fe262
commit 989aa48
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 10 deletions.
diff --git a/packages/code/src/generate.ts b/packages/code/src/generate.ts
@@ -86,35 +86,45 @@ export default async function generate(config: Configuration): Promise<string |
         sendSelectedMessage([])
     }
 
+    interface ComponentInstanceInfo {
+      node: ComponentNode
+      instanceName: string
+    }
+
     const instanceNodes = await Promise.all(
       nodes
         .flatMap(selectedNode => getInstanceNodes(selectedNode))
         .filter(instanceNode => !config.ignoredComponentInstances.includes(instanceNode.name))
-        .map(async instanceNode => await instanceNode.getMainComponentAsync())
-        .filter(c => c !== null) as Promise<ComponentNode>[],
+        .map(async instanceNode => ({
+          node: await instanceNode.getMainComponentAsync(),
+          instanceName: instanceNode.name,
+        }))
+        .filter(async c => (await c).node !== null) as Promise<ComponentInstanceInfo>[],
     )
     console.log('Found instanceNodes', instanceNodes)
 
     const generatedInstances: Record<string, string> = {}
 
-    instanceNodes.map(async (instanceNode) => {
-      console.log('Processing instanceNode', instanceNode.name)
+    const promises = instanceNodes.map(async (componentInstanceInfo) => {
+      console.log('Processing instanceNode....', componentInstanceInfo.instanceName)
 
       const parser = new FigmaNodeParser({ default: 'default' }, config)
-      const tree = await parser.parse(instanceNode)
+      const tree = await parser.parse(componentInstanceInfo.node)
 
       if (tree) {
         const generator = new HTMLGenerator([], {}, config)
-        generatedInstances[instanceNode.name] = await generator.generate(tree)
+        generatedInstances[componentInstanceInfo.instanceName] = await generator.generate(tree)
 
-        console.log('Generated HTML for instanceNode', instanceNode.name, generatedInstances[instanceNode.name])
+        console.log('Generated HTML for instanceNode', componentInstanceInfo.instanceName, generatedInstances[componentInstanceInfo.instanceName])
       }
       else {
         console.error('It was not possible to generate HTML code for the selected node.')
         figma.notify('Error during HTML generation')
       }
     })
 
+    await Promise.all(promises)
+
     // only send message if html is not empty
     if (html) {
       sendGeneratedComponentsMessage({

diff --git a/packages/code/src/messages.ts b/packages/code/src/messages.ts
@@ -64,6 +64,7 @@ export function sendSelectedMessage(nodes: SelectedNode[] | null): void {
  */
 export function sendGeneratedComponentsMessage(data: GeneratedComponentsPluginMessageData): void {
   const pluginMessage: GeneratedComponentsPluginMessage = { event: 'generated-components', data }
+  console.log('sent', pluginMessage)
   figma.ui.postMessage(pluginMessage)
 }
 

diff --git a/packages/ui/src/components/code.vue b/packages/ui/src/components/code.vue
@@ -2,6 +2,7 @@
 import { codeToHtml } from 'shiki'
 import { computedAsync, useClipboard } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/vue'
 import { useTheme } from '@/composables/useTheme'
 import { useNotification } from '@/composables/useNotification'
 import { useCode } from '@/stores/useCode'
@@ -26,13 +27,37 @@ function onCopy() {
   copy(code.value)
   notify('Copied to clipboard!')
 }
+
+const componentList = computedAsync(async () => {
+  const promises = Object.entries((components.value?.components as Record<string, string> || {})).map(async ([componentName, componentCode]) => {
+    return {
+      name: componentName,
+      code: componentCode,
+      html: await codeToHtml(componentCode, {
+        lang: 'vue-html',
+        theme: theme.value,
+      }),
+    }
+  })
+
+  return await Promise.all(promises)
+})
 </script>
 
 <template>
   <Wrapper headline="Generated Code" :loading="isLoading">
-    <div>{{ components }}</div>
-
-    <div class="w-full" v-html="html" />
+    <TabGroup class="w-full" as="div">
+      <TabList>
+        <Tab v-for="c in componentList" :key="c.name">
+          Component {{ c.name }}
+        </Tab>
+      </TabList>
+      <TabPanels>
+        <TabPanel v-for="c in componentList" :key="c.name">
+          <div class="w-full" v-html="c.html" />
+        </TabPanel>
+      </TabPanels>
+    </TabGroup>
 
     <template #action>
       <button @click="onCopy">