Hur skriver man en dekoratör i TypeScript för Storybook?

Jag är ny på Storybook samt TypeScript, jag sitter fast när jag skapar en dekoratör som tar två parametrar Story och 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,
      },
    },
  },
};

Den visar mig följande fel:

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 |

Och när man hovrar över <Story /> i vscode, står det 'Story' refererar till ett värde, men används som en typ här. Menade du 'typeof Story'?

OBS: Jag skriver en global dekoratör.

Jag har försökt söka på internet, men jag har inte hittat många ledtrådar för att få det löst.

Svar #1

Du kan prova på detta sätt: Först, byt namn på din .storybook/preview.ts-fil till .storybook/preview.tsx. Sedan, om du ser felet 'React' refererar till en UMD-global, kommer import React from "react" att lösa problemet.

Min nuvarande preview.tsx-fil:

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;

Relaterade artiklar