标签: storybook

在模拟用户与酶​​的交互后,我正在使用故事书来可视化React组件的更改.作为一个小例子,我希望在单击其中一个按钮后显示一个组件的故事.

我遇到的问题是组件的构造函数被调用两次:一次是在通过酶安装组件时,然后在故事书显示组件之后.这会将组件恢复为默认状态,因此模拟用户交互之后的任何更改都将丢失.

这是一些显示问题的代码.故事加载后,按钮组件处于"未点亮"状态,即使点击是用酶模拟的:

import React from 'react';

class SampleComponent extends React.Component {

    constructor(props){
        super(props);
        console.log('constructor');

        this.state = {isClicked: false};
        this.onClick = this.onClick.bind(this);
    }

    onClick(){
        console.log('onClick');
        this.setState({isClicked: true});
    }

    render(){
        const text = (this.state.isClicked)? 'Clicked!' : 'Not Clicked';
        return (
            <div>
                <input type='button' value='Click' onClick={this.onClick} />
                <p>{text}</p>
            </div>
        );
    }
}

export default SampleComponent;

故事档案:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { mount } from 'enzyme';
import { specs, describe, it } from 'storybook-addon-specifications';
import SampleComponent …

我想知道，在故事书中模拟 React 状态的“最佳实践”是什么（例如 *.stories.js）。

目前我正在尝试实现深色主题切换。

1. App Component 有一个名为“darkState”的状态，可以设置 true/false
2. 应用程序组件有一个处理程序“handleThemeChange()”，它根据“darkState”更改 MUI 主题
3. 标题组件有一个带有“onChange()”的开关或按钮，它会触发应用程序组件中的“handleThemeChange()”
4. MUI Switch 需要一个状态才能正常工作（至少我猜是这样）

所以，我决定在我的故事文件中模拟这个状态。但是在装饰器中写这个似乎......很奇怪。你怎么解决这个问题？

/components/Header/Header.stories.js

import React, { useState } from "react";
import { Header } from "./Header";

export default {
  title: "Components/Header",
  component: Header,
  decorators: [
    (StoryFn) => {
      // mock state
      const [darkState, setDarkState] = useState(false);
      const handleThemeChange = () => {
        setDarkState(!darkState);
        return darkState;
      };

      return (
        <Header
          enableThemeChange={true}
          handleThemeChange={handleThemeChange}
          darkState={darkState}
        />
      );
    }
  ]
};

const Template = (args) => <Header {...args} />; …

我似乎无法解决我在 Storybook 中遇到的这个错误。我有以下名为 Button.stories.mdx 的文件：

import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import Button from './Button';
import ButtonStory from './Button.stories.tsx'

<Meta title="Components/Button" component={Button} />

export const Template = (args) => <Button {...args } />

# Button Component

---

This Button component is supposed to handle all states for a button. It extends off of the HTML button type so that you should have all native HTML features that a button would provide.
We may make some of these …

在我的 Next.js 应用程序上安装和配置 Storybook并运行后build-storybook，我收到以下错误。

注意：我使用的是 npm 版本8.19.1。该项目是用 Typescript 编写的。

> msun@0.1.0 storybook:build
> build-storybook

info @storybook/react v6.5.13
info 
info => Cleaning outputDir: /Users/msun/Documents/msun/storybook-static
info => Loading presets
info => Compiling manager..
info => Compiling preview..
info Addon-docs: using MDX1
info => Using PostCSS preset with postcss@8.4.19
info => Using default Webpack5 setup
ERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve '/Users/msun/Documents/msun/generated-stories-entry.cjs' in '/Users/msun/Documents/msun'
65% building 14/14 entries …

有人成功使用VueJS，PostCss和Tailwind在Storybook中进行组件开发来建立项目吗？

我已经走了这么远：

1. 新vue项目（vue-cli 3.0.5）
2. @ storybook / vue（4.0.0-alpha.25）
3. tailwindcss（0.6.5）
4. 使用创建组件 <style lang="postcss"> ... </style>
5. @apply在样式块内使用Tailwind 将实用程序类应用于组件

我遇到的问题是，lang="postcss"运行故事书时，在编译过程中我创建的要使用的故事的任何组件都会失败。

我尝试添加一个自定义webpack配置来停止错误，但我的所有组件均未设置样式。

const path = require('path')

module.exports = {
    module: {
        rules: [
            {
                test: /\.postcss$/,
                loaders: ["style-loader", "css-loader", "postcss-loader"],
                include: path.resolve(__dirname, '../')
            }
        ]
    }
}

我也尝试将我app.postcss的stories.js文件（导入顺风）导入文件本身无济于事。任何帮助，将不胜感激。

我们正在从现有代码库构建 Storybook UI 库。编写代码时并没有考虑到组件驱动开发。在很多情况下，组件呈现连接到 Redux 存储的后代。

例如，父（已连接）-> 子（未连接）-> 孙（已连接）

