@qld-gov-au/qgds-bootstrap5 2.0.5 → 2.0.7

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

@@ -12,7 +12,7 @@ export default function buildlog() {
         log("yellow", "Starting build...\n");
       });
 
-      // eslint-disable-next-line no-unused-vars
+       
       build.onEnd((result) => {
         console.log("BUNDLING:");
         build.initialOptions.entryPoints.forEach((entry) => {
@@ -45,7 +45,7 @@ export default function buildlog() {
 
       });
 
-      // eslint-disable-next-line no-unused-vars
+       
       build.onEnd((result) => {
         console.log(`\n`);
         log("yellow", `✓ Build complete.\n\n`);

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

@@ -8,19 +8,16 @@ export default function copyPlugin() {
     verbose: false,
     watch: true,
     assets: [
-      {from: ["./node_modules/bootstrap/dist/js/bootstrap.bundle.js"], to: ["./dist/assets/js/bootstrap.js"]},
       {from: ["./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"], to: ["./dist/assets/js/bootstrap.min.js"]},
       {from: ["./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map"], to: ["./dist/assets/js/bootstrap.min.js.map"]},
       {from: ["./node_modules/bootstrap/dist/js/bootstrap.bundle.*"], to: ["./dist/assets/js/"]},
 
       {from: ["./src/components/bs5/**/*.hbs"], to: ["./dist/assets/components/bs5/"],},
-      {from: ["./src/js/handlebars.*"], to: ["./dist/assets/js/"],},
       {from: ["./src/img/*"], to: ["./dist/assets/img"]},
       // Sample data
       {from: ["./src/components/bs5/**/*.data.json"], to: ["./dist/sample-data/"],},
 
       // dist/components will be going away please use dist/assets/components
-      {from: ["./src/js/handlebars.*"], to: ["./dist/components/"],},
       {from: ["./src/components/bs5/**/*.hbs"], to: ["./dist/components/bs5/"],},
 
       //Copy info files for reference

package/.storybook/README.md

@@ -0,0 +1,10 @@
+## What stops Turbo Snapshots
+
+The key files that will always trigger a full run if touched include:
+
+*  .storybook/main.js / .storybook/main.ts
+* .storybook/preview.js / .storybook/preview.ts
+* .storybook/manager.js
+* Any addons.js or config imports that affect global decorators/parameters
+
+Any file linked to preview.js i.e. transitive dependencies could also trigger a skip (i.e. if css is altered it would then run the full build to pick up regressions, if hbs files are just altered or a new story is added then it would not rebuild the full project)

package/.storybook/dynamicThemeDecorator.js

@@ -6,7 +6,7 @@ let currentTheme = "masterbrand";
 // Automatically generate theme modules based on available theme files
 const themeModules = (() => {
   const modules = {
-    customized: () => import("../src/css/main.scss"),
+    masterbrand: () => import("../src/css/main.scss"),
   };
 
   // Get all theme files in the themes directory
@@ -50,27 +50,23 @@ function mapStyleElementsByTheme(callback) {
   });
 }
 
-const unloadTheme = (themeName) => {
-  // Cache current theme's style elements before removing
-  // Remove existing style elements for current theme
-  const currentStyleElements = [];
-  const themeNotExist = themeName && !themeStyleElements.has(themeName);
-  mapStyleElementsByTheme((element) => {
-    if (themeNotExist) {
-      currentStyleElements.push(element.cloneNode(true));
-    }
-    element.remove();
-  });
-
-  if (currentStyleElements.length > 0) {
-    themeStyleElements.set(themeName, currentStyleElements);
-  }
-};
-
 const loadTheme = async (themeName) => {
-  // Unload current theme if it's different
-  if (currentTheme && currentTheme !== themeName) {
-    unloadTheme(currentTheme);
+  // Store the previous theme name before changing
+  const previousTheme = currentTheme;
+
+  // Cache previous theme's elements BEFORE loading new theme
+  const previousThemeElements = [];
+  if (previousTheme && previousTheme !== themeName) {
+    mapStyleElementsByTheme((element) => {
+      previousThemeElements.push(element);
+    });
+    // Store in cache if not already cached
+    if (!themeStyleElements.has(previousTheme)) {
+      themeStyleElements.set(
+        previousTheme,
+        previousThemeElements.map((el) => el.cloneNode(true)),
+      );
+    }
   }
 
   // If theme style elements are cached, restore them
@@ -79,6 +75,10 @@ const loadTheme = async (themeName) => {
     cachedElements.forEach((element) => {
       document.head.appendChild(element.cloneNode(true));
     });
+    // Remove previous theme elements after new theme is fully loaded
+    previousThemeElements.forEach((element) => {
+      element.remove();
+    });
     currentTheme = themeName;
     return;
   }
@@ -108,6 +108,11 @@ const loadTheme = async (themeName) => {
       // Store references
       loadedThemes.set(themeName, true);
       currentTheme = themeName;
+
+      // Remove previous theme elements after new theme is fully loaded
+      previousThemeElements.forEach((element) => {
+        element.remove();
+      });
     } catch (error) {
       console.warn(`Failed to load theme: ${themeName}`, error);
     }
@@ -132,11 +137,11 @@ export const dynamicThemeGlobalTypes = {
       icon: "switchalt",
       items: (() => {
         // Dynamically generate toolbar items from available themes
-        const items = [];
+        const items = [{ value: "masterbrand", title: "Masterbrand theme" }];
 
         // Add items for all discovered themes
         Object.keys(themeModules).forEach((themeName) => {
-          if (themeName !== "customized") {
+          if (themeName !== "masterbrand") {
             const capitalizedName =
               themeName.charAt(0).toUpperCase() + themeName.slice(1);
             items.push({
@@ -145,7 +150,6 @@ export const dynamicThemeGlobalTypes = {
             });
           }
         });
-        items.push({ value: "customized", title: "Customized theme" });
         return items;
       })(),
       showName: true,

package/.storybook/{main.js → main.mjs}

@@ -1,7 +1,7 @@
 /** @type { import('@storybook/html-vite').StorybookConfig } */
+// Is an ESM module now
 
 import path from "path";
-import fs from "fs";
 
 const config = {
   stories: [
@@ -17,11 +17,10 @@ const config = {
     //https://storybook.js.org/addons/
     "@storybook/addon-a11y",
     "@storybook/addon-themes",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
     "@storybook/addon-links",
     "@chromatic-com/storybook",
     "storybook-addon-deep-controls",
+    "@storybook/addon-docs",
   ],
 
   framework: {
@@ -46,11 +45,13 @@ const config = {
 
   viteFinal: async (config, { configType }) => {
     config.root = "./dist";
-    
+
     // Define environment variables for the browser
     config.define = {
       ...config.define,
-      'import.meta.env.ENABLE_DYNAMIC_THEME': JSON.stringify(process.env.ENABLE_DYNAMIC_THEME === 'true')
+      "import.meta.env.ENABLE_DYNAMIC_THEME": JSON.stringify(
+        process.env.ENABLE_DYNAMIC_THEME === "true",
+      ),
     };
     // config.plugins.push({
     //     name: "html-transform",
@@ -67,8 +68,8 @@ const config = {
       fs: {
         allow: [
           // Allow access to assets
-          path.resolve(__dirname, "../src/assets"),
-          path.resolve(__dirname, "../src/img"),
+          path.resolve(process.cwd(), "../src/assets"),
+          path.resolve(process.cwd(), "../src/img"),
         ],
       },
     };

package/.storybook/modes.js

@@ -7,25 +7,16 @@ export const allModes = {
   desktop: {
     viewport: "large",
   },
-  "Light": {
+  Light: {
     theme: "light",
   },
   "Light alternative": {
     theme: "alt",
   },
-  "Dark": {
+  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.js

@@ -1,7 +1,8 @@
 import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
 import "../src/js/qld.bootstrap.js";
-import "../src/css/main.masterbrand.scss";
+import "../src/css/main.scss";
 import { withThemeByClassName } from "@storybook/addon-themes";
+// import { allBackgrounds } from "./modes.js";
 import {
   withDynamicTheme,
   dynamicThemeGlobalTypes,
@@ -9,8 +10,7 @@ import {
 
 // Check if dynamic theme should be enabled via environment variable
 const ENABLE_DYNAMIC_THEME = import.meta.env.ENABLE_DYNAMIC_THEME;
-import { allBackgrounds } from "./modes.js";
-import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { INITIAL_VIEWPORTS } from "storybook/viewport";
 import init from "../src/js/handlebars.init.js";
 import Handlebars from "handlebars";
 
@@ -82,14 +82,14 @@ const preview = {
       },
     },
     backgrounds: {
-      //default: 'default',
-      values: [
-        allBackgrounds["default"],
-        allBackgrounds["Light"],
-        allBackgrounds["Light alternative"],
-        allBackgrounds["Dark"],
-        allBackgrounds["Dark alternative"],
-      ],
+      options: {
+        default: { name: "Default", value: "var(--qld-default-background)" },
+        light: { name: "Light", value: "var(--qld-light-background)" },
+        alt: { name: "Light Alt", value: "var(--qld-light-alt-background)" },
+        dark: { name: "Dark", value: "var(--qld-dark-background)" },
+        darkAlt: { name: "Dark Alt", value: "var(--qld-dark-alt-background)" },
+      },
+      disable: true,
     },
     options: {
       storySort: {
@@ -110,6 +110,9 @@ const preview = {
         restoreScroll: true,
       },
     },
+    initialGlobals: {
+      backgrounds: { value: "default" },
+    },
   },
 
   decorators: [

package/dist/assets/components/bs5/head/head.hbs

@@ -1,5 +1,5 @@
 
-<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.5","branch":"HEAD","tag":"v2.0.5","commit":"7972857bf46e8fa3db8ca361447711262fffc21e","majorVersion":"v2"} -->
+<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.7","branch":"HEAD","tag":"v2.0.7","commit":"c204c02c3420408a069d8228b40be125edc579d8","majorVersion":"v2"} -->
 
 {{! Select environment, used verbatium if not using predefind key
 cdn := PROD|STAGING|BETA|TEST|DEV|???