Update storybook

UW-Macrostrat · Nov 5, 2024 · db39a84 · db39a84
1 parent 4523a94
commit db39a84
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 52 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -41,6 +41,7 @@ export const parameters = {
 export const decorators = [
   (renderStory) => {
     const isEnabled = useDarkMode();
+    console.log("Dark mode is enabled", isEnabled);
     return h(DarkModeProvider, { isEnabled }, renderStory());
   },
 ];

diff --git a/packages/map-interface/stories/dev-map-page.stories.ts b/packages/map-interface/stories/dev-map-page.stories.ts
@@ -1,12 +1,13 @@
-import h from "@macrostrat/hyper";
 import type { Meta } from "@storybook/react";
 import type { StoryObj } from "@storybook/react";
 import { buildMacrostratStyle } from "../../mapbox-styles/src";
-import * as mapboxgl from "mapbox-gl";
+import { DevMapPage as _DevMapPage } from "../src";
 
-import { DevMapPage } from "../src";
+const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
 
-mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
+function DevMapPage(props) {
+  return _DevMapPage({ ...props, mapboxToken });
+}
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<typeof DevMapPage> = {

diff --git a/packages/map-interface/stories/map-easing.stories.ts b/packages/map-interface/stories/map-easing.stories.ts
@@ -10,7 +10,6 @@ import {
   useBasicStylePair,
 } from "../src";
 
-import mapboxgl from "mapbox-gl";
 import { useEffect, useState } from "react";
 import {
   useMapRef,
@@ -19,7 +18,7 @@ import {
   useMapStatus,
 } from "@macrostrat/mapbox-react";
 
-mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
+const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
 
 type Location = { name: string } & MapEaseToState;
 
@@ -44,52 +43,6 @@ const locations: Location[] = [
   },
 ];
 
-function MapEaseContainer({
-  children,
-  locationName,
-  nextLocation,
-  description,
-}) {
-  /* We apply a custom style to the panel container when we are interacting
-    with the search bar, so that we can block map interactions until search
-    bar focus is lost.
-    We also apply a custom style when the infodrawer is open so we can hide
-    the search bar on mobile platforms
-  */
-  const style = useBasicStylePair();
-
-  return h(
-    MapAreaContainer,
-    {
-      navbar: h(FloatingNavbar, {
-        rightElement: h(MapLoadingButton, {
-          large: true,
-          style: {
-            marginRight: "-5px",
-          },
-        }),
-        title: "Map easing",
-      }),
-      contextPanel: h(Card, [
-        description,
-        h("p", ["Viewing ", h("strong", locationName)]),
-        h("button", { onClick: nextLocation }, ["Next location"]),
-      ]),
-    },
-    [
-      h(
-        MapView,
-        {
-          style,
-          projection: { name: "globe" },
-          mapPosition: null,
-        },
-        children
-      ),
-    ]
-  );
-}
-
 function MapEaseWrapper({
   children,
   locationName,
@@ -136,6 +89,7 @@ function MapEaseWrapper({
           style,
           projection: { name: "globe" },
           mapPosition,
+          mapboxToken,
         },
         children
       ),