标签: storybook

我目前很难尝试为 Quasar v2（使用 Vue 3）配置 Storybook。

这是我的依赖项package.json：

"dependencies": {\n    "@quasar/extras": "^1.0.0",\n    "core-js": "^3.6.5",\n    "quasar": "^2.0.0-beta.1",\n    "vue-i18n": "^9.0.0-beta.0"\n},\n"devDependencies": {\n    "@babel/core": "^7.13.14",\n    "@quasar/app": "^3.0.0-beta.1",\n    "@storybook/addon-actions": "^6.2.1",\n    "@storybook/addon-essentials": "^6.2.1",\n    "@storybook/addon-links": "^6.2.1",\n    "@storybook/vue3": "^6.2.1", # \xe2\x9c\x85 storybook for vue3\n    "@types/node": "^10.17.15",\n    "@typescript-eslint/eslint-plugin": "^4.16.1",\n    "@typescript-eslint/parser": "^4.16.1",\n    "babel-loader": "^8.2.2",\n    "prettier": "^2.2.1",\n    "vue-loader": "^16.2.0" # \xe2\x9c\x85 the specific vue loader needed\n    "babel-eslint": "^10.0.1",\n    "eslint": "^7.14.0",\n    "eslint-config-prettier": "^8.1.0",\n    "eslint-plugin-vue": "^7.0.0"\n}\n

这.storybook/main.js：

module.exports = {\n  // the path may be precised …

我正在构建一个 UI 库。

有人将framer-motion 与故事书一起使用吗？

它在故事书中工作正常，但在构建环境中出现错误。

有些人建议降级，但这对我不起作用。

有人有和我类似的问题吗？

我正在使用Storybookv6.5.9 渲染我的 React/MUI 组件。一切正常，但我无法让描述或默认值出现在“控件”选项卡下的画布中：

查看“文档”选项卡时，描述看起来不错：

默认导出中没有任何内容，我也没有更改任何开箱即用的默认选项。

我正在 React Native 项目中设置 Storybook，但是显示预览组件的右侧面板没有显示任何内容，在我看到的一些视频教程中，这没有发生。我该如何解决这个问题？还需要一些配置吗？

在这里查看更多信息： https: //i.stack.imgur.com/ev9N4.png

我有我的组件和故事书故事文件，它没有错误地呈现，但它不能拖动。我将我的研究基于react-use-gesture Github 中的这个示例。我注意到，如果我使用 create-react-app 启动一个新项目并将此代码粘贴到那里，它可以正常工作，但是使用 storybook 就行不通了。我还注意到，在我的代码中，元素看起来像而不是（来自有效示例的代码），我一直在研究，但找不到解决方案，所以我来寻求这个很棒的社区的帮助。<div style="x: 0px; y: 0px;"></div><div style="transform: none;"></div>

目标：在反应故事书上有一个可拖动的卡片组件故事，使用react-spring和react-use-gesture。

预期结果：能够拖动组件。

实际结果：组件不可拖动

错误消息：无。

组件的代码：

import React from 'react'
import { useSpring, animated } from 'react-spring'
import { useDrag } from 'react-use-gesture'

export function Card() {
  const [props,
    set] = useSpring(() => ({ x: 0, y: 0, scale: 1 }))
  const bind = useDrag(({ down, movement: [x, y] }) => {
    set({ x: down …

它以某种方式正常工作react-scripts start。但是当尝试通过故事书查看各个组件时，它会抛出一个错误，就像上面标题中所说的那样。

这是我的代码。

index.tsx

import React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport \'./index.css\';\nimport App from \'./App\';\nimport * as serviceWorker from \'./serviceWorker\';\n\n\nReactDOM.render(<App />, document.getElementById(\'root\'));\n

App.tsx

import React from \'react\';\nimport\xc2\xa0{\xc2\xa0BrowserRouter,\xc2\xa0Route,\xc2\xa0Switch, Link\xc2\xa0}\xc2\xa0from\xc2\xa0"react-router-dom";\nimport { Register } from \'./pages/register/register\'\nimport { Login } from \'./pages/login/login\'\nimport { Home } from \'./pages/home/home\'\n\nconst App: React.FC = () => {\n  return (\n    <div id="app-root">\n      <BrowserRouter>\n        <Switch>\n          <Route path="/" exact component={Home} />\n          <Route path="/register" exact component={Register} />     \n          <Route path="/login" exact component={Login} />\n        </Switch>\n      </BrowserRouter>\n …

我想使用 Typescript 和 MDX 创建故事，因此我的main.js：

module.exports = {
  stories: ['../src/**/*.stories.(mdx|ts)'],
  addons: ['@storybook/addon-docs', 'storybook-addon-preview']
};

但是我不想在“画布”旁边有“文档”选项卡。我该如何删除它？如果没有'@storybook/addon-docs'MDX，则不会显示故事。

I\xc2\xb4m 正在寻找通过 next-translate 将静态文本加载到故事书中的方法。

我的代码看起来像这样，但它 \xc2\xb4s 加载我的语言环境文件，但没有正确编写它们。

这是故事书预览.js：

import '../src/styles/global/global.scss';\n\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport { ThemeProvider } from '@material-ui/core/styles';\nimport theme from '../src/utils/theme';\nimport I18nProvider from 'next-translate/I18nProvider';\n\nimport commonCS from '../locales/cs/common.json';\n\nexport const decorators = [(Story) => themeDecorator(Story)];\n\nconst themeDecorator = (Story) => {\n    console.log(commonCS.homepage_title);\n    return (\n        <ThemeProvider theme={theme}>\n            <CssBaseline />\n            <I18nProvider lang={'cs-CS'} namespaces={{ commonCS }}>\n                <Story />\n            </I18nProvider>\n        </ThemeProvider>\n    );\n};\n\nexport const parameters = {\n    actions: { argTypesRegex: '^on[A-Z].*' },\n    controls: { expanded: true },\n};\n

这是我的故事书故事：

import React from 'react';\nimport HeaderContact …

我正在使用 Storybook 的action()在组件上创建事件侦听器。

这似乎有效：

import { action } from '@storybook/addon-actions';

...

<custom-link-component>
  <a 
    href="https://google.com"
    onBlur={action('blur')}
  >
    Google
  </a>
</custom-link-component>

Storybook 在“操作”窗格中记录事件。然而，代码有点奇怪，因为它action()是调用的，而不是传递的，这不是事件通常的工作方式。这可能稍后会有意义。

这不起作用，因为该操作未记录在故事书中：

import { action } from '@storybook/addon-actions';

...

<custom-link-component>
  <a 
    href="https://google.com"
    onBlur={(e) => {console.log(e); action('blur');}}
  >
    Google
  </a>
</custom-link-component>

唯一的区别是action()在匿名函数内部调用。console.log()然而，射击正确。

我怀疑我在这里遗漏了一些基本的东西，我只是不确定是什么。为什么action('blur')在第一个示例中调用？为什么action('blur')在第二个示例中似乎不起作用？

我在 create-react-app 中创建了一本 Storybook，我想为其添加一个字体。我的组件正在使用 css-modules（也许这是有用的信息）。

所以，我在 .storybook 中创建了一个 webpack.config.js ，它看起来像这样：

module.exports = async ({ config }) => {
  config.module.rules.push({
    test: /\.(woff|woff2|eot|ttf|svg)$/,
    use: [
      {
        loader: 'file-loader',
        query: {
          name: '[name].[ext]',
        },
      },
    ],
    include: path.resolve(__dirname, '../'),
  });

  return config;
};

在 Preview-head.html （在 .storybook 中）我有

<style>
    @font-face {
      font-family: 'WalsheimPro';
      font-style: normal;
      font-weight: 400;
      src: url('shared/fonts/GTWalsheimProMedium.ttf') format('truetype');
    }
</style>

我的字体不起作用，知道为什么吗？您还需要其他信息来帮助我吗？谢谢 ：）