Upgrade Storybook

silx-kit · Jul 25, 2023 · cd8d292 · cd8d292
1 parent 43e790d
commit cd8d292
Show file tree

Hide file tree

Showing 3 changed files with 1,306 additions and 1,896 deletions.
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -38,12 +38,12 @@
     "three": "0.141.0"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "7.0.5",
-    "@storybook/addon-essentials": "7.0.5",
-    "@storybook/addon-links": "7.0.5",
-    "@storybook/addon-mdx-gfm": "7.0.5",
-    "@storybook/react": "7.0.5",
-    "@storybook/react-vite": "7.0.5",
+    "@storybook/addon-docs": "7.1.1",
+    "@storybook/addon-essentials": "7.1.1",
+    "@storybook/addon-links": "7.1.1",
+    "@storybook/addon-mdx-gfm": "7.1.1",
+    "@storybook/react": "7.1.1",
+    "@storybook/react-vite": "7.1.1",
     "@types/d3-format": "~3.0.1",
     "@types/lodash": "~4.14.195",
     "@types/ndarray": "1.0.11",
@@ -54,7 +54,7 @@
     "eslint": "8.28.0",
     "eslint-config-galex": "4.5.2",
     "remark-gfm": "3.0.1",
-    "storybook": "7.0.5",
+    "storybook": "7.1.1",
     "typescript": "5.0.4",
     "vite": "4.3.9"
   },

diff --git a/apps/storybook/src/Annotation.stories.tsx b/apps/storybook/src/Annotation.stories.tsx
@@ -16,19 +16,26 @@ import { formatCoord } from './utils';
 const meta = {
   title: 'Building Blocks/Annotation',
   parameters: { layout: 'fullscreen' },
-  decorators: [FillHeight],
+  decorators: [
+    (Story) => (
+      <VisCanvas
+        abscissaConfig={{ visDomain: [0, 41], showGrid: true }}
+        ordinateConfig={{ visDomain: [0, 20], showGrid: true }}
+      >
+        <DefaultInteractions />
+        <Story />
+      </VisCanvas>
+    ),
+    FillHeight,
+  ],
 } 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 />
+    <>
       <Annotation x={10} y={16}>
         HTML annotation positioned at (10, 16)
       </Annotation>
@@ -87,17 +94,13 @@ export const Default = {
           </svg>
         </>
       </Annotation>
-    </VisCanvas>
+    </>
   ),
 } satisfies Story;
 
 export const WithZoom = {
   render: () => (
-    <VisCanvas
-      abscissaConfig={{ visDomain: [0, 41], showGrid: true }}
-      ordinateConfig={{ visDomain: [0, 20], showGrid: true }}
-    >
-      <DefaultInteractions />
+    <>
       <Annotation x={10} y={16} scaleOnZoom style={{ width: 230 }}>
         HTML annotation at (10, 16) that scales with zoom.
       </Annotation>
@@ -111,7 +114,7 @@ export const WithZoom = {
         Another annotation that scales with zoom but this time{' '}
         <strong>centred</strong> on (25, 10)
       </Annotation>
-    </VisCanvas>
+    </>
   ),
 } satisfies Story;
 
@@ -137,20 +140,14 @@ function PointerTracker(props: {
 
 export const FollowPointer = {
   render: () => (
-    <VisCanvas
-      abscissaConfig={{ visDomain: [0, 41], showGrid: true }}
-      ordinateConfig={{ visDomain: [0, 20], showGrid: true }}
-    >
-      <DefaultInteractions />
-      <PointerTracker>
-        {(x, y) => (
-          <Annotation
-            x={x + 0.5} // slight offset from pointer
-            y={y - 0.5}
-            style={{ whiteSpace: 'nowrap' }}
-          >{`x=${formatCoord(x)}, y=${formatCoord(y)}`}</Annotation>
-        )}
-      </PointerTracker>
-    </VisCanvas>
+    <PointerTracker>
+      {(x, y) => (
+        <Annotation
+          x={x + 0.5} // slight offset from pointer
+          y={y - 0.5}
+          style={{ whiteSpace: 'nowrap' }}
+        >{`x=${formatCoord(x)}, y=${formatCoord(y)}`}</Annotation>
+      )}
+    </PointerTracker>
   ),
 } satisfies Story;