@qoretechnologies/reqore 0.28.1 → 0.28.2

package/src/components/Tag/index.tsx

@@ -13,7 +13,12 @@ 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 {
@@ -24,7 +29,7 @@ import {
   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 {
@@ -45,7 +50,7 @@ export interface IReqoreTagProps
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   icon?: IReqoreIconName;
   rightIcon?: IReqoreIconName;
-  color?: string;
+  color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
   badge?: boolean;
@@ -57,6 +62,7 @@ export interface IReqoreTagStyle extends IReqoreTagProps {
   theme: IReqoreTheme;
   removable?: boolean;
   interactive?: boolean;
+  color?: TReqoreHexColor;
 }
 
 export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
@@ -183,14 +189,16 @@ const StyledButtonWrapper = styled.span<IReqoreTagStyle>`
   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);
@@ -228,7 +236,9 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
     useTooltip(targetRef.current, tooltip);
 
     // If color or intent was specified, set the color
-    let customColor = intent ? theme.intents[intent] : color;
+    let customColor: TReqoreHexColor = intent
+      ? theme.intents[intent]
+      : getColorFromMaybeString(theme, color);
     customColor = minimal ? `${customColor || '#000000'}40` : customColor;
 
     return (
@@ -301,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'
@@ -322,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];

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

@@ -110,7 +110,7 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
             {
               effect: {
                 gradient: {
-                  colors: { 0: '#00fafd', 100: '#eb0e8c' },
+                  colors: { 0: 'danger', 100: 'danger:darken' },
                   direction: 'to right bottom',
                 },
               },

package/src/stories/Menu/Menu.stories.tsx

@@ -1,8 +1,14 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreMenuProps } from '../../components/Menu';
 import { IReqoreMenuItemProps } from '../../components/Menu/item';
-import { ReqoreMenu, ReqoreMenuDivider, ReqoreMenuItem, ReqorePopover } from '../../index';
-import { IntentArg, argManager } from '../utils/args';
+import {
+  ReqoreInput,
+  ReqoreMenu,
+  ReqoreMenuDivider,
+  ReqoreMenuItem,
+  ReqorePopover,
+} from '../../index';
+import { argManager, IntentArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreMenuProps>();
 
@@ -11,7 +17,7 @@ export default {
   argTypes: {
     ...createArg('width', {
       type: 'string',
-      defaultValue: '160px',
+      defaultValue: '210px',
       name: 'Width',
     }),
     ...createArg('maxHeight', {
@@ -35,6 +41,38 @@ export default {
       },
       description: 'Whether to wrap text or not',
     }),
+    ...createArg('minimal', {
+      defaultValue: false,
+      name: 'Minimal',
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether to use minimal style or not',
+    }),
+    ...createArg('flat', {
+      defaultValue: true,
+      name: 'Flat',
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether to use flat style or not',
+    }),
+    ...createArg('rounded', {
+      defaultValue: true,
+      name: 'Rounded',
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether to use rounded style or not',
+    }),
+    ...createArg('transparent', {
+      defaultValue: false,
+      name: 'Transparent',
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether to use transparent style or not',
+    }),
     ...IntentArg,
   },
 } as Meta<IReqoreMenuProps>;
@@ -42,6 +80,7 @@ export default {
 const Template: Story<IReqoreMenuProps> = (args) => {
   return (
     <ReqoreMenu {...args}>
+      <ReqoreInput placeholder='Custom component' icon='Search2Fill' flat={false} />
       <ReqoreMenuItem icon='Save3Fill' intent='success' selected>
         Selected success
       </ReqoreMenuItem>
@@ -143,7 +182,15 @@ export const WrappedText = Template.bind({});
 WrappedText.args = {
   wrapText: true,
 };
+export const Minimal = Template.bind({});
+Minimal.args = {
+  minimal: true,
+};
 export const NotFlat = Template.bind({});
 NotFlat.args = {
   flat: false,
 };
+export const Transparent = Template.bind({});
+Transparent.args = {
+  transparent: true,
+};

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

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { noop } from 'lodash';
 import ReqoreMessage, { IReqoreMessageProps } from '../../components/Message';
-import { FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
+import { argManager, FlatArg, IntentArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreMessageProps>();
 
@@ -64,10 +64,9 @@ Effect.args = {
   effect: {
     gradient: {
       colors: {
-        0: '#00e3e8',
-        100: '#eb0e8c',
+        0: '#eb0e8c',
+        100: 'danger:darken:2',
       },
     },
-    color: '#000000',
   },
 };

package/src/types/global.ts

@@ -140,6 +140,20 @@ export interface IWithReqoreMinimal {
   minimal?: boolean;
 }
 
+export interface IWithReqoreTransparent {
+  /**
+   * If true, the component will be transparent
+   * @default false
+   * @type boolean
+   * @example
+   * <ReqoreButton transparent />
+   * <ReqoreButton transparent={true} />
+   * <ReqoreButton transparent={false} />
+   *
+   */
+  transparent?: boolean;
+}
+
 export interface IWithReqoreEffect {
   /**
    * If true, the component will have an effect