@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/components/MultiSelect/index.tsx

@@ -1,288 +0,0 @@
-import { omit, size } from 'lodash';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ReqoreDropdown, ReqoreInput } from '../..';
-import { TSizes } from '../../constants/sizes';
-import { IPopoverControls } from '../../hooks/usePopover';
-import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
-import { IReqoreDropdownProps } from '../Dropdown';
-import { IReqoreDropdownItem } from '../Dropdown/list';
-import { IReqoreEffect } from '../Effect';
-import { IReqoreInputProps } from '../Input';
-import ReqoreTag, { IReqoreTagProps } from '../Tag';
-import ReqoreTagGroup from '../Tag/group';
-
-export type TReqoreMultiSelectItem = Omit<IReqoreDropdownItem, 'color'> &
-  Pick<IReqoreTagProps, 'asBadge' | 'rightIcon' | 'actions'> & { isNew?: boolean };
-
-export interface IReqoreMultiSelectProps
-  extends Omit<IReqoreControlGroupProps, 'children' | 'vertical' | 'stack'> {
-  value?: string[];
-  onValueChange: (value: string[]) => void;
-  items?: TReqoreMultiSelectItem[];
-  onItemClick?: (item: IReqoreDropdownItem) => void;
-  onItemClickIcon?: IReqoreTagProps['rightIcon'];
-  onItemAdded?: (item: TReqoreMultiSelectItem) => void;
-  onItemRemoved?: (item: TReqoreMultiSelectItem) => void;
-  canRemoveItems?: boolean;
-  canCreateItems?: boolean;
-  selectedItemEffect?: IReqoreEffect;
-  selectedItemSize?: TSizes;
-  selectorProps?: Omit<IReqoreInputProps, 'value' | 'onValueChange'> & IReqoreDropdownProps;
-  openOnMount?: IReqoreDropdownProps['isDefaultOpen'];
-  enterKeySelects?: boolean;
-}
-
-export interface IReqoreMultiSelectItemProps
-  extends Pick<IReqoreMultiSelectProps, 'selectedItemEffect' | 'selectedItemSize'> {
-  item: TReqoreMultiSelectItem;
-  onClick?: () => void;
-  onRemoveClick?: () => void;
-  onItemClickIcon?: IReqoreTagProps['rightIcon'];
-}
-
-export const ReqoreMultiSelectItem = memo(
-  ({
-    item,
-    onRemoveClick,
-    onClick,
-    selectedItemEffect,
-    selectedItemSize,
-    onItemClickIcon,
-  }: IReqoreMultiSelectItemProps) => {
-    if (!item) {
-      return null;
-    }
-
-    return (
-      <ReqoreTag
-        {...item}
-        label={item.label || item.value}
-        onRemoveClick={onRemoveClick}
-        intent={item.intent}
-        effect={!item.intent ? item.effect || selectedItemEffect : undefined}
-        size={selectedItemSize}
-        onClick={onClick}
-        rightIcon={
-          item.disabled
-            ? undefined
-            : item.rightIcon
-            ? item.rightIcon
-            : onClick
-            ? onItemClickIcon
-            : undefined
-        }
-      />
-    );
-  }
-);
-
-export const ReqoreMultiSelect = ({
-  value = [],
-  onValueChange,
-  onItemClick,
-  canRemoveItems,
-  canCreateItems,
-  items = [],
-  selectedItemEffect,
-  selectedItemSize,
-  selectorProps,
-  openOnMount,
-  enterKeySelects,
-  onItemClickIcon,
-  onItemAdded,
-  onItemRemoved,
-  ...rest
-}: IReqoreMultiSelectProps) => {
-  const [createdItems, setCreatedItems] = useState<TReqoreMultiSelectItem[]>([]);
-  const [query, setQuery] = useState<string>('');
-  const popoverData = useRef<IPopoverControls>(undefined);
-  const [focused, setFocused] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (query && !popoverData.current?.isOpen()) {
-      popoverData.current?.open();
-    }
-  }, [query]);
-
-  useEffect(() => {
-    if (enterKeySelects) {
-      document.addEventListener('keydown', handleKeyDown);
-    }
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-    };
-  });
-
-  const addRemoveItem = useCallback(
-    (item: TReqoreMultiSelectItem): void => {
-      if (value.includes(item.value)) {
-        onValueChange(value.filter((v) => v !== item.value));
-        onItemRemoved?.(item.value);
-      } else {
-        onValueChange([...value, item.value]);
-        onItemAdded?.(item.value);
-      }
-    },
-    [value, onValueChange, onItemAdded, onItemRemoved]
-  );
-
-  const handleItemSelect = useCallback(
-    (item: Partial<TReqoreMultiSelectItem>) => {
-      addRemoveItem(item);
-
-      if (item.isNew) {
-        setCreatedItems([
-          ...createdItems,
-          {
-            value: item.value,
-          },
-        ]);
-      }
-
-      setQuery('');
-    },
-    [createdItems, value, items, addRemoveItem]
-  );
-
-  /*
-    This code creates a list of all items that are available
-    for selection in the dropdown. It will include the items
-    that are passed in as props, as well as any items that the
-    user has created.
-    */
-  const allItems: TReqoreMultiSelectItem[] = useMemo(() => {
-    const customItems: TReqoreMultiSelectItem[] = size(createdItems)
-      ? [{ divider: true, label: 'Custom Items' }, ...createdItems]
-      : [];
-
-    let filteredItems: TReqoreMultiSelectItem[] = [...items, ...customItems].filter((item) =>
-      query
-        ? item.divider
-          ? false
-          : (item.label || item.value)?.toString().toLowerCase().indexOf(query.toLowerCase()) !== -1
-        : true
-    );
-
-    // Mark selected items as selected
-    filteredItems = filteredItems.map((item: TReqoreMultiSelectItem) => ({
-      ...omit(item, ['actions', 'asBadge', 'rightIcon']),
-      selected: value.includes(item.value),
-    }));
-
-    if (query && !size(filteredItems)) {
-      filteredItems = [
-        { label: 'No existing items found', readOnly: true, minimal: true, icon: 'ForbidLine' },
-      ];
-    }
-
-    // If there is a query and there are filtered items
-    // and there is no item that exactly matches the query, add it to the list
-    if (
-      query &&
-      !filteredItems.some((item: TReqoreMultiSelectItem) => item.value === query) &&
-      canCreateItems
-    ) {
-      filteredItems = [
-        {
-          label: `Create new "${query}"`,
-          value: query,
-          isNew: true,
-          icon: 'AddCircleLine',
-          minimal: true,
-          flat: false,
-          effect: {
-            gradient: {
-              colors: {
-                0: 'success',
-                100: 'success:darken:1',
-              },
-            },
-          },
-        },
-        { divider: true, label: 'Items matching your query' },
-        ...filteredItems,
-      ];
-    }
-
-    return filteredItems;
-  }, [items, createdItems, query, value]);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === 'Enter' && focused) {
-        const item = [...items, ...createdItems].find((item) => item.value === query);
-
-        if (item) {
-          handleItemSelect(item);
-        } else if (canCreateItems && query) {
-          handleItemSelect({
-            value: query,
-            isNew: true,
-          });
-        }
-      }
-    },
-    [items, createdItems, query, canCreateItems, focused]
-  );
-
-  const getItemByValue = useCallback(
-    (value: string): TReqoreMultiSelectItem => {
-      return [...items, ...createdItems].find((item) => item.value === value);
-    },
-    [items, createdItems, value]
-  );
-
-  return (
-    <ReqoreControlGroup vertical fluid {...rest}>
-      <ReqoreTagGroup minimal={rest.minimal} size={rest.size}>
-        {size(value) ? (
-          value.map((v) => (
-            <ReqoreMultiSelectItem
-              key={v}
-              item={getItemByValue(v)}
-              onItemClickIcon={onItemClickIcon}
-              onRemoveClick={canRemoveItems ? () => addRemoveItem(getItemByValue(v)) : undefined}
-              onClick={
-                onItemClick
-                  ? () => {
-                      onItemClick(getItemByValue(v));
-                    }
-                  : undefined
-              }
-              selectedItemEffect={selectedItemEffect}
-              selectedItemSize={selectedItemSize}
-            />
-          ))
-        ) : (
-          <ReqoreTag color='transparent' icon='ForbidLine' label='No items selected' />
-        )}
-      </ReqoreTagGroup>
-      <ReqoreControlGroup minimal={rest.minimal} flat={rest.flat} size={rest.size}>
-        <ReqoreDropdown<IReqoreInputProps>
-          {...selectorProps}
-          multiSelect
-          handler='focus'
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
-          passPopoverData={(data) => (popoverData.current = data)}
-          component={ReqoreInput}
-          onClearClick={() => setQuery('')}
-          value={query}
-          isDefaultOpen={openOnMount}
-          onItemSelect={handleItemSelect}
-          placeholder={canCreateItems ? 'Type to search or create an item...' : 'Type to search...'}
-          onChange={(e: any) => setQuery(e.target.value)}
-          items={
-            size(allItems)
-              ? allItems
-              : canCreateItems
-              ? [{ label: 'No items exist', readOnly: true, minimal: true, icon: 'ForbidLine' }]
-              : []
-          }
-          useTargetWidth
-        />
-      </ReqoreControlGroup>
-    </ReqoreControlGroup>
-  );
-};

