handoff-app 0.4.1 → 0.4.2

package/Changelog.md

@@ -6,9 +6,36 @@ 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.4.2] - 2023-04-16
+
+When 0.4.0 was released, we found a structural problem with the way
+integrations were published into projects. 0.4.1 resolved a couple of issues,
+but a couple of significant new pieces of code were required to fully resolve
+the issue.
+
+The resolution is fixing paths so that they work properly when running the 
+handoff source as well as running handoff in a project.
+
+### Bugfixes
+
+- Build and Start scripts were restructured to handle sparsely merging sass and
+  templates into the source directory.
+- The integration transformer was restructured to support correct path
+- The webpack config has been altered to support paths in projects
+- The bootstrap templates were updated to use this updated path structure
+
+### Improvements
+
+- The figma exporter built library built code is now published to the repo to
+  make it easier to test pre release code
+- A default config is now part of the project so that projects that can inherit
+  a config rather than having to keep their config up to date.
+- The installer now has the proper script paths in the package
+
 ## [0.4.1] - 2023-04-16
 
 ### Bugfixes
+
 - Fixes a typing error in the project config
 - Fixes an issue where the path of the integrations are relative to the project
 - Fixes an issue where local integrations aren't properly merged on watch

package/default-config.js

@@ -0,0 +1,74 @@
+module.exports = {
+  title: 'Convertiv Design System',
+  client: 'Convertiv',
+  google_tag_manager: null,
+  integration: {
+    name: 'bootstrap',
+    version: '5.2',
+  },
+  favicon: '/favicon.ico',
+  logo: '/logo.svg',
+  poweredBy: true,
+  type_sort: [
+    'Heading 1',
+    'Heading 2',
+    'Heading 3',
+    'Heading 4',
+    'Heading 5',
+    'Heading 6',
+    'Paragraph',
+    'Subheading',
+    'Blockquote',
+    'Input Labels',
+    'Link',
+  ],
+  figma: {
+    size: [
+      {
+        figma: 'small',
+        css: 'sm',
+      },
+      {
+        figma: 'medium',
+        css: 'md',
+      },
+      {
+        figma: 'large',
+        css: 'lg',
+      },
+    ],
+    components: {
+      alert: {
+        search: 'Alert',
+      },
+      button: {
+        search: 'Button',
+      },
+      checkbox: {
+        search: 'Checkbox',
+      },
+      input: {
+        search: 'Input',
+      },
+      modal: {
+        search: 'Modal',
+      },
+      pagination: null,
+      radio: {
+        search: 'Radio',
+      },
+      select: {
+        search: 'Select',
+      },
+      switch: {
+        search: 'Switch',
+      },
+      tooltip: {
+        search: 'Tooltip',
+      },
+    },
+  },
+  type_copy: 'Almost before we knew it, we had left the ground.',
+  color_sort: ['primary', 'secondary', 'extra', 'system'],
+  component_sort: ['primary', 'secondary', 'transparent'],
+};

package/figma-exporter/dist/declarations/src/transformers/integration/index.d.ts

@@ -7,7 +7,11 @@ import * as stream from 'node:stream';
  * integration if desired
  */
 export declare const getPathToIntegration: () => string;
-export declare const getIntegrationName: () => any;
+/**
+ * Get the name of the current integration
+ * @returns string
+ */
+export declare const getIntegrationName: () => string;
 /**
  * Find the integration to sync and sync the sass files and template files.
  */

package/figma-exporter/dist/figma-exporter.cjs.dev.js

