Skip to content

Instantly share code, notes, and snippets.

@bsgreenb
Last active May 5, 2020 21:43
Show Gist options
  • Save bsgreenb/3968d1664395c72e73df5020ddb275d2 to your computer and use it in GitHub Desktop.
Save bsgreenb/3968d1664395c72e73df5020ddb275d2 to your computer and use it in GitHub Desktop.
Setting up Storybook on Gatsby/Typescript
// Pre-req step: gatsby-plugin-typescript, storybook cli installation per docs...
// Then, here's custom config to support Gatsby/Typescript..:
// .storybook/main.ts
export = {
stories: ["../src/ui/**/*.stories.ts", "../src/ui/**/*.stories.tsx"],
addons: [
"@storybook/preset-create-react-app",
"@storybook/addon-a11y",
"@storybook/addon-actions",
"@storybook/addon-knobs",
"@storybook/addon-links",
"@storybook/addon-storysource",
{
name: "@storybook/addon-docs",
options: {
configureJSX: true,
},
},
"@storybook/addon-viewport",
],
};
// .storybook/preview.tsx
import React from "react";
import { addDecorator, addParameters } from "@storybook/react";
import { withA11y } from "@storybook/addon-a11y";
import { action } from "@storybook/addon-actions";
// simple layout component that generates a mocked Global Style in Styled components
import GlobalStyle from "../src/ui/GlobalStyle";
// system wide decorator that all of the stories will use
addParameters({
options: { panelPosition: "bottom" },
viewport: {
viewports: [
{
name: "Testing breakpoint",
styles: {
width: `600px`,
height: "768px",
},
},
],
},
});
/*
Gatsby internal mocking to prevent unnecessary errors in storybook testing environment
*/
/* eslint-disable @typescript-eslint/no-explicit-any */
declare const global: any;
declare const window: any;
/* eslint-enable @typescript-eslint/no-explicit-any */
global.___loader = {
enqueue() {
/**/
},
hovering() {
/**/
},
};
global.__PATH_PREFIX__ = "";
// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to if it wasn't inside a storybook
window.___navigate = pathname => {
action("NavigateTo:")(pathname);
};
/* End of Gatsby overrides */
// system wide decorator to allow the addon to be used
addDecorator(withA11y);
//
// system wide decorator that will inject the global style component into Storybook
// the story function in conjunction with the children prop will make so that all the "descendants"
// will inherit the styles
addDecorator(story => (
<>
<GlobalStyle />
{story()}
</>
));
// package.json - devDependencies to add
"@babel/core": "^7.9.0",
"@storybook/preset-create-react-app": "2.1.1",
"@storybook/addon-a11y": "^5.3.18",
"@storybook/addon-actions": "^5.3.18",
"@storybook/addon-docs": "5.3.18",
"@storybook/addon-knobs": "^5.3.18",
"@storybook/addon-links": "^5.3.18",
"@storybook/addon-storysource": "^5.3.18",
"@storybook/addon-viewport": "^5.3.18",
"@storybook/addons": "^5.3.18",
"@storybook/preset-create-react-app": "2.1.1",
"@storybook/react": "^5.3.18",
"babel-loader": "^8.1.0",
"babel-preset-react-app": "^9.1.2",
"react-scripts": "^3.4.1",
// .eslintignore
// Don't ignore .storybook/
!.storybook
// .prettierignore
!.storybook
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment