@qoretechnologies/reqore 0.20.0 → 0.20.3

package/src/components/Drawer/index.tsx

@@ -0,0 +1,387 @@
+import { animated, useTransition } from '@react-spring/web';
+import { rgba } from 'polished';
+import { Resizable } from 're-resizable';
+import { useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import styled, { css } from 'styled-components';
+import { SPRING_CONFIG } from '../../constants/animations';
+import { IReqoreTheme } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { getMainBackgroundColor } from '../../helpers/colors';
+import useLatestZIndex from '../../hooks/useLatestZIndex';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreButton from '../Button';
+import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../Panel';
+
+export type TPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface IReqoreDrawerProps extends IReqorePanelProps {
+  children?: any;
+  isOpen?: boolean;
+  isHidden?: boolean;
+  position?: TPosition;
+  hidable?: boolean;
+  resizable?: boolean;
+  onClose?: () => void;
+  onHideToggle?: (isHidden: boolean) => void;
+  hasBackdrop?: boolean;
+  size?: string;
+  maxSize?: string;
+  minSize?: string;
+  opacity?: number;
+  floating?: boolean;
+  blur?: number;
+  _isModal?: boolean;
+  width?: number | string;
+  height?: number | string;
+}
+
+export interface IReqoreDrawerStyle extends IReqoreDrawerProps {
+  theme: IReqoreTheme;
+  width?: number | string;
+  height?: number | string;
+  w?: number | string;
+  h?: number | string;
+}
+
+export const StyledCloseWrapper = styled.div<IReqoreDrawerStyle>`
+  position: absolute;
+
+  ${({ position, w, h }) => {
+    switch (position) {
+      case 'bottom':
+        return css`
+          display: flex;
+          right: 0;
+          justify-content: flex-end;
+          margin-top: -35px;
+          > * {
+            margin-right: 5px;
+          }
+        `;
+      case 'top':
+        return css`
+          display: flex;
+          right: 0;
+          justify-content: flex-end;
+          margin-top: calc(${h || '0px'} + 5px);
+          > * {
+            margin-right: 5px;
+          }
+        `;
+      case 'left':
+        return css`
+          display: flex;
+          flex-flow: column;
+          top: 0;
+          margin-left: calc(${w || '0px'} + 5px);
+          > * {
+            margin-top: 5px;
+          }
+        `;
+      case 'right':
+        return css`
+          display: flex;
+          flex-flow: column;
+          top: 0;
+          margin-left: -35px;
+          > * {
+            margin-top: 5px;
+          }
+        `;
+    }
+  }}
+`;
+
+export const StyledDrawerResizable = styled(animated.div)``;
+
+export const StyledBackdrop = styled(animated.div)<
+  IReqoreDrawerStyle & { closable: boolean; zIndex?: number }
+>`
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  backdrop-filter: ${({ blur }) => (blur ? `blur(${blur}px)` : undefined)};
+  z-index: ${({ zIndex }) => zIndex};
+  background-color: ${({ theme }) => rgba(getMainBackgroundColor(theme), 0.3)};
+  cursor: ${({ closable }) => (closable ? 'pointer' : 'initial')};
+`;
+
+/**
+ * It returns an icon name based on the position and whether the panel is hidden or not
+ * @param {'top' | 'bottom' | 'left' | 'right'} position - The position of the panel.
+ * @param {boolean} isHidden - boolean - This is a boolean value that determines whether the panel is
+ * hidden or not.
+ * @returns A function that takes two arguments, position and isHidden, and returns an IReqoreIconName.
+ */
+const getHideShowIcon = (
+  position: 'top' | 'bottom' | 'left' | 'right',
+  isHidden: boolean
+): IReqoreIconName => {
+  switch (position) {
+    case 'top':
+      return isHidden ? 'ArrowDownSLine' : 'ArrowUpSLine';
+    case 'bottom':
+      return isHidden ? 'ArrowUpSLine' : 'ArrowDownSLine';
+    case 'left':
+      return isHidden ? 'ArrowRightSLine' : 'ArrowLeftSLine';
+    case 'right':
+      return isHidden ? 'ArrowLeftSLine' : 'ArrowRightSLine';
+  }
+};
+
+const getSpringConfig = (isModal?: boolean, position?: TPosition, floating?: boolean) =>
+  isModal
+    ? {
+        from: { opacity: 0, transform: 'scale(0.5) translate(-50%, -50%)', filter: 'blur(10px)' },
+        enter: { opacity: 1, transform: 'scale(1) translate(-50%, -50%)', filter: 'blur(0px)' },
+        leave: { opacity: 0, transform: 'scale(0.5) translate(-50%, -50%)', filter: 'blur(10px)' },
+      }
+    : {
+        from: { opacity: 0, [position]: '-80px' },
+        enter: { opacity: 1, [position]: floating ? '10px' : '0px' },
+        leave: { opacity: 0, [position]: '-80px' },
+      };
+
+export const ReqoreDrawer = ({
+  children,
+  isOpen,
+  isHidden,
+  customTheme,
+  position = 'right',
+  maxSize,
+  minSize = '150px',
+  onClose,
+  hasBackdrop = true,
+  size,
+  resizable = true,
+  hidable,
+  onHideToggle,
+  className,
+  flat,
+  floating,
+  blur,
+  opacity,
+  intent,
+  _isModal,
+  width,
+  height,
+  ...rest
+}: IReqoreDrawerProps) => {
+  const theme = useReqoreTheme('main', customTheme, intent);
+  const layout = useMemo(
+    () =>
+      _isModal ? 'center' : position === 'top' || position === 'bottom' ? 'horizontal' : 'vertical',
+    [position, _isModal]
+  );
+  const [_isHidden, setIsHidden] = useState<boolean>(isHidden || false);
+  const [_size, setSize] = useState<any>({
+    width: width || (layout === 'horizontal' ? 'auto' : size || '300px'),
+    height: height || (layout === 'vertical' ? 'auto' : size || '300px'),
+  });
+
+  useEffect(() => {
+    setSize({
+      width: width || (layout === 'horizontal' ? 'auto' : size || '300px'),
+      height: height || (layout === 'vertical' ? 'auto' : size || '300px'),
+    });
+  }, [position, size, width, height]);
+
+  const transitions = useTransition(isOpen, {
+    ...getSpringConfig(_isModal, position, floating),
+    config: SPRING_CONFIG,
+  });
+
+  const zIndex = useLatestZIndex();
+  const wrapperZIndex = useLatestZIndex();
+  const actions: IReqorePanelAction[] = useMemo(() => {
+    const actions: IReqorePanelAction[] = [];
+
+    /* Adding a hide/show button to the drawer. */
+    if (hidable) {
+      actions.push({
+        icon: getHideShowIcon(position, _isHidden),
+        onClick: () => {
+          setIsHidden(!_isHidden);
+          if (onHideToggle) {
+            onHideToggle(_isHidden);
+          }
+        },
+        className: 'reqore-drawer-hide-button',
+      });
+    }
+
+    /* Adding a close button to the drawer. */
+    if (onClose) {
+      actions.push({
+        icon: 'CloseLine',
+        onClick: onClose,
+        className: 'reqore-drawer-close-button',
+      });
+    }
+
+    return actions;
+  }, [hidable, position, onClose]);
+
+  const positions = useMemo(() => {
+    /* Centering the modal. */
+    if (_isModal) {
+      return {
+        left: '50%',
+        top: '50%',
+        transform: 'translate(-50%)',
+      };
+    }
+
+    return {
+      top: position === 'top' || layout === 'vertical' ? (floating ? '10px' : 0) : undefined,
+      bottom: position === 'bottom' || layout === 'vertical' ? (floating ? '10px' : 0) : undefined,
+      right: position === 'right' || layout === 'horizontal' ? (floating ? '10px' : 0) : undefined,
+      left: position === 'left' || layout === 'horizontal' ? (floating ? '10px' : 0) : undefined,
+    };
+  }, [_isModal, position, layout, floating]);
+
+  console.log(width, height, _size);
+
+  return createPortal(
+    transitions((styles: any, item) =>
+      item ? (
+        <ReqoreThemeProvider theme={theme}>
+          {hasBackdrop && !_isHidden ? (
+            <StyledBackdrop
+              className='reqore-drawer-backdrop'
+              onClick={() => onClose && onClose()}
+              closable={!!onClose}
+              zIndex={zIndex}
+              blur={blur}
+              style={{
+                opacity: styles.opacity,
+              }}
+            />
+          ) : null}
+          <Resizable
+            className='reqore-drawer-resizable'
+            maxHeight={
+              layout === 'horizontal' || layout === 'center' ? maxSize || '90vh' : undefined
+            }
+            minHeight={
+              layout === 'center'
+                ? '140px'
+                : layout === 'horizontal'
+                ? _isHidden
+                  ? 0
+                  : minSize || '140px'
+                : undefined
+            }
+            maxWidth={layout === 'vertical' || layout === 'center' ? maxSize || '90vw' : undefined}
+            minWidth={
+              layout === 'center'
+                ? '140px'
+                : layout === 'vertical'
+                ? _isHidden
+                  ? 0
+                  : minSize || '140px'
+                : undefined
+            }
+            as={StyledDrawerResizable}
+            style={
+              {
+                zIndex: wrapperZIndex,
+                display: 'flex',
+                position: 'fixed',
+                overflow: hidable ? undefined : 'hidden',
+                transformOrigin: 'top left',
+                ...positions,
+                ...styles,
+              } as any
+            }
+            handleWrapperStyle={{
+              zIndex: wrapperZIndex + 1,
+            }}
+            size={{
+              width: _isModal
+                ? _size.width
+                : layout === 'vertical'
+                ? _isHidden
+                  ? 0
+                  : _size.width
+                : 'auto',
+              height: _isModal
+                ? _size.height
+                : layout === 'horizontal'
+                ? _isHidden
+                  ? 0
+                  : _size.height
+                : 'auto',
+            }}
+            onResize={
+              resizable
+                ? (_, _direction, component: HTMLElement) => {
+                    setSize({
+                      width: component.style.width,
+                      height: component.style.height,
+                    });
+                  }
+                : undefined
+            }
+            enable={{
+              top: (resizable && position === 'bottom') || _isModal ? true : false,
+              right: (resizable && position === 'left') || _isModal ? true : false,
+              left: (resizable && position === 'right') || _isModal ? true : false,
+              bottom: (resizable && position === 'top') || _isModal ? true : false,
+              bottomLeft: _isModal,
+              bottomRight: _isModal,
+              topLeft: _isModal,
+              topRight: _isModal,
+            }}
+          >
+            {_isHidden && hidable ? (
+              <StyledCloseWrapper
+                className='reqore-drawer-controls'
+                position={position}
+                w={layout === 'vertical' && _isHidden ? 0 : _size.width}
+                h={layout === 'horizontal' && _isHidden ? 0 : _size.height}
+              >
+                {hidable && (
+                  <ReqoreButton
+                    flat
+                    customTheme={theme}
+                    className='reqore-drawer-control reqore-drawer-hide-button'
+                    icon={getHideShowIcon(position, _isHidden)}
+                    onClick={() => {
+                      setIsHidden(!_isHidden);
+                      onHideToggle && onHideToggle(!_isHidden);
+                    }}
+                  />
+                )}
+              </StyledCloseWrapper>
+            ) : null}
+            {!_isHidden && (
+              <ReqorePanel
+                {...rest}
+                opacity={opacity}
+                blur={hasBackdrop ? 0 : blur}
+                actions={actions}
+                customTheme={customTheme}
+                intent={intent}
+                rounded={floating || _isModal ? true : false}
+                flat={flat}
+                className={`${className || ''} reqore-drawer`}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                }}
+              >
+                {children}
+              </ReqorePanel>
+            )}
+          </Resizable>
+        </ReqoreThemeProvider>
+      ) : null
+    ),
+    document.querySelector('#reqore-portal')!
+  );
+};

