handoff-app 0.8.3 → 0.8.5

package/Changelog.md

@@ -6,6 +6,18 @@ 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.8.5] - 2023-10-05
+
+Miscellaneous improvements to ejecting of integrations, integration handling and building of previews to make it easier for the exported integration to be included in a bootstrap project.
+
+## [0.8.4] - 2023-10-02
+
+Handoff users reported a bug in `handoff-app build:app` last week. The bug didn't manifest in regression testing. This error was traced to typings in a dependency of `next`.
+
+### Bugfix
+
+- Nextjs released 13.5.x which has conflict with the handoff build. This release instructs package.json to stay with 13.4.x while the conflict is resolved.
+
 ## [0.8.3] - 2023-09-27
 
 ### Changes
@@ -42,7 +54,7 @@ Here are the steps that need to be done:
 
 Replace glob import lines with the respective import tokens. Note that design foundation tokens are manually imported as the tokens only handle imports related to the exported components.
 
-*Before the new release:*
+_Before the new release:_
 
 ```scss
 @import './exported/tokens/types/*';
@@ -50,7 +62,7 @@ Replace glob import lines with the respective import tokens. Note that design fo
 @import './exported/tokens/css/*';
 ```
 
-*With the new release:*
+_With the new release:_
 
 ```scss
 @import './exported/tokens/types/typography';
@@ -71,14 +83,14 @@ Replace glob import lines with the respective import tokens. Note that design fo
 
 Add the `//<#HANDOFF.MAPS#>` replace token below the `@import 'variables'` statement. This will ensure that all variables related to the exported (built-in) components are correctly loaded.
 
-*Before the new release:*
+_Before the new release:_
 
 ```scss
 $prefix: '';
 @import 'variables';
 ```
 
-*With the new release:*
+_With the new release:_
 
 ```scss
 $prefix: '';
@@ -90,7 +102,7 @@ $prefix: '';
 
 Replace all import statements used to extend the default Bootstrap components with the new `//<#HANDOFF.EXTENSIONS#>` import token to ensure that only those files that are related to the components that are actually being exported get imported.
 
-*Before the new release:*
+_Before the new release:_
 
 ```scss
 @import 'extended/alert';
@@ -99,7 +111,7 @@ Replace all import statements used to extend the default Bootstrap components wi
 ...
 ```
 
