storybookjs/storybook

Blocks: Clean up `useGlobals` for docs and export it

开放

#12,982 创建于 2020年11月2日

 (18 条评论) (12 个反应) (0 位负责人)TypeScript (10,058 个派生)batch import
addon: docsbugcorehas workaroundhelp wantedtriage:reviewed

仓库指标

星标
 (89,909 个星标)
PR 合并指标
 (平均合并 7天 22小时) (30 天内合并 184 个 PR)

描述

Describe the bug I need to access the globals set by toolbar addon in the custom DocPage I have set for the docs addon. The toolbar addon documentation instructs to use the useGlobals hook to consume the globals within an addon. However, when I try to use the useGlobals hook in the DocPage it throws an error:

Uncaught TypeError: Cannot read property 'updateGlobals' of undefined
    at useGlobals (index.js:550)
    at page (button.stories.tsx:67)
    at renderWithHooks (react-dom.development.js:16260)
    at mountIndeterminateComponent (react-dom.development.js:18794)
    at beginWork$1 (react-dom.development.js:20162)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24698)

To Reproduce Steps to reproduce the behavior:

  1. Add a custom doc page globally or on component or story level
  2. Use the useGlobals hook in the custom docs page
  3. Go to storybook and the docs tab
  4. Check the browser dev tools console for the error

Expected behavior Expected to render the doc page without errors and have access to the globals.

Code snippets Here's the code from my DocsPage.tsx file:

import * as React from "react";

import {
  ArgsTable,
  Description,
  PRIMARY_STORY,
  Primary,
  Stories,
  Subtitle,
  Title,
} from "@storybook/addon-docs/blocks";

import { useGlobals } from "@storybook/api";

export const DocsPage = () => {
  const [globals] = useGlobals();

  return (
      <Title />
      <Subtitle />
      <Description />
      <Primary />
      <ArgsTable story={PRIMARY_STORY} />
      <Stories />
  );
};

And here's how I set the doc page in preview.ts file with addParameters function:

addParameters({
  viewport,
  options: { storySort, theme },
  controls: { hideNoControlsWarning: true },
  docs: {
    page: DocsPage
  },
});

System Environment Info:

System: OS: macOS Mojave 10.14.6 CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz Binaries: Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node Yarn: 1.22.4 - ~/.yarn/bin/yarn npm: 6.14.5 - ~/.nvm/versions/node/v12.18.2/bin/npm Browsers: Chrome: 86.0.4240.111 Firefox: 72.0.2 Safari: 14.0

Additional Info I'm using @storybook/core@6.0.27 and @storybook/addon-essentials@6.0.27.

贡献者指南