@qoretechnologies/reqore 0.28.1 → 0.28.3

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/ControlGroup/ControlGroup.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreControlGroupProps } from '../../components/ControlGroup';
 import ReqoreInput from '../../components/Input';
-import { ReqoreButton, ReqoreControlGroup } from '../../index';
+import { ReqoreButton, ReqoreControlGroup, ReqoreTag } from '../../index';
 import { MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
@@ -36,6 +36,14 @@ const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProp
   return (
     <ReqoreControlGroup {...args}>
       <ReqoreButton>Button</ReqoreButton>
+      <ReqoreButton
+        flat={false}
+        effect={{ gradient: { colors: { 0: 'success', 100: 'success:darken:1' } } }}
+      >
+        Non flat Button
+      </ReqoreButton>
+      <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
+      <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
       <ReqoreInput icon='4KFill' value='Hello' />
       <ReqoreButton disabled fixed>
         Disabled & Fixed

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -161,6 +161,32 @@ const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
         <ReqoreDropdown rightIcon='SunCloudyLine' caretPosition='right' {...args}>
           Custom icon with caret on right
         </ReqoreDropdown>
+        <ReqoreDropdown
+          items={[
+            {
+              selected: true,
+              label: 'Hello',
+              value: 'hello',
+              icon: 'SunCloudyLine',
+            },
+            {
+              label: 'How are ya',
+              value: 'howareya',
+              icon: 'BatteryChargeFill',
+            },
+            {
+              disabled: true,
+              label: 'i aM diSAblEd',
+              value: 'disabled',
+              icon: 'StopCircleLine',
+            },
+            {
+              label: 'With right button',
+              value: 'kek',
+              icon: 'CheckDoubleLine',
+            },
+          ]}
+        />
       </ReqoreControlGroup>
       <br />
       <ReqoreControlGroup fluid>

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

@@ -1,7 +1,13 @@
 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 {
+  ReqoreInput,
+  ReqoreMenu,
+  ReqoreMenuDivider,
+  ReqoreMenuItem,
+  ReqorePopover,
+} from '../../index';
 import { IntentArg, argManager } 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,10 +80,13 @@ 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>
-      <ReqoreMenuItem icon='Save3Fill'>Save</ReqoreMenuItem>
+      <ReqoreMenuItem icon='Save3Fill' badge={10}>
+        Save
+      </ReqoreMenuItem>
       <ReqoreMenuDivider label='BIG Divider' size='huge' />
       <ReqoreMenuItem
         icon='ChatPollFill'
@@ -143,7 +184,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/stories/Tag/Tag.stories.tsx

@@ -3,7 +3,7 @@ import { noop } from 'lodash';
 import { IReqoreTagProps } from '../../components/Tag';
 import { IReqoreTagGroup } from '../../components/Tag/group';
 import { ReqoreTag, ReqoreTagGroup } from '../../index';
-import { argManager, SizeArg } from '../utils/args';
+import { SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTagGroup & IReqoreTagProps>();
 
@@ -156,6 +156,30 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
           },
         ]}
       />
+      <ReqoreTag
+        {...args}
+        labelKey='This is the key for a wrapped tag'
+        label='Wrapped tag with some long text and NO width specified, AND wrap specified'
+        icon='ShareForward2Fill'
+        rightIcon={args.rightIcon}
+        wrap
+        onRemoveClick={null}
+        actions={[
+          {
+            icon: '24HoursFill',
+            onClick: noop,
+            disabled: true,
+            intent: 'info',
+            tooltip: { content: 'I am a tooltip' },
+          },
+          {
+            icon: 'SpyFill',
+            onClick: noop,
+            intent: 'success',
+            tooltip: { content: 'Hm, another tooltip', openOnMount: true },
+          },
+        ]}
+      />
     </ReqoreTagGroup>
   );
 };

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