@qoretechnologies/reqore 0.20.1 → 0.20.4

package/src/constants/theme.ts

@@ -0,0 +1,102 @@
+export interface IReqoreSidebarTheme {
+  main?: string;
+  color?: string;
+  border?: string;
+  item?: {
+    color?: string;
+    background?: string;
+    border?: string;
+    hoverColor?: string;
+    hoverBackground?: string;
+    activeColor?: string;
+    activeBackground?: string;
+  };
+  subItem?: {
+    color?: string;
+    border?: string;
+    background?: string;
+    hoverColor?: string;
+    hoverBackground?: string;
+    activeColor?: string;
+    activeBackground?: string;
+  };
+  icon?: {
+    color?: string;
+    hoverColor?: string;
+    activeColor?: string;
+  };
+  section?: {
+    background?: string;
+  };
+}
+
+export interface IReqoreBreadcrumbsTheme {
+  main?: string;
+  item?: {
+    color?: string;
+    hoverColor?: string;
+    activeColor?: string;
+  };
+}
+
+export interface IReqoreNavbarTheme {
+  main?: string;
+  color?: string;
+  border?: string;
+  background?: string;
+  hoverColor?: string;
+}
+
+export interface IReqoreTheme {
+  main: string;
+  text?: {
+    color?: string;
+    dim?: boolean;
+  };
+  intents: IReqoreIntents;
+  sidebar?: IReqoreSidebarTheme;
+  notifications: IReqoreIntents;
+  popover?: {
+    main: string;
+  };
+  header?: IReqoreNavbarTheme;
+  footer?: IReqoreNavbarTheme;
+  breadcrumbs?: IReqoreBreadcrumbsTheme;
+}
+
+export interface IReqoreCustomTheme {
+  main?: string;
+  text?: {
+    color?: string;
+    dim?: boolean;
+  };
+}
+
+export interface IReqoreIntents {
+  info?: string;
+  success?: string;
+  pending?: string;
+  warning?: string;
+  danger?: string;
+  muted?: string;
+}
+
+export type IReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';
+
+export const DEFAULT_INTENTS: IReqoreIntents = {
+  info: '#0E5A8A',
+  success: '#0A6640',
+  pending: '#d1a036',
+  warning: '#A66321',
+  danger: '#A82A2A',
+  muted: '#444444',
+};
+
+export const DEFAULT_THEME: IReqoreTheme = {
+  main: '#333333',
+  text: {
+    dim: true,
+  },
+  intents: DEFAULT_INTENTS,
+  notifications: {},
+};

package/src/containers/PopoverProvider.tsx

@@ -0,0 +1,85 @@
+import { size } from 'lodash';
+import React, { MutableRefObject, useCallback, useEffect, useState } from 'react';
+import Popover from '../components/InternalPopover';
+import PopoverContext from '../context/PopoverContext';
+import { IPopoverOptions } from '../hooks/usePopover';
+
+export interface IReqorePopoverProviderProps {
+  children: any;
+  uiScale?: number;
+}
+
+export interface IPopoverData extends IPopoverOptions {
+  id: string;
+  popperRef?: MutableRefObject<any>;
+}
+
+const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiScale }) => {
+  const [popovers, setPopovers] = useState<IPopoverData[]>([]);
+
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      popovers.forEach(({ popperRef, closeOnAnyClick, closeOnOutsideClick, id, targetElement }) => {
+        if (
+          closeOnAnyClick ||
+          (closeOnOutsideClick &&
+            popperRef?.current &&
+            !popperRef.current.contains(event.target) &&
+            !targetElement?.contains(event.target as Node))
+        ) {
+          removePopover(id);
+        }
+      });
+    },
+    [popovers]
+  );
+
+  const removePopover = (id: string) => {
+    setPopovers((cur: IPopoverData[]) => [...cur].filter((p) => p.id !== id));
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [popovers]);
+
+  useEffect(() => {
+    if (!size(popovers)) {
+      document.removeEventListener('click', handleClick);
+    }
+  }, [popovers]);
+
+  return (
+    <PopoverContext.Provider
+      value={{
+        uiScale,
+        addPopover: (popoverData: IPopoverData) => {
+          setPopovers((cur: IPopoverData[]) => [...cur, popoverData]);
+        },
+        updatePopover: (popoverId: string, popoverData: Partial<IPopoverData>) => {
+          setPopovers((cur: IPopoverData[]) =>
+            [...cur].reduce<IPopoverData[]>((newPopovers, popover) => {
+              if (popover.id === popoverId) {
+                return [...newPopovers, { ...popover, ...popoverData }];
+              }
+
+              return [...newPopovers, popover];
+            }, [])
+          );
+        },
+        removePopover,
+        popovers,
+      }}
+    >
+      {popovers.map((popover: IPopoverData) => (
+        <Popover {...popover} key={popover.id} />
+      ))}
+      {children}
+    </PopoverContext.Provider>
+  );
+};
+
+export default PopoverProvider;

package/src/containers/ReqoreProvider.tsx

