标签: storybook

我在 Jest 测试中遇到错误：

 FAIL  test/storyshots.test.ts
  ? Test suite failed to run

    TypeError: require.requireActual is not a function

      1 | import initStoryshots from "@storybook/addon-storyshots"
      2 | 
    > 3 | initStoryshots({
        | ^
      4 |   configPath: "./storybook",
      5 |   framework: "react-native",
      6 | })

      at Object.load (node_modules/@storybook/addon-storyshots/dist/frameworks/react-native/loader.js:23:29)
      at Object.loadFramework [as default] (node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:26:19)
      at testStorySnapshots (node_modules/@storybook/addon-storyshots/dist/api/index.js:48:14)
      at Object.<anonymous> (test/storyshots.test.ts:3:1)

我没有requireActual在代码中的任何地方使用。不过，它看起来像Storybook。

谷歌搜索只出现了一个（自删除后）Stackoverflow 问题，没有答案。

我想在故事书中添加顺风。这样 Stories 就会像在 Web 上一样呈现。

我曾经create-react-app project-name --template typescript创建过这个项目。

然后为了安装tailwind，我遵循了tailwind 文档中的https://tailwindcss.com/docs/guides/create-react-app指令。

完成后，我运行了代码npm sb init。这确保了故事书的运行。

现在我需要告诉 storybook 使用 tailwindcss 进行样式设置。但我不知道如何。

我看到的每个其他答案都告诉编辑postcss.config.js文件。

但我遵循了这个https://tailwindcss.com/docs/guides/create-react-app文档，我什至不必创建 postcss.config.js 文件。所以我很困惑现在该怎么办。

为了清楚起见，我将在下面包含一些配置文件。

craco.config.js

module.exports = {
    style: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

.storybook/preview.js

import "../src/index.css"

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}

.storybook/main.js

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

我有一个带有 Storybook 的 React/Typescript 项目。Storybook 工作得很好，但一旦我开始导入带有别名的文件，它就会崩溃。

例子：

import Foo from "@components/foo" => crash
import Foo from "../../components/foo" => ok

该应用程序与别名一起工作正常。该问题仅与 Storybook 有关。

这是我的故事书配置：

