setup storybook

make storybook work with tailwind

implement storybook for component with relay fragment

Author: Roshan Jossy

.eslintrc.json

@@ -5,6 +5,7 @@
   },
   "extends": [
     "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended",
     "next",
     "next/core-web-vitals",
     "prettier"

.storybook/RelayStorybook.tsx

@@ -0,0 +1,37 @@
+import { ReactNode, useEffect, useState } from 'react'
+import { createMockEnvironment, MockPayloadGenerator } from 'relay-test-utils'
+
+import { IEnvironment } from 'relay-runtime'
+import RelayEnvironmentProvider from '../src/lib/RelayEnvironmentProvider'
+import RelayModernEnvironment from 'relay-runtime/lib/store/RelayModernEnvironment'
+
+type RelayStorybookProps = {
+  children: ReactNode
+  mockResolvers?: Record<string, unknown>
+}
+export const RelayStorybook = ({
+  children,
+  mockResolvers = {},
+}: RelayStorybookProps) => {
+  const [environment] = useState(() => createMockEnvironment())
+
+  useEffect(() => {
+    try {
+      environment.mock.resolveMostRecentOperation((operation) =>
+        MockPayloadGenerator.generate(operation, mockResolvers)
+      )
+    } catch (err) {
+      // handle no operation
+      // eslint-disable-next-line
+      console.log({
+        err,
+      })
+    }
+  }, [])
+
+  return (
+    <RelayEnvironmentProvider environment={environment}>
+      {children}
+    </RelayEnvironmentProvider>
+  )
+}

.storybook/connectionFromArray.ts

@@ -0,0 +1,27 @@
+export const connectionFromArray = <T extends object>(arr: T[] = []) => {
+  if (!arr || arr.length === 0) {
+    return {
+      edges: [],
+      totalCount: 0,
+      count: 0,
+      endCursorOffset: 0,
+      startCursorOffset: 0,
+      pageInfo: {
+        hasNextPage: false,
+        hasPreviousPage: false,
+      },
+    }
+  }
+
+  return {
+    edges: arr.map((node) => ({ node })),
+    totalCount: arr.length,
+    count: arr.length,
+    endCursorOffset: arr.length,
+    startCursorOffset: 0,
+    pageInfo: {
+      hasNextPage: false,
+      hasPreviousPage: false,
+    },
+  }
+}

.storybook/main.js

@@ -0,0 +1,27 @@
+module.exports = {
+  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
+  /** Expose public folder to storybook as static */
+  staticDirs: ['../public'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    'storybook-css-modules-preset',
+    {
+      /**
+       * Fix Storybook issue with PostCSS@8
+       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
+       */
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          implementation: require('postcss'),
+        },
+      },
+    },
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+}

.storybook/preview.js

@@ -0,0 +1,45 @@
+import '../src/styles/globals.css'
+import * as NextImage from 'next/image'
+
+const BREAKPOINTS_INT = {
+  xs: 375,
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1536,
+}
+
+const customViewports = Object.fromEntries(
+  Object.entries(BREAKPOINTS_INT).map(([key, val], idx) => {
+    console.log(val)
+    return [
+      key,
+      {
+        name: key,
+        styles: {
+          width: `${val}px`,
+          height: `${(idx + 5) * 10}vh`,
+        },
+      },
+    ]
+  })
+)
+
+// Allow Storybook to handle Next's <Image> component
+const OriginalNextImage = NextImage.default
+
+Object.defineProperty(NextImage, 'default', {
+  configurable: true,
+  value: (props) => <OriginalNextImage {...props} unoptimized />,
+})
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  viewport: { viewports: customViewports },
+}

package.json

@@ -10,7 +10,9 @@
     "check-lint": "eslint . --ext ts --ext tsx --ext js",
     "check-types": "tsc --pretty --noEmit",
     "format": "prettier --write .",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "storybook": "start-storybook -p 3333",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "@editorjs/code": "^2.7.0",
@@ -39,6 +41,16 @@
     "string-strip-html": "^9.1.12"
   },
   "devDependencies": {
+    "@babel/core": "^7.18.6",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-interactions": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-webpack5": "^6.5.9",
+    "@storybook/manager-webpack5": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@storybook/testing-library": "^0.0.13",
     "@tailwindcss/typography": "^0.5.2",
     "@types/formidable": "^2.0.5",
     "@types/multiparty": "^0.0.33",
@@ -50,12 +62,14 @@
     "@typescript-eslint/eslint-plugin": "^5.28.0",
     "@typescript-eslint/parser": "^5.28.0",
     "autoprefixer": "^10.4.2",
+    "babel-loader": "^8.2.5",
     "babel-plugin-relay": "^13.0.2",
     "eslint": "^8.18.0",
     "eslint-config-next": "12.0.10",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^2.7.1",
     "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-storybook": "^0.5.13",
     "graphql": "^16.3.0",
     "husky": "^8.0.0",
     "lint-staged": "^13.0.2",
@@ -64,6 +78,8 @@
     "relay-compiler": "^13.0.2",
     "relay-compiler-language-typescript": "^15.0.1",
     "relay-config": "^12.0.1",
+    "relay-test-utils": "^14.0.0",
+    "storybook-css-modules-preset": "^1.1.1",
     "tailwindcss": "^3.0.23",
     "typescript": "4.5.5"
   },
@@ -81,5 +97,8 @@
     "*.json": [
       "prettier --write"
     ]
+  },
+  "resolutions": {
+    "webpack": "^5"
   }
 }

src/components/issue/Issue.tsx

@@ -1,7 +1,7 @@
 import { graphql, useFragment } from 'react-relay'
 import { Issue_node$key } from '../../queries/__generated__/Issue_node.graphql'
 
-type IssueProps = {
+export type IssueProps = {
   issue: Issue_node$key
 }
 

src/lib/RelayEnvironmentProvider.tsx

@@ -0,0 +1,25 @@
+import { useMemo } from 'react'
+
+import { ReactRelayContext } from 'react-relay'
+
+import { Environment } from 'relay-runtime'
+
+type Props = {
+  children: React.ReactNode
+  environment: Environment
+}
+const RelayEnvironmentProvider = (props: Props) => {
+  const { children, environment } = props
+  // TODO(T39494051) - We're setting empty variables here to make Flow happy
+  // and for backwards compatibility, while we remove variables from context
+  // in favor of fragment ownership
+  const context = useMemo(() => ({ environment, variables: {} }), [environment])
+
+  return (
+    <ReactRelayContext.Provider value={context}>
+      {children}
+    </ReactRelayContext.Provider>
+  )
+}
+
+export default RelayEnvironmentProvider

src/stories/Button.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import  Button  from '../components/Button';
+
+export default {
+  title: 'Atoms/Button',
+  component: Button,
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  children: 'Button',
+};