@qoretechnologies/reqore 0.43.0 → 0.45.0

package/src/constants/sizes.ts

@@ -1,185 +0,0 @@
-export type TSizes = 'tiny' | 'small' | 'normal' | 'big' | 'huge';
-export type TWeights = 'soft' | 'normal' | 'heavy';
-
-export const ReqoreSizes = {
-  TINY: 'tiny',
-  SMALL: 'small',
-  NORMAL: 'normal',
-  BIG: 'big',
-  HUGE: 'huge',
-};
-
-export const SIZES = ['tiny', 'small', 'normal', 'big', 'huge'] as const;
-
-export const SIZE_TO_MODIFIER = {
-  tiny: 0.6,
-  small: 0.8,
-  normal: 1,
-  big: 1.2,
-  huge: 1.4,
-};
-
-export const LINE_SIZE_TO_NUMBER = {
-  none: 0,
-  tiny: 1,
-  small: 1,
-  normal: 1.5,
-  big: 2,
-  huge: 3,
-};
-
-export const SIZE_TO_NUMBER = {
-  none: 0,
-  tiny: 1,
-  small: 2,
-  normal: 3,
-  big: 4,
-  huge: 5,
-};
-
-export const NUMBER_TO_SIZE = {
-  1: 'tiny',
-  2: 'small',
-  3: 'normal',
-  4: 'big',
-  5: 'huge',
-};
-
-export const HEADER_SIZE_TO_NUMBER = {
-  tiny: 5,
-  small: 4,
-  normal: 3,
-  big: 2,
-  huge: 1,
-};
-
-export const SIZE_TO_PX = {
-  tiny: 18,
-  small: 24,
-  normal: 30,
-  big: 40,
-  huge: 50,
-};
-
-export const BADGE_SIZE_TO_PX = {
-  tiny: 14,
-  small: 20,
-  normal: 26,
-  big: 32,
-  huge: 38,
-};
-
-export const TABS_SIZE_TO_PX = {
-  tiny: 20,
-  small: 30,
-  normal: 40,
-  big: 50,
-  huge: 60,
-};
-
-export const TABLE_SIZE_TO_PX = {
-  tiny: 20,
-  small: 30,
-  normal: 40,
-  big: 50,
-  huge: 60,
-};
-
-export const TABS_PADDING_TO_PX = {
-  tiny: 5,
-  small: 5,
-  normal: 5,
-  big: 5,
-  huge: 5,
-};
-
-export const MARGIN_FROM_SIZE = {
-  tiny: 0,
-  small: 0,
-  normal: 10,
-  big: 20,
-  huge: 30,
-};
-
-export const TEXT_FROM_SIZE = {
-  tiny: 9,
-  small: 12,
-  normal: 15,
-  big: 18,
-  huge: 21,
-};
-
-export const CONTROL_TEXT_FROM_SIZE = {
-  tiny: 7,
-  small: 10,
-  normal: 13,
-  big: 16,
-  huge: 19,
-};
-
-export const ICON_FROM_SIZE = {
-  tiny: 13,
-  small: 17,
-  normal: 20,
-  big: 26,
-  huge: 33,
-};
-
-export const HALF_PADDING_FROM_SIZE = {
-  tiny: 2,
-  small: 4,
-  normal: 5,
-  big: 7,
-  huge: 9,
-};
-
-export const PADDING_FROM_SIZE = {
-  tiny: 5,
-  small: 8,
-  normal: 11,
-  big: 14,
-  huge: 17,
-};
-
-export const RADIUS_FROM_SIZE = {
-  tiny: 4,
-  small: 5,
-  normal: 5.5,
-  big: 7,
-  huge: 9,
-};
-
-export const GAP_FROM_SIZE = {
-  tiny: 1,
-  small: 3,
-  normal: 5,
-  big: 18,
-  huge: 30,
-};
-
-export const ICON_FROM_HEADER_SIZE = {
-  1: 23,
-  2: 20,
-  3: 17,
-  4: 14,
-  5: 11,
-  6: 8,
-};
-
-export const ICON_WRAPPER_FROM_HEADER_SIZE = {
-  huge: 34,
-  big: 26,
-  normal: 19,
-  small: 17,
-  tiny: 15,
-};
-
-export const WEIGHT_TO_NUMBER = {
-  thin: 100,
-  light: 250,
-  normal: 400,
-  bold: 550,
-  thick: 700,
-};
-
-export const PILL_RADIUS_MODIFIER = 2.5;

package/src/constants/theme.ts

