@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/containers/ReqoreProvider.tsx

@@ -1,289 +0,0 @@
-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,
-} from '../components/Notifications/notification';
-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 {
-  duration?: number;
-  onClick?: (id?: string) => any;
-  onClose?: (id?: string) => any;
-  onFinish?: (id?: string) => any;
-  id?: string;
-}
-
-export interface IReqoreNotifications {
-  children: any;
-  options?: IReqoreOptions;
-}
-
-export interface IReqoreModal {
-  modal: IReqoreModalFromProps | TReqoreCustomModal;
-  options?: {
-    closable?: boolean;
-  };
-}
-
-export interface IReqoreModals {
-  [id: string]: IReqoreModal;
-}
-
-export interface IReqoreModalFromProps extends IReqoreModalProps {}
-export type TReqoreCustomModal = React.ReactElement<IReqoreModalProps>;
-
-export interface IReqoreConfirmationModal {
-  title?: string;
-  description?: string;
-  onConfirm?: () => void;
-  onCancel?: () => void;
-  confirmButtonIntent?: TReqoreIntent;
-  confirmLabel?: string;
-  confirmIcon?: IReqoreIconName;
-  cancelLabel?: string;
-  isOpen?: boolean;
-  intent?: TReqoreIntent;
-}
-
-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);
-
-  const isMobile = process.env.NODE_ENV === 'test' ? false : useMedia('(max-width: 480px)');
-  const isTablet =
-    process.env.NODE_ENV === 'test'
-      ? false
-      : useMedia('(min-width: 480px) and (max-width: 1200px)');
-  const isMobileOrTablet = isMobile || isTablet;
-
-  const getAndIncreaseZIndex = useCallback((): number => {
-    latestZIndex.current += 1;
-
-    return latestZIndex.current;
-  }, [latestZIndex.current]);
-
-  const confirmAction = (data: IReqoreConfirmationModal): void => {
-    setConfirmationModal({
-      ...data,
-      isOpen: true,
-    });
-  };
-
-  // FUnction that closes the confirmation modal
-  const closeConfirmationModal = (): void => {
-    setConfirmationModal((cur: IReqoreConfirmationModal) => ({
-      ...cur,
-      isOpen: false,
-    }));
-  };
-
-  const addModal = useCallback(
-    (
-      modal: IReqoreModalFromProps | TReqoreCustomModal,
-      id?: string,
-      options?: IReqoreModal['options']
-    ): string => {
-      const _id = id || shortid.generate();
-
-      setModals((cur) => {
-        return {
-          ...cur,
-          [_id]: {
-            modal,
-            options: {
-              closable: options?.closable ?? true,
-            },
-          },
-        };
-      });
-
-      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];
-
-      const index = cur.findIndex(
-        (notification) => notification.id === (data.id || shortid.generate())
-      );
-
-      if (index >= 0) {
-        newNotifications[index] = data;
-      } else {
-        newNotifications = [...newNotifications, data];
-      }
-
-      // If the length of the array is larger than 5, remove the first oldest notification
-      if (newNotifications.length > 5) {
-        newNotifications.shift();
-      }
-
-      return newNotifications;
-    });
-  };
-
-  const removeNotification = (id: string | number) => {
-    setNotifications((cur) => {
-      return [...cur].filter((notification) => notification.id !== id);
-    });
-  };
-
-  return (
-    <>
-      <ReqoreContext.Provider
-        value={{
-          notifications,
-          theme,
-          addNotification,
-          removeNotification,
-          addModal,
-          removeModal,
-          confirmAction,
-          isMobile,
-          isTablet,
-          isMobileOrTablet,
-          latestZIndex: latestZIndex.current,
-          getAndIncreaseZIndex,
-          animations: options.animations || { buttons: true, dialogs: true },
-          tooltips: options.tooltips || { delay: 0 },
-          closePopoversOnEscPress:
-            'closePopoversOnEscPress' in options ? options.closePopoversOnEscPress : true,
-        }}
-      >
-        <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);
-                  }}
-                />
-              ))}
-            </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',
-                },
-                {
-                  label: confirmationModal.confirmLabel || 'Confirm',
-                  intent: confirmationModal.confirmButtonIntent || 'success',
-                  icon: confirmationModal.confirmIcon || 'CheckLine',
-                  onClick: () => {
-                    confirmationModal?.onConfirm?.();
-                    closeConfirmationModal();
-                  },
-                  position: 'right',
-                },
-              ]}
-            >
-              <ReqoreTextEffect
-                as='p'
-                effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
-              >
-                {confirmationModal.description || 'Are you sure you want to proceed?'}
-              </ReqoreTextEffect>
-            </ReqoreModal>
-          )}
-          {map(modals, ({ modal, options }, key) =>
-            React.isValidElement(modal) ? (
-              createPortal(
-                React.cloneElement(modal, {
-                  key,
-                  isOpen: true,
-                  onClose: options?.closable
-                    ? () => {
-                        removeModal(key);
-                        modal.props.onClose?.();
-                      }
-                    : undefined,
-                }),
-                document.querySelector('#reqore-portal')!
-              )
-            ) : (
-              <ReqoreModal
-                {...modal}
-                key={key}
-                isOpen
-                onClose={
-                  options?.closable
-                    ? () => {
-                        removeModal(key);
-                        modal.onClose?.();
-                      }
-                    : undefined
-                }
-              />
-            )
-          )}
-        </PopoverProvider>
-      </ReqoreContext.Provider>
-    </>
-  );
-};
-
-export default ReqoreProvider;