package/src/components/Dropdown/index.tsx

@@ -0,0 +1,81 @@
+import { size } from 'lodash';
+import React from 'react';
+import { ReqorePopover } from '../..';
+import { IPopoverOptions } from '../../hooks/usePopover';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreButton, { IReqoreButtonProps } from '../Button';
+import { IReqoreDropdownItemProps } from './item';
+import ReqoreDropdownList from './list';
+
+export interface IReqoreDropdownProps<T> extends IPopoverOptions {
+  items?: IReqoreDropdownItemProps[];
+  multiSelect?: boolean;
+  buttonStyle?: React.CSSProperties;
+  listStyle?: React.CSSProperties;
+  component?: any;
+  componentProps?: T;
+  filterable?: boolean;
+  label?: any;
+  children?: any;
+  width?: string;
+  icon?: IReqoreIconName;
+  rightIcon?: IReqoreIconName;
+  caretPosition?: 'left' | 'right';
+  isDefaultOpen?: boolean;
+}
+
+const ReqoreDropdown = <T extends unknown = IReqoreButtonProps>({
+  items,
+  component,
+  componentProps,
+  label,
+  children,
+  multiSelect,
+  buttonStyle,
+  listStyle,
+  handler,
+  placement,
+  filterable,
+  icon,
+  rightIcon,
+  caretPosition = 'left',
+  isDefaultOpen = false,
+  ...rest
+}: IReqoreDropdownProps<T>) => {
+  return (
+    <ReqorePopover
+      {...rest}
+      component={component || ReqoreButton}
+      componentProps={
+        {
+          icon: caretPosition === 'left' ? icon || 'ArrowDownSFill' : rightIcon,
+          rightIcon: caretPosition === 'right' ? icon || 'ArrowDownSFill' : rightIcon,
+          style: buttonStyle,
+          disabled: !size(items),
+          ...rest,
+          ...((componentProps || {}) as Object),
+        } as T
+      }
+      noWrapper
+      placement={placement || 'bottom-start'}
+      handler={handler || 'click'}
+      openOnMount={isDefaultOpen}
+      content={
+        size(items) ? (
+          <ReqoreDropdownList
+            multiSelect={multiSelect}
+            listStyle={listStyle}
+            width={rest.useTargetWidth ? '100%' : rest.width}
+            items={items}
+            filterable={filterable}
+          />
+        ) : undefined
+      }
+      noArrow
+    >
+      {children || label}
+    </ReqorePopover>
+  );
+};
+
+export default ReqoreDropdown;

