Resolved Bug 2024 : Design System > Component > Side Navigation > Error while opening the component.

.storybook/preview.tsx

@@ -1,17 +1,16 @@
 import { Preview } from "@storybook/react"; // Import the 'Story' component
 import React from 'react';
-import { MemoryRouter, Routes, Route } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.bundle';
 import '../raaghu-react-themes/src/styles/default.scss';
 import { themes } from '@storybook/theming';
-
+ 
 // Helper function to apply the theme class to the document's body
 const applyTheme = (theme) => {
   document.body.classList.remove('theme-light', 'theme-dark');
   document.body.classList.add(theme === 'dark' ? 'theme-dark' : 'theme-light');
 };
-
+ 
 // Storybook configuration
 const preview: Preview = {
   parameters: {
@@ -40,26 +39,20 @@ const preview: Preview = {
           { value: 'light', title: 'light' },
           { value: 'dark', title: 'dark' },
         ],
-        showName: true,
+         showName: true,
+        // dynamicTitle: true, // Use dynamic titles for buttons
       },
     },
   },
 };
-
-// Single decorator that handles both theme and routing
-const withThemeAndRouter = (Story: React.FC, context: any) => {
-  const selectedTheme = context.globals.theme;
-  applyTheme(selectedTheme);
-
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route path="/*" element={<Story />} />
-      </Routes>
-    </MemoryRouter>
-  );
+
+// Decorator to apply the theme dynamically
+const withTheme = (Story: React.FC, context: any) => { // Specify the type of 'Story' and 'context'
+  const selectedTheme = context.globals.theme; // Get the current selected theme
+  applyTheme(selectedTheme); // Apply the selected theme
+  return <Story/>;
 };
-
-export const decorators = [withThemeAndRouter];
-
+ 
+export const decorators = [withTheme];
+ 
 export default preview;

raaghu-layouts/src/rds-comp-app-shell/rds-comp-app-shell.stories.tsx

@@ -3,36 +3,29 @@ import type { Meta, StoryObj } from "@storybook/react";
 import RdsCompAppShell, { AppShellDisplayType } from "./rds-comp-app-shell";
 import RdsCompSideNavigation from "../../../raaghu-components/src/rds-comp-side-navigation";
 import RdsCompTopNavigation from "../../../raaghu-components/src/rds-comp-top-navigation/rds-comp-top-navigation";
-import { Routes, Route, Outlet } from "react-router-dom";
+import { BrowserRouter } from "react-router-dom";
 import "./rds-comp-app-shell.css";
-
+ 
 const meta: Meta<typeof RdsCompAppShell> = {
   title: "Application Shells",
   component: RdsCompAppShell,
   parameters: {
     layout: "padded",
-    docs: {
-      description: {},
-    }
   },
   tags: ["autodocs"],
+  argTypes: {},
   decorators: [
     (Story) => (
-      <Routes>
-        <Route path="/" element={<Story />}>
-          <Route index element={<div></div>} />
-          <Route path="dashboard" element={<div>Dashboard Content</div>} />
-          <Route path="users" element={<div>Users Content</div>} />
-          <Route path="settings" element={<div>Settings Content</div>} />
-        </Route>
-      </Routes>
+      <BrowserRouter>
+        <Story />
+      </BrowserRouter>
     ),
   ],
 };
-
+ 
 export default meta;
 type Story = StoryObj<typeof RdsCompAppShell>;
-
+ 
 export const Basic: Story = {
   args: {
     displayType: AppShellDisplayType.Default,
@@ -247,7 +240,7 @@ export const Basic: Story = {
     ),
   },
 };
-
+ 
 // Add more variants
 export const HeaderOnly: Story = {
   args: {
@@ -344,8 +337,6 @@ export const HeaderOnly: Story = {
         componentsList={[]}
         languageLabel={""}
         themeLabel={""}
-        style={"ABP"}
-        showLogo={true}
         onForgotPassword={function (isForgotPasswordClicked?: boolean): void {
           console.log("Forgot password clicked:", isForgotPasswordClicked);
         }}
@@ -356,11 +347,13 @@ export const HeaderOnly: Story = {
         ): void {
           console.log("Profile link clicked:", id, navigateTo, label);
         }}
+        style={"ABP"}
+        showLogo={true}
       />
     ),
   },
 };
-
+ 
 export const SidebarOnly: Story = {
   args: {
     displayType: AppShellDisplayType.SideNav,
@@ -389,4 +382,4 @@ export const SidebarOnly: Story = {
       />
     ),
   },
-};
+};

raaghu-layouts/src/rds-comp-app-shell/rds-comp-app-shell.tsx

@@ -1,42 +1,46 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useState } from "react";
 import "./rds-comp-app-shell.css";
-import { Outlet } from "react-router-dom";
+import { BrowserRouter, Outlet } from "react-router-dom";
 import RdsCompTopNavigation from "../../../raaghu-components/src/rds-comp-top-navigation";
 import RdsSideNav from "../../../raaghu-elements/src/rds-side-nav";
 import { NavLayout, NavType, Platform } from "../../../raaghu-elements/src/rds-side-nav/rds-side-nav";
 export * from "../../../raaghu-elements/src/index";
 export * from "../../../raaghu-components/src/index";
-
 export interface RdsCompAppShellProps {
   displayType: AppShellDisplayType;
   topbar?: ReactNode;
   sidebar?: ReactNode;
-  children?: ReactNode;
 }
-
+ 
 export enum AppShellDisplayType {
   Basic = "Basic",
-  Header = "Header", 
+  Header = "Header",
   Default = "Default",
   Relaxing = "Relaxing",
   TopNav = "Top Nav",
   SideNav = "Side Nav",
   DoubleNav = "Double Nav",
   OneThreeOne = "1-3-1"
 }
-
+
+
 const RdsCompAppShell = (props: RdsCompAppShellProps) => {
+
   return (
-    <div className={props.displayType?.toString()}>
-      <div className="sidebar-layout">
-        {props.sidebar}
+    <>
+
+      <div className={props.displayType?.toString()}>
+        <div className="sidebar-layout">
+          {props.sidebar}
+        </div>
+
+        <div className="topnav-layout">
+          {props.topbar}
+          <Outlet />
+        </div>
       </div>
-      <div className="topnav-layout">
-        {props.topbar}
-        {props.children || <Outlet />}
-      </div>
-    </div>
+    </>
   );
 };
-
-export default RdsCompAppShell;
+ 
+export default RdsCompAppShell;