From fe040363a43e3ac3683c671efe3c3318ed8d0bbd Mon Sep 17 00:00:00 2001
From: Ravindra Kele <ravindrak@bsf.io>
Date: Fri, 27 Sep 2024 16:58:04 +0530
Subject: [PATCH] Menu Story Fix

---
 src/components/menu-item/menu-item.stories.js |  56 -------
 src/components/menu-item/menu.stories.js      | 140 ++++++++++--------
 2 files changed, 79 insertions(+), 117 deletions(-)
 delete mode 100644 src/components/menu-item/menu-item.stories.js

diff --git a/src/components/menu-item/menu-item.stories.js b/src/components/menu-item/menu-item.stories.js
deleted file mode 100644
index 9a1ea830..00000000
--- a/src/components/menu-item/menu-item.stories.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import Menu from './menu-item.jsx';
-import { Store } from 'lucide-react';
-
-export default {
-	title: 'Molecules/Menu/Menu Item',
-	component: Menu.Item,
-	parameters: {
-		layout: 'centered',
-	},
-	tags: [ 'autodocs' ],
-	argTypes: {
-		active: {
-			description: 'Determines if the Menu Item is in an active state',
-			control: { type: 'boolean' },
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: 'false' },
-			},
-		},
-		disabled: {
-			description: 'Disables the Menu Item if set to true',
-			control: { type: 'boolean' },
-			table: {
-				type: { summary: 'boolean' },
-				defaultValue: { summary: 'false' },
-			},
-		},
-		onClick: {
-			action: 'clicked',
-			description: 'Callback when Menu Item is clicked',
-			table: {
-				type: { summary: 'function' },
-			},
-		},
-		children: {
-			description: 'Content inside the Menu Item',
-			table: {
-				type: { summary: 'ReactNode' },
-			},
-		},
-	},
-};
-
-export const MenuItem = ( args ) => (
-	<Menu>
-		<Menu.Item { ...args }>
-			<Store />
-			<div>Store Settings</div>
-		</Menu.Item>
-	</Menu>
-);
-
-MenuItem.args = {
-	active: false,
-	disabled: false,
-};
diff --git a/src/components/menu-item/menu.stories.js b/src/components/menu-item/menu.stories.js
index efdeeb90..832b403f 100644
--- a/src/components/menu-item/menu.stories.js
+++ b/src/components/menu-item/menu.stories.js
@@ -1,9 +1,8 @@
 import Menu from './menu-item.jsx';
-import { CreditCard,
-	Store, PenTool, ShoppingBag, ShoppingCart, Truck, MousePointer, ChartNoAxesColumnIncreasing, Layers, CloudUpload, Bell } from 'lucide-react';
+import { Store, PenTool, ShoppingBag, ShoppingCart, Truck, CreditCard, MousePointer, ChartNoAxesColumnIncreasing, Layers, CloudUpload, Bell } from 'lucide-react';
 
 export default {
-	title: 'Molecules/Menu/Menu',
+	title: 'Molecules/Menu',
 	component: Menu,
 	parameters: {
 		layout: 'centered',
@@ -19,65 +18,84 @@ export default {
 				defaultValue: { summary: 'md' },
 			},
 		},
+		menuItemActive: {
+			description: 'Controls if the Menu Item is active. (This will apply to "Store Settings" item only for demo)',
+			control: { type: 'boolean' },
+		},
+		menuItemDisabled: {
+			description: 'Disables the Menu Item. (This will apply to "Store Settings" item only for demo)',
+			control: { type: 'boolean' },
+		},
+		menuItemContent: {
+			description: 'Content inside the Menu Item',
+			control: { type: 'text' },
+		},
 	},
 };
 
