标签: storybook

这是我的组件：

Alert.tsx

import { Alert } from "react-bootstrap";

export enum AlertVariants {
  success = "success",
  danger = "danger",
}

export interface IAlertComponent {
  handleClose(): void;
  header: string;
  children: string;
  variant: AlertVariants;
}
export const AlertComponent = ({
  handleClose,
  header,
  children,
  variant,
}: IAlertComponent) => {
  return (
    <Alert variant={variant} onClose={handleClose} dismissible>
      <Alert.Heading>{header}</Alert.Heading>
      <p>{children}</p>
    </Alert>
  );
};

故事是这样的：

Alert.stories.tsx

import { Meta, Story } from "@storybook/react";
import {
  AlertComponent,
  IAlertComponent,
  AlertVariants,
} from "../components/Alert";

const Template: Story<IAlertComponent> = (args) => <AlertComponent …

我试图更好地理解何时使用args以及何时使用argTypes？有什么区别？

从我读到的内容来看，argTypes 只是 args 的扩展，并允许提供更好的功能和文档。但还有更多吗？

在下面的例子中，我们可以更新故事书 UI 中的“标签”，无论是它argTypes还是args.

** 添加最小可重复示例 **

// Button.stories.js

export default {
  title: 'Button',
  argTypes: {
    label: { control: 'text' },
  },
};

export const Basic = (args) => <Button {...args} />;
Basic.args = {
  label: '',
};

我需要使用 Tailwind CSS 在 Storybook 中编写一些按钮组件（而且我对 Storybook 和 Tailwind 都是全新的）。我需要将某些按钮的边框颜色更改为gray-800。我有 和border类，但仍然在元素的计算样式中border-gray-800得到。rgb(0,0,0)

这是按钮的完整类名："inline-flex justify-between items-center h-10 w-max p-1 pl-4 border border-gray-800 rounded-full"。任何其他样式都可以完美应用。可能是什么问题？

也许我必须首先在顺风配置中启用这种颜色或类似的东西？

谢谢！

更新：我还注意到，当我使用“text-gray-800”时，正确的颜色也没有应用于文本。

顺便说一句，编辑器也不会在悬停时显示此类的内容。

我有一个自定义按钮组件和以下道具的一些基本控件；按钮种类、大小和子项（按钮文本）。

控制装置按预期工作。但是，我喜欢将控件命名从“children”更改为“label”。

我将如何实现这一目标？

谢谢！

export default {
  title: 'Components/Button',
  component: Button,
  argTypes: {
     kind: {
      options: ['primary', 'secondary', 'tertiary', 'danger', 'ghost'],
      control: { type: 'select' }
    },
    size: {
      options: ['default', 'sm', 'md', 'lg'],
      control: { type: 'select'},
    },
    },
};

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

export const Buttons = Template.bind({});
Buttons.args = {
  kind: 'primary',
  children: 'Button',

};

我在 React 应用程序中使用Navigator online来确定客户端是否在线。当客户端离线时，我显示离线后备组件。现在我已经将组件设为 Pure - 因此我可以通过将在线状态作为属性传递来在 Storybook 中显示它。但这并不总是合适的解决方案。

所以我想知道如何模拟 Storybook 中单个故事的全局（窗口）变量？我发现唯一的 - 非常脏的解决方案 - 看起来如下：

