@qoretechnologies/reqore 0.43.0 → 0.45.0

package/src/components/InternalPopover/index.tsx

@@ -1,303 +0,0 @@
-import { cloneDeep, isString } from 'lodash';
-import { rgba } from 'polished';
-import React, { MutableRefObject, memo, useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { usePopper } from 'react-popper';
-import { useUnmount, useUpdateEffect } from 'react-use';
-import styled, { css } from 'styled-components';
-import { useContext } from 'use-context-selector';
-import { RADIUS_FROM_SIZE } from '../../constants/sizes';
-import { IReqoreTheme } from '../../constants/theme';
-import { IPopoverData } from '../../containers/PopoverProvider';
-import ReqoreThemeProvider from '../../containers/ThemeProvider';
-import PopoverContext from '../../context/PopoverContext';
-import { fadeIn } from '../../helpers/animations';
-import {
-  changeLightness,
-  getColorFromMaybeString,
-  getNotificationIntent,
-} from '../../helpers/colors';
-import ReqoreMessage from '../Message';
-
-const getPopoverArrowColor = ({ theme, dim, intent, flat, effect, isOpaque }) =>
-  rgba(
-    effect
-      ? changeLightness(
-          getColorFromMaybeString(
-            theme,
-            effect.gradient.borderColor || Object.values(effect.gradient.colors)[0]
-          ),
-          0.04
-        )
-      : intent
-      ? changeLightness(getNotificationIntent(theme, intent), flat ? 0.1 : 0.2)
-      : theme.popover?.main ||
-        rgba(
-          changeLightness(
-            flat ? theme.main : getNotificationIntent(theme, intent),
-            flat ? 0.1 : 0.2
-          ),
-          isOpaque ? 1 : 0.3
-        ),
-    dim ? 0.3 : 1
-  );
-
-const StyledPopoverArrow = styled.div<{ theme: IReqoreTheme }>`
-  width: 10px;
-  height: 10px;
-  position: absolute;
-  z-index: -1;
-
-  &:before {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    position: absolute;
-    z-index: -1;
-  }
-`;
-
-const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
-  animation: 0.2s ${fadeIn} ease-out;
-  max-width: ${({ maxWidth }) => maxWidth};
-  max-height: ${({ maxHeight }) => maxHeight};
-  z-index: 999999;
-  border-radius: ${RADIUS_FROM_SIZE.normal}px;
-  border: ${({ flat, noWrapper, ...rest }: any) =>
-    !flat && noWrapper ? `1px solid ${getPopoverArrowColor({ ...rest, flat })}` : undefined};
-
-  ${({ transparent }) =>
-    !transparent &&
-    css`
-      box-shadow: rgba(31, 26, 34, 0.7) 0px 0px 10px;
-    `}
-
-  &[data-popper-placement^='top'] > ${StyledPopoverArrow} {
-    bottom: -5px;
-
-    &:before {
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
-      border-top: 10px solid ${(props) => getPopoverArrowColor(props)};
-
-      top: 5px;
-      left: -5px;
-    }
-  }
-
-  &[data-popper-placement^='bottom'] > ${StyledPopoverArrow} {
-    top: -5px;
-
-    &:before {
-      border-left: 10px solid transparent;
-      border-right: 10px solid transparent;
-      border-bottom: 10px solid ${(props) => getPopoverArrowColor(props)};
-
-      top: -5px;
-      left: -5px;
-    }
-  }
-
-  &[data-popper-placement^='left'] > ${StyledPopoverArrow} {
-    right: -5px;
-
-    &:before {
-      border-top: 10px solid transparent;
-      border-bottom: 10px solid transparent;
-      border-left: 10px solid ${(props) => getPopoverArrowColor(props)};
-
-      top: -5px;
-      left: 5px;
-    }
-  }
-
-  &[data-popper-placement^='right'] > ${StyledPopoverArrow} {
-    left: -5px;
-
-    &:before {
-      border-top: 10px solid transparent;
-      border-bottom: 10px solid transparent;
-      border-right: 10px solid ${(props) => getPopoverArrowColor(props)};
-
-      top: -5px;
-      left: -5px;
-    }
-  }
-
-  &[data-popper-reference-hidden='true'] {
-    visibility: hidden;
-    pointer-events: none;
-  }
-`;
-
-const StyledPopoverContent = styled.div`
-  width: 100%;
-  height: 100%;
-  z-index: 20;
-  position: relative;
-  overflow: hidden;
-`;
-
-export interface IReqoreInternalPopoverProps extends IPopoverData {}
-
-const InternalPopover: React.FC<IReqoreInternalPopoverProps> = memo(
-  ({
-    targetElement,
-    content,
-    id,
-    placement,
-    noArrow,
-    noWrapper,
-    useTargetWidth,
-    transparent,
-    maxWidth,
-    maxHeight,
-    intent,
-    title,
-    icon,
-    minimal,
-    flat = true,
-    uiScale,
-    effect,
-  }) => {
-    const { removePopover, updatePopover, uiScale: globalUiScale } = useContext(PopoverContext);
-    const [popperElement, setPopperElement] = useState(null);
-    const [arrowElement, setArrowElement] = useState(null);
-    const popperRef: MutableRefObject<any> = useRef(null);
-    const mutationObserber: MutableRefObject<any> = useRef(null);
-    const { styles, attributes, forceUpdate, state } = usePopper(targetElement, popperElement, {
-      placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, noArrow ? 5 : 10],
-          },
-        },
-        {
-          name: 'arrow',
-          options: {
-            element: arrowElement,
-          },
-        },
-        {
-          name: 'hide',
-          enabled: true,
-        },
-      ],
-    });
-
-    useUpdateEffect(() => {
-      if (!mutationObserber.current && targetElement && state) {
-        // Watch for changes in the target element
-        const observer = new MutationObserver(() => {
-          forceUpdate();
-        });
-
-        observer.observe(document, {
-          attributes: true,
-          childList: true,
-          subtree: true,
-        });
-
-        mutationObserber.current = observer;
-      }
-    }, [styles, attributes, state]);
-
-    useUnmount(() => {
-      mutationObserber.current?.disconnect();
-    });
-
-    useEffect(() => {
-      if (popperRef.current) {
-        updatePopover?.(id, { popperRef: cloneDeep(popperRef) });
-      }
-    }, [popperRef]);
-
-    useEffect(() => {
-      if (attributes.popper?.['data-popper-reference-hidden']) {
-        removePopover?.(id);
-      }
-    }, [attributes.popper]);
-
-    /* Getting the x and y values from the transform property of the popper element. */
-    const translateValues = styles.popper.transform
-      ?.replace('translate3d(', '')
-      .replace('translate(', '')
-      .replace(')', '')
-      .split(',')
-      .map((axis) => {
-        const scale = uiScale || globalUiScale;
-        let modifiedAxis = parseInt(axis, 10);
-
-        if (scale || scale === 0) {
-          modifiedAxis =
-            parseInt(axis, 10) < 0 ? parseInt(axis, 10) * scale : parseInt(axis, 10) / scale;
-        }
-
-        return modifiedAxis;
-      });
-
-    return createPortal(
-      <ReqoreThemeProvider>
-        <StyledPopoverWrapper
-          maxWidth={maxWidth}
-          maxHeight={maxHeight}
-          transparent={transparent}
-          effect={effect}
-          isOpaque={!transparent && !minimal}
-          intent={intent}
-          flat={flat}
-          noWrapper={noWrapper}
-          dim={flat && !transparent && !effect && minimal}
-          className='reqore-popover-content'
-          ref={(el) => {
-            setPopperElement(el);
-            popperRef.current = el;
-          }}
-          style={{
-            ...styles.popper,
-            transform: `translate(${translateValues?.[0] || 0}px, ${translateValues?.[1] || 0}px)`,
-            width: useTargetWidth && (targetElement?.getBoundingClientRect()?.width || undefined),
-          }}
-          {...attributes.popper}
-        >
-          {!noArrow && !transparent ? (
-            <StyledPopoverArrow ref={setArrowElement} style={styles.arrow} data-popper-arrow />
-          ) : null}
-          <StyledPopoverContent>
-            {!noWrapper || isString(content) ? (
-              <ReqoreMessage
-                opaque={!transparent && !minimal}
-                className='reqore-popover-text'
-                intent={intent}
-                title={title}
-                icon={icon}
-                minimal={transparent}
-                flat={flat || transparent}
-                effect={effect}
-              >
-                {content}
-              </ReqoreMessage>
-            ) : (
-              <>
-                {React.Children.map(content, (child) =>
-                  child
-                    ? React.cloneElement(child, {
-                        _insidePopover: true,
-                        _popoverId: id,
-                      })
-                    : null
-                )}
-              </>
-            )}
-          </StyledPopoverContent>
-        </StyledPopoverWrapper>
-      </ReqoreThemeProvider>,
-      document.querySelector('#reqore-portal')!
-    );
-  }
-);
-
-export default InternalPopover;

package/src/components/KeyValueTable/index.tsx

@@ -1,192 +0,0 @@
-import { keys, omit } from 'lodash';
-import { useMemo } from 'react';
-import { TReqoreIntent } from '../../constants/theme';
-import { IReqoreTooltip } from '../../types/global';
-import { IReqoreIconName } from '../../types/icons';
-import { IReqoreButtonProps } from '../Button';
-import { IReqoreExportModalProps } from '../ExportModal';
-import { IReqorePanelProps } from '../Panel';
-import ReqoreTable, {
-  IReqoreTableColumn,
-  IReqoreTableProps,
-  IReqoreTableRowData,
-  TReqoreTableColumnContent,
-} from '../Table';
-import { IReqoreTableValueProps, ReqoreTableValue } from '../Table/value';
-
-export type TReqoreKeyValueTablePrimitiveValue = string | number | boolean | null | undefined;
-export type TReqoreKeyValueTableValue =
-  | TReqoreKeyValueTablePrimitiveValue
-  | TReqoreKeyValueTablePrimitiveValue[]
-  | { [key: string]: TReqoreKeyValueTableValue };
-export type TReqoreKeyValueTableExportMapper = (
-  data: { tableKey: TReqoreTableColumnContent; value: TReqoreTableColumnContent }[]
-) => IReqoreExportModalProps['data'];
-
-export interface IReqoreKeyValueTableProps
-  extends IReqorePanelProps,
-    Pick<
-      IReqoreTableProps,
-      | 'striped'
-      | 'width'
-      | 'height'
-      | 'fill'
-      | 'filterable'
-      | 'exportable'
-      | 'filter'
-      | 'onFilterChange'
-      | 'filterProps'
-      | 'zoomable'
-      | 'wrapperSize'
-      | 'paging'
-      | 'onRowClick'
-    > {
-  data: { [key: string | number]: TReqoreKeyValueTableValue };
-
-  keyLabel?: string;
-  keyIcon?: IReqoreIconName;
-  keyTooltip?: (key: string | number) => string | IReqoreTooltip;
-  keyColumnIntent?: TReqoreIntent;
-  keyAlign?: IReqoreTableColumn['align'];
-  maxKeyWidth?: number;
-
-  sortable?: boolean;
-
-  rowActions?: Partial<Omit<IReqoreTableColumn, 'cell'>> & {
-    actions: (
-      key: string,
-      value: TReqoreKeyValueTableValue
-    ) => Omit<IReqoreButtonProps, 'rightIcon' | 'label' | 'children'>[];
-  };
-
-  valueLabel?: string;
-  valueIcon?: IReqoreIconName;
-  valueTooltip?: (value: TReqoreKeyValueTableValue) => string | IReqoreTooltip;
-  valueAlign?: IReqoreTableColumn['align'];
-  minValueWidth?: number;
-  defaultValueFilter?: string | number;
-
-  keyRenderer?: (keyLabel: string | number) => string | number;
-
-  valueRenderer?: (
-    data: IReqoreTableRowData,
-    defaultComponent?: ({ value }: IReqoreTableValueProps) => any
-  ) => any;
-
-  exportMapper?: TReqoreKeyValueTableExportMapper;
-}
-
-export const ReqoreKeyValueTable = ({
-  data,
-  keyLabel,
-  keyIcon,
-  keyRenderer,
-  keyTooltip,
-  valueLabel,
-  valueIcon,
-  valueTooltip,
-  valueRenderer,
-  keyColumnIntent,
-  minValueWidth = 100,
-  maxKeyWidth = 200,
-  keyAlign = 'left',
-  valueAlign = 'left',
-  defaultValueFilter,
-  sortable,
-  rowActions,
-  ...rest
-}: IReqoreKeyValueTableProps) => {
-  const { columns, items } = useMemo(() => {
-    const columns: IReqoreTableColumn[] = [
-      {
-        dataId: 'tableKey',
-        grow: 1,
-        sortable,
-        width: maxKeyWidth < 150 ? maxKeyWidth : 150,
-        pin: 'left',
-        hideable: false,
-        intent: keyColumnIntent,
-        maxWidth: maxKeyWidth,
-        align: keyAlign,
-
-        header: {
-          icon: keyIcon,
-          label: keyLabel,
-        },
-
-        cell: {
-          tooltip: keyTooltip ? (cellValue) => keyTooltip(cellValue) : undefined,
-          content: keyRenderer ? ({ tableKey }) => keyRenderer(tableKey) : 'title',
-        },
-      },
-      {
-        dataId: 'value',
-        grow: 3,
-        sortable,
-        hideable: false,
-        filterable: true,
-        pinnable: false,
-        minWidth: minValueWidth,
-        filter: defaultValueFilter,
-        align: valueAlign,
-
-        header: {
-          icon: valueIcon,
-          label: valueLabel,
-        },
-
-        cell: {
-          tooltip: valueTooltip ? (cellValue) => valueTooltip(cellValue) : undefined,
-          content: (data) =>
-            valueRenderer?.(data, ReqoreTableValue) || <ReqoreTableValue value={data.value} />,
-        },
-      },
-    ];
-
-    if (rowActions) {
-      columns.push({
-        dataId: 'actions',
-        hideable: false,
-        pin: 'right',
-        header: {
-          icon: 'SettingsLine',
-        },
-        align: 'center',
-        ...omit(rowActions, ['actions']),
-        cell: {
-          padded: 'none',
-          actions: (data) => rowActions.actions(data.tableKey, data.value),
-        },
-      });
-    }
-
-    const items: IReqoreTableRowData[] = [];
-
-    keys(data).map((key) => {
-      items.push({
-        tableKey: key,
-        value: data[key],
-      });
-    });
-
-    return { columns, items };
-  }, [data]);
-
-  return (
-    <ReqoreTable
-      columns={columns}
-      data={items}
-      {...rest}
-      sort={
-        sortable
-          ? {
-              by: 'tableKey',
-              thenBy: 'value',
-              direction: 'asc',
-            }
-          : undefined
-      }
-      className={`${rest.className || ''} reqore-key-value-table`}
-    />
-  );
-};

package/src/components/Label/index.tsx

@@ -1,10 +0,0 @@
-import React, { forwardRef, Ref } from 'react';
-import ReqoreTag, { IReqoreCustomTagProps } from '../Tag';
-
-export interface IReqoreLabelProps
-  extends IReqoreCustomTagProps,
-    Omit<React.ComponentPropsWithoutRef<'label'>, 'color'> {}
-
-export const ReqoreLabel = forwardRef((props: IReqoreLabelProps, ref: Ref<HTMLLabelElement>) => {
-  return <ReqoreTag as='label' color='transparent' {...props} ref={ref} />;
-});

package/src/components/Layout/content.tsx

@@ -1,31 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-export interface IReqoreLayoutContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  children?: any;
-  withSidebar?: boolean;
-}
-
-const StyledReqoreLayoutContent = styled.div`
-  display: flex;
-  height: 100%;
-  flex: 1;
-  overflow: hidden;
-  flex-flow: column;
-`;
-
-const ReqoreLayoutWrapper = ({
-  children,
-  className,
-  ...rest
-}: IReqoreLayoutContentProps) => (
-  <StyledReqoreLayoutContent
-    {...rest}
-    className={`${className || ""} reqore-layout-content`}
-  >
-    {children}
-  </StyledReqoreLayoutContent>
-);
-
-export default ReqoreLayoutWrapper;

package/src/components/Layout/index.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { IReqoreTheme } from '../../constants/theme';
-import ReqoreThemeProvider from '../../containers/ThemeProvider';
-import { changeLightness, getReadableColor } from '../../helpers/colors';
-
-export interface IReqoreLayoutWrapperProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  children?: any;
-  withSidebar?: boolean;
-}
-
-const StyledReqoreLayoutWrapper = styled.div<{
-  withSidebar: boolean;
-  theme: IReqoreTheme;
-}>`
-  display: flex;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  font-size: 14px;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  ${({ withSidebar, theme }) => css`
-    flex-flow: ${withSidebar ? 'row' : 'column'};
-    background-color: ${changeLightness(theme.main, 0.02)};
-    color: ${getReadableColor(theme, undefined, undefined, true)};
-  `}
-`;
-
-const ReqoreLayoutWrapper = ({
-  withSidebar,
-  children,
-  className,
-  ...rest
-}: IReqoreLayoutWrapperProps) => (
-  <ReqoreThemeProvider>
-    <StyledReqoreLayoutWrapper
-      {...rest}
-      className={`${className || ''} reqore-layout-wrapper`}
-      withSidebar={withSidebar}
-    >
-      {children}
-    </StyledReqoreLayoutWrapper>
-  </ReqoreThemeProvider>
-);
-
-export default ReqoreLayoutWrapper;

package/src/components/Menu/divider.tsx

@@ -1,92 +0,0 @@
-import React, { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { PADDING_FROM_SIZE } from '../../constants/sizes';
-import { getReadableColor } from '../../helpers/colors';
-import { getOneLessSize, isStringSize } from '../../helpers/utils';
-import { IWithReqoreEffect, IWithReqoreSize } from '../../types/global';
-import { IReqoreEffect, StyledTextEffect } from '../Effect';
-import { ReqoreVerticalSpacer } from '../Spacer';
-
-export interface IReqoreMenuDividerProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
-    IWithReqoreEffect,
-    IWithReqoreSize {
-  label?: string | number;
-  margin?: 'left' | 'right' | 'both' | 'none';
-  align?: 'left' | 'center' | 'right';
-  padded?: 'top' | 'bottom' | 'both' | 'none';
-  line?: boolean;
-}
-
-export const StyledMenuDivider = styled(StyledTextEffect)`
-  width: 100%;
-  padding: 0;
-  padding-top: ${({ padded, size }) =>
-    padded === 'top' || padded === 'both' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
-  padding-bottom: ${({ padded, size }) =>
-    padded === 'bottom' || padded === 'both' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
-  background-color: transparent;
-
-  ${({ margin, size }) =>
-    margin &&
-    css`
-      margin-left: ${margin === 'left' || margin === 'both'
-        ? isStringSize(size)
-          ? `${PADDING_FROM_SIZE[size]}px`
-          : '10px'
-        : undefined};
-      margin-right: ${margin === 'right' || margin === 'both'
-        ? isStringSize(size)
-          ? `${PADDING_FROM_SIZE[size]}px`
-          : '10px'
-        : undefined};
-    `}
-
-  color: ${({ theme }) => getReadableColor(theme, undefined, undefined)};
-`;
-
-const ReqoreMenuDivider = forwardRef<HTMLDivElement, IReqoreMenuDividerProps>(
-  (
-    {
-      label,
-      className,
-      effect,
-      size = 'normal',
-      align = 'center',
-      padded = 'both',
-      line,
-      ...rest
-    }: IReqoreMenuDividerProps,
-    ref: any
-  ) =>
-    line ? (
-      <ReqoreVerticalSpacer
-        className={`${className || ''} reqore-menu-divider`}
-        height={PADDING_FROM_SIZE[size]}
-        lineSize={size}
-      />
-    ) : (
-      <StyledMenuDivider
-        as='div'
-        {...rest}
-        padded={padded}
-        size={size}
-        className={`${className || ''} reqore-menu-divider`}
-        ref={ref}
-        effect={
-          {
-            uppercase: true,
-            spaced: 2,
-            textAlign: align,
-            textSize: getOneLessSize(size),
-            weight: 'bold',
-            ...effect,
-          } as IReqoreEffect
-        }
-      >
-        {label}
-      </StyledMenuDivider>
-    )
-);
-
-export default ReqoreMenuDivider;