package/src/containers/ThemeProvider.tsx

@@ -1,12 +0,0 @@
-import { ThemeProvider } from 'styled-components';
-import { useContext } from 'use-context-selector';
-import { IReqoreTheme } from '../constants/theme';
-import ThemeContext from '../context/ThemeContext';
-
-const ReqoreThemeProvider = ({ children, theme }: { children: any; theme?: IReqoreTheme }) => {
-  const _theme: IReqoreTheme = useContext(ThemeContext);
-
-  return <ThemeProvider theme={theme || _theme}>{children}</ThemeProvider>;
-};
-
-export default ReqoreThemeProvider;

package/src/containers/UIProvider.tsx

@@ -1,101 +0,0 @@
-import { cloneDeep } from 'lodash';
-import merge from 'lodash/merge';
-import { rgba } from 'polished';
-import React, { forwardRef, memo, useMemo, useState } from 'react';
-import styled, { createGlobalStyle, css } from 'styled-components';
-import ReqoreLayoutWrapper from '../components/Layout';
-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 ReqoreProvider from './ReqoreProvider';
-import ReqoreThemeProvider from './ThemeProvider';
-
-export interface IReqoreOptions {
-  withSidebar?: boolean;
-  notificationsPosition?: IReqoreNotificationsPosition;
-  uiScale?: number;
-  animations?: {
-    buttons?: boolean;
-    dialogs?: boolean;
-  };
-  tooltips?: {
-    /**
-     * Delay in ms before showing the tooltip
-     * @default 0
-     * Works only for `hover` handler
-     * */
-    delay?: number;
-  };
-  closePopoversOnEscPress?: boolean;
-}
-export interface IReqoreUIProviderProps {
-  children?: any;
-  theme?: Partial<IReqoreTheme>;
-  options?: IReqoreOptions;
-}
-
-const GlobalStyle = createGlobalStyle`
-  .reqore-blur-wrapper {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 8998;
-    cursor: pointer;
-    background-color: ${({ theme }) => rgba(getMainBackgroundColor(theme), 0.3)};
-    backdrop-filter: blur(3px);
-  }
-
-  .reqore-blur-z-index {
-    z-index: 8999;
-  }
-`;
-
-const StyledPortal = styled.div`
-  * {
-    box-sizing: border-box;
-  }
-
-  ${({ theme }) => css`
-    color: ${getReadableColor(theme, undefined, undefined, true)};
-  `}
-`;
-
-const ReqorePortal = memo(
-  forwardRef<HTMLDivElement, object>((_props, ref) => {
-    return (
-      <ReqoreThemeProvider>
-        <StyledPortal id='reqore-portal' ref={ref} />
-      </ReqoreThemeProvider>
-    );
-  })
-);
-
-const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = memo(({ children, theme, options }) => {
-  const [modalPortal, setModalPortal] = useState<any>(false);
-
-  const _theme: Partial<IReqoreTheme> = useMemo(() => cloneDeep(theme || {}), [theme]);
-  const _defaultTheme: IReqoreTheme = useMemo(() => cloneDeep(DEFAULT_THEME), [DEFAULT_THEME]);
-  const rebuiltTheme: IReqoreTheme = useMemo(
-    () => buildTheme(merge(_defaultTheme, _theme)),
-    [_defaultTheme, _theme]
-  );
-
-  return (
-    <>
-      <ThemeContext.Provider value={{ ...rebuiltTheme }}>
-        <ReqoreThemeProvider>
-          <GlobalStyle />
-        </ReqoreThemeProvider>
-        <ReqoreLayoutWrapper withSidebar={options?.withSidebar}>
-          {modalPortal ? <ReqoreProvider options={options}>{children}</ReqoreProvider> : null}
-        </ReqoreLayoutWrapper>
-        <ReqorePortal ref={setModalPortal} />
-      </ThemeContext.Provider>
-    </>
-  );
-});
-
-export default ReqoreUIProvider;

