标签: storybook

只是想将 angular-fontawesome 与 Storybook.js 作为库（FaIconLibrary）一起使用。在以下文档中https://github.com/FortAwesome/angular-fontawesome/blob/master/docs/usage/icon-library.md#using-the-icon-library我要向构造函数添加一个属性。仅在 Storybook.js 文件 (index.stories.ts) 中，我看不到向构造函数添加任何内容的方法，因为它不存在。有人解决这个问题或者有好的解决办法吗？谢谢

我有一个 lerna + 纱线工作区 monorepo，它使用故事书。
每个包/组件都有自己的 /assets 文件夹，其中包含静态图像，如下所示：

/packages
     /component1
            /assets
                  ... 静态图像
            index.tsx
     /component2
            /assets
                  ... 静态图像
            index.tsx

在官方文档中，它说包含-s选项，但它仅适用于单个通用资产文件夹，不适用于每个包： start-storybook -p 6006 -s assets

我如何为每个组件提供故事书中的这些静态资产？

我的组件blopp具有以下结构。

@Component({ selector: 'blopp', template: '{{config|json}}', ... })
export class BloppComponent {
  @Input() config: Config; ...    
}

而配置本身是一个类，如下所示。

export class Config {
  constructor(public id: string, public title: string, public active: boolean) { }
}

当我像这样在 StoryBook 中设置测试时，这一切似乎都有效。

export const test1 = () => ({
  ...componentModule,
  template: '<plopp [config]="{id:23,title:22,active:true}"></plopp>'
});

我想设置一个对象并传递它。但是，尝试执行以下操作不会呈现任何内容，就好像传递的实体为null或undefined一样。它的正确语法是什么？

export const test2 = () => ({
  ...componentModule,
  template: '<plopp [config]=config></plopp>'
});

export const test3 = () => ({
  ...componentModule,
  template: '<plopp [config]="config"></plopp>'
}); …

我希望全局隐藏一个插件选项卡（不是每个故事）。我不想禁用插件本身，只是隐藏其选项卡面板。

我正在使用带有 React 的 Storybook 5.3.18 版本，我希望隐藏的插件选项卡来自插件“样式组件主题”。

抱歉，我知道这听起来是一个基本问题，但我只是不知道如何做到这一点。任何帮助表示赞赏。

如何编写泛型，以便结果采用提供给泛型的另一种类型的参数？

这是我的示例代码。

import { Story } from '@storybook/react/types-6-0';

type TKeyAny = {
  [key: string]: string; // | 'other args values here...';
};

// this fails
export const bindargs = <A extends TKeyAny, T extends Story<A>>(args: A, Template: T): T => {
  const Comp = Template.bind({});
  Comp.args = args;
  return Comp;
};

export default bindargs;

这可以工作，但它并不特定于传递给它的参数，这就是为什么我想要一个通用的：

// This works but I'd like this instead to be in a generic 
// export const bindargs = (args: TKeyAny, Template: Story<TKeyAny>): Story<TKeyAny> => { …

我正在尝试配置故事书以显示黑暗主题，到目前为止我还没有找到解决此问题的方法。

所以我遵循了故事书文档，并且我设置了manager.js文件，如下所示：

// .storybook/manager.js

import { addons } from '@storybook/addons';
import { themes } from '@storybook/theming';

addons.setConfig({
  theme: themes.dark,
});

我还将主题打印到控制台，所以我看到它到达了：

可能值得一提的是，当浏览器重新加载时会读取此文件，但如果我更改源代码并保存热重载则不起作用。

以下是我为.storybook/preview.js中的文档指定相同主题的方法：

// .storybook/preview.js

import React from "react";
import { appTheme } from "../src/Common/theme";
import { ThemeProvider } from "styled-components";
import { makeDecorator } from "@storybook/addons";
import { addParameters, addDecorator } from "@storybook/react";
import defaultNotes from "./general-docs.md";
import { themes } from "@storybook/theming";

export const parameters = {
  docs: {
    theme: themes.dark
  }
};

addParameters({
  notes: …

我在 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 项目使用单个故事书组件资源管理器，因此想检查是否也生成纯标记源代码。

谢谢

我有一个故事，包括多个故事。对于一个故事 ( mobile)，我想预定义其视口 - 我该怎么做？

这就是我尝试过的：

import React from "react";
import {Navigation, NavigationProps} from "./navigation";
import {boolean} from "@storybook/addon-knobs";

export default
{
    component: Navigation,
    title: "Molecule/Navigation",
};

export const responsive = () => {
    const props: NavigationProps = {
        isLoggedIn: true,
    }

    return <Navigation {...props} />;
};

export const mobile = () => {
    const props: NavigationProps = {
        isLoggedIn: boolean("Angemeldet", false),
    }

    return <Navigation {...props} />;
};

mobile.paramters = {
    viewport: {
        defaultViewport: "Small mobile"
    }
}

我正在尝试使用 CSF 格式的装饰器。我在文档中尝试了这个示例，但由于它是为 React 编写的，因此它对我不起作用。

export default {
  title: 'My Component',
  decorators: [(Story) => <div style={{ margin: '3em' }}><Story/></div>]
}

目前是否可以在 html 的组件或故事级别使用装饰器？

我使用了故事书网站上示例中的一些代码，具体来说：

export const Primary = Primary.decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>]

然而，即使这是打字稿示例，它也没有指定 Story 的类型，并且除非它有类型，否则我的 linter 将不会通过。我应该为故事使用什么类型？

Story: any

也不会通过。

参考： https: //storybook.js.org/docs/react/writing-stories/decorators