feat: Moved to vite

Signed-off-by: Avior <f.bouillon@aptatio.com>

.storybook/main.js

@@ -1,12 +1,9 @@
-const path = require("path");
-const webpack = require('webpack')
-
 module.exports = {
 	"stories": [
 		"../src/**/*.stories.tsx",
 	],
 	core: {
-		builder: "webpack5"
+		builder: "@storybook/builder-vite"
 	},
 	staticDirs: ["./public"],
 	"addons": [
@@ -23,19 +20,5 @@ module.exports = {
 			shouldExtractLiteralValuesFromEnum: true,
 			propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
 		},
-	},
-	presets: [path.resolve(__dirname, "./next.js")],
-	// Allow to use Next/Image
-	webpackFinal: (config) => {
-		config.plugins.push(new webpack.DefinePlugin({
-			'process.env.__NEXT_IMAGE_OPTS': JSON.stringify({
-				deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
-				imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-				domains: [],
-				path: '/',
-				loader: 'default',
-			})
-		}))
-		return config
 	}
 }

.storybook/mockNextImage.js

@@ -1,18 +0,0 @@
-import React from 'react'
-// https://stackoverflow.com/a/64765638/7335674
-
-import * as nextImage from 'next/image'
-
-Object.defineProperty(nextImage, 'default', {
-	configurable: true,
-	value: (props) => {
-		return (
-			<div style={{display: 'inline-block', maxWidth: '100%', overflow: 'hidden', position: 'relative', boxSizing: 'border-box', margin: 0}}>
-				<div style={{boxSizing: 'border-box', display: 'block', maxWidth: '100%'}}>
-					<img {...props} alt="" aria-hidden="true" role="presentation" style={{maxWidth: '100%', display: 'block', margin: 0, border: 'none', padding: 0}} />
-				</div>
-				<img {...props} style={{position: 'absolute', inset: 0, boxSizing: 'border-box', padding: 0, border: 'none', margin: 'auto', display: 'block', width: 0, height: 0, minWidth: '100%', maxWidth: '100%', minHeight: '100%', maxHeight: '100%'}} />
-			</div>
-		)
-	},
-})

.storybook/next.js

@@ -1,50 +0,0 @@
-module.exports = {
-	webpackFinal: async (baseConfig, options) => {
-		const { module = {} } = baseConfig;
-
-		const newConfig = {
-			...baseConfig,
-			module: {
-				...module,
-				rules: [...(module.rules || [])],
-			},
-		};
-
-		// TypeScript
-		newConfig.module.rules.push({
-			test: /\.(ts|tsx)$/,
-			// include: [path.resolve(__dirname, '../src/client/components')],
-			use: ['babel-loader', 'ts-loader']
-		});
-		newConfig.resolve.extensions.push('.ts', '.tsx');
-
-		// JavaScript
-		newConfig.module.rules.push({
-			test: /\.(js|jsx)$/,
-			// include: [path.resolve(__dirname, '../src/client/components')],
-			use: [{
-				loader: 'babel-loader',
-				options: {
-					presets: ['@babel/preset-env', '@babel/preset-react']
-				}
-			}]
-		});
-		newConfig.resolve.extensions.push('.js', '.jsx');
-
-		// Stylus
-		newConfig.module.rules.push({
-		test: /\.styl$/,
-		use: ['style-loader', {
-			loader: 'css-loader',
-			options: {
-				url: false,
-				importLoaders: 1,
-				modules: true
-			},
-		}, 'stylus-loader'],
-	});
-		newConfig.resolve.extensions.push('.styl');
-
-		return newConfig;
-	},
-};

.storybook/preview.js

@@ -1,6 +1,5 @@
 import '../src/general.styl'
 import './mockNextRouter'
-import './mockNextImage'
 
 export const parameters = {
   layout: 'centered',