reset DemoContextProvider.js

Author: jannik brack

src/components/DemoContextProvider.js

@@ -42,6 +42,51 @@ const DemoContextProvider = ({ children }) => {
     return null;
   };
 
+  /**
+   * enrich storybook mc_meta.json data with thumbnail URL and demo URLs from stories.json
+   */
+
+  const applyStorybookDataToMcMeta = ({
+                                        componentData,
+                                        storybookData,
+                                        compId,
+                                        url,
+                                      }) => {
+    let catalogueDemoExists = false;
+    for (var storyId in storybookData.stories) {
+      let _compName = storybookData.stories[storyId].kind.split("/");
+      if (
+        typeof _compName[1] !== "undefined" &&
+        _compName[1] === compId &&
+        storybookData.stories[storyId].name === "Catalogue Demo"
+      ) {
+        catalogueDemoExists = true;
+      }
+    }
+
+    for (storyId in storybookData.stories) {
+      let _storyData = storybookData.stories[storyId];
+      let _compName = _storyData.kind.split("/");
+      if (typeof _compName[1] !== "undefined" && _compName[1] === compId) {
+        if (
+          _storyData.name === "Catalogue Demo" ||
+          (!catalogueDemoExists && _storyData.name === "Example Config")
+        ) {
+          componentData.url = url;
+          componentData.demos = [];
+          componentData.demos.push({
+            name: "demo",
+            url: url + "/iframe.html?id=" + _storyData.id + "&viewMode=story",
+            id: _storyData.id,
+          });
+          componentData.thumbnail =
+            url + "/thumbnails/" + _compName[1] + ".png";
+        }
+      }
+    }
+    return componentData;
+  };
+
   useEffect(() => {
     localStorage.setItem("cart", JSON.stringify(cartItems));
   }, [cartItems]);
@@ -78,6 +123,31 @@ const DemoContextProvider = ({ children }) => {
             }))(mcMetaUrls[r])
       );
     }
+    for (r = 0, len = storybookUrls.length; r < len; r++) {
+      promises.push(
+        ((url) =>
+          fetch(url + "/stories.json")
+            .then((res) => {
+              if (!res.ok) {
+                throw Error(res.statusText);
+              }
+              return res.json();
+            })
+            .then((data) => {
+              let tmpData = {};
+              tmpData[url] = data;
+
+              storybookDataRef.current = {
+                ...storybookDataRef.current,
+                ...tmpData,
+              };
+            })
+            .catch((msg) => {
+              console.log("error");
+              console.log(msg);
+            }))(storybookUrls[r])
+      );
+    }
 
     Promise.all(promises).then(() => {
       let componentData = {};
@@ -87,6 +157,15 @@ const DemoContextProvider = ({ children }) => {
         for (var compId in _compObj) {
           let _compData = _compObj[compId];
           _compData.stories = [];
+
+          if (typeof storybookDataRef.current[url] !== "undefined") {
+            _compData = applyStorybookDataToMcMeta({
+              componentData: _compData,
+              storybookData: storybookDataRef.current[url],
+              compId,
+              url,
+            });
+          }
           componentDataRef.current[url][compId] = _compData;
           componentData[compId] = _compData;
         }
@@ -132,4 +211,4 @@ DemoContextProvider.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-export default DemoContextProvider;
+export default DemoContextProvider;