-export const MenuSidebar = {
-	render: ( args ) => (
-		<Menu size={ args.size }>
-			<Menu.List heading="Store" open={ true } arrow={ true }>
-				<Menu.Item>
-					<Store />
-					<div>Store Settings</div>
-				</Menu.Item>
-				<Menu.Item disabled>
-					<PenTool />
-					<div>Design & Branding</div>
-				</Menu.Item>
-			</Menu.List>
-			<Menu.List heading="Orders & Sales" open={ true } arrow={ true }>
-				<Menu.Item>
-					<ShoppingBag />
-					<div>Orders & Receipts</div>
-				</Menu.Item>
-				<Menu.Item active={ true }>
-					<ShoppingCart />
-					<div>Abandoned Checkout</div>
-				</Menu.Item>
-				<Menu.Item>
-					<Truck />
-					<div>Shipping</div>
-				</Menu.Item>
-				<Menu.Item>
-					<CreditCard />
-					<div>Payment Processors</div>
-				</Menu.Item>
-			</Menu.List>
-			<Menu.Separator />
-			<Menu.List heading="Customers" open={ true } arrow={ true }>
-				<Menu.Item>
-					<MousePointer />
-					<div>Affiliates</div>
-				</Menu.Item>
-				<Menu.Item>
-					<ChartNoAxesColumnIncreasing />
-					<div>Subscriptions Saver</div>
-				</Menu.Item>
-			</Menu.List>
-			<Menu.List heading="Others" open={ true } arrow={ true }>
-				<Menu.Item>
-					<Layers />
-					<div>Data Export</div>
-				</Menu.Item>
-				<Menu.Item>
-					<CloudUpload />
-					<div>Connection</div>
-				</Menu.Item>
-				<Menu.Item>
-					<Bell />
-					<div>Notification</div>
-				</Menu.Item>
-			</Menu.List>
-		</Menu>
-	),
+const Template = ( args ) => (
+	<Menu size={ args.size }>
+		<Menu.List heading="Store" open={ true } arrow={ true }>
+			<Menu.Item active={ args.menuItemActive } disabled={ args.menuItemDisabled }>
+				<Store />
+				<div>{ args.menuItemContent || 'Store Settings' }</div>
+			</Menu.Item>
+			<Menu.Item disabled>
+				<PenTool />
+				<div>Design & Branding</div>
+			</Menu.Item>
+		</Menu.List>
+		<Menu.List heading="Orders & Sales" open={ true } arrow={ true }>
+			<Menu.Item>
+				<ShoppingBag />
+				<div>Orders & Receipts</div>
+			</Menu.Item>
+			<Menu.Item>
+				<ShoppingCart />
+				<div>Abandoned Checkout</div>
+			</Menu.Item>
+			<Menu.Item>
+				<Truck />
+				<div>Shipping</div>
+			</Menu.Item>
+			<Menu.Item>
+				<CreditCard />
+				<div>Payment Processors</div>
+			</Menu.Item>
+		</Menu.List>
+		<Menu.Separator />
+		<Menu.List heading="Customers" open={ true } arrow={ true }>
+			<Menu.Item>
+				<MousePointer />
+				<div>Affiliates</div>
+			</Menu.Item>
+			<Menu.Item>
+				<ChartNoAxesColumnIncreasing />
+				<div>Subscriptions Saver</div>
+			</Menu.Item>
+		</Menu.List>
+		<Menu.List heading="Others" open={ true } arrow={ true }>
+			<Menu.Item>
+				<Layers />
+				<div>Data Export</div>
+			</Menu.Item>
+			<Menu.Item>
+				<CloudUpload />
+				<div>Connection</div>
+			</Menu.Item>
+			<Menu.Item>
+				<Bell />
+				<div>Notification</div>
+			</Menu.Item>
+		</Menu.List>
+	</Menu>
+);
+
+export const CombinedMenu = Template.bind( {} );
+
+CombinedMenu.args = {
+	size: 'md',
+	menuItemActive: false,
+	menuItemDisabled: false,
+	menuItemContent: 'Store Settings',
 };