diff --git a/.changeset/sixty-months-wink.md b/.changeset/sixty-months-wink.md new file mode 100644 index 0000000..8187382 --- /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 c4cf704..37c3d06 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 55282bc..ae50be5 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 => { diff --git a/plugin-src/transformers/transformInstanceNode.ts b/plugin-src/transformers/transformInstanceNode.ts index 5a357d6..4850c22 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 8f163d4..17b6b59 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 2401a96..6f7bef1 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 8a172dc..3bce2a1 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 & {