Merge branch 'update-storybook'

* update-storybook:
  Updated dev map pages
  Fixed storybook styling
  Switched to a simpler storybook layout
  Updated storybook

.storybook/docs-container.ts

@@ -0,0 +1,52 @@
+import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
+import { themes } from "@storybook/theming";
+import h from "@macrostrat/hyper";
+import { useEffect, useState } from "react";
+
+export const DocsContainer = ({ children, context }) => {
+  // Check for body class changes
+  const [dark, setDark] = useState(
+    document.body.classList.contains("bp5-dark")
+  );
+
+  console.log(context);
+
+  useEffect(() => {
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === "class") {
+          const dark = document.body.classList.contains("bp5-dark");
+          setDark(dark);
+        }
+      });
+    });
+    observer.observe(document.body, { attributes: true });
+    return () => observer.disconnect();
+  }, []);
+
+  const theme = dark ? themes.dark : themes.light;
+
+  let ctx1 = context;
+  ctx1.storyById = (id) => {
+    const storyContext = context.storyById(id);
+    return {
+      ...storyContext,
+      parameters: {
+        ...(storyContext?.parameters ?? {}),
+        docs: {
+          ...(storyContext?.parameters?.docs ?? {}),
+          theme,
+        },
+      },
+    };
+  };
+
+  return h(
+    BaseContainer,
+    {
+      theme,
+      context: ctx1,
+    },
+    children
+  );
+};

.storybook/main.ts

@@ -0,0 +1,29 @@
+import { dirname, join } from "path";
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  // vite
+  stories: ["../packages/**/*.stories.@(mdx|js|jsx|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-viewport"),
+    getAbsolutePath("storybook-dark-mode"),
+  ],
+  core: {
+    builder: {
+      name: getAbsolutePath("@storybook/builder-vite"),
+      options: {
+        viteConfigPath: require.resolve("../vite.config.ts"),
+      },
+    },
+  },
+  framework: getAbsolutePath("@storybook/react-vite"),
+  docs: {},
+};
+
+export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}

.storybook/manager-head.html