module.exports = {
  stories: ["../**/stories.tsx"],
  webpackFinal: (config) => {
    return {
      ...config,
      module: {
        ...config.module,
        rules: [
          {
            test: /\.(ts|js)x?$/,
            exclude: /node_modules/,
            use: { loader: "babel-loader" },
          },
          { test: /\.css$/, use: ["style-loader", "css-loader"] },
          { test: /\.(png|jpg|gif)$/, use: ["file-loader"] },
          {
            test: /\.svg$/,
            use: [
              {
                loader: "babel-loader",
              },
              {
                loader: "react-svg-loader",
                options: {
                  jsx: true, …

我在运行故事书时遇到错误...即使是在全新安装的情况下也是如此。

 npm run storybook

> @ storybook /media/programmersedge/New_Volume/devs/demostorybook
> start-storybook -p 9001 -c .storybook

sh: 1: start-storybook: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! @ storybook: `start-storybook -p 9001 -c .storybook`
npm ERR! spawn ENOENT
npm ERR! 
npm ERR! Failed at the @ storybook script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

我正在使用最新的故事书版本。我的节点 …

我有 Rails 引擎项目，使用 Storybook 和 mdx 文件来指定控件，但我需要隐藏每个故事的特定控件

<Meta
    title='Label Component'
    story='with_tooltip'
    args={{
        object: 'employee',
        field_name: 'name',
        text: 'Employee name',
        tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing eli'
    }}
/>

我有两个故事 [label,with_tooltip]

如果标签故事我需要隐藏工具提示控件我正在使用视图组件预览来显示组件

我有一个输入 Web 组件，它有一个非常简单的 API - 它有 aget state()和set state(model). 该 Web 组件还处理label用于输入的 ，因此简单的model如下所示：

{
  "value": "Foobar",
  "required": true,
  "disabled": false,
  "label": {
    "text": "Label for input",
    "toolTip": "Tooltip for the input's label",
    "position": "east"
  }
}

现在为了描述argTypes故事，我尝试了以下方法：

export default {
    title: `Components/Input/text-input`,
    argTypes: {
        value: { control: 'text' },
        disabled: { control: 'boolean' },
        required: { control: 'boolean' },
        label: {
            text: { control: 'text' },
            toolTip: { control: 'text' …

我收到这个错误，虽然项目中没有一行带有：first-child，为什么会出现？

...................................................... ...................................................... ...................................................... ...................................................... ................................................

 "dependencies": {
    "@storybook/addon-a11y": "^5.1.9",
    "@trendmicro/react-popover": "^0.4.0",
    "@types/classnames": "^2.2.9",
    "@types/jest": "24.0.13",
    "@types/node": "12.0.2",
    "@types/react": "16.8.18",
    "@types/react-dom": "16.8.4",
    "@types/react-modal": "^3.8.2",
    "@types/storybook__addon-a11y": "^5.0.0",
    "@types/storybook__addon-actions": "^3.4.3",
    "@types/storybook__addon-info": "^4.1.1",
    "@types/storybook__addon-knobs": "^5.0.0",
    "@types/storybook__react": "4.0.1",
    "@types/styled-components": "4.1.15",
    "classnames": "^2.2.6",
    "grommet": "^2.7.2",
    "react": "16.8.6",
    "react-dom": "16.8.6",
    "react-modal": "^3.9.1",
    "react-scripts": "3.0.1",
    "react-toastify": "^5.3.2",
    "styled-components": "^4.2.0",
    "typescript": "^3.5.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook",
    "build-storybook": "build-storybook -c .storybook -o .out",
    "lint": "tslint -c …

我创建了一个新组件 Navbar.jsx

import { Disclosure } from '@headlessui/react'
import Image from 'next/image'
import tacoPicture from '../public/lets-taco-bout-it.png'



function classNames(...classes) {
  return classes.filter(Boolean).join(' ')
}


export const Header = () => {
  return (
    <Disclosure as="nav" className="bg-white shadow">
      {({ open }) => (
        <>
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="flex items-center justify-between h-16">
              <div className="flex items-center">
                <div className="flex-shrink-0">
                <Image src={tacoPicture} alt="Picture of the author" />
                </div>
              </div>
            </div>
          </div>
                
        </>
      )}
    </Disclosure>
  )
}

所以，这需要用一个故事来描述。在我的文件 Navbar.stories.jsx 中，我执行以下操作

import { Navbar …

我正在尝试将Stencil和Storybook整合到同一个项目中.我一直在关注这个设置向导和这一个但是的步骤之一是组件库中发布到NPM和这不是我想要的.

我有这个我用组件库(文件夹)配置的repo,src以及那些带有Storybook的组件的审阅者,它位于该storybook文件夹中.

问题是,当我使用模板编译组件和复制dist文件夹中的故事书应用程序内并导入组件没有渲染.使用自定义头标签调整配置我能够正确导入它,但是没有应用任何样式.

当我打开网络面板时,导入组件时出现一些错误:

因此,组件存在于DOM中,但可见性设置为隐藏,我认为它在出现错误时会执行.

这是组件au-button:

import { Component } from '@stencil/core';

@Component({
  tag: 'au-button',
  styleUrl: 'button.css',
  shadow: true
})
export class Button {
  render() {
    return (
      <button class="test">Hello</button>
    );
  }
}

这是我的组成部分的故事:

import React from 'react';
import { storiesOf } from '@storybook/react';

import '../components/components.js'

storiesOf('Button', module)
  .add('with text', () => <au-button></au-button>)

这些是Storybook应用程序中的脚本:

"scripts": {
    "storybook": "start-storybook …

我正在尝试使用这个react guide加载演示故事书故事 ( withText, withIcon) ，但我无法运行任何示例故事。

为免生疑问，这里是代码文件 (Histogram.stories.js)：

import React from 'react';
import { Button } from '@storybook/react/demo';

export default { title: 'Button' };

export const withText = () => <Button>Hello Button</Button>;

export const withEmoji = () => (
  <Button>
    <span role="img" aria-label="so cool">
         
    </span>
  </Button>
);

和我的 main.js

module.exports = {
    stories: ['../src/**/*.stories.jsx?'],
};

当我运行时，npm run storybook我得到这个页面：

这是 devconsole 中的输出：

vendors~main.9bf87aec509ee033c0f8.bundle.js:135070 Download the React DevTools for a better development experience: https://fb .me/react-devtools
DevTools …