@qoretechnologies/reqore 0.20.1 → 0.20.4

package/src/components/Tag/index.tsx

@@ -0,0 +1,237 @@
+import _size from 'lodash/size';
+import React, { forwardRef, useContext, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { ReqorePopover } from '../..';
+import {
+  PADDING_FROM_SIZE,
+  RADIUS_FROM_SIZE,
+  SIZE_TO_PX,
+  TEXT_FROM_SIZE,
+  TSizes,
+} from '../../constants/sizes';
+import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import ThemeContext from '../../context/ThemeContext';
+import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import usePopover from '../../hooks/usePopover';
+import { IReqoreTooltip } from '../../types/global';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreIcon from '../Icon';
+
+export interface IReqoreTagAction {
+  icon: IReqoreIconName;
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  disabled?: boolean;
+  tooltip?: IReqoreTooltip;
+  intent?: IReqoreIntent;
+}
+
+export interface IReqoreTagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+  size?: TSizes;
+  label?: string;
+  onRemoveClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  icon?: IReqoreIconName;
+  rightIcon?: IReqoreIconName;
+  color?: string;
+  tooltip?: IReqoreTooltip;
+  disabled?: boolean;
+  actions?: IReqoreTagAction[];
+  width?: string;
+  badge?: boolean;
+  intent?: IReqoreIntent;
+}
+
+export interface IReqoreTagStyle extends IReqoreTagProps {
+  theme: IReqoreTheme;
+  removable?: boolean;
+  interactive?: boolean;
+}
+
+export const StyledTag = styled.div<IReqoreTagStyle>`
+  display: inline-flex;
+  justify-content: center;
+  flex-shrink: 0;
+  align-items: center;
+  font-family: system-ui;
+  font-weight: 600;
+  overflow: hidden;
+  font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
+  height: ${({ size }) => SIZE_TO_PX[size]}px;
+  min-width: ${({ size }) => SIZE_TO_PX[size]}px;
+  border-radius: ${({ badge, size }) => (badge ? 20 : RADIUS_FROM_SIZE[size])}px;
+  width: ${({ width }) => width || undefined};
+
+  ${({ theme, color }) =>
+    css`
+      background-color: ${color || changeLightness(theme.main, 0.1)};
+      color: ${color ? getReadableColorFrom(color) : getReadableColor(theme, undefined, undefined)};
+      }
+    `}
+
+  ${({ theme, color, interactive }) =>
+    interactive &&
+    css`
+      cursor: pointer;
+      &:hover {
+        background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
+        color: ${color
+          ? getReadableColorFrom(color)
+          : getReadableColor(theme, undefined, undefined)};
+      }
+    `}
+
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      opacity: 0.5;
+      pointer-events: none;
+      cursor: not-allowed;
+    `}
+`;
+
+const StyledTagContentWrapper = styled.div<{ size: TSizes }>`
+  padding: 0 ${({ size }) => PADDING_FROM_SIZE[size]}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  flex: 1;
+  overflow: hidden;
+`;
+
+const StyledTagContent = styled.span<{ size: TSizes }>`
+  height: 100%;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const StyledButtonWrapper = styled.div<IReqoreTagStyle>`
+  flex-shrink: 0;
+  font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
+  height: ${({ size }) => SIZE_TO_PX[size]}px;
+  width: ${({ size }) => SIZE_TO_PX[size]}px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: background-color 0.2s ease-out;
+
+  ${({ theme, color }) =>
+    css`
+      .reqore-icon {
+        transform: scale(0.85);
+      }
+      &:hover {
+        cursor: pointer;
+        background-color: ${changeLightness(color || theme.main, color ? 0.09 : 0.19)};
+
+        .reqore-icon {
+          transform: scale(1);
+        }
+      }
+    `}
+`;
+
+const ReqoreTag = forwardRef(
+  (
+    {
+      tooltip,
+      label,
+      icon,
+      rightIcon,
+      className,
+      onClick,
+      size = 'normal',
+      onRemoveClick,
+      actions,
+      badge,
+      intent,
+      color,
+      ...rest
+    }: IReqoreTagProps,
+    ref
+  ) => {
+    const innerRef = useRef(null);
+    const combinedRef = useCombinedRefs(innerRef, ref);
+    const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+
+    usePopover({
+      ...tooltip,
+      targetElement: combinedRef.current,
+      show: !!tooltip?.content,
+    });
+
+    // If color or intent was specified, set the color
+    const customColor = intent ? theme.intents[intent] : color;
+
+    return (
+      <StyledTag
+        {...rest}
+        color={customColor}
+        className={`${className || ''} reqore-tag`}
+        size={size}
+        ref={combinedRef}
+        badge={badge}
+        removable={!!onRemoveClick}
+        interactive={!!onClick && !rest.disabled}
+      >
+        <StyledTagContentWrapper size={size} className='reqore-tag-content' onClick={onClick}>
+          {icon && (
+            <ReqoreIcon
+              icon={icon}
+              size={`${TEXT_FROM_SIZE[size]}px`}
+              margin={label || rightIcon ? 'right' : undefined}
+            />
+          )}
+          {label && <StyledTagContent size={size}>{label}</StyledTagContent>}
+          {rightIcon && (
+            <ReqoreIcon
+              icon={rightIcon}
+              size={`${TEXT_FROM_SIZE[size]}px`}
+              margin={label ? 'left' : undefined}
+            />
+          )}
+        </StyledTagContentWrapper>
+        {_size(actions)
+          ? actions.map((action) => (
+              <>
+                <ReqorePopover
+                  {...action.tooltip}
+                  component={StyledButtonWrapper}
+                  componentProps={{
+                    size,
+                    color: customColor,
+                    className: 'reqore-tag-action',
+                    onClick: action.onClick,
+                  }}
+                  noWrapper
+                >
+                  <ReqoreIcon icon={action.icon} size={`${TEXT_FROM_SIZE[size]}px`} />
+                </ReqorePopover>
+              </>
+            ))
+          : null}
+        {onRemoveClick && !rest.disabled ? (
+          <ReqorePopover
+            component={StyledButtonWrapper}
+            componentProps={{
+              size,
+              color: customColor,
+              className: 'reqore-tag-remove',
+              onClick: onRemoveClick,
+            }}
+            noWrapper
+            content='Remove'
+          >
+            <ReqoreIcon icon='CloseLine' size={`${TEXT_FROM_SIZE[size]}px`} />
+          </ReqorePopover>
+        ) : null}
+      </StyledTag>
+    );
+  }
+);
+
+export default ReqoreTag;

