@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/components/ExportModal/index.tsx

@@ -1,99 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import { stringify } from 'yaml';
-import { ReqoreTextarea, useReqoreProperty } from '../..';
-import { convertToCSV } from '../../helpers/utils';
-import { IReqoreModalProps, ReqoreModal } from '../Modal';
-import ReqoreTabs, { IReqoreTabsProps } from '../Tabs';
-import ReqoreTabsContent from '../Tabs/content';
-
-export interface IReqoreExportModalProps extends IReqoreModalProps {
-  data: { [key: string]: unknown } | unknown[];
-  sendNotificationOnCopy?: boolean;
-  tabsOptions?: Omit<IReqoreTabsProps, 'tabs'>;
-}
-
-export const ReqoreExportModal = ({
-  data,
-  sendNotificationOnCopy = true,
-  tabsOptions = {},
-  ...rest
-}: IReqoreExportModalProps) => {
-  const addNotification = useReqoreProperty('addNotification');
-  const isArray = Array.isArray(data);
-  const [tab, setTab] = useState<string>(isArray ? 'csv' : 'json');
-  const tabs: IReqoreTabsProps['tabs'] = [
-    { label: 'CSV', id: 'csv', disabled: !isArray },
-    { label: 'JSON', id: 'json' },
-    { label: 'YAML', id: 'yaml' },
-  ];
-
-  const dataToExport = useMemo(() => {
-    switch (tab) {
-      case 'csv':
-        return convertToCSV(data as any[]);
-      case 'json':
-        return JSON.stringify(data, null, 2);
-      case 'yaml':
-        return stringify(data, null, 2);
-      default:
-        return '';
-    }
-  }, [data, tab, isArray]);
-
-  const handleCopyClick = useCallback(() => {
-    navigator.clipboard.writeText(dataToExport);
-
-    if (sendNotificationOnCopy) {
-      addNotification({
-        content: 'Data copied to clipboard',
-        intent: 'success',
-        duration: 3000,
-      });
-    }
-  }, [sendNotificationOnCopy, dataToExport]);
-
-  return (
-    <ReqoreModal
-      label='Export data'
-      icon='DownloadLine'
-      {...rest}
-      isOpen
-      bottomActions={[
-        {
-          position: 'right',
-          label: 'Copy',
-          icon: 'ClipboardLine',
-          onClick: () => {
-            handleCopyClick();
-          },
-        },
-        {
-          position: 'right',
-          label: 'Copy and close',
-          icon: 'ClipboardFill',
-          onClick: () => {
-            handleCopyClick();
-            rest.onClose?.();
-          },
-        },
-      ]}
-    >
-      <ReqoreTabs
-        fillParent
-        activeTabIntent='info'
-        activeTab={isArray ? 'csv' : 'json'}
-        padded={false}
-        flat={false}
-        {...tabsOptions}
-        onTabChange={(tabId) => setTab(tabId.toString())}
-        tabs={tabs}
-      >
-        {tabs.map((tab) => (
-          <ReqoreTabsContent tabId={tab.id} key={tab.id} padded='none'>
-            <ReqoreTextarea readOnly value={dataToExport} scaleWithContent minimal />
-          </ReqoreTabsContent>
-        ))}
-      </ReqoreTabs>
-    </ReqoreModal>
-  );
-};

package/src/components/Header/index.tsx

