Skip to content

Commit 4fc88b8

Browse files
scott-williams-azscott-williams-az
committed
storybook config changes
1 parent 1ec8be1 commit 4fc88b8

File tree

8 files changed

+154
-76
lines changed

8 files changed

+154
-76
lines changed

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

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
1-
import React, { useEffect } from "react";
1+
import { useEffect } from "react";
2+
3+
export const windowLoadEvent = (storyFn) => {
4+
const mount = () => {
5+
// console.log("sb mounting");
6+
7+
// custom events created by eventSpy.js to allow storybook to dispatch load events after the page is loaded
8+
document.dispatchEvent(new Event("sb_DOMContentLoaded"));
9+
window.dispatchEvent(new Event('sb_load'));
10+
}
11+
12+
const unmount = () => {
13+
// console.log("sb unmounting");
14+
15+
// bootstrap script has functionality initiated with window load event,
16+
// so we need to reload the page every time we unmount the story.
17+
// We set the opacity to 0 to avoid flickering.
18+
document.body.style.opacity = "0";
19+
20+
// variable to prevent calling mount function before the page is reloaded
21+
window.unloading = true;
22+
window.location.reload();
23+
}
224

3-
export const forceReloadOfStory = (storyFn, context) => {
425
useEffect(() => {
5-
setTimeout(() => {
6-
context.globals.shouldReload = true;
7-
}, 100);
8-
return () => {
9-
if (context.globals.shouldReload) {
10-
window.location.reload();
11-
}
12-
};
26+
if (!window.unloading) {
27+
mount()
28+
}
29+
return unmount
1330
}, []);
1431

1532
return storyFn();

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
var originalAddEventListener = EventTarget.prototype.addEventListener;
2+
EventTarget.prototype.addEventListener = function (type, listener, options) {
3+
if(listener.uidEvent && (type === "load" || type === "DOMContentLoaded")) {
4+
/**
5+
* Used by storybook windowLoadEvent decorator
6+
* creates custom events sb_load and sb_DOMContentLoaded
7+
* to allow storybook to dispatch load events after the page is loaded
8+
* */
9+
originalAddEventListener.call(this, `sb_${type}`, listener, options);
10+
}
11+
12+
originalAddEventListener.call(this, type, listener, options);
13+
};

‎packages/unity-bootstrap-theme/.storybook/preview.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1+
import "./eventSpy.js";
12
import "../src/scss/unity-bootstrap-theme.bundle.scss";
3+
import { default as bootstrap } from "bootstrap/js/index.umd.js";
4+
globalThis.bootstrap = bootstrap;
5+
import { default as udsBootstrap } from "@asu/unity-bootstrap-theme/src/js/unity-bootstrap-theme.js";
6+
globalThis.udsBootstrap = udsBootstrap;
7+
28
import { removeFontAwesomeChanges } from "./local-addon/helpers";
39

4-
// Import all the Bootstrap bundle
5-
import "../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min";
10+
import { windowLoadEvent } from "./decorators.jsx";
611

712
const parameters = {
813
options: {
@@ -58,7 +63,8 @@ const parameters = {
5863

5964
/** @type { import('@storybook/react').Preview } */
6065
const preview = {
61-
parameters
66+
parameters,
67+
decorators: [windowLoadEvent],
6268
};
6369

6470
export default preview;

‎packages/unity-react-core/.storybook-configv8/dataLayerListener/withDataLayerListener.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const withDataLayerListener = makeDecorator({
1010

1111
function removeDOMObjects(eventObject){
1212
return Object.entries(eventObject).reduce((acc, [k, v])=>{
13-
acc[k] = (typeof v === "object" && v.tagName) ? v.tagName : v;
13+
acc[k] = (typeof v === "object" && v?.tagName) ? v.tagName : v;
1414
return acc
1515
},{})
1616
}

‎packages/unity-react-core/.storybook-configv8/preset/preview.js‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
import { withColumns } from '../withColumns';
33
import { customViewports } from '../viewports';
44

5-
export const globals = {
6-
columns: false,
7-
};
8-
95
export const initialGlobals = {
106
columns: false,
117
};
@@ -23,7 +19,6 @@ export const decorators = [
2319

2420
/** @type { import('@storybook/react').Preview } */
2521
const preview = {
26-
globals,
2722
initialGlobals,
2823
parameters,
2924
decorators,

‎packages/unity-react-core/.storybook/decorators.tsx‎

Lines changed: 85 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,34 @@
11
/**
22
* This file houses all non-addon related decorators
33
*/
4-
import { renderToStaticMarkup } from "react-dom/server";
54
import { Decorator } from "@storybook/react";
6-
import React, { useLayoutEffect, StrictMode } from "react";
5+
import React, { forwardRef, ReactNode, StrictMode, useEffect } from "react";
76

87
import { getBootstrapHTML } from "../src/components/GaEventWrapper/useBaseSpecificFramework";
98
import { useChannel } from "@storybook/preview-api";
109

11-
declare global {
12-
interface Window {
13-
initDataLayer: () => void;
14-
}
10+
type ContainerComponent<T, P = HTMLElement> = React.ForwardRefExoticComponent<T & React.RefAttributes<P>>;
11+
12+
declare interface ContainerProps {
13+
children?: ReactNode;
14+
dangerouslySetInnerHTML?: {
15+
__html: string;
16+
};
1517
}
1618

17-
const Full = ({ children, rootRef }) => (
18-
<div ref={rootRef} id="html-root" className="col uds-full-width">
19-
{children}
20-
</div>
21-
);
19+
const Full:ContainerComponent<ContainerProps, any> = forwardRef((props, ref) => {
20+
return (
21+
<div ref={ref} id="html-root" className="col uds-full-width" {...props}/>
22+
)});
2223

23-
const UdsContainer = ({ children, rootRef }) => (
24+
const UdsContainer:ContainerComponent<ContainerProps, any> = forwardRef((props, ref) => {
25+
return (
2426
<div className="container">
2527
<div className="row">
26-
<div ref={rootRef} id="html-root" className="uds-container">
27-
{children}
28-
</div>
28+
<div ref={ref} id="html-root" className="uds-container" {...props}/>
2929
</div>
3030
</div>
31-
);
32-
33-
const StaticStory = ({ args, Container, children, rootRef }) => {
34-
useLayoutEffect(() => {
35-
/**
36-
* Storybook only useId() will prefix the id with this identifier allowing
37-
* us to identify when the output is meant for bootstrap (non react)
38-
*/
39-
const code = getBootstrapHTML(children);
40-
rootRef.current.innerHTML = code;
41-
42-
window.initDataLayer();
43-
}, [args]);
44-
return <Container rootRef={rootRef}></Container>;
45-
};
31+
)});
4632

4733
export const withContainer: Decorator = (
4834
StoryFn,
@@ -52,39 +38,83 @@ export const withContainer: Decorator = (
5238
parameters: { layout = "fullscreen" },
5339
}
5440
) => {
55-
const root = React.useRef(null);
41+
const isBootstrap = framework === "bootstrap";
42+
const isReact = !isBootstrap;
43+
const root = React.useRef(null as any);
5644

5745
const emit = useChannel({ "HTML/CodeUpdated": () => {} });
5846

47+
48+
49+
const mount = () => {
50+
// console.log("sb mounting");
51+
52+
if (root.current) {
53+
if (isBootstrap) {
54+
// custom events created by eventSpy.js to allow storybook to dispatch load events after the page is loaded
55+
document.dispatchEvent(new Event("sb_DOMContentLoaded"));
56+
window.dispatchEvent(new Event('sb_load'));
57+
}
58+
59+
emit("HTML/CodeUpdated", { code: root.current.innerHTML });
60+
}
61+
62+
}
63+
64+
const unmount = () => {
65+
// console.log("sb unmounting");
66+
if (isBootstrap) {
67+
// bootstrap script has functionality initiated with window load event,
68+
// so we need to reload the page every time we unmount the story.
69+
// We set the opacity to 0 to avoid flickering.
70+
document.body.style.opacity = "0";
71+
72+
// @ts-ignore
73+
window.unloading = true; // variable to prevent calling mount function before the page is reloaded
74+
75+
// adding this timeout allows controls time to update
76+
setTimeout(()=>{window.location.reload()}, 100);
77+
}
78+
}
79+
80+
81+
82+
83+
84+
85+
86+
87+
useEffect(() => {
88+
// @ts-ignore
89+
if (!window.unloading) {
90+
mount()
91+
} else {
92+
93+
}
94+
return unmount
95+
}, [StoryFn, args, framework]);
96+
5997
let Container = Full;
6098
if (layout === "container") {
6199
Container = UdsContainer;
62100
}
63-
let html = "";
64-
let WrappedStory: React.ReactNode;
65-
if (framework === "bootstrap") {
66-
html = getBootstrapHTML(<StoryFn />);
67-
WrappedStory = (
68-
<StrictMode>
69-
<StaticStory args={args} Container={Container} rootRef={root}>
70-
<StoryFn />
71-
</StaticStory>
72-
</StrictMode>
73-
);
74-
} else {
75-
html = renderToStaticMarkup(<StoryFn />);
76-
WrappedStory = (
77-
<StrictMode>
78-
<Container rootRef={root}>
79-
<StoryFn />
101+
102+
return (
103+
<StrictMode>
104+
{
105+
isBootstrap
106+
? <Container ref={root} dangerouslySetInnerHTML={{ __html: getBootstrapHTML(<StoryFn {...args}/>)}}/>
107+
: <Container ref={root}>
108+
<StoryFn {...args}/>
80109
</Container>
81-
</StrictMode>
82-
);
83-
}
84-
// emit the html So Addon Panel can update
85-
emit("HTML/CodeUpdated", { code: html });
86-
return WrappedStory;
110+
}
111+
</StrictMode>
112+
);
87113
};
88114

89115
// ordered from innermost to outermost, be careful with the order!
90-
export const globalDecorators = [withContainer];
116+
export const globalDecorators = [
117+
withContainer
118+
];
119+
120+

‎packages/unity-react-core/.storybook/eventSpy.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
var originalAddEventListener = EventTarget.prototype.addEventListener;
2+
EventTarget.prototype.addEventListener = function (type, listener, options) {
3+
if(listener.uidEvent && (type === "load" || type === "DOMContentLoaded")) {
4+
/**
5+
* Used by storybook windowLoadEvent decorator
6+
* creates custom events sb_load and sb_DOMContentLoaded
7+
* to allow storybook to dispatch load events after the page is loaded
8+
* */
9+
originalAddEventListener.call(this, `sb_${type}`, listener, options);
10+
}
11+
12+
originalAddEventListener.call(this, type, listener, options);
13+
};

‎packages/unity-react-core/.storybook/preview.jsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1+
import "./eventSpy.js";
12
import "@asu/unity-bootstrap-theme/src/scss/unity-bootstrap-theme.bundle.scss";
2-
import "bootstrap/dist/js/bootstrap.bundle.min.js";
3+
import * as bootstrap from "bootstrap/dist/js/bootstrap.bundle.min.js";
4+
globalThis.bootstrap = bootstrap;
5+
6+
import "@asu/unity-bootstrap-theme/src/js/unity-bootstrap-theme.js";
37
import { globalDecorators } from "./decorators.tsx";
48
import { Container } from "./docPage.tsx";
5-
import "@asu/unity-bootstrap-theme/src/js/data-layer.js";
9+
610

711
const sourceCodeRootSelector = "#html-root";
812

0 commit comments

Comments
 (0)