@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/components/Table/row.tsx

@@ -1,288 +0,0 @@
-/* @flow */
-import { isFunction, isString } from 'lodash';
-import React, { ReactElement, memo } from 'react';
-import styled, { css } from 'styled-components';
-import { IReqoreTableColumn, IReqoreTableData, IReqoreTableRowClick } from '.';
-import { ReqoreButton, ReqoreControlGroup } from '../..';
-import { SIZE_TO_PX, TSizes } from '../../constants/sizes';
-import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import { IReqoreTooltip } from '../../types/global';
-import { TReqoreHexColor } from '../Effect';
-import { ReqoreH4 } from '../Header';
-import { ReqoreP } from '../Paragraph';
-import ReqoreTag from '../Tag';
-import { TimeAgo } from '../TimeAgo';
-import { IReqoreCustomTableBodyCell, ReqoreTableBodyCell } from './cell';
-import { getOnlyShownColumns } from './helpers';
-
-export interface IReqoreTableRowOptions {
-  columns: IReqoreTableColumn[];
-  data: IReqoreTableData;
-  selectable?: boolean;
-  onSelectClick: (selectId: string | number) => void;
-  selected: (string | number)[];
-  onRowClick?: IReqoreTableRowClick;
-  striped?: boolean;
-  selectedRowIntent?: TReqoreIntent;
-  size?: TSizes;
-  flat?: boolean;
-  cellComponent?: IReqoreCustomTableBodyCell;
-  rowComponent?: IReqoreCustomTableRow;
-  setHoveredRow?: (index: number) => void;
-  hoveredRow?: number;
-}
-export interface IReqoreCustomTableRowProps extends IReqoreTableRowOptions {
-  style?: React.CSSProperties;
-  children?: ReactElement;
-}
-export interface IReqoreCustomTableRow extends React.FC<IReqoreCustomTableRowProps> {}
-export interface IReqoreTableRowProps extends React.HTMLAttributes<HTMLDivElement> {
-  data: IReqoreTableRowOptions;
-  index: number;
-}
-
-export interface IReqoreTableRowStyle {
-  theme: IReqoreTheme;
-  interactive?: boolean;
-  intent?: TReqoreIntent;
-  selected?: boolean;
-  selectedIntent?: TReqoreIntent;
-  flat?: boolean;
-  disabled?: boolean;
-  hovered?: boolean;
-}
-
-export const StyledTableRow = styled.div<IReqoreTableRowStyle>`
-  ${({ size }) => css`
-    display: flex;
-    height: ${SIZE_TO_PX[size]}px;
-  `}
-`;
-
-export interface IReqoreTableCellStyle {
-  width?: number;
-  theme?: IReqoreTheme;
-  grow: 1 | 2 | 3 | 4;
-  align?: 'center' | 'left' | 'right';
-  intent?: TReqoreIntent;
-  interactive?: boolean;
-  interactiveCell?: boolean;
-  size?: TSizes;
-  flat?: boolean;
-  disabled?: boolean;
-  selected?: boolean;
-  hovered?: boolean;
-  selectedIntent?: TReqoreIntent;
-  even?: boolean;
-  striped?: boolean;
-  padded?: IReqoreTableColumn['cell']['padded'];
-}
-
-const ReqoreTableRow = memo(
-  ({
-    data: {
-      data,
-      columns,
-      selectable,
-      onSelectClick,
-      selected,
-      onRowClick,
-      striped,
-      size,
-      selectedRowIntent,
-      flat,
-      cellComponent,
-      rowComponent,
-      setHoveredRow,
-      hoveredRow,
-    },
-    style,
-    index,
-  }: IReqoreTableRowProps) => {
-    const isSelected =
-      data[index]._selectId &&
-      selected.find((selectId) => selectId.toString() === data[index]._selectId.toString());
-
-    const CellComponent = cellComponent || ReqoreTableBodyCell;
-    const RowComponent = rowComponent || StyledTableRow;
-
-    const renderContent = (
-      cell: IReqoreTableColumn['cell'],
-      data: any,
-      dataId: string,
-      align?: 'center' | 'left' | 'right'
-    ): ReactElement<any, any> => {
-      if (cell?.actions) {
-        return (
-          <ReqoreControlGroup
-            size={size}
-            stack
-            fill
-            fluid
-            style={{ height: '100%' }}
-            rounded={false}
-          >
-            {cell.actions(data).map((action, index) => (
-              <ReqoreButton
-                key={index}
-                rounded={false}
-                iconsAlign={align === 'center' ? 'center' : 'sides'}
-                textAlign={align}
-                {...action}
-                onClick={(e) => {
-                  e.stopPropagation();
-
-                  action.onClick?.(e);
-                }}
-              />
-            ))}
-          </ReqoreControlGroup>
-        );
-      }
-
-      let content = cell?.content;
-
-      if (isFunction(content)) {
-        // Check what type does the content function return
-        if (React.isValidElement(content(data))) {
-          const Content = content;
-          // If it's a react element, return it
-          return <Content {...data} _size={size} _dataId={dataId} />;
-        }
-
-        // If it's a function, call it and return the result
-        content = content(data) as any;
-      }
-
-      if (isString(content)) {
-        // Separate the content string by colon
-        const [type, intentOrColor] = content.split(':');
-        // Check if the intent starts with hash for tags
-        const intent: TReqoreIntent = intentOrColor?.startsWith('#')
-          ? undefined
-          : (intentOrColor as TReqoreIntent);
-        const color: TReqoreHexColor =
-          intentOrColor?.startsWith('#') && type === 'tag'
-            ? (intentOrColor as TReqoreHexColor)
-            : undefined;
-        // Render content based on the type
-        switch (type) {
-          case 'time-ago':
-            return <TimeAgo time={data[dataId]} />;
-          case 'tag':
-            return (
-              <ReqoreTag
-                label={data[dataId]}
-                size={size}
-                intent={intent as TReqoreIntent}
-                color={color}
-              />
-            );
-          case 'title':
-            return <ReqoreH4 intent={intent as TReqoreIntent}>{data[dataId]}</ReqoreH4>;
-          case 'text':
-            return (
-              <ReqoreP className='reqore-table-text' intent={intent as TReqoreIntent}>
-                {data[dataId]}
-              </ReqoreP>
-            );
-          default:
-            return <ReqoreP className='reqore-table-text'>{content}</ReqoreP>;
-        }
-      }
-
-      return <ReqoreP className='reqore-table-text'>{data[dataId]}</ReqoreP>;
-    };
-
-    const renderCells = (columns: IReqoreTableColumn[], data: IReqoreTableData) =>
-      getOnlyShownColumns(columns).map(
-        ({
-          width,
-          minWidth,
-          maxWidth,
-          resizedWidth,
-          grow,
-          dataId,
-          cell,
-          header,
-          align,
-          intent,
-        }) => {
-          if (header?.columns) {
-            return renderCells(header.columns, data);
-          }
-
-          // Build the tooltip
-          const tooltip: IReqoreTooltip = cell?.tooltip
-            ? typeof cell?.tooltip(data[index][dataId]) !== 'object'
-              ? {
-                  content: cell.tooltip(data[index][dataId]) as string,
-                }
-              : (cell.tooltip(data[index][dataId]) as IReqoreTooltip)
-            : {};
-
-          return (
-            <CellComponent
-              key={dataId}
-              {...({
-                width: resizedWidth || width,
-                minWidth,
-                maxWidth,
-                grow,
-                align,
-                size,
-                striped,
-                tooltip,
-                padded: cell?.padded,
-                disabled: data[index]._disabled,
-                selected: !!isSelected,
-                selectedIntent: selectedRowIntent,
-                flat,
-                even: index % 2 === 0 ? true : false,
-                intent: cell?.intent || data[index]._intent || intent,
-                hovered: hoveredRow === index,
-                interactive: !!cell?.onClick || !!onRowClick,
-                interactiveCell: !!cell?.onClick,
-                onClick: (e: React.MouseEvent<HTMLDivElement>) => {
-                  if (cell?.onClick) {
-                    e.stopPropagation();
-                    cell.onClick(data[index]);
-                  } else if (onRowClick) {
-                    e.stopPropagation();
-                    onRowClick(data[index]);
-                  } else if (selectable && data[index]._selectId) {
-                    // Otherwise select the row if selectable
-                    onSelectClick(data[index]._selectId!);
-                  }
-                },
-                className: 'reqore-table-cell',
-              } as IReqoreTableCellStyle)}
-            >
-              {renderContent(cell, data[index], dataId, align)}
-            </CellComponent>
-          );
-        }
-      );
-
-    return (
-      <RowComponent
-        style={style}
-        className='reqore-table-row'
-        interactive={!!onRowClick && !data[index]._disabled}
-        onMouseEnter={() => {
-          // Set hovered is this row is interactive
-          if (onRowClick || (selectable && data[index]._selectId && !data[index]._disabled)) {
-            setHoveredRow(index);
-          }
-        }}
-        onMouseLeave={() => {
-          setHoveredRow(undefined);
-        }}
-      >
-        {renderCells(columns, data)}
-      </RowComponent>
-    );
-  }
-);
-
-export default ReqoreTableRow;

