@qoretechnologies/reqore 0.19.13 → 0.20.2

package/src/components/Breadcrumbs/index.tsx

@@ -0,0 +1,286 @@
+import { isArray } from 'lodash';
+import React, { useMemo } from 'react';
+import { useMeasure } from 'react-use';
+import styled, { css } from 'styled-components';
+import { ReqorePopover } from '../..';
+import {
+  MARGIN_FROM_SIZE,
+  PADDING_FROM_SIZE,
+  TABS_SIZE_TO_PX,
+  TEXT_FROM_SIZE,
+  TSizes,
+} from '../../constants/sizes';
+import { IReqoreBreadcrumbsTheme, IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
+import { calculateStringSizeInPixels } from '../../helpers/utils';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { TReqoreTooltipProp } from '../../types/global';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreIcon from '../Icon';
+import ReqoreMenu from '../Menu';
+import ReqoreMenuItem from '../Menu/item';
+import { IReqoreTabsListItem } from '../Tabs';
+import { StyledTabListItem } from '../Tabs/item';
+import ReqoreTabsList, { getTabsLength, StyledReqoreTabsList } from '../Tabs/list';
+import ReqoreBreadcrumbsItem, { IReqoreBreadcrumbItemProps } from './item';
+
+export interface IReqoreBreadcrumbItemTabs {
+  tabs: IReqoreTabsListItem[];
+  onTabChange: (tabId: string | number) => any;
+  activeTab: string;
+  activeTabIntent?: IReqoreIntent;
+}
+
+export interface IReqoreBreadcrumbItem {
+  tooltip?: TReqoreTooltipProp;
+  label?: string;
+  icon?: IReqoreIconName;
+  active?: boolean;
+  as?: any;
+  props?: React.HTMLAttributes<any>;
+  withTabs?: IReqoreBreadcrumbItemTabs;
+  customTheme?: IReqoreBreadcrumbsTheme;
+}
+
+export interface IReqoreBreadcrumbsProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: IReqoreBreadcrumbItem[];
+  rightElement?: JSX.Element;
+  // Internal prop, ignore!
+  _testWidth?: number;
+  customTheme?: IReqoreBreadcrumbsTheme;
+  size?: TSizes;
+  flat?: boolean;
+}
+
+interface IStyledBreadcrumbs extends Omit<IReqoreBreadcrumbsProps, 'items'> {
+  theme: IReqoreTheme;
+}
+
+const StyledReqoreBreadcrumbs = styled.div<IStyledBreadcrumbs>`
+  ${({ theme, size }: IStyledBreadcrumbs) => css`
+    width: 100%;
+    height: ${TABS_SIZE_TO_PX[size!]}px;
+    margin: ${MARGIN_FROM_SIZE[size!]}px 0;
+    display: flex;
+    padding: 0 ${PADDING_FROM_SIZE[size!]}px;
+    justify-content: space-between;
+    border-bottom: 1px solid ${changeLightness(theme.main, 0.05)};
+    background-color: ${({ theme }: { theme: IReqoreTheme }) =>
+      theme.breadcrumbs?.main || 'transparent'};
+
+    > div {
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      > * {
+        color: ${theme.breadcrumbs?.item?.color ||
+        (theme.breadcrumbs?.main
+          ? getReadableColorFrom(theme.breadcrumbs.main, true)
+          : getReadableColor(theme, undefined, undefined, true))};
+      }
+
+      ${StyledReqoreTabsList} {
+        flex: 1;
+      }
+
+      ${StyledReqoreTabsList}, ${StyledTabListItem} {
+        border-bottom: 0;
+      }
+
+      &:first-child {
+        overflow: hidden;
+        flex: 1;
+      }
+    }
+  `}
+`;
+
+const StyledBreadcrumbsTabsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+`;
+
+const itemPadding = 27;
+const iconSize = 11;
+const arrowSize = 50;
+
+const getBreadcrumbsLength = (
+  items: (IReqoreBreadcrumbItem | IReqoreBreadcrumbItem[])[],
+  size: TSizes
+): number =>
+  items.reduce((len, item) => {
+    if (isArray(item)) {
+      return len + 70;
+    }
+
+    if (item.withTabs) {
+      return (
+        len +
+        itemPadding +
+        arrowSize +
+        getTabsLength(item.withTabs.tabs, 'width', item.withTabs.activeTab, size)
+      );
+    }
+
+    return (
+      len +
+      itemPadding +
+      iconSize +
+      arrowSize +
+      calculateStringSizeInPixels(item.label || '', TEXT_FROM_SIZE[size])
+    );
+  }, 0);
+
+const getTransformedItems = (
+  items: (IReqoreBreadcrumbItem | IReqoreBreadcrumbItem[])[],
+  width: number,
+  size: TSizes
+): (IReqoreBreadcrumbItem | IReqoreBreadcrumbItem[])[] => {
+  if (!width) {
+    return items;
+  }
+
+  let stop = false;
+  let newItems = [...items];
+
+  console.log(getBreadcrumbsLength(newItems, size), width);
+
+  while (getBreadcrumbsLength(newItems, size) > width && !stop) {
+    if (isArray(newItems[1])) {
+      newItems[1].push(newItems[2] as IReqoreBreadcrumbItem);
+      newItems[2] = undefined!;
+    } else {
+      const secondItem = newItems[1];
+      newItems[1] = [secondItem];
+    }
+
+    newItems = newItems.filter((i) => i);
+
+    if (!newItems[2] || (newItems[2] as IReqoreBreadcrumbItem).withTabs) {
+      stop = true;
+    }
+  }
+
+  return newItems;
+};
+
+const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps> = ({
+  items,
+  rightElement,
+  _testWidth,
+  customTheme,
+  flat,
+  size = 'normal',
+  ...rest
+}: IReqoreBreadcrumbsProps) => {
+  const [ref, { width }] = useMeasure();
+  const theme = useReqoreTheme('breadcrumbs', customTheme);
+  const transformedItems = useMemo(
+    () => getTransformedItems(items, _testWidth || width, size),
+    [items, width, _testWidth]
+  );
+
+  const renderItem = (item: IReqoreBreadcrumbItem | IReqoreBreadcrumbItem[], index: number) => {
+    if (isArray(item)) {
+      return (
+        <React.Fragment key={index}>
+          <ReqoreIcon
+            icon='ArrowRightSLine'
+            size={`${TEXT_FROM_SIZE[size]}px`}
+            key={'icon' + index}
+            margin='both'
+          />
+          <ReqorePopover
+            key={index}
+            component={ReqoreBreadcrumbsItem}
+            isReqoreComponent
+            componentProps={
+              {
+                icon: 'MoreFill',
+                interactive: true,
+              } as IReqoreBreadcrumbItemProps
+            }
+            handler='hoverStay'
+            content={
+              <ReqoreMenu>
+                {item.map(({ icon, label, as, tooltip, props }) => (
+                  <ReqoreMenuItem
+                    {...props}
+                    icon={icon}
+                    as={as}
+                    onClick={(_itemId, event) => {
+                      props?.onClick?.(event);
+                    }}
+                    tooltip={tooltip}
+                    key={index + (label || icon || '')}
+                  >
+                    {label}
+                  </ReqoreMenuItem>
+                ))}
+              </ReqoreMenu>
+            }
+          />
+        </React.Fragment>
+      );
+    }
+
+    if (item.withTabs) {
+      return (
+        <StyledBreadcrumbsTabsWrapper key={index}>
+          <ReqoreIcon
+            icon='ArrowRightSLine'
+            size={`${TEXT_FROM_SIZE[size]}px`}
+            key={'icon' + index}
+            margin='both'
+          />
+          <ReqoreTabsList
+            tabs={item.withTabs.tabs}
+            onTabChange={item.withTabs.onTabChange}
+            activeTab={item.withTabs.activeTab}
+            activeTabIntent={item.withTabs.activeTabIntent}
+            customTheme={customTheme}
+            flat={flat}
+            size={size}
+          />
+        </StyledBreadcrumbsTabsWrapper>
+      );
+    }
+
+    return (
+      <React.Fragment key={index}>
+        {index !== 0 && (
+          <ReqoreIcon
+            icon='ArrowRightSLine'
+            size={`${TEXT_FROM_SIZE[size]}px`}
+            key={'icon' + index}
+            margin='both'
+          />
+        )}
+        <ReqoreBreadcrumbsItem {...item} key={index} customTheme={customTheme} size={size} />
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <StyledReqoreBreadcrumbs
+      {...rest}
+      className={`${rest.className || ''} reqore-breadcrumbs-wrapper`}
+      ref={ref}
+      flat={flat}
+      theme={theme}
+      size={size}
+    >
+      <div key='reqore-breadcrumbs-left-wrapper'>
+        {transformedItems.map(
+          (item: IReqoreBreadcrumbItem | IReqoreBreadcrumbItem[], index: number) =>
+            renderItem(item, index)
+        )}
+      </div>
+      {rightElement && <div>{rightElement}</div>}
+    </StyledReqoreBreadcrumbs>
+  );
+};
+
+export default ReqoreBreadcrumbs;

package/src/components/Breadcrumbs/item.tsx

@@ -0,0 +1,162 @@
+import { forwardRef, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import { IReqoreBreadcrumbItem } from '.';
+import { PADDING_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { IReqoreTheme } from '../../constants/theme';
+import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { useTooltip } from '../../hooks/useTooltip';
+import { ActiveIconScale, InactiveIconScale } from '../../styles';
+import {
+  StyledActiveContent,
+  StyledAnimatedTextWrapper,
+  StyledInActiveContent,
+  StyledInvisibleContent,
+} from '../Button';
+import ReqoreIcon from '../Icon';
+
+export interface IReqoreBreadcrumbItemProps extends IReqoreBreadcrumbItem {
+  interactive?: boolean;
+  size?: TSizes;
+}
+
+export interface IReqoreBreadcrumbItemStyle extends IReqoreBreadcrumbItemProps {
+  theme: IReqoreTheme;
+}
+
+const StyledBreadcrumbItem = styled.div<IReqoreBreadcrumbItemStyle>`
+  ${({ theme, active, interactive, size }: IReqoreBreadcrumbItemStyle) => {
+    const textColor =
+      theme.breadcrumbs?.item?.color ||
+      (theme.breadcrumbs?.main
+        ? getReadableColorFrom(theme.breadcrumbs.main, true)
+        : getReadableColor(theme, undefined, undefined, true));
+
+    return css`
+      display: flex;
+      flex-shrink: 0;
+      height: 100%;
+      justify-content: space-evenly;
+      align-items: center;
+      padding: 0 ${PADDING_FROM_SIZE[size!]}px;
+      transition: background-color 0.15s ease-out;
+      font-size: ${TEXT_FROM_SIZE[size!]}px;
+      font-weight: 450;
+      position: relative;
+      overflow: hidden;
+
+      * {
+        color: ${textColor};
+      }
+
+      ${InactiveIconScale}
+
+      ${active &&
+      css`
+        * {
+          font-weight: 600;
+          color: ${theme.breadcrumbs?.item?.activeColor ||
+          (theme.breadcrumbs?.main
+            ? getReadableColorFrom(theme.breadcrumbs.main, true)
+            : getReadableColor(theme, undefined, undefined))};
+        }
+
+        ${ActiveIconScale}
+      `}
+
+      ${interactive &&
+      css`
+        cursor: pointer;
+        &:hover {
+          color: ${theme.breadcrumbs?.item?.hoverColor ||
+          (theme.breadcrumbs?.main
+            ? getReadableColorFrom(theme.breadcrumbs.main)
+            : getReadableColor(theme, undefined, undefined))};
+          background-color: ${changeLightness(theme.breadcrumbs?.main || theme.main, 0.05)};
+          ${ActiveIconScale}
+
+          ${StyledActiveContent} {
+            transform: translateY(0px);
+            filter: blur(0);
+            opacity: 1;
+          }
+
+          ${StyledInActiveContent} {
+            transform: translateY(150%);
+            filter: blur(10px);
+            opacity: 0;
+          }
+        }
+      `}
+
+    a:hover {
+        color: ${theme.breadcrumbs?.item?.hoverColor ||
+        (theme.breadcrumbs?.main
+          ? getReadableColorFrom(theme.breadcrumbs?.main)
+          : getReadableColor(theme, undefined, undefined))};
+      }
+    `;
+  }}
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
+
+const ReqoreBreadcrumbsItem = forwardRef(
+  (
+    {
+      tooltip,
+      label,
+      props,
+      icon,
+      active,
+      as,
+      interactive,
+      customTheme,
+      size = 'normal',
+    }: IReqoreBreadcrumbItemProps,
+    ref
+  ) => {
+    const innerRef = useRef(null);
+    const combinedRef = useCombinedRefs(innerRef, ref);
+    const theme = useReqoreTheme('breadcrumbs', customTheme);
+
+    console.log(combinedRef, tooltip);
+
+    useTooltip(combinedRef?.current, tooltip);
+
+    return (
+      <StyledBreadcrumbItem
+        ref={combinedRef}
+        active={active}
+        interactive={interactive || !!props?.onClick}
+        className='reqore-breadcrumbs-item'
+        theme={theme}
+        size={size}
+      >
+        {icon && (
+          <ReqoreIcon
+            icon={icon}
+            size={`${TEXT_FROM_SIZE[size]}px`}
+            margin={label ? 'right' : undefined}
+          />
+        )}
+        {label && (
+          <StyledAnimatedTextWrapper as={as || 'span'} {...props}>
+            <StyledActiveContent>{label}</StyledActiveContent>
+            <StyledInActiveContent>{label}</StyledInActiveContent>
+            <StyledInvisibleContent>{label}</StyledInvisibleContent>
+          </StyledAnimatedTextWrapper>
+        )}
+      </StyledBreadcrumbItem>
+    );
+  }
+);
+
+export default ReqoreBreadcrumbsItem;

