@qoretechnologies/reqore 0.20.1 → 0.20.4

package/src/components/Input/index.tsx

@@ -0,0 +1,185 @@
+import { Placement } from '@popperjs/core';
+import { darken, rgba } from 'polished';
+import React, { forwardRef, useRef } from 'react';
+import styled from 'styled-components';
+import { RADIUS_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { IReqoreTheme } from '../../constants/theme';
+import { changeLightness, getReadableColor } from '../../helpers/colors';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import usePopover from '../../hooks/usePopover';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreIcon from '../Icon';
+import ReqoreInputClearButton from '../InputClearButton';
+
+export interface IReqoreInputProps extends React.HTMLAttributes<HTMLInputElement> {
+  autoFocus?: boolean;
+  disabled?: boolean;
+  tooltip?: string;
+  tooltipPlacement?: Placement;
+  width?: number;
+  size?: TSizes;
+  minimal?: boolean;
+  fluid?: boolean;
+  fixed?: boolean;
+  value?: string | number;
+  onClearClick?: () => void;
+  maxLength?: number;
+  icon?: IReqoreIconName;
+  flat?: boolean;
+  rounded?: boolean;
+}
+
+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')};
+  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1' : '0 0 auto')};
+  font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
+  position: relative;
+  overflow: hidden;
+  border-radius: ${({ minimal, rounded, _size }) =>
+    minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
+  border: ${({ minimal, theme, flat }) =>
+    !minimal && !flat ? `1px solid ${rgba(getReadableColor(theme), 0.2)}` : 0};
+  border-bottom: ${({ minimal, theme, flat }) =>
+    minimal && !flat ? `0.5px solid ${rgba(getReadableColor(theme), 0.2)}` : undefined};
+
+  transition: all 0.2s ease-out;
+
+  &:active,
+  &:focus,
+  &:hover {
+    outline: none;
+    border-color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
+  }
+`;
+
+const StyledIconWrapper = styled.div<IReqoreInputStyle>`
+  position: absolute;
+  height: ${({ _size }) => SIZE_TO_PX[_size]}px;
+  width: ${({ _size }) => SIZE_TO_PX[_size]}px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const StyledInput = styled.input<IReqoreInputStyle>`
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  margin: 0;
+  padding: 0 7px;
+  padding-right: ${({ clearable, _size }) => (clearable ? SIZE_TO_PX[_size] : 7)}px;
+  padding-left: ${({ hasIcon, _size }) => (hasIcon ? SIZE_TO_PX[_size] : 7)}px;
+  font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
+  border: none;
+
+  background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
+    minimal ? 'transparent' : darken(0.01, theme.main)};
+  color: ${({ theme }: IReqoreInputStyle) => getReadableColor(theme)};
+
+  transition: all 0.2s ease-out;
+
+  &:active,
+  &:focus,
+  &:hover {
+    outline: none;
+  }
+
+  &:active,
+  &:focus {
+    background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
+      minimal ? 'transparent' : changeLightness(darken(0.01, theme.main), 0.01)};
+  }
+
+  &::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(
+  (
+    {
+      tooltip,
+      tooltipPlacement,
+      width,
+      size = 'normal',
+      fluid,
+      fixed,
+      className,
+      onClearClick,
+      icon,
+      flat,
+      rounded = true,
+      minimal,
+      children,
+      ...rest
+    }: IReqoreInputProps,
+    ref
+  ) => {
+    const innerRef = useRef(null);
+    const combinedRef = useCombinedRefs(innerRef, ref);
+
+    usePopover({
+      targetElement: combinedRef.current,
+      content: tooltip,
+      handler: 'hover',
+      placement: tooltipPlacement,
+      show: !!tooltip,
+    });
+
+    return (
+      <StyledInputWrapper
+        className='reqore-control-wrapper'
+        fluid={fluid}
+        fixed={fixed}
+        width={width}
+        flat={flat}
+        rounded={rounded}
+        minimal={minimal}
+        _size={size}
+        ref={combinedRef}
+      >
+        {icon && (
+          <StyledIconWrapper _size={size}>
+            <ReqoreIcon size={`${TEXT_FROM_SIZE[size]}px`} icon={icon} />
+          </StyledIconWrapper>
+        )}
+        <StyledInput
+          {...rest}
+          _size={size}
+          minimal={minimal}
+          hasIcon={!!icon}
+          clearable={!rest?.disabled && !!(onClearClick && rest?.onChange)}
+          className={`${className || ''} reqore-control reqore-input`}
+        />
+        <ReqoreInputClearButton
+          enabled={!rest?.disabled && !!(onClearClick && rest?.onChange)}
+          onClick={onClearClick}
+          size={size}
+          show={rest?.value && rest.value !== '' ? true : false}
+        />
+      </StyledInputWrapper>
+    );
+  }
+);
+
+export default ReqoreInput;

package/src/components/InputClearButton/index.tsx

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import ReqoreButton, { IReqoreButtonProps } from '../Button';
+
+export interface IReqoreInputClearButtonProps extends IReqoreButtonProps {
+  show: boolean;
+  enabled: boolean;
+}
+
+export const StyledInputClearButton = styled(ReqoreButton)<{ show?: boolean }>`
+  position: absolute;
+  right: ${({ show }) => (show ? 0 : -40)}px;
+  top: 0;
+  opacity: ${({ show }) => (show ? 0.2 : 0)};
+`;
+
+const ReqoreInputClearButton = ({
+  show,
+  enabled,
+  size = 'normal',
+  ...rest
+}: IReqoreInputClearButtonProps) =>
+  enabled ? (
+    <StyledInputClearButton
+      {...rest}
+      className='reqore-clear-input-button'
+      icon='CloseLine'
+      minimal
+      tabIndex={show ? 1 : -1}
+      size={size}
+      show={show}
+    />
+  ) : null;
+
+export default ReqoreInputClearButton;

package/src/components/InternalPopover/index.tsx

@@ -0,0 +1,185 @@
+import { isString } from 'lodash';
+import React, { MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
+import { usePopper } from 'react-popper';
+import styled, { css } from 'styled-components';
+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 { getReadableColor } from '../../helpers/colors';
+
+const StyledPopoverArrow = styled.div<{ theme: IReqoreTheme }>`
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  z-index: -1;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 10px;
+    height: 10px;
+    position: absolute;
+    z-index: -1;
+    transform: rotate(45deg);
+    ${({ theme }) => css`
+      background-color: ${theme.popover?.main || theme.main};
+      box-shadow: rgba(31, 26, 34, 0.6) 0px 0px 4px;
+    `}
+  }
+`;
+
+const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
+  animation: 0.2s ${fadeIn} ease-out;
+
+  ${({ theme }) => {
+    const defaultColor: string = theme.popover?.main || theme.main;
+
+    return css`
+      z-index: 999999;
+      background-color: ${defaultColor};
+      color: ${getReadableColor(theme, undefined, undefined, false, defaultColor)};
+      border-radius: 3.5px;
+      box-shadow: rgba(31, 26, 34, 0.6) 0px 0px 4px;
+    `;
+  }}
+
+  &[data-popper-placement^='top'] > ${StyledPopoverArrow} {
+    bottom: -5px;
+  }
+
+  &[data-popper-placement^='bottom'] > ${StyledPopoverArrow} {
+    top: -5px;
+  }
+
+  &[data-popper-placement^='left'] > ${StyledPopoverArrow} {
+    right: -5px;
+  }
+
+  &[data-popper-placement^='right'] > ${StyledPopoverArrow} {
+    left: -5px;
+  }
+
+  &[data-popper-reference-hidden='true'] {
+    visibility: hidden;
+    pointer-events: none;
+  }
+`;
+
+const StyledPopoverContent = styled.div<{ isString?: boolean }>`
+  width: 100%;
+  height: 100%;
+  padding: ${({ isString }) => (isString ? '8px' : '0px')};
+  z-index: 20;
+  position: relative;
+  overflow: hidden;
+  background-color: ${({ theme }) => theme.popover?.main || theme.main};
+  border-radius: 3.5px;
+
+  .reqore-popover-text {
+    font-size: 14px;
+  }
+`;
+
+export interface IReqoreInternalPopoverProps extends IPopoverData {}
+
+const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
+  targetElement,
+  content,
+  id,
+  placement,
+  noArrow,
+  useTargetWidth,
+}) => {
+  const { removePopover, updatePopover, uiScale } = useContext(PopoverContext);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const popperRef: MutableRefObject<any> = useRef(null);
+  const { styles, attributes } = usePopper(targetElement, popperElement, {
+    placement,
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, noArrow ? -1 : 10],
+        },
+      },
+      {
+        name: 'arrow',
+        options: {
+          element: arrowElement,
+        },
+      },
+      {
+        name: 'hide',
+        enabled: true,
+      },
+    ],
+  });
+
+  useEffect(() => {
+    if (popperRef.current) {
+      updatePopover?.(id, { 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) => {
+      if (uiScale || uiScale === 0) {
+        return parseInt(axis, 10) < 0 ? parseInt(axis, 10) * uiScale : parseInt(axis, 10) / uiScale;
+      }
+      return parseInt(axis, 10);
+    });
+
+  return (
+    <ReqoreThemeProvider>
+      <StyledPopoverWrapper
+        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 && (
+          <StyledPopoverArrow ref={setArrowElement} style={styles.arrow} data-popper-arrow />
+        )}
+        <StyledPopoverContent isString={isString(content)}>
+          {isString(content) ? (
+            <span className='reqore-popover-text'>{content}</span>
+          ) : (
+            <>
+              {React.Children.map(content, (child) =>
+                child
+                  ? React.cloneElement(child, {
+                      _insidePopover: true,
+                      _popoverId: id,
+                    })
+                  : null
+              )}
+            </>
+          )}
+        </StyledPopoverContent>
+      </StyledPopoverWrapper>
+    </ReqoreThemeProvider>
+  );
+};
+
+export default InternalPopover;

package/src/components/Layout/content.tsx

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,36 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { IReqoreTheme } from '../../constants/theme';
+import { getReadableColor } from '../../helpers/colors';
+
+export interface IReqoreMenuDividerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  label?: string;
+}
+
+const StyledMenuDivider = styled.div<{ theme: IReqoreTheme }>`
+  width: 100%;
+  padding: 8px 0;
+  background-color: ${({ theme }) => theme.main};
+  font-size: 11px;
+  text-transform: uppercase;
+  text-align: center;
+  letter-spacing: 2px;
+  font-weight: 600;
+
+  color: ${({ theme }) => getReadableColor(theme, undefined, undefined)};
+`;
+
+const ReqoreMenuDivider = forwardRef(
+  ({ label, className, ...rest }: IReqoreMenuDividerProps, ref: any) => (
+    <StyledMenuDivider
+      {...rest}
+      className={`${className || ''} reqore-menu-divider`}
+      ref={ref}
+    >
+      {label}
+    </StyledMenuDivider>
+  )
+);
+
+export default ReqoreMenuDivider;