package/src/components/Table/value.tsx

@@ -1,28 +0,0 @@
-import { memo } from 'react';
-import ReqoreIcon from '../Icon';
-import { ReqoreP } from '../Paragraph';
-
-export interface IReqoreTableValueProps {
-  value?: string | number | boolean | any[] | { [key: string]: any };
-}
-
-export const ReqoreTableValue = memo(({ value }: IReqoreTableValueProps) => {
-  if (value === undefined || value === null) {
-    return <>-</>;
-  }
-
-  switch (typeof value) {
-    case 'string':
-    case 'number':
-      return <ReqoreP className='reqore-table-text'>{value}</ReqoreP>;
-    case 'boolean':
-      return (
-        <ReqoreIcon
-          icon={value ? 'CheckLine' : 'CloseLine'}
-          intent={value ? 'success' : 'danger'}
-        />
-      );
-    default:
-      return <ReqoreP className='reqore-table-text'>{JSON.stringify(value)}</ReqoreP>;
-  }
-});

package/src/components/Tabs/content.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-import { PADDING_FROM_SIZE, TSizes } from '../../constants/sizes';
-
-export type TReqoreTabsContentPadding =
-  | 'horizontal'
-  | 'vertical'
-  | 'none'
-  | 'both'
-  | 'top'
-  | 'bottom'
-  | 'left'
-  | 'right'
-  | true
-  | false;
-
-export interface IReqoreTabsContent extends React.HTMLAttributes<HTMLDivElement> {
-  children?: any;
-  tabId: string | number;
-  padded?: TReqoreTabsContentPadding;
-  size?: TSizes;
-}
-
-const StyledTabsContent = styled.div`
-  display: flex;
-  flex-flow: column;
-  overflow: hidden;
-  flex: 1;
-  padding: ${({ padded, size }: IReqoreTabsContent) =>
-    padded === 'none' || padded === false
-      ? undefined
-      : `${
-          padded === 'both' || padded === true || padded === 'vertical'
-            ? `${PADDING_FROM_SIZE[size]}px`
-            : 0
-        } ${
-          padded === 'both' || padded === true || padded === 'horizontal'
-            ? `${PADDING_FROM_SIZE[size]}px`
-            : 0
-        }`};
-  padding-top: ${({ padded, size }: IReqoreTabsContent) =>
-    padded === 'top' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
-  padding-bottom: ${({ padded, size }: IReqoreTabsContent) =>
-    padded === 'bottom' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
-  padding-left: ${({ padded, size }: IReqoreTabsContent) =>
-    padded === 'left' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
-  padding-right: ${({ padded, size }: IReqoreTabsContent) =>
-    padded === 'right' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
-`;
-
-const ReqoreTabsContent = ({
-  children,
-  className,
-  padded = true,
-  size = 'normal',
-  ...rest
-}: IReqoreTabsContent) => (
-  <StyledTabsContent
-    {...rest}
-    size={size}
-    padded={padded}
-    className={`${className || ''} reqore-tabs-content`}
-  >
-    {children}
-  </StyledTabsContent>
-);
-
-export default ReqoreTabsContent;

