chore(web): improve storybook (#952)

web/.storybook/preview.tsx

@@ -8,7 +8,7 @@ import {
 } from "@apollo/client";
 import { ThemeProvider } from "@emotion/react";
 import { withThemeFromJSXProvider } from "@storybook/addon-styling";
-import type { Preview } from "@storybook/react";
+import type { Preview, ReactRenderer } from "@storybook/react";
 import React from "react";
 
 import classicDarkTheme from "../src/classic/theme/reearthTheme/darkTheme"; // temp classic imports
@@ -46,7 +46,7 @@ const preview: Preview = {
     },
   },
   decorators: [
-    withThemeFromJSXProvider({
+    withThemeFromJSXProvider<ReactRenderer>({
       themes: {
         light: {
           classic: classicLightTheme,

web/src/beta/components/FloatedPanel/index.stories.tsx

@@ -0,0 +1,35 @@
+import { css } from "@emotion/react";
+import { Meta, Story } from "@storybook/react";
+
+import FloatedPanel, { Props } from ".";
+
+const meta: Meta<Props> = {
+  component: FloatedPanel,
+};
+
+export default meta;
+
+const Template: Story<Props> = args => <FloatedPanel {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  visible: true,
+  children: "This is the content of the floated panel",
+};
+
+export const Hidden = Template.bind({});
+Hidden.args = {
+  visible: false,
+  children: "This is the content of the floated panel",
+};
+
+export const CustomStyles = Template.bind({});
+CustomStyles.args = {
+  visible: true,
+  children: "This is the content of the floated panel",
+  styles: css`
+    background-color: lightblue;
+    color: white;
+    padding: 10px;
+  `,
+};

web/src/beta/components/InsertionBar/index.stories.tsx

@@ -1,11 +1,36 @@
 import { Meta, StoryObj } from "@storybook/react";
 
-import InsertionBar from ".";
+import InsertionBar, { Props } from ".";
 
-export default {
+const meta: Meta<Props> = {
   component: InsertionBar,
-} as Meta;
+};
+
+export default meta;
 
 type Story = StoryObj<typeof InsertionBar>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    pos: "bottom",
+    mode: "visible",
+    onButtonClick: () => console.log("Button clicked"),
+    children: "Insertion bar content",
+  },
+};
+
+export const Hidden: Story = {
+  args: {
+    pos: "top",
+    mode: "hidden",
+    children: "Insertion bar content",
+  },
+};
+
+export const Dragging: Story = {
+  args: {
+    pos: "bottom",
+    mode: "dragging",
+    children: "Insertion bar content",
+  },
+};

web/src/beta/components/Slide/index.stories.tsx

@@ -16,12 +16,22 @@ const Page = styled.div`
   background-color: ${({ color }) => color};
 `;
 
+interface DefaultProps {
+  pos: number;
+  setPos: React.Dispatch<React.SetStateAction<number>>;
+}
+
 export default {
   component: Slide,
+  decorators: [
+    Story => {
+      const [pos, setPos] = useState(0);
+      return <Story pos={pos} setPos={setPos} />;
+    },
+  ],
 } as Meta;
 
-export const Default = () => {
-  const [pos, setPos] = useState(0);
+export const Default = ({ pos, setPos }: DefaultProps) => {
   return (
     <Wrapper>
       <Slide pos={pos}>

web/src/beta/features/Editor/SketchLayerManager/index.stories.tsx

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import SketchLayerManager from ".";
+
+const meta: Meta<typeof SketchLayerManager> = { component: SketchLayerManager };
+export default meta;
+type Story = StoryObj<typeof SketchLayerManager>;
+export const Default: Story = { args: {} };

web/vite.config.ts

@@ -21,6 +21,8 @@ const DEFAULT_CESIUM_ION_TOKEN_LENGTH = 177;
 export default defineConfig({
   envPrefix: "REEARTH_WEB_",
   plugins: [svgr(), react(), yaml(), cesium(), serverHeaders(), config(), tsconfigPaths()],
+  // https://github.com/storybookjs/storybook/issues/25256
+  assetsInclude: ["/sb-preview/runtime.js"],
   define: {
     "process.env.QTS_DEBUG": "false", // quickjs-emscripten
     __APP_VERSION__: JSON.stringify(pkg.version),