handoff-app 0.9.2 → 0.10.0

package/Changelog.md

@@ -6,6 +6,48 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.10.0] - 2024-01-16
+
+### Improvements
+
+* Docs App:
+  * Updated docs app to present components without associated content and assets more elegantly.
+  * Improved the component pages by showing only the "Tokens" tab when no previews are detected; the "Overview" tab is hidden in such cases.
+* Configuration Handling:
+  * Eliminated the need for `handoff.state.json` file.
+  * All required parameters are now passed to the docs app through environment variables (`process.env`), defined in the project's respective `next.config.js` file.
+  * Replaced `getConfig` with the more secure `getClientConfig` function.
+  * New function returns only configurations that can be safely exposed on the client side.
+
+### Changes
+
+* Handoff Figma Plugin Support:
+  * Introduced initial support for the Handoff Figma Plugin.
+  * Currently an opt-in feature as development is ongoing.
+  * Can be enabled by setting `USE_HANDOFF_PLUGIN="TRUE"` in your `.env` file.
+  * This functionality allows Handoff to extract metadata directly from the Figma file. Local JSON definitions are completely ignored in this case.
+  * Will become the default behavior in the 1.0.0 release!
+* Deprecation Notice:
+  * Deprecated local exportable component JSON definitions.
+  * Still usable, but will be completely removed and ignored before the 1.0.0 release.
+  * Components, parts, and related definitions should be defined with the Handoff Figma Plugin prior to the 1.0.0 release.
+
+## [0.9.3] - 2023-11-23
+
+### Improvements
+
+* It's now possible to declare conditions for exportable component parts. Condition dictates should the part be built based on provided condition (e.g. does a specific variant property have a certain value etc.).
+* Handoff will now process all component sets found within the frame in which the component set that matches the search is found. Previously it was limited to process only one (first) extra component set while others were ignored.
+
+### Changes
+
+* Component preview title will no longer default to the value of the first variant property if no distinctive value is found. Empty value is now used instead.
+
+### Bugfixes
+
+* Update of the app source will now update the watched app without having to restart the watch process (issue introduced in version 0.9.0).
+
+
 ## [0.9.2] - 2023-11-21
 
 ### Improvements

package/config/docs/components/button.design.json

@@ -0,0 +1,24 @@
+{
+  "views": {
+    "overview": {
+      "condition": {
+        "State": ["default"],
+        "Theme": ["light"]
+      },
+      "sort": ["Type", "Size"]
+    },
+    "tokens": {
+      "condition": {
+        "State": {
+          "default": {
+            "State": ["default", "hover", "disabled"],
+            "Theme": ["light"]
+          }
+        },
+        "Theme": ["light"],
+        "Size": [""]
+      },
+      "sort": ["Type", "Size"]
+    }
+  }
+}

package/config/exportables/components/button.json

@@ -33,8 +33,7 @@
           "design": {
             "State": "default",
             "Theme": "light"
-          },
-          "layout": {}
+          }
         },
         "designTokens": {
           "design": {
@@ -49,6 +48,9 @@
               }
             },
             "Theme": "light"
+          },
+          "layout": {
+            "Size": ""
           }
         }
       }

package/config/exportables/components/checkbox.json

@@ -36,6 +36,9 @@
             ],
             "Activity": "off",
             "Theme": "light"
+          },
+          "layout": {
+            "Size": ""
           }
         },
         "designTokens": {
@@ -51,6 +54,9 @@
               }
             },
             "Theme": "light"
+          },
+          "layout": {
+            "Size": ""
           }
         }
       }

package/config/exportables/components/input.json

@@ -34,6 +34,9 @@
               "disabled"
             ],
             "Theme": "light"
+          },
+          "layout": {
+            "Size": ""
           }
         },
         "designTokens": {
@@ -64,6 +67,9 @@
               }
             },
             "Theme": "light"
+          },
+          "layout": {
+            "Size": ""
           }
         }
       }

package/config/exportables/components/radio.json

@@ -36,6 +36,9 @@
             ],
             "Activity": "off",
             "Theme": "light"
+          },
+          "layout": {
+            "Size": ""
           }
         },
         "designTokens": {
@@ -51,6 +54,9 @@
               }
             },
             "Theme": "light"