package/src/components/Button/index.tsx

@@ -0,0 +1,270 @@
+import { Placement } from '@popperjs/core';
+import { rgba } from 'polished';
+import React, { forwardRef, useRef } from 'react';
+import styled, { css } from 'styled-components';
+import {
+  PADDING_FROM_SIZE,
+  RADIUS_FROM_SIZE,
+  SIZE_TO_PX,
+  TEXT_FROM_SIZE,
+  TSizes,
+} from '../../constants/sizes';
+import { IReqoreCustomTheme, IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { useTooltip } from '../../hooks/useTooltip';
+import { ActiveIconScale, ScaleIconOnHover } from '../../styles';
+import { TReqoreTooltipProp } from '../../types/global';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreIcon from '../Icon';
+
+export interface IReqoreButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  icon?: IReqoreIconName;
+  size?: TSizes;
+  minimal?: boolean;
+  disabled?: boolean;
+  tooltip?: TReqoreTooltipProp;
+  tooltipPlacement?: Placement;
+  fluid?: boolean;
+  fixed?: boolean;
+  intent?: IReqoreIntent;
+  active?: boolean;
+  flat?: boolean;
+  rightIcon?: IReqoreIconName;
+  customTheme?: IReqoreCustomTheme;
+  wrap?: boolean;
+}
+
+export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
+  theme: IReqoreTheme;
+}
+
+const getButtonMainColor = (theme: IReqoreTheme, color?: string) => {
+  if (color) {
+    return color;
+  }
+
+  return theme.main;
+};
+
+export const StyledAnimatedTextWrapper = styled.span`
+  overflow: hidden;
+  position: relative;
+`;
+
+export const StyledActiveContent = styled.span`
+  position: absolute;
+  transform: translateY(-150%);
+  opacity: 0;
+  transition: all 0.2s ease-out;
+  filter: blur(10px);
+
+  ${({ wrap }) =>
+    wrap &&
+    css`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+    `}
+`;
+
+export const StyledInActiveContent = styled.span`
+  position: absolute;
+  transform: translateY(0);
+  transition: all 0.2s ease-out;
+
+  ${({ wrap }) =>
+    wrap &&
+    css`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+    `}
+`;
+
+export const StyledInvisibleContent = styled.span`
+  visibility: hidden;
+  position: relative;
+  overflow: hidden;
+
+  ${({ wrap }) =>
+    wrap &&
+    css`
+      white-space: nowrap;
+    `}
+`;
+
+export const StyledButton = styled.button<IReqoreButtonStyle>`
+  display: flex;
+  align-items: center;
+  margin: 0;
+  font-weight: 600;
+  position: relative;
+  overflow: hidden;
+  border: ${({ theme, minimal, color, flat }) =>
+    !minimal && !flat ? `1px solid ${changeLightness(getButtonMainColor(theme, color), 0.05)}` : 0};
+  padding: 0 ${({ size }) => PADDING_FROM_SIZE[size]}px;
+  font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
+
+  height: ${({ size }) => SIZE_TO_PX[size]}px;
+  min-width: ${({ size }) => SIZE_TO_PX[size]}px;
+
+  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 0 auto')};
+
+  border-radius: ${({ size }) => RADIUS_FROM_SIZE[size]}px;
+
+  background-color: ${({ minimal, color }) => {
+    if (minimal) {
+      if (color) {
+        return rgba(color, 0.3);
+      }
+      return 'transparent';
+    }
+
+    return color;
+  }};
+
+  color: ${({ theme, color, minimal }) =>
+    color
+      ? minimal
+        ? getReadableColor(theme, undefined, undefined, true)
+        : getReadableColorFrom(color, true)
+      : getReadableColor(theme, undefined, undefined, true)};
+
+  ${ScaleIconOnHover}
+
+  &:not(:disabled) {
+    cursor: pointer;
+    transition: all 0.2s ease-out;
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &:hover,
+    &:focus {
+      background-color: ${({ theme, color }: IReqoreButtonStyle) =>
+        changeLightness(getButtonMainColor(theme, color), 0.05)};
+      color: ${({ theme, color }) =>
+        getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
+      border-color: ${({ minimal, theme, color }) =>
+        minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.1)};
+
+      ${StyledActiveContent} {
+        transform: translateY(0px);
+        filter: blur(0);
+        opacity: 1;
+      }
+
+      ${StyledInActiveContent} {
+        transform: translateY(150%);
+        filter: blur(10px);
+        opacity: 0;
+      }
+    }
+  }
+
+  ${({ active, minimal, theme, color }: IReqoreButtonStyle) =>
+    active &&
+    css`
+      background-color: ${changeLightness(getButtonMainColor(theme, color), 0.16)};
+      color: ${getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
+      border-color: ${minimal
+        ? undefined
+        : changeLightness(getButtonMainColor(theme, color), 0.075)};
+
+      ${ActiveIconScale}
+    `}
+
+  &:disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
+
+  &:focus {
+    border-color: ${({ minimal, theme, color }) =>
+      minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.4)};
+  }
+`;
+
+const ReqoreButton = forwardRef(
+  (
+    {
+      icon,
+      size = 'normal',
+      minimal,
+      children,
+      tooltip,
+      className,
+      fluid,
+      fixed,
+      intent,
+      active,
+      flat,
+      rightIcon,
+      customTheme,
+      wrap = true,
+      ...rest
+    }: IReqoreButtonProps,
+    ref
+  ) => {
+    const innerRef = useRef(null);
+    const combinedRef = useCombinedRefs(innerRef, ref);
+    const theme: IReqoreTheme = useReqoreTheme('main', customTheme, intent);
+
+    /* A custom hook that is used to add a tooltip to the button. */
+    useTooltip(combinedRef.current, tooltip);
+
+    // If color or intent was specified, set the color
+    const customColor = theme.main;
+
+    return (
+      <StyledButton
+        {...rest}
+        theme={theme}
+        ref={combinedRef}
+        fluid={fluid}
+        fixed={fixed}
+        minimal={minimal}
+        size={size}
+        color={customColor}
+        flat={flat}
+        active={active}
+        className={`${className || ''} reqore-control reqore-button`}
+      >
+        {icon && (
+          <ReqoreIcon
+            icon={icon}
+            margin={children || rightIcon ? 'right' : undefined}
+            size={`${TEXT_FROM_SIZE[size]}px`}
+          />
+        )}
+        {children && (
+          <StyledAnimatedTextWrapper>
+            <StyledActiveContent wrap={wrap}>{children}</StyledActiveContent>
+            <StyledInActiveContent wrap={wrap}>{children}</StyledInActiveContent>
+            <StyledInvisibleContent wrap={wrap}>{children}</StyledInvisibleContent>
+          </StyledAnimatedTextWrapper>
+        )}
+        {rightIcon && (
+          <ReqoreIcon
+            icon={rightIcon}
+            margin={children ? 'left' : undefined}
+            size={`${TEXT_FROM_SIZE[size]}px`}
+          />
+        )}
+      </StyledButton>
+    );
+  }
+);
+
+export default ReqoreButton;