fix(unity-react-core): fix storybook

Author: scott-williams-az

.storybook-configv8/README.md

@@ -0,0 +1,2 @@
+# .storybook-configv8 folder
+Once other packages in this monorepo are upgrade to Storybook v8. this folder should move to a common location

.storybook-configv8/Toggle.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { useGlobals, useParameter } from '@storybook/manager-api';
+import { IconButton } from '@storybook/components';
+
+export const Toggle = ({global: globalKey, children}) => {
+  const [globals, updateGlobals] = useGlobals();
+  const params = useParameter(globalKey);
+
+  if (params?.disable) {
+    return null;
+  }
+
+  let isActive = globals[globalKey] || false;
+
+  return (
+    <IconButton
+      key={globalKey}
+      active={isActive}
+      title={`Apply ${globalKey} to the preview`}
+      onClick={() =>{
+        updateGlobals({
+          [globalKey]: !isActive,
+        })}
+      }
+    >
+      {children}
+    </IconButton>
+  );
+};

.storybook-configv8/dataLayerListener/Panel.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { useAddonState, useChannel } from "@storybook/manager-api";
+import { styled } from "@storybook/theming";
+import { AddonPanel, Button, Form } from "@storybook/components";
+import { Source } from '@storybook/blocks';
+import { ADDON_ID, EVENTS } from "./constants.js";
+
+const SourceWrapper = styled(Source)({
+  margin: 0,
+  backgroundColor: "#f8f8f8",
+  zIndex: 1
+})
+
+export const Panel = (props) => {
+  const [{dataLayer, filter}, setState] = useAddonState(ADDON_ID, {
+    dataLayer: [],
+    filter: "!gtm.",
+  });
+
+  // useChannel({
+  //   [EVENTS.CODE_UPDATE]: ({ dataLayer }) =>
+  //     setState((state) => ({ ...state, dataLayer })),
+  // });
+
+  useChannel({
+    [EVENTS.ADD_EVENT]: ({ event }) =>
+      setState((state) => ({ ...state, dataLayer: [event, ...state.dataLayer] })),
+  });
+
+  const handleClear = () => {
+    setState((state) => ({ ...state, dataLayer: [] }));
+  }
+
+  const handleChange= (e) => {
+    const {target: {value = ""}} = e;
+    setState((state) => ({ ...state, filter: value }));
+  }
+
+  const filteredData = dataLayer.filter(({event}) => {
+    /**
+     * A lot of events are logged with prefix "gtm." and creates a lot of noise,
+     * most of the time we just want to see the events we are triggering.
+     * Leaving the option to not filter out gtm events.
+     */
+    if (filter.slice(0,1) === "") {
+      return true;
+    } else if (filter.slice(0,1) === "!" && filter.slice(1).length > 0) {
+      return event.indexOf(filter.slice(1)) === -1;
+    } else if (filter.length > 0) {
+      return event.indexOf(filter) > -1;
+    }
+  });
+
+  return (
+    <AddonPanel {...props}>
+      <Form.Field label="Event filter">
+        <Form.Input id="filter" placeholder="filter" value={filter} onChange={handleChange}/>
+      </Form.Field>
+      <Button
+        small
+        primary
+        onClick={()=>handleClear()}
+        style={{
+          margin: "8px",
+          position: "sticky",
+          top: "8px",
+          left: "100%",
+          zIndex: 2,
+      }}
+      >
+        Clear
+      </Button>
+      <SourceWrapper code={`${JSON.stringify(filteredData, " ", 2)}`} language='json' format={true} />
+    </AddonPanel>
+  );
+};

.storybook-configv8/dataLayerListener/constants.js

@@ -0,0 +1,9 @@
+export const ADDON_ID = "dataLayer";
+export const PANEL_ID = `${ADDON_ID}/panel`;
+export const PARAM_KEY = `dataLayer`;
+export const EVENTS = {
+  ADD_EVENT:  `${ADDON_ID}/add`,
+  CODE_UPDATE: `${ADDON_ID}/update`,
+  CLEAR: `${ADDON_ID}/clear`,
+  LISTEN: `${ADDON_ID}/listen`,
+};

