Skip to content

Commit 82b010c

Browse files
marcomontalbanomarcomontalbano
authored
Merge pull request #180 from marcomontalbano/i173-add-description-and-documentationLink
Add `description` and `documentationLinks`
2 parents 0df61c1 + 4933197 commit 82b010c

File tree

11 files changed

+115
-52
lines changed

11 files changed

+115
-52
lines changed

‎packages/core/src/lib/_config.helper-test.ts

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,14 @@ export const svg = {
1212
},
1313
};
1414

15-
export const componentWithNumber = {
15+
export const componentWithNumber: Figma.SubcanvasNode = {
16+
...({} as Figma.ComponentNode),
1617
id: '12:3',
1718
name: '1-icon',
1819
type: 'COMPONENT',
1920
};
2021

21-
export const componentWithSlashedName: Figma.Node = {
22+
export const componentWithSlashedName: Figma.SubcanvasNode = {
2223
...({} as Figma.ComponentNode),
2324
id: '9:10',
2425
name: 'icon/Figma-logo',
@@ -27,6 +28,8 @@ export const componentWithSlashedName: Figma.Node = {
2728

2829
export const componentWithSlashedNameOutput: FigmaExport.ComponentNode = {
2930
...componentWithSlashedName,
31+
description: '',
32+
documentationLinks: [],
3033
svg: svg.content,
3134
figmaExport: {
3235
id: '9:10',
@@ -36,7 +39,7 @@ export const componentWithSlashedNameOutput: FigmaExport.ComponentNode = {
3639
},
3740
};
3841

39-
export const component1: Figma.Node = {
42+
export const component1: Figma.SubcanvasNode = {
4043
...({} as Figma.ComponentNode),
4144
id: '10:8',
4245
name: 'Figma-Logo',
@@ -45,6 +48,8 @@ export const component1: Figma.Node = {
4548

4649
export const componentOutput1: FigmaExport.ComponentNode = {
4750
...component1,
51+
description: 'The official Figma logo',
52+
documentationLinks: [{ uri: 'https://www.figma.com' }],
4853
svg: '',
4954
figmaExport: {
5055
id: '10:8',
@@ -54,7 +59,7 @@ export const componentOutput1: FigmaExport.ComponentNode = {
5459
},
5560
};
5661

57-
export const instanceComponent1: Figma.Node = {
62+
export const instanceComponent1: Figma.SubcanvasNode = {
5863
...({} as Figma.InstanceNode),
5964
id: '10:98',
6065
name: 'Figma-Logo (INSTANCE)',
@@ -64,6 +69,8 @@ export const instanceComponent1: Figma.Node = {
6469

6570
export const instanceComponentOutput1: FigmaExport.ComponentNode = {
6671
...instanceComponent1,
72+
description: '',
73+
documentationLinks: [],
6774
svg: '',
6875
figmaExport: {
6976
id: '10:98',
@@ -76,7 +83,7 @@ export const instanceComponentOutput1: FigmaExport.ComponentNode = {
7683
},
7784
};
7885

79-
export const component2: Figma.Node = {
86+
export const component2: Figma.SubcanvasNode = {
8087
...({} as Figma.ComponentNode),
8188
id: '8:1',
8289
name: 'Search',
@@ -85,6 +92,8 @@ export const component2: Figma.Node = {
8592

8693
export const componentOutput2: FigmaExport.ComponentNode = {
8794
...component2,
95+
description: '',
96+
documentationLinks: [],
8897
svg: '',
8998
figmaExport: {
9099
id: '8:1',
@@ -94,7 +103,7 @@ export const componentOutput2: FigmaExport.ComponentNode = {
94103
},
95104
};
96105

97-
export const component3: Figma.Node = {
106+
export const component3: Figma.SubcanvasNode = {
98107
...({} as Figma.ComponentNode),
99108
id: '9:1',
100109
name: 'Login',
@@ -103,6 +112,8 @@ export const component3: Figma.Node = {
103112

104113
export const componentOutput3: FigmaExport.ComponentNode = {
105114
...component3,
115+
description: '',
116+
documentationLinks: [],
106117
svg: '',
107118
figmaExport: {
108119
id: '9:1',
@@ -155,15 +166,17 @@ export const pageWithoutComponents: Figma.CanvasNode = {
155166
children: [],
156167
};
157168

158-
export const createFile = (
159-
props: Pick<Figma.GetFileResponse, 'document'>,
160-
): Figma.GetFileResponse => ({
169+
export const createFile = (props: {
170+
document: Figma.GetFileResponse['document'];
171+
components: Figma.GetFileResponse['components'];
172+
}): Figma.GetFileResponse => ({
161173
...({} as Figma.GetFileResponse),
162174
...props,
163175
});
164176

165-
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
166-
export const createDocument = (props: any): Figma.DocumentNode => ({
177+
export const createDocument = (
178+
props: Partial<Figma.DocumentNode>,
179+
): Figma.DocumentNode => ({
167180
...({} as Figma.DocumentNode),
168181
...props,
169182
});

‎packages/core/src/lib/export-components.test.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import nock from 'nock';
22
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
33

44
import * as figmaDocument from './_config.helper-test.js';
5+
import { components } from './export-components.js';
56

67
describe('export-component', async () => {
78
const logger = vi.fn();
@@ -25,6 +26,7 @@ describe('export-component', async () => {
2526
document: figmaDocument.createDocument({
2627
children: [figmaDocument.page1, figmaDocument.page2],
2728
}),
29+
components: {},
2830
}),
2931
};
3032

‎packages/core/src/lib/figma.test.ts

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import * as figma from './figma.js';
77

88
vi.mock('./client.js');
99

10-
const getComponentsDefaultOptions: Parameters<typeof figma.getComponents>[1] = {
10+
const getComponentsDefaultOptions: Parameters<typeof figma.getComponents>[2] = {
1111
filterComponent: () => true,
1212
includeTypes: ['COMPONENT'],
1313
};
@@ -27,13 +27,24 @@ describe('figma.', () => {
2727

2828
describe('getComponents', () => {
2929
it('should get zero results if no children are provided', () => {
30-
expect(figma.getComponents([], getComponentsDefaultOptions)).to.eql([]);
30+
expect(figma.getComponents([], {}, getComponentsDefaultOptions)).to.eql(
31+
[],
32+
);
3133
});
3234

3335
it('should get all components from a list of children', () => {
3436
expect(
3537
figma.getComponents(
3638
[figmaDocument.component1, figmaDocument.group1],
39+
{
40+
'10:8': {
41+
key: 'KEY_FOR_10:8',
42+
name: 'Figma-Logo',
43+
remote: false,
44+
description: 'The official Figma logo',
45+
documentationLinks: [{ uri: 'https://www.figma.com' }],
46+
},
47+
},
3748
getComponentsDefaultOptions,
3849
[{ name: 'A Frame', type: 'FRAME' }],
3950
),
@@ -47,6 +58,15 @@ describe('figma.', () => {
4758
expect(
4859
figma.getComponents(
4960
[figmaDocument.component1, figmaDocument.group1],
61+
{
62+
'10:8': {
63+
key: 'KEY_FOR_10:8',
64+
name: 'Figma-Logo',
65+
remote: false,
66+
description: 'The official Figma logo',
67+
documentationLinks: [{ uri: 'https://www.figma.com' }],
68+
},
69+
},
5070
{
5171
filterComponent: () => true,
5272
includeTypes: ['INSTANCE'],
@@ -60,6 +80,15 @@ describe('figma.', () => {
6080
expect(
6181
figma.getComponents(
6282
[figmaDocument.component1, figmaDocument.group1],
83+
{
84+
'10:8': {
85+
key: 'KEY_FOR_10:8',
86+
name: 'Figma-Logo',
87+
remote: false,
88+
description: 'The official Figma logo',
89+
documentationLinks: [{ uri: 'https://www.figma.com' }],
90+
},
91+
},
6392
{
6493
filterComponent: () => true,
6594
includeTypes: ['COMPONENT', 'INSTANCE'],
@@ -81,7 +110,7 @@ describe('figma.', () => {
81110

82111
it('should get all pages by default', () => {
83112
const pages = figma.getPagesWithComponents(
84-
figmaDocument.createFile({ document }),
113+
figmaDocument.createFile({ document, components: {} }),
85114
getComponentsDefaultOptions,
86115
);
87116
expect(pages).toEqual(
@@ -94,7 +123,7 @@ describe('figma.', () => {
94123

95124
it('should be able to filter components', () => {
96125
const pages = figma.getPagesWithComponents(
97-
figmaDocument.createFile({ document }),
126+
figmaDocument.createFile({ document, components: {} }),
98127
{
99128
filterComponent: (component) => ['9:1'].includes(component.id),
100129
includeTypes: ['COMPONENT'],
@@ -118,7 +147,7 @@ describe('figma.', () => {
118147
});
119148

120149
const pages = figma.getPagesWithComponents(
121-
figmaDocument.createFile({ document }),
150+
figmaDocument.createFile({ document, components: {} }),
122151
getComponentsDefaultOptions,
123152
);
124153

@@ -140,7 +169,7 @@ describe('figma.', () => {
140169
children: [figmaDocument.page1, figmaDocument.page2],
141170
});
142171
const pages = figma.getPagesWithComponents(
143-
figmaDocument.createFile({ document }),
172+
figmaDocument.createFile({ document, components: {} }),
144173
getComponentsDefaultOptions,
145174
);
146175

‎packages/core/src/lib/figma.ts

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import type * as Figma from '@figma/rest-api-spec';
2-
import * as FigmaSDK from './client.js';
3-
41
import { basename, dirname } from 'node:path';
52
import type * as FigmaExport from '@figma-export/types';
3+
import type * as Figma from '@figma/rest-api-spec';
64
import pLimit from 'p-limit';
75
import pRetry from 'p-retry';
6+
import * as FigmaSDK from './client.js';
87

98
import {
109
type PickOption,
@@ -139,7 +138,8 @@ function isNodeOfType<
139138
}
140139

141140
export const getComponents = (
142-
children: readonly Figma.Node[],
141+
children: readonly Figma.SubcanvasNode[],
142+
componentMetadata: { [key: string]: Figma.Component },
143143
{
144144
filterComponent,
145145
includeTypes,
@@ -155,8 +155,11 @@ export const getComponents = (
155155

156156
for (const node of children) {
157157
if (isNodeOfType(includeTypes, node) && filterComponent(node)) {
158+
const metadata: Figma.Component | undefined = componentMetadata[node.id];
158159
components.push({
159160
...node,
161+
description: metadata?.description ?? '',
162+
documentationLinks: metadata?.documentationLinks ?? [],
160163
svg: '',
161164
figmaExport: {
162165
id: node.id,
@@ -171,10 +174,12 @@ export const getComponents = (
171174
if ('children' in node) {
172175
components = [
173176
...components,
174-
...getComponents(node.children, { filterComponent, includeTypes }, [
175-
...pathToComponent,
176-
{ name: node.name, type: node.type },
177-
]),
177+
...getComponents(
178+
node.children,
179+
componentMetadata,
180+
{ filterComponent, includeTypes },
181+
[...pathToComponent, { name: node.name, type: node.type }],
182+
),
178183
];
179184
}
180185
}
@@ -303,7 +308,7 @@ export const getPagesWithComponents = (
303308
return pages
304309
.map((page) => ({
305310
...page,
306-
components: getComponents(page.children, options),
311+
components: getComponents(page.children, file.components, options),
307312
}))
308313
.filter((page) => page.components.length > 0);
309314
};

‎packages/output-components-as-es6/src/index.test.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import outputter from './index.js';
1717

1818
vi.mock('fs');
1919

20-
const getComponentsDefaultOptions: Parameters<typeof figma.getComponents>[1] = {
20+
const getComponentsDefaultOptions: Parameters<typeof figma.getComponents>[2] = {
2121
filterComponent: () => true,
2222
includeTypes: ['COMPONENT'],
2323
};
@@ -67,7 +67,7 @@ describe('outputter as es6', () => {
6767
children: [figmaDocument.page1],
6868
});
6969
const pages: FigmaExport.PageNode[] = figma.getPagesWithComponents(
70-
figmaDocument.createFile({ document }),
70+
figmaDocument.createFile({ document, components: {} }),
7171
getComponentsDefaultOptions,
7272
);
7373
const pagesWithSvg = await figma.enrichPagesWithSvg(
@@ -97,7 +97,7 @@ describe('outputter as es6', () => {
9797
children: [figmaDocument.page1],
9898
});
9999
const pages: FigmaExport.PageNode[] = figma.getPagesWithComponents(
100-
figmaDocument.createFile({ document }),
100+
figmaDocument.createFile({ document, components: {} }),
101101
getComponentsDefaultOptions,
102102
);
103103
const pagesWithSvg = await figma.enrichPagesWithSvg(
@@ -129,7 +129,7 @@ describe('outputter as es6', () => {
129129
children: [figmaDocument.page1],
130130
});
131131
const pages: FigmaExport.PageNode[] = figma.getPagesWithComponents(
132-
figmaDocument.createFile({ document }),
132+
figmaDocument.createFile({ document, components: {} }),
133133
getComponentsDefaultOptions,
134134
);
135135
const pagesWithSvg = await figma.enrichPagesWithSvg(
@@ -161,7 +161,7 @@ describe('outputter as es6', () => {
161161
children: [figmaDocument.page1],
162162
});
163163
const pages: FigmaExport.PageNode[] = figma.getPagesWithComponents(
164-
figmaDocument.createFile({ document }),
164+
figmaDocument.createFile({ document, components: {} }),
165165
getComponentsDefaultOptions,
166166
);
167167
const pagesWithSvg = await figma.enrichPagesWithSvg(
@@ -198,7 +198,7 @@ describe('outputter as es6', () => {
198198
children: [figmaDocument.page1],
199199
});
200200
const pages: FigmaExport.PageNode[] = figma.getPagesWithComponents(
201-
figmaDocument.createFile({ document }),
201+
figmaDocument.createFile({ document, components: {} }),
202202
getComponentsDefaultOptions,
203203
);
204204
const pagesWithSvg = await figma.enrichPagesWithSvg(
@@ -235,7 +235,7 @@ describe('outputter as es6', () => {
235235

236236
const document = figmaDocument.createDocument({ children: [page] });
237237
const pages: FigmaExport.PageNode[] = figma.getPagesWithComponents(
238-
figmaDocument.createFile({ document }),
238+
figmaDocument.createFile({ document, components: {} }),
239239
getComponentsDefaultOptions,
240240
);
241241

@@ -256,7 +256,7 @@ describe('outputter as es6', () => {
256256

257257
const document = figmaDocument.createDocument({ children: [page] });
258258
const pages: FigmaExport.PageNode[] = figma.getPagesWithComponents(
259-
figmaDocument.createFile({ document }),
259+
figmaDocument.createFile({ document, components: {} }),
260260
getComponentsDefaultOptions,
261261
);
262262

@@ -274,7 +274,7 @@ describe('outputter as es6', () => {
274274
children: [figmaDocument.page1WithSlashes],
275275
});
276276
const pages: FigmaExport.PageNode[] = figma.getPagesWithComponents(
277-
figmaDocument.createFile({ document }),
277+
figmaDocument.createFile({ document, components: {} }),
278278
getComponentsDefaultOptions,
279279
);
280280
const pagesWithSvg = await figma.enrichPagesWithSvg(

0 commit comments

Comments
 (0)