refactor: DropdownMenu story

packages/go-ui-storybook/.storybook/main.ts

@@ -31,7 +31,18 @@ const config: StorybookConfig = {
     staticDirs: ['../public'],
 
     typescript: {
-        reactDocgen: "react-docgen-typescript"
-    }
+        reactDocgen: 'react-docgen-typescript',
+        reactDocgenTypescriptOptions: {
+            compilerOptions: {
+                allowSyntheticDefaultImports: false,
+                esModuleInterop: false,
+            },
+            // shouldExtractValuesFromUnion: true,
+            shouldExtractLiteralValuesFromEnum: true,
+            // Filter out third-party props from node_modules except @ifrc-go/ui package.
+            propFilter: (prop) =>
+                prop.parent ? !/node_modules\/(?!@ifrc-go\/ui)/.test(prop.parent.fileName) : true,
+        },
+    },
 };
 export default config;

packages/go-ui-storybook/src/stories/DropdownMenu.stories.tsx

@@ -1,18 +1,13 @@
-import { DropdownMenuProps } from '@ifrc-go/ui';
 import type {
     Meta,
     StoryObj,
 } from '@storybook/react';
 
-import DropdownMenu from './DropdownMenu';
+import DropdownMenu, { DropdownMenuProps } from './DropdownMenu';
 
-type DropdownMenuSpecificProps = DropdownMenuProps & {
-    name: string;
-};
-
-type Story = StoryObj<DropdownMenuSpecificProps>;
+type Story = StoryObj<DropdownMenuProps>;
 
-const meta: Meta<typeof DropdownMenu> = {
+const meta = {
     title: 'Components/DropdownMenu',
     component: DropdownMenu,
     parameters: {
@@ -23,51 +18,41 @@ const meta: Meta<typeof DropdownMenu> = {
         },
     },
     tags: ['autodocs'],
-    decorators: [
-        function Component(_, ctx) {
-            const componentArgs = ctx.args as DropdownMenuSpecificProps;
-
-            return (
-                <DropdownMenu
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...componentArgs}
-                />
-            );
-        },
-    ],
-};
+} satisfies Meta<typeof DropdownMenu>;
 
 export default meta;
 
-export const Default: Story = {
+export const Default = {
     args: {
-        label: 'Click me',
-        children: [<div className="dropdown-option">Spanish</div>],
+        label: 'Select a language',
+        children: [
+            <>
+                <div className="dropdown-option">English</div>
+                <div className="dropdown-option">Spanish</div>
+                <div className="dropdown-option">French</div>
+                <div className="dropdown-option">Arabic</div>
+            </>,
+        ],
     },
-};
+} satisfies Story;
 
 export const WithoutDropdownIcon: Story = {
     args: {
-        label: 'Click me',
+        ...Default.args,
         withoutDropdownIcon: true,
-        children: [<div className="dropdown-option">Spanish</div>],
     },
 };
 
 export const Persistent: Story = {
     args: {
-        label: 'Click me',
+        ...Default.args,
         persistent: true,
-        children: [<div className="dropdown-option">Spanish</div>],
-
     },
 };
 
-export const Variant: Story = {
+export const WithPreferredWidth: Story = {
     args: {
-        label: 'Click me',
-        persistent: true,
-        variant: 'primary',
-        children: [<div className="dropdown-option">Spanish</div>],
+        ...Default.args,
+        preferredPopupWidth: 30,
     },
 };

packages/go-ui-storybook/src/stories/DropdownMenu.tsx

@@ -3,12 +3,12 @@ import {
     DropdownMenuProps as PureDropdownMenuProps,
 } from '@ifrc-go/ui';
 
-type DropdownMenuProps = PureDropdownMenuProps
+export type DropdownMenuProps = PureDropdownMenuProps;
 
-function WrappedDropdownMenu(props: DropdownMenuProps) {
+function DropdownMenu(props: DropdownMenuProps) {
     return (
         <PureDropdownMenu {...props} />// eslint-disable-line react/jsx-props-no-spreading
     );
 }
 
-export default WrappedDropdownMenu;
+export default DropdownMenu;

packages/go-ui-storybook/src/stories/index.css

@@ -41,6 +41,7 @@
 }
 
 .dropdown-option {
+    padding: var(--go-ui-spacing-xs);
     margin-left: var(--go-ui-spacing-md);
 }