+          },
+          "layout": {
+            "Size": ""
           }
         }
       }

package/config/exportables/components/select.json

@@ -34,6 +34,9 @@
               "disabled"
             ],
             "Theme": "light"
+          },
+          "layout": {
+            "Size": ""
           }
         },
         "designTokens": {
@@ -62,6 +65,9 @@
               }
             },
             "Theme": "light"
+          },
+          "layout": {
+            "Size": ""
           }
         }
       }

package/config/exportables/components/switch.json

@@ -36,6 +36,9 @@
             ],
             "Activity": "off",
             "Theme": "light"
+          },
+          "layout": {
+            "Size": ""
           }
         },
         "designTokens": {
@@ -51,6 +54,9 @@
               }
             },
             "Theme": "light"
+          },
+          "layout": {
+            "Size": ""
           }
         }
       }

package/dist/api.d.ts

@@ -2,5 +2,5 @@ export { zipAssets } from './exporters/assets';
 export { default as generateChangelogRecord } from './changelog';
 export { createDocumentationObject } from './documentation-object';
 export type { AssetObject, ColorGroup, ColorObject, DocumentationObject, RGBObject, TypographyObject } from './types';
-export type { DocumentComponentsObject as ComponentObject } from './exporters/components/index';
+export type { FileComponentsObject as ComponentObject } from './exporters/components/types';
 export type { ChangelogRecord } from './changelog';

package/dist/app.js