@@ -0,0 +1,194 @@
+import { size } from 'lodash';
+import React, { useRef, useState } from 'react';
+import { useMedia } from 'react-use';
+import shortid from 'shortid';
+import { ReqoreModal } from '..';
+import ReqoreNotificationsWrapper, {
+  IReqoreNotificationsPosition,
+} from '../components/Notifications';
+import ReqoreNotification, {
+  IReqoreNotificationType,
+} from '../components/Notifications/notification';
+import { TSizes } from '../constants/sizes';
+import { IReqoreIntent } from '../constants/theme';
+import ReqoreContext from '../context/ReqoreContext';
+import { IReqoreIconName } from '../types/icons';
+
+export interface IReqoreNotificationData {
+  title?: string;
+  content: string;
+  duration?: number;
+  icon?: IReqoreIconName;
+  onClick?: (id?: string) => any;
+  onClose?: (id?: string) => any;
+  onFinish?: (id?: string) => any;
+  id?: string;
+  type?: IReqoreNotificationType;
+  intent?: IReqoreIntent;
+  flat?: boolean;
+  inverted?: boolean;
+  size?: TSizes;
+}
+
+export interface IReqoreNotifications {
+  children: any;
+  position?: IReqoreNotificationsPosition;
+}
+
+export interface IReqoreConfirmationModal {
+  title?: string;
+  description?: string;
+  onConfirm?: () => void;
+  onCancel?: () => void;
+  confirmButtonIntent?: IReqoreIntent;
+  confirmLabel?: string;
+  confirmIcon?: IReqoreIconName;
+  cancelLabel?: string;
+  isOpen?: boolean;
+  intent?: IReqoreIntent;
+}
+
+const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, position }) => {
+  const [notifications, setNotifications] = useState<IReqoreNotificationData[] | null>([]);
+  const [confirmationModal, setConfirmationModal] = useState<IReqoreConfirmationModal>({});
+  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 = (): number => {
+    latestZIndex.current += 1;
+
+    return 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 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,
+          addNotification,
+          removeNotification,
+          confirmAction,
+          isMobile,
+          isTablet,
+          isMobileOrTablet,
+          getAndIncreaseZIndex,
+        }}
+      >
+        {size(notifications) > 0 ? (
+          <ReqoreNotificationsWrapper position={position}>
+            {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}
+        <ReqoreModal
+          isOpen={confirmationModal.isOpen}
+          flat
+          opacity={0.9}
+          blur={2}
+          intent={confirmationModal.intent}
+          label={confirmationModal.title || 'Confirm your action'}
+          icon='ErrorWarningFill'
+          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',
+            },
+          ]}
+        >
+          {confirmationModal.description || 'Are you sure you want to proceed?'}
+        </ReqoreModal>
+      </ReqoreContext.Provider>
+    </>
+  );
+};
+
+export default ReqoreProvider;

package/src/containers/ThemeProvider.tsx

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+import { ThemeProvider } from 'styled-components';
+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

@@ -0,0 +1,54 @@
+import { cloneDeep } from 'lodash';
+import merge from 'lodash/merge';
+import React, { useState } from 'react';
+import styled 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 } from '../helpers/colors';
+import PopoverProvider from './PopoverProvider';
+import ReqoreProvider from './ReqoreProvider';
+
+export interface IReqoreUIProviderProps {
+  children: any;
+  theme?: Partial<IReqoreTheme>;
+  notificationsPosition?: IReqoreNotificationsPosition;
+  withSidebar?: boolean;
+  uiScale?: number;
+}
+
+const StyledPortal = styled.div`
+  z-index: 9999;
+`;
+
+const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({
+  children,
+  theme,
+  notificationsPosition,
+  withSidebar,
+  uiScale,
+}) => {
+  const [modalPortal, setModalPortal] = useState<any>(false);
+
+  const _theme: Partial<IReqoreTheme> = cloneDeep(theme || {});
+  const _defaultTheme: IReqoreTheme = cloneDeep(DEFAULT_THEME);
+  const rebuiltTheme: IReqoreTheme = buildTheme(merge(_defaultTheme, _theme));
+
+  return (
+    <>
+      <ThemeContext.Provider value={{ ...rebuiltTheme }}>
+        <ReqoreLayoutWrapper withSidebar={withSidebar}>
+          {modalPortal ? (
+            <ReqoreProvider position={notificationsPosition}>
+              <PopoverProvider uiScale={uiScale}>{children}</PopoverProvider>
+            </ReqoreProvider>
+          ) : null}
+        </ReqoreLayoutWrapper>
+      </ThemeContext.Provider>
+      <StyledPortal id='reqore-portal' ref={setModalPortal} />
+    </>
+  );
+};
+
+export default ReqoreUIProvider;

package/src/context/PopoverContext.tsx

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

package/src/context/ReqoreContext.tsx

@@ -0,0 +1,20 @@
+import { createContext } from 'react';
+import { IReqoreConfirmationModal, IReqoreNotificationData } from '../containers/ReqoreProvider';
+
+export interface IReqoreContext {
+  readonly confirmAction: (data: IReqoreConfirmationModal) => void;
+  readonly notifications?: IReqoreNotificationData[] | null;
+  readonly addNotification?: (data: IReqoreNotificationData) => any;
+  readonly removeNotification?: (id: string) => any;
+  readonly isMobile?: boolean;
+  readonly isTablet?: boolean;
+  readonly isMobileOrTablet?: boolean;
+  readonly getAndIncreaseZIndex?: () => number;
+}
+
+export default createContext<IReqoreContext>({
+  confirmAction: null,
+  notifications: null,
+  addNotification: null,
+  removeNotification: null,
+});

