first commit

.storybook/main.js

@@ -0,0 +1,29 @@
+/* eslint-disable */
+const path = require('path');
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-controls'],
+  core: {
+    builder: 'webpack5',
+  },
+  webpackFinal: async (config) => {
+    config.resolve.alias['/'] = path.resolve(__dirname, '../src/shared');
+    config.resolve.alias['Assets'] = path.resolve(__dirname, '../src/shared/assets');
+    config.resolve.alias['Components'] = path.resolve(__dirname, '../src/shared/components');
+    config.resolve.alias['Containers'] = path.resolve(__dirname, '../src/shared/containers');
+    config.resolve.alias['Context'] = path.resolve(__dirname, '../src/shared/context');
+    config.resolve.alias['HOC'] = path.resolve(__dirname, '../src/shared/hoc');
+    config.resolve.alias['Utils'] = path.resolve(__dirname, '../src/shared/utils');
+    config.resolve.alias['Hooks'] = path.resolve(__dirname, '../src/shared/hooks');
+    config.resolve.alias['Themes'] = path.resolve(__dirname, '../src/shared/themes');
+    config.resolve.alias['Routes'] = path.resolve(__dirname, '../src/routes');
+    //This fixed Storybook crashing all the time
+    // config.cache = false;
+    return config;
+  },
+  //This handles the error when importing svgs
+  babel: async (options) => {
+    options.plugins.push('babel-plugin-inline-react-svg');
+    return options;
+  },
+};

.storybook/preview-body.html

@@ -0,0 +1 @@
+<div id="app"></div>

.storybook/preview-head.html

@@ -0,0 +1,15 @@
+<!--Adding Bootstrap-->
+<link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" />
+
+<link rel="preconnect" href="https://fonts.gstatic.com" />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@600&display=swap" rel="stylesheet" />
+
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
+<style>
+    #root {
+        width: 100%;
+        height: 100vh;
+    }
+</style>

.storybook/preview.js

@@ -0,0 +1,85 @@
+/*eslint-disable */
+import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
+import React from 'react';
+import { Provider } from 'react-redux';
+
+import { setupStore } from '../src/store';
+
+//Use this to trigger responsive viewports
+const customViewports = {
+  'x-small': {
+    name: 'x-small',
+    styles: {
+      width: '575px', //<576px
+      height: '100vh',
+    },
+  },
+  small: {
+    name: 'small',
+    styles: {
+      width: '768px', //≥576px
+      height: '100vh',
+    },
+  },
+  medium: {
+    name: 'medium',
+    styles: {
+      width: '992px', //≥768px
+      height: '100vh',
+    },
+  },
+  large: {
+    name: 'large',
+    styles: {
+      width: '1199px', //≥992px
+      height: '100vh',
+    },
+  },
+  'x-large': {
+    name: 'x-large',
+    styles: {
+      width: '1399px', //≥1200px
+      height: '100vh',
+    },
+  },
+  'xx-large': {
+    name: 'xx-large',
+    styles: {
+      width: '100%', //≥1400px
+      height: '100vh',
+    },
+  },
+};
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  layout: 'centered',
+  viewport: {
+    viewports: {
+      ...MINIMAL_VIEWPORTS,
+      ...customViewports,
+    },
+  },
+};
+
+export const decorators = [
+  (Story) => (
+    <Provider store={setupStore()}>
+      <div className="container-fluid" style={{ height: 'auto' }}>
+        <div className="row">
+          <div className="col">
+            <div className="d-flex justify-content-center">
+              <Story />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Provider>
+  ),
+];