package/src/components/Tabs/index.tsx

@@ -1,124 +0,0 @@
-import React, { ReactElement, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
-import styled, { css } from 'styled-components';
-import { TSizes } from '../../constants/sizes';
-import { IReqoreCustomTheme, TReqoreIntent } from '../../constants/theme';
-import { IReqoreIconName } from '../../types/icons';
-import { IReqoreButtonProps } from '../Button';
-import { TReqoreTabsContentPadding } from './content';
-import ReqoreTabsList from './list';
-
-export interface IReqoreTabsListItem extends Omit<IReqoreButtonProps, 'id'> {
-  label?: string | number;
-  as?: any;
-  id: string | number;
-  props?: Record<string, any>;
-  onClick?: (event: any) => any;
-  onCloseClick?: (id: string | number) => any;
-  activeIntent?: TReqoreIntent;
-  closeIcon?: IReqoreIconName;
-}
-
-export interface IReqoreTabsProps extends React.HTMLAttributes<HTMLDivElement> {
-  tabs: IReqoreTabsListItem[];
-  activeTab?: string | number;
-  onTabChange?: (tabId: string | number) => any;
-  children?: ReactElement<any>[] | ReactElement<any>;
-  fill?: boolean;
-  fillParent?: boolean;
-  vertical?: boolean;
-  activeTabIntent?: TReqoreIntent;
-  padded?: boolean;
-  tabsPadding?: TReqoreTabsContentPadding;
-  wrapTabNames?: boolean;
-  flat?: boolean;
-  size?: TSizes;
-  width?: string;
-  customTheme?: IReqoreCustomTheme;
-  intent?: TReqoreIntent;
-  // Internal prop, ignore!
-  _testWidth?: number;
-}
-
-const StyledTabs = styled.div<Partial<IReqoreTabsProps>>`
-  display: flex;
-  ${({ vertical, fillParent, width }) => css`
-    width: ${width ? `${width}px` : '100%'};
-    height: ${fillParent ? '100%' : undefined};
-    flex-flow: ${vertical ? 'row' : 'column'};
-  `}
-`;
-
-const ReqoreTabs = ({
-  tabs,
-  activeTab,
-  children,
-  className,
-  onTabChange,
-  fill,
-  _testWidth,
-  vertical,
-  activeTabIntent,
-  flat = true,
-  size = 'normal',
-  width,
-  wrapTabNames,
-  customTheme,
-  intent,
-  padded,
-  tabsPadding,
-  ...rest
-}: IReqoreTabsProps) => {
-  const [_activeTab, setActiveTab] = useState<string | number>(activeTab || tabs[0].id);
-
-  useUpdateEffect(() => {
-    if (activeTab || activeTab === 0) {
-      setActiveTab(activeTab);
-
-      if (onTabChange) {
-        onTabChange(activeTab);
-      }
-    }
-  }, [activeTab]);
-
-  return (
-    <StyledTabs
-      {...rest}
-      width={width}
-      vertical={vertical}
-      className={`${className || ''} reqore-tabs`}
-    >
-      <ReqoreTabsList
-        tabs={tabs}
-        padded={padded}
-        flat={flat}
-        fill={fill}
-        size={size}
-        width={width}
-        vertical={vertical}
-        _testWidth={_testWidth}
-        activeTab={_activeTab}
-        wrapTabNames={wrapTabNames}
-        activeTabIntent={activeTabIntent}
-        customTheme={customTheme}
-        intent={intent}
-        onTabChange={(tabId: string | number) => {
-          setActiveTab(tabId);
-
-          if (onTabChange) {
-            onTabChange(tabId);
-          }
-        }}
-      />
-      {React.Children.map(children, (child) =>
-        child && child.props?.tabId === _activeTab
-          ? React.cloneElement(child, {
-              padded: child.props?.padded || tabsPadding,
-            })
-          : null
-      )}
-    </StyledTabs>
-  );
-};
-
-export default ReqoreTabs;

package/src/components/Tabs/item.tsx

@@ -1,198 +0,0 @@
-import { omit } from 'lodash';
-import { forwardRef, memo } from 'react';
-import styled, { css } from 'styled-components';
-import { IReqoreTabsListItem } from '.';
-import { TSizes } from '../../constants/sizes';
-import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import { useReqoreTheme } from '../../hooks/useTheme';
-import { IWithReqoreFlat } from '../../types/global';
-import ReqoreButton, { StyledButton } from '../Button';
-import ReqoreControlGroup from '../ControlGroup';
-
-export interface IReqoreTabListItemProps extends IReqoreTabsListItem, IWithReqoreFlat {
-  active?: boolean;
-  vertical?: boolean;
-  onCloseClick?: any;
-  customTheme?: IReqoreCustomTheme;
-  size?: TSizes;
-  wrapTabNames?: boolean;
-  fill?: boolean;
-  className?: string;
-  padded?: boolean;
-}
-
-export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
-  theme: IReqoreTheme;
-  closable?: boolean;
-  activeColor: string;
-}
-
-export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
-  ${({ disabled, vertical, fill, fixed, padded }: IReqoreTabListItemStyle) => {
-    return css`
-      display: flex;
-      flex-shrink: 0;
-      overflow: hidden;
-      position: relative;
-      align-items: center;
-      width: ${vertical ? `100%` : undefined};
-
-      ${vertical
-        ? css`
-            ${StyledButton}:last-child {
-              border-right: 0;
-            }
-            ${StyledButton}:last-child {
-              border-top-right-radius: 0 !important;
-              border-bottom-right-radius: 0 !important;
-            }
-
-            ${padded === false &&
-            css`
-              &:first-child {
-                padding-top: 0;
-              }
-              &:last-child {
-                padding-bottom: 0;
-              }
-            `}
-          `
-        : css`
-            ${StyledButton} {
-              border-bottom: 0;
-            }
-            ${StyledButton}:first-child {
-              border-bottom-left-radius: 0 !important;
-            }
-            ${StyledButton}:last-child {
-              border-bottom-right-radius: 0 !important;
-            }
-
-            ${padded === false &&
-            css`
-              &:first-child {
-                padding-left: 0;
-              }
-              &:last-child {
-                padding-right: 0;
-              }
-            `}
-          `}
-
-      ${fill && !fixed
-        ? css`
-            flex: 1 0 auto;
-          `
-        : undefined}
-
-      ${disabled &&
-      css`
-        cursor: not-allowed;
-        > * {
-          opacity: 0.5;
-        }
-      `}
-    `;
-  }}
-
-  a {
-    text-decoration: none;
-
-    &:hover > * {
-      text-decoration: underline;
-    }
-  }
-`;
-
-const ReqoreTabsListItem = memo(
-  forwardRef<HTMLDivElement, IReqoreTabListItemProps>(
-    (
-      {
-        tooltip,
-        label,
-        props,
-        icon,
-        active,
-        as,
-        disabled,
-        vertical,
-        onClick,
-        activeIntent,
-        onCloseClick,
-        fill,
-        intent,
-        size = 'normal',
-        closeIcon,
-        customTheme,
-        className,
-        flat = true,
-        wrapTabNames,
-        padded,
-        ...rest
-      }: IReqoreTabListItemProps,
-      ref
-    ) => {
-      const { targetRef } = useCombinedRefs(ref);
-      const theme = useReqoreTheme('main', customTheme);
-
-      return (
-        <StyledTabListItem
-          ref={targetRef}
-          {...props}
-          className={className}
-          intent={intent}
-          as={as}
-          size={size}
-          active={active}
-          disabled={disabled}
-          vertical={vertical}
-          theme={theme}
-          fill={fill}
-          fixed={rest.fixed}
-          padded={padded}
-        >
-          {label || icon ? (
-            <ReqoreControlGroup stack size={size} fluid={fill || vertical}>
-              <ReqoreButton
-                flat={intent ? false : flat}
-                fluid={fill || vertical}
-                icon={icon}
-                minimal
-                wrap={wrapTabNames}
-                intent={active ? activeIntent || intent : intent}
-                active={active}
-                disabled={disabled}
-                onClick={onClick}
-                tooltip={tooltip}
-                customTheme={theme}
-                className={`reqore-tabs-list-item ${active ? 'reqore-tabs-list-item-active' : ''}`}
-                {...omit(rest, ['id'])}
-              >
-                {label}
-              </ReqoreButton>
-              {onCloseClick && !disabled ? (
-                <ReqoreButton
-                  fixed
-                  flat={intent ? false : flat}
-                  icon={closeIcon || 'CloseLine'}
-                  intent={active ? activeIntent || intent : intent}
-                  minimal
-                  active={active}
-                  className='reqore-tabs-list-item-close'
-                  customTheme={theme}
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    onCloseClick?.();
-                  }}
-                />
-              ) : null}
-            </ReqoreControlGroup>
-          ) : null}
-        </StyledTabListItem>
-      );
-    }
-  )
-);
-
-export default ReqoreTabsListItem;