标签: storybook-addon-specifications

即使我的故事书仍然正常构建，我开始在我的终端上收到此错误

ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
ERR! @storybook/addon-docs
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
ERR! @storybook/addon-essentials

我真的不明白我错过了什么。

这是我的main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-links',
    '@storybook/addon-controls',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
};

这是我的preview.js

import React from 'react';
import { MemoryRouter } from 'react-router-dom';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  options: {
    storySort: (a, b) …

我正在尝试找到一种在新故事书 6 的故事级别禁用画布的方法。我正在制作一个组件库，根据故事的不同，其中一些组件只有画布，而其他组件只有文档。

我尝试过使用

myStory.parameters = {
  previewTabs: {
    canvas: {
      hidden: true,
    },
  },
};

或者

myStory.parameters = {
  previewTabs: {
    'storybook/docs/panel': {
      hidden: false,
    },
  },
};

取决于故事。但是，这会导致不显示选项卡名称。结果，会发生以下情况：

1. 我有故事 1 - 只有画布可见
2. 我有故事 2 - 只有文档可见
3. 我单击故事 1 - 正如预期的那样，我看到了画布
4. 我点击故事 2 - 我也看到了画布，尽管它是隐藏的（我想是因为该选项卡已从上一个故事中保留下来）。好像这还不够糟糕，我什至无法单击文档，因为没有可见的选项卡名称。
5. 反之亦然（如果我从故事 2 开始）

作为文档的解决方法，我发现了这个（感谢本杰明，在这篇文章中）：

myStory.parameters = {
  docs: { page: null },
};

这样，我仍然可以看到画布和文档选项卡，但对于已设置此参数的故事，文档选项卡现在为空。

我正在寻找对画布做类似的事情，并且已经尝试过

myStory.parameters = {
  canvas: { page: null },
};

myStory.parameters = {
  canvas: { disabled: …

如何将contexts文件中定义的 props 传递给我的故事中的组件？文档没有明确说明：https : //www.npmjs.com/package/@storybook/addon-contexts

我正在使用 vue。

是否有某人使用插件上下文的工作示例？

我正在尝试使用插件链接。我尝试了文档中列出的确切简单按钮示例，https://www.npmjs.com/package/@storybook/addon-links。LinkTo 反应组件工作正常，但当我使用 linkTo 函数时，我收到“无法导航到提供的故事”错误。有人可以帮我解决这个问题吗？

import React from "react";
import { linkTo } from '@storybook/addon-links';
import LinkTo from '@storybook/addon-links/react';

export default {
  title: 'Button',
};

export const first = () => (
  <button onClick={()=>{
    // debugger;
    linkTo('Button', 'second')
  }}>Go to "Second"</button>
);

export const second = () => (
  <button onClick={linkTo('Button', 'first')}>Go to "First"</button>
);

我注意到Storybooks Options Docs中的一个属性，我认为selectedPanel它允许我预先选择插件面板。

我不清楚如何使用它。例子是：

options: { selectedPanel: 'storybook/a11y/panel' }

我不明白的是“storybook/a11y/panel”字符串来自哪里。如果我想预先选择“来源”面板怎么办？

我正在尝试测试角度分量的输出。

我有一个复选框组件，它使用 EventEmitter 输出其值。复选框组件包装在故事书故事中，用于演示和测试目的：

export const basic = () => ({
  moduleMetadata: {
    imports: [InputCheckboxModule],
  },
  template: `
<div style="color: orange">
 <checkbox (changeValue)="changeValue($event)" [selected]="checked" label="Awesome">
 </checkbox>
</div>`,
  props: {
    checked: boolean('checked', true),
    changeValue: action('Value Changed'),
  },
});

我正在使用一个操作来捕获值更改并将其记录到屏幕上。

然而，当为此组件编写 cypress e2e 时，我仅使用 iFrame 而不是整个故事书应用程序。

我想找到一种方法来测试输出是否正常。我尝试在 iFrame 中的 postMessage 方法上使用间谍，但这不起作用。

 beforeEach(() => {
      cy.visit('/iframe.html?id=inputcheckboxcomponent--basic', {
        onBeforeLoad(win) {
          cy.spy(window, 'postMessage').as('postMessage');
        },
      });
    });

然后断言将是：

  cy.get('@postMessage').should('be.called');

还有其他方法可以断言已(changeValue)="changeValue($event)" 触发吗？

我在 Storybook for React 中使用Preview插件来显示文档中的组件用法。

<Preview withToolbar>
  <Story name="primary">
  <PrimaryButton  disabled={boolean("Disabled",false)} modifiers={["small"]} onClick={action('button-click')} > {text("Label", "Hello Storybook")}</PrimaryButton>
  </Story>
</Preview>

这会生成如下文档： 有一个显示代码/隐藏代码开关，它显示组件的 React 代码，是否也可以显示纯 HTML 标记。

我需要为 React 和非 React 项目使用单个故事书组件资源管理器，因此想检查是否也生成纯标记源代码。

谢谢