@@ -1,122 +0,0 @@
-import {
-  TReqoreEffectColor,
-  TReqoreEffectGradientAnimationTrigger,
-  TReqoreHexColor,
-} from '../components/Effect';
-import { Colors } from './colors';
-
-export interface IReqoreSidebarTheme {
-  main?: TReqoreHexColor;
-  color?: TReqoreHexColor;
-  border?: TReqoreHexColor;
-  item?: {
-    color?: TReqoreHexColor;
-    background?: TReqoreHexColor;
-    border?: TReqoreHexColor;
-    hoverColor?: TReqoreHexColor;
-    hoverBackground?: TReqoreHexColor;
-    activeColor?: TReqoreHexColor;
-    activeBackground?: TReqoreHexColor;
-  };
-  subItem?: {
-    color?: TReqoreHexColor;
-    border?: TReqoreHexColor;
-    background?: TReqoreHexColor;
-    hoverColor?: TReqoreHexColor;
-    hoverBackground?: TReqoreHexColor;
-    activeColor?: TReqoreHexColor;
-    activeBackground?: TReqoreHexColor;
-  };
-  icon?: {
-    color?: TReqoreHexColor;
-    hoverColor?: TReqoreHexColor;
-    activeColor?: TReqoreHexColor;
-  };
-  section?: {
-    background?: TReqoreHexColor;
-  };
-}
-
-export interface IReqoreBreadcrumbsTheme {
-  main?: TReqoreHexColor;
-  item?: {
-    color?: TReqoreHexColor;
-    hoverColor?: TReqoreHexColor;
-    activeColor?: TReqoreHexColor;
-  };
-}
-
-export interface IReqoreNavbarTheme {
-  main?: TReqoreHexColor;
-  color?: TReqoreHexColor;
-  border?: TReqoreHexColor;
-  background?: TReqoreHexColor;
-  hoverColor?: TReqoreHexColor;
-}
-
-export interface IReqoreTheme {
-  main: TReqoreHexColor;
-  originalMain?: TReqoreHexColor;
-  text?: {
-    color?: TReqoreHexColor;
-    dim?: boolean;
-  };
-  intents: IReqoreIntents;
-  sidebar?: IReqoreSidebarTheme;
-  notifications: IReqoreIntents;
-  popover?: {
-    main: TReqoreHexColor;
-  };
-  header?: IReqoreNavbarTheme;
-  footer?: IReqoreNavbarTheme;
-  breadcrumbs?: IReqoreBreadcrumbsTheme;
-  buttons?: IReqoreCustomTheme;
-}
-
-export interface IReqoreCustomTheme {
-  main?: TReqoreEffectColor;
-  text?: {
-    color?: TReqoreEffectColor;
-    dim?: boolean;
-  };
-  gradient?: boolean;
-  animate?: TReqoreEffectGradientAnimationTrigger;
-}
-
-export interface IReqoreIntents {
-  info?: TReqoreHexColor;
-  success?: TReqoreHexColor;
-  pending?: TReqoreHexColor;
-  warning?: TReqoreHexColor;
-  danger?: TReqoreHexColor;
-  muted?: TReqoreHexColor;
-}
-
-export type TReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';
-
-export const DEFAULT_INTENTS: IReqoreIntents = {
-  info: Colors.BLUE,
-  success: Colors.GREEN,
-  pending: Colors.YELLOW,
-  warning: Colors.ORANGE,
-  danger: Colors.RED,
-  muted: Colors.GRAY,
-};
-
-export const DEFAULT_THEME: IReqoreTheme = {
-  main: Colors.DARK_THEME,
-  text: {
-    dim: true,
-  },
-  intents: DEFAULT_INTENTS,
-  notifications: {},
-};
-
-export const ReqoreIntents: { [key: string]: TReqoreIntent } = {
-  INFO: 'info',
-  SUCCESS: 'success',
-  PENDING: 'pending',
-  WARNING: 'warning',
-  DANGER: 'danger',
-  MUTED: 'muted',
-};

package/src/containers/Paging.tsx

