用于设置服务器 URL 的 Storybook 插件

Question

我们正在使用故事书来制作 uild ui 组件。 Ui 组件与某些数据相关，在本例中为 REST-Server。在操作中我可以添加自定义数据，但我想通过 axios 加载数据。我为此实现了小型 API-library。

问题：是否可以从故事书UI设置故事书的全局参数？喜欢服务器 url 和身份验证令牌?

Answer 1

您可以使用 Environment Variables，或者只在 .storybook/config.js 文件中添加全局装饰器。

这是我用来在所有故事中设置 GraphQL 客户端的实际示例：

import React from 'react';
import { configure, addDecorator } from '@storybook/react';
import { ApolloProvider } from '@apollo/react-hooks';
import ApolloClient from 'apollo-boost';
import GlobalStyle from '../src/styles/GlobalStyle.styles';

const client = new ApolloClient({
  uri: process.env.REACT_APP_GRAPHQL_URI || 'https://core.gissy.now.sh/graphql',
});

addDecorator(S => (
  <ApolloProvider client={client}>
    <GlobalStyle />
    <S />
  </ApolloProvider>
));

// automatically import all files ending in *.stories.jsx
configure(require.context('../src', true, /\.stories\.jsx$/), module);

Answer 2

现在可以使用插件了：https://github.com/ArrayKnight/storybook-addon-headless

Storybook Addon Headless 通过自定义查询将 Restful and/or GraphQL API 连接到您的故事。查询可以具有经过验证的变量，并且可以全局定义，每个故事文件或每个故事。

示例：https://storybook-addon-headless.netlify.com/?path=/story/examples

用于设置服务器 URL 的 Storybook 插件

Storybook add on for setting server urls

reactjs

storybook