From a0e17e05162b7c929ca5dc0ede630dd8f9b2e513 Mon Sep 17 00:00:00 2001
From: Chef Jerry <144641937+ChefJerry@users.noreply.github.com>
Date: Mon, 14 Oct 2024 21:28:10 +0800
Subject: [PATCH] fix: dropdown menu button onclick missed (#10819)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Before opening a pull request, please read the [contributing
guidelines](https://github.com/pancakeswap/pancake-frontend/blob/develop/CONTRIBUTING.md)
first
-->


<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `DropdownMenu` component by ensuring it
correctly passes the `onClick` prop and updating the Storybook
configuration for better integration with Vite.

### Detailed summary
- Updated `DropdownMenu` component to properly pass `onClick` props.
- Modified `DropdownMenu` mock to trigger an alert on disconnect.
- Configured Storybook to use Vite with a specified configuration file.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your
question}`

<!-- end pr-codex -->
---
 .changeset/twenty-swans-prove.md                           | 5 +++++
 packages/uikit/.storybook/main.js                          | 6 +++++-
 packages/uikit/.storybook/vite.config.ts                   | 7 +++++++
 .../uikit/src/components/DropdownMenu/DropdownMenu.tsx     | 2 +-
 packages/uikit/src/components/DropdownMenu/mock.tsx        | 6 ++++--
 5 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/twenty-swans-prove.md
 create mode 100644 packages/uikit/.storybook/vite.config.ts

diff --git a/.changeset/twenty-swans-prove.md b/.changeset/twenty-swans-prove.md
new file mode 100644
index 0000000000000..dae15193cbaf4
--- /dev/null
+++ b/.changeset/twenty-swans-prove.md
@@ -0,0 +1,5 @@
+---
+'@pancakeswap/uikit': patch
+---
+
+Fixed DropdownMenu component missed pass `onClick` props
diff --git a/packages/uikit/.storybook/main.js b/packages/uikit/.storybook/main.js
index 0e6ba9ce71e9a..65e7999da273e 100644
--- a/packages/uikit/.storybook/main.js
+++ b/packages/uikit/.storybook/main.js
@@ -3,7 +3,11 @@ import { mergeConfig } from "vite";
 module.exports = {
   framework: {
     name: "@storybook/react-vite",
-    options: {},
+    options: {
+      builder: {
+        viteConfigPath: ".storybook/vite.config.ts",
+      },
+    },
   },
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
diff --git a/packages/uikit/.storybook/vite.config.ts b/packages/uikit/.storybook/vite.config.ts
new file mode 100644
index 0000000000000..dd59c4b721e8c
--- /dev/null
+++ b/packages/uikit/.storybook/vite.config.ts
@@ -0,0 +1,7 @@
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  assetsInclude: ["/sb-preview/runtime.js"],
+});
diff --git a/packages/uikit/src/components/DropdownMenu/DropdownMenu.tsx b/packages/uikit/src/components/DropdownMenu/DropdownMenu.tsx
index f6e249516662c..c12bf1d0c2353 100644
--- a/packages/uikit/src/components/DropdownMenu/DropdownMenu.tsx
+++ b/packages/uikit/src/components/DropdownMenu/DropdownMenu.tsx
@@ -73,7 +73,7 @@ const MenuItem: React.FC<{
   return (
     <StyledDropdownMenuItemContainer key={label?.toString()}>
       {type === DropdownMenuItemType.BUTTON && (
-        <DropdownMenuItem $isActive={isActive} disabled={disabled || isDisabled} type="button">
+        <DropdownMenuItem $isActive={isActive} disabled={disabled || isDisabled} type="button" {...itemProps}>
           {MenuItemContent}
         </DropdownMenuItem>
       )}
diff --git a/packages/uikit/src/components/DropdownMenu/mock.tsx b/packages/uikit/src/components/DropdownMenu/mock.tsx
index fe95aa814d7fb..c2d635abbbdad 100644
--- a/packages/uikit/src/components/DropdownMenu/mock.tsx
+++ b/packages/uikit/src/components/DropdownMenu/mock.tsx
@@ -1,4 +1,3 @@
-import noop from "lodash/noop";
 import { DropdownMenuItems, DropdownMenuItemType } from "./types";
 
 const ItemsMock: DropdownMenuItems[] = [
@@ -20,7 +19,10 @@ const ItemsMock: DropdownMenuItems[] = [
   },
   {
     label: "Disconnect",
-    onClick: noop,
+    onClick: () => {
+      // eslint-disable-next-line no-alert
+      alert("disconnect");
+    },
     type: DropdownMenuItemType.BUTTON,
   },
 ];