@qoretechnologies/reqore 0.28.0 → 0.28.2

package/src/components/Tag/index.tsx

@@ -13,17 +13,23 @@ import {
 } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ThemeContext from '../../context/ThemeContext';
-import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
+import {
+  changeLightness,
+  getColorFromMaybeString,
+  getReadableColor,
+  getReadableColorFrom,
+} from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useTooltip } from '../../hooks/useTooltip';
 import {
   IReqoreDisabled,
   IReqoreIntent,
   IWithReqoreEffect,
+  IWithReqoreMinimal,
   IWithReqoreTooltip,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect } from '../Effect';
+import { StyledEffect, TReqoreEffectColor, TReqoreHexColor } from '../Effect';
 import ReqoreIcon from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
@@ -35,7 +41,8 @@ export interface IReqoreTagProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
     IWithReqoreTooltip,
     IReqoreDisabled,
-    IWithReqoreEffect {
+    IWithReqoreEffect,
+    IWithReqoreMinimal {
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -43,56 +50,74 @@ export interface IReqoreTagProps
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   icon?: IReqoreIconName;
   rightIcon?: IReqoreIconName;
-  color?: string;
+  color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
   badge?: boolean;
   intent?: TReqoreIntent;
+  wrap?: boolean;
 }
 
 export interface IReqoreTagStyle extends IReqoreTagProps {
   theme: IReqoreTheme;
   removable?: boolean;
   interactive?: boolean;
+  color?: TReqoreHexColor;
 }
 
 export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   display: inline-flex;
   justify-content: center;
   flex-shrink: 0;
-  align-items: center;
+  align-items: stretch;
   font-family: system-ui;
   font-weight: 600;
   overflow: hidden;
   vertical-align: middle;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
-  height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
+
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
   border-radius: ${({ badge, size }) => (badge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
-  ${({ theme, color, labelKey }) =>
+  ${({ wrap, hasWidth }) =>
+    wrap || hasWidth
+      ? css`
+          min-height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
+        `
+      : css`
+          height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
+        `}
+
+  ${({ theme, color, labelKey, minimal }: IReqoreTagStyle) =>
     css`
       background-color: ${color || changeLightness(theme.main, 0.1)};
-      color: ${color ? getReadableColorFrom(color) : getReadableColor(theme, undefined, undefined)};
+      color: ${minimal
+        ? getReadableColor(theme, undefined, undefined, true, theme.originalMain)
+        : color
+        ? getReadableColorFrom(color)
+        : getReadableColor(theme, undefined, undefined)};
 
-      ${StyledTagContentWrapper} {
+      ${StyledTagKeyWrapper} {
         background-color: ${labelKey ? rgba('#000000', 0.2) : undefined};
       }
     `}
 
-  ${({ theme, color, interactive }) =>
-    interactive &&
-    css`
-      cursor: pointer;
-      &:hover {
-        background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
-        color: ${color
-          ? getReadableColorFrom(color)
-          : getReadableColor(theme, undefined, undefined)};
-      }
-    `}
+  ${({ theme, color, interactive, minimal, effect }) =>
+    interactive && !effect?.gradient
+      ? css`
+          cursor: pointer;
+          &:hover {
+            background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
+            color: ${minimal
+              ? getReadableColor(theme, undefined, undefined, false, theme.originalMain)
+              : color
+              ? getReadableColorFrom(color)
+              : getReadableColor(theme, undefined, undefined)};
+          }
+        `
+      : undefined}
 
 
   ${({ disabled }) =>
@@ -106,48 +131,74 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
 
 const StyledTagRightIcon = styled(ReqoreIcon)``;
 
-const StyledTagContentWrapper = styled.div<{ size: TSizes }>`
+const StyledTagKeyWrapper = styled.span<{ size: TSizes }>`
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: ${({ hasKey }) => (hasKey ? 1 : undefined)};
   flex-shrink: 0;
+  min-height: 100%;
+`;
+
+const StyledTagContentWrapper = styled.span<{ size: TSizes }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex: 1;
-  overflow: hidden;
-  height: 100%;
+  flex-shrink: 0;
+  min-height: 100%;
 `;
 
 const StyledTagContent = styled.span<{ size: TSizes }>`
-  padding: 0 ${({ size }) => PADDING_FROM_SIZE[size]}px;
-  height: 100%;
+  padding: 4px ${({ size }) => PADDING_FROM_SIZE[size]}px;
+  min-height: 100%;
   display: flex;
   align-items: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  flex: 1;
+
+  ${({ wrap, hasWidth }) =>
+    !wrap && !hasWidth
+      ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        `
+      : css`
+          word-break: break-word;
+        `}
 `;
 
 const StyledTagContentKey = styled(StyledTagContent)`
   font-weight: 800;
+  flex: 1;
+
+  ${({ wrap, hasWidth }) =>
+    !wrap && !hasWidth
+      ? undefined
+      : css`
+          word-break: break-word;
+        `}
 `;
 
-const StyledButtonWrapper = styled.div<IReqoreTagStyle>`
+const StyledButtonWrapper = styled.span<IReqoreTagStyle>`
   flex-shrink: 0;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
-  height: ${({ size }) => SIZE_TO_PX[size]}px;
   width: ${({ size }) => SIZE_TO_PX[size]}px;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.2s ease-out;
 
-  ${({ color }) =>
+  ${({ color, effect }) =>
     css`
       .reqore-icon {
         transform: scale(0.85);
       }
       &:hover {
         cursor: pointer;
-        background-color: ${color ? changeLightness(color, 0.09) : rgba('#000000', 0.2)};
+        background-color: ${color && !effect?.gradient
+          ? changeLightness(color, 0.09)
+          : rgba('#000000', 0.2)};
 
         .reqore-icon {
           transform: scale(1);
@@ -172,6 +223,9 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       badge,
       intent,
       color,
+      minimal,
+      wrap = false,
+      width,
       ...rest
     }: IReqoreTagProps,
     ref
@@ -182,38 +236,71 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
     useTooltip(targetRef.current, tooltip);
 
     // If color or intent was specified, set the color
-    const customColor = intent ? theme.intents[intent] : color;
+    let customColor: TReqoreHexColor = intent
+      ? theme.intents[intent]
+      : getColorFromMaybeString(theme, color);
+    customColor = minimal ? `${customColor || '#000000'}40` : customColor;
 
     return (
       <StyledTag
         {...rest}
+        effect={{
+          ...rest.effect,
+          interactive: !!onClick && !rest.disabled,
+        }}
+        width={width}
         labelKey={labelKey}
         color={customColor}
         className={`${className || ''} reqore-tag`}
         size={size}
         ref={targetRef}
         badge={badge}
+        minimal={minimal}
         removable={!!onRemoveClick}
         interactive={!!onClick && !rest.disabled}
+        wrap={wrap}
+        hasWidth={!!width}
       >
         {icon || labelKey ? (
-          <StyledTagContentWrapper size={size} className='reqore-tag-content' onClick={onClick}>
+          <StyledTagKeyWrapper
+            size={size}
+            className='reqore-tag-key-content'
+            onClick={onClick}
+            wrap={wrap}
+            hasWidth={!!width}
+            hasKey={!!labelKey}
+          >
             {icon && <ReqoreIcon icon={icon} size={size} margin={label ? 'left' : 'both'} />}
-            {labelKey && <StyledTagContentKey size={size}>{labelKey}</StyledTagContentKey>}
-          </StyledTagContentWrapper>
+            {labelKey && (
+              <StyledTagContentKey wrap={wrap} hasWidth={!!width} size={size}>
+                {labelKey}
+              </StyledTagContentKey>
+            )}
+          </StyledTagKeyWrapper>
         ) : null}
-        {label && (
-          <StyledTagContent size={size} onClick={onClick}>
-            {label}
-          </StyledTagContent>
-        )}
-        {rightIcon && (
-          <StyledTagRightIcon
-            icon={rightIcon}
+        {label || label === 0 || rightIcon ? (
+          <StyledTagContentWrapper
             size={size}
-            margin={label || icon ? 'right' : 'both'}
-          />
-        )}
+            className='reqore-tag-content'
+            onClick={onClick}
+            wrap={wrap}
+            hasWidth={!!width}
+            hasKey={!!labelKey}
+          >
+            {label || label === 0 ? (
+              <StyledTagContent size={size} onClick={onClick} wrap={wrap} hasWidth={!!width}>
+                {label}
+              </StyledTagContent>
+            ) : null}
+            {rightIcon && (
+              <StyledTagRightIcon
+                icon={rightIcon}
+                size={size}
+                margin={label || icon ? 'right' : 'both'}
+              />
+            )}
+          </StyledTagContentWrapper>
+        ) : null}
         {_size(actions)
           ? actions.map((action) => (
               <>
@@ -224,6 +311,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                     color: customColor,
                     className: 'reqore-tag-action',
                     onClick: action.onClick,
+                    effect: rest.effect,
                   }}
                   {...(action.tooltip
                     ? typeof action.tooltip === 'string'
@@ -245,6 +333,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               color: customColor,
               className: 'reqore-tag-remove',
               onClick: onRemoveClick,
+              effect: rest.effect,
             }}
             noWrapper
             content='Remove'

package/src/components/Textarea/index.tsx

@@ -41,6 +41,7 @@ export interface IReqoreTextareaProps
   rounded?: boolean;
   flat?: boolean;
   onClearClick?: () => any;
+  wrapperStyle?: React.CSSProperties;
 }
 
 export interface IReqoreTextareaStyle extends IReqoreTextareaProps {
@@ -132,6 +133,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
       customTheme,
       intent,
       rounded = true,
+      wrapperStyle,
       ...rest
     }: IReqoreTextareaProps,
     ref: any
@@ -149,6 +151,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
         fluid={fluid}
         _size={size}
         theme={theme}
+        style={wrapperStyle}
       >
         <StyledTextarea
           {...rest}

package/src/constants/colors.ts

@@ -1,5 +1,5 @@
 export const Colors = {
-  DARK: '#222222',
+  DARK: '#000000',
   LIGHT: '#ffffff',
   BLUE: '#0E5A8A',
   GREEN: '#0A6640',

package/src/constants/theme.ts

@@ -1,64 +1,66 @@
+import { TReqoreEffectColor, TReqoreHexColor } from '../components/Effect';
+
 export interface IReqoreSidebarTheme {
-  main?: string;
-  color?: string;
-  border?: string;
+  main?: TReqoreHexColor;
+  color?: TReqoreHexColor;
+  border?: TReqoreHexColor;
   item?: {
-    color?: string;
-    background?: string;
-    border?: string;
-    hoverColor?: string;
-    hoverBackground?: string;
-    activeColor?: string;
-    activeBackground?: string;
+    color?: TReqoreHexColor;
+    background?: TReqoreHexColor;
+    border?: TReqoreHexColor;
+    hoverColor?: TReqoreHexColor;
+    hoverBackground?: TReqoreHexColor;
+    activeColor?: TReqoreHexColor;
+    activeBackground?: TReqoreHexColor;
   };
   subItem?: {
-    color?: string;
-    border?: string;
-    background?: string;
-    hoverColor?: string;
-    hoverBackground?: string;
-    activeColor?: string;
-    activeBackground?: string;
+    color?: TReqoreHexColor;
+    border?: TReqoreHexColor;
+    background?: TReqoreHexColor;
+    hoverColor?: TReqoreHexColor;
+    hoverBackground?: TReqoreHexColor;
+    activeColor?: TReqoreHexColor;
+    activeBackground?: TReqoreHexColor;
   };
   icon?: {
-    color?: string;
-    hoverColor?: string;
-    activeColor?: string;
+    color?: TReqoreHexColor;
+    hoverColor?: TReqoreHexColor;
+    activeColor?: TReqoreHexColor;
   };
   section?: {
-    background?: string;
+    background?: TReqoreHexColor;
   };
 }
 
 export interface IReqoreBreadcrumbsTheme {
-  main?: string;
+  main?: TReqoreHexColor;
   item?: {
-    color?: string;
-    hoverColor?: string;
-    activeColor?: string;
+    color?: TReqoreHexColor;
+    hoverColor?: TReqoreHexColor;
+    activeColor?: TReqoreHexColor;
   };
 }
 
 export interface IReqoreNavbarTheme {
-  main?: string;
-  color?: string;
-  border?: string;
-  background?: string;
-  hoverColor?: string;
+  main?: TReqoreHexColor;
+  color?: TReqoreHexColor;
+  border?: TReqoreHexColor;
+  background?: TReqoreHexColor;
+  hoverColor?: TReqoreHexColor;
 }
 
 export interface IReqoreTheme {
-  main: string;
-  originalMain?: string;
+  main: TReqoreHexColor;
+  originalMain?: TReqoreHexColor;
   text?: {
-    color?: string;
+    color?: TReqoreHexColor;
     dim?: boolean;
   };
   intents: IReqoreIntents;
   sidebar?: IReqoreSidebarTheme;
   notifications: IReqoreIntents;
   popover?: {
-    main: string;
+    main: TReqoreHexColor;
   };
   header?: IReqoreNavbarTheme;
   footer?: IReqoreNavbarTheme;
@@ -66,20 +68,20 @@ export interface IReqoreTheme {
 }
 
 export interface IReqoreCustomTheme {
-  main?: string;
+  main?: TReqoreEffectColor;
   text?: {
-    color?: string;
+    color?: TReqoreEffectColor;
     dim?: boolean;
   };
 }
 
 export interface IReqoreIntents {
-  info?: string;
-  success?: string;
-  pending?: string;
-  warning?: string;
-  danger?: string;
-  muted?: string;
+  info?: TReqoreHexColor;
+  success?: TReqoreHexColor;
+  pending?: TReqoreHexColor;
+  warning?: TReqoreHexColor;
+  danger?: TReqoreHexColor;
+  muted?: TReqoreHexColor;
 }
 
 export type TReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';

package/src/containers/UIProvider.tsx

@@ -20,7 +20,7 @@ export interface IReqoreOptions {
   };
 }
 export interface IReqoreUIProviderProps {
-  children: any;
+  children?: any;
   theme?: Partial<IReqoreTheme>;
   options?: IReqoreOptions;
 }

package/src/helpers/colors.ts

@@ -1,15 +1,16 @@
 import { cloneDeep, merge } from 'lodash';
 import { darken, lighten, readableColor } from 'polished';
+import { TReqoreEffectColor, TReqoreEffectColorList, TReqoreHexColor } from '../components/Effect';
 import { Colors } from '../constants/colors';
 import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
 
 export const getReadableColor: (
   theme: Partial<IReqoreTheme>,
-  ifLight?: string,
-  ifDark?: string,
+  ifLight?: TReqoreHexColor,
+  ifDark?: TReqoreHexColor,
   dimmed?: boolean,
-  fallback?: string
-) => string = (theme, ifLight, ifDark, dimmed, fallback) => {
+  fallback?: TReqoreHexColor
+) => TReqoreHexColor = (theme, ifLight, ifDark, dimmed, fallback) => {
   if (theme.text?.color) {
     return theme.text.dim
       ? dimmed
@@ -25,15 +26,15 @@ export const getReadableColor: (
 };
 
 export const getReadableColorFrom = (
-  from: string,
+  from: TReqoreHexColor,
   dim?: boolean,
-  ifLight?: string,
-  ifDark?: string
-) => {
+  ifLight?: TReqoreHexColor,
+  ifDark?: TReqoreHexColor
+): TReqoreHexColor => {
   const returnIfLight = ifLight || lighten(dim ? 0.05 : 0, Colors.DARK);
   const returnIfDark = ifDark || darken(dim ? 0.05 : 0, Colors.LIGHT);
 
-  return readableColor(from, returnIfLight, returnIfDark, false);
+  return readableColor(from, returnIfLight, returnIfDark, false) as TReqoreHexColor;
 };
 
 export const percentToHexAlpha = (p: number) => {
@@ -44,29 +45,33 @@ export const percentToHexAlpha = (p: number) => {
   return hexValue.padStart(2, '0').toUpperCase(); // format with leading 0 and upper case characters
 };
 
-export const shouldDarken = (mainColor: string) => {
+export const shouldDarken = (mainColor: TReqoreHexColor): boolean => {
   const contrast = getColorByBgColor(mainColor);
 
   return contrast === '#000000';
 };
 
-export const getMainColor: (theme: IReqoreTheme, component: string) => string = (
+export const getMainColor: (theme: IReqoreTheme, component: string) => TReqoreHexColor = (
   theme,
   component
 ) => theme[component]?.main || theme.main;
 
 //export const changeBasedOnContrast = (color: string, lightness?: number): string =>
 
-export const changeLightness = (color: string, lightness?: number): string => {
+export const changeLightness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor => {
   return lightness
     ? shouldDarken(color)
-      ? darken(lightness, color)
-      : lighten(lightness, color)
+      ? (darken(lightness, color) as TReqoreHexColor)
+      : (lighten(lightness, color) as TReqoreHexColor)
     : color;
 };
 
-export const changeDarkness = (color: string, lightness?: number): string =>
-  lightness ? (shouldDarken(color) ? lighten(lightness, color) : darken(lightness, color)) : color;
+export const changeDarkness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor =>
+  lightness
+    ? shouldDarken(color)
+      ? (lighten(lightness, color) as TReqoreHexColor)
+      : (darken(lightness, color) as TReqoreHexColor)
+    : color;
 
 export const getColorByBgColor = (bgColor) => {
   if (!bgColor) {
@@ -76,7 +81,7 @@ export const getColorByBgColor = (bgColor) => {
 };
 
 export const isValidSixCharHex = (hex: string): boolean => {
-  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(hex);
+  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}|[A-Fa-f0-9]{8})$/.test(hex);
 };
 
 export const buildTheme = (theme: IReqoreTheme): IReqoreTheme => {
@@ -142,20 +147,47 @@ export const getNotificationIntent = (theme: IReqoreTheme, intent?: TReqoreInten
   return changeLightness(theme.main, 0.1);
 };
 
-export const getMainBackgroundColor = (theme: IReqoreTheme): string =>
+export const getMainBackgroundColor = (theme: IReqoreTheme): TReqoreHexColor =>
   changeLightness(theme.main, 0.02);
 
-export const getColorFromMaybeIntentOrString = (
+export const getColorFromMaybeString = (
   theme: IReqoreTheme,
-  intent: TReqoreIntent | string
-): string => {
-  if (theme.intents[intent]) {
-    return theme.intents[intent];
+  color: TReqoreEffectColor
+): TReqoreHexColor => {
+  if (!color) {
+    return undefined;
+  }
+
+  const [providedColor, shading, multiplier = 1]: TReqoreEffectColorList = color.split(
+    ':'
+  ) as TReqoreEffectColorList;
+
+  if (providedColor === 'transparent') {
+    return '#00000000';
+  }
+
+  // First we need to get the actual color
+  let _color: TReqoreHexColor;
+
+  if (!providedColor || providedColor === 'main') {
+    _color = theme.main;
+  }
+
+  if (theme.intents[providedColor]) {
+    _color = theme.intents[providedColor];
+  }
+
+  if (isValidSixCharHex(color)) {
+    _color = providedColor as TReqoreHexColor;
   }
 
-  if (isValidSixCharHex(intent)) {
-    return intent;
+  if (shading) {
+    if (shading === 'lighten') {
+      _color = lighten(0.1 * multiplier, _color) as TReqoreHexColor;
+    } else if (shading === 'darken') {
+      _color = darken(0.1 * multiplier, _color) as TReqoreHexColor;
+    }
   }
 
-  return theme.main;
+  return _color;
 };

package/src/hooks/useTheme.ts

@@ -1,16 +1,33 @@
 import { cloneDeep } from 'lodash';
 import { useContext } from 'react';
+import { TReqoreEffectColor } from '../components/Effect';
 import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
 import ThemeContext from '../context/ThemeContext';
-import { mergeThemes } from '../helpers/colors';
+import { getColorFromMaybeString, mergeThemes } from '../helpers/colors';
+
+export interface IReqoreCustomTheme extends Partial<Omit<IReqoreTheme, 'main' | 'text'>> {
+  main?: TReqoreEffectColor;
+  text?: {
+    color?: TReqoreEffectColor;
+    dim?: boolean;
+  };
+}
 
 export const useReqoreTheme = (
   element: string,
-  customTheme: Partial<IReqoreTheme> = {},
+  customTheme: IReqoreCustomTheme = {},
   intent?: TReqoreIntent
 ) => {
   const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
-  let _customTheme: Partial<IReqoreTheme> = cloneDeep(customTheme);
+  let _customTheme: IReqoreCustomTheme = cloneDeep(customTheme);
+
+  if (_customTheme.main) {
+    _customTheme.main = getColorFromMaybeString(theme, customTheme.main);
+  }
+
+  if (_customTheme.text?.color) {
+    _customTheme.text.color = getColorFromMaybeString(theme, customTheme.text.color);
+  }
 
   if (element === 'main' && intent) {
     _customTheme.main = theme.intents[intent];