@qld-gov-au/qgds-bootstrap5 1.0.1 → 1.0.2

package/.esbuild/helpers/listfiles.js

@@ -0,0 +1,16 @@
+import fs from "fs";
+import path from "path";
+
+const listFiles = (dir, filelist = []) => {
+  fs.readdirSync(dir, { withFileTypes: true }).forEach((file) => {
+    const dirFile = path.join(dir, file.name);
+    if (file.isDirectory()) {
+      filelist = listFiles(dirFile, filelist);
+    } else if (file.name.endsWith(".hbs")) {
+      filelist.push(dirFile);
+    }
+  });
+  return filelist;
+};
+
+export default listFiles;

package/.esbuild/helpers/logger.js

@@ -0,0 +1,19 @@
+/**
+ * Logs a message with color.
+ * @param {string} color - The color of the message.
+ * @param {string} message - The message to be logged.
+ * @returns {void}
+ */
+export default function log(color, message) {
+  const colors = {
+    green: "\x1b[32m",
+    yellow: "\x1b[33m",
+    blue: "\x1b[34m",
+    red: "\x1b[31m",
+    reset: "\x1b[0m",
+    magenta: "\x1b[35m",
+    cyan: "\x1b[36m",
+  };
+
+  console.log(colors[color], message, colors.reset);
+}

package/.esbuild/plugins/qgds-plugin-build-log.js

@@ -0,0 +1,47 @@
+/* global process */
+import log from "../helpers/logger.js";
+import listFiles from "../helpers/listfiles.js";
+
+
+export default function buildlog() {
+  return {
+    name: "qgds-build-logging",
+    setup(build) {
+      
+      build.onStart(() => {
+        log("yellow", "Starting build...\n");
+      });
+
+      // eslint-disable-next-line no-unused-vars
+      build.onEnd((result) => {
+        console.log("BUNDLING:");
+        build.initialOptions.entryPoints.forEach((entry) => {
+          log("cyan", entry.in);
+        });
+        
+        console.log(`\n`);
+        console.log("CREATED:");
+        log("magenta", `CSS\t\t./dist/assets/css/qld.bootstrap.css`);
+        log("blue", "JS\t\t./dist/assets/js/bootstrap.min.js");
+        log("blue", `JS\t\t./dist/assets/js/qld.bootstrap.min.js`);
+
+        //List new components
+        const root = process.cwd();
+        const relativePath = "/dist/components/bs5/";
+        const newTemplateFiles = listFiles(root + relativePath);
+        
+        newTemplateFiles.forEach((file) => {
+          let newfile = file.replace(root, "");
+          log("cyan", `Template:\t.${newfile}`);
+        });
+
+      });
+
+      // eslint-disable-next-line no-unused-vars
+      build.onEnd((result) => {
+        console.log(`\n`);
+        log("yellow", `✓ Build complete.\n\n`);
+      });
+    },
+  }
+}

package/.esbuild/plugins/qgds-plugin-clean-output-folders.js

@@ -0,0 +1,31 @@
+import fs from "fs";
+import log from "../helpers/logger.js";
+
+export default function cleanFoldersPlugin() {
+  return {
+    name: "qgds-clean-output-folders",
+    setup(build) {
+      build.onStart(() => {
+        //Console feedback
+        log("cyan", `\u{1F4C2} Cleaning /dist folders\n\n`);
+
+        // Clean the output folders
+        const { outdir, outfile } = build.initialOptions;
+
+        if (outdir && fs.existsSync(outdir)) {
+          fs.rmSync(outdir, { recursive: true });
+        }
+
+        if (outfile && fs.existsSync(outfile)) {
+          fs.rmSync(outfile);
+        }
+
+        // // Clean the docs folder
+        // const docsdir = "./docs/";
+        // if (fs.existsSync(docsdir)) {
+        //   fs.rmSync(docsdir, { recursive: true });
+        // }
+      });
+    },
+  };
+}

package/.esbuild/plugins/qgds-plugin-copy-assets.js

@@ -0,0 +1,32 @@
+import { copy } from "esbuild-plugin-copy";
+
+export default function copyPlugin() {
+
+  //Docs: https://www.npmjs.com/package/esbuild-plugin-copy
+  return copy({
+    resolveFrom: "cwd",
+    verbose: false,
+    watch: false,
+    assets: [
+      { from: ["./src/templates/compiled/*.html"], to: ["./dist/"] },
+      {
+        from: ["./src/components/bs5/**/*.hbs"],
+        to: ["./dist/components/bs5/"],
+      },
+      {
+        from: ["./src/components/bs5/**/*.data.json"],
+        to: ["./dist/sample-data/"],
+      },
+      {
+        from: ["./src/js/handlebars*"],
+        to: ["./dist/assets/js"],
+      },
+      {
+        from: ["./src/js/handlebars*"],
+        to: ["./dist/components/"],
+      },
+      { from: ["./src/assets/img/*"], to: ["./dist/assets/img"] },
+    ],
+  });
+
+}