package/src/components/Dropdown/item.tsx

@@ -0,0 +1,20 @@
+import { ReqoreMenuDivider, ReqoreMenuItem } from '../..';
+import { IReqoreMenuDividerProps } from '../Menu/divider';
+import { IReqoreMenuItemProps } from '../Menu/item';
+
+export interface IReqoreDropdownItemProps extends IReqoreMenuItemProps {}
+
+export const ReqoreDropdownItem = ({
+  children,
+  ...rest
+}: IReqoreDropdownItemProps) => (
+  <ReqoreMenuItem {...rest} rightIcon={rest.selected ? 'CheckLine' : undefined}>
+    {children}
+  </ReqoreMenuItem>
+);
+
+export interface IReqoreDropdownDividerProps extends IReqoreMenuDividerProps {}
+
+export const ReqoreDropdownDivider = (props: IReqoreDropdownDividerProps) => (
+  <ReqoreMenuDivider {...props} />
+);

package/src/components/Dropdown/list.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { IReqoreComponent } from '../../types/global';
+import ReqoreInput from '../Input';
+import ReqoreMenu from '../Menu';
+import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
+
+export interface IReqoreDropdownListProps extends IReqoreComponent {
+  items?: IReqoreMenuItemProps[];
+  multiSelect?: boolean;
+  listStyle?: React.CSSProperties;
+  width?: string;
+  height?: string;
+  filterable?: boolean;
+}
+
+const ReqoreDropdownList = ({
+  items,
+  multiSelect,
+  listStyle,
+  _popoverId,
+  filterable,
+  width,
+  height,
+}: IReqoreDropdownListProps) => {
+  const [_items, setItems] = useState<IReqoreMenuItemProps[]>(items);
+  const [query, setQuery] = useState<string>('');
+
+  useEffect(() => {
+    setItems(items);
+  }, [items]);
+
+  const filteredItems: IReqoreMenuItemProps[] = useMemo(() => {
+    if (!filterable || query === '') {
+      return _items;
+    }
+
+    return _items.filter((item) => {
+      const text = item.label || item.children;
+
+      if (!text) {
+        return false;
+      }
+
+      return text.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1;
+    });
+  }, [items, query, _items]);
+
+  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+  };
+
+  return (
+    <ReqoreMenu
+      _insidePopover={!multiSelect}
+      _popoverId={_popoverId}
+      style={listStyle}
+      width={width}
+      maxHeight={height || '300px'}
+    >
+      {filterable && (
+        <ReqoreInput
+          value={query}
+          onChange={handleQueryChange}
+          placeholder='Filter'
+          autoFocus
+          onClearClick={() => setQuery('')}
+        />
+      )}
+      {filteredItems.map((item: IReqoreMenuItemProps, index: number) => (
+        <ReqoreMenuItem key={index} {...item} rightIcon={item.selected ? 'CheckLine' : undefined} />
+      ))}
+    </ReqoreMenu>
+  );
+};
+
+export default ReqoreDropdownList;

