0

我在这个项目中使用了下一个 Js 和打字稿。

我想查看组件中的所有代码（checkboxSquare.tsx），但只有我能看到(args) => <CheckboxSquare {...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所以在故事选项卡中 我只看到这个代码(args) => <CheckboxSquare {...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 文件中的所有代码。怎么喜欢这个？？

4

0 回答 0