.storybook-configv8/dataLayerListener/index.js

@@ -0,0 +1,8 @@
+module.exports = {
+  previewAnnotations: function previewAnnotations(entry = []) {
+    return [...entry, require.resolve('./preset/preview.js')];
+  },
+  managerEntries: function managerEntries(entry = []) {
+    return [...entry, require.resolve('./preset/manager.js')];
+  }
+};

.storybook-configv8/dataLayerListener/preset/manager.js

@@ -0,0 +1,19 @@
+
+import { addons, types, useAddonState } from "@storybook/manager-api";
+import { ADDON_ID, PANEL_ID } from "../constants";
+import { Panel } from "../Panel";
+
+addons.register(ADDON_ID, () => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: function title(){
+      const [{ dataLayer }] = useAddonState(ADDON_ID, {
+        dataLayer: [],
+        filter: "!gtm.",
+      });
+      return `Data Layer${dataLayer.length ? ` (${dataLayer.length})`: ``}`;
+    },
+    match: ({ viewMode }) => viewMode === "story",
+    render: Panel,
+  });
+});

.storybook-configv8/dataLayerListener/preset/preview.js

@@ -0,0 +1,3 @@
+import { withDataLayerListener } from "../withDataLayerListener";
+export const decorators = [withDataLayerListener];
+

.storybook-configv8/dataLayerListener/withDataLayerListener.js

@@ -0,0 +1,48 @@
+import { makeDecorator, useChannel, useEffect } from "@storybook/preview-api";
+import { EVENTS, PARAM_KEY } from "./constants";
+
+export const withDataLayerListener = makeDecorator({
+  name: "withDataLayerListener",
+  parameterName: PARAM_KEY,
+  skipIfNoParametersOrOptions: false,
+  wrapper: (storyFn, context ) => {
+    const emit = useChannel({});
+
+    function removeDOMObjects(eventObject){
+      return Object.entries(eventObject).reduce((acc, [k, v])=>{
+        acc[k] = (typeof v === "object" && v.tagName) ? v.tagName : v;
+        return acc
+    },{})
+    }
+
+    function newPush() {
+      for (var i = 0, n = this.length, l = arguments.length; i < l; i++, n++) {
+        this[n] = arguments[i];
+        emit(EVENTS.ADD_EVENT, {
+          event: removeDOMObjects(arguments[i]),
+        });
+      }
+      return n;
+    }
+
+    const listenToDataLayer = () => {
+      window.dataLayer = window.dataLayer || [];
+      Object.defineProperty(window.dataLayer, "push", {
+        value: newPush,
+        writable: true,
+        enumerable: true,
+        configurable: true,
+      });
+    }
+
+    useEffect(()=>{
+      setTimeout(listenToDataLayer, 1000);
+    }, [])
+
+    return storyFn(context);
+  },
+});
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}

.storybook-configv8/helpers/styleInjection.js

@@ -0,0 +1,26 @@
+
+export const clearStyles = (selector) => {
+  const selectors = Array.isArray(selector) ? selector : [selector];
+  selectors.forEach(clearStyle);
+};
+
+const clearStyle = (selector) => {
+  const element = document.getElementById(selector);
+  if (element) {
+    element.parentElement.removeChild(element);
+  }
+};
+
+export const addStyle = (selector, css) => {
+  const existingStyle = document.getElementById(selector);
+  if (existingStyle) {
+    if (existingStyle.innerHTML !== css) {
+      existingStyle.innerHTML = css;
+    }
+  } else {
+    const style = document.createElement('style');
+    style.setAttribute('id', selector);
+    style.innerHTML = css;
+    document.head.appendChild(style);
+  }
+};