Skip to content

Commit

Permalink
Merge pull request #1714 from silx-kit/up-storybook
Browse files Browse the repository at this point in the history
Upgrade Storybook
  • Loading branch information
axelboc authored Oct 7, 2024
2 parents a25cbd6 + b9f1792 commit 334013e
Show file tree
Hide file tree
Showing 4 changed files with 1,010 additions and 4,135 deletions.
16 changes: 8 additions & 8 deletions apps/storybook/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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"
},
Expand Down
34 changes: 2 additions & 32 deletions apps/storybook/src/Stacking.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
ResetZoomButton,
} from '@h5web/lib';
import { Vector3 } from 'three';
import { Default as StackingStory } from './Stacking.stories';

## Stacking

Expand Down Expand Up @@ -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`
Expand Down
53 changes: 53 additions & 0 deletions apps/storybook/src/Stacking.stories.tsx
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 334013e

Please sign in to comment.