package/src/components/Menu/index.tsx

@@ -0,0 +1,64 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { IReqoreCustomTheme, IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { changeLightness } from '../../helpers/colors';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { IReqoreComponent } from '../../types/global';
+
+export interface IReqoreMenuProps extends IReqoreComponent, React.HTMLAttributes<HTMLDivElement> {
+  children: any;
+  position?: 'left' | 'right';
+  width?: string;
+  maxHeight?: string;
+  customTheme?: IReqoreCustomTheme;
+  intent?: IReqoreIntent;
+}
+
+export interface IReqoreMenuStyle extends IReqoreMenuProps {
+  theme: IReqoreTheme;
+}
+
+const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
+  width: ${({ width }) => width || '160px'};
+  padding: 5px;
+  max-height: ${({ maxHeight }) => maxHeight || undefined};
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  background-color: ${({ theme }) => theme.main};
+
+  ${({ theme, position }) =>
+    position &&
+    css`
+    border-${position === 'left' ? 'right' : 'left'}: 1px solid ${changeLightness(
+      theme.main,
+      0.05
+    )};
+    padding-${position === 'left' ? 'right' : 'left'}: 10px;
+  `}
+`;
+
+const ReqoreMenu: React.FC<IReqoreMenuProps> = forwardRef(
+  ({ children, position, _insidePopover, _popoverId, customTheme, intent, ...rest }, ref: any) => {
+    const theme = useReqoreTheme('main', customTheme, intent);
+
+    return (
+      <ReqoreThemeProvider theme={theme}>
+        <StyledReqoreMenu {...rest} position={position} ref={ref} theme={theme}>
+          {React.Children.map(children, (child) =>
+            child
+              ? // @ts-ignore
+                React.cloneElement(child, {
+                  _insidePopover,
+                  _popoverId,
+                })
+              : null
+          )}
+        </StyledReqoreMenu>
+      </ReqoreThemeProvider>
+    );
+  }
+);
+
+export default ReqoreMenu;