@qoretechnologies/reqore 0.40.4 → 0.40.6

package/src/components/Button/index.tsx

@@ -1,3 +1,4 @@
+import { size } from 'lodash';
 import { rgba } from 'polished';
 import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
@@ -73,6 +74,7 @@ export interface IReqoreButtonProps
   customTheme?: IReqoreCustomTheme;
   wrap?: boolean;
   badge?: TReqoreBadge | TReqoreBadge[];
+
   description?: string | number;
   maxWidth?: string;
   textAlign?: 'left' | 'center' | 'right';
@@ -315,28 +317,53 @@ export const ButtonBadge = memo(({ wrapGroup, compact, ...props }: IReqoreButton
     [props]
   );
 
-  // If the content is a list
-  if (Array.isArray(props.content)) {
-    return (
-      <>
-        <ReqoreSpacer
-          width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / (compact ? 2 : 1)}
-          height={!props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / 2}
-        />
-        <ReqoreTagGroup wrap={wrapGroup}>
-          {props.content.map((badge, index) => renderTag({ ...props, content: badge, key: index }))}
-        </ReqoreTagGroup>
-      </>
-    );
-  }
+  const content = Array.isArray(props.content) ? props.content : [props.content];
+
+  const leftBadges = content.filter(
+    (badge) => typeof badge === 'string' || typeof badge === 'number' || !badge?.align
+  );
+  const rightBadges = content.filter(
+    (badge) => typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'right'
+  );
+  const middleBadges = content.filter(
+    (badge) => typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'center'
+  );
+
+  const buildContent = (badge: TReqoreBadge) => {
+    if (typeof badge === 'string' || typeof badge === 'number') {
+      return { label: badge, align: undefined };
+    }
+
+    return { ...badge, align: undefined };
+  };
 
   return (
     <>
       <ReqoreSpacer
-        width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size]}
+        width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / (compact ? 2 : 1)}
         height={!props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / 2}
       />
-      {renderTag({ ...props, key: 0 })}
+      {size(leftBadges) ? (
+        <ReqoreTagGroup wrap={wrapGroup} align='left'>
+          {leftBadges.map((badge, index) =>
+            renderTag({ ...props, content: buildContent(badge), key: index })
+          )}
+        </ReqoreTagGroup>
+      ) : null}
+      {size(middleBadges) ? (
+        <ReqoreTagGroup wrap={wrapGroup} fluid align='center'>
+          {middleBadges.map((badge, index) =>
+            renderTag({ ...props, content: buildContent(badge), key: index })
+          )}
+        </ReqoreTagGroup>
+      ) : null}
+      {size(rightBadges) ? (
+        <ReqoreTagGroup wrap={wrapGroup} align='right'>
+          {rightBadges.map((badge, index) =>
+            renderTag({ ...props, content: buildContent(badge), key: index })
+          )}
+        </ReqoreTagGroup>
+      ) : null}
     </>
   );
 });
