Merge pull request #360 from omnivore-app/OMN-SB

[OMN-SB]: Setup storybook

packages/web/.storybook/main.js

@@ -0,0 +1,30 @@
+const path = require('path')
+
+module.exports = {
+  stories: [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-addon-next-router"
+  ],
+  framework: "@storybook/react",
+  core: {
+    builder: "webpack5"
+  },
+  typescript: {
+    reactDocgen: false
+  },
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.roots = [
+      path.resolve(__dirname, '../public'),
+      'node_modules',
+    ];
+
+    // Return the altered config
+    return config;
+  },
+}

packages/web/.storybook/preview.js

@@ -0,0 +1,42 @@
+import { RouterContext } from 'next/dist/shared/lib/router-context';
+import * as NextImage from 'next/image';
+import { getCssText } from '../components/tokens/stitches.config';
+import "../styles/globals.css";
+
+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$/,
+    },
+  },
+  nextRouter: {
+    Provider: RouterContext.Provider
+  }
+}
+
+export const decorators = [
+  (Story, context) => {
+    return (
+      <>
+        <style
+          id="stitches"
+          dangerouslySetInnerHTML={{
+            __html: getCssText(),
+          }}
+        />
+        <div className='Gray'>
+          <Story {...context} />
+        </div>
+      </>
+    );
+  }
+]

packages/web/package.json

@@ -13,7 +13,9 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:build": "jest && next build",
-    "upgrade-psdpdfkit": "cp -R '../../node_modules/pspdfkit/dist/pspdfkit-lib' public/pspdfkit-lib"
+    "upgrade-psdpdfkit": "cp -R '../../node_modules/pspdfkit/dist/pspdfkit-lib' public/pspdfkit-lib",
+    "storybook": "start-storybook -p 6006 -s ./public",
+    "build-storybook": "build-storybook -s public"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^0.1.1",
@@ -45,6 +47,15 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-interactions": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/builder-webpack5": "^6.4.22",
+    "@storybook/manager-webpack5": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@storybook/testing-library": "^0.0.9",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "13.5.0",
@@ -57,11 +68,13 @@
     "@types/segment-analytics": "^0.0.34",
     "@types/uuid": "^8.3.1",
     "babel-jest": "^27.4.5",
+    "babel-loader": "^8.2.3",
     "eslint-config-next": "12.0.7",
     "eslint-plugin-functional": "^4.0.2",
     "eslint-plugin-react": "^7.28.0",
     "graphql": "^15.6.1",
-    "jest": "^27.4.5"
+    "jest": "^27.4.5",
+    "storybook-addon-next-router": "^3.1.1"
   },
   "volta": {
     "node": "14.18.0",

packages/web/stories/Snackbar.stories.tsx

@@ -0,0 +1,53 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { Toaster, ToastPosition } from 'react-hot-toast'
+import { showErrorToast, showSuccessToast } from '../lib/toastHelpers'
+import { Button } from '../components/elements/Button'
+
+export default {
+  title: 'Components/Snackbar',
+  component: Toaster,
+  argTypes: {
+    position: {
+      description: 'The position of the snackbar',
+      options: [
+        'top-left',
+        'top-center',
+        'top-right',
+        'bottom-right',
+        'bottom-center',
+        'bottom-left',
+      ],
+      control: { type: 'select' },
+    },
+  },
+} as ComponentMeta<typeof Toaster>
+
+const Template = ({ showToast, position }: { showToast: () => void; position?: ToastPosition }) => (
+  <div>
+    <Toaster position={position} />
+    <div
+      style={{
+        height: '15rem',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Button style='ctaGray' onClick={showToast}>
+        Show Toast
+      </Button>
+    </div>
+  </div>
+)
+
+export const SuccessSnackbar: ComponentStory<typeof Toaster> = (args: any) => {
+  return (
+    <Template {...args} showToast={() => showSuccessToast('Success Message')} />
+  )
+}
+
+export const ErrorSnackbar: ComponentStory<typeof Toaster> = (args: any) => {
+  return (
+    <Template {...args} showToast={() => showErrorToast('Error Message!')} />
+  )
+}

packages/web/tsconfig.json

@@ -14,7 +14,15 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "types": ["node", "jest", "@testing-library/jest-dom"],
-    "incremental": true
+    "incremental": true,
+    "paths": {
+      "@emotion/core": [
+        "./index.d.ts"
+      ],
+      "@storybook/theming": [
+        "./index.d.ts"
+      ]
+    }
   },
   "include": ["additional.d.ts", "next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]