package/src/components/Textarea/index.tsx

@@ -0,0 +1,121 @@
+import { darken, rgba } from 'polished';
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { IReqoreTheme } from '../../constants/theme';
+import { getReadableColor } from '../../helpers/colors';
+import ReqoreInputClearButton from '../InputClearButton';
+
+export interface IReqoreTextareaProps extends React.HTMLAttributes<HTMLTextAreaElement> {
+  autoFocus?: boolean;
+  disabled?: boolean;
+  width?: number;
+  height?: number;
+  scaleWithContent?: boolean;
+  size?: TSizes;
+  minimal?: boolean;
+  fluid?: boolean;
+  value?: string;
+  rows?: number;
+  cols?: number;
+  onClearClick?: () => any;
+}
+
+export interface IReqoreTextareaStyle extends IReqoreTextareaProps {
+  theme: IReqoreTheme;
+  _size?: TSizes;
+}
+
+export const StyledTextareaWrapper = styled.div<IReqoreTextareaStyle>`
+  height: ${({ height }) => (height ? `${height}px` : undefined)};
+  width: ${({ width, fluid }) => (fluid ? '100%' : width ? `${width}px` : 'auto')};
+  flex: ${({ fluid }) => (fluid ? '1' : undefined)};
+  position: relative;
+  overflow: hidden;
+`;
+
+export const StyledTextarea = styled.textarea<IReqoreTextareaStyle>`
+  height: 100%;
+  width: 100%;
+  font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
+  margin: 0;
+  padding: 5px 7px;
+  resize: none;
+
+  background-color: ${({ theme, minimal }: IReqoreTextareaStyle) =>
+    minimal ? 'transparent' : darken(0.01, theme.main)};
+  color: ${({ theme }: IReqoreTextareaStyle) => getReadableColor(theme)};
+
+  border: ${({ minimal, theme }) =>
+    !minimal ? `1px solid ${rgba(getReadableColor(theme), 0.2)}` : 0};
+  border-bottom: ${({ minimal, theme }) =>
+    minimal ? `0.5px solid ${rgba(getReadableColor(theme), 0.2)}` : undefined};
+
+  border-radius: ${({ minimal }) => (minimal ? 0 : 3)}px;
+  transition: all 0.2s ease-out;
+
+  &:active,
+  &:focus,
+  &:hover {
+    outline: none;
+    border-color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
+  }
+
+  &::placeholder {
+    transition: all 0.2s ease-out;
+    color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
+  }
+
+  &:focus {
+    &::placeholder {
+      color: ${({ theme }) => rgba(getReadableColor(theme), 0.5)};
+    }
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.3;
+  }
+`;
+
+const ReqoreInput = forwardRef(
+  (
+    {
+      width,
+      height,
+      scaleWithContent,
+      size = 'normal',
+      className,
+      onClearClick,
+      fluid,
+      ...rest
+    }: IReqoreTextareaProps,
+    ref: any
+  ) => {
+    return (
+      <StyledTextareaWrapper
+        className={`${className || ''} reqore-control-wrapper`}
+        width={width}
+        height={height}
+        fluid={fluid}
+        _size={size}
+      >
+        <StyledTextarea
+          {...rest}
+          className={`${className || ''} reqore-control reqore-textarea`}
+          _size={size}
+          ref={ref}
+          rows={scaleWithContent ? (rest?.value?.split(/\r\n|\r|\n/).length || 1) + 1 : rest.rows}
+        />
+        <ReqoreInputClearButton
+          enabled={!rest?.disabled && !!(onClearClick && rest?.onChange)}
+          show={rest?.value && rest.value !== ''}
+          onClick={onClearClick}
+          size='big'
+        />
+      </StyledTextareaWrapper>
+    );
+  }
+);
+
+export default ReqoreInput;

