@macrostrat/map-interface 0.0.1

package/stories/coordinates.stories.ts

@@ -0,0 +1,39 @@
+import h from "@macrostrat/hyper";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { LngLatCoords, LngLatProps } from "../src/location-info";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<LngLatProps> = {
+  title: "Map interface/Utilities/LngLatCoords",
+  component: LngLatCoords,
+};
+
+export default meta;
+
+type Story = StoryObj<LngLatProps>;
+
+export const Primary: Story = {
+  args: {
+    position: {
+      lat: 40.7128,
+      lng: -74.006,
+    },
+    zoom: 10,
+    precision: null,
+  },
+  argTypes: {
+    zoom: {
+      type: {
+        name: "number",
+        required: false,
+      },
+    },
+    precision: {
+      type: {
+        name: "number",
+        required: false,
+      },
+    },
+  },
+};

package/stories/dev-map-page.stories.ts

@@ -0,0 +1,26 @@
+import h from "@macrostrat/hyper";
+import type { Meta } from "@storybook/react";
+
+import { DevMapPage } from "../src";
+import Box from "ui-box";
+
+// 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,
+};
+
+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,
+    })
+  );
+}

package/stories/map-interface.stories.ts

@@ -0,0 +1,27 @@
+import h from "@macrostrat/hyper";
+import type { Meta } from "@storybook/react";
+import Box from "ui-box";
+
+import { MapAreaContainer } from "../src";
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof MapAreaContainer> = {
+  title: "Map interface/Map area container",
+  component: MapAreaContainer,
+};
+
+export default meta;
+
+export const Container = {
+  render() {
+    return h(MapAreaContainer, {
+      navbar: h(Box, { backgroundColor: "blue", minHeight: 50 }),
+      contextPanel: h(Box, { backgroundColor: "dodgerblue", flex: 1 }),
+      mainPanel: h(Box, { backgroundColor: "red", flex: 1 }),
+      detailPanel: h(Box, {
+        backgroundColor: "magenta",
+        flex: 1,
+      }),
+    });
+  },
+};