@@ -92,10 +92,10 @@ var mergePublicDir = function (handoff) { return __awaiter(void 0, void 0, void
     });
 }); };
 var prepareProjectApp = function (handoff) { return __awaiter(void 0, void 0, void 0, function () {
-    var srcPath, appPath, handoffAppBasePath, handoffWorkingPath, handoffExportPath, nextConfigPath, nextConfigContent;
-    var _a;
-    return __generator(this, function (_b) {
-        switch (_b.label) {
+    var srcPath, appPath, handoffProjectId, handoffAppBasePath, handoffWorkingPath, handoffModulePath, handoffExportPath, nextConfigPath, nextConfigContent;
+    var _a, _b;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
             case 0:
                 srcPath = path_1.default.resolve(handoff.modulePath, 'src', 'app');
                 appPath = getAppPath(handoff);
@@ -103,27 +103,31 @@ var prepareProjectApp = function (handoff) { return __awaiter(void 0, void 0, vo
                 return [4 /*yield*/, fs_extra_1.default.promises.mkdir(appPath, { recursive: true })];
             case 1:
                 // Prepare project app dir
-                _b.sent();
+                _c.sent();
                 return [4 /*yield*/, fs_extra_1.default.copy(srcPath, appPath, { overwrite: true })];
             case 2:
-                _b.sent();
+                _c.sent();
                 return [4 /*yield*/, mergePublicDir(handoff)];
             case 3:
-                _b.sent();
-                handoffAppBasePath = (_a = handoff.config.app.base_path) !== null && _a !== void 0 ? _a : '';
+                _c.sent();
+                handoffProjectId = (_a = handoff.config.figma_project_id) !== null && _a !== void 0 ? _a : '';
+                handoffAppBasePath = (_b = handoff.config.app.base_path) !== null && _b !== void 0 ? _b : '';
                 handoffWorkingPath = path_1.default.resolve(handoff.workingPath);
+                handoffModulePath = path_1.default.resolve(handoff.modulePath);
                 handoffExportPath = path_1.default.resolve(handoff.workingPath, handoff.outputDirectory, handoff.config.figma_project_id);
                 nextConfigPath = path_1.default.resolve(appPath, 'next.config.js');
                 return [4 /*yield*/, fs_extra_1.default.readFile(nextConfigPath, 'utf-8')];
             case 4:
-                nextConfigContent = (_b.sent())
+                nextConfigContent = (_c.sent())
                     .replace(/basePath:\s+\'\'/g, "basePath: '".concat(handoffAppBasePath, "'"))
+                    .replace(/HANDOFF_PROJECT_ID:\s+\'\'/g, "HANDOFF_PROJECT_ID: '".concat(handoffProjectId, "'"))
                     .replace(/HANDOFF_APP_BASE_PATH:\s+\'\'/g, "HANDOFF_APP_BASE_PATH: '".concat(handoffAppBasePath, "'"))
                     .replace(/HANDOFF_WORKING_PATH:\s+\'\'/g, "HANDOFF_WORKING_PATH: '".concat(handoffWorkingPath, "'"))
+                    .replace(/HANDOFF_MODULE_PATH:\s+\'\'/g, "HANDOFF_MODULE_PATH: '".concat(handoffModulePath, "'"))
                     .replace(/HANDOFF_EXPORT_PATH:\s+\'\'/g, "HANDOFF_EXPORT_PATH: '".concat(handoffExportPath, "'"));
                 return [4 /*yield*/, fs_extra_1.default.writeFile(nextConfigPath, nextConfigContent)];
             case 5:
-                _b.sent();
+                _c.sent();
                 return [2 /*return*/, appPath];
         }
     });
@@ -179,6 +183,31 @@ var watchApp = function (handoff) { return __awaiter(void 0, void 0, void 0, fun
             case 1:
                 appPath = _a.sent();
                 config = require(path_1.default.resolve(appPath, 'next.config.js'));
+                // Include any changes made within the app source during watch
+                chokidar_1.default.watch(path_1.default.resolve(handoff.modulePath, 'src', 'app'), {
+                    ignored: /(^|[\/\\])\../,
+                    persistent: true,
+                    ignoreInitial: true,
+                }).on('all', function (event, path) { return __awaiter(void 0, void 0, void 0, function () {
+                    var _a;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _a = event;
+                                switch (_a) {
+                                    case 'add': return [3 /*break*/, 1];
+                                    case 'change': return [3 /*break*/, 1];
+                                    case 'unlink': return [3 /*break*/, 1];
+                                }
+                                return [3 /*break*/, 3];
+                            case 1: return [4 /*yield*/, prepareProjectApp(handoff)];
+                            case 2:
+                                _b.sent();
+                                return [3 /*break*/, 3];
+                            case 3: return [2 /*return*/];
+                        }
+                    });
+                }); });
                 tsconfigPath = 'tsconfig.json';
                 config.typescript = __assign(__assign({}, config.typescript), { tsconfigPath: tsconfigPath });
                 dev = true;

package/dist/cli.js

@@ -80,7 +80,7 @@ var showHelp = function () {
  * Show the help message
  */
 var showVersion = function () {
-    cliError('Handoff App - 0.9.2', 2);
+    cliError('Handoff App - 0.10.0', 2);
 };
 /**
  * Define a CLI error
@@ -96,7 +96,7 @@ var cliError = function (msg, exitCode) {
 };
 var watching = false;
 var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, void 0, function () {
-    var args, handoff_1, _a, type, name_1, templateComponent, templateState, pageName, pageParent, e_1;
+    var args, handoff, _a, type, name_1, templateComponent, templateState, pageName, pageParent, e_1;
     return __generator(this, function (_b) {
         switch (_b.label) {
             case 0:
@@ -122,12 +122,12 @@ var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, voi
                 if (args['--version']) {
                     return [2 /*return*/, showVersion()];
                 }
-                handoff_1 = new _1.default();
+                handoff = new _1.default();
                 if (args['--debug']) {
-                    handoff_1.debug = true;
+                    handoff.debug = true;
                 }
                 if (args['--force']) {
-                    handoff_1.force = true;
+                    handoff.force = true;
                 }
                 _a = args._[0];
                 switch (_a) {
@@ -148,26 +148,26 @@ var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, voi
                     case 'make:page': return [3 /*break*/, 16];
                 }
                 return [3 /*break*/, 17];
-            case 1: return [2 /*return*/, handoff_1.fetch()];
-            case 2: return [4 /*yield*/, handoff_1.build()];
+            case 1: return [2 /*return*/, handoff.fetch()];
+            case 2: return [4 /*yield*/, handoff.build()];
             case 3:
                 _b.sent();
-                return [2 /*return*/, handoff_1];
+                return [2 /*return*/, handoff];
             case 4:
                 watching = true;
-                return [2 /*return*/, handoff_1.start()];
+                return [2 /*return*/, handoff.start()];
             case 5:
                 watching = true;
-                return [2 /*return*/, handoff_1.dev()];
-            case 6: return [2 /*return*/, handoff_1.integration()];
+                return [2 /*return*/, handoff.dev()];
+            case 6: return [2 /*return*/, handoff.integration()];
             case 7:
                 cliError("Eject commands will eject the default configuration into the working directory so you can customize it.\n\nEject must have a subcommand. Did you mean:\n  - eject:config\n  - eject:exportables\n  - eject:integration\n  - eject:docs\n  - eject:theme.", 2);
                 return [3 /*break*/, 18];
-            case 8: return [2 /*return*/, handoff_1.ejectConfig()];
-            case 9: return [2 /*return*/, handoff_1.ejectIntegration()];
-            case 10: return [2 /*return*/, handoff_1.ejectExportables()];
-            case 11: return [2 /*return*/, handoff_1.ejectTheme()];
-            case 12: return [2 /*return*/, handoff_1.ejectPages()];
+            case 8: return [2 /*return*/, handoff.ejectConfig()];
+            case 9: return [2 /*return*/, handoff.ejectIntegration()];
+            case 10: return [2 /*return*/, handoff.ejectExportables()];
+            case 11: return [2 /*return*/, handoff.ejectTheme()];
+            case 12: return [2 /*return*/, handoff.ejectPages()];
             case 13:
                 cliError("Make commands create configuration files in your working root and scaffold up the appropriate folder structure if needed.\n\n  Make must have a subcommand. Did you mean:\n    - make:template\n    - make:exportable\n    - make:page", 2);
                 return [3 /*break*/, 18];
@@ -183,7 +183,7 @@ var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, voi
                 if (!/^[a-z0-9]+$/i.test(name_1)) {
                     cliError("Exportable name must be alphanumeric and may contain dashes or underscores", 2);
                 }
-                return [2 /*return*/, handoff_1.makeExportable(type, name_1)];
+                return [2 /*return*/, handoff.makeExportable(type, name_1)];
             case 15:
                 templateComponent = args._[1];
                 if (!templateComponent) {
@@ -196,7 +196,7 @@ var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, voi
                 if (templateState && !/^[a-z0-9]+$/i.test(templateComponent)) {
                     cliError("Template state must be alphanumeric and may contain dashes or underscores", 2);
                 }
-                return [2 /*return*/, handoff_1.makeTemplate(templateComponent, templateState)];
+                return [2 /*return*/, handoff.makeTemplate(templateComponent, templateState)];
             case 16:
                 pageName = args._[1];
                 if (!pageName) {
@@ -209,7 +209,7 @@ var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, voi
                 if (pageParent && !/^[a-z0-9]+$/i.test(pageParent)) {
                     cliError("Page parent must be alphanumeric and may contain dashes or underscores", 2);
                 }
-                return [2 /*return*/, handoff_1.makePage(pageName, pageParent)];
+                return [2 /*return*/, handoff.makePage(pageName, pageParent)];
             case 17: return [2 /*return*/, showHelp()];
             case 18: return [3 /*break*/, 20];
             case 19:

package/dist/config.d.ts

@@ -1,4 +1,3 @@
-import Handoff from '.';
 import { Config } from './types/config';
 export interface ImageStyle {
     name: string;
@@ -9,21 +8,7 @@ export interface ImageStyle {
 }
 export declare const defaultConfig: () => Config;
 /**
- * Get the config, either from the root of the project or from the default config
+ * Get the configuration formatted for the client, either from the root of the project or from the default config.
  * @returns Promise<Config>
  */
-export declare const getConfig: (configOverride?: any) => Config;
-/**
- * Get the handoff from the global scope
- * @returns Handoff
- */
-export declare const getHandoff: () => Handoff;
-/**
- * Serialize the handoff to the working directory
- */
-export declare const serializeHandoff: (handoff: Handoff) => void;
-/**
- * Deserialize the handoff from the working directory
- * @returns
- */
-export declare const deserializeHandoff: () => any;
+export declare const getClientConfig: (configOverride?: any) => any;

package/dist/config.js

@@ -14,11 +14,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.deserializeHandoff = exports.serializeHandoff = exports.getHandoff = exports.getConfig = exports.defaultConfig = void 0;
+exports.getClientConfig = exports.defaultConfig = void 0;
 var fs_extra_1 = __importDefault(require("fs-extra"));
 var path_1 = __importDefault(require("path"));
 var defaultConfig = function () {
-    var _a, _b;
+    var _a, _b, _c;
     return ({
         dev_access_token: (_a = process.env.DEV_ACCESS_TOKEN) !== null && _a !== void 0 ? _a : null,
         figma_project_id: (_b = process.env.FIGMA_PROJECT_ID) !== null && _b !== void 0 ? _b : null,
@@ -75,17 +75,15 @@ var defaultConfig = function () {
                 'components/switch',
             ],
         },
+        use_legacy_definitions: ((_c = process.env.USE_HANDOFF_PLUGIN) !== null && _c !== void 0 ? _c : "").toLowerCase() !== "true"
     });
 };
 exports.defaultConfig = defaultConfig;
 /**
- * Get the config, either from the root of the project or from the default config
+ * Get the configuration formatted for the client, either from the root of the project or from the default config.
  * @returns Promise<Config>
  */
-var getConfig = function (configOverride) {
-    // if (global.handoff && global.handoff.config) {
-    //   return global.handoff.config;
-    // }
+var getClientConfig = function (configOverride) {
     // Check to see if there is a config in the root of the project
     var config = {};
     var configPath = path_1.default.resolve(process.cwd(), 'handoff.config.json');
@@ -96,54 +94,12 @@ var getConfig = function (configOverride) {
     if (configOverride) {
         config = __assign(__assign({}, config), configOverride);
     }
-    var result = __assign(__assign({}, (0, exports.defaultConfig)()), config);
-    // Anonymize the configuration!
-    delete result.figma_project_id;
-    delete result.dev_access_token;
-    return result;
-};
-exports.getConfig = getConfig;
-/**
- * Get the handoff from the global scope
- * @returns Handoff
- */
-var getHandoff = function () {
-    // if (global.handoff) {
-    //   return global.handoff;
-    // }
-    // check for a serialized version
-    var handoff = (0, exports.deserializeHandoff)();
-    if (handoff) {
-        // global.handoff = handoff;
-        return handoff;
-    }
-    throw Error('Handoff not initialized');
-};
-exports.getHandoff = getHandoff;
-/**
- * Serialize the handoff to the working directory
- */
-var serializeHandoff = function (handoff) {
-    var outputPath = path_1.default.resolve(handoff.workingPath, handoff.outputDirectory, handoff.config.figma_project_id);
-    if (!fs_extra_1.default.existsSync(outputPath)) {
-        fs_extra_1.default.mkdirSync(path_1.default.resolve(outputPath), { recursive: true });
-    }
-    var statePath = path_1.default.resolve(outputPath, 'handoff.state.json');
-    fs_extra_1.default.writeFileSync(statePath, JSON.stringify(handoff));
-};
-exports.serializeHandoff = serializeHandoff;
-/**
- * Deserialize the handoff from the working directory
- * @returns
- */
-var deserializeHandoff = function () {
-    var _a;
-    var statePath = process.env.HANDOFF_EXPORT_PATH ? path_1.default.resolve(process.env.HANDOFF_EXPORT_PATH, 'handoff.state.json') : path_1.default.resolve(process.cwd(), (_a = process.env.OUTPUT_DIR) !== null && _a !== void 0 ? _a : 'exported', 'handoff.state.json');
-    if (fs_extra_1.default.existsSync(statePath)) {
-        var stateBuffer = fs_extra_1.default.readFileSync(statePath);
-        var state = JSON.parse(stateBuffer.toString());
-        return state;
-    }
-    throw Error('Handoff cannot be deserialized');
+    var _a = __assign(__assign({}, (0, exports.defaultConfig)()), config), app = _a.app, figma = _a.figma, assets_zip_links = _a.assets_zip_links, use_legacy_definitions = _a.use_legacy_definitions;
+    return {
+        app: app,
+        figma: figma,
+        assets_zip_links: assets_zip_links !== null && assets_zip_links !== void 0 ? assets_zip_links : { icons: null, logos: null },
+        use_legacy_definitions: use_legacy_definitions
+    };
 };
-exports.deserializeHandoff = deserializeHandoff;
+exports.getClientConfig = getClientConfig;

package/dist/documentation-object.d.ts

@@ -1,2 +1,2 @@
-import { DocumentationObject, ExportableDefinition } from './types';
-export declare const createDocumentationObject: (figmaFileKey: string, figmaAccessToken: string, exportables: ExportableDefinition[]) => Promise<DocumentationObject>;
+import { DocumentationObject, LegacyComponentDefinition } from './types';
+export declare const createDocumentationObject: (figmaFileKey: string, figmaAccessToken: string, legacyDefinitions?: LegacyComponentDefinition[]) => Promise<DocumentationObject>;

package/dist/documentation-object.js

@@ -41,29 +41,27 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createDocumentationObject = void 0;
 var assets_1 = __importDefault(require("./exporters/assets"));
-var index_1 = __importDefault(require("./exporters/components/index"));
-var design_1 = __importDefault(require("./exporters/design"));
+var index_1 = require("./exporters/components/index");
+var design_1 = require("./exporters/design");
 var startCase_1 = __importDefault(require("lodash/startCase"));
 var chalk_1 = __importDefault(require("chalk"));
-var createDocumentationObject = function (figmaFileKey, figmaAccessToken, exportables) { return __awaiter(void 0, void 0, void 0, function () {
+var createDocumentationObject = function (figmaFileKey, figmaAccessToken, legacyDefinitions) { return __awaiter(void 0, void 0, void 0, function () {
     var components, design, icons, logos;
     return __generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, (0, index_1.default)(figmaFileKey, figmaAccessToken, exportables)];
+            case 0: return [4 /*yield*/, (0, index_1.getFigmaFileComponents)(figmaFileKey, figmaAccessToken, legacyDefinitions)];
             case 1:
                 components = _a.sent();
                 // Log out components
-                if (Object.keys(components).filter(function (component) { return components[component].length > 0; }).length > 0) {
-                    Object.keys(components).map(function (component) {
-                        if (components[component].length === 0) {
-                            console.error(chalk_1.default.grey("".concat((0, startCase_1.default)(component), " could not be located in the figma file")));
-                        }
-                        else {
-                            console.log(chalk_1.default.green("".concat((0, startCase_1.default)(component), " exported:")), components[component].length);
-                        }
-                    });
-                }
-                return [4 /*yield*/, (0, design_1.default)(figmaFileKey, figmaAccessToken)];
+                Object.keys(components).map(function (component) {
+                    if (components[component].instances.length === 0) {
+                        console.error(chalk_1.default.grey("Skipping \"".concat((0, startCase_1.default)(component), "\". Reason: No matching component instances were found.")));
+                    }
+                    else {
+                        console.log(chalk_1.default.green("".concat((0, startCase_1.default)(component), " exported:")), components[component].instances.length);
+                    }
+                });
+                return [4 /*yield*/, (0, design_1.getFigmaFileDesignTokens)(figmaFileKey, figmaAccessToken)];
             case 2:
                 design = _a.sent();
                 return [4 /*yield*/, (0, assets_1.default)(figmaFileKey, figmaAccessToken, 'Icons')];

package/dist/exporters/components/extractor.d.ts

@@ -1,14 +1,7 @@
 import * as ExportTypes from './types';
-import { ExportableDefinition } from '../../types';
-import { GetComponentSetComponentsResult } from '.';
-export interface Component {
-    id: string;
-    name: string;
-    description?: string;
-    type: 'design' | 'layout';
-    variantProperties: [string, string][];
-    parts?: {
-        [key: string]: ExportTypes.TokenSets;
-    };
-}
-export default function extractComponents(componentSetComponentsResult: GetComponentSetComponentsResult, definition: ExportableDefinition): Component[];
+import * as FigmaTypes from '../../figma/types';
+import { ComponentDefinition, LegacyComponentDefinition } from '../../types';
+export default function extractComponentInstances(components: {
+    node: FigmaTypes.Component;
+    metadata: FigmaTypes.ComponentMetadata;
+}[], definition: ComponentDefinition, legacyDefinition?: LegacyComponentDefinition): ExportTypes.ComponentInstance[];