package/src/components/Header/index.tsx

@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components';
+import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { getReadableColor } from '../../helpers/colors';
+
+export interface IReqoreHeaderStyle extends React.HTMLAttributes<HTMLHeadingElement> {
+  theme: IReqoreTheme;
+  intent?: IReqoreIntent;
+}
+
+const style = ({ theme, intent }: IReqoreHeaderStyle) => css`
+  margin: 0;
+  padding: 0;
+  color: ${intent ? theme.intents[intent] : getReadableColor(theme, undefined, undefined, true)};
+`;
+
+export const ReqoreH1: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h1<IReqoreHeaderStyle>`
+  ${(props) => style(props)};
+`;
+
+export const ReqoreH2: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h2<IReqoreHeaderStyle>`
+  ${(props) => style(props)};
+`;
+
+export const ReqoreH3: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h3<IReqoreHeaderStyle>`
+  ${(props) => style(props)};
+`;
+
+export const ReqoreH4: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h4<IReqoreHeaderStyle>`
+  ${(props) => style(props)};
+`;
+
+export const ReqoreH5: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h5<IReqoreHeaderStyle>`
+  ${(props) => style(props)};
+`;
+
+export const ReqoreH6: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h6<IReqoreHeaderStyle>`
+  ${(props) => style(props)};
+`;