@@ -1,81 +0,0 @@
-import { memo, useMemo, useState } from 'react';
-import styled from 'styled-components';
-import { HEADER_SIZE_TO_NUMBER, TSizes } from '../../constants/sizes';
-import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import { isStringSize } from '../../helpers/utils';
-import { useReqoreTheme } from '../../hooks/useTheme';
-import { useTooltip } from '../../hooks/useTooltip';
-import { IWithReqoreEffect, IWithReqoreTooltip } from '../../types/global';
-import { StyledTextEffect } from '../Effect';
-
-export interface IReqoreHeadingProps
-  extends IWithReqoreEffect,
-    IWithReqoreTooltip,
-    React.HTMLAttributes<HTMLHeadingElement> {
-  intent?: TReqoreIntent;
-  size?: 1 | 2 | 3 | 4 | 5 | 6 | TSizes;
-  customTheme?: Partial<IReqoreTheme>;
-}
-
-export interface IReqoreHeadingStyle extends IReqoreHeadingProps {
-  theme: IReqoreTheme;
-}
-
-export const StyledHeader = styled(StyledTextEffect)`
-  margin: 0;
-  padding: 0;
-  color: ${({ theme, intent }) => (intent ? theme.intents[intent] : 'inherit')};
-
-  font-size: ${({ _size }) => {
-    switch (_size) {
-      case 1:
-        return '30px';
-      case 2:
-        return '24px';
-      case 3:
-        return '19px';
-      case 4:
-        return '14px';
-      case 5:
-        return '11px';
-      case 6:
-        return '8px';
-      default:
-        return 'inherit';
-    }
-  }};
-`;
-
-export const ReqoreHeading = memo(
-  ({ size, children, customTheme, intent, className, tooltip, ...rest }: IReqoreHeadingProps) => {
-    const [ref, setRef] = useState<HTMLHeadingElement>(undefined);
-    const theme = useReqoreTheme('main', customTheme, intent);
-    const _size: number = isStringSize(size) ? HEADER_SIZE_TO_NUMBER[size] : size;
-    const HTMLheaderElement = useMemo(() => {
-      return `h${_size}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    }, [_size]);
-
-    useTooltip(ref, tooltip);
-
-    return (
-      <StyledHeader
-        as={HTMLheaderElement}
-        theme={theme}
-        intent={intent}
-        ref={setRef}
-        {...rest}
-        _size={_size}
-        className={`${className || ''} reqore-heading`}
-      >
-        {children}
-      </StyledHeader>
-    );
-  }
-);
-
-export const ReqoreH1 = (props: IReqoreHeadingProps) => <ReqoreHeading size={1} {...props} />;
-export const ReqoreH2 = (props: IReqoreHeadingProps) => <ReqoreHeading size={2} {...props} />;
-export const ReqoreH3 = (props: IReqoreHeadingProps) => <ReqoreHeading size={3} {...props} />;
-export const ReqoreH4 = (props: IReqoreHeadingProps) => <ReqoreHeading size={4} {...props} />;
-export const ReqoreH5 = (props: IReqoreHeadingProps) => <ReqoreHeading size={5} {...props} />;
-export const ReqoreH6 = (props: IReqoreHeadingProps) => <ReqoreHeading size={6} {...props} />;

package/src/components/Icon/index.tsx

@@ -1,184 +0,0 @@
-import React, { forwardRef, memo } from 'react';
-import { IconContext } from 'react-icons';
-import { IconBaseProps, IconType } from 'react-icons/lib';
-import * as RemixIcons from 'react-icons/ri';
-import styled, { css, keyframes } from 'styled-components';
-import { useReqoreTheme } from '../..';
-import { ICON_FROM_SIZE, PADDING_FROM_SIZE, TSizes } from '../../constants/sizes';
-import { getColorFromMaybeString } from '../../helpers/colors';
-import { isStringSize } from '../../helpers/utils';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import { useTooltip } from '../../hooks/useTooltip';
-import { IReqoreIntent, IWithReqoreEffect, IWithReqoreTooltip } from '../../types/global';
-import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect, TReqoreEffectColor } from '../Effect';
-
-export interface IReqoreIconProps
-  extends React.HTMLAttributes<HTMLSpanElement>,
-    IWithReqoreEffect,
-    IWithReqoreTooltip,
-    IReqoreIntent {
-  icon?: IReqoreIconName;
-  color?: TReqoreEffectColor;
-  size?: TSizes | string;
-  wrapperSize?: TSizes | string;
-  wrapperElement?: any;
-  iconProps?: IconBaseProps;
-  margin?: 'right' | 'left' | 'both';
-  image?: string;
-  rounded?: boolean;
-  rotation?: number;
-  animation?: 'spin' | 'heartbeat';
-  interactive?: boolean;
-  compact?: boolean;
-}
-
-const SpinKeyframes = keyframes`
-  0% {
-    rotate: 0deg;
-  }
-  100% {
-    rotate: 360deg;
-  }
-`;
-
-export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left' | 'both' }>`
-  display: inline-flex;
-  flex: 0 0 auto;
-  justify-content: center;
-  align-items: center;
-  vertical-align: text-bottom;
-  transition: all 0.2s ease-out;
-  overflow: hidden;
-
-  border-radius: ${({ rounded }) => (rounded ? '50%' : undefined)};
-  rotate: ${({ rotation }) => (rotation ? `${rotation}deg` : undefined)};
-  cursor: ${({ interactive }) => (interactive ? 'pointer' : undefined)};
-
-  ${({ margin, size, compact }) =>
-    margin &&
-    css`
-      margin-left: ${margin === 'left' || margin === 'both'
-        ? isStringSize(size)
-          ? `${PADDING_FROM_SIZE[size] / (compact ? 2 : 1)}px`
-          : compact
-          ? '3px'
-          : '10px'
-        : undefined};
-      margin-right: ${margin === 'right' || margin === 'both'
-        ? isStringSize(size)
-          ? `${PADDING_FROM_SIZE[size] / (compact ? 2 : 1)}px`
-          : compact
-          ? '3px'
-          : '10px'
-        : undefined};
-    `}
-
-  img {
-    width: 100%;
-  }
-
-  ${({ animation }) =>
-    animation === 'spin' &&
-    css`
-      animation: ${SpinKeyframes} 1s linear infinite;
-    `}
-`;
-
-const ReqoreIcon = memo(
-  forwardRef<HTMLSpanElement, IReqoreIconProps>(
-    (
-      {
-        icon,
-        size = 'normal',
-        wrapperSize,
-        wrapperElement,
-        className,
-        color,
-        margin,
-        style = {},
-        iconProps,
-        intent,
-        image,
-        tooltip,
-        ...rest
-      }: IReqoreIconProps,
-      ref
-    ) => {
-      const { targetRef } = useCombinedRefs(ref);
-      const [iconRef, setIconRef] = React.useState<HTMLSpanElement>(undefined);
-      const theme = useReqoreTheme();
-      const Icon: IconType = RemixIcons[`Ri${icon}`];
-      const finalColor: string | undefined = intent
-        ? theme.intents[intent]
-        : getColorFromMaybeString(theme, color);
-      const finalSize: string = isStringSize(size) ? ICON_FROM_SIZE[size] : size;
-      const finalWrapperSize: string = wrapperSize
-        ? isStringSize(wrapperSize)
-          ? ICON_FROM_SIZE[wrapperSize]
-          : wrapperSize
-        : finalSize;
-
-      useTooltip(iconRef, tooltip);
-
-      if (image) {
-        return (
-          <StyledIconWrapper
-            {...rest}
-            as={wrapperElement}
-            ref={targetRef}
-            size={size}
-            margin={margin}
-            className={`${className || ''} reqore-icon`}
-            style={{ width: finalWrapperSize, height: finalWrapperSize, ...style }}
-          >
-            <img src={image} alt='' />
-          </StyledIconWrapper>
-        );
-      }
-
-      if (!Icon) {
-        return (
-          <StyledIconWrapper
-            {...rest}
-            as={wrapperElement}
-            ref={targetRef}
-            size={size}
-            margin={margin}
-            className={`${className || ''} reqore-icon`}
-            style={{ width: finalWrapperSize, height: finalWrapperSize, ...style }}
-          />
-        );
-      }
-
-      return (
-        <StyledIconWrapper
-          {...rest}
-          as={wrapperElement}
-          ref={(ref) => {
-            targetRef.current = ref;
-            setIconRef(ref);
-          }}
-          margin={margin}
-          size={size}
-          style={{ width: finalWrapperSize, height: finalWrapperSize, ...style }}
-          className={`${className || ''} reqore-icon`}
-        >
-          <IconContext.Provider
-            value={{
-              color: finalColor || 'inherit',
-              size: finalSize,
-              style: {
-                verticalAlign: 'super',
-              },
-            }}
-          >
-            <Icon {...iconProps} />
-          </IconContext.Provider>
-        </StyledIconWrapper>
-      );
-    }
-  )
-);
-
-export default ReqoreIcon;

package/src/components/Input/index.tsx

@@ -1,295 +0,0 @@
-import { omit } from 'lodash';
-import { rgba } from 'polished';
-import React, { forwardRef, useState } from 'react';
-import styled, { css } from 'styled-components';
-import {
-  CONTROL_TEXT_FROM_SIZE,
-  PADDING_FROM_SIZE,
-  PILL_RADIUS_MODIFIER,
-  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 { 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 { IReqoreIconName } from '../../types/icons';
-import { StyledEffect, TReqoreEffectColor } from '../Effect';
-import ReqoreIcon, { IReqoreIconProps } from '../Icon';
-import ReqoreInputClearButton from '../InputClearButton';
-
-export interface IReqoreInputProps
-  extends Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'children'>,
-    IReqoreDisabled,
-    IReqoreReadOnly,
-    IReqoreIntent,
-    IWithReqoreCustomTheme,
-    IWithReqoreEffect,
-    IWithReqoreTooltip {
-  autoFocus?: boolean;
-  placeholder?: string;
-  width?: number;
-  size?: TSizes;
-  minimal?: boolean;
-  fluid?: boolean;
-  fixed?: boolean;
-  value?: string | number;
-  onClearClick?: () => void;
-  maxLength?: number;
-  icon?: IReqoreIconName;
-  rightIcon?: IReqoreIconName;
-  flat?: boolean;
-  rounded?: boolean;
-  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
-  step?: number;
-  wrapperStyle?: React.CSSProperties;
-  iconColor?: TReqoreEffectColor;
-  rightIconColor?: TReqoreEffectColor;
-  focusRules?: IReqoreAutoFocusRules;
-
-  leftIconProps?: IReqoreIconProps;
-  rightIconProps?: IReqoreIconProps;
-
-  pill?: boolean;
-
-  children?: React.ReactNode | ((props: any) => React.ReactNode);
-  as?: string | React.ElementType;
-}
-
-export interface IReqoreInputStyle extends IReqoreInputProps {
-  theme: IReqoreTheme;
-  _size?: TSizes;
-  clearable?: boolean;
-  hasIcon?: boolean;
-}
-
-export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
-  height: ${({ _size }) => SIZE_TO_PX[_size]}px;
-  width: ${({ width }) => (width ? `${width}px` : 'auto')};
-  max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
-  min-width: 60px;
-  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 1 auto')};
-  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
-  font-size: ${({ _size }) => CONTROL_TEXT_FROM_SIZE[_size]}px;
-  position: relative;
-  overflow: hidden;
-  border-radius: ${({ minimal, rounded, _size, pill }) =>
-    minimal || rounded === false
-      ? 0
-      : RADIUS_FROM_SIZE[_size] * (pill ? PILL_RADIUS_MODIFIER : 1)}px;
-
-  &:focus-within {
-    .reqore-clear-input-button {
-      display: flex;
-    }
-  }
-`;
-
-const StyledIconWrapper = styled.div<IReqoreInputStyle>`
-  position: absolute;
-  height: ${({ _size }) => SIZE_TO_PX[_size]}px;
-  width: ${({ _size }) => SIZE_TO_PX[_size]}px;
-  right: ${({ position }) => (position === 'right' ? 0 : undefined)};
-  top: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
-  height: 100%;
-  width: 100%;
-  flex: 1;
-  margin: 0;
-  padding: ${({ _size }) => PADDING_FROM_SIZE[_size] / 2}px 7px;
-  padding-right: ${({ clearable, hasRightIcon, _size }) => {
-    let padding = 7;
-
-    if (clearable || hasRightIcon) {
-      padding = 0;
-      padding += clearable ? SIZE_TO_PX[_size] : 0;
-      padding += hasRightIcon ? SIZE_TO_PX[_size] : 0;
-    }
-
-    return padding;
-  }}px;
-
-  padding-left: ${({ hasIcon, _size }) => (hasIcon ? SIZE_TO_PX[_size] : 7)}px;
-  font-size: ${({ _size }) => CONTROL_TEXT_FROM_SIZE[_size]}px;
-  transition: all 0.2s ease-out;
-  border-radius: ${({ minimal, rounded, _size, pill }) =>
-    minimal || rounded === false
-      ? 0
-      : RADIUS_FROM_SIZE[_size] * (pill ? PILL_RADIUS_MODIFIER : 1)}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}
-
-  background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
-    minimal ? 'transparent' : rgba(theme.main, 0.1)};
-  color: ${({ theme }: IReqoreInputStyle) =>
-    getReadableColor(theme, undefined, undefined, true, theme.originalMain)};
-
-  transition: all 0.2s ease-out;
-
-  &:active,
-  &:focus {
-    background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
-      minimal ? 'transparent' : rgba(theme.main, 0.15)};
-  }
-
-  &::placeholder {
-    transition: all 0.2s ease-out;
-    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<HTMLDivElement, IReqoreInputProps>(
-  (
-    {
-      tooltip,
-      width,
-      size = 'normal',
-      fluid,
-      fixed,
-      className,
-      onClearClick,
-      icon,
-      rightIcon,
-      iconColor,
-      rightIconColor,
-      flat,
-      rounded,
-      minimal,
-      readOnly,
-      customTheme,
-      intent,
-      wrapperStyle,
-      focusRules,
-      leftIconProps = {},
-      rightIconProps = {},
-      pill,
-      ...rest
-    }: IReqoreInputProps,
-    ref
-  ) => {
-    const { targetRef } = useCombinedRefs(ref);
-    const [inputRef, setInputRef] = useState<HTMLInputElement>(null);
-    const theme = useReqoreTheme('main', customTheme, intent);
-
-    useTooltip(inputRef, tooltip);
-    useAutoFocus(inputRef, readOnly || rest.disabled ? undefined : focusRules, rest.onChange);
-
-    const hasLeftIcon = icon || leftIconProps?.image;
-    const hasRightIcon = rightIcon || rightIconProps?.image;
-
-    return (
-      <StyledInputWrapper
-        className='reqore-control-wrapper'
-        fluid={fluid}
-        fixed={fixed}
-        width={width}
-        flat={flat}
-        theme={theme}
-        rounded={rounded}
-        minimal={minimal}
-        _size={size}
-        ref={targetRef}
-        readOnly={readOnly}
-        disabled={rest.disabled}
-        style={wrapperStyle}
-        pill={pill}
-      >
-        {hasLeftIcon && (
-          <StyledIconWrapper _size={size}>
-            <ReqoreIcon size={size} icon={icon} color={iconColor} {...leftIconProps} />
-          </StyledIconWrapper>
-        )}
-        <StyledInput
-          as='input'
-          {...omit(rest, ['children'])}
-          effect={{
-            interactive: !rest?.disabled && !readOnly,
-            ...rest?.effect,
-          }}
-          onChange={!readOnly && !rest?.disabled ? rest?.onChange : undefined}
-          ref={(ref) => setInputRef(ref)}
-          theme={theme}
-          _size={size}
-          minimal={minimal}
-          flat={flat}
-          rounded={rounded}
-          hasIcon={!!icon}
-          hasRightIcon={!!rightIcon}
-          clearable={
-            !rest?.disabled &&
-            !readOnly &&
-            !!(onClearClick && (rest.as || rest.children || rest?.onChange))
-          }
-          className={`${className || ''} reqore-control reqore-input`}
-          readOnly={readOnly}
-          pill={pill}
-        >
-          {rest?.children}
-        </StyledInput>
-        <ReqoreInputClearButton
-          enabled={
-            !readOnly &&
-            !rest?.disabled &&
-            !!(onClearClick && (rest.as || rest.children || rest?.onChange))
-          }
-          onClick={onClearClick}
-          hasRightIcon={!!rightIcon}
-          size={size}
-          show={rest?.value && rest.value !== '' ? true : false}
-        />
-        {hasRightIcon && (
-          <StyledIconWrapper _size={size} position='right'>
-            <ReqoreIcon size={size} icon={rightIcon} color={rightIconColor} {...rightIconProps} />
-          </StyledIconWrapper>
-        )}
-      </StyledInputWrapper>
-    );
-  }
-);
-
-export default ReqoreInput;