Merge pull request #375 from qld-gov-au/correct_storybook_dev_mode

Storybook: correct error ./storybook/preview.js cannot be fetched. in dev mode

.storybook/preview.js

@@ -1,9 +1,11 @@
-import "../dist/assets/js/bootstrap.min.js";
-import "../dist/assets/js/qld.bootstrap.min.js";
-import "../dist/assets/css/qld.bootstrap.css";
+import "../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js";
+import "../src/js/qld.bootstrap.js";
+import "../src/css/main.scss";
 import {withThemeByClassName} from '@storybook/addon-themes';
 import {allBackgrounds} from "./modes.js";
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import init from "../src/js/handlebars.init.js";
+import Handlebars from "handlebars";
 
 /** @type { import('@storybook/html-vite').Preview } */
 const preview = {
@@ -88,6 +90,7 @@ const preview = {
             defaultTheme: 'None',
         }),
         (Story) => {
+            init(Handlebars);
             return `
 			
 					${Story()}

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

@@ -1,13 +1,10 @@
 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,

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

@@ -1,12 +1,9 @@
 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;
   },
 

src/components/bs5/contentFooterWrapper/contentFooterWrapper.stories.js

@@ -1,12 +1,9 @@
 import defaultdata from "./../contentFooter/contentFooter.data.json";
 import { ContentFooterWrapperTest } from "./contentFooterWrapper.test.js";
-import init from "../../../js/handlebars.init.js";
-import Handlebars from "handlebars";
 
 export default {
   title: "!Layout/Components/Content Footer Wrapper",
   render: (args) => {
-    init(Handlebars)
     return new ContentFooterWrapperTest(args).html;
   },
 

src/components/bs5/contentWrapper/contentWrapper.stories.js

@@ -1,13 +1,10 @@
 // ComponentExample.stories.js
 import { ContentWrapperTest } from "./ContentWrapper.test.js";
 import defaultdata from "./contentWrapper.data.json";
-import init from "./../../../js/handlebars.init";
-import Handlebars from "handlebars";
 
 export default {
   title: "!Layout/Components/Content Wrapper",
   render: (args) => {
-    init(Handlebars);
     return new ContentWrapperTest(args).html;
   },
 

src/components/bs5/fullPageWrapper/fullPage.stories.js

@@ -1,7 +1,4 @@
 import { FullPageTest } from "./fullPage.test.js";
-import init from "../../../js/handlebars.init.js";
-import Handlebars from "handlebars";
-
 import { dcTerms } from '../metaDcTerms/MetaDcTerms.data.json';
 import metaOpenGraphData from '../metaOpenGraph/MetaOpenGraph.data.json';
 import masterbrand_variant from '../header/header.variant.masterBrand.data.json';
@@ -16,6 +13,8 @@ import footerData from "../footer/footer.data.json";
 const defaultData = {
   cdn: ".", //for StoryBook it's ., for normal usage "PROD"
   title: "title goes here",
+  "icon-root": masterbrand_variant["icon-root"],
+  icons: masterbrand_variant.icons,
   description: "my description",
   uri: "http://localhost/uri/here",
   dcTerms: dcTerms,
@@ -34,7 +33,6 @@ const defaultData = {
 export default {
   title: "!Layout/Full Page",
   render: (args) => {
-    init(Handlebars)
     return new FullPageTest(args).html;
   },
   args: defaultData,

src/components/bs5/mainContainerWrapper/mainContainerWrapper.stories.js

@@ -1,7 +1,5 @@
 import { MainContainerWrapperTest } from "./mainContainerWrapper.test.js";
 
-import init from "./../../../js/handlebars.init";
-import Handlebars from "handlebars";
 //Data
 import masterbrand_variant from '../header/header.variant.masterBrand.data.json';
 import menu_state from "../navbar/navbar.variant.menuState.data.json";
@@ -15,6 +13,8 @@ import footerData from "../footer/footer.data.json";
 const defaultData = {
   cdn: ".", //for storybook it's ., for normal usage "PROD"
   title: "title goes here",
+  "icon-root": masterbrand_variant["icon-root"],
+  icons: masterbrand_variant.icons,
   header: masterbrand_variant,
   search: searchData,
   navbar: menu_state,
@@ -28,7 +28,6 @@ const defaultData = {
 export default {
   title: "!Layout/Main Container Wrapper",
   render: (args) => {
-    init(Handlebars)
     return new MainContainerWrapperTest(args).html;
   },
   args: defaultData,

src/components/bs5/sidenavWrapper/sidenavWrapper.stories.js

@@ -1,13 +1,10 @@
 // ComponentExample.stories.js
 import { SidenavWrapperTest } from "./SidenavWrapper.test.js";
 import defaultdata from "./../sidenav/sidenav.data.json";
-import init from "./../../../js/handlebars.init";
-import Handlebars from "handlebars";
 export default {
   tags: ["autodocs"],
   title: "!Layout/Components/Side Navigation Wrapper",
   render: (args) => {
-    init(Handlebars);
     return new SidenavWrapperTest(args).html;
   },
 

src/css/main.scss

@@ -1,7 +1,3 @@
-// DEV Notes:
-// ~bootstrap is an alias for node_modules/bootstrap/ as defined in vite.config.js
-// ~fontawesome is an alias for node_modules/fontawesome/ as defined in vite.config.js
-
 // Guidelines for this setup: https://getbootstrap.com/docs/5.3/customize/sass/
 
 // External fonts
@@ -11,7 +7,8 @@ $font-family-sitename: "Fira Sans";
 
 //Icons
 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.css");
-@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
+//TODO: should we pull from ../../node_modules/@fortawesome/fontawesome-free/css/all.css instead of cdn
+@import "../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss";
 
 
 //Prefix to namespace design-system classes
@@ -22,59 +19,59 @@ $enable-dark-mode: true;
 
 
 // 1. Include bootstraps functions and variables first (so they can be referenced by proceeding files)
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/variables-dark";
+@import "../../node_modules/bootstrap/scss/functions";
+@import "../../node_modules/bootstrap/scss/variables";
+@import "../../node_modules/bootstrap/scss/variables-dark";
 
 // 2. QLD Design System variables (Bootstrap overrides)
 @import "./qld-variables";
 // @import "./scss/qld-variables-dark"; //future state
 
 // 3. Include remainder of bootstrap
 // 3.1 Required
-@import "~bootstrap/scss/maps";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/utilities";
+@import "../../node_modules/bootstrap/scss/maps";
+@import "../../node_modules/bootstrap/scss/mixins";
+@import "../../node_modules/bootstrap/scss/utilities";
 
 
 // 3.2 Recommended, Resets and shared
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "~bootstrap/scss/type";
-@import "~bootstrap/scss/containers";
-@import "~bootstrap/scss/grid";
-@import "~bootstrap/scss/helpers";
+@import "../../node_modules/bootstrap/scss/root";
+@import "../../node_modules/bootstrap/scss/reboot";
+@import "../../node_modules/bootstrap/scss/type";
+@import "../../node_modules/bootstrap/scss/containers";
+@import "../../node_modules/bootstrap/scss/grid";
+@import "../../node_modules/bootstrap/scss/helpers";
 
 // 3.3 Optional components
-@import "~bootstrap/scss/accordion";
-@import "~bootstrap/scss/alert";
-@import "~bootstrap/scss/badge";
-@import "~bootstrap/scss/buttons";
-@import "~bootstrap/scss/button-group";
-@import "~bootstrap/scss/breadcrumb";
-@import "~bootstrap/scss/card";
-@import "~bootstrap/scss/carousel";
-@import "~bootstrap/scss/close";
-@import "~bootstrap/scss/dropdown";
-@import "~bootstrap/scss/forms";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/images";
-@import "~bootstrap/scss/modal";
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/transitions";
-@import "~bootstrap/scss/nav";
-@import "~bootstrap/scss/navbar";
-@import "~bootstrap/scss/offcanvas";
-@import "~bootstrap/scss/pagination";
-@import "~bootstrap/scss/placeholders";
-@import "~bootstrap/scss/popover";
-@import "~bootstrap/scss/spinners";
-@import "~bootstrap/scss/tables";
-@import "~bootstrap/scss/toasts";
-@import "~bootstrap/scss/tooltip";
+@import "../../node_modules/bootstrap/scss/accordion";
+@import "../../node_modules/bootstrap/scss/alert";
+@import "../../node_modules/bootstrap/scss/badge";
+@import "../../node_modules/bootstrap/scss/buttons";
+@import "../../node_modules/bootstrap/scss/button-group";
+@import "../../node_modules/bootstrap/scss/breadcrumb";
+@import "../../node_modules/bootstrap/scss/card";
+@import "../../node_modules/bootstrap/scss/carousel";
+@import "../../node_modules/bootstrap/scss/close";
+@import "../../node_modules/bootstrap/scss/dropdown";
+@import "../../node_modules/bootstrap/scss/forms";
+@import "../../node_modules/bootstrap/scss/list-group";
+@import "../../node_modules/bootstrap/scss/images";
+@import "../../node_modules/bootstrap/scss/modal";
+@import "../../node_modules/bootstrap/scss/progress";
+@import "../../node_modules/bootstrap/scss/transitions";
+@import "../../node_modules/bootstrap/scss/nav";
+@import "../../node_modules/bootstrap/scss/navbar";
+@import "../../node_modules/bootstrap/scss/offcanvas";
+@import "../../node_modules/bootstrap/scss/pagination";
+@import "../../node_modules/bootstrap/scss/placeholders";
+@import "../../node_modules/bootstrap/scss/popover";
+@import "../../node_modules/bootstrap/scss/spinners";
+@import "../../node_modules/bootstrap/scss/tables";
+@import "../../node_modules/bootstrap/scss/toasts";
+@import "../../node_modules/bootstrap/scss/tooltip";
 
 // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
-@import "~bootstrap/scss/utilities/api";
+@import "../../node_modules/bootstrap/scss/utilities/api";
 
 //8. QLD Design System typography (bootstrap overrides and custom). Please maintain naming consistency.
 @import "./qld-type";

src/js/QGDSComponent.js

@@ -1,5 +1,4 @@
 import Handlebars from "handlebars";
-import handlebarsHelpers from "./handlebars.helpers";
 
 export default class Component {
   /**
@@ -26,4 +25,3 @@ export default class Component {
     };
   }
 }
-handlebarsHelpers(Handlebars);

src/stories/integration/MainIntegration.js

@@ -1,12 +1,11 @@
 /* global, __dirname */
 
-import init from "./../../js/handlebars.init";
+
 import Handlebars from 'handlebars';
 
 export class MainIntegration {
 
   constructor(data, args = {}) {
-    init(Handlebars);
     console.log("contracutor");
     this.data = data;
     this.args = args;

src/stories/integration/integration.stories.js

@@ -21,6 +21,8 @@ const defaultData = {
   template: template, // Adjust template path relative to this file
   cdn: ".", //for storybook it's ., for normal usage "PROD"
   title: "title goes here",
+  "icon-root": headerData["icon-root"],
+  icons: headerData.icons,
   description: "my description",
   uri: "http://localhost/uri/here",
   dcTerms: dcTerms,