Merge pull request #20 from mapcomponents/feature/one-DemoButton-per-…

…component fixed multiple appearances of demo buttons
mapcomponents · Dec 1, 2023 · 1714aa4 · 1714aa4
2 parents d7e5c50 + 0649c1c
commit 1714aa4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 47 deletions.
diff --git a/src/components/DemoContextProvider.js b/src/components/DemoContextProvider.js
@@ -2,19 +2,6 @@ import React, { useMemo, useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import { DemoContextProviderCore } from "./DemoContext";
 
-//function camelCaseToDash(str) {
-//  if (typeof str === "string") {
-//    return str.replace(/([a-zA-Z])(?=[A-Z])/g, "$1-").toLowerCase();
-//  }
-//  return "";
-//}
-
-//function storiesJsonElToComponentId(el) {
-//  return camelCaseToDash(el.kind + el.name)
-//    .replace("/", "-")
-//    .replaceAll(" ", "-");
-//}
-
 let storybookUrls = [
   "https://mapcomponents.github.io/react-map-components-maplibre", // MapLibre
   "https://mapcomponents.github.io/react-map-components-maplibre-lab", // MapLibre-Lab
@@ -27,14 +14,6 @@ let demoProviderUrls = [
   "https://mapcomponents.github.io/european_wolves_app/mc_meta.json",
 ];
 
-/**
-if (window.location.host.indexOf("mapcomponents.org") === -1) {
-  storybookUrls = [
-    "http://" + window.location.hostname + ":6006", // MapLibre
-  ];
-}
- */
-
 const DemoContextProvider = ({ children }) => {
   const [menuDrawerOpen, setMenuDrawerOpen] = useState(false);
 
@@ -65,25 +44,44 @@ const DemoContextProvider = ({ children }) => {
   /**
    * 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];
+      console.log(_storyData);
       let _compName = _storyData.kind.split("/");
       if (typeof _compName[1] !== "undefined" && _compName[1] === compId) {
-        componentData.stories.push(_storyData);
-        componentData.url = url;
-        componentData.demos ||= [];
-        componentData.demos.push({
-          name: _storyData.name === "Example Config" ? "demo" : _storyData.name,
-          url: url + "/iframe.html?id=" + _storyData.id + "&viewMode=story",
-          id: _storyData.id,
-        });
-        componentData.thumbnail = url + "/thumbnails/" + _compName[1] + ".png";
+        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;

diff --git a/src/components/StoryDetailView.js b/src/components/StoryDetailView.js
@@ -105,6 +105,8 @@ function StoryDetailView(props) {
     fetchDescription();
   }, [fetchDescription]);
 
+  console.log(componentData.demos);
+
   return (
     <>
       <Grid container>
@@ -170,11 +172,7 @@ function StoryDetailView(props) {
         >
           <Grid container spacing={0}>
             <Grid item xs={12} key="demo_link">
-              <h3>Demos</h3>
-              <Divider
-                variant="fullWidth"
-                sx={{ bgcolor: theme.palette.secondary.main }}
-              ></Divider>
+              <h3> </h3>
 
               <Grid container spacing={2} style={{ marginTop: "0px" }}>
                 {componentData &&
@@ -184,7 +182,7 @@ function StoryDetailView(props) {
                       item
                       xs={6}
                       style={{ marginTop: "16px", paddingTop: "0px" }}
-                      key={demo.id ? demo.id : demo.name}
+                      key={demo.name}
                     >
                       <Button
                         style={{
@@ -196,17 +194,9 @@ function StoryDetailView(props) {
                           color: theme.palette.common.white,
                           borderRadius: "8px",
                         }}
-                        target="blank"
-                        component={Link}
+                        target="_blank"
                         variant="contained"
-                        to={
-                          "/" +
-                          i18n.resolvedLanguage +
-                          "/demo/" +
-                          componentData.name +
-                          "/" +
-                          (demo.id ? demo.id : demo.name)
-                        }
+                        href={demo.url}
                         key={demo.name}
                       >
                         <span
@@ -256,4 +246,4 @@ function StoryDetailView(props) {
   );
 }
 
-export default StoryDetailView;
+export default StoryDetailView;