@qoretechnologies/reqore 0.38.8 → 0.40.0

package/src/mock/menu.ts

@@ -1,59 +1,57 @@
-import { IQorusSidebarItems } from "../components/Sidebar";
-
-export const qorusSidebarItems: IQorusSidebarItems = {
+export const qorusSidebarItems = {
   Menu: {
-    title: "Menu",
+    title: 'Menu',
     items: [
       {
-        name: "Menu item 1",
-        as: "a",
+        name: 'Menu item 1',
+        as: 'a',
         props: {
-          href: "/item-1",
+          href: '/item-1',
         },
-        icon: "Home3Line",
-        id: "menu-item-1",
+        icon: 'Home3Line',
+        id: 'menu-item-1',
       },
       {
-        name: "Menu item 2",
-        as: "a",
+        name: 'Menu item 2',
+        as: 'a',
         props: {
-          href: "/item-2",
+          href: '/item-2',
         },
-        icon: "Settings4Fill",
-        id: "menu-item-2",
+        icon: 'Settings4Fill',
+        id: 'menu-item-2',
       },
       {
-        name: "Menu item 3",
-        icon: "File3Line",
-        id: "menu-item-3",
-        activePaths: ["/item-3"],
+        name: 'Menu item 3',
+        icon: 'File3Line',
+        id: 'menu-item-3',
+        activePaths: ['/item-3'],
         submenu: [
           {
-            name: "Submenu item 1",
-            as: "a",
+            name: 'Submenu item 1',
+            as: 'a',
             props: {
-              href: "/item-3/item-1",
+              href: '/item-3/item-1',
             },
-            icon: "NodeTree",
-            id: "submenu-item-1",
+            icon: 'NodeTree',
+            id: 'submenu-item-1',
           },
           {
-            name: "Submenu item 2",
-            as: "a",
+            name: 'Submenu item 2',
+            as: 'a',
             props: {
-              href: "/item-3/item-2",
+              href: '/item-3/item-2',
             },
-            icon: "Chat3Fill",
-            id: "submenu-item-2",
+            icon: 'Chat3Fill',
+            id: 'submenu-item-2',
           },
           {
-            name: "Super really long Submenu item 3",
-            as: "a",
+            name: 'Super really long Submenu item 3',
+            as: 'a',
             props: {
-              href: "/item-3/item-3",
+              href: '/item-3/item-3',
             },
-            icon: "DatabaseFill",
-            id: "submenu-item-3",
+            icon: 'DatabaseFill',
+            id: 'submenu-item-3',
           },
         ],
       },
@@ -62,33 +60,33 @@ export const qorusSidebarItems: IQorusSidebarItems = {
   Menu2: {
     items: [
       {
-        name: "Super Long Really Another item 1",
-        as: "a",
+        name: 'Super Long Really Another item 1',
+        as: 'a',
         props: {
-          href: "/another-item-1",
+          href: '/another-item-1',
         },
-        icon: "Home6Line",
-        id: "another-item-1",
+        icon: 'Home6Line',
+        id: 'another-item-1',
       },
       {
-        name: "Another item 2",
-        as: "a",
+        name: 'Another item 2',
+        as: 'a',
         props: {
-          href: "/another-item-2",
+          href: '/another-item-2',
         },
-        icon: "TableFill",
-        id: "another-item-2",
+        icon: 'TableFill',
+        id: 'another-item-2',
       },
       {
-        name: "Another item 3",
-        as: "a",
+        name: 'Another item 3',
+        as: 'a',
         props: {
           onClick: () => {
-            alert("Click");
+            alert('Click');
           },
         },
-        icon: "BellLine",
-        id: "another-item-3",
+        icon: 'BellLine',
+        id: 'another-item-3',
       },
     ],
   },

package/src/stories/Collection/Collection.stories.tsx

@@ -5,6 +5,10 @@ import { IReqoreColumnsProps } from '../../components/Columns';
 import { PADDING_FROM_SIZE } from '../../constants/sizes';
 import items, { bigCollection } from '../../mock/collectionData';
 
+import { expect } from '@storybook/jest';
+import { fireEvent } from '@storybook/testing-library';
+import { waitFor } from '@testing-library/react';
+import { sleep } from '../../helpers/utils';
 import { StoryMeta } from '../utils';
 import { argManager, IntentArg, SizeArg } from '../utils/args';
 
@@ -283,3 +287,31 @@ export const DefaultFilter: Story = {
     ],
   } as IReqoreCollectionProps,
 };
+
+export const CustomSortKeysWithDefaultSort: Story = {
+  args: {
+    label: 'Posts',
+    items: items.map((item) => ({
+      ...item,
+      badge: [item.metadata.id, item.metadata.category],
+    })),
+    defaultSort: 'desc',
+    defaultSortBy: 'id',
+    sortKeys: {
+      id: 'ID',
+      category: 'Category',
+    },
+  },
+  play: async ({ canvasElement }) => {
+    await sleep(500);
+
+    await fireEvent.click(canvasElement.querySelector('.reqore-collection-sort'));
+
+    await waitFor(
+      () => expect(document.querySelectorAll('.reqore-popover-content')).toHaveLength(1),
+      {
+        timeout: 5000,
+      }
+    );
+  },
+};

package/src/stories/Menu/Menu.stories.tsx

@@ -1,7 +1,11 @@
 import { StoryFn, StoryObj } from '@storybook/react';
+import { fireEvent, within } from '@storybook/testing-library';
+import { noop } from 'lodash';
 import { IReqoreMenuProps } from '../../components/Menu';
 import { IReqoreMenuItemProps } from '../../components/Menu/item';
+import { ReqoreMenuSection } from '../../components/Menu/section';
 import {
+  ReqoreControlGroup,
   ReqoreInput,
   ReqoreMenu,
   ReqoreMenuDivider,
@@ -91,121 +95,160 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const Template: StoryFn<IReqoreMenuProps> = (args) => {
-  return (
-    <ReqoreMenu {...args}>
-      <ReqoreInput placeholder='Custom component' icon='Search2Fill' flat={false} />
-      <ReqoreMenuItem icon='Save3Fill' intent='success' selected>
-        Selected success
-      </ReqoreMenuItem>
-      <ReqoreMenuItem icon='Save3Fill' badge={10}>
-        Save
+const MenuWithSubmenus = (args: IReqoreMenuProps) => (
+  <ReqoreMenu {...args} width='300px'>
+    <ReqoreMenuSection label='Submenu 1' icon='Apps2Fill'>
+      <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine' onRightIconClick={noop}>
+        Submenu Item 1
       </ReqoreMenuItem>
-      <ReqoreMenuDivider label='BIG Divider' size='huge' />
       <ReqoreMenuItem
-        icon='ChatPollFill'
-        onClick={() => alert('Item clicked')}
-        rightIcon='FahrenheitFill'
-        onRightIconClick={() => alert('Icon clicked')}
-        tooltip={{
-          content: 'You sure?',
-        }}
-        intent='danger'
+        icon='DualSim1Line'
+        rightIcon='MoneyEuroBoxLine'
+        disabled
+        onRightIconClick={noop}
       >
-        Delete
+        Submenu Item 2
       </ReqoreMenuItem>
+      <ReqoreMenuSection icon='PlayListLine' label='Submenu 2 active' activeIntent='info'>
+        <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine'>
+          Submenu Item 3
+        </ReqoreMenuItem>
+        <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine'>
+          Submenu Item 4
+        </ReqoreMenuItem>
+      </ReqoreMenuSection>
+      <ReqoreMenuSection label='Collapsed submenu' isCollapsed={true} icon='ListOrdered'>
+        <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine'>
+          Submenu Item 5
+        </ReqoreMenuItem>
+        <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine'>
+          Submenu Item 6
+        </ReqoreMenuItem>
+      </ReqoreMenuSection>
+    </ReqoreMenuSection>
+  </ReqoreMenu>
+);
 
-      <ReqoreMenuItem
-        icon='BluetoothConnectLine'
-        rightIcon='EditLine'
-        onRightIconClick={() => alert('Icon clicked')}
-        description='Button with right icon and description'
-        customTheme={{
-          main: 'info:darken:1:0.3',
-        }}
-      >
-        Some button
-      </ReqoreMenuItem>
+const Template: StoryFn<IReqoreMenuProps> = (args) => {
+  return (
+    <ReqoreControlGroup verticalAlign='flex-start'>
+      <ReqoreMenu {...args}>
+        <ReqoreInput placeholder='Custom component' icon='Search2Fill' flat={false} />
+        <ReqoreMenuItem icon='Save3Fill' intent='success' selected>
+          Selected success
+        </ReqoreMenuItem>
+        <ReqoreMenuItem icon='Save3Fill' badge={10}>
+          Save
+        </ReqoreMenuItem>
+        <ReqoreMenuDivider label='BIG Divider' size='huge' />
+        <ReqoreMenuItem
+          icon='ChatPollFill'
+          onClick={() => alert('Item clicked')}
+          rightIcon='FahrenheitFill'
+          onRightIconClick={() => alert('Icon clicked')}
+          tooltip={{
+            content: 'You sure?',
+          }}
+          intent='danger'
+        >
+          Delete
+        </ReqoreMenuItem>
 
-      <ReqoreMenuItem icon='Lock2Fill' description='I also have a description'>
-        This is a really long item that should wrap
-      </ReqoreMenuItem>
-      <ReqoreMenuItem icon='Lock2Fill' disabled>
-        Disabled
-      </ReqoreMenuItem>
-      <ReqoreMenuItem icon='Lock2Fill' disabled intent='warning'>
-        Disabled intent
-      </ReqoreMenuItem>
-      <ReqoreMenuDivider label='Divider' />
-      <ReqorePopover
-        component={ReqoreMenuItem}
-        flat={args.flat}
-        componentProps={
-          {
-            icon: 'EmotionUnhappyLine',
-            rightIcon: 'Scissors2Fill',
-            leftIconColor: 'danger:lighten',
-            wrap: args.wrapText,
-            flat: args.flat,
-          } as IReqoreMenuItemProps
-        }
-        openOnMount
-        content={
-          <ReqoreMenu {...args}>
-            <ReqoreMenuItem icon='ZhihuFill'>Item 1</ReqoreMenuItem>
-            <ReqoreMenuItem
-              icon='AccountCircleFill'
-              description='Would you look at that beautiful description'
-              intent='warning'
-            >
-              Item 2
-            </ReqoreMenuItem>
-            <ReqoreMenuItem icon='AnticlockwiseFill' disabled>
-              Item 3
-            </ReqoreMenuItem>
-            <ReqoreMenuItem
-              icon='ArchiveFill'
-              badge={{
-                label: '10',
-                effect: { gradient: { colors: { 0: '#00e3e8', 100: '#eb0e8c' } } },
-              }}
-            >
-              Item 4
-            </ReqoreMenuItem>
-          </ReqoreMenu>
-        }
-        isReqoreComponent
-        noWrapper
-        handler='click'
-        placement='right'
-      >
-        I have a submenu on click
-      </ReqorePopover>
-      <ReqoreMenuDivider
-        label='Fancy divider'
-        effect={{ gradient: { colors: { 0: '#0d5ba5', 100: '#ff5dfd' } } }}
-        align='left'
-      />
-      <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine' selected>
-        I am selected!
-      </ReqoreMenuItem>
-      <ReqoreMenuItem
-        icon='FireLine'
-        rightIcon='ArrowRightDownLine'
-        effect={{
-          gradient: {
-            colors: {
-              0: '#000000',
-              100: 'transparent',
+        <ReqoreMenuItem
+          icon='BluetoothConnectLine'
+          rightIcon='EditLine'
+          onRightIconClick={() => alert('Icon clicked')}
+          description='Button with right icon and description'
+          customTheme={{
+            main: 'info:darken:1:0.3',
+          }}
+        >
+          Some button
+        </ReqoreMenuItem>
+
+        <ReqoreMenuItem icon='Lock2Fill' description='I also have a description'>
+          This is a really long item that should wrap
+        </ReqoreMenuItem>
+        <ReqoreMenuItem icon='Lock2Fill' disabled>
+          Disabled
+        </ReqoreMenuItem>
+        <ReqoreMenuItem icon='Lock2Fill' disabled intent='warning'>
+          Disabled intent
+        </ReqoreMenuItem>
+        <ReqoreMenuDivider label='Divider' />
+        <ReqorePopover
+          component={ReqoreMenuItem}
+          flat={args.flat}
+          componentProps={
+            {
+              icon: 'EmotionUnhappyLine',
+              rightIcon: 'Scissors2Fill',
+              leftIconColor: 'danger:lighten',
+              wrap: args.wrapText,
+              flat: args.flat,
+            } as IReqoreMenuItemProps
+          }
+          openOnMount
+          content={
+            <ReqoreMenu {...args}>
+              <ReqoreMenuItem icon='ZhihuFill'>Item 1</ReqoreMenuItem>
+              <ReqoreMenuItem
+                icon='AccountCircleFill'
+                description='Would you look at that beautiful description'
+                intent='warning'
+              >
+                Item 2
+              </ReqoreMenuItem>
+              <ReqoreMenuItem icon='AnticlockwiseFill' disabled>
+                Item 3
+              </ReqoreMenuItem>
+              <ReqoreMenuItem
+                icon='ArchiveFill'
+                badge={{
+                  label: '10',
+                  effect: { gradient: { colors: { 0: '#00e3e8', 100: '#eb0e8c' } } },
+                }}
+              >
+                Item 4
+              </ReqoreMenuItem>
+            </ReqoreMenu>
+          }
+          isReqoreComponent
+          noWrapper
+          handler='click'
+          placement='right'
+        >
+          I have a submenu on click
+        </ReqorePopover>
+        <ReqoreMenuDivider
+          label='Fancy divider'
+          effect={{ gradient: { colors: { 0: '#0d5ba5', 100: '#ff5dfd' } } }}
+          align='left'
+          padded='none'
+          margin='none'
+        />
+        <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine' selected>
+          I am selected!
+        </ReqoreMenuItem>
+        <ReqoreMenuItem
+          icon='FireLine'
+          rightIcon='ArrowRightDownLine'
+          effect={{
+            gradient: {
+              colors: {
+                0: '#000000',
+                100: 'transparent',
+              },
             },
-          },
-        }}
-        description='I also have a description'
-        badge={10}
-      >
-        Fancy
-      </ReqoreMenuItem>
-    </ReqoreMenu>
+          }}
+          description='I also have a description'
+          badge={10}
+        >
+          Fancy
+        </ReqoreMenuItem>
+      </ReqoreMenu>
+      <MenuWithSubmenus {...args} />
+    </ReqoreControlGroup>
   );
 };
 
@@ -252,3 +295,13 @@ export const Transparent: Story = {
     transparent: true,
   },
 };
+
+export const SubmenuCanBeToggled: Story = {
+  render: (args) => <MenuWithSubmenus {...args} />,
+  play: async ({ canvasElement, ...rest }) => {
+    const canvas = within(canvasElement);
+
+    await fireEvent.click(canvas.queryAllByText('Submenu 2 active')[0]);
+    await fireEvent.click(canvas.queryAllByText('Collapsed submenu')[0]);
+  },
+};