From ff7706d5fb724bfb94fedd8dd2a4f108fa16e33c Mon Sep 17 00:00:00 2001
From: Nikki Sharpley <nsharpley@mozilla.com>
Date: Thu, 3 Aug 2023 12:51:08 -0400
Subject: [PATCH] preview storybook components

---
 admin/package.json                            |  1 +
 .../ThemeBuilder/ThemeBuilder.tsx             | 32 +++++++++++++++++--
 admin/webpack.config.js                       | 30 +++++++++++++++++
 3 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/admin/package.json b/admin/package.json
index b29708e0af..b29b68435c 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -42,6 +42,7 @@
     "@babel/preset-env": "^7.18.9",
     "@babel/preset-react": "^7.18.6",
     "@babel/register": "^7.18.9",
+    "@svgr/webpack": "^6.3.1",
     "babel-loader": "^8.2.5",
     "babel-plugin-react-intl": "^3.0.1",
     "babel-plugin-transform-react-jsx-img-import": "^0.1.4",
diff --git a/admin/src/react-components/ThemeBuilder/ThemeBuilder.tsx b/admin/src/react-components/ThemeBuilder/ThemeBuilder.tsx
index c98498af2f..1b3946c229 100644
--- a/admin/src/react-components/ThemeBuilder/ThemeBuilder.tsx
+++ b/admin/src/react-components/ThemeBuilder/ThemeBuilder.tsx
@@ -1,10 +1,12 @@
-import React, { useMemo, useRef, useState} from 'react';
+import React, { useEffect, useMemo, useRef, useState} from 'react';
 // import theme from "../../utils/sample-theme";
 import {Button, Input, Notification, NotificationInterfaceT, Select} from '@mozilla/lilypad-ui'
 import { NewNotificationT } from '@mozilla/lilypad-ui';
 import { CategoryE } from '@mozilla/lilypad-ui';
 import { NotificationTypesE } from '@mozilla/lilypad-ui';
 import { NotificationLocationE } from '@mozilla/lilypad-ui';
+import {Base} from 'hubs/src/react-components/modal/Modal.stories'
+import {RoomToolbar} from 'hubs/src/react-components/input/ToolbarButton.stories'
 
 const success: NewNotificationT = {
     title: "",
@@ -19,7 +21,6 @@ const error: NewNotificationT = {...success, type: NotificationTypesE.ERROR, des
 const ThemeBuilder = ({config, onGlobalChange, onSave, path, setState, disableSave}) => {
     const [themes, setThemes] =useState(JSON.parse(config?.hubs?.theme?.themes))
     const [selectedTheme, setSelectedTheme] = useState(themes.find(theme => !!theme?.default))
-    const [showCrumb, setShowCrumb] = useState(false);
     const formattedThemes = useMemo(() => themes.map(theme => ({title: theme.name, value: theme.id})), [themes, config]);
     const notificationRef = useRef<NotificationInterfaceT>();
 
@@ -91,15 +92,38 @@ const ThemeBuilder = ({config, onGlobalChange, onSave, path, setState, disableSa
         setSelectedTheme(newTheme)
     }
 
+    useEffect(() => {
+        const variables = [];
+        console.log(selectedTheme)
+        for (const key in selectedTheme.variables) {
+          if (!Object.prototype.hasOwnProperty.call(selectedTheme.variables, key)) continue;
+          variables.push(`--${key}: ${selectedTheme.variables[key]};`);
+        }
+    
+        const styleTag = document.createElement("style");
+    
+        styleTag.innerHTML = `:root {
+            ${variables.join("\n")}
+          }`;
+    
+        document.head.appendChild(styleTag);
+    
+        return () => {
+          document.head.removeChild(styleTag);
+        };
+      }, [selectedTheme]);
+
     // edit name and validate no duplicates
     // add new theme
     // duplicate theme
     // generate id from theme name?
     // copy json
+    // delete theme
+    // preview components
+
     // import theme from json - validate and populate missing variables
     // import theme from web url?? - validate and populate missing variables
     // select from github themes
-    // delete theme
     // populate with defaults
     // calculate darkness or lightness from states
 
@@ -118,6 +142,8 @@ const ThemeBuilder = ({config, onGlobalChange, onSave, path, setState, disableSa
                 <Button type="submit" text="Submit" label="Submit" disabled={disableSave}/>
             </form>
             <Notification ref={notificationRef} />
+            <RoomToolbar />
+            <Base />
         </div>
     )
 }
diff --git a/admin/webpack.config.js b/admin/webpack.config.js
index 637572b7e8..8d1c2c132e 100644
--- a/admin/webpack.config.js
+++ b/admin/webpack.config.js
@@ -190,6 +190,36 @@ module.exports = (env, argv) => {
             return /node_modules/.test(modulePath) && !/node_modules\/hubs/.test(modulePath);
           }
         },
+        {
+          test: /\.svg$/,
+          include: [path.resolve(__dirname, "node_modules", "hubs", "src", "react-components")],
+          use: [
+            {
+              loader: "@svgr/webpack",
+              options: {
+                titleProp: true,
+                replaceAttrValues: { "#000": "currentColor" },
+                exportType: "named",
+                svgo: true,
+                svgoConfig: {
+                  plugins: [
+                    {
+                      name: "preset-default",
+                      params: {
+                        overrides: {
+                          removeViewBox: false,
+                          mergePaths: false,
+                          convertShapeToPath: false,
+                          removeHiddenElems: false
+                        }
+                      }
+                    }
+                  ]
+                }
+              }
+            }
+          ]
+        },
         // TODO worker-loader has been deprecated, but we need "inline" support which is not available yet
         // ideally instead of inlining workers we should serve them off the root domain instead of CDN.
         {