[storybook] Adding story to check mount/unmount

Author: sim51

packages/storybook/stories/Lifecycle.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Lifecycle } from './Lifecycle';
+import source from './Lifecycle?raw';
+
+const meta: Meta<typeof Lifecycle> = {
+  component: Lifecycle,
+  id: 'lifecycle',
+  title: 'Examples',
+};
+
+export default meta;
+type Story = StoryObj<typeof Lifecycle>;
+
+export const Default: Story = {
+  name: 'Testing lifecycle',
+  args: {},
+  parameters: {
+    storySource: {
+      source,
+    },
+  },
+};

packages/storybook/stories/Lifecycle.tsx

@@ -0,0 +1,26 @@
+import { SigmaContainer } from '@react-sigma/core';
+import '@react-sigma/core/lib/style.css';
+import type Graph from 'graphology';
+import { CSSProperties, FC, useEffect, useState } from 'react';
+
+import { useRandom } from './common/useRandom';
+
+export const Lifecycle: FC<{ style?: CSSProperties }> = ({ style }) => {
+  const { randomGraph } = useRandom();
+  const [graph, setGraph] = useState<null | Graph>(randomGraph());
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setGraph(null);
+      setTimeout(() => setGraph(randomGraph), 500);
+    }, 1000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [randomGraph]);
+
+  return (
+    <>{graph ? <SigmaContainer style={style} graph={graph} settings={{ allowInvalidContainer: true }} /> : null}</>
+  );
+};