@@ -1,136 +0,0 @@
-import { memo, useMemo } from 'react';
-import {
-  IReqorePaginationComponentProps,
-  IReqorePaginationProps,
-  ReqorePagination,
-} from '../components/Paging';
-import { ReqoreVerticalSpacer } from '../components/Spacer';
-import {
-  getPaginationOptionsFromType,
-  TReqorePaginationType,
-  TReqorePaginationTypeResult,
-} from '../constants/paging';
-import { PADDING_FROM_SIZE, TSizes } from '../constants/sizes';
-import { IReqorePagingResult, useReqorePaging } from '../hooks/usePaging';
-
-export interface IReqorePagingContainerProps<T> {
-  type?: TReqorePaginationType<T>;
-  items: T[];
-  scrollContainer?: IReqorePaginationComponentProps['scrollContainer'];
-  children: (
-    items: T[],
-    Controls: JSX.Element,
-    options: TReqorePaginationTypeResult<T>
-  ) => React.ReactNode;
-  size?: TSizes;
-}
-
-function PagingControls<T>({
-  withSpacer,
-  position,
-  pagingData,
-  componentOptions,
-  scrollContainer,
-  size,
-  ...pagingProps
-}: Partial<IReqorePaginationProps<T>> &
-  Partial<TReqorePaginationTypeResult<T>> & {
-    withSpacer?: boolean;
-    position?: 'top' | 'bottom';
-    pagingData: Omit<IReqorePagingResult<T>, 'items'>;
-  }) {
-  return pagingData.renderControls ? (
-    <>
-      {withSpacer && position === 'bottom' ? (
-        <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[size]} />
-      ) : null}
-      <ReqorePagination
-        key={`reqore-pagination-${position}`}
-        size={size}
-        {...pagingData}
-        {...componentOptions}
-        scrollContainer={scrollContainer}
-        {...pagingProps}
-      />
-      {withSpacer && position === 'top' ? (
-        <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[size]} />
-      ) : null}
-    </>
-  ) : null;
-}
-
-function PagingContainer<T>({
-  type,
-  items,
-  scrollContainer,
-  children,
-  size = 'normal',
-}: IReqorePagingContainerProps<T>) {
-  const {
-    pagingOptions = {},
-    componentOptions = {},
-    pageControlsPosition = 'bottom',
-    includeTopControls = true,
-    includeBottomControls = true,
-  } = useMemo(() => getPaginationOptionsFromType(type), [type]);
-
-  const { items: finalItems, ...pagingData } = useReqorePaging({
-    items,
-    ...pagingOptions,
-    enabled: !!type,
-  });
-
-  return (
-    <>
-      {includeTopControls && (pageControlsPosition === 'top' || pageControlsPosition === 'both') ? (
-        <PagingControls<T>
-          key='top-paging'
-          position='top'
-          withSpacer
-          scrollContainer={scrollContainer}
-          size={size}
-          pagingData={pagingData}
-          pagingOptions={pagingOptions}
-          componentOptions={componentOptions}
-          autoLoadMore={false}
-          scrollOnLoadMore={false}
-        />
-      ) : null}
-
-      {children(
-        finalItems,
-        <PagingControls
-          key='custom-paging'
-          scrollContainer={scrollContainer}
-          size={size}
-          pagingData={pagingData}
-          pagingOptions={pagingOptions}
-          componentOptions={componentOptions}
-        />,
-        {
-          pagingOptions,
-          componentOptions,
-          pageControlsPosition,
-          includeTopControls,
-          includeBottomControls,
-        }
-      )}
-
-      {includeBottomControls &&
-      (pageControlsPosition === 'bottom' || pageControlsPosition === 'both') ? (
-        <PagingControls<T>
-          key='bottom-paging'
-          position='bottom'
-          withSpacer
-          scrollContainer={scrollContainer}
-          size={size}
-          pagingData={pagingData}
-          pagingOptions={pagingOptions}
-          componentOptions={componentOptions}
-        />
-      ) : null}
-    </>
-  );
-}
-
-export const ReqorePaginationContainer = memo(PagingContainer) as typeof PagingContainer;

package/src/containers/PopoverProvider.tsx

@@ -1,124 +0,0 @@
-import { size } from 'lodash';
-import React, { MutableRefObject, useCallback, useEffect, useState } from 'react';
-import { useReqoreProperty } from '..';
-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 closePopoversOnEscPress = useReqoreProperty('closePopoversOnEscPress');
-
-  const handleClick = useCallback(
-    (event: MouseEvent) => {
-      popovers.forEach(({ popperRef, closeOnAnyClick, closeOnOutsideClick, id, targetElement }) => {
-        if (closeOnAnyClick) {
-          removePopover(id);
-          return;
-        }
-
-        if (
-          closeOnOutsideClick &&
-          !(popperRef?.current && popperRef.current.contains(event.target)) &&
-          !targetElement?.contains(event.target as Node)
-        ) {
-          removePopover(id);
-        }
-      });
-    },
-    [popovers]
-  );
-
-  // Close last popover when ESC is pressed
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        const lastPopover = popovers[popovers.length - 1];
-
-        if (lastPopover) {
-          removePopover(lastPopover.id);
-        }
-      }
-    },
-    [popovers]
-  );
-
-  const removePopover = (id: string) => {
-    // Get the popover
-    const popover = popovers.find((p) => p.id === id);
-
-    if (popover) {
-      // Remove the blur
-      if (popover.blur) {
-        // Remove the blur
-        document.getElementById(`reqore-blur-${id}`)?.remove();
-        // Remove the z index class
-        popover.targetElement.classList.remove('reqore-blur-z-index');
-      }
-      // Remove the popover
-      setPopovers((cur: IPopoverData[]) => [...cur].filter((p) => p.id !== id));
-    }
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', handleClick, true);
-
-    if (closePopoversOnEscPress) {
-      document.addEventListener('keydown', handleKeyDown);
-    }
-
-    return () => {
-      document.removeEventListener('click', handleClick, true);
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [popovers]);
-
-  useEffect(() => {
-    if (!size(popovers)) {
-      document.removeEventListener('click', handleClick, true);
-      document.removeEventListener('keydown', handleKeyDown);
-    }
-  }, [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];
-            }, [])
-          );
-        },
-        isPopoverOpen: (popoverId: string) => !!popovers.find((p) => p.id === popoverId),
-        removePopover,
-        popovers,
-      }}
-    >
-      {popovers.map((popover: IPopoverData) => (
-        <Popover {...popover} key={popover.id} />
-      ))}
-      {children}
-    </PopoverContext.Provider>
-  );
-};
-
-export default PopoverProvider;