@qoretechnologies/reqore 0.44.0 → 0.45.0

package/src/components/Panel/panel.screenshot.tsx

@@ -1,29 +0,0 @@
-import { noop } from 'lodash';
-import { ReqorePanel } from '../../index';
-
-export const SomePanel = () => (
-  <ReqorePanel
-    collapsible
-    intent='danger'
-    title='DANGER'
-    icon='AlarmWarningLine'
-    padded
-    actions={[
-      {
-        icon: 'Settings2Line',
-        onClick: noop,
-      },
-      {
-        icon: 'UserFill',
-        onClick: noop,
-        label: 'Test',
-      },
-    ]}
-  >
-    I am a message a very long message - Shadowlands has mechanisms put in place for allowing
-    players to catch up on Renown, the system of gaining favor and unlocking rewards, Campaign
-    chapters, and soulbinds within your Covenant. This system works for main characters who have
-    started late, for alts, for players who have switched Covenants and are starting over, and for
-    players who have simply missed weekly quests for earning Renown due to being away from the game.
-  </ReqorePanel>
-);

package/src/components/Paragraph/index.tsx

@@ -1,43 +0,0 @@
-import { memo } from 'react';
-import styled from 'styled-components';
-import { TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
-import { isStringSize } from '../../helpers/utils';
-import { useReqoreTheme } from '../../hooks/useTheme';
-import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreEffect } from '../../types/global';
-import { StyledTextEffect } from '../Effect';
-
-export interface IReqoreParagraphProps
-  extends React.HTMLAttributes<HTMLParagraphElement>,
-    IWithReqoreCustomTheme,
-    IWithReqoreEffect,
-    IReqoreIntent {
-  size?: TSizes | string;
-}
-
-export const StyledParagraph = styled(StyledTextEffect)`
-  padding: 0;
-  margin: 0;
-  color: ${({ theme, intent }) =>
-    intent ? theme.intents[intent] : theme.text?.color || 'inherit'};
-  font-size: ${({ _size }) => (isStringSize(_size) ? `${TEXT_FROM_SIZE[_size]}px` : _size)};
-`;
-
-export const ReqoreP = memo(
-  ({ size, children, customTheme, intent, className, ...props }: IReqoreParagraphProps) => {
-    const theme = useReqoreTheme('main', customTheme, intent);
-
-    return (
-      <StyledParagraph
-        as='p'
-        theme={theme}
-        color={theme.text.color}
-        intent={intent}
-        {...props}
-        _size={size}
-        className={`${className || ''} reqore-paragraph`}
-      >
-        {children}
-      </StyledParagraph>
-    );
-  }
-);

package/src/components/Popover/index.tsx

@@ -1,68 +0,0 @@
-import React, { memo, useEffect, useState } from 'react';
-import styled from 'styled-components';
-import usePopover, { IPopoverControls, IPopoverOptions } from '../../hooks/usePopover';
-import { IReqoreComponent } from '../../types/global';
-
-export interface IReqorePopoverProps extends IReqoreComponent, IPopoverOptions {
-  component: any;
-  componentProps?: any;
-  children?: any;
-  isReqoreComponent?: boolean;
-  wrapperTag?: string;
-  wrapperStyle?: React.CSSProperties;
-}
-
-export const StyledPopover = styled.span`
-  overflow: hidden;
-`;
-
-const Popover = memo(
-  ({
-    component: Component,
-    componentProps,
-    children,
-    isReqoreComponent,
-    wrapperTag = 'span',
-    wrapperStyle = {},
-    passPopoverData,
-    _insidePopover,
-    _popoverId,
-    ...rest
-  }: IReqorePopoverProps) => {
-    const [ref, setRef] = useState(undefined);
-
-    const popoverData: IPopoverControls = usePopover({ targetElement: ref, ...rest });
-
-    useEffect(() => {
-      passPopoverData?.(popoverData);
-    }, [popoverData]);
-
-    if (isReqoreComponent) {
-      return (
-        <Component
-          {...componentProps}
-          _insidePopover={_insidePopover}
-          _popoverId={_popoverId}
-          ref={setRef}
-        >
-          {children}
-        </Component>
-      );
-    }
-
-    return (
-      <StyledPopover
-        as={wrapperTag}
-        className='reqore-popover-wrapper'
-        ref={setRef}
-        style={wrapperStyle}
-      >
-        <Component {...componentProps} _insidePopover={_insidePopover} _popoverId={_popoverId}>
-          {children}
-        </Component>
-      </StyledPopover>
-    );
-  }
-);
-
-export default Popover;

