fix most react-web storybook tests

Change-Id: I5c3db102b883ab9718df3016506629c0ab3b5099
GitOrigin-RevId: 816f574410aa3f4a2fe91ee319b2466edf2516ec

packages/react-web/.storybook/main.js → packages/react-web/.storybook/main.ts

@@ -1,15 +1,17 @@
-module.exports = {
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
+    "@storybook/addon-webpack5-compiler-swc",
   ],
   framework: {
     name: "@storybook/react-webpack5",
     options: {},
   },
-  features: {
-    interactionsDebugger: true,
-  },
 };
+
+export default config;

packages/react-web/.storybook/test-runner.ts

@@ -0,0 +1,9 @@
+import type { TestRunnerConfig } from "@storybook/test-runner";
+
+const config: TestRunnerConfig = {
+  tags: {
+    skip: ["skip-test"],
+  },
+};
+
+export default config;

packages/react-web/src/stories/PlasmicImg.stories.tsx

@@ -1,10 +1,18 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 import React from "react";
 import { PlasmicImg } from "../render/PlasmicImg";
 import "../styles/plasmic.css";
 
-const Template: ComponentStory<typeof PlasmicImg> = (args: any) => {
-  const { containerWidth, containerHeight, ...rest } = args;
+type PlasmicImgTemplateProps = React.ComponentProps<typeof PlasmicImg> & {
+  containerWidth?: number;
+  containerHeight?: number;
+};
+
+const Template: StoryFn<PlasmicImgTemplateProps> = ({
+  containerWidth,
+  containerHeight,
+  ...rest
+}) => {
   return (
     <div style={{ width: containerWidth, height: containerHeight }}>
       <PlasmicImg {...rest} />
@@ -38,11 +46,10 @@ export default {
   },
   args: {
     src: {
-      src:
-        "https://img.plasmic.app/img-optimizer/v1/img/07a7153536a89fef14e0075c7632d6b3.jpg",
+      src: "https://img.plasmic.app/img-optimizer/v1/img/07a7153536a89fef14e0075c7632d6b3.jpg",
       fullWidth: 3840,
       fullHeight: 2160,
     },
     loader: "plasmic",
   },
-} as ComponentMeta<typeof PlasmicImg>;
+} satisfies Meta<PlasmicImgTemplateProps>;