package/.esbuild/plugins/qgds-plugin-raw-loader.js

@@ -0,0 +1,18 @@
+// rawLoaderPlugin.js
+import fs from "fs";
+import log from "../helpers/logger.js";
+
+export default function rawLoaderPlugin(showlog = false) {
+  return {
+    name: "qgds-raw-loader",
+    setup(build) {
+      build.onLoad({ filter: /\.(html|mustache|hbs)$/ }, async (args) => {
+        const contents = await fs.promises.readFile(args.path, "utf8");
+
+        if (showlog) log("magenta", `Loading ${args.path}...`);
+
+        return { contents, loader: "text" };
+      });
+    },
+  };
+}

package/.eslintrc.cjs

@@ -0,0 +1,52 @@
+module.exports = {
+  "env": {
+    "browser": true,
+    "es2021": true,
+  },
+  "extends": ["eslint:recommended", "plugin:json/recommended", "plugin:storybook/recommended"],
+  "overrides": [
+    {
+      "env": {
+        "node": true,
+      },
+      "files": [
+        ".eslintrc.{js,cjs}",
+      ],
+      "parserOptions": {
+        "sourceType": "script",
+      },
+    }
+  ],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+  },
+  "plugins": [
+    "@stylistic/js",
+  ],
+  "rules": {
+    "@stylistic/js/indent": ["warn", 2],
+    "one-var": 0,
+    "no-tabs": 0,
+    "no-path-concat": 0,
+    "valid-jsdoc": "warn",
+    "spaced-comment": 0,
+    "space-before-blocks": 0,
+    "space-before-function-paren": 0,
+    "comma-dangle": [1, "always-multiline"],
+    "eol-last": 1,
+    "no-mixed-spaces-and-tabs": 0,
+    "no-multi-spaces": [
+      2,
+      {
+        "exceptions": {
+          "Property": true,
+          "VariableDeclarator": true,
+          "ImportDeclaration": true,
+          "ObjectExpression": true,
+        },
+      },
+    ],
+    "no-warning-comments": 1,
+  },
+}

package/.storybook/main.js

@@ -0,0 +1,52 @@
+/** @type { import('@storybook/html-vite').StorybookConfig } */
+const config = {
+    stories: [
+        "../src/stories/Introduction.mdx",
+        // Include all stories found under the src/components directory ( For example: alert/alert.stories.js )
+        // Exlude any stories starting with an underscore ( For example: _exludeme.stories.js )
+        "../src/**/!(*_)*.mdx",
+        "../src/**/!(*_)*.stories.js",
+    ],
+    staticDirs: [
+        { from: '../dist', to: '/assets' },
+        { from: '../src/assets/img', to: '/assets/img' },
+    ], //Bring dist in statically instead of having it minified
+    addons: [//Storybook addons
+    //https://storybook.js.org/addons/
+    "@storybook/addon-themes", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/addon-links", "@chromatic-com/storybook", "@storybook/addon-mdx-gfm"],
+
+    framework: {
+        //Build the storybook with html-vite rendered - faster than webpack
+        //https://www.npmjs.com/package/@storybook/html-vite
+        name: "@storybook/html-vite",
+        options: {},
+    },
+
+    //Autodocs for each component
+    //https://storybook.js.org/docs/writing-docs/autodocs
+    docs: {
+        defaultName: 'Overview'
+    },
+
+
+    //Each component's JS module, for example Alert.js, imports a HTML string to use for it's template.
+    //We add a plugin to handle these .hbs extensions. (Or .mustache, .html etc)
+    //https://storybook.js.org/docs/api/main-config-vite-final
+
+    viteFinal: async (config, {configType}) => {
+        config.root = './dist'
+        // config.plugins.push({
+        //     name: "html-transform",
+        //     transform(src, id) {
+        //         if (id.endsWith(".mustache") || id.endsWith(".html") || id.endsWith(".hbs")) {
+        //             // Transform your HTML files here (src is the file content as a string)
+        //             return src;
+        //         }
+        //     },
+        // });
+
+        return config;
+    },
+};
+
+export default config;

package/.storybook/modes.js

@@ -0,0 +1,31 @@
+// .storybook/modes.js
+
+export const allModes = {
+  mobile: {
+    viewport: "iphone12",
+  },
+  desktop: {
+    viewport: "large",
+  },
+  "Light": {
+    theme: "light",
+  },
+  "Light alternative": {
+    theme: "alt",
+  },
+  "Dark": {
+    theme: "dark",
+  },
+  "Dark alternative": {
+    theme: "dark-alt",
+  }
+};
+
+export const allBackgrounds = {
+default: {name: 'default', value: '#FFFFFF'},
+"Light": {name: 'Light', value: "var(--qld-light-background)"},
+"Light alternative": {name: 'Light alternative', value: "var(--qld-light-grey-alt)"},
+"Dark": {name: 'Dark', value: "var(--qld-sapphire-blue)"},
+"Dark alternative": {name: 'Dark alternative', value: "var(--qld-dark-blue)"},
+}
+

package/.storybook/preview-head.html

@@ -0,0 +1,24 @@
+<!-- Refer: https://storybook.js.org/docs/configure/story-rendering#adding-to-head -->
+
+<style>
+    #storybook-docs .docblock-argstable-head th:nth-of-type(1) {
+        min-width: 20% !important;
+    }
+
+    #storybook-docs .docblock-argstable-head th:nth-of-type(2) {
+        min-width: 25% !important;
+    }
+
+    #storybook-docs .docblock-argstable-head th:nth-of-type(3) {
+        min-width: 20% !important;
+    }
+
+    #storybook-docs .docblock-argstable-head th:nth-of-type(4) {
+        min-width: 35% !important;
+    }
+
+
+    #storybook-docs .docblock-argstable-body textarea {
+        /* min-height: 100px; */
+    }
+</style>

