如何在故事书的打字稿中编写装饰器？

Question

我对故事书和打字稿都很陌生，在创建一个采用两个参数 Story 和 context 的装饰器时，我陷入了困境。

const CustomDecorator = (Story, context) => {
  console.log("My Decorator");
  return (
      <Story />
  );
};

const preview: Preview = {
  decorators: [CustomDecorator],
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },

  globalTypes: {
    theme: {
      description: 'Global theme for components',
      defaultValue: 'light',
      toolbar: {
        // The label to show for this toolbar item
        title: 'Theme',
        icon: 'circlehollow',
        // Array of plain string values or MenuItem shape (see below)
        items: ['light', 'dark'],
        // Change title based on selected value
        dynamicTitle: true,
      },
    },
  },
};

它向我显示以下错误：

Failed to compile.
Syntax error: Unexpected token, expected "," (8:13)
storybook/preview.ts undefined

   6 |   console.log("My Decorator");
   7 |   return (
>  8 |       <Story />
     |              ^
   9 |   );
  10 | };
  11 |

当将鼠标悬停<Story />在 vscode 中时，它显示 “Story”指的是一个值，但在这里被用作类型。您指的是 'typeof Story' 吗?

注意：我正在编写一个全局装饰器。

我尝试在互联网上搜索，但没有找到太多解决问题的线索。

Answer 1

您可以尝试以下方法：首先，将 .storybook/preview.ts 文件重命名为 .storybook/preview.tsx。然后，如果您看到错误“React”引用 UMD 全局，则 import React from “react” 将解决该问题。

我当前的 Preview.tsx 文件：

import React from "react";
import type { Preview } from "@storybook/react";
import { ThemeProvider } from "styled-components";
import theme from "../src/theme";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [
    (Story) => (
      <ThemeProvider theme={theme}>
        <Story />
      </ThemeProvider>
    ),
  ],
};

export default preview;