@@ -402,6 +429,17 @@ const ReqoreButton = memo(
       const hasLeftIcon = icon || leftIconProps?.image;
       const hasRightIcon = rightIcon || rightIconProps?.image;
 
+      const hasRightAlignedBadge = useMemo(() => {
+        if (Array.isArray(badge)) {
+          return badge.some(
+            (badge) =>
+              typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'right'
+          );
+        }
+
+        return typeof badge !== 'string' && typeof badge !== 'number' && badge?.align === 'right';
+      }, [badge]);
+
       return (
         <StyledButton
           {...rest}
@@ -498,7 +536,11 @@ const ReqoreButton = memo(
               _children ? (
                 <ReqoreHorizontalSpacer
                   width={1}
-                  style={textAlign !== 'right' ? { marginLeft: 'auto' } : undefined}
+                  style={
+                    textAlign !== 'right' && !hasRightAlignedBadge
+                      ? { marginLeft: 'auto' }
+                      : undefined
+                  }
                 />
               ) : null
             ) : (
@@ -515,7 +557,10 @@ const ReqoreButton = memo(
                   style={
                     textAlign !== 'right' || iconsAlign === 'center'
                       ? {
-                          marginLeft: iconsAlign !== 'center' || !_children ? 'auto' : undefined,
+                          marginLeft:
+                            !hasRightAlignedBadge && (iconsAlign !== 'center' || !_children)
+                              ? 'auto'
+                              : undefined,
                           marginRight:
                             iconsAlign === 'center' || (textAlign === 'center' && !_children)
                               ? 'auto'

package/src/components/Effect/index.tsx

@@ -28,6 +28,9 @@ export type TReqoreEffectColorManipulationAlpha =
   | 0.9
   | 1;
 export type TReqoreHexColor = `#${string}`;
+export type TReqoreRgbColor = `rgb(${number}, ${number}, ${number})`;
+export type TReqoreRgbaColor = `rgba(${number}, ${number}, ${number}, ${string})`;
+export type TReqoreMultiTypeColor = TReqoreHexColor | TReqoreRgbColor | TReqoreRgbaColor;
 export type TReqoreColor = TReqoreHexColor | 'transparent';
 export type TReqoreEffectColor =
   | (TReqoreColor | TReqoreHexColor | 'main' | TReqoreIntent)

package/src/components/Tag/group.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IWithReqoreMinimal, IWithReqoreSize } from '../../types/global';
 
@@ -11,13 +11,32 @@ export interface IReqoreTagGroup
   gapSize?: TSizes;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   wrap?: boolean;
+  fluid?: boolean;
+  align?: 'left' | 'center' | 'right';
 }
 
 const StyledTagGroup = styled.div`
   flex-shrink: ${({ wrap }: IReqoreTagGroup) => (wrap ? 1 : 0)};
+  flex-grow: ${({ fluid }: IReqoreTagGroup) => (fluid ? 1 : undefined)};
   display: flex;
   flex-wrap: ${({ wrap }: IReqoreTagGroup) => (wrap ? 'wrap' : 'nowrap')};
   gap: ${({ gapSize }: IReqoreTagGroup) => GAP_FROM_SIZE[gapSize]}px;
+
+  ${({ align }) => {
+    if (align === 'right') {
+      return css`
+        margin-left: auto;
+        justify-content: flex-end;
+      `;
+    }
+
+    if (align === 'center') {
+      return css`
+        margin: 0 auto;
+        justify-content: center;
+      `;
+    }
+  }}
 `;
 
 const ReqoreTagGroup = ({

package/src/components/Tag/index.tsx

@@ -56,6 +56,7 @@ export interface IReqoreTagProps
     IWithReqoreEffect,
     IWithReqoreCustomTheme {
   fixed?: boolean | 'key' | 'label';
+  align?: 'left' | 'right' | 'center';
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -105,6 +106,26 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
+  ${({ align }) => {
+    if (align === 'left') {
+      return css`
+        margin-right: auto;
+      `;
+    }
+
+    if (align === 'right') {
+      return css`
+        margin-left: auto;
+      `;
+    }
+
+    if (align === 'center') {
+      return css`
+        margin: 0 auto;
+      `;
+    }
+  }}
+
   ${InactiveIconScale};
 
   ${({ wrap, hasWidth }) =>

package/src/helpers/colors.ts

@@ -6,6 +6,8 @@ import {
   TReqoreEffectGradientColors,
   TReqoreEffectGradientColorsObject,
   TReqoreHexColor,
+  TReqoreMultiTypeColor,
+  TReqoreRgbaColor,
 } from '../components/Effect';
 import { Colors } from '../constants/colors';
 import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
@@ -39,8 +41,9 @@ export const getReadableColorFrom = (
 ): TReqoreHexColor => {
   const returnIfLight = ifLight || lighten(dim ? 0.05 : 0, Colors.DARK);
   const returnIfDark = ifDark || darken(dim ? 0.05 : 0, Colors.LIGHT);
+  const fixedColor = hexAToRGBA(from);
 
-  return readableColor(from, returnIfLight, returnIfDark, false) as TReqoreHexColor;
+  return readableColor(fixedColor, returnIfLight, returnIfDark, false) as TReqoreHexColor;
 };
 
 export const percentToHexAlpha = (p: number) => {
@@ -51,6 +54,22 @@ export const percentToHexAlpha = (p: number) => {
   return hexValue.padStart(2, '0').toUpperCase(); // format with leading 0 and upper case characters
 };
 
+export const hexAToRGBA = (hex: TReqoreMultiTypeColor): TReqoreRgbaColor => {
+  // Check if this color is already in rgba format
+  if (hex.startsWith('rgb')) {
+    return hex as TReqoreRgbaColor;
+  }
+
+  const _hex = hex.length === 4 ? hex + hex.slice(1, 3) : hex;
+
+  const r = parseInt(_hex.slice(1, 3), 16);
+  const g = parseInt(_hex.slice(3, 5), 16);
+  const b = parseInt(_hex.slice(5, 7), 16);
+  const a = parseInt(_hex.slice(7, 9) || 'ff', 16) / 255;
+
+  return `rgba(${r}, ${g}, ${b}, ${a.toFixed(2)})`;
+};
+
 export const RGBAToHexA = (rgba, forceRemoveAlpha = false): TReqoreHexColor => {
   if (isValidSixCharHex(rgba)) {
     return rgba as TReqoreHexColor;
@@ -68,8 +87,8 @@ export const RGBAToHexA = (rgba, forceRemoveAlpha = false): TReqoreHexColor => {
       .join('')) as TReqoreHexColor; // Puts the array to togehter to a string
 };
 
-export const shouldDarken = (mainColor: TReqoreHexColor): boolean => {
-  return getLuminance(mainColor) > 0.2;
+export const shouldDarken = (mainColor: TReqoreMultiTypeColor): boolean => {
+  return getLuminance(hexAToRGBA(mainColor)) > 0.2;
 };
 
 export const getMainColor: (theme: IReqoreTheme, component: string) => TReqoreHexColor = (
@@ -80,19 +99,24 @@ export const getMainColor: (theme: IReqoreTheme, component: string) => TReqoreHe
 //export const changeBasedOnContrast = (color: string, lightness?: number): string =>
 
 export const changeLightness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor => {
+  const fixedColor = hexAToRGBA(color);
+
   return lightness
-    ? shouldDarken(color)
-      ? (darken(lightness, color) as TReqoreHexColor)
-      : (lighten(lightness, color) as TReqoreHexColor)
+    ? shouldDarken(fixedColor)
+      ? (darken(lightness, fixedColor) as TReqoreHexColor)
+      : (lighten(lightness, fixedColor) as TReqoreHexColor)
     : color;
 };
 
-export const changeDarkness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor =>
-  lightness
-    ? shouldDarken(color)
-      ? (lighten(lightness, color) as TReqoreHexColor)
-      : (darken(lightness, color) as TReqoreHexColor)
+export const changeDarkness = (color: TReqoreHexColor, lightness?: number): TReqoreHexColor => {
+  const fixedColor = hexAToRGBA(color);
+
+  return lightness
+    ? shouldDarken(fixedColor)
+      ? (lighten(lightness, fixedColor) as TReqoreHexColor)
+      : (darken(lightness, fixedColor) as TReqoreHexColor)
     : color;
+};
 
 export const getColorByBgColor = (bgColor) => {
   if (!bgColor) {

package/src/stories/Button/Button.stories.tsx

@@ -95,8 +95,13 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} verticalPadding='small'>
           Vertical padding small
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} verticalPadding='normal'>
-          Vertical padding normal
+        <ReqoreButton
+          {...buttonProps}
+          verticalPadding='normal'
+          rightIcon={undefined}
+          badge={{ align: 'right', label: 'R' }}
+        >
+          Vertical padding
         </ReqoreButton>
         <ReqoreButton {...buttonProps} verticalPadding='big'>
           Vertical padding big
@@ -111,17 +116,34 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <ReqoreControlGroup fluid wrap>
-        <ReqoreButton {...buttonProps} fluid>
-          Fluid button
+        <ReqoreButton
+          {...buttonProps}
+          fluid
+          badge={[
+            1,
+            { label: 'in da middle', align: 'center' },
+            { label: 'right align', align: 'right' },
+            2,
+          ]}
+        >
+          Positioned badges
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          fluid
+          badge={[1, { label: 'right align', align: 'right' }, 2]}
+        >
+          Positioned badges
         </ReqoreButton>
       </ReqoreControlGroup>
+
       <ReqoreControlGroup fluid wrap>
         <ReqoreButton {...buttonProps} fluid textAlign='center'>
           Fluid button with centered text
         </ReqoreButton>
       </ReqoreControlGroup>
       <ReqoreControlGroup fluid wrap>
-        <ReqoreButton {...buttonProps} fluid textAlign='center' iconsAlign='center'>
+        <ReqoreButton {...buttonProps} fluid textAlign='center' iconsAlign='center' badge='badge'>
           Fluid button with centered text & icons
         </ReqoreButton>
         <ReqoreButton
@@ -130,6 +152,7 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
           fluid
           textAlign='center'
           iconsAlign='center'
+          badge={[{ label: 'test', align: 'right' }, 2]}
         >
           Fluid button with centered text & icons
         </ReqoreButton>

package/src/stories/Message/Message.stories.tsx

@@ -107,6 +107,15 @@ export const Pending: Story = {
   },
 };
 
+export const Muted: Story = {
+  render: Template,
+
+  args: {
+    opaque: true,
+    intent: 'muted',
+  },
+};
+
 export const CustomTheme: Story = {
   render: Template,