package/src/context/PopoverContext.tsx

@@ -1,11 +0,0 @@
-import { createContext } from 'use-context-selector';
-import { IPopoverData } from '../containers/PopoverProvider';
-
-export default createContext<{
-  addPopover?: (popoverData: IPopoverData) => void;
-  removePopover?: (popoverId: string) => void;
-  updatePopover?: (popoverId: string, popoverData: Partial<IPopoverData>) => void;
-  isPopoverOpen?: (popoverId: string) => boolean;
-  popovers?: IPopoverData[];
-  uiScale?: number;
-}>({});

package/src/context/ReqoreContext.tsx

@@ -1,47 +0,0 @@
-import { createContext } from 'use-context-selector';
-import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
-import {
-  IReqoreConfirmationModal,
-  IReqoreModal,
-  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,
-    options?: IReqoreModal['options']
-  ) => string;
-  readonly removeModal?: (id: string) => void;
-  readonly removeNotification?: (id: string) => any;
-  readonly isMobile?: boolean;
-  readonly isTablet?: boolean;
-  readonly isMobileOrTablet?: boolean;
-  readonly getAndIncreaseZIndex?: () => number;
-  readonly animations?: IReqoreOptions['animations'];
-  readonly tooltips?: IReqoreOptions['tooltips'];
-  readonly closePopoversOnEscPress?: boolean;
-  readonly latestZIndex?: number;
-  theme: IReqoreTheme;
-}
-
-export default createContext<IReqoreContext>({
-  confirmAction: null,
-  notifications: null,
-  addNotification: null,
-  removeNotification: null,
-  addModal: null,
-  removeModal: null,
-  animations: {
-    buttons: true,
-    dialogs: true,
-  },
-  closePopoversOnEscPress: true,
-  theme: DEFAULT_THEME,
-});

package/src/context/ThemeContext.tsx

@@ -1,4 +0,0 @@
-import { createContext } from 'use-context-selector';
-import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
-
-export default createContext<IReqoreTheme>(DEFAULT_THEME);

package/src/helpers/animations.ts

@@ -1,13 +0,0 @@
-import { keyframes } from 'styled-components';
-
-export const fadeIn = keyframes`
-  0% {
-    opacity: 0;
-    filter: blur(5px);
-  }
-
-  100%{
-    opacity: 1;
-    filter: blur(0px);
-  }
-`;