component set (#128)

.changeset/sixty-months-wink.md

@@ -0,0 +1,5 @@
+---
+"penpot-exporter": minor
+---
+
+Component set

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),

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> => {

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),

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':

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;
 };

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 & {