Update preview.tsx

web/.cursor/rules/components_ui_stories.mdc

@@ -6,4 +6,5 @@ alwaysApply: false
 - All new stories title with "UI/directory/{componentName}" unless specified otherwise.
 - Instead of console log for click events, you should do native storybook actions
 - If a new story is made in the controller directory, I would like it title "Controllers/{controller name or parent controller name}/{componentName}"
-- If a new story is found in the features directory, I would like it titled "Features/{featureName or parent feature name}/{componentName}"
+- If a new story is found in the features directory, I would like it titled "Features/{featureName or parent feature name}/{componentName}"
+- onClick events (or similar) should be mocked with fn() from the storybook test package

web/.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
+
 import { BusterStyleProvider } from '../src/context/BusterStyles/BusterStyles';
 import '../src/styles/styles.scss';
 
@@ -10,16 +11,23 @@ const preview: Preview = {
         color: /(background|color)$/i,
         date: /Date$/i
       }
+    },
+    backgrounds: {
+      values: [
+        // 👇 Default values
+        { name: 'Dark', value: '#333' },
+        { name: 'Light', value: '#FFFFFF' }
+      ],
+      // 👇 Specify which background is shown by default
+      default: 'Light'
     }
   },
   decorators: [
     (Story) => {
       return (
-        <div>
+        <BusterStyleProvider>
-          <BusterStyleProvider>
+          <Story />
-            <Story />
+        </BusterStyleProvider>
-          </BusterStyleProvider>
-        </div>
       );
     }
   ]

web/src/components/features/modal/NewTermModal/NewTermModal.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NewTermModal } from '.';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
 
 const queryClient = new QueryClient({
   defaultOptions: {

web/src/components/ui/select/index.ts

@@ -1,2 +1 @@
-export * from './AppSelectItem';
+export * from './Select';
-export * from './AppSelectMultiple';

web/src/components/ui/tooltip/AppPopoverMenu.tsx

@@ -4,7 +4,6 @@ import React, { useLayoutEffect, useMemo } from 'react';
 import { Divider, Dropdown, MenuProps, DropdownProps, Input } from 'antd';
 import { useAntToken } from '@/styles/useAntToken';
 import { createStyles } from 'antd-style';
-import { AppSelectItem } from '../select/AppSelectItem';
 import { useMemoizedFn } from 'ahooks';
 
 type Item = {
@@ -100,17 +99,18 @@ export const AppPopoverMenu: React.FC<AppPopoverMenuProps> = React.memo(
       icon: item.icon,
       index,
       label: (
-        <AppSelectItem
+        <></>
-          disabled={item.disabled}
+        // <AppSelectItem
-          index={item.index}
+        //   disabled={item.disabled}
-          content={item?.label}
+        //   index={item.index}
-          hideCheckbox={hideCheckbox}
+        //   content={item?.label}
-          link={item.link}
+        //   hideCheckbox={hideCheckbox}
-          onClick={() => {
+        //   link={item.link}
-            item.onClick && item.onClick();
+        //   onClick={() => {
-          }}
+        //     item.onClick && item.onClick();
-          selected={selectedItems.includes(item.key as string)}
+        //   }}
-        />
+        //   selected={selectedItems.includes(item.key as string)}
+        // />
       ),
       key: (item?.key as string) || (index.toString() as string)
     }));