QOLOE-125 Add head meta elements which will include replaced version …

…details in dist, rejigged components to group like components together to make it easier to find things

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

@@ -0,0 +1,99 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+import { execSync } from 'child_process';
+import { fileURLToPath } from 'url';
+import listFiles from "../helpers/listfiles.js";
+import log from "../helpers/logger.js";
+
+// Helper function to get git information
+const getGitInfo = () => {
+    const getGitBranch = () => execSync('git rev-parse --abbrev-ref HEAD').toString().trim();
+    const getGitTag = () => {
+        try {
+            return execSync('git describe --tags --exact-match 2>/dev/null').toString().trim();
+        } catch {
+            return null;
+        }
+    };
+    const getGitCommit = () => execSync('git rev-parse HEAD').toString().trim();
+    const getGitCommitDate = () => execSync('git log -1 --format=%cI').toString().trim();
+
+    return {
+        branch: getGitBranch(),
+        tag: getGitTag(),
+        commit: getGitCommit(),
+        datetime: getGitCommitDate(),
+    };
+};
+
+// Function to extract major version prefix from a tag
+const extractMajorVersion = (tag) => {
+    if (tag.startsWith('v')) {
+        // Format 'vX.Y.Z' -> 'vX'
+        return tag.split('.')[0];
+    } else {
+        // Split by non-alphanumeric characters and take the first part
+        return tag.split(/[^a-zA-Z0-9]/)[0];
+    }
+};
+
+// Helper function to get package.json info
+const getPackageJson = async () => {
+    const __dirname = path.dirname(fileURLToPath(import.meta.url));
+    const packageJsonPath = path.resolve(__dirname, '../../package.json');
+    const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'));
+    return {
+        project_id: packageJson.name,
+        version: packageJson.version,
+    };
+};
+
+// Create the plugin
+const versionPlugin = () => ({
+    name: 'version-plugin',
+    setup(build) {
+        // Get version details
+        let versionDetails;
+        build.onStart(async () => {
+            const packageInfo = await getPackageJson();
+            const gitInfo = getGitInfo();
+            versionDetails = {
+                ...packageInfo,
+                ...gitInfo,
+                majorVersion: extractMajorVersion(gitInfo.tag || 'v' + packageInfo.version),
+            };
+            console.log(`version details collected: ${JSON.stringify(versionDetails)}`);
+        });
+
+        // Replace placeholders in HTML, Mustache, and Handlebars files
+        build.onEnd(async (result) => {
+            console.log('version update starting');
+
+            //List new components
+            const root = process.cwd();
+            const relativePath = "/dist/components/";
+
+            const newTemplateFiles = listFiles(root + relativePath);
+            for (const file of newTemplateFiles) {
+                if (/\.(html|mustache|hbs)$/.test(file)) {
+                    // const outputPath = path.resolve(process.cwd(), file);
+                    let source = await fs.readFile(file, 'utf8');
+                    let newSource = source.replace(/###VERSION###/g, JSON.stringify(versionDetails));
+
+                    // Replace major version placeholder if present
+                    newSource = newSource.replace(/###MAJOR_VERSION###/g, versionDetails.majorVersion);
+
+                    // Check if the content has changed
+                    if (source !== newSource) {
+                        console.log(`Placeholder replaced in: ${file}, ${newSource}`);
+                        await fs.writeFile(file, newSource);
+                    }
+                }
+            }
+
+        });
+
+    },
+});
+
+export { versionPlugin };

esbuild.js

@@ -7,6 +7,7 @@ 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";
 import QDGScopy from "./.esbuild/plugins/qgds-plugin-copy-assets.js";
+import { versionPlugin } from "./.esbuild/plugins/qgds-plugin-version.js";
 
 //Open source ESBUILD PLUGINS
 import { sassPlugin } from "esbuild-sass-plugin";
@@ -62,11 +63,11 @@ const buildConfig = {
     QDGScopy(),
     QDGSbuildLog(),
     QGDSrawLoader(),
+    versionPlugin(),
     QDGScleanFolders(),
     handlebarsPlugin(),
-    sassPlugin(),
-    // eslint({}), //todo: configure eslint
-  ],
+    sassPlugin()
+  ]
 };
 
 async function StartBuild() {

src/components/bs5/breadcrumbs/breadcrumbs.stories.js

@@ -4,7 +4,7 @@ import defaultdata from './breadcrumbs.data.json';
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/Breadcrumbs',
+  title: 'Core/Breadcrumbs',
   args: defaultdata.default,
   render: (args) => new Breadcrumbs(args).html,
 

src/components/bs5/button/button.stories.js

@@ -46,7 +46,7 @@ function buttonVariantsMarkup() {
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/Button',
+  title: 'Components/Forms/Button',
   args: defaultdata,
   render: (args) => {
     return `

src/components/bs5/dateinput/Dateinput.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./dateinput.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Dateinput",
+  title: "Components/Forms/Dateinput",
   render: (args) => {
 
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 

src/components/bs5/footer/footer.stories.js

@@ -5,7 +5,7 @@ import defaultdata from "./footer.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Footer",
+  title: "!Core/Footer",
   render: (args) => new Footer(args).html,
 };
 

src/components/bs5/formcheck/_formcheck.stories.bak.js

@@ -6,7 +6,7 @@ import checkboxdata from './formcheck.checkbox.data.json';
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/Formcheck/Radio',
+  title: 'Components/Forms/Radio',
   render: (args) => {
     return `${new Formcheck(args).html}`
   },
@@ -47,7 +47,7 @@ export const RadioDark = {
 };
 
 export const Checkbox = {
-  title: 'Components/Formcheck/Checkbox',
+  title: 'Components/Forms/Checkbox',
   args: {...checkboxdata},
 };
 

src/components/bs5/formcheck/stories/checkbox/checkbox.stories.js

@@ -4,7 +4,7 @@ import defaultdata from './checkbox.data.json';
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/Formcheck/Checkbox',
+  title: 'Components/Forms/Checkbox',
   render: (args) => {
     return `${new Formcheck(args).html}`
   },

src/components/bs5/formcheck/stories/radio/radio.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./radio.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Formcheck/Radio",
+  title: "Components/Forms/Radio",
   render: (args) => {
     return `${new Formcheck(args).html}`;
   },

src/components/bs5/head/Head.js

@@ -0,0 +1,12 @@
+import Component from '../../../js/QGDSComponent.js'
+import template from "./head.hbs?raw";
+
+export class Head {
+
+  // Use the global Component class to create a new instance of the Loading Quickexit 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/head/head.data.json

@@ -0,0 +1,3 @@
+{
+    "cdn": "{DEV|TEST|BETA|STAGING|PROD|/__data/assets/git_bridge/0026/471752/}"
+}

src/components/bs5/head/head.hbs

@@ -0,0 +1,11 @@
+
+<!-- VERSION_DETAILS=###VERSION### -->
+
+{{! Select environment, used verbatium if not using predefind key
+cdn := PROD|STAGING|BETA|TEST|DEV|???
+}}
+
+<link rel="stylesheet" href="{{#if cdn }}{{#ifCond cdn '==' 'PROD'}}https://static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{#ifCond cdn '==' 'STAGING'}}https://staging-static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{#ifCond cdn '==' 'BETA'}}https://beta-static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{#ifCond cdn '==' 'TEST'}}https://test-static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{#ifCond cdn '==' 'DEV'}}https://dev-static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{cdn}}{{/ifCond}}{{/ifCond}}{{/ifCond}}{{/ifCond}}{{/ifCond}}{{else}}missing{{/if}}/assets/css/qld.bootstrap.css">
+
+<script type="text/javascript" async src="{{#if cdn }}{{#ifCond cdn '==' 'PROD'}}https://static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{#ifCond cdn '==' 'STAGING'}}https://staging-static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{#ifCond cdn '==' 'BETA'}}https://beta-static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{#ifCond cdn '==' 'TEST'}}https://test-static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{#ifCond cdn '==' 'DEV'}}https://dev-static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{cdn}}{{/ifCond}}{{/ifCond}}{{/ifCond}}{{/ifCond}}{{/ifCond}}{{else}}missing{{/if}}/assets/js/bootstrap.min.js"></script>
+<script type="text/javascript" async src="{{#if cdn }}{{#ifCond cdn '==' 'PROD'}}https://static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{#ifCond cdn '==' 'STAGING'}}https://staging-static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{#ifCond cdn '==' 'BETA'}}https://beta-static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{#ifCond cdn '==' 'TEST'}}https://test-static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{#ifCond cdn '==' 'DEV'}}https://dev-static.qgov.net.au/qgds-bootstrap5/###MAJOR_VERSION###/###MAJOR_VERSION###.x.x-latest{{else}}{{cdn}}{{/ifCond}}{{/ifCond}}{{/ifCond}}{{/ifCond}}{{/ifCond}}{{else}}missing{{/if}}/assets/js/qld.bootstrap.min.js"></script>

src/components/bs5/head/head.stories.js

@@ -0,0 +1,76 @@
+import defaultdata from "./head.data.json";
+import { Head } from "./Head.js";
+
+export default {
+  tags: ["autodocs"],
+  title: "!Core/HeadMeta",
+  render: (args) => {
+    return new Head(args).html;
+  },
+
+  argTypes: {
+    cdn: {
+      name: "CDN",
+      description: `CDN prefix or provided text`,
+      control: { type: 'radio' ,
+        labels: { 'DEV': 'DEV', 'TEST' : 'TEST','BETA':'BETA','STAGING':'STAGING','PROD':'PROD','/__data/assets/git_bridge/0026/471752/': 'SQUIZ Custom'},
+      },
+      options: [
+        "DEV",
+        "TEST",
+        "BETA",
+        "STAGING",
+        "PROD",
+        "/__data/assets/git_bridge/0026/471752/",
+      ],
+    }
+  },
+
+  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/header/header.stories.js

@@ -147,7 +147,7 @@ const mergeArgs = (arg_types, variant, menu) => ({
 
 export default {
   tags: ['autodocs'],
-  title: 'Components/Header',
+  title: 'Core/Header',
   render: (args) => {
     return `
         ${new Header({ ...args, searchInput: new SearchInput(searchData).html }).html}

src/components/bs5/select/Select.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./select.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Select",
+  title: "Components/Forms/Select",
   render: (args) => {
 
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 

src/components/bs5/sidenav/sidenav.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./sidenav.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Side navigation",
+  title: "!Core/Side navigation",
   render: (args) => {
     return new Sidenav(args).html;  
   },

src/components/bs5/textarea/Textarea.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./textarea.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Textarea",
+  title: "Components/Forms/Textarea",
   render: (args) => {
 
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc. 

src/components/bs5/textbox/Textbox.stories.js

@@ -4,7 +4,7 @@ import defaultdata from "./textbox.data.json";
 
 export default {
   tags: ["autodocs"],
-  title: "Components/Textbox",
+  title: "Components/Forms/Textbox",
   render: (args) => {
 
     //Storybook produces a comma delimited string when using the check control type (table-striped, table-bordered) etc.