Fixes for test cases and some misc. issues

.gitignore

@@ -3,3 +3,5 @@ dist
 coverage
 .vscode
 server-build
+
+*storybook.log

.prettierrc

@@ -1,7 +1,7 @@
 {
  "trailingComma": "all",
  "tabWidth": 2,
- "semi": true,
+ "semi": false,
  "singleQuote": true,
  "endOfLine": "lf",
  "printWidth": 140

.storybook/main.js

@@ -1,21 +1,20 @@
-const path = require('path');
-
-// Export a function. Accept the base config as the only param.
-module.exports = {
- stories: ["../src/**/*.story.jsx"],
- webpackFinal: async (config, { configType }) => {
- // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
- // You can change the configuration based on that.
- // 'PRODUCTION' is used when building the static version of storybook.
-
- // Make whatever fine-grained changes you need
- config.module.rules.push({
- test: /\.scss$/,
- use: ['style-loader', 'css-loader', 'sass-loader'],
- include: path.resolve(__dirname, '../src'),
- });
-
- // Return the altered config
- return config;
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+ addons: [
+ '@storybook/addon-webpack5-compiler-swc',
+ '@storybook/addon-onboarding',
+ '@storybook/addon-links',
+ '@storybook/addon-essentials',
+ '@chromatic-com/storybook',
+ '@storybook/addon-interactions',
+ ],
+ framework: {
+ name: '@storybook/react-webpack5',
+ options: {},
  },
-};
+ docs: {
+ autodocs: 'tag',
+ },
+}
+export default config

.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+ parameters: {
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/i,
+ },
+ },
+ },
+}
+
+export default preview

README.md

@@ -101,6 +101,9 @@ To run Bundle Analyzer
 npm run build-analyze
 ```
 
+In case storybook does not work
+npx sb init
+
 
 ## Contributors ✨