Setting up Storybook on Gatsby/Typescript

storybook-gatsby.ts

// 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