Merge pull request #1714 from silx-kit/up-storybook

Upgrade Storybook
silx-kit · Oct 7, 2024 · 334013e · 334013e
2 parents a25cbd6 + b9f1792
commit 334013e
Show file tree

Hide file tree

Showing 4 changed files with 1,010 additions and 4,135 deletions.
diff --git a/apps/storybook/package.json b/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"
   },

diff --git a/apps/storybook/src/Stacking.mdx b/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`

diff --git a/apps/storybook/src/Stacking.stories.tsx b/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;