addDecorator((story) => ( <Suspense fallback={<h1>Loading...</h1>}> <ApolloProvider client={client}> <BrowserRouter> <ThemeProvider theme={theme}>{story()}</ThemeProvider> </BrowserRouter> </ApolloProvider> </Suspense> ))
// Use a mocked version of the Redux store provided in a decorator: storiesOf("InboxScreen", module) .addDecorator(story => <Provider store={store}>{story()}</Provider>) .add("default", () => <PureInboxScreen />) .add("error", () => <PureInboxScreen error="Something" />);
// addDecorator() allows us to add some “context” to the rendering of each task. // In this case we add padding around the list to make it easier to visually verify. // Decorators are a way to provide arbitrary wrappers to stories. // In this case we’re using a decorator to add styling. They can also be used to // wrap stories in “providers” –i.e. library components that set React context. storiesOf("TaskList", module) .addDecorator(story => <div style={{ padding: "3rem" }}>{story()}</div>) .add("default", () => <PureTaskList tasks={defaultTasks} {...actions} />) .add("withPinnedTasks", () => ( <PureTaskList tasks={withPinnedTasks} {...actions} /> )) .add("loading", () => <PureTaskList loading tasks={[]} {...actions} />) .add("empty", () => <PureTaskList tasks={[]} {...actions} />);