Merge pull request #1515 from ASU/uds-1958

Uds 1958

Author: davidornelas11

packages/unity-bootstrap-theme/.storybook/decorators.jsx

@@ -1,15 +1,32 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
+
+export const windowLoadEvent = (storyFn) => {
+  const mount = () => {
+    // console.log("sb mounting");
+
+    // custom events created by eventSpy.js to allow storybook to dispatch load events after the page is loaded
+    document.dispatchEvent(new Event("sb_DOMContentLoaded"));
+    window.dispatchEvent(new Event('sb_load'));
+  }
+
+  const unmount = () => {
+    // console.log("sb unmounting");
+
+    // bootstrap script has functionality initiated with window load event,
+    // so we need to reload the page every time we unmount the story.
+    // We set the opacity to 0 to avoid flickering.
+    document.body.style.opacity = "0";
+
+    // variable to prevent calling mount function before the page is reloaded
+    window.unloading = true;
+    window.location.reload();
+  }
 
-export const forceReloadOfStory = (storyFn, context) => {
   useEffect(() => {
-    setTimeout(() => {
-      context.globals.shouldReload = true;
-    }, 100);
-    return () => {
-      if (context.globals.shouldReload) {
-        window.location.reload();
-      }
-    };
+    if (!window.unloading) {
+      mount()
+    }
+    return unmount
   }, []);
 
   return storyFn();

packages/unity-bootstrap-theme/.storybook/eventSpy.js

@@ -0,0 +1,13 @@
+var originalAddEventListener = EventTarget.prototype.addEventListener;
+EventTarget.prototype.addEventListener = function (type, listener, options) {
+  if(listener.uidEvent && (type === "load" || type === "DOMContentLoaded")) {
+  /**
+   * Used by storybook windowLoadEvent decorator
+   * creates custom events sb_load and sb_DOMContentLoaded
+   * to allow storybook to dispatch load events after the page is loaded
+   *  */
+    originalAddEventListener.call(this, `sb_${type}`, listener, options);
+  }
+
+  originalAddEventListener.call(this, type, listener, options);
+};

packages/unity-bootstrap-theme/.storybook/local-addon/addon.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import { AddonPanel } from '@storybook/components';
-import { Source } from '@storybook/blocks';
 import { addons, types } from '@storybook/addons';
-import { formatWithBabelParser } from './helpers';
 import { Toggle } from '../../../../.storybook-config/Toggle'
 
 addons.register('local-addon', (api) => {
@@ -12,13 +10,12 @@ addons.register('local-addon', (api) => {
     type: types.PANEL,
     paramKey: 'initFunc',
     render: ({active, key}) => {
-      const data = api.getCurrentStoryData();
-      const initFunc = data?.parameters?.initFunc?.code || '';
-      const code = formatWithBabelParser(`${initFunc}`);
-
       return(
         <AddonPanel key={key} active={!!active}>
-          <Source code={`${code}`} language='js' format={true} />
+          <div style={{ padding: '20px', fontSize: '1rem'}}>
+            This component requires Javascript. <br/><br/>
+            View the documentation on <a href="./index.html?path=/docs/get-started-get-started--docs#-including-unity-in-your-project">including unity in your project</a>
+          </div>
         </AddonPanel>
     )},
   });

packages/unity-bootstrap-theme/.storybook/local-addon/decorators/withFooter.js

@@ -1,27 +1,15 @@
-import React, { useEffect, useRef} from 'react';
+import React from 'react';
 import { makeDecorator } from '@storybook/addons';
-
 import { GlobalElementsOnly as Footer } from "../../../stories/organisms/global-footer/global-footer.templates";
-import { initFooterGA } from "../../../stories/organisms/global-footer/global-footer"
 
 export const withFooter = makeDecorator({
   name: 'withFooter',
   parameterName: 'footer',
   skipIfNoParametersOrOptions: true,
   wrapper: (storyFn, context) => {
-    const loaded = useRef(0);
-    useEffect(()=>{
-      if(document.readyState !== "loading") {
-        initFooterGA()
-      }
-    },[loaded.current]);
-    loaded.current++;
-
     const { globals, parameters } = context;
-
     const footer = parameters?.footer;
     const isFooterActive = (globals.footer == true && footer?.disable !== true) || footer.forced == true;
-
     const isStory = context.viewMode === 'story';
 
     return <>

packages/unity-bootstrap-theme/.storybook/local-addon/decorators/withHeader.js

@@ -1,28 +1,16 @@
-import React, { useEffect, useRef} from 'react';
+import React from 'react';
 import { makeDecorator } from '@storybook/addons';
 
-import { Basic as Header } from "../../../stories/organisms/global-header/global-header.templates";
-
-import { initGlobalHeader } from "../../../src/js/storybook-global-header";
+import { Basic as Header } from "../../../stories/organisms/global-header/global-header.templates.jsx";
 
 export const withHeader = makeDecorator({
   name: 'withHeader',
   parameterName: 'header',
   skipIfNoParametersOrOptions: true,
   wrapper: (storyFn, context) => {
-    const loaded = useRef(0);
-    useEffect(()=>{
-      if(document.readyState !== "loading") {
-        initGlobalHeader()
-      }
-    },[loaded.current]);
-    loaded.current++;
-
     const { globals, parameters } = context;
-
     const header = parameters?.header;
     const isHeaderActive = (globals.header == true && header?.disable !== true) || header.forced === true;
-
     const isStory = context.viewMode === 'story';
 
     return <>

packages/unity-bootstrap-theme/.storybook/local-addon/decorators/withInitFunc.js

@@ -5,10 +5,6 @@ import {
 
 import { withFooter } from './decorators/withFooter';
 import { withHeader } from './decorators/withHeader';
-import { withInitFunc } from './decorators/withInitFunc';
-import { withLoadEvent } from './decorators/withLoadEvent';
-
-import "../../src/js/data-layer.js";
 
 export const parameters = {
   header: {
@@ -21,8 +17,7 @@ export const parameters = {
     disable: false
   },
   initFunc: {
-    disable: true,
-    code: null
+    disable: true
   },
   docs:{
     source: {
@@ -40,8 +35,6 @@ export const globals = {
   footer: false
 }
 export const decorators = [
-  withLoadEvent,
-  withInitFunc,
   withHeader,
   withFooter,
 ]

packages/unity-bootstrap-theme/.storybook/local-addon/decorators/withLoadEvent.js

@@ -4,6 +4,7 @@ export default {
   staticDirs: ['../dist'],
   stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
+    "./local-addon",
     "../../../.storybook-config",
     "../../../.storybook-config/dataLayerListener",
     "@whitespace/storybook-addon-html",

packages/unity-bootstrap-theme/.storybook/local-addon/entry.js

@@ -1,8 +1,13 @@
+import "./eventSpy.js";
 import "../src/scss/unity-bootstrap-theme.bundle.scss";
+import { default as bootstrap } from "bootstrap/js/index.umd.js";
+globalThis.bootstrap = bootstrap;
+import { default as udsBootstrap } from "../src/js/unity-bootstrap.js";
+globalThis.udsBootstrap = udsBootstrap;
+
 import { removeFontAwesomeChanges } from "./local-addon/helpers";
 
-// Import all the Bootstrap bundle
-import "../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min";
+import { windowLoadEvent } from "./decorators.jsx";
 
 const parameters = {
   options: {
@@ -58,7 +63,8 @@ const parameters = {
 
 /** @type { import('@storybook/react').Preview } */
 const preview = {
-  parameters
+  parameters,
+    decorators: [windowLoadEvent],
 };
 
 export default preview;