package/src/components/RadioGroup/index.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { ReqoreCheckbox, ReqoreControlGroup } from '../..';
-import { TSizes } from '../../constants/sizes';
-import { IReqoreCheckboxProps } from '../Checkbox';
-import { IReqoreControlGroupProps } from '../ControlGroup';
-import ReqoreMenuDivider from '../Menu/divider';
-
-export interface IReqoreRadioGroupItem extends IReqoreCheckboxProps {
-  value?: string;
-  divider?: boolean;
-}
-
-export interface IReqoreRadioGroupProps
-  extends Omit<IReqoreControlGroupProps, 'children'>,
-    Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
-  items: IReqoreRadioGroupItem[];
-  selected?: string;
-  onSelectClick?: (value: string) => void;
-  size?: TSizes;
-  disabled?: boolean;
-  asSwitch?: boolean;
-  onText?: string;
-  offText?: string;
-  margin?: 'left' | 'right' | 'both' | 'none';
-}
-
-const ReqoreRadioGroup = ({
-  items = [],
-  selected,
-  onSelectClick,
-  size,
-  disabled,
-  asSwitch,
-  vertical = true,
-  onText,
-  offText,
-  margin = 'left',
-  ...rest
-}: IReqoreRadioGroupProps) => (
-  <ReqoreControlGroup {...rest} vertical={vertical}>
-    {items.map(({ value, divider, ...itemRest }, index) =>
-      divider ? (
-        <ReqoreMenuDivider
-          {...itemRest}
-          key={index}
-          size={size || itemRest.size}
-          effect={{ textAlign: 'left', ...itemRest.effect }}
-          margin={margin}
-          label={vertical ? itemRest.label : undefined}
-        />
-      ) : (
-        <ReqoreCheckbox
-          asSwitch={asSwitch}
-          onText={onText}
-          offText={offText}
-          margin={margin}
-          {...itemRest}
-          key={value}
-          checked={value === selected}
-          size={size || itemRest.size}
-          disabled={disabled || itemRest.disabled}
-          onClick={() => {
-            onSelectClick(value);
-          }}
-        />
-      )
-    )}
-  </ReqoreControlGroup>
-);
-
-export default ReqoreRadioGroup;

package/src/components/Slider/index.tsx

