@qoretechnologies/reqore 0.44.0 → 0.46.0

package/src/components/Textarea/index.tsx

@@ -1,277 +0,0 @@
-import { rgba } from 'polished';
-import React, { forwardRef, useCallback, useEffect, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { ReqoreDropdown } from '../..';
-import {
-  CONTROL_TEXT_FROM_SIZE,
-  PADDING_FROM_SIZE,
-  RADIUS_FROM_SIZE,
-  SIZE_TO_PX,
-  TSizes,
-} from '../../constants/sizes';
-import { IReqoreTheme } from '../../constants/theme';
-import { changeLightness, getReadableColor } from '../../helpers/colors';
-import { IReqoreAutoFocusRules, useAutoFocus } from '../../hooks/useAutoFocus';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import useAutosizeTextArea from '../../hooks/useTextareaAutoSize';
-import { useReqoreTheme } from '../../hooks/useTheme';
-import { useTooltip } from '../../hooks/useTooltip';
-import { DisabledElement, ReadOnlyElement } from '../../styles';
-import {
-  IReqoreDisabled,
-  IReqoreIntent,
-  IReqoreReadOnly,
-  IWithReqoreCustomTheme,
-  IWithReqoreEffect,
-  IWithReqoreTooltip,
-} from '../../types/global';
-import { IReqoreDropdownProps } from '../Dropdown';
-import { StyledEffect } from '../Effect';
-import { IReqoreInputStyle } from '../Input';
-import ReqoreInputClearButton from '../InputClearButton';
-
-export interface IReqoreFormTemplates extends IReqoreDropdownProps {}
-
-export interface IReqoreTextareaProps
-  extends React.HTMLAttributes<HTMLTextAreaElement>,
-    IReqoreReadOnly,
-    IReqoreDisabled,
-    IWithReqoreCustomTheme,
-    IWithReqoreTooltip,
-    IReqoreIntent,
-    IWithReqoreEffect {
-  autoFocus?: boolean;
-  placeholder?: string;
-  width?: number;
-  height?: number;
-  scaleWithContent?: boolean;
-  size?: TSizes;
-  minimal?: boolean;
-  fluid?: boolean;
-  value?: string;
-  rows?: number;
-  cols?: number;
-  rounded?: boolean;
-  flat?: boolean;
-  fixed?: boolean;
-  onClearClick?: () => any;
-  wrapperStyle?: React.CSSProperties;
-  focusRules?: IReqoreAutoFocusRules;
-  templates?: IReqoreFormTemplates;
-}
-
-export interface IReqoreTextareaStyle extends IReqoreTextareaProps {
-  theme: IReqoreTheme;
-  hasClearButton?: boolean;
-  _size?: TSizes;
-}
-
-export const StyledTextareaWrapper = styled.div<IReqoreTextareaStyle>`
-  height: ${({ height }) => (height ? `${height}px` : undefined)};
-  min-height: ${({ _size }) => SIZE_TO_PX[_size]}px;
-  max-height: 100%;
-  width: ${({ width, fluid }) => (fluid ? '100%' : width ? `${width}px` : 'auto')};
-  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
-  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
-  position: relative;
-  overflow: hidden;
-
-  &:focus-within {
-    .reqore-clear-input-button {
-      display: flex;
-    }
-  }
-`;
-
-export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
-  width: 100%;
-  max-width: 100%;
-  max-height: 100%;
-  font-size: ${({ _size }) => CONTROL_TEXT_FROM_SIZE[_size]}px;
-  margin: 0;
-  padding: ${({ _size }) => PADDING_FROM_SIZE[_size] / 2}px;
-  padding-right: ${({ hasClearButton, _size }) =>
-    hasClearButton ? `${SIZE_TO_PX[_size]}px` : undefined};
-  min-height: ${({ _size }) => SIZE_TO_PX[_size]}px;
-  line-height: ${({ _size }) => SIZE_TO_PX[_size] - CONTROL_TEXT_FROM_SIZE[_size]}px;
-  vertical-align: middle;
-
-  background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
-    minimal ? 'transparent' : rgba(theme.main, 0.1)};
-  color: ${({ theme }: IReqoreInputStyle) =>
-    getReadableColor(theme, undefined, undefined, true, theme.originalMain)};
-
-  &:active,
-  &:focus {
-    background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
-      minimal ? 'transparent' : rgba(theme.main, 0.15)};
-  }
-
-  border-radius: ${({ minimal, rounded, _size }) =>
-    minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
-  border: ${({ minimal, theme, flat }) =>
-    !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.2)}` : 0};
-  border-bottom: ${({ minimal, theme, flat }) =>
-    minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.2)}` : undefined};
-
-  ${({ disabled, readOnly }) =>
-    !disabled && !readOnly
-      ? css`
-          &:active,
-          &:focus,
-          &:hover {
-            outline: none;
-            border-color: ${({ theme }) => changeLightness(theme.main, 0.35)};
-          }
-        `
-      : undefined}
-
-  &::placeholder {
-    color: ${({ theme }) =>
-      rgba(getReadableColor(theme, undefined, undefined, true, theme.originalMain), 0.3)};
-  }
-
-  &:focus {
-    &::placeholder {
-      color: ${({ theme }) =>
-        rgba(getReadableColor(theme, undefined, undefined, true, theme.originalMain), 0.5)};
-    }
-  }
-
-  ${({ readOnly }) => readOnly && ReadOnlyElement};
-
-  &:disabled {
-    ${DisabledElement};
-  }
-`;
-
-const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
-  (
-    {
-      width,
-      height,
-      scaleWithContent,
-      size = 'normal',
-      className,
-      onClearClick,
-      fluid,
-      tooltip,
-      customTheme,
-      intent,
-      rounded = true,
-      wrapperStyle,
-      value,
-      onChange,
-      fixed,
-      focusRules,
-      templates,
-      ...rest
-    }: IReqoreTextareaProps,
-    ref
-  ) => {
-    const { targetRef }: any = useCombinedRefs(ref);
-    const [inputRef, setInputRef] = useState<HTMLTextAreaElement>(null);
-    const theme = useReqoreTheme('main', customTheme, intent);
-    const [_value, setValue] = useState(value || '');
-
-    useEffect(() => {
-      setValue(value || '');
-    }, [value]);
-
-    useTooltip(inputRef, tooltip);
-    useAutosizeTextArea(inputRef, _value, scaleWithContent);
-    useAutoFocus(inputRef, rest.readOnly || rest.disabled ? undefined : focusRules, onChange);
-
-    const handleItemSelect = useCallback(
-      (item) => {
-        if (!inputRef || !item || !item.value) {
-          return;
-        }
-        // Add the value of the selected item to the current value at the cursor position
-        const value = `${_value.slice(0, inputRef.selectionStart)}${item.value}${_value.slice(
-          inputRef.selectionEnd
-        )}`;
-
-        setValue(value);
-        // Trigger the onChange event
-        onChange?.({ target: { value } } as any);
-      },
-      [inputRef, _value]
-    );
-
-    const renderChildren = () => {
-      return (
-        <>
-          <StyledTextarea
-            {...rest}
-            effect={{
-              interactive: !rest?.disabled && !rest.readOnly,
-              ...rest?.effect,
-            }}
-            onChange={(e) => {
-              setValue(e.target.value);
-              onChange?.(e);
-            }}
-            as='textarea'
-            className={`${className || ''} reqore-control reqore-textarea`}
-            _size={size}
-            ref={(ref) => setInputRef(ref)}
-            theme={theme}
-            rounded={rounded}
-            rows={1}
-            value={_value}
-            readonly={rest?.readOnly}
-            tabIndex={rest?.disabled ? -1 : 0}
-            hasClearButton={!rest?.readOnly && !rest?.disabled && !!(onClearClick && onChange)}
-          />
-          <ReqoreInputClearButton
-            enabled={!rest?.readOnly && !rest?.disabled && !!(onClearClick && onChange)}
-            show={_value && _value !== ''}
-            onClick={onClearClick}
-            size={size}
-          />
-        </>
-      );
-    };
-
-    if (templates) {
-      return (
-        <ReqoreDropdown<Omit<IReqoreTextareaStyle & { ref: any }, 'content'>>
-          component={StyledTextareaWrapper}
-          className={`${className || ''} reqore-control-wrapper`}
-          width={width}
-          filterable
-          height={height}
-          fluid={fluid}
-          fixed={fixed}
-          _size={size}
-          theme={theme}
-          style={wrapperStyle}
-          ref={targetRef}
-          onItemSelect={handleItemSelect}
-          {...templates}
-        >
-          {renderChildren()}
-        </ReqoreDropdown>
-      );
-    }
-
-    return (
-      <StyledTextareaWrapper
-        className={`${className || ''} reqore-control-wrapper`}
-        width={width}
-        height={height}
-        fluid={fluid}
-        fixed={fixed}
-        _size={size}
-        theme={theme}
-        style={wrapperStyle}
-        ref={targetRef}
-      >
-        {renderChildren()}
-      </StyledTextareaWrapper>
-    );
-  }
-);
-
-export default ReqoreInput;

package/src/components/TimeAgo/index.tsx

@@ -1,15 +0,0 @@
-import timeago from 'epoch-timeago';
-import { useState } from 'react';
-import { useInterval } from 'react-use';
-import { getTimeAgoIntervalDelay } from '../../helpers/time';
-
-export const TimeAgo = ({ time }: { time: number | string }) => {
-  const setUpdate = useState<number>(Date.now());
-  const _time = typeof time === 'number' ? time : Date.parse(time);
-
-  useInterval(() => {
-    setUpdate[1](Date.now());
-  }, getTimeAgoIntervalDelay(_time));
-
-  return timeago(_time);
-};

package/src/components/Tree/index.tsx

@@ -1,271 +0,0 @@
-import { cloneDeep, size as lodashSize } from 'lodash';
-import { useMemo, useState } from 'react';
-import styled from 'styled-components';
-import { ReqoreHorizontalSpacer, ReqoreIcon, ReqoreP, ReqorePanel, useReqoreProperty } from '../..';
-import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
-import { IReqoreTheme } from '../../constants/theme';
-import { getOneLessSize, getTypeFromValue } from '../../helpers/utils';
-import { IWithReqoreSize } from '../../types/global';
-import ReqoreButton, { IReqoreButtonProps } from '../Button';
-import ReqoreControlGroup from '../ControlGroup';
-import { ReqoreExportModal } from '../ExportModal';
-import { IReqorePanelAction, IReqorePanelProps } from '../Panel';
-import { getExportActions, getZoomActions, sizeToZoom, zoomToSize } from '../Table/helpers';
-
-export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
-  data: Record<string, unknown> | Array<any>;
-  mode?: 'tree' | 'copy';
-  expanded?: boolean;
-  showTypes?: boolean;
-  onItemClick?: (value: any, path?: string[]) => void;
-  withLabelCopy?: boolean;
-  showControls?: boolean;
-  zoomable?: boolean;
-  exportable?: boolean;
-  defaultZoom?: 0 | 0.5 | 1 | 1.5 | 2;
-}
-
-export interface ITreeStyle {
-  interactive?: boolean;
-  theme: IReqoreTheme;
-  level?: number;
-  size?: TSizes;
-}
-
-export const StyledTreeLabel = styled(ReqoreP)`
-  flex-shrink: 1;
-
-  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
-`;
-
-export const StyledTreeWrapper = styled.div<ITreeStyle>`
-  display: flex;
-  flex-flow: column;
-  gap: ${({ size }) => GAP_FROM_SIZE[size]}px;
-  margin-left: ${({ level, size }) => (level ? level * GAP_FROM_SIZE[size] : 0)}px;
-`;
-
-export const ReqoreTree = ({
-  data,
-  size = 'normal',
-  expanded,
-  showTypes,
-  onItemClick,
-  withLabelCopy,
-  showControls = true,
-
-  exportable,
-  zoomable,
-  defaultZoom,
-  ...rest
-}: IReqoreTreeProps) => {
-  const [items, setItems] = useState({});
-  const [allExpanded, setAllExpanded] = useState(expanded || !showControls);
-  const [_showTypes, setShowTypes] = useState(showTypes);
-  const addNotification = useReqoreProperty('addNotification');
-  const [zoom, setZoom] = useState(defaultZoom || sizeToZoom[size]);
-  const [showExportModal, setShowExportModal] = useState<'full' | 'current' | undefined>(undefined);
-
-  const handleTypesClick = () => {
-    setShowTypes(!_showTypes);
-  };
-
-  const handleExpandClick = () => {
-    setItems({});
-    setAllExpanded(true);
-  };
-
-  const handleCollapseClick = () => {
-    setItems({});
-    setAllExpanded(false);
-  };
-
-  const handleItemClick = (key: string, currentState?: boolean) => {
-    const newItems = cloneDeep(items);
-
-    newItems[key] = !currentState;
-
-    setItems(newItems);
-  };
-
-  const isDeep = () =>
-    Object.keys(data).some((key: string): boolean => typeof data[key] === 'object');
-
-  const renderTree = (data, k?: any, level = 1, path: string[] = []) => {
-    return Object.keys(data).map((key, index) => {
-      const dataType: string = getTypeFromValue(data[key]);
-      const displayKey: string = key;
-      const stateKey = k ? `${k}_${key}` : key;
-
-      let isObject = typeof data[key] === 'object' && data[key] !== null;
-      let isExpandable =
-        typeof data[key] !== 'object' ||
-        items[stateKey] ||
-        (allExpanded && items[stateKey] !== false);
-
-      if (isObject && lodashSize(data[key]) === 0) {
-        isObject = false;
-        isExpandable = false;
-      }
-
-      const badges: IReqoreButtonProps['badge'] = [`{...} ${lodashSize(data[key])} items`];
-
-      if (_showTypes) {
-        badges.push({
-          icon: 'CodeBoxFill',
-          label: dataType,
-        });
-      }
-
-      return (
-        <StyledTreeWrapper key={index} size={zoomToSize[zoom]} level={level}>
-          {isObject ? (
-            <ReqoreControlGroup size={zoomToSize[zoom]}>
-              {level !== 1 && <ReqoreHorizontalSpacer width={5} />}
-              <ReqoreButton
-                compact
-                minimal
-                className='reqore-tree-toggle'
-                icon={isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill'}
-                intent={isExpandable ? 'info' : undefined}
-                onClick={() => handleItemClick(stateKey, isExpandable)}
-                flat={false}
-                badge={badges}
-              >
-                {displayKey}
-              </ReqoreButton>
-            </ReqoreControlGroup>
-          ) : (
-            <ReqoreControlGroup verticalAlign='flex-start'>
-              {level !== 1 && <ReqoreHorizontalSpacer width={5} />}
-              <ReqoreP
-                customTheme={{ text: { color: 'info:lighten:3' } }}
-                style={{ flexShrink: 0 }}
-                size={zoomToSize[zoom]}
-              >
-                {displayKey}:
-              </ReqoreP>
-              {withLabelCopy && (
-                <ReqoreIcon
-                  interactive
-                  icon='ClipboardLine'
-                  size={getOneLessSize(zoomToSize[zoom])}
-                  onClick={() => {
-                    try {
-                      navigator.clipboard.writeText(JSON.stringify(data[key]));
-                      addNotification({
-                        content: 'Successfuly copied to clipboard',
-                        id: Date.now().toString(),
-                        type: 'success',
-                        duration: 3000,
-                      });
-                    } catch (e) {
-                      console.error(e);
-                    }
-                  }}
-                />
-              )}
-              <StyledTreeLabel
-                flat
-                onClick={() => onItemClick?.(data[key], [...path, key])}
-                className='reqore-tree-label'
-                size={zoomToSize[zoom]}
-              >
-                {JSON.stringify(data[key])}
-              </StyledTreeLabel>
-            </ReqoreControlGroup>
-          )}
-          {isExpandable && isObject
-            ? renderTree(data[key], stateKey, level + 1, [...path, key])
-            : null}
-        </StyledTreeWrapper>
-      );
-    });
-  };
-
-  const actions = useMemo(() => {
-    let _actions: IReqorePanelAction[] = [];
-
-    if (showControls) {
-      _actions = [
-        {
-          className: 'reqore-tree-expand-all',
-          icon: 'ArrowDownFill',
-          onClick: handleExpandClick,
-          show: !!(isDeep() && !allExpanded),
-          label: 'Expand all',
-        },
-        {
-          show: !!(isDeep() && (allExpanded || lodashSize(items) > 0)),
-          className: 'reqore-tree-collapse-all',
-          icon: 'ArrowUpFill',
-          onClick: handleCollapseClick,
-
-          label: 'Collapse all',
-        },
-        {
-          className: 'reqore-tree-show-types',
-          icon: 'CodeBoxFill',
-          active: _showTypes,
-          onClick: handleTypesClick,
-          label: 'Show types',
-        },
-      ];
-    }
-
-    if (zoomable || exportable) {
-      const moreActions: IReqorePanelAction = {
-        className: 'reqore-tree-more',
-        icon: 'MoreLine',
-        actions: [],
-      };
-
-      if (zoomable) {
-        moreActions.actions = [
-          ...moreActions.actions,
-          ...getZoomActions('reqore-tree', zoom, setZoom, true),
-        ];
-      }
-
-      if (exportable) {
-        moreActions.actions = [
-          ...moreActions.actions,
-          { divider: true, line: true },
-          ...getExportActions((type) => setShowExportModal(type)),
-        ];
-      }
-
-      _actions = [..._actions, moreActions];
-    }
-
-    return _actions;
-  }, [allExpanded, items, showControls, _showTypes, isDeep(), zoom]);
-
-  if (!data || !Object.keys(data).length) {
-    return <p>No data</p>;
-  }
-
-  return (
-    <>
-      {showExportModal && (
-        <ReqoreExportModal data={data} onClose={() => setShowExportModal(undefined)} />
-      )}
-      <ReqorePanel
-        className='reqore-tree'
-        minimal
-        flat
-        transparent
-        size={size}
-        contentStyle={{
-          display: 'flex',
-          flexFlow: 'column',
-          gap: `${GAP_FROM_SIZE[size]}px`,
-        }}
-        {...rest}
-        actions={actions}
-      >
-        {renderTree(data, true)}
-      </ReqorePanel>
-    </>
-  );
-};

package/src/constants/animations.ts

@@ -1,9 +0,0 @@
-export const SPRING_CONFIG = {
-  tension: 180,
-  friction: 20,
-};
-
-export const SPRING_CONFIG_NO_ANIMATIONS = {
-  tension: 0,
-  friction: 0,
-};

package/src/constants/colors.ts

@@ -1,13 +0,0 @@
-import { TReqoreHexColor } from '../components/Effect';
-
-export const Colors: Record<string, TReqoreHexColor> = {
-  DARK: '#000000',
-  DARK_THEME: '#333333',
-  LIGHT: '#ffffff',
-  BLUE: '#0776CB',
-  GREEN: '#0A6640',
-  YELLOW: '#d1a036',
-  ORANGE: '#A66321',
-  RED: '#A82A2A',
-  GRAY: '#44444450',
-};

package/src/constants/paging.ts

@@ -1,93 +0,0 @@
-import { IReqorePaginationComponentProps, IReqorePaginationProps } from '../components/Paging';
-import { IReqorePagingOptions } from '../hooks/usePaging';
-
-export type TReqorePaginationType<T> =
-  | 'buttons'
-  | 'list'
-  | 'infinite'
-  | 'auto-load'
-  | IReqoreComponentPagingOptions<T>;
-
-export interface IReqoreComponentPagingOptions<T>
-  extends Omit<IReqorePagingOptions<T>, 'items'>,
-    IReqorePaginationComponentProps {
-  pageControlsPosition?: 'top' | 'bottom' | 'both';
-  includeTopControls?: boolean;
-  includeBottomControls?: boolean;
-}
-
-export type TReqorePaginationTypeResult<T> = {
-  pagingOptions?: Omit<IReqorePagingOptions<T>, 'items'>;
-  componentOptions?: Partial<Omit<IReqorePaginationProps<T>, 'items'>>;
-  pageControlsPosition?: 'top' | 'bottom' | 'both';
-  includeTopControls?: boolean;
-  includeBottomControls?: boolean;
-};
-
-export function getPagingObjectFromType<T>(
-  type: TReqorePaginationType<T>
-): IReqoreComponentPagingOptions<T> {
-  if (typeof type === 'object') {
-    return type;
-  }
-
-  switch (type) {
-    case 'buttons':
-      return {};
-    case 'list':
-      return {
-        showPagesAs: 'list',
-      };
-    case 'infinite':
-    case 'auto-load':
-      return { infinite: true };
-    default:
-      return {};
-  }
-}
-
-export function getPaginationOptionsFromType<T>(
-  type: TReqorePaginationType<T>
-): TReqorePaginationTypeResult<T> {
-  if (!type) return {};
-
-  if (typeof type === 'object') {
-    const {
-      infinite,
-      itemsPerPage,
-      pagesToShow,
-      startPage,
-      enabled,
-      onPageChange,
-      pageControlsPosition = 'bottom',
-      includeBottomControls,
-      includeTopControls,
-
-      ...componentOptions
-    } = type;
-
-    return {
-      pagingOptions: { infinite, itemsPerPage, pagesToShow, startPage, enabled, onPageChange },
-      pageControlsPosition,
-      componentOptions,
-      includeBottomControls,
-      includeTopControls,
-    };
-  }
-
-  switch (type) {
-    case 'buttons':
-      return {};
-    case 'list':
-      return {
-        componentOptions: {
-          showPagesAs: 'list',
-        },
-      };
-    case 'infinite':
-    case 'auto-load':
-      return { pagingOptions: { infinite: true } };
-    default:
-      return {};
-  }
-}