如何使用 Storybook Storysource Addon 查看 Storybook 中的完整代码

Question

我在这个项目中使用了 next Js 和 typescript。

我想查看组件中的所有代码（checkboxSquare.tsx），但只有我可以看到 （args）=> .

这是CheckboxSquare.stories.tsx

import React from "react";

import { Meta, Story } from "@storybook/react";
import CheckboxSquare, { CheckboxT } from "./CheckboxSquare";

export default {
  title: "Components/CheckBoxSquare",
  component: CheckboxSquare,
} as Meta;

const Template: Story<CheckboxT> = (args) => <CheckboxSquare {...args} />;

export const Basic = Template.bind({});
Basic.args = {
  checked: true,
  disabled: false,
};

这是 CheckboxSquare.tsx

import styled from "styled-components";
import { useState } from "react";

const CheckboxLayout = styled("input")<CheckboxT>`
  ... skip
`;

export interface CheckboxT extends React.HTMLAttributes<HTMLElement> {
  checked?: boolean;
  disabled?: boolean;
}

const Checkbox = ({ checked, disabled }: CheckboxT) => {
  return (
    <CheckboxLayout
      type={"checkbox"}
      disabled={disabled}
      checked={onClick ? checked : checkedState}
      readOnly
    />
  );
};

export default Checkbox;

我安装了 npm install @storybook/addon-storysource --dev 所以在 story 选项卡 我只看到这段代码 (args) => 这是我的 .stroybook/main.js

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-storysource",
    {
      name: "@storybook/addon-storysource",
      options: {
        loaderOptions: {
          injectStoryParameters: false,
          prettierConfig: { printWidth: 80, singleQuote: false },
        },
      },
    },
  ],
  framework: "@storybook/react",
};

https://github.com/storybookjs/storybook/tree/master/addons/storysource在此链接中 示例显示 tsx 文件中的所有代码。怎么喜欢这个？？

Answer 1

来自他们的自述文件：https://github.com/storybookjs/storybook/tree/master/addons/storysource

Storybook 6.0 对源加载器进行了无意的更改， 插件中仅显示所选故事的来源。到 恢复旧的行为，传递 theinjectStoryParameters: false 选项。

如果您使用的是插件文档：

module.exports = {
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        sourceLoaderOptions: {
          injectStoryParameters: false,
        },
      },
    },
  ],
};

如果没有：

module.exports = {
  addons: [
    {
      name: '@storybook/addon-storysource',
      options: {
        loaderOptions: {
          injectStoryParameters: false,
        },
      },
    },
  ],
};

此错误将在插件的未来版本中得到解决。

我看到您正在使用 Essentials 插件，我相信其中包括

addon-docs

插件，因此您可能需要尝试将以下内容添加到您的插件中：

{
  name: '@storybook/addon-docs',
  options: {
    sourceLoaderOptions: {
      injectStoryParameters: false,
    },
  },
},