Flesh out integration page creation, showing how to render a full pag…

…e with custon main content.

.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js

@@ -0,0 +1,87 @@
+// updateHandlebarsPartialsPlugin.js
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { build } from 'esbuild';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const COMPONENTS_DIR = path.resolve(__dirname, './../../src/components');
+const PARTIALS_JS_FILE = path.resolve(__dirname, '../../src/js/handlebars.partials.js');
+
+
+function getAllFiles(dirPath, arrayOfFiles) {
+    const files = fs.readdirSync(dirPath, { withFileTypes: true });
+
+    arrayOfFiles = arrayOfFiles || [];
+
+    files.forEach((file) => {
+        //console.log(file);
+        if (file.isDirectory()) {
+            arrayOfFiles = getAllFiles(path.join(dirPath, file.name), arrayOfFiles);
+        } else if (file.isFile() && (file.name.endsWith('.hbs') && !file.name.endsWith('.test.hbs'))) {
+            arrayOfFiles.push(path.join(dirPath, file.name));
+        }
+    });
+
+    return arrayOfFiles;
+}
+
+export default function QGDSupdateHandlebarsPartialsPlugin() {
+    return {
+        name: 'update-handlebars-partials',
+        setup(build) {
+            build.onStart(async () => {
+
+                const files = getAllFiles(COMPONENTS_DIR);
+                //console.log(files);
+                const fileNames = new Map();
+                let duplicateFound = false;
+
+                let importLines = '';
+                let registerLines = '';
+
+                for (const file of files) {
+                    //console.log(file);
+                    const componentName = path.basename(file, '.hbs')
+                    //console.log(componentName);
+                    // Duplicate check
+                    if (fileNames.has(componentName)) {
+                        console.error(`Error: Duplicate component name found: "${componentName}" second partial located at ${file} and ${fileNames.get(componentName)}`);
+                        duplicateFound = true;
+                        continue;
+                    }
+                    fileNames.set(componentName, file);
+
+                    const importName = componentName.replace(/-/g, '');
+                    const componentPath = path.relative(path.dirname(PARTIALS_JS_FILE), file).replace(/\\/g, '/');
+
+                    importLines += `import ${importName} from "${componentPath}?raw";\n`;
+                    registerLines += `    handlebars.registerPartial("${componentName}", ${importName});\n`;
+                }
+
+                if (duplicateFound) {
+                    process.exit(1);
+                }
+
+                const newContent = `/** THIS IS A GENERATED FILE **/
+
+${importLines}
+
+/**
+ * Registers Handlebars Partials
+ * @param {Handlebars} handlebars Templating engine
+ * @returns {void} Result of the helper operation
+ */
+export default function handlebarsPartials(handlebars) {
+${registerLines}
+}
+`;
+
+                fs.writeFileSync(PARTIALS_JS_FILE, newContent);
+                console.log('handlebar.partials.js has been updated.');
+            });
+        },
+    }
+};

.esbuild/plugins/qgds-plugin-version.js

@@ -67,7 +67,7 @@ const versionPlugin = () => ({
 
         // Replace placeholders in HTML, Mustache, and Handlebars files
         build.onEnd(async (result) => {
-            console.log('version update starting');
+            console.log('version update starting...');
 
             //List new components
             const root = process.cwd();
@@ -85,11 +85,12 @@ const versionPlugin = () => ({
 
                     // Check if the content has changed
                     if (source !== newSource) {
-                        console.log(`Placeholder replaced in: ${file}, ${newSource}`);
+                        // console.log(`Placeholder replaced in: ${file}, ${newSource}`);
                         await fs.writeFile(file, newSource);
                     }
                 }
             }
+            console.log('version update Completed');
 
         });
 

.storybook/preview.js

@@ -96,7 +96,7 @@ const preview = {
         },
     ],
 
-    tags: ["autodocs", "autodocs"]
+    tags: ["autodocs"]
 };
 
 export default preview;

esbuild.js

@@ -3,6 +3,7 @@
 import * as esbuild from "esbuild";
 
 //Local ESBUILD PLUGINS
+import QGDSupdateHandlebarsPartialsPlugin from "./.esbuild/plugins/qgds-plugin-handlebar-partial-builder.js";
 import QGDSrawLoader from "./.esbuild/plugins/qgds-plugin-raw-loader.js";
 import QDGScleanFolders from "./.esbuild/plugins/qgds-plugin-clean-output-folders.js";
 import QDGSbuildLog from "./.esbuild/plugins/qgds-plugin-build-log.js";
