Upgrade Storybook

apps/storybook/package.json

@@ -28,13 +28,13 @@
     "three": "0.167.1"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "8.0.10",
-    "@storybook/addon-essentials": "8.0.10",
-    "@storybook/addon-links": "8.0.10",
-    "@storybook/addon-mdx-gfm": "8.0.10",
-    "@storybook/blocks": "8.0.10",
-    "@storybook/react": "8.0.10",
-    "@storybook/react-vite": "8.0.10",
+    "@storybook/addon-docs": "8.3.5",
+    "@storybook/addon-essentials": "8.3.5",
+    "@storybook/addon-links": "8.3.5",
+    "@storybook/addon-mdx-gfm": "8.3.5",
+    "@storybook/blocks": "8.3.5",
+    "@storybook/react": "8.3.5",
+    "@storybook/react-vite": "8.3.5",
     "@types/d3-array": "~3.2.1",
     "@types/d3-format": "~3.0.4",
     "@types/ndarray": "1.0.14",
@@ -45,7 +45,7 @@
     "eslint": "8.57.0",
     "eslint-config-galex": "4.5.2",
     "remark-gfm": "4.0.0",
-    "storybook": "8.0.10",
+    "storybook": "8.3.5",
     "typescript": "5.4.5",
     "vite": "5.3.5"
   },

apps/storybook/src/Stacking.mdx

@@ -10,6 +10,7 @@ import {
   ResetZoomButton,
 } from '@h5web/lib';
 import { Vector3 } from 'three';
+import { Default as StackingStory } from './Stacking.stories';
 
 ## Stacking
 
@@ -51,38 +52,7 @@ The stacking order is organised into six layers, from furthest (behind) to close
 The example below demonstrates the default stacking order. You can hover to test the stacking of the tooltip and crosshairs,
 and zoom in to test the stacking of the reset-zoom button in the floating toolbar.
 
-{/* https://github.com/storybookjs/storybook/issues/19964 */}
-{/* <Canvas> */}
-
-<div style={{ display: 'flex', height: '25em' }}>
-  <VisCanvas
-    abscissaConfig={{ visDomain: [0, 41], showGrid: true }}
-    ordinateConfig={{ visDomain: [0, 20], showGrid: true }}
-  >
-    <DefaultInteractions />
-    <ResetZoomButton />
-    <DataToHtml points={[new Vector3(30, 10), new Vector3(34, 10)]}>
-      {(pt1, pt2) => (
-        <SvgElement>
-          <SvgCircle coords={[pt1, pt2]} fill="lightblue" />
-        </SvgElement>
-      )}
-    </DataToHtml>
-    <Annotation
-      x={30}
-      y={10}
-      style={{
-        backgroundColor: 'lightgreen',
-        padding: '1rem',
-        whiteSpace: 'nowrap',
-      }}
-    >
-      <p style={{ margin: 0 }}>HTML annotation</p>
-    </Annotation>
-    <TooltipMesh guides="both" renderTooltip={(x, y) => 'Tooltip'} />
-  </VisCanvas>
-</div>
-{/* </Canvas> */}
+<Canvas of={StackingStory} />
 
 As a consumer of the library, you have control over the stacking of the SVG and HTML elements that you render (i.e. layers 3 and 4).
 Within each of these two layers, all you need to do to move element `A` behind, or in front of, element `B` is to **render `A`

apps/storybook/src/Stacking.stories.tsx

@@ -0,0 +1,53 @@
+import {
+  Annotation,
+  DataToHtml,
+  DefaultInteractions,
+  ResetZoomButton,
+  SvgCircle,
+  SvgElement,
+  TooltipMesh,
+  VisCanvas,
+} from '@h5web/lib';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Vector3 } from 'three';
+
+import FillHeight from './decorators/FillHeight';
+
+const meta = {
+  decorators: [FillHeight],
+  tags: ['autodocs', '!dev'], // use in `Stacking` doc page and hide from sidebar
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {
+  render: () => (
+    <VisCanvas
+      abscissaConfig={{ visDomain: [0, 41], showGrid: true }}
+      ordinateConfig={{ visDomain: [0, 20], showGrid: true }}
+    >
+      <DefaultInteractions />
+      <ResetZoomButton />
+      <DataToHtml points={[new Vector3(20, 10), new Vector3(24, 10)]}>
+        {(pt1, pt2) => (
+          <SvgElement>
+            <SvgCircle coords={[pt1, pt2]} fill="lightblue" />
+          </SvgElement>
+        )}
+      </DataToHtml>
+      <Annotation
+        x={20}
+        y={10}
+        style={{
+          backgroundColor: 'lightgreen',
+          padding: '1rem',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        <p style={{ margin: 0 }}>HTML annotation</p>
+      </Annotation>
+      <TooltipMesh guides="both" renderTooltip={() => <>Tooltip</>} />
+    </VisCanvas>
+  ),
+} satisfies Story;