问题标签 [react-styleguidist]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
143 浏览

node.js - react-styleguidist 的问题 - 解决节点依赖关系

我正在使用 React Styleguidedist 为我的 react 组件生成文档。在构建时,我们收到以下错误(纱线)。

错误“react-styleguidist#react-docgen-displayname-handler#react-docgen@2.x”不满足“react-docgen@3.0.0-beta6”的找到匹配

任何指针都会帮助我。

0 投票
1 回答
148 浏览

laravel - 无法与 laravel 开发服务器一起运行 styleguidist

我正在尝试记录我的React 组件,并且我正在运行styleguidist 服务器Laravel 开发服务器,但styleguidist 服务器因此错误而崩溃。

我已将styleguidist 服务器配置为在端口6060上运行以解决此问题,并且仅成功运行了一次服务器。之后我又遇到了这个问题。

我该如何解决这个问题?

0 投票
1 回答
2058 浏览

javascript - 如何在 react-styleguidist 中添加具有依赖关系的组件示例

我想使用“react-styleguidist”记录一个ButtonGroup渲染组件的组件。Button

我有一个 styleguidist webpack 配置,如下所示:

我知道我不需要定义常用的加载器和插件,因为 styleguidist 已经在内部添加了它们

在 内部src/components/,允许styleguidist获取我的组件的目录结构看起来有点像这样:

案例一

在我Readme.mdButtonGroup目录中:

当我这样做时,我styleguide有一个错误说:

案例二

如上图所示,我已尝试将信息包含在example.js内部目录中,该文件包含:ButtonGroup

现在示例组件被导入到Readme.md

引发错误:

0 投票
2 回答
615 浏览

javascript - 如何使用带有 Apollo/GraphQL 的 Styleguidist 进行配置

我正在尝试使用 GraphQL 为 Styleguidist 填充假数据。我正在使用 Express 制作我的 GraphQL 服务器,但我不确定如何将 Apollo 连接到 Styleguidist?这些示例使用 index.js 文件并将根组件包装在 Apollo 的标签中。

我不确定 Styleguidist 是如何工作的,我不知道 index.js 文件在哪里。

有通过webpack配置Styleguidist的方法,但是不知道怎么用webpack来使用Apollo。

0 投票
1 回答
1531 浏览

reactjs - React Styleguidist 和 SASS

所以我的设置很简单

styleguide.config.js

每当我运行 npm run styleguide 时,我都会收到此错误:

模块解析失败:意外字符 @ 您可能需要适当的加载程序来处理此文件类型。

bootstrap.scss看起来像这样:

我知道我需要添加 SASS-loader 但我发现的示例使用不同的上下文,所以我还不能真正弄清楚它们。

当我运行应用程序本身而不是样式指南时,ps SASS 在 React Styleguide 之外工作。

0 投票
1 回答
1172 浏览

reactjs - 当组件有孩子时反应 Styleguidist 失败

我们使用 React Styleguidist 从项目组件的定义中生成文档。我们计划通过 Github 页面提供此类文档。

我们的代码片段:

按钮.tsx

自述文件.md

styleguidist build通过我们设置的 NPM 脚本运行命令后,一切正常。我们能够看到按钮,其内容回退到默认的“按钮文本”。如果我们将 markdown 文件更改为 include <Button> Default </Button>,则生成文档的开发版本可以正常工作(并且其按钮预览显示预期的“默认值”。当我们检查文档的构建版本时,我们会收到以下错误:ReferenceError: t is not defined。没有按钮显示在预览中,只有错误消息。

Styleguidist 生成文档的工作版本和错误版本之间的唯一区别是(据我们所见)在 markdown 自述文件中包含或不包含 Button 组件的子组件。

我们在这里做一些公然错误的事情吗?任何帮助或提示表示赞赏:)

0 投票
1 回答
437 浏览

reactjs - 如何将普通文档与 React Styleguidist 混合

我想用 markdown 记录我的代码库的其他功能和部分,并将它们解析并显示在我文档的不同部分。我怎样才能做到这一点?

将它们直接导入styleguide.config.js会导致整个文件被解析为文本。

0 投票
0 回答
1051 浏览

reactjs - 在 React Styleguidist 中从外部文件导入 propTypes

我想在多个组件中重用一组通用的 PropTypes。就像是:

我已将此对象添加到文件中,并将其导出为命名的 export textProps

然后我将它导入到一个组件文件中:

而组件文件styled-components用来定义一个组件:

问题是导入时 Styleguidist 指南中未显示“道具和方法”部分textProps

当我textPropsH1文件中定义时,它按预期工作。

有没有办法定义一组通用的 PropType,将它们导入组件,并让它们出现在 Styleguidist 指南中?

0 投票
0 回答
544 浏览

webpack-4 - 如何使用 react-styleguidist 7 和 Webpack 4 加载本地 CSS

我想加载本地 3rd 方 css(例如字体真棒图标)作为我的样式指南的一部分。由于许多组件使用相同的 CSS,我希望它能够自动加载并作为静态构建的一部分包含在内。

我决定使用 mini-css-extract-plugin 来完成这项工作,但 styleguidist 维护者 @sapegin 基本上告诉我,我不知道自己在做什么,并且在不提供任何帮助的情况下停止向他抱怨。所以我希望 stack-overflow 社区能帮我指出正确的方法:

styleguidist 讨论:https ://github.com/styleguidist/react-styleguidist/pull/985#issuecomment-389422909

我的 github 存储库演示了三种方法: https ://github.com/bugzpodder/styleguidist-local-css-example/tree/master

master:使用 mini-css-extract-plugin + 需要配置,构建和 devserver 按预期工作。

要求:没有 mini-css-extract-plugin 我无法让它工作

模板:devserver 有效,但 build 无效。我能想到的唯一解决方法是使用 publicPath 并在那里复制 css,但 publicPath 是不允许的,除非你危险地更新webpackconfig https://github.com/styleguidist/react-styleguidist/pull/956

0 投票
1 回答
916 浏览

webpack - Styleguidist - 使用开发 webpack 配置构建

styleguidist server完美运行(非常感谢)

我现在想构建静态 html 文件以粘贴在 github 页面中,但是..

styleguidist build似乎源自 favicons-webpack-plugin 的throwsTypeError: Cannot read property 'tapAsync' of undefined仅在我的生产 webpack 配置中使用。

似乎styleguidist build-p标志传递给 webpack(或以其他方式导致使用此配置),但我更愿意只使用 dev 配置构建。

任何人都知道如何或是否可能?