现在，如果我正在为 Parent 构建故事，我了解如何将硬编码数据作为道具传递给直接子组件，以避免一起使用 Redux。但是，当连接的组件嵌套更深时，我无法弄清楚如何执行此操作。

理想情况下，我不希望有在所有的故事用终极版，但即使我不初始化终极版存储和描述的提供者包裹父组件在这里，就这甚至工作到连接孙子成分？

任何想法都会有所帮助。

我正在编写一个带有 typescript、sass 和 rollup 的 react 组件库，我希望它尽可能独立。

有没有人对如何最好地包含 scss 文件中引用的资产（图像和字体）有任何建议？

一种解决方案可能是某种加载程序（例如 postcss 处理器），用 base64 版本替换 scss 文件中引用的所有图像和字体资产。

有没有人有一个例子可以有效地做到这一点？任何解决方案或建议将不胜感激

我的汇总配置如下所示：

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "rollup-plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import scss from 'rollup-plugin-scss'
import sass from "rollup-plugin-sass";
import commonjs from "rollup-plugin-commonjs";
import copy from "rollup-plugin-copy";
import url from '@rollup/plugin-url';

import packageJson from "./package.json";

export default {
  input: "src/index.tsx",
  output: [
    {
      file: packageJson.main,
      format: "cjs",
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: "esm",
      sourcemap: true
    }
  ],
  plugins: …

我正在开发一个反应项目，我想设置故事书。我收到以下错误，我无法使用 webpack-5-beta-14 更新我的故事书（5.3.7）。

/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:30

normalModuleFactory.hooks.factorize.tapAsync(
                                   ^

TypeError: Cannot read property 'tapAsync' of undefined

我控制台记录了 normalModuleFactory 提供的钩子，这是我得到的，

{ resolver:
   SyncWaterfallHook {
     _args: [ 'resolver' ],
     taps: [ [Object] ],
     interceptors: [],
     call: [Function: lazyCompileHook],
     promise: [Function: lazyCompileHook],
     callAsync: [Function: lazyCompileHook],
     _x: undefined },
  factory:
   SyncWaterfallHook {
     _args: [ 'factory' ],
     taps: [ [Object] ],
     interceptors: [],
     call: [Function: lazyCompileHook],
     promise: [Function: lazyCompileHook],
     callAsync: [Function: lazyCompileHook],
     _x: undefined },
  beforeResolve:
   AsyncSeriesWaterfallHook {
     _args: [ 'data' ],
     taps: [ [Object] ],
     interceptors: [], …

在将 webpack 4/storybook 5 项目升级到 webpack 5 的过程中，希望能够利用联合模块。我经常在webpack --config webpack.config.js建筑工作中遇到一些困难，但我似乎无法克服这个故事书配置问题来使其正常工作。故事书 webpack.config.js 中没有很多 - 只是一些用于测试较少文件和使用适当加载器的模块规则。在升级 webpack 专业时，我遇到的错误似乎是典型的，因为我发现很多人遇到了从 3 到 4 相同的事情，但到目前为止我尝试过的任何事情都失败了。具体的堆栈跟踪是：

Cannot read property 'tapAsync' of undefined
    at ExternalModuleFactoryPlugin.apply (/Users/tbullard/Workspace/unify/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:29:39)
    at compiler.hooks.compile.tap (/Users/tbullard/Workspace/unify/node_modules/webpack/lib/ExternalsPlugin.js:24:63)
    at SyncHook.eval [as call] (eval at create (/Users/tbullard/Workspace/unify/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (/Users/tbullard/Workspace/unify/node_modules/tapable/lib/Hook.js:154:20)
    at hooks.beforeCompile.callAsync.err (/Users/tbullard/Workspace/unify/node_modules/@storybook/core/node_modules/webpack/lib/Compiler.js:665:23)
    at _err0 (eval at create (/Users/tbullard/Workspace/unify/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1)
    at compiler.inputFileSystem.readFile (/Users/tbullard/Workspace/unify/node_modules/@storybook/core/node_modules/webpack/lib/DllReferencePlugin.js:72:15)
    at process.nextTick (/Users/tbullard/Workspace/unify/node_modules/@storybook/core/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15)
    at process._tickCallback (internal/process/next_tick.js:61:11)

让我相信有插件不兼容？？？蒂亚！

我在用着@storybook/react v6.1.21。我希望可以选择使用state和setState道具将状态传递给我的故事。

这就是我定义装饰器的方式：

//preview.js
export const decorators = [
    Story => {
        const [state, setState] = useState();
        return <Story state={state} setState={setState} />;
    }
];

// mycomponent.stories.tsx

export const TwoButtons = ({ state, setState }) => (
    <ButtonGroup
        buttons={[
            { label: 'One',value: 'one'},
            { label: 'Two', value: 'two' }
        ]}
        selectedButton={state}
        onClick={val => setState(val)}
    />
);

但由于某种原因，state 和 setState 在故事中没有定义。我在 Storybook v5 中也有类似的设置。
知道我缺少什么吗？