@qoretechnologies/reqore 0.36.8 → 0.37.1

package/src/containers/ReqoreProvider.tsx

@@ -1,9 +1,11 @@
-import { size } from 'lodash';
+import { map, size } from 'lodash';
 import React, { useCallback, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useMedia } from 'react-use';
 import shortid from 'shortid';
 import { useContext } from 'use-context-selector';
 import { ReqoreModal, ReqoreTextEffect } from '..';
+import { IReqoreModalProps } from '../components/Modal';
 import ReqoreNotificationsWrapper from '../components/Notifications';
 import ReqoreNotification, {
   IReqoreNotificationProps,
@@ -12,6 +14,7 @@ import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
 import ReqoreContext from '../context/ReqoreContext';
 import ThemeContext from '../context/ThemeContext';
 import { IReqoreIconName } from '../types/icons';
+import PopoverProvider from './PopoverProvider';
 import { IReqoreOptions } from './UIProvider';
 
 export interface IReqoreNotificationData extends IReqoreNotificationProps {
@@ -27,6 +30,13 @@ export interface IReqoreNotifications {
   options?: IReqoreOptions;
 }
 
+export interface IReqoreModals {
+  [id: string]: IReqoreModalFromProps | TReqoreCustomModal;
+}
+
+export interface IReqoreModalFromProps extends IReqoreModalProps {}
+export type TReqoreCustomModal = React.ReactElement<IReqoreModalProps>;
+
 export interface IReqoreConfirmationModal {
   title?: string;
   description?: string;
@@ -42,6 +52,7 @@ export interface IReqoreConfirmationModal {
 
 const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {} }) => {
   const [notifications, setNotifications] = useState<IReqoreNotificationData[] | null>([]);
+  const [modals, setModals] = useState<IReqoreModals>({});
   const [confirmationModal, setConfirmationModal] = useState<IReqoreConfirmationModal>({});
   const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
   const latestZIndex = useRef<number>(9000);
@@ -74,6 +85,31 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
     }));
   };
 