package/src/components/Icon/index.tsx

@@ -0,0 +1,83 @@
+import React, { memo, useContext } from 'react';
+import { IconContext } from 'react-icons';
+import { IconBaseProps, IconType } from 'react-icons/lib';
+import * as RemixIcons from 'react-icons/ri';
+import styled, { css } from 'styled-components';
+import { ReqoreThemeContext } from '../..';
+import { IReqoreIntent } from '../../constants/theme';
+import { IReqoreIconName } from '../../types/icons';
+
+export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+  icon: IReqoreIconName;
+  color?: string;
+  size?: string;
+  iconProps?: IconBaseProps;
+  intent?: IReqoreIntent;
+  margin?: 'right' | 'left' | 'both';
+}
+
+export const StyledIconWrapper = styled.span<{ margin: 'right' | 'left' | 'both' }>`
+  display: inline-block;
+  flex: 0 0 auto;
+  vertical-align: text-bottom;
+  transition: all 0.2s ease-out;
+
+  ${({ margin }) =>
+    margin &&
+    css`
+      margin-left: ${(margin === 'left' || margin === 'both') && '10px'};
+      margin-right: ${(margin === 'right' || margin === 'both') && '10px'};
+    `}
+`;
+
+const ReqoreIcon = memo(
+  ({
+    icon,
+    size = '17px',
+    className,
+    color,
+    margin,
+    style = {},
+    iconProps,
+    intent,
+    ...rest
+  }: IReqoreIconProps) => {
+    const theme = useContext(ReqoreThemeContext);
+    const Icon: IconType = RemixIcons[`Ri${icon}`];
+    const finalColor: string | undefined = intent ? theme.intents[intent] : color;
+
+    if (!Icon) {
+      return (
+        <StyledIconWrapper
+          {...rest}
+          margin={margin}
+          className={`${className || ''} reqore-icon`}
+          style={{ ...style, width: size, height: size }}
+        />
+      );
+    }
+
+    return (
+      <StyledIconWrapper
+        {...rest}
+        margin={margin}
+        style={{ ...style, width: size, height: size }}
+        className={`${className || ''} reqore-icon`}
+      >
+        <IconContext.Provider
+          value={{
+            color: finalColor || 'inherit',
+            size,
+            style: {
+              verticalAlign: 'super',
+            },
+          }}
+        >
+          <Icon {...iconProps} />
+        </IconContext.Provider>
+      </StyledIconWrapper>
+    );
+  }
+);
+
+export default ReqoreIcon;