package/src/context/ThemeContext.tsx

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

package/src/helpers/animations.ts

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

package/src/helpers/colors.ts

@@ -0,0 +1,127 @@
+import { cloneDeep, merge } from 'lodash';
+import { darken, lighten, readableColor } from 'polished';
+import { Colors } from '../constants/colors';
+import { DEFAULT_INTENTS, IReqoreIntent, IReqoreTheme } from '../constants/theme';
+
+export const getReadableColor: (
+  theme: Partial<IReqoreTheme>,
+  ifLight?: string,
+  ifDark?: string,
+  dimmed?: boolean,
+  fallback?: string
+) => string = (theme, ifLight, ifDark, dimmed, fallback) => {
+  if (theme.text?.color) {
+    return theme.text.dim
+      ? dimmed
+        ? changeDarkness(theme.text.color, 0.05)
+        : theme.text.color
+      : theme.text.color;
+  }
+
+  const shouldDim = theme.text?.dim && dimmed;
+  const from = fallback || theme.main!;
+
+  return getReadableColorFrom(from, shouldDim, ifLight, ifDark);
+};
+
+export const getReadableColorFrom = (
+  from: string,
+  dim?: boolean,
+  ifLight?: string,
+  ifDark?: string
+) => {
+  const returnIfLight = ifLight || lighten(dim ? 0.05 : 0, Colors.DARK);
+  const returnIfDark = ifDark || darken(dim ? 0.05 : 0, Colors.LIGHT);
+
+  return readableColor(from, returnIfLight, returnIfDark, false);
+};
+
+export const shouldDarken = (mainColor: string) => {
+  const contrast = getColorByBgColor(mainColor);
+
+  return contrast === '#000000';
+};
+
+export const getMainColor: (theme: IReqoreTheme, component: string) => string = (
+  theme,
+  component
+) => theme[component]?.main || theme.main;
+
+export const changeLightness = (color: string, lightness?: number): string =>
+  lightness ? (shouldDarken(color) ? darken(lightness, color) : lighten(lightness, color)) : color;
+
+export const changeDarkness = (color: string, lightness?: number): string =>
+  lightness ? (shouldDarken(color) ? lighten(lightness, color) : darken(lightness, color)) : color;
+
+export const getColorByBgColor = (bgColor) => {
+  if (!bgColor) {
+    return '';
+  }
+  return parseInt(bgColor.replace('#', ''), 16) > 0xffffff / 2 ? '#000000' : '#ffffff';
+};
+
+export const isValidSixCharHex = (hex: string): boolean => {
+  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(hex);
+};
+
+export const buildTheme = (theme: IReqoreTheme): IReqoreTheme => {
+  const newTheme: IReqoreTheme = cloneDeep(theme);
+
+  // Check if the main color is a valid hex color
+  if (!isValidSixCharHex(newTheme.main)) {
+    newTheme.main = '#333333';
+  }
+
+  if (!newTheme.notifications?.info) {
+    newTheme.notifications.info = newTheme.intents.info || DEFAULT_INTENTS.info;
+  }
+
+  if (!newTheme.notifications?.success) {
+    newTheme.notifications.success = newTheme.intents.success || DEFAULT_INTENTS.success;
+  }
+
+  if (!newTheme.notifications?.pending) {
+    newTheme.notifications.pending = newTheme.intents.pending || DEFAULT_INTENTS.pending;
+  }
+
+  if (!newTheme.notifications?.warning) {
+    newTheme.notifications.warning = newTheme.intents.warning || DEFAULT_INTENTS.warning;
+  }
+
+  if (!newTheme.notifications?.danger) {
+    newTheme.notifications.danger = newTheme.intents.danger || DEFAULT_INTENTS.danger;
+  }
+
+  if (!newTheme.notifications?.muted) {
+    newTheme.notifications.muted = newTheme.intents.muted || DEFAULT_INTENTS.muted;
+  }
+
+  return newTheme;
+};
+
+export const mergeThemes = (element: string, theme: IReqoreTheme, customTheme: any) => {
+  const clonedTheme = cloneDeep(theme);
+
+  if (!customTheme) {
+    return clonedTheme;
+  }
+
+  if (element === 'main' && customTheme) {
+    merge(clonedTheme, { main: customTheme.main });
+  } else {
+    merge(clonedTheme, { [element]: customTheme || {} });
+  }
+
+  return clonedTheme;
+};
+
+export const getNotificationIntent = (theme: IReqoreTheme, intent?: IReqoreIntent) => {
+  if (intent) {
+    return theme.notifications[intent];
+  }
+
+  return theme.main;
+};
+
+export const getMainBackgroundColor = (theme: IReqoreTheme): string =>
+  changeLightness(theme.main, 0.02);