UPDATE/Storybook configuration with 2 stories added

Author: kash9350

.gitignore

@@ -4,4 +4,5 @@ node_modules
 .cache
 dist
 .parcel-cache
-.yalc
+.yalc
+*storybook.log

.storybook/main.ts

@@ -0,0 +1,45 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { WebpackConfiguration } from '@storybook/core-webpack';
+
+const config: StorybookConfig = {
+  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',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling-webpack',
+    '@storybook/preset-scss'
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      strictMode: true,
+    },
+  },
+  webpackFinal: async (currentConfig: WebpackConfiguration, { configType }) => {
+    // get index of css rule
+    const ruleCssIndex = currentConfig.module.rules.findIndex(
+      (rule) => rule.test?.toString() === "/\\.css$/"
+    );
+
+    // map over the 'use' array of the css rule and set the 'module' option to true
+    currentConfig.module.rules[ruleCssIndex].use.map((item) => {
+      if (item.loader && item.loader.includes("/css-loader/")) {
+        item.options.modules = {
+          mode: "local",
+          localIdentName:
+            configType === "PRODUCTION"
+              ? "[local]__[hash:base64:5]"
+              : "[name]__[local]__[hash:base64:5]",
+        };
+      }
+
+      return item;
+    });
+
+    return currentConfig;
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+  tags: ['autodocs']
+};
+
+export default preview;

README.md

@@ -95,6 +95,16 @@ To run tests, use `npm test` or `yarn test`.
 
 Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
 
+### Storybook commands
+
+```bash
+npm run storybook
+```
+
+```bash
+npm run build-storybook
+```
+
 ### Jest
 
 Jest tests are set up to run with `npm test` or `yarn test`.