package/.storybook/preview.js

@@ -0,0 +1,93 @@
+import "../dist/assets/js/bootstrap.min.js";
+import "../dist/assets/js/qld.bootstrap.min.js";
+import "../dist/assets/css/qld.bootstrap.css";
+import {withThemeByClassName} from '@storybook/addon-themes';
+import {allBackgrounds} from "./modes.js";
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+/** @type { import('@storybook/html-vite').Preview } */
+const preview = {
+
+    parameters: {
+        //actions: { argTypesRegex: "^on[A-Z].*" },
+        chromatic: {
+            //🔶 Test each story for ArticleCard in two modes
+            modes: {
+                // Light: allModes["Light"],
+                // "Light alternative": allModes["Light alternative"],
+                // Dark: allModes["Dark"],
+                // "Dark alternative": allModes["Dark alternative"],
+                //mobile: allModes["mobile"],
+                //desktop: allModes["desktop"],
+                //"1200px": {viewport: 1200}, //original non-modes based baseline
+            },
+        },
+        viewport: {
+            viewports: { //QLD-media Breakpoints
+                small: {name: "Small", styles: {width: "400px", height: "800px"}},
+                medium: {name: "Medium", styles: {width: "699px", height: "800px"}},
+                large: {name: "Large", styles: {width: "992px", height: "800px"}},
+                xlarge: {name: "Extra Large", styles: {width: "1312px", height: "1000px"}},
+                xxlarge: {name: "Extra Extra Large", styles: {width: "1599px", height: "1000px"}},
+                navbreakpoint: {name: "Nave Breakpoint", styles: {width: "992px", height: "800px"}},
+                ...INITIAL_VIEWPORTS
+            },
+        },
+        hideNoControlsWarning: true,
+        expanded: true,
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        html: {
+            highlighter: {
+                wrapLines: false,
+            },
+        },
+        docs: {
+            source: {
+                excludeDecorators: true,
+            },
+        },
+        backgrounds: {
+            //default: 'default',
+            values: [
+                allBackgrounds["default"],
+                allBackgrounds["Light"],
+                allBackgrounds["Light alternative"],
+                allBackgrounds["Dark"],
+                allBackgrounds["Dark alternative"],
+            ],
+        },
+        options: {
+            storySort: {
+                method: 'alphabetical',
+            }
+        },
+    },
+
+    decorators: [
+        // data-bs-theme="dark" won't be used
+        withThemeByClassName({
+            themes: {
+                "None": '',
+                "Light": 'light',
+                "Light alternative": 'alt',
+                "Dark": 'dark',
+                "Dark alternative": 'dark-alt',
+            },
+            defaultTheme: 'None',
+        }),
+        (Story) => {
+            return `
+			
+					${Story()}
+			
+      		`;
+        },
+    ],
+};
+
+export default preview;

package/.storybook/webpack.config.js

@@ -0,0 +1,8 @@
+module.exports = async ({ config, mode }) => {
+  config.module.rules.push({
+    test: /src\/components\/.*\/.*\.(html|mustache|hbs)$/i,
+    use: "raw-loader",
+  });
+  // Return the altered config
+  return config;
+};

package/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "accessibility.voice.keywordActivation": "off",
+    "accessibility.voice.speechTimeout": 800
+}

package/README.md

@@ -24,8 +24,8 @@ git clone https://github.com/qld-gov-au/qgds-qol-mvp
 
 ### Prerequisites
 
-- Node 18.17.1
-- NPM 10.2.5
+- Node 18.17.1+
+- NPM 10.2.5+
 
 ### Install dependencies
 
@@ -59,7 +59,10 @@ npm run serve
 
 ### Next steps
 
-- HTML templating using drop in components
+- HTML templating using drop in components 
+  
+  If you wish to use the includes handle bars, please ensure 
+"handlebars": "4.7.8" + is loaded prior to running handlebars.helpers.bundle.js
 - Dev build and testing branching
 
 ## Documentation