package/src/components/Navbar/divider.tsx

@@ -1,50 +0,0 @@
-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<HTMLDivElement, IReqoreNavbarDividerProps>(
-  ({ 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

@@ -1,53 +0,0 @@
-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<HTMLDivElement, IReqoreNavbarGroupProps>(
-  ({ 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

@@ -1,82 +0,0 @@
-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;
-    flex-shrink: 0;
-    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<HTMLDivElement, IReqoreNavbarProps>(
-  ({ 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<HTMLDivElement, IReqoreNavbarProps>(
-  (props: IReqoreNavbarProps, ref: any) => <ReqoreNavbar {...props} type='header' ref={ref} />
-);
-
-export const ReqoreFooter = forwardRef<HTMLDivElement, IReqoreNavbarProps>(
-  (props: IReqoreNavbarProps, ref: any) => <ReqoreNavbar {...props} type='footer' ref={ref} />
-);

package/src/components/Navbar/item.tsx

@@ -1,92 +0,0 @@
-import React, { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { IReqoreTheme } from '../../constants/theme';
-import { changeLightness, getMainColor } from '../../helpers/colors';
-import {
-  ActiveIconScale,
-  DisabledElement,
-  InactiveIconScale,
-  ScaleIconOnHover,
-} from '../../styles';
-
-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))};
-
-  ${InactiveIconScale}
-
-  ${({ active }: IReqoreNavbarItemStyle) => {
-    if (active) {
-      return css`
-        ${ActiveIconScale}
-      `;
-    }
-
-    return undefined;
-  }}
-
-  ${({ 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)};
-        }
-        ${ScaleIconOnHover}
-      `;
-    }
-
-    return undefined;
-  }}
-
-  opacity: ${({ disabled }) => disabled && 0.3};
-
-  ${({ disabled }) =>
-    disabled &&
-    css`
-      ${DisabledElement}
-    `}
-`;
-
-const ReqoreNavbarItem = forwardRef<HTMLDivElement, IReqoreNavbarItemProps>(
-  (
-    { 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;

package/src/components/Notifications/index.tsx

@@ -1,57 +0,0 @@
-import React, { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-
-export interface IReqoreNotificationsWrapperProps {
-  children: any;
-  position?: IReqoreNotificationsPosition;
-}
-
-export type IReqoreNotificationsPosition =
-  | 'TOP'
-  | 'BOTTOM'
-  | 'TOP LEFT'
-  | 'TOP RIGHT'
-  | 'BOTTOM LEFT'
-  | 'BOTTOM RIGHT';
-
-export interface IReqoreNotificationsStyle {
-  positions: string[];
-}
-const StyledNotificationsWrapper = styled.div<IReqoreNotificationsStyle>`
-  position: fixed;
-  z-index: 10000;
-  padding: 0 20px 20px 20px;
-
-  ${({ positions }) => {
-    const hasTwoPositions = positions.length > 1;
-
-    if (hasTwoPositions) {
-      return css`
-        ${positions[0]}: 30px;
-        ${positions[1]}: 30px;
-      `;
-    }
-
-    return css`
-      ${positions[0]}: 30px;
-      left: 50%;
-      transform: translateX(-50%);
-    `;
-  }}
-`;
-
-const ReqoreNotificationsWrapper: React.FC<IReqoreNotificationsWrapperProps> = forwardRef<
-  HTMLDivElement,
-  IReqoreNotificationsWrapperProps
->(({ children, position = 'TOP' }, ref: any) => (
-  <StyledNotificationsWrapper
-    positions={position
-      .split(' ')
-      .map((p: IReqoreNotificationsPosition | string): string => p.toLowerCase())}
-    ref={ref}
-  >
-    {children}
-  </StyledNotificationsWrapper>
-));
-
-export default ReqoreNotificationsWrapper;