@@ -0,0 +1 @@
+<meta name="darkreader-lock" />

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<meta name="darkreader-lock" />
+<!--<style>-->
+<!--  .sbdocs.sbdocs-wrapper {-->
+<!--    background-color: var(&#45;&#45;background-color) !important;-->
+<!--  }-->
+<!--</style>-->

storybook/preview.ts → .storybook/preview.ts

@@ -7,6 +7,7 @@ import h from "@macrostrat/hyper";
 import "@macrostrat/style-system";
 import { DarkModeProvider } from "@macrostrat/ui-components";
 import { useDarkMode } from "storybook-dark-mode";
+import { DocsContainer } from "./docs-container";
 
 FocusStyleManager.onlyShowFocusOnTabs();
 
@@ -19,7 +20,7 @@ export const parameters = {
     },
   },
   docs: {
-    theme: macrostratTheme,
+    container: DocsContainer,
   },
   backgrounds: {
     disable: true,

package.json

@@ -4,8 +4,8 @@
   "private": true,
   "repository": "https://github.com/UW-Macrostrat/web-components.git",
   "scripts": {
-    "dev": "yarn workspace @macrostrat/storybook run dev",
-    "build": "yarn workspace @macrostrat/storybook run build",
+    "dev": "storybook dev -p 6006 --no-open",
+    "build": "storybook build --debug",
     "status": "tsx scripts/status.ts",
     "prepare": "tsx scripts/prepare.ts",
     "publish": "tsx scripts/publish.ts"
@@ -22,12 +22,27 @@
     "@macrostrat/column-components": "./packages/column-components/src"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.10",
+    "@babel/core": "^7.18.6",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-typescript": "^7.21.4",
+    "@blueprintjs/core": "^5.10.2",
     "@parcel/packager-ts": "2.12.0",
     "@parcel/transformer-sass": "2.12.0",
     "@parcel/transformer-typescript-types": "2.12.0",
+    "@storybook/addon-actions": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-viewport": "^8.3.6",
+    "@storybook/builder-vite": "^8.3.6",
+    "@storybook/components": "^8.3.6",
+    "@storybook/manager-api": "^8.3.6",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/preview-api": "^8.3.6",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-vite": "^8.3.6",
+    "@storybook/theming": "^8.3.6",
+    "@types/d3-geo": "^2.0.0",
+    "@types/geojson": "^7946.0.7",
     "axios": "^0.27.2",
     "chalk": "^5.0.1",
     "concurrently": "^7.2.2",
@@ -39,9 +54,15 @@
     "marked-terminal": "^7.1.0",
     "node-fetch": "^3.2.9",
     "prettier": "^2.7.1",
+    "react": "^18",
+    "react-dom": "^18",
     "sass-embedded": "^1.79.4",
+    "storybook": "^8.3.6",
+    "storybook-dark-mode": "^4.0.2",
     "tsx": "^4.19.1",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.2",
+    "underscore": "^1.12.0",
+    "use-async-effect": "^2.2.1"
   },
   "publishedPackages": [
     "ui-components",
@@ -53,7 +74,6 @@
   ],
   "workspaces": [
     "packages/*",
-    "storybook",
     "toolchain/*"
   ],
   "packageManager": "[email protected]",

packages/map-interface/src/dev/map-page.ts

@@ -19,20 +19,9 @@ import {
 } from "./vector-tile-features";
 import { MapPosition } from "@macrostrat/mapbox-utils";
 
-export enum MacrostratVectorTileset {
-  Carto = "carto",
-  CartoSlim = "carto-slim",
-  IGCPOrogens = "igcp-orogens",
-}
-
-export enum MacrostratRasterTileset {
-  Carto = "carto",
-  Emphasized = "emphasized",
-}
-
 export const h = hyper.styled(styles);
 
-export function DevMapPage({
+export function MapInspector({
   title = "Map inspector",
   headerElement = null,
   transformRequest = null,
@@ -43,6 +32,7 @@ export function DevMapPage({
   style,
   focusedSource = null,
   focusedSourceTitle = null,
+  fitViewport = true,
   projection = null,
 }: {
   headerElement?: React.ReactElement;
@@ -56,6 +46,7 @@ export function DevMapPage({
   focusedSourceTitle?: string;
   projection?: string;
   mapPosition?: MapPosition;
+  fitViewport?: boolean;
 }) {
   /* 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
@@ -154,6 +145,7 @@ export function DevMapPage({
       ]),
       detailPanel: detailElement,
       contextPanelOpen: isOpen,
+      fitViewport,
     },
     h(
       MapView,
@@ -178,3 +170,6 @@ export function DevMapPage({
     )
   );
 }
+
+// Legacy export
+export const DevMapPage = MapInspector;

packages/map-interface/stories/coordinates.stories.ts

@@ -37,3 +37,13 @@ export const Primary: Story = {
     },
   },
 };
+
+export const LowZoom: Story = {
+  args: {
+    position: {
+      lat: 40.7128,
+      lng: -74.006,
+    },
+    zoom: 2,
+  },
+};

packages/map-interface/stories/dev-map-page.stories.ts

@@ -1,27 +1,55 @@
 import h from "@macrostrat/hyper";
 import type { Meta } from "@storybook/react";
-import "mapbox-gl/dist/mapbox-gl.css";
+import type { StoryObj } from "@storybook/react";
 
 import { DevMapPage } from "../src";
 import Box from "ui-box";
 
+const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
+
+function WrappedComponent(props) {
+  return h(DevMapPage, { ...props, mapboxToken });
+}
+
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta: Meta<typeof DevMapPage> = {
-  title: "Map interface/Dev map page",
-  component: DevMapPage,
+  title: "Map interface/Development map page",
+  component: WrappedComponent,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
+    },
+  },
 };
 
 export default meta;
 
-const mapboxToken = import.meta.env.STORYBOOK_MAPBOX_API_TOKEN;
-
-export function DevMapPageTest() {
-  return h(
-    Box,
-    { className: "container", position: "relative", height: 500 },
-    h(DevMapPage, {
-      mapboxToken,
-      fitViewport: false,
-    })
-  );
-}
+type Story = StoryObj<typeof DevMapPage>;
+
+export const Primary: Story = {
+  args: {
+    mapPosition: {
+      camera: {
+        lat: 0,
+        lng: 0,
+        altitude: 50000000,
+      },
+    },
+  },
+};
+
+export const ZoomedIn: Story = {
+  args: {
+    mapPosition: {
+      camera: {
+        lat: 40.7128,
+        lng: -74.006,
+        altitude: 300000,
+      },
+    },
+  },
+};

tsconfig.json

@@ -13,7 +13,7 @@
     }
   },
   "include": [
-    "./storybook/*.ts",
-    "./packages/**/src/*.ts",
+    "./_old/*.ts",
+    "./packages/**/src/*.ts"
   ]
 }