-*With the new release:*
+_With the new release:_
 
 ```scss
 //<#HANDOFF.EXTENSIONS#>
@@ -111,7 +123,7 @@ Due to changes made to the `variables.scss` file and most of the scss files in t
 
 ### Bugfixes
 
-* Updated the preview client build to not include the main SASS integration file as a extra integration in order to prevent redundant loading of the integration which caused the client bundle size to be double the size than it really needed to be while also causing few more issues in the new release where the styles wouldn't get applied correctly.
+- Updated the preview client build to not include the main SASS integration file as a extra integration in order to prevent redundant loading of the integration which caused the client bundle size to be double the size than it really needed to be while also causing few more issues in the new release where the styles wouldn't get applied correctly.
 
 ## [0.8.1] - 2023-09-06
 
@@ -133,12 +145,12 @@ This release allows you to name and configure these properties, and map them to
 
 - Exportable (JSON file) now has a updated syntax to share variant over multiple design components based on the variant props.
   - `supportedVariantProps` now accepts an object rather than an array. This object has two properties `design` and `layout`. Users should declare the props that should be pulled as an array of each of these props. The props should be the name as it is in Figma, not the old key names Handoff used to require.
-  - The previous templates for css and scss token patterns have been removed in favor of `tokenNameSegments`. This a tokenized array of strings that allow you to generate token names for each component following a pattern. 
+  - The previous templates for css and scss token patterns have been removed in favor of `tokenNameSegments`. This a tokenized array of strings that allow you to generate token names for each component following a pattern.
   - In the `demo` section, under the tabs, you can now declare the default value for each property.
   - In the `demo` section, under `designTokens` you can explicitly declare all the values of a property to show on the demo page.
   - Previously you could do `State(:disabled)` which would automatically apply the "disabled" state to all design components, distinctive only by the theme (which means light theme would have one shared disabled state while dark theme would have a different one).
   - The update allows you to do this `State(:disabled/Theme)` which removes the need for us to know what the theme variant property is and to allow users to distinct over any variant property they have and desire.
-  - This allows handoff to choose NOT to group/distinct by any variant property. Previously this was not possible as if there was a theme variant property present, it would be automatically used to group by it. 
+  - This allows handoff to choose NOT to group/distinct by any variant property. Previously this was not possible as if there was a theme variant property present, it would be automatically used to group by it.
 - Paths for preview templates now account for all variant properties, but, if some of them are missing in the integration templates folder for the component, it will be dismissed and we will try starting from the next one (for example, if theme is not there as a folder, we will ignore it and proceed to the next variant prop and so on). This also removes the need for us to know what the theme variant property is as we don't need to filter them out based on if it's a theme variant prop or not.
 - Component titles in the app now have a smarter way of automatically determining the title of the preview component. This is achieved by looking into the filters used to display the previews of the components and decide which variant property you probably want to use in the name of the component preview.
 

package/config/integrations/bootstrap/5.2/sass/main.scss

@@ -16,7 +16,7 @@
 // 1. Initialize Bootstrap
 // ------------------------------------------------------------------
 
-@import 'bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/functions';
 
 // 2. Handoff Tokens
 //    Load empty default variables that prevent the build from
@@ -26,17 +26,17 @@
 
 @import 'variables-default';
 
-@import './exported/tokens/types/typography';
-@import './exported/tokens/types/effects';
-@import './exported/tokens/types/colors';
+@import '../tokens/types/typography';
+@import '../tokens/types/effects';
+@import '../tokens/types/colors';
 //<#HANDOFF.TOKENS.TYPES#>
-@import './exported/tokens/sass/typography';
-@import './exported/tokens/sass/effects';
-@import './exported/tokens/sass/colors';
+@import '../tokens/sass/typography';
+@import '../tokens/sass/effects';
+@import '../tokens/sass/colors';
 //<#HANDOFF.TOKENS.SASS#>
-@import './exported/tokens/css/typography';
-@import './exported/tokens/css/effects';
-@import './exported/tokens/css/colors';
+@import '../tokens/css/typography';
+@import '../tokens/css/effects';
+@import '../tokens/css/colors';
 //<#HANDOFF.TOKENS.CSS#>
 
 // 3. Project Variables
@@ -50,49 +50,49 @@ $prefix: '';
 //    Load Bootstrap variables
 // ------------------------------------------------------------------
 
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/maps';
-@import 'bootstrap/scss/mixins';
-@import 'bootstrap/scss/utilities';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/maps';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/utilities';
 
 
 // 5. Bootstrap Base and Components
 //    Load Bootstrap configuration, layout, components, helpers, utilities
 // ------------------------------------------------------------------
 
-@import 'bootstrap/scss/root';
-@import 'bootstrap/scss/reboot';
-@import 'bootstrap/scss/type';
-@import 'bootstrap/scss/images';
-@import 'bootstrap/scss/containers';
-@import 'bootstrap/scss/grid';
-@import 'bootstrap/scss/tables';
-@import 'bootstrap/scss/forms';
-@import 'bootstrap/scss/buttons';
-@import 'bootstrap/scss/transitions';
-@import 'bootstrap/scss/dropdown';
-@import 'bootstrap/scss/button-group';
-@import 'bootstrap/scss/nav';
-@import 'bootstrap/scss/navbar';
-@import 'bootstrap/scss/card';
-@import 'bootstrap/scss/accordion';
-@import 'bootstrap/scss/breadcrumb';
-@import 'bootstrap/scss/pagination';
-@import 'bootstrap/scss/badge';
-@import 'bootstrap/scss/alert';
-@import 'bootstrap/scss/progress';
-@import 'bootstrap/scss/list-group';
-@import 'bootstrap/scss/close';
-@import 'bootstrap/scss/toasts';
-@import 'bootstrap/scss/modal';
-@import 'bootstrap/scss/tooltip';
-@import 'bootstrap/scss/popover';
-@import 'bootstrap/scss/carousel';
-@import 'bootstrap/scss/spinners';
-@import 'bootstrap/scss/offcanvas';
-@import 'bootstrap/scss/placeholders';
-@import 'bootstrap/scss/helpers';
-@import 'bootstrap/scss/utilities/api';
+@import 'node_modules/bootstrap/scss/root';
+@import 'node_modules/bootstrap/scss/reboot';
+@import 'node_modules/bootstrap/scss/type';
+@import 'node_modules/bootstrap/scss/images';
+@import 'node_modules/bootstrap/scss/containers';
+@import 'node_modules/bootstrap/scss/grid';
+@import 'node_modules/bootstrap/scss/tables';
+@import 'node_modules/bootstrap/scss/forms';
+@import 'node_modules/bootstrap/scss/buttons';
+@import 'node_modules/bootstrap/scss/transitions';
+@import 'node_modules/bootstrap/scss/dropdown';
+@import 'node_modules/bootstrap/scss/button-group';
+@import 'node_modules/bootstrap/scss/nav';
+@import 'node_modules/bootstrap/scss/navbar';
+@import 'node_modules/bootstrap/scss/card';
+@import 'node_modules/bootstrap/scss/accordion';
+@import 'node_modules/bootstrap/scss/breadcrumb';
+@import 'node_modules/bootstrap/scss/pagination';
+@import 'node_modules/bootstrap/scss/badge';
+@import 'node_modules/bootstrap/scss/alert';
+@import 'node_modules/bootstrap/scss/progress';
+@import 'node_modules/bootstrap/scss/list-group';
+@import 'node_modules/bootstrap/scss/close';
+@import 'node_modules/bootstrap/scss/toasts';
+@import 'node_modules/bootstrap/scss/modal';
+@import 'node_modules/bootstrap/scss/tooltip';
+@import 'node_modules/bootstrap/scss/popover';
+@import 'node_modules/bootstrap/scss/carousel';
+@import 'node_modules/bootstrap/scss/spinners';
+@import 'node_modules/bootstrap/scss/offcanvas';
+@import 'node_modules/bootstrap/scss/placeholders';
+@import 'node_modules/bootstrap/scss/helpers';
+@import 'node_modules/bootstrap/scss/utilities/api';
 
 
 // 6. Project Components

package/config/integrations/bootstrap/5.2/templates/main.scss

@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap');
 
-@import "./exported/bootstrap-tokens/main.scss";
+@import "./exported/integration/main.scss";
 
 body {
 	background-color: #f7f7f7;

package/config/integrations/bootstrap/5.3/sass/main.scss

@@ -16,7 +16,7 @@
 // 1. Initialize Bootstrap
 // ------------------------------------------------------------------
 
-@import 'bootstrap/scss/functions';
+@import 'node_modules/bootstrap/scss/functions';
 
 // 2. Handoff Tokens
 //    Load empty default variables that prevent the build from
@@ -26,17 +26,17 @@
 
 @import 'variables-default';
 
-@import './exported/tokens/types/typography';
-@import './exported/tokens/types/effects';
-@import './exported/tokens/types/colors';
+@import '../tokens/types/typography';
+@import '../tokens/types/effects';
+@import '../tokens/types/colors';
 //<#HANDOFF.TOKENS.TYPES#>
-@import './exported/tokens/sass/typography';
-@import './exported/tokens/sass/effects';
-@import './exported/tokens/sass/colors';
+@import '../tokens/sass/typography';
+@import '../tokens/sass/effects';
+@import '../tokens/sass/colors';
 //<#HANDOFF.TOKENS.SASS#>
-@import './exported/tokens/css/typography';
-@import './exported/tokens/css/effects';
-@import './exported/tokens/css/colors';
+@import '../tokens/css/typography';
+@import '../tokens/css/effects';
+@import '../tokens/css/colors';
 //<#HANDOFF.TOKENS.CSS#>
 
 
@@ -51,49 +51,49 @@ $prefix: '';
 //    Load Bootstrap variables
 // ------------------------------------------------------------------
 
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/maps';
-@import 'bootstrap/scss/mixins';
-@import 'bootstrap/scss/utilities';
+@import 'node_modules/bootstrap/scss/variables';
+@import 'node_modules/bootstrap/scss/maps';
+@import 'node_modules/bootstrap/scss/mixins';
+@import 'node_modules/bootstrap/scss/utilities';
 
 
 // 5. Bootstrap Base and Components
 //    Load Bootstrap configuration, layout, components, helpers, utilities
 // ------------------------------------------------------------------
 
-@import 'bootstrap/scss/root';
-@import 'bootstrap/scss/reboot';
-@import 'bootstrap/scss/type';
-@import 'bootstrap/scss/images';
-@import 'bootstrap/scss/containers';
-@import 'bootstrap/scss/grid';
-@import 'bootstrap/scss/tables';
-@import 'bootstrap/scss/forms';
-@import 'bootstrap/scss/buttons';
-@import 'bootstrap/scss/transitions';
-@import 'bootstrap/scss/dropdown';
-@import 'bootstrap/scss/button-group';
-@import 'bootstrap/scss/nav';
-@import 'bootstrap/scss/navbar';
-@import 'bootstrap/scss/card';
-@import 'bootstrap/scss/accordion';
-@import 'bootstrap/scss/breadcrumb';
-@import 'bootstrap/scss/pagination';
-@import 'bootstrap/scss/badge';
-@import 'bootstrap/scss/alert';
-@import 'bootstrap/scss/progress';
-@import 'bootstrap/scss/list-group';
-@import 'bootstrap/scss/close';
-@import 'bootstrap/scss/toasts';
-@import 'bootstrap/scss/modal';
-@import 'bootstrap/scss/tooltip';
-@import 'bootstrap/scss/popover';
-@import 'bootstrap/scss/carousel';
-@import 'bootstrap/scss/spinners';
-@import 'bootstrap/scss/offcanvas';
-@import 'bootstrap/scss/placeholders';
-@import 'bootstrap/scss/helpers';
-@import 'bootstrap/scss/utilities/api';
+@import 'node_modules/bootstrap/scss/root';
+@import 'node_modules/bootstrap/scss/reboot';
+@import 'node_modules/bootstrap/scss/type';
+@import 'node_modules/bootstrap/scss/images';
+@import 'node_modules/bootstrap/scss/containers';
+@import 'node_modules/bootstrap/scss/grid';
+@import 'node_modules/bootstrap/scss/tables';
+@import 'node_modules/bootstrap/scss/forms';
+@import 'node_modules/bootstrap/scss/buttons';
+@import 'node_modules/bootstrap/scss/transitions';
+@import 'node_modules/bootstrap/scss/dropdown';
+@import 'node_modules/bootstrap/scss/button-group';
+@import 'node_modules/bootstrap/scss/nav';
+@import 'node_modules/bootstrap/scss/navbar';
+@import 'node_modules/bootstrap/scss/card';
+@import 'node_modules/bootstrap/scss/accordion';
+@import 'node_modules/bootstrap/scss/breadcrumb';
+@import 'node_modules/bootstrap/scss/pagination';
+@import 'node_modules/bootstrap/scss/badge';
+@import 'node_modules/bootstrap/scss/alert';
+@import 'node_modules/bootstrap/scss/progress';
+@import 'node_modules/bootstrap/scss/list-group';
+@import 'node_modules/bootstrap/scss/close';
+@import 'node_modules/bootstrap/scss/toasts';
+@import 'node_modules/bootstrap/scss/modal';
+@import 'node_modules/bootstrap/scss/tooltip';
+@import 'node_modules/bootstrap/scss/popover';
+@import 'node_modules/bootstrap/scss/carousel';
+@import 'node_modules/bootstrap/scss/spinners';
+@import 'node_modules/bootstrap/scss/offcanvas';
+@import 'node_modules/bootstrap/scss/placeholders';
+@import 'node_modules/bootstrap/scss/helpers';
+@import 'node_modules/bootstrap/scss/utilities/api';
 
 
 // 6. Project Components

package/config/integrations/bootstrap/5.3/templates/main.scss

@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap');
 
-@import "./exported/bootstrap-tokens/main.scss";
+@import "./exported/integration/main.scss";
 
 body {
 	background-color: #f7f7f7;

package/config/integrations/starter/sass/main.scss

@@ -13,16 +13,7 @@
 $prefix: '';
 $enable-shadows: true;
 
-@import 'maps/buttons';
-@import 'maps/checkbox';
-@import 'maps/radio';
-@import 'maps/switch';
-@import 'maps/input';
-@import 'maps/select';
-@import 'maps/alerts';
-@import 'maps/modal';
-@import 'maps/pagination';
-@import 'maps/tooltips';
+//<#HANDOFF.MAPS#>
 
 /** Include any other css and styles you need**/
 
@@ -30,13 +21,4 @@ $enable-shadows: true;
 // Project Components
 // ------------------------------------------------------------------
 
-@import 'extended/buttons';
-@import 'extended/checkbox';
-@import 'extended/radio';
-@import 'extended/switch';
-@import 'extended/input';
-@import 'extended/select';
-@import 'extended/alerts';
-@import 'extended/modal';
-@import 'extended/pagination';
-@import 'extended/tooltips';
+//<#HANDOFF.EXTENSIONS#>

package/config/integrations/starter/templates/main.scss

@@ -1,3 +1,3 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap');
 
-@import "../exported/custom-tokens/main.scss";
+@import "../exported/integration/main.scss";

package/dist/cli/eject.js

@@ -73,24 +73,40 @@ exports.ejectConfig = ejectConfig;
  * @param handoff
  */
 var ejectIntegration = function (handoff) { return __awaiter(void 0, void 0, void 0, function () {
-    var config, workingPath, integrationPath;
-    var _a, _b;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
+    var config, integration, workingPath, integrationPath, localConfigPath, _a;
+    var _b, _c;
+    return __generator(this, function (_d) {
+        switch (_d.label) {
             case 0: return [4 /*yield*/, handoff.config];
             case 1:
-                config = _c.sent();
+                config = _d.sent();
+                integration = config.integration.name;
+                // is the custom integration already being used?
+                if (integration === 'custom') {
+                    console.log(chalk_1.default.red("Custom integration cannot be ejected as it's destination matches the source."));
+                    return [2 /*return*/];
+                }
                 workingPath = path_1.default.resolve(path_1.default.join(handoff.workingPath, 'integration'));
-                console.log(workingPath);
                 if (fs_extra_1.default.existsSync(workingPath)) {
                     if (!handoff.force) {
-                        console.log(chalk_1.default.red("An integration already exists in the working directory.  Use the --force flag to overwrite."));
+                        console.log(chalk_1.default.red("An integration already exists in the working directory. Use the --force flag to overwrite."));
                         return [2 /*return*/];
                     }
                 }
                 integrationPath = (0, integration_1.getPathToIntegration)();
                 fs_extra_1.default.copySync(integrationPath, workingPath, { overwrite: false });
-                console.log(chalk_1.default.green("".concat((_a = config === null || config === void 0 ? void 0 : config.integration) === null || _a === void 0 ? void 0 : _a.name, " ").concat((_b = config === null || config === void 0 ? void 0 : config.integration) === null || _b === void 0 ? void 0 : _b.version, " ejected to ").concat(workingPath)));
+                console.log(chalk_1.default.green("".concat((_b = config === null || config === void 0 ? void 0 : config.integration) === null || _b === void 0 ? void 0 : _b.name, " ").concat((_c = config === null || config === void 0 ? void 0 : config.integration) === null || _c === void 0 ? void 0 : _c.version, " ejected to ").concat(workingPath)));
+                localConfigPath = path_1.default.join(handoff.workingPath, 'handoff.config.json');
+                _a = !fs_extra_1.default.existsSync(localConfigPath);
+                if (!_a) return [3 /*break*/, 3];
+                return [4 /*yield*/, (0, exports.ejectConfig)(handoff)];
+            case 2:
+                _a = (_d.sent());
+                _d.label = 3;
+            case 3:
+                _a;
+                config.integration = { name: 'custom', version: '' };
+                fs_extra_1.default.writeFileSync(localConfigPath, "".concat(JSON.stringify(config, null, 2)));
                 return [2 /*return*/, handoff];
         }
     });

package/dist/cli.js

@@ -80,7 +80,7 @@ var showHelp = function () {
  * Show the help message
  */
 var showVersion = function () {
-    cliError('Handoff App - 0.8.3', 2);
+    cliError('Handoff App - 0.8.5', 2);
 };
 /**
  * Define a CLI error
@@ -169,7 +169,7 @@ var run = function (argv, stdout, stderr) { return __awaiter(void 0, void 0, voi
             case 11: return [2 /*return*/, handoff_1.ejectTheme()];
             case 12: return [2 /*return*/, handoff_1.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);
+                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];
             case 14:
                 type = args._[1];

package/dist/exporters/utils.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="plugin-typings" />
 import * as FigmaTypes from '../figma/types';
 import { Exportable, VariantPropertyWithParams } from '../types';
 export declare function filterByNodeType<Type extends FigmaTypes.Node['type']>(type: Type): (obj?: FigmaTypes.Node | null) => obj is Extract<FigmaTypes.Document, {

package/dist/index.d.ts

@@ -51,7 +51,6 @@ declare class Handoff {
     postScssTransformer(callback: (documentationObject: DocumentationObject, types: TransformerOutput) => TransformerOutput): void;
     postPreview(callback: (documentationObject: DocumentationObject, previews: TransformedPreviewComponents) => TransformedPreviewComponents): void;
     postBuild(callback: (documentationObject: DocumentationObject) => void): void;
-    preIntegration(callback: (documentationObject: DocumentationObject, data: HookReturn[]) => HookReturn[]): void;
     postIntegration(callback: (documentationObject: DocumentationObject, data: HookReturn[]) => HookReturn[]): void;
     modifyWebpackConfig(callback: (webpackConfig: webpack.Configuration) => webpack.Configuration): void;
     configureExportables(callback: (exportables: string[]) => string[]): void;

package/dist/templates/main.scss

@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap');
 
-@import "./exported/bootstrap-tokens/main.scss";
+@import "./exported/integration/main.scss";
 
 body {
 	background-color: #f7f7f7;

package/dist/transformers/font/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { DocumentationObject } from '../../types';
 import * as stream from 'node:stream';
 /**

package/dist/transformers/font/index.js

@@ -65,8 +65,6 @@ var archiver_1 = __importDefault(require("archiver"));
 var fs_extra_1 = __importDefault(require("fs-extra"));
 var path_1 = __importDefault(require("path"));
 var sortedUniq_1 = __importDefault(require("lodash/sortedUniq"));
-//import { pluginTransformer } from '../plugin';
-var index_1 = require("../integration/index");
 var config_1 = require("../../config");
 /**
  * Detect a font present in the public dir.  If it matches a font family from
@@ -90,7 +88,7 @@ function fontTransformer(documentationObject) {
             }, {});
             customFonts = [];
             Object.keys(families).map(function (key) { return __awaiter(_this, void 0, void 0, function () {
-                var name, fontDirName, stream_1, integrationName, fontsFolder;
+                var name, fontDirName, stream_1, fontsFolder;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
                         case 0:
@@ -102,8 +100,7 @@ function fontTransformer(documentationObject) {
                             return [4 /*yield*/, (0, exports.zipFonts)(fontDirName, stream_1)];
                         case 1:
                             _a.sent();
-                            integrationName = (0, index_1.getIntegrationName)();
-                            fontsFolder = path_1.default.resolve(handoff.workingPath, "exported/".concat(integrationName, "-tokens/fonts"));
+                            fontsFolder = path_1.default.resolve(handoff.workingPath, "exported/integration/fonts");
                             if (!fs_extra_1.default.existsSync(fontsFolder)) {
                                 fs_extra_1.default.mkdirSync(fontsFolder);
                             }

package/dist/transformers/integration/index.js

@@ -220,15 +220,14 @@ exports.zipTokens = zipTokens;
  */
 function integrationTransformer(documentationObject) {
     return __awaiter(this, void 0, void 0, function () {
-        var handoff, outputFolder, integrationPath, integrationName, sassFolder, templatesFolder, integrationsSass, integrationTemplates, mainScssFilePath, stream, data;
+        var handoff, outputFolder, integrationPath, sassFolder, templatesFolder, integrationsSass, integrationTemplates, mainScssFilePath, stream, data;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
                     handoff = (0, config_1.getHandoff)();
                     outputFolder = path_1.default.resolve(handoff.modulePath, 'src/app/public');
                     integrationPath = (0, exports.getPathToIntegration)();
-                    integrationName = (0, exports.getIntegrationName)();
-                    sassFolder = path_1.default.resolve(handoff.workingPath, "exported/".concat(integrationName, "-tokens"));
+                    sassFolder = path_1.default.resolve(handoff.workingPath, "exported/integration");
                     templatesFolder = path_1.default.resolve(__dirname, '../../templates');
                     integrationsSass = path_1.default.resolve(integrationPath, 'sass');
                     integrationTemplates = path_1.default.resolve(integrationPath, 'templates');
@@ -236,7 +235,7 @@ function integrationTransformer(documentationObject) {
                     fs_extra_1.default.copySync(integrationTemplates, templatesFolder);
                     mainScssFilePath = path_1.default.resolve(sassFolder, 'main.scss');
                     if (fs_extra_1.default.existsSync(mainScssFilePath)) {
-                        fs_extra_1.default.writeFileSync(mainScssFilePath, replaceHandoffImportTokens(fs_extra_1.default.readFileSync(mainScssFilePath, 'utf8'), Object.keys(documentationObject.components), integrationName));
+                        fs_extra_1.default.writeFileSync(mainScssFilePath, replaceHandoffImportTokens(fs_extra_1.default.readFileSync(mainScssFilePath, 'utf8'), Object.keys(documentationObject.components)));
                     }
                     // copy the exported integration into the user defined dir (if the EXPORT_PATH environment variable is defined)
                     if (process.env.EXPORT_PATH) {
@@ -259,18 +258,18 @@ function integrationTransformer(documentationObject) {
     });
 }
 exports.default = integrationTransformer;
-var replaceHandoffImportTokens = function (content, components, integrationName) {
-    getHandoffImportTokens(components, integrationName)
+var replaceHandoffImportTokens = function (content, components) {
+    getHandoffImportTokens(components)
         .forEach(function (_a) {
         var token = _a[0], imports = _a[1];
         content = content.replaceAll("//<#".concat(token, "#>"), imports.map(function (path) { return "@import '".concat(path, "';"); }).join("\r\n"));
     });
     return content;
 };
-var getHandoffImportTokens = function (components, integrationName) {
+var getHandoffImportTokens = function (components) {
     var result = [];
     components.forEach(function (component) {
-        getHandoffImportTokensForComponent(component, integrationName)
+        getHandoffImportTokensForComponent(component)
             .forEach(function (_a, idx) {
             var _b;
             var importToken = _a[0], searchPath = _a.slice(1);
@@ -282,14 +281,13 @@ var getHandoffImportTokens = function (components, integrationName) {
     });
     return result;
 };
-var getHandoffImportTokensForComponent = function (component, integrationName) {
-    var handoffWorkingPath = (0, config_1.getHandoff)().workingPath;
-    var exportedIntegrationTokensPath = path_1.default.resolve(handoffWorkingPath, "exported/".concat(integrationName, "-tokens"));
+var getHandoffImportTokensForComponent = function (component) {
+    var integrationPath = path_1.default.resolve((0, config_1.getHandoff)().workingPath, "exported/integration");
     return [
-        ['HANDOFF.TOKENS.TYPES', handoffWorkingPath, './exported/tokens/types', "".concat(component, ".scss")],
-        ['HANDOFF.TOKENS.SASS', handoffWorkingPath, './exported/tokens/sass', "".concat(component, ".scss")],
-        ['HANDOFF.TOKENS.CSS', handoffWorkingPath, './exported/tokens/css', "".concat(component, ".css")],
-        ['HANDOFF.MAPS', exportedIntegrationTokensPath, 'maps', "_".concat(component, ".scss")],
-        ['HANDOFF.EXTENSIONS', exportedIntegrationTokensPath, 'extended', "_".concat(component, ".scss")]
+        ['HANDOFF.TOKENS.TYPES', integrationPath, '../tokens/types', "".concat(component, ".scss")],
+        ['HANDOFF.TOKENS.SASS', integrationPath, '../tokens/sass', "".concat(component, ".scss")],
+        ['HANDOFF.TOKENS.CSS', integrationPath, '../tokens/css', "".concat(component, ".css")],
+        ['HANDOFF.MAPS', integrationPath, 'maps', "_".concat(component, ".scss")],
+        ['HANDOFF.EXTENSIONS', integrationPath, 'extended', "_".concat(component, ".scss")]
     ];
 };

package/dist/utils/preview.js

@@ -73,7 +73,7 @@ var buildClientFiles = function () { return __awaiter(void 0, void 0, void 0, fu
                         filename: 'bundle.js',
                     },
                     resolveLoader: {
-                        modules: [path_1.default.resolve(handoff === null || handoff === void 0 ? void 0 : handoff.modulePath, 'node_modules'), path_1.default.resolve(handoff === null || handoff === void 0 ? void 0 : handoff.workingPath, 'node_modules')],
+                        modules: [path_1.default.resolve(handoff === null || handoff === void 0 ? void 0 : handoff.modulePath), path_1.default.resolve(handoff === null || handoff === void 0 ? void 0 : handoff.modulePath, 'node_modules'), path_1.default.resolve(handoff === null || handoff === void 0 ? void 0 : handoff.workingPath, 'node_modules')],
                     },
                     module: {
                         rules: [
@@ -90,7 +90,7 @@ var buildClientFiles = function () { return __awaiter(void 0, void 0, void 0, fu
                                         options: {
                                             sassOptions: {
                                                 indentWidth: 4,
-                                                includePaths: [path_1.default.resolve(handoff === null || handoff === void 0 ? void 0 : handoff.workingPath, 'node_modules'), path_1.default.resolve(handoff === null || handoff === void 0 ? void 0 : handoff.modulePath, 'node_modules')],
+                                                includePaths: [path_1.default.resolve(handoff === null || handoff === void 0 ? void 0 : handoff.workingPath, 'node_modules'), path_1.default.resolve(handoff === null || handoff === void 0 ? void 0 : handoff.modulePath, 'node_modules'), path_1.default.resolve(handoff === null || handoff === void 0 ? void 0 : handoff.modulePath)],
                                             },
                                             additionalData: function (content, loaderContext) { return __awaiter(void 0, void 0, void 0, function () {
                                                 var integrationPath;