From f8e6b6ecd9ca3216ab977ee4bbc37c64fc9db249 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alex=20S=C3=A1nchez?= <sion333@gmail.com>
Date: Fri, 31 May 2024 13:32:59 +0200
Subject: [PATCH] component set (#128)

---
 .changeset/sixty-months-wink.md                   | 5 +++++
 plugin-src/transformers/transformComponentNode.ts | 2 +-
 plugin-src/transformers/transformFrameNode.ts     | 4 ++--
 plugin-src/transformers/transformInstanceNode.ts  | 8 ++------
 plugin-src/transformers/transformSceneNode.ts     | 1 +
 ui-src/lib/types/shapes/componentShape.ts         | 2 +-
 ui-src/types/component.ts                         | 3 ++-
 7 files changed, 14 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/sixty-months-wink.md

diff --git a/.changeset/sixty-months-wink.md b/.changeset/sixty-months-wink.md
new file mode 100644
index 00000000..81873829
--- /dev/null
+++ b/.changeset/sixty-months-wink.md
@@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Component set
diff --git a/plugin-src/transformers/transformComponentNode.ts b/plugin-src/transformers/transformComponentNode.ts
index c4cf704e..37c3d061 100644
--- a/plugin-src/transformers/transformComponentNode.ts
+++ b/plugin-src/transformers/transformComponentNode.ts
@@ -22,7 +22,7 @@ export const transformComponentNode = async (
   componentsLibrary.register(node.id, {
     type: 'component',
     name: node.name,
-    path: '',
+    path: node.parent?.type === 'COMPONENT_SET' ? node.parent.name : '',
     ...transformFigmaIds(node),
     ...(await transformFills(node)),
     ...transformEffects(node),
diff --git a/plugin-src/transformers/transformFrameNode.ts b/plugin-src/transformers/transformFrameNode.ts
index 55282bc8..ae50be56 100644
--- a/plugin-src/transformers/transformFrameNode.ts
+++ b/plugin-src/transformers/transformFrameNode.ts
@@ -13,12 +13,12 @@ import {
 
 import { FrameShape } from '@ui/lib/types/shapes/frameShape';
 
-const isSectionNode = (node: FrameNode | SectionNode): node is SectionNode => {
+const isSectionNode = (node: FrameNode | SectionNode | ComponentSetNode): node is SectionNode => {
   return node.type === 'SECTION';
 };
 
 export const transformFrameNode = async (
-  node: FrameNode | SectionNode,
+  node: FrameNode | SectionNode | ComponentSetNode,
   baseX: number,
   baseY: number
 ): Promise<FrameShape> => {
diff --git a/plugin-src/transformers/transformInstanceNode.ts b/plugin-src/transformers/transformInstanceNode.ts
index 5a357d62..4850c229 100644
--- a/plugin-src/transformers/transformInstanceNode.ts
+++ b/plugin-src/transformers/transformInstanceNode.ts
@@ -25,18 +25,14 @@ export const transformInstanceNode = async (
    *
    * 1. If the component does not have a main component.
    * 2. If the component does not have parent (it comes from an external design system).
-   * 3. If the component is inside a component set, (it is a variant component).
    */
-  if (
-    !mainComponent ||
-    mainComponent.parent === null ||
-    mainComponent.parent.type === 'COMPONENT_SET'
-  ) {
+  if (!mainComponent || mainComponent.parent === null) {
     return;
   }
 
   return {
     type: 'instance',
+    name: node.name,
     mainComponentFigmaId: mainComponent.id,
     isComponentRoot: isComponentRoot(node),
     ...transformFigmaIds(node),
diff --git a/plugin-src/transformers/transformSceneNode.ts b/plugin-src/transformers/transformSceneNode.ts
index 8f163d4a..17b6b59c 100644
--- a/plugin-src/transformers/transformSceneNode.ts
+++ b/plugin-src/transformers/transformSceneNode.ts
@@ -34,6 +34,7 @@ export const transformSceneNode = async (
       break;
     case 'SECTION':
     case 'FRAME':
+    case 'COMPONENT_SET':
       penpotNode = await transformFrameNode(node, baseX, baseY);
       break;
     case 'GROUP':
diff --git a/ui-src/lib/types/shapes/componentShape.ts b/ui-src/lib/types/shapes/componentShape.ts
index 2401a962..6f7bef11 100644
--- a/ui-src/lib/types/shapes/componentShape.ts
+++ b/ui-src/lib/types/shapes/componentShape.ts
@@ -18,7 +18,7 @@ export type ComponentShape = ShapeBaseAttributes &
 export type ComponentAttributes = {
   type?: 'component';
   name: string;
-  path: '';
+  path: string;
   mainInstanceId?: Uuid;
   mainInstancePage?: Uuid;
 };
diff --git a/ui-src/types/component.ts b/ui-src/types/component.ts
index 8a172dc0..3bce2a14 100644
--- a/ui-src/types/component.ts
+++ b/ui-src/types/component.ts
@@ -1,5 +1,5 @@
 import { LayoutAttributes, LayoutChildAttributes } from '@ui/lib/types/shapes/layout';
-import { ShapeGeomAttributes } from '@ui/lib/types/shapes/shape';
+import { ShapeAttributes, ShapeGeomAttributes } from '@ui/lib/types/shapes/shape';
 import { Children } from '@ui/lib/types/utils/children';
 
 export type ComponentRoot = {
@@ -8,6 +8,7 @@ export type ComponentRoot = {
 };
 
 export type ComponentInstance = ShapeGeomAttributes &
+  ShapeAttributes &
   LayoutAttributes &
   LayoutChildAttributes &
   Children & {