chore(unity-react-core): storybook docs should only render react example

Author: scott-williams-az

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

@@ -18,14 +18,14 @@ declare interface ContainerProps {
 
 const Full:ContainerComponent<ContainerProps, any> = forwardRef((props, ref) => {
   return (
-  <div ref={ref} id="html-root" className="col uds-full-width" {...props}/>
+  <div ref={ref} className="col uds-full-width" {...props}/>
 )});
 
 const UdsContainer:ContainerComponent<ContainerProps, any> = forwardRef((props, ref) => {
   return (
   <div className="container">
     <div className="row">
-      <div ref={ref} id="html-root" className="uds-container" {...props}/>
+      <div ref={ref} className="uds-container" {...props}/>
     </div>
   </div>
 )});
@@ -34,21 +34,22 @@ export const withContainer: Decorator = (
   StoryFn,
   {
     args,
-    globals: { framework = "react" },
+    globals,
     parameters: { layout = "fullscreen" },
+    viewMode,
   }
 ) => {
+  let { framework = "react" } = globals;
+  // Doc page will only render react framework
+  if(viewMode === "docs") {
+    framework = "react";
+  }
   const isBootstrap = framework === "bootstrap";
-  const isReact = !isBootstrap;
   const root = React.useRef(null as any);
 
   const emit = useChannel({ "HTML/CodeUpdated": () => {} });
 
-
-
   const mount = () => {
-    // console.log("sb mounting");
-
     if (root.current) {
       if (isBootstrap) {
         // custom events created by eventSpy.js to allow storybook to dispatch load events after the page is loaded
@@ -58,7 +59,6 @@ export const withContainer: Decorator = (
 
       emit("HTML/CodeUpdated", { code: root.current.innerHTML });
     }
-
   }
 
   const unmount = () => {
@@ -77,19 +77,10 @@ export const withContainer: Decorator = (
     }
   }
 
-
-
-
-
-
-
-
   useEffect(() => {
     // @ts-ignore
     if (!window.unloading) {
       mount()
-    } else {
-
     }
     return unmount
   }, [StoryFn, args, framework]);
@@ -116,5 +107,3 @@ export const withContainer: Decorator = (
 export const globalDecorators = [
   withContainer
 ];
-
-

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

@@ -7,9 +7,6 @@ import "@asu/unity-bootstrap-theme/src/js/unity-bootstrap-theme.js";
 import { globalDecorators } from "./decorators.tsx";
 import { Container } from "./docPage.tsx";
 
-
-const sourceCodeRootSelector = "#html-root";
-
 const parameters = {
   controls: { expanded: true },
   argTypes: {
@@ -29,13 +26,6 @@ const parameters = {
       },
     ],
   },
-  html: {
-    prettier: {
-      tabWidth: 4,
-      htmlWhitespaceSensitivity: "ignore",
-    },
-    root: sourceCodeRootSelector,
-  },
   docs: {
     // Table of contents stopped working, so I disabled it.
     // If we can figure out how to get it working again, we can re-enable it.