Merge pull request #35 from infinum/fix-storybook

Fix storybook

Author: Kristian Djaković

.gitignore

@@ -37,3 +37,6 @@ yarn-error.log*
 # sitemaps
 public/sitemap*.xml
 public/robots.txt
+
+# storybook
+storybook-static

.storybook/main.js

@@ -4,16 +4,23 @@ const path = require('path');
 const toPath = (_path) => path.join(process.cwd(), _path);
 
 module.exports = {
+	core: {
+		builder: 'webpack5',
+	},
 	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.(js|jsx|ts|tsx)', '../src/**/stories.(js|jsx|ts|tsx)'],
 	addons: [
 		'@storybook/addon-a11y',
 		'@storybook/addon-links',
 		'@storybook/addon-essentials',
 		'storybook-addon-next-router',
+		'@chakra-ui/storybook-addon',
 	],
 	typescript: {
 		reactDocgen: false,
 	},
+	features: {
+		emotionAlias: false,
+	},
 	webpackFinal: async (config) => {
 		// Remove default svg file loader
 		const rules = config.module.rules.map((rule) => {
@@ -25,16 +32,26 @@ module.exports = {
 			}
 		});
 
+		config.module.rules.push({
+			test: /\.mjs$/,
+			include: /node_modules/,
+			type: 'javascript/auto',
+		});
+
 		return {
 			...config,
 			resolve: {
 				...config.resolve,
-				plugins: [...config.resolve.plugins, new TsconfigPathsPlugin()],
-				alias: {
-					...config.resolve.alias,
-					'@emotion/core': toPath('node_modules/@emotion/react'),
-					'emotion-theming': toPath('node_modules/@emotion/react'),
+				fallback: {
+					fs: false,
+					path: false,
 				},
+				plugins: [
+					...(config.resolve.plugins || []),
+					new TsconfigPathsPlugin({
+						extensions: config.resolve.extensions,
+					}),
+				],
 			},
 			module: {
 				rules: [
@@ -50,4 +67,9 @@ module.exports = {
 			},
 		};
 	},
+	env: (config) => ({
+		...config,
+		__NEXT_NEW_LINK_BEHAVIOR: JSON.stringify(true),
+	}),
+	staticDirs: ['../public'],
 };

.storybook/preview.tsx

@@ -1,15 +1,14 @@
-import { withPerformance } from 'storybook-addon-performance';
 import { RouterContext } from 'next/dist/shared/lib/router-context';
 import { initializeWorker, mswDecorator } from 'msw-storybook-addon';
+import theme from '../src/styles/theme';
 
-import { withThemeProvider } from './withThemeProvider';
 import { withDatxProvider } from './withDatxProvider';
 
 import 'focus-visible/dist/focus-visible';
 
 initializeWorker();
 
-export const decorators = [mswDecorator, withDatxProvider, withThemeProvider, withPerformance];
+export const decorators = [mswDecorator, withDatxProvider];
 
 export const parameters = {
 	actions: { argTypesRegex: '^on[A-Z].*' },
@@ -39,4 +38,7 @@ export const globalTypes = {
 			items: [{ value: 'default', title: 'Default Theme' }],
 		},
 	},
+	chakra: {
+		theme,
+	},
 };

.storybook/withDatxProvider.tsx

@@ -1,16 +1,17 @@
+import { createFetcher, DatxProvider, useInitialize } from '@datx/swr';
 import { Story, StoryContext } from '@storybook/react';
-import React from 'react';
-import { cache } from 'swr';
+import { SWRConfig } from 'swr';
 
-import { DatxProvider } from '../src/libs/@datx/jsonapi-react';
-import client from '../src/store';
+import { createClient } from '../src/datx/create-client';
 
 export const withDatxProvider = (StoryFn: Story, context: StoryContext) => {
-	cache.clear();
+	const client = useInitialize(createClient);
 
 	return (
 		<DatxProvider client={client}>
-			<StoryFn />
+			<SWRConfig value={{ fetcher: createFetcher(client), provider: () => new Map() }}>
+				<StoryFn />
+			</SWRConfig>
 		</DatxProvider>
 	);
 };