@@ -60,14 +61,15 @@ const buildConfig = {
   },
 
   plugins: [
+    QGDSupdateHandlebarsPartialsPlugin(),
     QDGScopy(),
     QDGSbuildLog(),
     QGDSrawLoader(),
     versionPlugin(),
     QDGScleanFolders(),
     handlebarsPlugin(),
-    sassPlugin()
-  ]
+    sassPlugin(),
+  ],
 };
 
 async function StartBuild() {

package.json

@@ -39,7 +39,8 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
     "bootstrap": "^5.3.1",
-    "material-symbols": "^0.20.0"
+    "material-symbols": "^0.20.0",
+    "run-parallel": "^1.2.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",

src/components/bs5/breadcrumbs/breadcrumb.functions.js

@@ -92,4 +92,4 @@ export function breadcrumbExpand(event) {
       crumb.querySelector('a').setAttribute('tabindex', 0)
     }
   })
-}
+}

src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.hbs

@@ -0,0 +1,11 @@
+<!-- breadcrumbs-->
+<div class="container-fluid alt">
+  <div class="container">
+    <div class="row">
+      <div class="container-xl">
+
+        {{> @partial-block }}
+      </div>
+    </div>
+  </div>
+</div>

src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.stories.js

@@ -0,0 +1,38 @@
+import { forGov } from "../breadcrumbs/breadcrumbs.data.json";
+import { BreadcrumbsWrapperTest } from "./breadcrumbsWrapper.test.js";
+import init from "../../../js/handlebars.init.js";
+import Handlebars from "handlebars";
+
+const defaultData = { breadcrumbs: forGov };
+
+export default {
+  title: "!Layout/Components/Breadcrumbs Wrapper",
+  render: (args) => {
+    init(Handlebars)
+    return new BreadcrumbsWrapperTest(args).html;
+  },
+  args: defaultData,
+  argTypes: {
+  },
+  parameters: {
+    docs: {
+      controls: {
+
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      return `
+          ${Story()}
+      `;
+    },
+  ],
+};
+
+/**
+ * Default head metadata
+ * 
+ */
+export const Default = {};
+

src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.hbs

@@ -0,0 +1,7 @@
+header before
+<main>
+{{#>breadcrumbsWrapper}}
+  {{> breadcrumbs breadcrumbs }}
+{{/breadcrumbsWrapper}}
+content after
+</main>

src/components/bs5/breadcumbsWrapper/breadcrumbsWrapper.test.js

@@ -0,0 +1,13 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./breadcrumbsWrapper.test.hbs?raw";
+
+export class BreadcrumbsWrapperTest {
+
+  // Use the global Component class to create a new instance of the Sidenav component.
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument. 
+
+  constructor( data = {} ) {
+    return new Component(template, data);
+  }
+
+}

src/components/bs5/contentFooter/contentFooter.data.json

@@ -0,0 +1,3 @@
+{
+    "lastUpdated":  "1900-01-31"
+}

src/components/bs5/contentFooter/contentFooter.hbs

@@ -0,0 +1,4 @@
+<dl class="qld-content-dates">
+  <dt>Last updated:</dt>
+  <dd>{{formatDateOrToday lastUpdated }}</dd>
+</dl>

src/components/bs5/contentFooter/contentFooter.js

@@ -0,0 +1,10 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./contentFooter.hbs?raw";
+
+export class ContentFooter {
+
+  // A data object, containing the Handlebars placeholder replacement strings, should be provided as an argument.
+  constructor(data = {}) {
+    return new Component(template, data);
+  }
+}

src/components/bs5/contentFooter/contentFooter.stories.js

@@ -0,0 +1,68 @@
+import defaultdata from "./contentFooter.data.json";
+import { ContentFooter } from "./contentFooter.js";
+import init from "../../../js/handlebars.init.js";
+import Handlebars from "handlebars";
+
+export default {
+  title: "!Layout/Components/Content Footer",
+  render: (args) => {
+    init(Handlebars)
+    return new ContentFooter(args).html;
+  },
+
+  argTypes: {
+    lastUpdated: {
+      name: "Last Updated",
+      description: `Date page was Last Updated`,
+      control: { type: 'text'  },
+    },
+  },
+
+  parameters: {
+    docs: {
+      controls: {
+
+      },
+    },
+  },
+};
+
+/**
+ * Default head metadata
+ * 
+ */
+export const Default = {
+  args: defaultdata,
+  decorators: [
+    (Story) => {
+      return `
+          ${Story()}
+      `;
+    },
+  ],
+};
+
+
+export const DEV = {
+  args: {
+    cdn: "DEV",
+  },
+  decorators:[Story => {
+    return `
+          ${Story()}
+      `;
+  }],
+};
+
+export const SQUIZ = {
+  args: {
+    cdn: "/__data/assets/git_bridge/0026/471752",
+  },
+  decorators:[Story => {
+    return `
+          ${Story()}
+      `;
+  }],
+};
+
+

src/components/bs5/contentFooterWrapper/contentFooterWrapper.hbs

@@ -0,0 +1,5 @@
+<div class="container qld-content-footer">
+  <div class="row">
+    {{> @partial-block }}
+  </div>
+</div>