+  const addModal = useCallback(
+    (modal: IReqoreModalFromProps | TReqoreCustomModal, id?: string): string => {
+      const _id = id || shortid.generate();
+
+      setModals((cur) => {
+        return {
+          ...cur,
+          [_id]: modal,
+        };
+      });
+
+      return _id;
+    },
+    []
+  );
+
+  const removeModal = useCallback((id: string): void => {
+    setModals((cur) => {
+      const newModals = { ...cur };
+      delete newModals[id];
+
+      return newModals;
+    });
+  }, []);
+
   const addNotification = (data: IReqoreNotificationData) => {
     setNotifications((cur) => {
       let newNotifications = [...cur];
@@ -111,6 +147,8 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
           theme,
           addNotification,
           removeNotification,
+          addModal,
+          removeModal,
           confirmAction,
           isMobile,
           isTablet,
@@ -123,77 +161,104 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
             'closePopoversOnEscPress' in options ? options.closePopoversOnEscPress : true,
         }}
       >
-        {size(notifications) > 0 ? (
-          <ReqoreNotificationsWrapper position={options.notificationsPosition}>
-            {notifications.map((notification) => (
-              <ReqoreNotification
-                {...notification}
-                key={notification.id}
-                onClick={
-                  notification.onClick
-                    ? () => void notification.onClick(notification.id)
-                    : undefined
-                }
-                onClose={() => {
-                  if (notification.onClose) {
-                    notification.onClose(notification.id);
+        <PopoverProvider uiScale={options?.uiScale}>
+          {size(notifications) > 0 ? (
+            <ReqoreNotificationsWrapper position={options.notificationsPosition}>
+              {notifications.map((notification) => (
+                <ReqoreNotification
+                  {...notification}
+                  key={notification.id}
+                  onClick={
+                    notification.onClick
+                      ? () => void notification.onClick(notification.id)
+                      : undefined
                   }
+                  onClose={() => {
+                    if (notification.onClose) {
+                      notification.onClose(notification.id);
+                    }
 
-                  removeNotification(notification.id);
-                }}
-                onFinish={() => {
-                  if (notification.onFinish) {
-                    notification.onFinish(notification.id);
-                  }
+                    removeNotification(notification.id);
+                  }}
+                  onFinish={() => {
+                    if (notification.onFinish) {
+                      notification.onFinish(notification.id);
+                    }
 
-                  removeNotification(notification.id);
-                }}
-              />
-            ))}
-          </ReqoreNotificationsWrapper>
-        ) : null}
-        {children}
-        {confirmationModal.isOpen && (
-          <ReqoreModal
-            isOpen
-            flat
-            opacity={0.9}
-            blur={2}
-            width='500px'
-            intent={confirmationModal.intent}
-            label={confirmationModal.title || 'Confirm your action'}
-            icon='ErrorWarningFill'
-            className='reqore-confirmation-modal'
-            bottomActions={[
-              {
-                label: confirmationModal.cancelLabel || 'Cancel',
-                icon: 'CloseLine',
-                onClick: () => {
-                  confirmationModal?.onCancel?.();
-                  closeConfirmationModal();
+                    removeNotification(notification.id);
+                  }}
+                />
+              ))}
+            </ReqoreNotificationsWrapper>
+          ) : null}
+          {children}
+          {confirmationModal.isOpen && (
+            <ReqoreModal
+              isOpen
+              flat
+              opacity={0.9}
+              blur={2}
+              width='500px'
+              intent={confirmationModal.intent}
+              label={confirmationModal.title || 'Confirm your action'}
+              icon='ErrorWarningFill'
+              className='reqore-confirmation-modal'
+              bottomActions={[
+                {
+                  label: confirmationModal.cancelLabel || 'Cancel',
+                  icon: 'CloseLine',
+                  onClick: () => {
+                    confirmationModal?.onCancel?.();
+                    closeConfirmationModal();
+                  },
+                  position: 'left',
                 },
-                position: 'left',
-              },
-              {
-                label: confirmationModal.confirmLabel || 'Confirm',
-                intent: confirmationModal.confirmButtonIntent || 'success',
-                icon: confirmationModal.confirmIcon || 'CheckLine',
-                onClick: () => {
-                  confirmationModal?.onConfirm?.();
-                  closeConfirmationModal();
+                {
+                  label: confirmationModal.confirmLabel || 'Confirm',
+                  intent: confirmationModal.confirmButtonIntent || 'success',
+                  icon: confirmationModal.confirmIcon || 'CheckLine',
+                  onClick: () => {
+                    confirmationModal?.onConfirm?.();
+                    closeConfirmationModal();
+                  },
+                  position: 'right',
                 },
-                position: 'right',
-              },
-            ]}
-          >
-            <ReqoreTextEffect
-              as='p'
-              effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
+              ]}
             >
-              {confirmationModal.description || 'Are you sure you want to proceed?'}
-            </ReqoreTextEffect>
-          </ReqoreModal>
-        )}
+              <ReqoreTextEffect
+                as='p'
+                effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
+              >
+                {confirmationModal.description || 'Are you sure you want to proceed?'}
+              </ReqoreTextEffect>
+            </ReqoreModal>
+          )}
+          {map(modals, (modal, key) =>
+            React.isValidElement(modal) ? (
+              createPortal(
+                React.cloneElement(modal, {
+                  key,
+                  isOpen: true,
+                  onClose: () => {
+                    removeModal(key);
+                    modal.props.onClose?.();
+                  },
+                }),
+                document.querySelector('#reqore-portal')!
+              )
+            ) : (
+              <ReqoreModal
+                {...modal}
+                key={key}
+                isOpen
+                onClose={() => {
+                  removeModal(key);
+                  modal.onClose?.();
+                }}
+              />
+            )
+          )}
+        </PopoverProvider>
       </ReqoreContext.Provider>
     </>
   );

package/src/containers/UIProvider.tsx

@@ -8,7 +8,6 @@ import { IReqoreNotificationsPosition } from '../components/Notifications';
 import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
 import ThemeContext from '../context/ThemeContext';
 import { buildTheme, getMainBackgroundColor, getReadableColor } from '../helpers/colors';
-import PopoverProvider from './PopoverProvider';
 import ReqoreProvider from './ReqoreProvider';
 import ReqoreThemeProvider from './ThemeProvider';
 
@@ -88,11 +87,7 @@ const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, o
           <GlobalStyle />
         </ReqoreThemeProvider>
         <ReqoreLayoutWrapper withSidebar={options?.withSidebar}>
-          {modalPortal ? (
-            <ReqoreProvider options={options}>
-              <PopoverProvider uiScale={options?.uiScale}>{children}</PopoverProvider>
-            </ReqoreProvider>
-          ) : null}
+          {modalPortal ? <ReqoreProvider options={options}>{children}</ReqoreProvider> : null}
         </ReqoreLayoutWrapper>
         <ReqorePortal ref={setModalPortal} />
       </ThemeContext.Provider>

package/src/context/ReqoreContext.tsx

@@ -1,12 +1,19 @@
 import { createContext } from 'use-context-selector';
 import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
-import { IReqoreConfirmationModal, IReqoreNotificationData } from '../containers/ReqoreProvider';
+import {
+  IReqoreConfirmationModal,
+  IReqoreModalFromProps,
+  IReqoreNotificationData,
+  TReqoreCustomModal,
+} from '../containers/ReqoreProvider';
 import { IReqoreOptions } from '../containers/UIProvider';
 
 export interface IReqoreContext {
   readonly confirmAction: (data: IReqoreConfirmationModal) => void;
   readonly notifications?: IReqoreNotificationData[] | null;
   readonly addNotification?: (data: IReqoreNotificationData) => any;
+  readonly addModal?: (modal: IReqoreModalFromProps | TReqoreCustomModal, id?: string) => string;
+  readonly removeModal?: (id: string) => void;
   readonly removeNotification?: (id: string) => any;
   readonly isMobile?: boolean;
   readonly isTablet?: boolean;
@@ -24,6 +31,8 @@ export default createContext<IReqoreContext>({
   notifications: null,
   addNotification: null,
   removeNotification: null,
+  addModal: null,
+  removeModal: null,
   animations: {
     buttons: true,
     dialogs: true,

package/src/stories/Drawer/Drawer.stories.tsx

@@ -4,6 +4,7 @@ import { IReqoreDrawerProps, ReqoreDrawer } from '../../components/Drawer';
 import { IReqoreInputProps } from '../../components/Input';
 import {
   ReqoreButton,
+  ReqoreCollection,
   ReqoreInput,
   ReqorePanel,
   ReqoreTabs,
@@ -246,7 +247,10 @@ const Template: StoryFn<typeof ReqoreDrawer> = (args) => {
               Hello I am a super long button that opens a modal on click
             </ReqoreButton>
           </ReqoreTabsContent>
-          <ReqoreTabsContent tabId='tab2'>Tab 2 here</ReqoreTabsContent>
+          <ReqoreTabsContent tabId='tab2'>
+            Tab 2 here
+            <ReqoreCollection items={[{ label: 'Item 1' }, { label: 'Item 2' }]} />
+          </ReqoreTabsContent>
         </ReqoreTabs>
       </ReqoreDrawer>
     </>

package/src/stories/Modal/Manager.stories.tsx

@@ -0,0 +1,166 @@
+import { expect } from '@storybook/jest';
+import { StoryObj } from '@storybook/react';
+import { fireEvent, waitFor, within } from '@storybook/testing-library';
+import { noop } from 'lodash';
+import { useEffect, useState } from 'react';
+import { ReqoreBackdrop } from '../../components/Drawer/backdrop';
+import {
+  ReqoreButton,
+  ReqoreCollection,
+  ReqoreControlGroup,
+  ReqoreInput,
+  ReqoreModal,
+  ReqorePanel,
+  useReqoreProperty,
+} from '../../index';
+import { StoryMeta } from '../utils';
+
+const TIMEOUT = 2000;
+
+const meta = {
+  title: 'Utilities/Global Modal/Tests',
+  component: ReqoreModal,
+  render: ({ data, updateToData }) => {
+    const addModal = useReqoreProperty('addModal');
+    const [modalId, setModalId] = useState<string>(undefined);
+
+    useEffect(() => {
+      if (updateToData && modalId) {
+        setTimeout(() => {
+          addModal(updateToData, modalId);
+        }, TIMEOUT);
+      }
+    }, [modalId]);
+
+    return (
+      <ReqoreControlGroup>
+        <ReqoreButton
+          id='modal'
+          onClick={() => {
+            setModalId(addModal(data, 'modal'));
+          }}
+        >
+          Open new modal
+        </ReqoreButton>
+      </ReqoreControlGroup>
+    );
+  },
+} as StoryMeta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const FromObject: Story = {
+  args: {
+    data: {
+      label: 'Test modal',
+      children: (
+        <ReqorePanel collapsible>This is a modal from an object with complex children</ReqorePanel>
+      ),
+      bottomActions: [
+        {
+          label: 'Cancel',
+          onClick: noop,
+          icon: 'CloseLine',
+        },
+      ],
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await fireEvent.click(canvas.getAllByText('Open new modal')[0]);
+
+    await expect(document.querySelector('.reqore-modal')).toBeTruthy();
+  },
+};
+
+const ModalWithState = (props) => {
+  const [text, setText] = useState('This is a modal with its own state');
+  const addModal = useReqoreProperty('addModal');
+  const removeModal = useReqoreProperty('removeModal');
+
+  return (
+    <ReqoreModal label={props.label} {...props}>
+      <ReqoreControlGroup>
+        <ReqoreInput
+          value={text}
+          intent={props.intent}
+          onChange={(e: any) => setText(e.target.value)}
+        />
+        <ReqoreButton
+          onClick={() => addModal(<ModalWithState label='Another modal' />)}
+          tooltip='Open sesame'
+        >
+          Open another modal
+        </ReqoreButton>
+        <ReqoreButton onClick={() => removeModal('modal')}>Remove modal</ReqoreButton>
+      </ReqoreControlGroup>
+      <ReqoreCollection items={[{ label: 'Item 1' }, { label: 'Item 2' }]} />
+    </ReqoreModal>
+  );
+};
+
+export const FromElement: Story = {
+  args: {
+    data: (<ModalWithState label='Test modal' />) as any,
+  },
+  play: async ({ canvasElement, ...rest }) => {
+    await FromObject.play({ canvasElement, ...rest });
+  },
+};
+
+export const FromCustomElement: Story = {
+  args: {
+    data: (
+      <>
+        <ReqoreBackdrop />
+        <div
+          className='custom-modal reqore-modal'
+          style={{ position: 'absolute', left: '50%', top: '50%' }}
+        >
+          This is a custom modal
+        </div>
+      </>
+    ),
+  },
+  play: async ({ canvasElement, ...rest }) => {
+    await FromObject.play({ canvasElement, ...rest });
+  },
+};
+
+export const CanBeClosed: Story = {
+  ...FromObject,
+  play: async ({ canvasElement, ...rest }) => {
+    await FromObject.play({ canvasElement, ...rest });
+    await fireEvent.click(document.querySelector('.reqore-drawer-close-button'));
+
+    await expect(document.querySelector('.reqore-modal')).toBeNull();
+  },
+};
+
+export const CanBeClosedManually: Story = {
+  ...FromElement,
+  play: async ({ canvasElement, ...rest }) => {
+    const canvas = within(canvasElement);
+    await FromObject.play({ canvasElement, ...rest });
+    await waitFor(async () => await canvas.findAllByText('Remove modal')[0], { timeout: 10000 });
+
+    await fireEvent.click(canvas.getAllByText('Remove modal')[0]);
+  },
+};
+
+export const CanBeUpdated: Story = {
+  args: {
+    data: (<ModalWithState label='Test modal' />) as any,
+    updateToData: (<ModalWithState label='Updated modal' intent='info' />) as any,
+  },
+  play: async ({ canvasElement, ...rest }) => {
+    const canvas = within(canvasElement);
+    await FromElement.play({ canvasElement, ...rest });
+
+    await waitFor(async () => await canvas.findByText('Updated modal'), { timeout: 10000 });
+
+    await expect(canvas.findByText('Updated modal')).toBeTruthy();
+  },
+};