package/src/components/TimeAgo/index.tsx

@@ -0,0 +1,15 @@
+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 [_lastUpdate, _setLastUpdate] = useState<number>(Date.now());
+  const _time = typeof time === 'number' ? time : Date.parse(time);
+
+  useInterval(() => {
+    _setLastUpdate(Date.now());
+  }, getTimeAgoIntervalDelay(_time));
+
+  return timeago(_time);
+};

package/src/components/Tree/index.tsx

@@ -0,0 +1,255 @@
+import { cloneDeep } from 'lodash';
+import size from 'lodash/size';
+import { rgba } from 'polished';
+import { useContext, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { ReqoreTextarea } from '../..';
+import { IReqoreTheme } from '../../constants/theme';
+import ReqoreContext from '../../context/ReqoreContext';
+import { changeLightness } from '../../helpers/colors';
+import { getLineCount, getTypeFromValue } from '../../helpers/utils';
+import ReqoreButton from '../Button';
+import ReqoreControlGroup from '../ControlGroup';
+import ReqoreTag from '../Tag';
+
+export interface IReqoreTreeProps {
+  data: Object | Array<any>;
+  mode?: 'tree' | 'copy';
+  expanded?: boolean;
+  showTypes?: boolean;
+  onItemClick?: (value: any, path?: string[]) => void;
+  withLabelCopy?: boolean;
+}
+
+const StyledTreeWrapper = styled.div`
+  display: flex;
+  flex-flow: column;
+`;
+
+export interface ITreeStyle {
+  interactive?: boolean;
+  theme: IReqoreTheme;
+}
+
+const StyledLabel = styled.span<ITreeStyle>`
+  display: inline-block;
+  line-height: 30px;
+  padding: 0 10px;
+  transition: all 0.2s ease-out;
+
+  ${({ interactive, theme }: ITreeStyle) =>
+    interactive &&
+    css`
+      cursor: pointer;
+
+      &:hover {
+        background-color: ${rgba(changeLightness(theme.main, 0.3), 0.2)};
+        border-radius: 5px;
+      }
+    `}
+`;
+
+export const ReqoreTree = ({
+  data,
+  mode = 'tree',
+  expanded,
+  showTypes,
+  onItemClick,
+  withLabelCopy,
+}: IReqoreTreeProps) => {
+  const [_mode, setMode] = useState<'tree' | 'copy'>(mode);
+  const [items, setItems] = useState({});
+  const [allExpanded, setAllExpanded] = useState(expanded);
+  const [_showTypes, setShowTypes] = useState(showTypes);
+  const { addNotification } = useContext(ReqoreContext);
+
+  const handleCopyClick = () => {
+    setMode('copy');
+  };
+
+  const handleTypesClick = () => {
+    setShowTypes(!_showTypes);
+  };
+
+  const handleTreeClick = () => {
+    setMode('tree');
+  };
+
+  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 && size(data[key]) === 0) {
+        isObject = false;
+        isExpandable = false;
+      }
+
+      return (
+        <div key={index} style={{ margin: level === 1 ? '15px 0' : `15px` }}>
+          <ReqoreControlGroup>
+            {isObject ? (
+              <ReqoreButton
+                className='reqore-tree-toggle'
+                icon={isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill'}
+                active={isExpandable}
+                intent={isExpandable ? 'info' : undefined}
+                onClick={() => handleItemClick(stateKey, isExpandable)}
+              >
+                {displayKey}
+              </ReqoreButton>
+            ) : (
+              <ReqoreTag label={`${displayKey}: `} />
+            )}
+            {_showTypes && <ReqoreTag label={dataType} className='reqore-tree-type' />}
+            {!isObject && (
+              <StyledLabel
+                className='reqore-tree-label'
+                interactive={!!onItemClick}
+                onClick={onItemClick ? () => onItemClick(data[key], [...path, key]) : undefined}
+              >
+                {JSON.stringify(data[key])}
+              </StyledLabel>
+            )}
+            {withLabelCopy && (
+              <ReqoreButton
+                className='reqore-tree-copy'
+                icon='FileCopy2Fill'
+                onClick={() => {
+                  navigator.clipboard.writeText(JSON.stringify(data[key]));
+                  addNotification({
+                    content: 'Successfuly copied to clipboard',
+                    id: Date.now().toString(),
+                    type: 'success',
+                    duration: 3000,
+                  });
+                }}
+                minimal
+              />
+            )}
+          </ReqoreControlGroup>
+          {isExpandable && isObject
+            ? renderTree(data[key], stateKey, level + 1, [...path, key])
+            : null}
+        </div>
+      );
+    });
+  };
+
+  const renderText = (data, tabs = '') => {
+    let text = '';
+
+    Object.keys(data).forEach((key) => {
+      if (typeof data[key] !== 'object' || !data[key]) {
+        text += `${tabs}${key}: ${data[key]}\r\n`;
+      } else {
+        text += `${tabs}${key}:\r\n`;
+        text += renderText(data[key], `${tabs}\t`);
+      }
+    });
+
+    return text;
+  };
+
+  if (!data || !Object.keys(data).length) {
+    return <p>No data</p>;
+  }
+
+  const textData: string = renderText(data);
+  const lineCount: number = getLineCount(textData);
+
+  return (
+    <StyledTreeWrapper className='reqore-tree'>
+      <ReqoreControlGroup stack>
+        {isDeep() && (
+          <>
+            {!allExpanded && (
+              <ReqoreButton
+                className='reqore-tree-expand-all'
+                icon='ArrowDownFill'
+                onClick={handleExpandClick}
+                key='expand-button'
+              >
+                Expand all
+              </ReqoreButton>
+            )}
+            {allExpanded || size(items) > 0 ? (
+              <ReqoreButton
+                className='reqore-tree-collapse-all'
+                icon='ArrowUpFill'
+                onClick={handleCollapseClick}
+                key='collapse-button'
+              >
+                {' '}
+                Collapse all{' '}
+              </ReqoreButton>
+            ) : null}
+          </>
+        )}
+        <ReqoreButton
+          className='reqore-tree-show-types'
+          icon='CodeBoxFill'
+          active={_showTypes}
+          onClick={handleTypesClick}
+        >
+          Show types
+        </ReqoreButton>
+        <ReqoreButton
+          className='reqore-tree-as-tree'
+          active={_mode === 'tree'}
+          onClick={handleTreeClick}
+          icon='Menu2Fill'
+        >
+          Tree View
+        </ReqoreButton>
+        <ReqoreButton
+          className='reqore-tree-as-text'
+          onClick={handleCopyClick}
+          active={_mode === 'copy'}
+          icon='ClipboardFill'
+        >
+          Text View
+        </ReqoreButton>
+      </ReqoreControlGroup>
+
+      {_mode === 'tree' && <div>{renderTree(data, true)}</div>}
+
+      {_mode === 'copy' && (
+        <ReqoreTextarea
+          className='reqore-tree-textarea'
+          id='tree-content'
+          defaultValue={textData}
+          rows={lineCount > 20 ? 20 : lineCount}
+        />
+      )}
+    </StyledTreeWrapper>
+  );
+};

package/src/constants/animations.ts

@@ -0,0 +1,4 @@
+export const SPRING_CONFIG = {
+  tension: 120,
+  friction: 20,
+};

package/src/constants/colors.ts

@@ -0,0 +1,9 @@
+export const Colors = {
+  DARK: '#222222',
+  LIGHT: '#ffffff',
+  BLUE: '#0E5A8A',
+  GREEN: '#0A6640',
+  YELLOW: '#d1a036',
+  ORANGE: '#A66321',
+  RED: '#A82A2A',
+};

package/src/constants/sizes.ts

@@ -0,0 +1,66 @@
+export type TSizes = 'tiny' | 'small' | 'normal' | 'big' | 'huge';
+export type TWeights = 'soft' | 'normal' | 'heavy';
+
+export const SIZE_TO_PX = {
+  tiny: 10,
+  small: 20,
+  normal: 30,
+  big: 40,
+  huge: 50,
+};
+
+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 PADDING_FROM_SIZE = {
+  tiny: 2,
+  small: 5,
+  normal: 8,
+  big: 11,
+  huge: 14,
+};
+
+export const RADIUS_FROM_SIZE = {
+  tiny: 1,
+  small: 3,
+  normal: 5,
+  big: 7,
+  huge: 9,
+};