ClientOffline.decorators = [
  (Story) => {
    const navigatiorInitally = global.navigator

    // I am overwritting the navigator object instead of directly the 
    // online value as this throws an 'TypeError: "x" is read-only' Error
    Object.defineProperty(global, 'navigator', {
      value: { onLine: false },
      writable: false,
    })

    useEffect(() => {
      return () => {
        Object.defineProperty(global, 'navigator', {
          value: navigatiorInitally,
          writable: false,
        })
       location.reload() //needed because …

我正在尝试将徽标图像（svg）添加到我的导航组件中。我正在使用 Storybook 和 next.js。

我遵循Storybook中的配置，但图像未加载到 Storybook 组件中。

为什么是这样？

// .storybook/main.js

module.exports = {
  stories: [],
  addons: [],
  staticDirs: ['../public/images'],
};

// Nav.stories.mdx
import {Nav} from './Nav'
import {Canvas, Meta, Story} from '@storybook/addon-docs'

<Meta title="micro/Nav" component={Nav} />

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

# The Nav

Unauthenticated user

<Canvas>
  <Story name="nav-unauthenticated">{Template.bind({})}</Story>
</Canvas>

//Nav.js
import logo from '../../public/images/logo.svg'

export const Nav = () => {
  return(
    <img {...logo} alt='logo'/>
  )
}

徽标未出现在导航中

代码的起点 从figma看应该是什么样子

我需要创建一个通知号码，如第二张图片所示，这是我在 Figma 中的模型。至于现在我那三个徽章是这样写的。

            <div className="mt-3">
              <span className="bg-indigo-100 text-indigo-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-indigo-200 dark:text-indigo-900">
                Indigo
              </span>
              <span className="bg-purple-100 text-purple-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-purple-200 dark:text-purple-900">
                Purple
              </span>
              <span className="bg-pink-100 text-pink-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-pink-200 dark:text-pink-900">
                Pink
              </span>
            </div>

我正在使用 Storybook、Tailwind UI 和 React (18)。

故事书-v 6.5.10

const dashStyles = [
    'Solid',
    'ShortDash',
    'Dot',
    'Dash',
    'LongDash',
];

AreaChart.args = {
    series: [
        {
            color: '#d987de',
            data: [60, 20, 70, 10, -30, 0],
            name: 'Channel 1',
            dashStyle: dashStyles[0]
        },
        {
            color: '#01ecc5',
            data: [10, 15, 10, 9, 5, -10],
            name: 'Channel 2',
            dashStyle: dashStyles[0]
        }
    ],
};

我想用 argTypes {control: 'select'} 或名称单独的 {control: 'text'} 控制 series[i].dashStyle

我在我的 Angular 项目中安装了 Storybook，一切正常，直到今天，当我运行时，yarn install这个 Storybook 构建失败并出现以下 TS 错误

node_modules/@storybook/api/dist/ts3.9/modules/shortcuts.d.ts:55:18 - 错误 TS2430：接口“Event”错误地扩展了接口“KeyboardEvent”。呃！属性“目标”的类型不兼容。呃！类型 '{ tagName: string; 中缺少属性 'prototype' addEventListener(): 无效; 删除事件监听器（）：布尔值；调度事件（事件：事件）：布尔值；getAttribute(attr: string): 字符串 | 无效的; }'，但在“EventTarget”类型中是必需的。呃！呃！55 导出接口Event extends KeyboardEvent { 错误！~~~~~ 错误！呃！node_modules/typescript/lib/lib.dom.d.ts:5144:5 错误！第5144章 原型：EventTarget；呃！~~~~~~~~~ 错误！“原型”在这里声明。块引用

包.json

  "name": "tour",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
    "storybook": "npm run docs:json && start-storybook -p 6006",
    "build-storybook": "npm run …

尝试使用 Storybook 渲染自定义独立 Angular Material 选择组件。

它产生错误：

ERROR Error: Unexpected synthetic property @transitionMessages found. Please make sure that:\n  - Either `BrowserAnimationsModule` or `NoopAnimationsModule` are imported in your application.\n  - There is corresponding configuration for the animation named `@transitionMessages` defined in the `animations` field of the `@Component` decorator (see https://angular.io/api/core/Component#animations).\n    at checkNoSyntheticProp (platform-browser.mjs:659:1)\n    at NoneEncapsulationDomRenderer.setProperty (platform-browser.mjs:642:1)\n    at elementPropertyInternal (core.mjs:10801:1)\n    at Module.\xc9\xb5\xc9\xb5property (core.mjs:13521:1)\n    at MatFormField_div_17_Template (form-field.mjs:26:1)\n    at executeTemplate (core.mjs:10441:1)\n    at refreshView (core.mjs:10326:1)\n    at refreshEmbeddedViews (core.mjs:11339:1)\n    at refreshView (core.mjs:10350:1)\n    at refreshComponent …