@@ -5196,7 +5196,7 @@ const buildClientFiles = () => {
     mode: 'production',
     entry: path__default["default"].resolve(__dirname, '../../templates/main.js'),
     resolve: {
-      modules: [path__default["default"].resolve(__dirname, '../..'), path__default["default"].resolve(__dirname, '../../node_modules'), path__default["default"].resolve(__dirname, '../../../../node_modules')]
+      modules: [path__default["default"].resolve(__dirname, '../..'), path__default["default"].resolve(__dirname, '../../..'), path__default["default"].resolve(__dirname, '../../node_modules'), path__default["default"].resolve(__dirname, '../../../../node_modules')]
     },
     output: {
       path: path__default["default"].resolve(__dirname, '../../public/components'),
@@ -9744,18 +9744,18 @@ const getPathToIntegration = () => {
   const integrationFolder = 'integrations';
   const defaultIntegration = 'bootstrap';
   const defaultVersion = '5.2';
-  const defaultPath = path__default["default"].resolve(path__default["default"].join(__dirname, integrationFolder, defaultIntegration, defaultVersion));
+  const defaultPath = path__default["default"].resolve(path__default["default"].join(__dirname, '../..', integrationFolder, defaultIntegration, defaultVersion));
   const config = documentationObject.getFetchConfig();
   if (config.integration) {
     if (config.integration.name === 'custom') {
       // Look for a custom integration
-      const customPath = path__default["default"].resolve(path__default["default"].join(integrationFolder, 'custom'));
+      const customPath = path__default["default"].resolve(path__default["default"].join(__dirname, '../..', integrationFolder));
       if (!fs__namespace["default"].existsSync(customPath)) {
         throw Error(`The config is set to use a custom integration but no custom integration found at integrations/custom`);
       }
       return customPath;
     }
-    const searchPath = path__default["default"].resolve(path__default["default"].join(integrationFolder, config.integration.name, config.integration.version));
+    const searchPath = path__default["default"].resolve(path__default["default"].join(__dirname, '../..', integrationFolder, config.integration.name, config.integration.version));
     if (!fs__namespace["default"].existsSync(searchPath)) {
       throw Error(`The requested integration was ${config.integration.name} version ${config.integration.version} but no integration plugin with that name was found`);
     }
@@ -9763,6 +9763,11 @@ const getPathToIntegration = () => {
   }
   return defaultPath;
 };
+
+/**
+ * Get the name of the current integration
+ * @returns string
+ */
 const getIntegrationName = () => {
   const config = documentationObject.getFetchConfig();
   const defaultIntegration = 'bootstrap';
@@ -9782,7 +9787,7 @@ async function integrationTransformer() {
   const integrationPath = getPathToIntegration();
   const integrationName = getIntegrationName();
   const sassFolder = `exported/${integrationName}-tokens`;
-  const templatesFolder = process.env.OUTPUT_DIR || 'templates';
+  const templatesFolder = path__default["default"].resolve(__dirname, '../../templates');
   const integrationsSass = path__default["default"].resolve(integrationPath, 'sass');
   const integrationTemplates = path__default["default"].resolve(integrationPath, 'templates');
   fs__namespace["default"].copySync(integrationsSass, sassFolder);
@@ -9876,7 +9881,6 @@ const buildCustomFonts = async documentationObject => {
 const buildIntegration = async documentationObject => {
   return await integrationTransformer();
 };
-
 /**
  * Run just the preview
  * @param documentationObject

package/figma-exporter/dist/figma-exporter.cjs.prod.js

@@ -5196,7 +5196,7 @@ const buildClientFiles = () => {
     mode: 'production',
     entry: path__default["default"].resolve(__dirname, '../../templates/main.js'),
     resolve: {
-      modules: [path__default["default"].resolve(__dirname, '../..'), path__default["default"].resolve(__dirname, '../../node_modules'), path__default["default"].resolve(__dirname, '../../../../node_modules')]
+      modules: [path__default["default"].resolve(__dirname, '../..'), path__default["default"].resolve(__dirname, '../../..'), path__default["default"].resolve(__dirname, '../../node_modules'), path__default["default"].resolve(__dirname, '../../../../node_modules')]
     },
     output: {
       path: path__default["default"].resolve(__dirname, '../../public/components'),
@@ -9744,18 +9744,18 @@ const getPathToIntegration = () => {
   const integrationFolder = 'integrations';
   const defaultIntegration = 'bootstrap';
   const defaultVersion = '5.2';
-  const defaultPath = path__default["default"].resolve(path__default["default"].join(__dirname, integrationFolder, defaultIntegration, defaultVersion));
+  const defaultPath = path__default["default"].resolve(path__default["default"].join(__dirname, '../..', integrationFolder, defaultIntegration, defaultVersion));
   const config = documentationObject.getFetchConfig();
   if (config.integration) {
     if (config.integration.name === 'custom') {
       // Look for a custom integration
-      const customPath = path__default["default"].resolve(path__default["default"].join(integrationFolder, 'custom'));
+      const customPath = path__default["default"].resolve(path__default["default"].join(__dirname, '../..', integrationFolder));
       if (!fs__namespace["default"].existsSync(customPath)) {
         throw Error(`The config is set to use a custom integration but no custom integration found at integrations/custom`);
       }
       return customPath;
     }
-    const searchPath = path__default["default"].resolve(path__default["default"].join(integrationFolder, config.integration.name, config.integration.version));
+    const searchPath = path__default["default"].resolve(path__default["default"].join(__dirname, '../..', integrationFolder, config.integration.name, config.integration.version));
     if (!fs__namespace["default"].existsSync(searchPath)) {
       throw Error(`The requested integration was ${config.integration.name} version ${config.integration.version} but no integration plugin with that name was found`);
     }
@@ -9763,6 +9763,11 @@ const getPathToIntegration = () => {
   }
   return defaultPath;
 };
+
+/**
+ * Get the name of the current integration
+ * @returns string
+ */
 const getIntegrationName = () => {
   const config = documentationObject.getFetchConfig();
   const defaultIntegration = 'bootstrap';
@@ -9782,7 +9787,7 @@ async function integrationTransformer() {
   const integrationPath = getPathToIntegration();
   const integrationName = getIntegrationName();
   const sassFolder = `exported/${integrationName}-tokens`;
-  const templatesFolder = process.env.OUTPUT_DIR || 'templates';
+  const templatesFolder = path__default["default"].resolve(__dirname, '../../templates');
   const integrationsSass = path__default["default"].resolve(integrationPath, 'sass');
   const integrationTemplates = path__default["default"].resolve(integrationPath, 'templates');
   fs__namespace["default"].copySync(integrationsSass, sassFolder);
@@ -9876,7 +9881,6 @@ const buildCustomFonts = async documentationObject => {
 const buildIntegration = async documentationObject => {
   return await integrationTransformer();
 };
-
 /**
  * Run just the preview
  * @param documentationObject

package/figma-exporter/src/index.ts

@@ -67,7 +67,6 @@ const buildCustomFonts = async (documentationObject: DocumentationObject) => {
 const buildIntegration = async (documentationObject: DocumentationObject) => {
   return await integrationTransformer();
 };
-
 /**
  * Run just the preview
  * @param documentationObject

package/figma-exporter/src/transformers/integration/index.ts

@@ -14,19 +14,19 @@ export const getPathToIntegration = () => {
   const defaultIntegration = 'bootstrap';
   const defaultVersion = '5.2';
 
-  const defaultPath = path.resolve(path.join(__dirname, integrationFolder, defaultIntegration, defaultVersion));
+  const defaultPath = path.resolve(path.join(__dirname, '../..', integrationFolder, defaultIntegration, defaultVersion));
 
   const config = getFetchConfig();
   if (config.integration) {
     if (config.integration.name === 'custom') {
       // Look for a custom integration
-      const customPath = path.resolve(path.join(integrationFolder, 'custom'));
+      const customPath = path.resolve(path.join(__dirname, '../..', integrationFolder));
       if (!fs.existsSync(customPath)) {
         throw Error(`The config is set to use a custom integration but no custom integration found at integrations/custom`);
       }
       return customPath;
     }
-    const searchPath = path.resolve(path.join(integrationFolder, config.integration.name, config.integration.version));
+    const searchPath = path.resolve(path.join(__dirname, '../..', integrationFolder, config.integration.name, config.integration.version));
     if (!fs.existsSync(searchPath)) {
       throw Error(
         `The requested integration was ${config.integration.name} version ${config.integration.version} but no integration plugin with that name was found`
@@ -36,7 +36,12 @@ export const getPathToIntegration = () => {
   }
   return defaultPath;
 };
-export const getIntegrationName = () => {
+
+/**
+ * Get the name of the current integration
+ * @returns string
+ */
+export const getIntegrationName = (): string => {
   const config = getFetchConfig();
   const defaultIntegration = 'bootstrap';
   if (config.integration) {
@@ -55,7 +60,7 @@ export default async function integrationTransformer() {
   const integrationPath = getPathToIntegration();
   const integrationName = getIntegrationName();
   const sassFolder = `exported/${integrationName}-tokens`;
-  const templatesFolder = process.env.OUTPUT_DIR || 'templates';
+  const templatesFolder = path.resolve(__dirname, '../../templates');
   const integrationsSass = path.resolve(integrationPath, 'sass');
   const integrationTemplates = path.resolve(integrationPath, 'templates');
   fs.copySync(integrationsSass, sassFolder);
@@ -100,11 +105,11 @@ export const addFileToZip = async (directory: string[], dirPath: string, archive
     const pathFile = path.join(dirPath, file);
     if (fs.lstatSync(pathFile).isDirectory()) {
       const recurse = await fs.readdir(pathFile);
-      archive = await addFileToZip(recurse, pathFile, archive)
+      archive = await addFileToZip(recurse, pathFile, archive);
     } else {
       const data = fs.readFileSync(pathFile, 'utf-8');
       archive.append(data, { name: pathFile });
     }
   }
   return archive;
-}
+};

package/figma-exporter/src/utils/preview.ts

@@ -10,6 +10,7 @@ export const buildClientFiles = () => {
       resolve: {
         modules: [
           path.resolve(__dirname, '../..'),
+          path.resolve(__dirname, '../../..'),
           path.resolve(__dirname, '../../node_modules'),
           path.resolve(__dirname, '../../../../node_modules'),
         ],

package/installer/template/config.js

@@ -44,9 +44,7 @@ const config = {
       modal: {
         search: 'Modal',
       },
-      pagination: {
-        search: null,
-      },
+      pagination: null,
       radio: {
         search: 'Radio',
       },

package/installer/template/package.json

@@ -6,10 +6,10 @@
     "scripts": {
       "start": "node ./node_modules/handoff-app/scripts/watch.js",
       "build": "node node_modules/handoff-app/scripts/build.js",
-      "fetch": "node node_modules/handoff-app/figma-exporter/dist/figma-exporter.cjs.js && mv ./exported/*.zip ./public/",
-      "transform:preview": "node node_modules/handoff-app/figma-exporter/dist/figma-exporter.cjs.js preview && mv ./exported/*.zip ./public/",
-      "transform:styles": "node node_modules/handoff-app/figma-exporter/dist/figma-exporter.cjs.js styles && mv ./exported/*.zip ./public/",
-      "transform:fonts": "node node_modules/handoff-app/figma-exporter/dist/figma-exporter.cjs.js styles && mv ./exported/*.zip ./public/",
+      "fetch": "node node_modules/handoff-app/scripts/fetch.js",
+      "transform:preview": "node node_modules/handoff-app/scripts/fetch.js preview",
+      "transform:styles": "node node_modules/handoff-app/scripts/fetch.js styles",
+      "transform:fonts": "node node_modules/handoff-app/scripts/fetch.js styles",
       "postinstall": "cd node_modules/handoff-app/figma-exporter && npm install --omit=dev"
 
     },

package/installer/template/pages/styles/accessability.md

@@ -1,7 +1,7 @@
 ---
-title: Accessability Standards
-description: A sample page documenting how you can build accessability standards
-metaTitle: 'Accessability Guide | Handoff Design System'
+title: Accessibility Standards
+description: A sample page documenting how you can build accessibility standards
+metaTitle: 'Accessibility Guide | Handoff Design System'
 metaDescription: 'A sample page in the handoff design system, in markdown'
 ---
 

package/installer/template/pages/styles.md

@@ -8,8 +8,8 @@ enabled: true
 menu:
   - path: false
     title: Standards
-  - path: styles/accessability
-    title: Accessability Standards
+  - path: styles/accessibility
+    title: Accessibility Standards
     image: false
 ---
 

package/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/bootstrap-tokens/main.scss";
 
 body {
 	background-color: #f7f7f7;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "handoff-app",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Automated documentation toolchain for building client side documentation from figma",
   "author ": {
     "name": "Convertiv",