@@ -1,358 +0,0 @@
-import * as Slider from '@radix-ui/react-slider';
-import { useCallback, useMemo, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { HALF_PADDING_FROM_SIZE, ICON_FROM_SIZE, TSizes } from '../../constants/sizes';
-import { IReqoreCustomTheme, TReqoreIntent } from '../../constants/theme';
-import { changeLightness, getReadableColor } from '../../helpers/colors';
-import { useReqoreTheme } from '../../hooks/useTheme';
-import { useTooltip } from '../../hooks/useTooltip';
-import { TReqoreTooltipProp } from '../../types/global';
-import { IReqoreIconName } from '../../types/icons';
-import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
-import { IReqoreEffect, IReqoreTextEffectProps, StyledEffect, TReqoreEffectColor } from '../Effect';
-import ReqoreIcon, { IReqoreIconProps } from '../Icon';
-import { IReqoreParagraphProps, ReqoreP } from '../Paragraph';
-import ReqoreTag, { IReqoreTagProps } from '../Tag';
-
-export interface ISliderProps<T extends number | [number, number] = number>
-  extends Omit<Slider.SliderProps, 'onChange' | 'value' | 'defaultValue' | 'onValueChange'> {
-  value: T;
-  onChange(values: T): void;
-  fluid?: boolean;
-
-  icon?: IReqoreIconName;
-  iconColor?: TReqoreEffectColor;
-  iconProps?: IReqoreIconProps;
-
-  rightIcon?: IReqoreIconName;
-  rightIconColor?: TReqoreEffectColor;
-  rightIconProps?: IReqoreIconProps;
-
-  showLabels?: boolean;
-  size?: TSizes;
-  labelsPosition: 'top' | 'bottom';
-  customTheme?: IReqoreCustomTheme;
-  intent?: TReqoreIntent;
-  effect?: IReqoreEffect;
-  tooltip: TReqoreTooltipProp;
-
-  trackProps?: Partial<IReqoreTextEffectProps>;
-  rangeProps?: Partial<IReqoreTextEffectProps>;
-  thumbProps?: Partial<IReqoreTextEffectProps>;
-
-  minLabelProps?: IReqoreParagraphProps;
-  currentMinLabelProps?: IReqoreTagProps;
-  maxLabelProps?: IReqoreParagraphProps;
-  currentMaxLabelProps?: IReqoreTagProps;
-  wrapperProps?: IReqoreControlGroupProps;
-
-  displayCurrentValueOverThumb?: boolean;
-}
-
-const StyledControlGroupWrapper = styled(ReqoreControlGroup)`
-  &[data-orientation='horizontal'] {
-    &[data-fluid='false'] {
-      max-width: 200px;
-      min-width: 200px;
-    }
-  }
-  &[data-orientation='vertical'] {
-    &[data-fluid='false'] {
-      max-height: 200px;
-    }
-  }
-`;
-
-const StyledTrack = styled(Slider.Track)`
-  background-color: ${(props) => props.background};
-  position: relative;
-  border-radius: 9999px;
-`;
-const StyledRange = styled(Slider.Range)`
-  position: absolute;
-  background-color: ${(props) => props.background};
-  border-radius: 9999px;
-`;
-const StyledThumb = styled(Slider.Thumb)`
-  display: block;
-  background-color: ${(props) => props.background};
-  border-radius: 9999px;
-  transition: all 0.2s ease-out;
-
-  &:focus {
-    box-shadow: 0 0 0 8px ${(props) => props.background}15;
-    outline: none;
-  }
-`;
-const StyledRoot = styled(Slider.Root)`
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-  flex-grow: 1;
-
-  &[aria-disabled='true'] {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-
-  ${({ 'data-size': size }) => css`
-    ${StyledThumb} {
-      width: ${ICON_FROM_SIZE[size]}px;
-      height: ${ICON_FROM_SIZE[size]}px;
-      min-width: ${ICON_FROM_SIZE[size]}px;
-    }
-  `}
-
-  &[data-orientation='horizontal'] {
-    width: 100%;
-
-    ${({ 'data-size': size }) => css`
-      height: ${ICON_FROM_SIZE[size]}px;
-
-      ${StyledTrack} {
-        height: ${HALF_PADDING_FROM_SIZE[size]}px;
-      }
-    `}
-
-    ${StyledTrack} {
-      flex-grow: 1;
-    }
-    ${StyledRange} {
-      height: 100%;
-    }
-  }
-
-  &[data-orientation='vertical'] {
-    flex-direction: column;
-    justify-content: center;
-    height: 200px;
-
-    ${({ 'data-size': size }) => css`
-      width: ${ICON_FROM_SIZE[size]}px;
-
-      ${StyledTrack} {
-        width: ${HALF_PADDING_FROM_SIZE[size]}px;
-      }
-    `}
-
-    ${StyledTrack} {
-      flex-grow: 1;
-    }
-    ${StyledRange} {
-      width: 100%;
-    }
-  }
-`;
-
-const StyledCurrentValue = styled(ReqoreTag)`
-  position: absolute;
-  ${({ position, isAboveThreshold, isBelowThreshold }) =>
-    css`
-      ${position}: ${isAboveThreshold || isBelowThreshold ? '-5px' : '-35px'};
-      ${position === 'left' || position === 'right' ? 'top' : 'left'}: 50%;
-      transform: ${position === 'left' || position === 'right'
-        ? 'translateY(-50%)'
-        : 'translateX(-50%)'};
-    `}
-`;
-
-const SliderRootWrapper = styled(ReqoreControlGroup)`
-  align-items: center;
-  flex-grow: 1;
-  width: 100%;
-`;
-
-export function ReqoreSlider<T extends number | [number, number] = number>({
-  value,
-  onChange,
-  step = 0.1,
-  orientation = 'horizontal',
-  fluid = true,
-  showLabels,
-  icon,
-  iconColor,
-  iconProps,
-  rightIcon,
-  rightIconColor,
-  rightIconProps,
-  customTheme,
-  intent,
-  effect,
-  trackProps,
-  rangeProps,
-  thumbProps,
-  minLabelProps,
-  maxLabelProps,
-  size = 'normal',
-  wrapperProps,
-  labelsPosition = 'top',
-  tooltip,
-  currentMaxLabelProps,
-  currentMinLabelProps,
-  displayCurrentValueOverThumb,
-  ...props
-}: ISliderProps<T>) {
-  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement>(undefined);
-  const theme = useReqoreTheme('main', customTheme, intent);
-
-  useTooltip(wrapperRef, tooltip);
-
-  const background = intent
-    ? changeLightness(theme.main, 0.2)
-    : getReadableColor(theme, undefined, undefined, true);
-  const trackBackground = intent
-    ? changeLightness(theme.main, 0.05)
-    : changeLightness(theme.main, 0.2);
-  const isRange = Array.isArray(value);
-
-  const renderLabels = useCallback(() => {
-    if (!showLabels) {
-      return null;
-    }
-
-    return (
-      <ReqoreControlGroup fluid spaceBetween vertical={orientation === 'vertical'} fill>
-        <ReqoreControlGroup fixed vertical={orientation === 'vertical'} horizontalAlign='center'>
-          {icon && (
-            <ReqoreIcon icon={icon} size={size} color={iconColor} intent={intent} {...iconProps} />
-          )}
-          {props.min || props.min === 0 ? (
-            <ReqoreP size={size} intent={intent} effect={effect} {...minLabelProps}>
-              {props.min}
-            </ReqoreP>
-          ) : null}
-        </ReqoreControlGroup>
-        <ReqoreControlGroup fixed vertical={orientation === 'vertical'} horizontalAlign='center'>
-          {props.max || props.max === 0 ? (
-            <ReqoreP size={size} intent={intent} effect={effect} {...maxLabelProps}>
-              {props.max}
-            </ReqoreP>
-          ) : null}
-          {rightIcon && (
-            <ReqoreIcon
-              icon={rightIcon}
-              size={size}
-              color={rightIconColor}
-              intent={intent}
-              {...rightIconProps}
-            />
-          )}
-        </ReqoreControlGroup>
-      </ReqoreControlGroup>
-    );
-  }, [
-    icon,
-    rightIcon,
-    iconProps,
-    rightIconProps,
-    minLabelProps,
-    maxLabelProps,
-    size,
-    intent,
-    props.min,
-    props.max,
-    showLabels,
-    orientation,
-    effect,
-  ]);
-
-  const currentValuePosition = useMemo(() => {
-    return orientation === 'horizontal'
-      ? labelsPosition === 'top'
-        ? 'top'
-        : 'bottom'
-      : labelsPosition === 'top'
-      ? 'left'
-      : 'right';
-  }, [orientation, labelsPosition]);
-
-  const isMinValueBelowThreshold = useMemo(() => {
-    const _value: number = isRange ? value[0] : value;
-
-    return _value < props.min + step * 5;
-  }, [value, props.min]);
-
-  const isMaxValueAboveThreshold = useMemo(() => {
-    if (!isRange) return false;
-
-    const _value: number = value[1];
-
-    return _value > props.max - step * 5;
-  }, [value, props.max]);
-
-  return (
-    <StyledControlGroupWrapper
-      ref={setWrapperRef}
-      data-orientation={orientation}
-      data-labels-position={labelsPosition}
-      data-fluid={fluid}
-      fluid={fluid}
-      vertical={orientation === 'horizontal'}
-      fill
-      gapSize={orientation === 'horizontal' ? 'big' : 'normal'}
-      {...wrapperProps}
-    >
-      {labelsPosition === 'top' && renderLabels()}
-      <SliderRootWrapper vertical={orientation === 'vertical'}>
-        <StyledRoot
-          data-size={size}
-          orientation={orientation}
-          minStepsBetweenThumbs={step}
-          inverted={orientation === 'vertical'}
-          step={step}
-          {...props}
-          value={isRange ? value : [value]}
-          onValueChange={(values) => {
-            onChange((isRange ? values : values[0]) as T);
-          }}
-        >
-          <StyledTrack background={trackBackground} asChild>
-            <StyledEffect effect={effect} {...trackProps}>
-              <StyledRange background={background} asChild>
-                <StyledEffect effect={effect} {...rangeProps} />
-              </StyledRange>
-            </StyledEffect>
-          </StyledTrack>
-
-          <StyledThumb background={background} asChild>
-            <StyledEffect effect={effect} {...thumbProps}>
-              {showLabels && (
-                <StyledCurrentValue
-                  size={size}
-                  effect={effect}
-                  intent={intent}
-                  position={currentValuePosition}
-                  label={isRange ? value[0] : value}
-                  isBelowThreshold={displayCurrentValueOverThumb || isMinValueBelowThreshold}
-                  {...currentMinLabelProps}
-                />
-              )}
-            </StyledEffect>
-          </StyledThumb>
-          {isRange && (
-            <StyledThumb background={background} asChild>
-              <StyledEffect effect={effect} {...thumbProps}>
-                {showLabels && (
-                  <StyledCurrentValue
-                    size={size}
-                    effect={effect}
-                    intent={intent}
-                    position={currentValuePosition}
-                    isAboveThreshold={displayCurrentValueOverThumb || isMaxValueAboveThreshold}
-                    label={value[1]}
-                    {...currentMaxLabelProps}
-                  />
-                )}
-              </StyledEffect>
-            </StyledThumb>
-          )}
-        </StyledRoot>
-      </SliderRootWrapper>
-      {labelsPosition === 'bottom' && renderLabels()}
-    </StyledControlGroupWrapper>
-  );
-}
-
-export default ReqoreSlider;

package/src/components/Spacer/index.tsx

@@ -1,142 +0,0 @@
-import { memo, useMemo } from 'react';
-import styled, { css } from 'styled-components';
-import { LINE_SIZE_TO_NUMBER, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
-import { changeLightness } from '../../helpers/colors';
-import { useReqoreTheme } from '../../hooks/useTheme';
-import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreEffect } from '../../types/global';
-import { StyledEffect } from '../Effect';
-
-export const StyledSpacer = styled.div`
-  display: ${({ horizontal }) => (horizontal ? 'inline-flex' : 'flex')};
-  vertical-align: middle;
-
-  ${({ horizontal, vertical }) => {
-    if (horizontal) {
-      return css`
-        flex-flow: row;
-      `;
-    }
-
-    if (vertical) {
-      return css`
-        flex-flow: column;
-      `;
-    }
-  }}
-
-  flex-shrink: 0;
-`;
-
-export const StyledSpace = styled.div`
-  display: inline-block;
-  flex: 0 0 auto;
-
-  ${({ horizontal, vertical, width, height, lineSize }) => {
-    if (horizontal) {
-      return css`
-        width: ${width / 2 - lineSize / 2}px;
-        height: ${height ? `${height}px` : `${TEXT_FROM_SIZE.normal}px`};
-      `;
-    }
-
-    if (vertical) {
-      return css`
-        width: ${width ? `${width}px` : '100%'};
-        height: ${height / 2 - lineSize / 2}px;
-      `;
-    }
-  }}
-`;
-
-export const StyledLine = styled(StyledEffect)`
-  flex-shrink: 0;
-  background-color: ${({ theme, lineSize }) =>
-    lineSize === 'none' ? 'transparent' : changeLightness(theme.main, 0.2)};
-
-  ${({ horizontal, vertical, width, height, lineSize }) => {
-    if (horizontal) {
-      return css`
-        width: ${lineSize}px;
-        height: ${height ? `${height}px` : `${TEXT_FROM_SIZE.normal}px`};
-      `;
-    }
-
-    if (vertical) {
-      return css`
-        width: ${width ? `${width}px` : '100%'};
-        height: ${lineSize}px;
-      `;
-    }
-  }}
-`;
-
-export interface IReqoreSpacerProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    IWithReqoreEffect,
-    IWithReqoreCustomTheme,
-    IReqoreIntent {
-  width?: number;
-  height?: number;
-  lineSize?: TSizes | 'none';
-}
-
-export const ReqoreSpacer = memo(
-  ({
-    customTheme,
-    intent,
-    lineSize = 'none',
-    ...rest
-  }: IReqoreSpacerProps & { horizontal?: boolean; vertical?: boolean }) => {
-    const theme = useReqoreTheme('main', customTheme, intent);
-    let { horizontal, vertical } = rest;
-
-    // The user is using old version of the component
-    // We will assume that the user wants a spacer based on the width or height
-    if (!horizontal && !vertical) {
-      if (rest.width) {
-        horizontal = true;
-      }
-
-      if (rest.height) {
-        vertical = true;
-      }
-    }
-
-    const _lineSize = useMemo(
-      () => (lineSize === 'none' ? 0 : LINE_SIZE_TO_NUMBER[lineSize]),
-      [lineSize]
-    );
-
-    return (
-      <StyledSpacer
-        as='div'
-        {...rest}
-        horizontal={horizontal}
-        vertical={vertical}
-        className='reqore-spacer'
-      >
-        <StyledSpace {...rest} horizontal={horizontal} vertical={vertical} lineSize={_lineSize} />
-        <StyledLine
-          {...rest}
-          horizontal={horizontal}
-          vertical={vertical}
-          theme={theme}
-          lineSize={_lineSize}
-        />
-        <StyledSpace {...rest} horizontal={horizontal} vertical={vertical} lineSize={_lineSize} />
-      </StyledSpacer>
-    );
-  }
-);
-
-export const ReqoreHorizontalSpacer = memo(
-  ({ width = 1, lineSize = 'none', ...rest }: IReqoreSpacerProps) => {
-    return <ReqoreSpacer width={width} lineSize={lineSize} horizontal {...rest} />;
-  }
-);
-
-export const ReqoreVerticalSpacer = memo(
-  ({ height = 1, lineSize = 'none', ...rest }: IReqoreSpacerProps) => {
-    return <ReqoreSpacer height={height} lineSize={lineSize} vertical {...rest} />;
-  }
-);