Storybook alias import error fix

.storybook/main.js

-
+import { mergeConfig } from 'vite';
+import path from 'path';
 
 /** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/components/**/*.stories.@(js|jsx|ts|tsx)",
+  stories: [
+    '../src/**/*.mdx',
+    '../src/components/**/*.stories.@(js|jsx|ts|tsx)'
   ],
-  "addons": [
-    "@chromatic-com/storybook",
-    "@storybook/addon-docs",
-    "@storybook/addon-a11y",
-    "@storybook/addon-vitest",
+  addons: [
+    '@chromatic-com/storybook',
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-vitest'
   ],
-  "framework": {
-    "name": "@storybook/react-vite",
-    "options": {}
+  framework: {
+    name: '@storybook/react-vite',
+    options: {}
+  },
+
+  // 👇 Add alias support here
+  viteFinal: async (config, { configType }) => {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@components': path.resolve(__dirname, '../src/components'),
+          '@Base': path.resolve(__dirname, '../src/components/Base'),
+          '@Shared': path.resolve(__dirname, '../src/components/Shared'),
+          '@lib': path.resolve(__dirname, '../src/lib'),
+          '@assets': path.resolve(__dirname, '../src/assets')
+        }
+      }
+    });
   }
 };
-export default config;
+
\ No newline at end of file
+export default config;

src/components/Base/Button/styles.module.css

@@ -43,7 +43,7 @@
 }
 
 .lg {
-  padding: 0.7rem 3rem;
+  padding: 0.5rem 3rem;
   font-size: 22px;
 }
 

src/components/Base/Legend/styles.module.css

@@ -27,12 +27,12 @@
 
 .title {
   color: white;
-  font-family: "Poppins-Medium";
+  font-family: 'Poppins-Medium';
   font-size: 14px;
 }
 
 @media screen and (min-width: 768px) {
   .title {
-    font-size: 22px;
+    font-size: 20px;
   }
 }

src/components/Layout/BookingWrapper/styles.module.css

@@ -48,7 +48,7 @@
 }
 
 .btn-wrapper {
-  padding: 1em 0;
+  padding: 1.5em 0;
 }
 
 @media screen and (min-width: 768px) {

src/components/Layout/Header/Index.jsx

@@ -6,61 +6,6 @@ const Header = ({ children }) => {
     <section className={styles['header-wrapper']}>
       <div className={styles.title}>{children}</div>
       <div className={styles.screenWrapper}>
-        {/* <svg viewBox="0 20 480 130" xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M 30 70 Q 240 20 450 70"
-            stroke="white"
-            stroke-width="3"
-            fill="none"
-          />
-
-          <defs>
-            <mask id="glowMask">
-              <linearGradient
-                id="fadeGradient"
-                x1="0"
-                y1="70"
-                x2="0"
-                y2="150"
-                gradientUnits="userSpaceOnUse">
-                <stop offset="0%" stop-color="#9c6ad5" stop-opacity="1" />
-                <stop offset="60%" stop-color="#9c6ad5" stop-opacity="1" />
-                <stop offset="100%" stop-color="#9c6ad5" stop-opacity="1" />
-                <stop offset="100%" stop-color="#9c6ad5" stop-opacity="1" />
-                <stop offset="100%" stop-color="#9c6ad5" stop-opacity="1" />
-              </linearGradient>
-
-              <path
-                d="
-          M 30 70
-          Q 240 20 450 70
-          L 500 150
-          L -20 150
-          Z"
-                fill="url(#fadeGradient)"
-              />
-            </mask>
-
-            <linearGradient
-              id="glowColor"
-              x1="0"
-              y1="100"
-              x2="0"
-              y2="150"
-              gradientUnits="userSpaceOnUse">
-              <stop offset="0%" stop-color="#9c6ad5" stop-opacity="0.4" />
-              <stop offset="50%" stop-color="#9c6ad5" stop-opacity="0.2" />
-              <stop offset="100%" stop-color="#9c6ad5" stop-opacity="0" />
-              <stop offset="100%" stop-color="#9c6ad5" stop-opacity="0" />
-              <stop offset="100%" stop-color="#9c6ad5" stop-opacity="0" />
-            </linearGradient>
-          </defs>
-          <path
-            d="M 30 70 Q 240 20 450 70 L 500 150 L -20 150 Z"
-            fill="url(#glowColor)"
-            mask="url(#glowMask)"
-          />
-        </svg> */}
         <svg viewBox="0 20 480 130" xmlns="http://www.w3.org/2000/svg">
           <path
             d="M 30 70 Q 240 20 450 70"

src/components/Shared/LogoutButton/Index.jsx

-import img from '@assets/images/power-button_12080802.svg';
+import logoutImg from '@assets/images/power-button_12080802.svg';
 import styles from './styles.module.css';
 
 const LogoutButton = ({ onLogout }) => {
   return (
     <div className={styles['logout-wrapper']}>
-      <img src={img} width={30} onClick={onLogout} title="Logout" />
+      <img src={logoutImg} width={20} onClick={onLogout} title="Logout" />
     </div>
   );
 };

src/components/Shared/LogoutButton/styles.module.css

@@ -5,4 +5,5 @@
   padding-right: 1rem;
   cursor: pointer;
   box-sizing: border-box;
+  height: 30px;
 }