diff --git a/packages/web/.storybook/main.js b/packages/web/.storybook/main.js
new file mode 100644
index 0000000000..e5b11889f3
--- /dev/null
+++ b/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;
+ },
+}
diff --git a/packages/web/.storybook/preview.js b/packages/web/.storybook/preview.js
new file mode 100644
index 0000000000..d7478763bc
--- /dev/null
+++ b/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 =>
+})
+
+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 (
+ <>
+
+
+
+
+ >
+ );
+ }
+]
diff --git a/packages/web/index.d.ts b/packages/web/index.d.ts
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/web/package.json b/packages/web/package.json
index 7858d890bc..c3c75e2edf 100644
--- a/packages/web/package.json
+++ b/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",
diff --git a/packages/web/stories/Snackbar.stories.tsx b/packages/web/stories/Snackbar.stories.tsx
new file mode 100644
index 0000000000..5a18a1595e
--- /dev/null
+++ b/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
+
+const Template = ({ showToast, position }: { showToast: () => void; position?: ToastPosition }) => (
+
+)
+
+export const SuccessSnackbar: ComponentStory = (args: any) => {
+ return (
+ showSuccessToast('Success Message')} />
+ )
+}
+
+export const ErrorSnackbar: ComponentStory = (args: any) => {
+ return (
+ showErrorToast('Error Message!')} />
+ )
+}
diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json
index 64d5521e0e..49a081d157 100644
--- a/packages/web/tsconfig.json
+++ b/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"]