Storybook

typescript - 在 VUE 中使用 JSX 语法时，Storybook 无法编译

我正在做一个简单的评估，需要我在 VUE 2 中使用 TypeScript 和 JSX 语法。我还需要集成 Storybook 来测试我的 UI 组件。我能够使用 VUE 的简单模板语法运行测试。但是，如果我在 VUE 组件中使用 JSX 语法并尝试运行 Storybook，我会得到以下错误。

ERROR in ./src/components/Home.tsx 59:16 Module parse failed: Unexpected token (59:16) File was processed with these loaders: * ./node_modules/@storybook/vue/node_modules/ts-loader/index.js You may need an additional loader to handle the result of these loaders. | }, | render() { > return (<div class={styles.co

阅读更多 →

javascript - 除非我将 onClick 添加到 argTypes，否则 Storybook 的 onClick 事件不会被记录

为了在 Storybook 的 Actions 选项卡中记录 onClick 事件，我必须取消注释 SimpleButton.stories.tsx 文件中的 argTypes: { onClick: {} }。我的问题是，为什么我必须这样做？它不能自动推断 onClick 是一个动作吗，因为在 .storybook/preview.js 文件中，parameters 包含属性 actions: { argTypesRegex: "^on[A-Z].*" }？

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

简单按钮.tsx

import { VFC } from "react"; interface IProps { /** Text to s

阅读更多 →

reactjs - 将 Storybook 与 TypeScript 集成

我正在尝试将一个用 TypeScript 编写的非常简单的 React 应用与 Storybook 集成。我尝试过关注 Storybook 问题列表上的几个问题，但无法确定最新的信息。当我尝试运行 Storybook 时，出现了以下错误：

ERROR in ./.storybook/config.js Module not found: Error: Can't resolve '../stories' in 'react-mobx-mui-ts-seed/.storybook' @ ./.storybook/config.js 6:4-25

有人可以指出我可能出错的地方吗？完整的项目可以在 Github 上找到，链接如下：https://github.com/archfirst/react-mobx-mui-ts-seed

这是我用于 Storybook 的 webpack.config.js：

const path = require('path'); const SRC_

阅读更多 →

typescript - Storybook 的 Webpack：找不到具有 .web、.ios 或 .android 扩展名的 ts 文件的模块

我正在尝试使用 Storybook，配合 expo 和 react-native-web。每当我尝试使用 expo 模块时，我都会收到以下错误

ERROR in ./node_modules/expo-linear-gradient/build/LinearGradient.js Module not found: Error: Can't resolve './NativeLinearGradient' in '/Fleyver/front/node_modules/expo-linear-gradient/build' @ ./node_modules/expo-linear-gradient/build/LinearGradient.js 1:1373-1406

它无法解析的文件有多个扩展名：.web.ts、.ios.ts 和 .android.ts，但没有直接的 .ts 扩展名

作为初学者，我在不知道从哪里开始解决这个问题上感到困难。我正在使用这个模板开始，一切都正常工作，直到使用expo模块时出现

阅读更多 →

reactjs - Storybook + React Native + Typescript webpack/loader 问题

在按照两者操作后，尝试运行一个storybook + RN + Typescript项目时

和

我得到：

ModuleParseError: Module parse failed: Unexpected token (10:12) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| 从'./utils/shims'导入 {dontSetMe}； | 从'./DraggableCore'导入 DraggableCore；

import type {ControlPosition, PositionOffsetControlPosition, DraggableBounds, Drag

阅读更多 →

reactjs - Storybook 热重载导致 hooks 错误

当我的 Storybook 热重载时，我收到以下错误。首次加载时它运行正常：

TypeError: Cannot read property 'hooks' of undefined at StoryStore.cleanHooks (http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:6197:22) at renderMain (http://localhost:9009/vendors~main.0e777466815571a0333e.bundle.js:8181:22) at StoryStore.renderUI (http://l

阅读更多 →

reactjs - React Storybook 复选框更改处理程序不起作用

我正在使用 React、TypeScript、Storybook 和 Styled-Components 创建一个复选框组件，在参考了这个教程：building-a-checkbox-component-with-react-and-styled-components 之后。我不得不调整代码，因为我使用的是 FunctionComponent，但我遇到了 change 处理器的问题。我无法选中或取消选中复选框，它似乎是只读的，而且我不确定我哪里出错了。以下是我的代码：

Checkbox.tsx

import React from 'react

阅读更多 →

reactjs - 使用 TypeScript 的 Storybook 不将 tsx 文件识别为 TypeScript 文件 - '解析错误：缺少分号'

我就是不明白为什么会发生这种事，我尝试修复它几周，最终还是在我的项目中回到了 JavaScript。

这是重现该错误的分支。这是完整的项目。在 ./examples 目录下，你会看到一个使用 React-React-App、TypeScript 和 Storybook 运行的示例应用。在里面你会看到 src/stories/Xarrow.stories.tsx 文件，当运行 yarn storybook 时，会抛出解析错误：缺少分号。，就像我尝试在 JavaScript 文件中放置 TypeScript 时一样。

阅读更多 →

reactjs - Docker MonoRepo 使用 Storybook 时出现 '找不到模块 react/package.json'

我对 Docker 还比较新，今天我尝试使用以下设置将我们的 Lerna monorepo 容器化：

Docker 文件

FROM node:14.13.1-alpine Add node modules bin to path ENV PATH /app/node_modules/.bin:$PATH ENV PATH /app/packages/core/node_modules/.bin:$PATH WORKDIR /app Install app deps COPY ./ ./ RUN yarn install RUN yarn bootstrap RUN cd packages/core && yarn install && cd ./node_modules/react && yarn link && cd ../../../../ && yarn link react RUN cd packages/core && yarn

阅读更多 →

javascript - 在 Storybook React 中使用 tsx 和 mdx

我正在尝试实现这个：

但是我的故事被分解成 mdx 和 tsx 文件。

到目前为止，我的 mdx 文件看起来是这样的：

import { Meta, Story, Canvas, Preview, Props, ArgsTable } from '@storybook/addon-docs'; import { Button, Icons } from '../..';  export const ButtonWithoutIcon = (args) => <Button {...args}>Click</Button>; export

阅读更多 →