@qoretechnologies/reqore 0.20.0 → 0.20.3

package/src/components/Menu/item.tsx

@@ -0,0 +1,219 @@
+import React, { forwardRef, useContext, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import PopoverContext from '../../context/PopoverContext';
+import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useTooltip } from '../../hooks/useTooltip';
+import { IReqoreComponent, TReqoreTooltipProp } from '../../types/global';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreIcon from '../Icon';
+
+// @ts-ignore
+export interface IReqoreMenuItemProps extends IReqoreComponent, React.HTMLAttributes<HTMLElement> {
+  children?: string;
+  label?: string | number;
+  icon?: IReqoreIconName;
+  rightIcon?: IReqoreIconName;
+  as?: JSX.Element | React.ElementType | never;
+  selected?: boolean;
+  disabled?: boolean;
+  onClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
+  onRightIconClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
+  tooltip?: TReqoreTooltipProp;
+  intent?: IReqoreIntent;
+}
+
+const StyledElementContent = styled.div<{
+  theme: IReqoreTheme;
+  hasRightIcon?: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  margin-right: 3px;
+  word-break: break-word;
+
+  ${({ hasRightIcon }) =>
+    hasRightIcon &&
+    css`
+      margin-right: 33px;
+    `}
+`;
+
+export interface IReqoreMenuItemStyle {
+  theme: IReqoreTheme;
+  selected: boolean;
+  disabled: boolean;
+  intent?: IReqoreIntent;
+}
+
+const StyledElement = styled.div<IReqoreMenuItemStyle>`
+  min-height: 35px;
+  color: ${({ theme, selected, intent }) =>
+    intent
+      ? getReadableColorFrom(theme.intents[intent], true)
+      : getReadableColor(theme, undefined, undefined, !selected)};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 6px;
+  position: relative;
+  width: 100%;
+  z-index: 0;
+  cursor: pointer;
+  transition: background-color 0.05s ease-out;
+  border-radius: 4px;
+  ${({ theme, selected, intent }: IReqoreMenuItemStyle) => {
+    const bg = intent ? theme.intents[intent] : theme.main;
+
+    return css`
+      background-color: ${selected ? changeLightness(bg!, 0.07) : bg};
+    `;
+  }};
+  overflow: hidden;
+
+  ${({ theme, selected, disabled, intent }) =>
+    !disabled
+      ? css`
+          ${!selected &&
+          css`
+            &:hover {
+              background-color: ${changeLightness(
+                intent ? theme.intents[intent] : theme.main,
+                0.05
+              )};
+            }
+          `}
+
+          &:hover {
+            color: ${({ theme }) =>
+              intent
+                ? getReadableColorFrom(theme.intents[intent])
+                : getReadableColor(theme, undefined, undefined)};
+            text-decoration: none;
+          }
+        `
+      : css`
+          cursor: not-allowed;
+          > * {
+            opacity: 0.5;
+          }
+        `}
+
+  &:not(:first-child) {
+    margin-top: 4px;
+  }
+`;
+
+export interface IReqoreMenuItemRightIconStyle {
+  theme: IReqoreTheme;
+  interactive?: boolean;
+  intent?: IReqoreIntent;
+}
+
+const StyledRightIcon = styled.div<IReqoreMenuItemRightIconStyle>`
+  ${({ theme, interactive, intent }) => css`
+    position: absolute;
+    right: 0px;
+    height: 100%;
+    width: 33px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    top: 0;
+    z-index: 1;
+    transition: background-color 0.2s ease-out;
+
+    ${interactive &&
+    css`
+      cursor: pointer;
+      &:hover {
+        background-color: ${changeLightness(intent ? theme.intents[intent] : theme.main, 0.09)};
+      }
+    `}
+  `}
+`;
+
+const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
+  (
+    {
+      children,
+      label,
+      icon,
+      rightIcon,
+      as,
+      selected,
+      onClick,
+      onRightIconClick,
+      disabled,
+      id,
+      _insidePopover,
+      _popoverId,
+      tooltip,
+      intent,
+      ...rest
+    },
+    ref: any
+  ) => {
+    const { removePopover } = useContext(PopoverContext);
+    const innerRef = useRef(null);
+    const combinedRef = useCombinedRefs(innerRef, ref);
+
+    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+      event.persist();
+
+      onClick?.(id, event);
+
+      if (_insidePopover && _popoverId) {
+        removePopover!(_popoverId);
+      }
+    };
+
+    const handleRightIconClick = (event: React.MouseEvent<HTMLSpanElement>) => {
+      event.persist();
+      event.stopPropagation();
+
+      if (onRightIconClick) {
+        onRightIconClick(id, event);
+
+        if (_insidePopover && _popoverId) {
+          removePopover!(_popoverId);
+        }
+      }
+    };
+
+    useTooltip(combinedRef.current, tooltip);
+
+    return (
+      <StyledElement
+        //@ts-ignore
+        as={as}
+        {...rest}
+        className='reqore-menu-item'
+        onClick={handleClick}
+        selected={selected}
+        ref={combinedRef}
+        disabled={disabled}
+        intent={intent}
+      >
+        <StyledElementContent hasRightIcon={!!rightIcon}>
+          {icon && <ReqoreIcon icon={icon} size='13px' margin='right' />}
+          {label || children}
+        </StyledElementContent>
+        {rightIcon && (
+          <StyledRightIcon
+            className='reqore-menu-item-right-icon'
+            interactive={!!onRightIconClick}
+            onClick={handleRightIconClick}
+            intent={intent}
+          >
+            <ReqoreIcon icon={rightIcon} size='13px' />
+          </StyledRightIcon>
+        )}
+      </StyledElement>
+    );
+  }
+);
+
+export default ReqoreMenuItem;

package/src/components/Message/index.tsx

@@ -0,0 +1,136 @@
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+import { useMount, useUnmount } from 'react-use';
+import { TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreIcon from '../Icon';
+import {
+  StyledIconWrapper,
+  StyledNotificationContent,
+  StyledNotificationContentWrapper,
+  StyledNotificationTitle,
+  StyledReqoreNotification,
+  typeToIcon,
+} from '../Notifications/notification';
+
+export interface IReqoreMessageProps {
+  intent?: IReqoreIntent;
+  title?: string;
+  children: any;
+  icon?: IReqoreIconName;
+  onClose?: () => any;
+  onClick?: () => any;
+  duration?: number;
+  onFinish?: () => any;
+  flat?: boolean;
+  inverted?: boolean;
+  size?: TSizes;
+}
+
+export interface IReqoreNotificationStyle extends IReqoreMessageProps {
+  theme: IReqoreTheme;
+  clickable?: boolean;
+  timeout?: number;
+}
+
+const ReqoreMessage: React.FC<IReqoreMessageProps> = forwardRef(
+  (
+    {
+      intent,
+      icon,
+      title,
+      children,
+      onClose,
+      onClick,
+      duration,
+      onFinish,
+      flat,
+      inverted,
+      size = 'normal',
+    },
+    ref: any
+  ) => {
+    const [internalTimeout, setInternalTimeout] = useState<NodeJS.Timeout | null>(null);
+
+    useMount(() => {
+      if (duration) {
+        setInternalTimeout(
+          setTimeout(() => {
+            onFinish && onFinish();
+          }, duration)
+        );
+      }
+    });
+
+    useEffect(() => {
+      if (internalTimeout) {
+        clearTimeout(internalTimeout);
+        setInternalTimeout(
+          setTimeout(() => {
+            onFinish && onFinish();
+          }, duration)
+        );
+      }
+    }, [duration, intent, children, title]);
+
+    useUnmount(() => {
+      if (internalTimeout) {
+        clearTimeout(internalTimeout);
+      }
+    });
+
+    const leftIcon: IReqoreIconName | undefined = useMemo(
+      () => icon || (intent ? typeToIcon[intent] : undefined),
+      [icon, intent]
+    );
+
+    return (
+      <ReqoreThemeProvider>
+        <StyledReqoreNotification
+          key={`${duration}${intent}${title}${children}`}
+          intent={intent}
+          timeout={duration}
+          clickable={!!onClick}
+          onClick={onClick}
+          flat={flat}
+          inverted={inverted}
+          fluid
+          className='reqore-message'
+          ref={ref}
+          size={size}
+        >
+          {leftIcon ? (
+            <StyledIconWrapper intent={intent} size={size}>
+              <ReqoreIcon
+                icon={leftIcon}
+                margin={flat && inverted ? undefined : 'left'}
+                size={`${TEXT_FROM_SIZE[size]}px`}
+              />
+            </StyledIconWrapper>
+          ) : null}
+          <StyledNotificationContentWrapper size={size}>
+            {title && <StyledNotificationTitle>{title}</StyledNotificationTitle>}
+            <StyledNotificationContent>{children}</StyledNotificationContent>
+          </StyledNotificationContentWrapper>
+          {onClose && (
+            <StyledIconWrapper
+              size={size}
+              intent={intent}
+              clickable
+              className='reqore-message-close'
+              onClick={(event) => {
+                event.stopPropagation();
+                onClose && onClose();
+              }}
+            >
+              <ReqoreIcon icon='CloseFill' margin='both' size={`${TEXT_FROM_SIZE[size]}px`} />
+            </StyledIconWrapper>
+          )}
+        </StyledReqoreNotification>
+      </ReqoreThemeProvider>
+    );
+  }
+);
+
+export default ReqoreMessage;

package/src/components/Modal/actions.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { IReqoreNavbarProps, StyledNavbar } from '../Navbar';
+import ReqoreNavbarGroup, { IReqoreNavbarGroupProps } from '../Navbar/group';
+
+const StyledActions = styled(StyledNavbar)`
+  background-color: transparent;
+  border: 0;
+  box-shadow: none;
+  padding: 0;
+`;
+
+export const ReqoreModalActionsGroup = ({
+  children,
+  className,
+  ...rest
+}: IReqoreNavbarGroupProps) => (
+  <ReqoreNavbarGroup {...rest} className={`${className || ''} reqore-modal-actions-group`}>
+    {children}
+  </ReqoreNavbarGroup>
+);
+
+export const ReqoreModalActions = ({ children, className, ...rest }: IReqoreNavbarProps) => (
+  <StyledActions {...rest} className={`${className || ''} reqore-modal-actions`}>
+    {children}
+  </StyledActions>
+);

package/src/components/Modal/content.tsx

@@ -0,0 +1,11 @@
+import Scroll from 'react-scrollbar';
+
+export interface IReqoreModalContent {
+  children?: any;
+}
+
+export const ReqoreModalContent = ({ children }: IReqoreModalContent) => (
+  <Scroll horizontal='false' className='reqore-modal-content'>
+    {children}
+  </Scroll>
+);

package/src/components/Modal/index.tsx

@@ -0,0 +1,26 @@
+import { IReqoreTheme } from '../../constants/theme';
+import { IReqoreDrawerProps, ReqoreDrawer } from '../Drawer';
+
+export interface IReqoreModalProps extends Omit<IReqoreDrawerProps, 'position'> {
+  position?: 'top' | 'center' | 'bottom';
+  width?: string;
+  height?: string;
+}
+
+export interface IReqoreModalStyle extends IReqoreModalProps {
+  theme: IReqoreTheme;
+  zIndex?: number;
+}
+
+export const ReqoreModal = ({ width = '80vw', height = 'auto', ...rest }: IReqoreModalProps) => {
+  return (
+    <ReqoreDrawer
+      {...rest}
+      width={width}
+      height={height}
+      position='left'
+      _isModal
+      className={`${rest.className || ''} reqore-modal`}
+    />
+  );
+};

package/src/components/Navbar/divider.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { IReqoreTheme } from '../../constants/theme';
+import { getReadableColor } from '../../helpers/colors';
+
+export interface IReqoreNavbarDividerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  type?: 'header' | 'footer';
+  theme?: IReqoreTheme;
+}
+
+const StyledNavbarDivider = styled.div<{
+  theme: IReqoreTheme;
+  type?: 'header' | 'footer';
+}>`
+  position: relative;
+  width: 20px;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 1px;
+    height: 50%;
+    background-color: ${({ theme, type }) =>
+      getReadableColor(
+        theme,
+        undefined,
+        undefined,
+        true,
+        theme[type]?.background || theme[type]?.main || theme.main
+      )};
+    opacity: 0.2;
+  }
+`;
+
+const ReqoreNavbarDivider = forwardRef(
+  ({ type, ...rest }: IReqoreNavbarDividerProps, ref: any) => (
+    <StyledNavbarDivider
+      {...rest}
+      type={type}
+      className={`${rest.className || ''} reqore-navbar-divider`}
+      ref={ref}
+    />
+  )
+);
+
+export default ReqoreNavbarDivider;

package/src/components/Navbar/group.tsx

@@ -0,0 +1,57 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { IReqoreTheme } from '../../constants/theme';
+
+export interface IReqoreNavbarGroupProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  position?: 'right' | 'left';
+  type?: 'footer' | 'header';
+  children?: any;
+  theme?: IReqoreTheme;
+}
+
+export interface IReqoreNavbarGroupStyle extends IReqoreNavbarGroupProps {
+  theme: IReqoreTheme;
+}
+
+export const StyledNavbarGroup = styled.div<IReqoreNavbarGroupStyle>`
+  ${({ position }: IReqoreNavbarGroupStyle) => css`
+    height: 100%;
+    float: ${position};
+    color: inherit;
+    background-color: inherit;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `}
+`;
+
+const ReqoreNavbarGroup = forwardRef(
+  (
+    { position = 'left', children, type, ...rest }: IReqoreNavbarGroupProps,
+    ref: any
+  ) => (
+    <StyledNavbarGroup
+      {...rest}
+      className={`${rest.className || ''} reqore-navbar-group`}
+      position={position}
+      ref={ref}
+    >
+      {React.Children.map(children, (child) =>
+        child
+          ? React.cloneElement(child, {
+              type,
+              theme: rest.theme,
+              componentProps: {
+                ...child.props?.componentProps,
+                type,
+                theme: rest.theme,
+              },
+            })
+          : null
+      )}
+    </StyledNavbarGroup>
+  )
+);
+
+export default ReqoreNavbarGroup;

package/src/components/Navbar/index.tsx

@@ -0,0 +1,81 @@
+import { darken } from 'polished';
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { IReqoreNavbarTheme, IReqoreTheme } from '../../constants/theme';
+import { getMainColor, getReadableColor } from '../../helpers/colors';
+import { useReqoreTheme } from '../../hooks/useTheme';
+
+export interface IReqoreNavbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: any;
+  position?: 'top' | 'bottom';
+  type?: 'header' | 'footer';
+  customTheme?: IReqoreNavbarTheme;
+  flat?: boolean;
+}
+
+export interface IReqoreNavbarStyle extends IReqoreNavbarProps {
+  theme: IReqoreTheme;
+}
+
+export const StyledNavbar = styled.div<IReqoreNavbarStyle>`
+  ${({ theme, type }: IReqoreNavbarStyle) => css`
+    height: 50px;
+    width: 100%;
+    padding: 0 10px;
+    color: ${theme[type]?.color ||
+    getReadableColor(
+      theme,
+      undefined,
+      undefined,
+      true,
+      theme[type]?.background || theme[type]?.main || theme.main
+    )};
+    background-color: ${theme[type]?.background || theme[type]?.main || theme.main};
+  `}
+
+  ${({ theme, type, flat }: IReqoreNavbarStyle) =>
+    !flat
+      ? css`
+    box-shadow: rgba(31, 26, 34, 0.05) 0px ${type === 'header' ? '2px' : '-2px'} 6px;
+    
+    border-${type === 'header' ? 'bottom' : 'top'}: 1px solid ${
+          theme[type]?.border || darken(0.05, getMainColor(theme, type))
+        };
+  `
+      : undefined}
+`;
+
+const ReqoreNavbar = forwardRef(
+  ({ position = 'top', children, type, customTheme, ...rest }: IReqoreNavbarProps, ref: any) => {
+    const theme = useReqoreTheme(type, customTheme);
+
+    return (
+      <StyledNavbar
+        {...rest}
+        className={`${rest.className || ''} reqore-navbar-${type}`}
+        position={position}
+        type={type}
+        ref={ref}
+        theme={theme}
+      >
+        {React.Children.map(children, (child) =>
+          child
+            ? React.cloneElement(child, {
+                type,
+                theme,
+                componentProps: { theme },
+              })
+            : null
+        )}
+      </StyledNavbar>
+    );
+  }
+);
+
+export const ReqoreHeader = forwardRef((props: IReqoreNavbarProps, ref: any) => (
+  <ReqoreNavbar {...props} type='header' ref={ref} />
+));
+
+export const ReqoreFooter = forwardRef((props: IReqoreNavbarProps, ref: any) => (
+  <ReqoreNavbar {...props} type='footer' ref={ref} />
+));

package/src/components/Navbar/item.tsx

@@ -0,0 +1,75 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { IReqoreTheme } from '../../constants/theme';
+import { changeLightness, getMainColor } from '../../helpers/colors';
+
+export interface IReqoreNavbarItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: any;
+  interactive?: boolean;
+  type?: 'header' | 'footer';
+  disabled?: boolean;
+  active?: boolean;
+  theme?: IReqoreTheme;
+}
+
+export interface IReqoreNavbarItemStyle extends IReqoreNavbarItemProps {
+  theme?: IReqoreTheme;
+}
+
+const StyledNavbarItem = styled.div<IReqoreNavbarItemStyle>`
+  height: 100%;
+  min-width: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px;
+  color: inherit;
+  background-color: ${({ theme, active, type }) =>
+    active && (theme[type]?.hoverColor || changeLightness(getMainColor(theme, type), 0.05))};
+
+  ${({ interactive, theme, type }: IReqoreNavbarItemStyle) => {
+    if (interactive) {
+      return css`
+        transition: background-color 0.2s ease-out;
+        cursor: pointer;
+        &:hover {
+          background-color: ${theme[type]?.hoverColor ||
+          changeLightness(getMainColor(theme, type), 0.05)};
+        }
+      `;
+    }
+
+    return undefined;
+  }}
+
+  opacity: ${({ disabled }) => disabled && 0.3};
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      opacity: 0.5;
+      pointer-events: none;
+      cursor: not-allowed;
+    `}
+`;
+
+const ReqoreNavbarItem = forwardRef(
+  (
+    { interactive, children, type, disabled, active, ...rest }: IReqoreNavbarItemProps,
+    ref: any
+  ) => (
+    <StyledNavbarItem
+      {...rest}
+      className={`${rest.className || ''} reqore-navbar-item`}
+      interactive={interactive || !!rest.onClick}
+      disabled={disabled}
+      active={active}
+      type={type}
+      ref={ref}
+    >
+      {children}
+    </StyledNavbarItem>
+  )
+);
+
+export default ReqoreNavbarItem;