Storybook 为故事控件扩展组件接口

huangapple go评论101阅读模式
英文:

Storybook extend component interface for story controls only

问题

Here's the translated code portion you requested:

  1. 我有一个使用 framer-motion 动画进出的模态框代码如下
  2. ```jsx
  3. <AnimatePresence>
  4. { isOpen && <Modal /> }
  5. </AnimatePresence>

正如您所看到的,模态框不接受 isOpen 属性,而是基于父组件的状态在 DOM 中显示。在 Storybook 中,我尝试在 storybook actions 中添加这个 isOpen 布尔值,但是我遇到了扩展 StoryObj 类型的 TypeScript 错误。

  1. const meta = {
  2. component: Modal,
  3. argTypes: {
  4. // 在这里添加模态框的参数类型
  5. },
  6. args: {
  7. isOpen: {
  8. description: '切换模态框的打开和关闭状态',
  9. control: 'boolean',
  10. table: {
  11. category: '行为',
  12. defaultValue: { summary: false },
  13. },
  14. },
  15. },
  16. parameters: {
  17. layout: 'centered',
  18. controls: {
  19. expanded: true,
  20. },
  21. },
  22. } 满足 Meta<typeof Modal & { isOpen: boolean }>;
  23. export default meta;
  24. type Story = StoryObj<typeof Modal & { isOpen: boolean }>;
  25. export const Modal: Story = {
  26. render: (args: any) => {
  27. const [{ isOpen }] = useArgs();
  28. return <Modal {...args} />;
  29. },
  30. };

我遇到的错误是关于 Storybook 获取推断组件类型时,isOpen 不是存在于模态框上的类型。

我正在尝试扩展 story 接口以便在控件中拥有 isOpen,但是当我尝试扩展 type Story = StoryObj<typeof Modal> 时,我一直收到这个 TypeScript 错误:

  1. Type '{ isOpen: true; }' 无法分配给类型 'Partial<Props>'
  2. 对象文字只能指定已知属性'isOpen' 不在类型 'Partial<Props>'
  1. Please note that I've provided a translation of the code portion while maintaining the code structure. If you have any specific questions or need further assistance, please let me know.
  2. <details>
  3. <summary>英文:</summary>
  4. I have a modal that I animate in and out using framer-motion that looks something like this.

<AnimatePresence>
{ isOpen && <Modal /> }
</AnimatePresence>

  1. As you can see the modal does not accept an isOpen prop and instead is shown in the DOM based on the parent state. In `storybook` I am trying to add this `isOpen` boolean in the storybook actions but I am running into Typescript errors extending the StoryObj type

const meta = {
component: Modal,
argTypes: {
// Modal Arg Types here
}
args: {
isOpen: {
description: 'Toggle the modal open and closed',
control: 'boolean',
table: {
category: 'Behaviour',
defaultValue: { summary: false },
},
},
parameters: {
layout: 'centered',
controls: {
expanded: true,
},
},
} satisfies Meta<typeof Modal & { isOpen: boolean }>

export default meta

type Story = StoryObj<typeof Modal & { isOpen: boolean }>

export const Modal: Story = {
render: (args: any) => {
const [{ isOpen }] = useArgs()

  1. return &lt;Modal {...args} /&gt;
  2. },

}

  1. The error I am getting is referencing the fact that `isOpen` is not a type that exists on `modal` when storybook is getting the inferred component type.
  2. I am trying to extend the story interface in order to have `isOpen` in my controls but when I try to extend `type Story = StoryObj&lt;typeof Modal&gt;` I keep getting this typescript error

Type '{ isOpen: true; }' is not assignable to type 'Partial<Props>'.
Object literal may only specify known properties, and 'isOpen' does not exist in type 'Partial<Props>'

  1. </details>
  2. # 答案1
  3. **得分**: 1
  4. "Add args:

type Story = StoryObj<typeof Modal> & { args: { isOpen?: boolean } };

  1. <details>
  2. <summary>英文:</summary>
  3. Add args:

type Story = StoryObj<typeof Modal> & { args: { isOpen?: boolean } };

  1. </details>

huangapple
  • 本文由 发表于 2023年5月22日 00:52:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76300985.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定