storybookjs/storybook

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

オープン

#12,982 opened on 2020/11/02

 (18 件のコメント) (12 件のリアクション) (0 人の担当者)TypeScript (10,058 件のフォーク)batch import
addon: docsbugcorehas workaroundhelp wantedtriage:reviewed

Repository metrics

Stars
 (89,909 個のスター)
PR merge metrics
 (PR metrics pending)

説明

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.

コントリビューターガイド