@qoretechnologies/reqore 0.28.6 → 0.29.0

package/src/helpers/colors.ts

@@ -1,5 +1,5 @@
-import { cloneDeep, merge } from 'lodash';
-import { darken, getLuminance, lighten, readableColor } from 'polished';
+import { cloneDeep, merge, reduce } from 'lodash';
+import { darken, getLuminance, lighten, mix, readableColor } from 'polished';
 import { TReqoreEffectColor, TReqoreEffectColorList, TReqoreHexColor } from '../components/Effect';
 import { Colors } from '../constants/colors';
 import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
@@ -124,14 +124,14 @@ export const mergeThemes = (element: string, theme: IReqoreTheme, customTheme: a
     return clonedTheme;
   }
 
-  if (element === 'main' && customTheme) {
+  if (element === 'main') {
     merge(clonedTheme, {
       main: customTheme.main,
       originalMain: clonedTheme.main,
       text: customTheme.text,
     });
   } else {
-    merge(clonedTheme, { [element]: customTheme || {}, text: customTheme.text });
+    merge(clonedTheme, { [element]: customTheme, text: customTheme.text });
   }
 
   return clonedTheme;
@@ -189,3 +189,51 @@ export const getColorFromMaybeString = (
 
   return _color;
 };
+
+export const createEffectGradient = (
+  theme: IReqoreTheme,
+  colors: Record<number, TReqoreEffectColor>,
+  lighten: number = 0,
+  minimal?: boolean
+): string => {
+  return reduce(
+    colors,
+    (colorsString, color, percentage) => {
+      return `${colorsString}, ${
+        minimal ? theme.main : changeLightness(getColorFromMaybeString(theme, color), lighten)
+      } ${percentage}%`;
+    },
+    ''
+  );
+};
+
+export const getNthGradientColor = (
+  theme: IReqoreTheme,
+  colors?: Record<number, TReqoreEffectColor>,
+  nth: number = 1
+): TReqoreHexColor | undefined => {
+  if (colors) {
+    return getColorFromMaybeString(theme, Object.values(colors)[nth - 1]);
+  }
+
+  return undefined;
+};
+
+export const getGradientMix = (
+  theme: IReqoreTheme,
+  colors: Record<number, TReqoreEffectColor>,
+  fallback?: TReqoreHexColor
+): TReqoreHexColor | undefined => {
+  if (colors && Object.keys(colors).length === 2) {
+    const gradientColor1: TReqoreHexColor = getNthGradientColor(theme, colors);
+    const gradientColor2: TReqoreHexColor = getNthGradientColor(theme, colors, 2);
+
+    return mix(
+      0.5,
+      gradientColor1 === '#00000000' ? theme.main : gradientColor1,
+      gradientColor2 === '#00000000' ? theme.main : gradientColor2
+    ) as TReqoreHexColor;
+  }
+
+  return fallback;
+};

package/src/hooks/usePopover.tsx

@@ -2,6 +2,7 @@ import { Placement } from '@popperjs/core';
 import { MutableRefObject, useContext, useEffect, useMemo, useRef } from 'react';
 import { useUnmount, useUpdateEffect } from 'react-use';
 import shortid from 'shortid';
+import { IPopoverData } from '../containers/PopoverProvider';
 import PopoverContext from '../context/PopoverContext';
 import {
   IReqoreIntent,
@@ -25,6 +26,13 @@ const endEvents = {
   focus: null,
 };
 
+export interface IPopoverControls {
+  open: () => void;
+  close: () => void;
+  isOpen: () => boolean;
+  id: string;
+}
+
 export interface IPopover
   extends IReqoreIntent,
     IWithReqoreMinimal,
@@ -50,6 +58,7 @@ export interface IPopover
 
 export interface IPopoverOptions extends IPopover {
   targetElement?: HTMLElement;
+  passPopoverData?: (data: IPopoverControls) => void;
 }
 
 const usePopover = ({
@@ -64,14 +73,15 @@ const usePopover = ({
   openOnMount = false,
   delay,
   ...rest
-}: IPopoverOptions) => {
-  const { addPopover, removePopover, updatePopover, popovers } = useContext(PopoverContext);
+}: IPopoverOptions): IPopoverControls => {
+  const { addPopover, removePopover, updatePopover, popovers, isPopoverOpen } =
+    useContext(PopoverContext);
   const { current }: MutableRefObject<string> = useRef(shortid.generate());
   let { current: timeout }: MutableRefObject<any> = useRef(0);
 
   const startEvent = startEvents[handler];
   const endEvent = endEvents[handler];
-  const currentPopover = useMemo(
+  const currentPopover: IPopoverData = useMemo(
     () => popovers?.find((p) => p.id === current),
     [popovers, current]
   );
@@ -97,7 +107,7 @@ const usePopover = ({
 
   const _addPopover = () => {
     if (currentPopover) {
-      if (handler !== 'hoverStay') {
+      if (handler !== 'hoverStay' && handler !== 'focus') {
         _removePopover?.();
       }
     } else if (show) {
@@ -112,11 +122,6 @@ const usePopover = ({
   };
 
   const _removePopover = () => {
-    if (rest?.blur > 0) {
-      targetElement.style.position = 'initial';
-      targetElement.style.zIndex = 'initial';
-    }
-
     cancelTimeout();
     removePopover?.(current);
   };
@@ -188,7 +193,16 @@ const usePopover = ({
     cancelTimeout();
   });
 
-  return current;
+  return {
+    id: current,
+    open: () => {
+      if (!isPopoverOpen(current)) {
+        openPopover();
+      }
+    },
+    close: () => _removePopover(),
+    isOpen: () => isPopoverOpen(current),
+  };
 };
 
 export default usePopover;

package/src/hooks/useReqore.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import ReqoreContext, { IReqoreContext } from '../context/ReqoreContext';
+
+export const useReqore = (): IReqoreContext => {
+  const reqore = useContext(ReqoreContext);
+
+  if (!reqore) {
+    throw new Error('Reqore context is not defined');
+  }
+
+  return reqore;
+};

package/src/hooks/useTheme.ts

@@ -14,11 +14,16 @@ export interface IReqoreCustomTheme extends Partial<Omit<IReqoreTheme, 'main' |
 }
 
 export const useReqoreTheme = (
-  element: string,
+  element?: string,
   customTheme: IReqoreCustomTheme = {},
   intent?: TReqoreIntent
 ) => {
   const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+
+  if (!element) {
+    return theme;
+  }
+
   let _customTheme: IReqoreCustomTheme = cloneDeep(customTheme);
 
   if (_customTheme.main) {

package/src/index.tsx

@@ -30,6 +30,7 @@ export { default as ReqoreMenuDivider } from './components/Menu/divider';
 export { default as ReqoreMenuItem } from './components/Menu/item';
 export { default as ReqoreMessage } from './components/Message';
 export { ReqoreModal } from './components/Modal';
+export { ReqoreMultiSelect } from './components/MultiSelect';
 export { ReqoreFooter, ReqoreHeader } from './components/Navbar';
 export { default as ReqoreNavbarDivider } from './components/Navbar/divider';
 export { default as ReqoreNavbarGroup } from './components/Navbar/group';
@@ -58,3 +59,5 @@ export { default as ReqoreUIProvider } from './containers/UIProvider';
 export { default as ReqoreContext } from './context/ReqoreContext';
 export { default as ReqoreThemeContext } from './context/ThemeContext';
 export { default as useLatestZIndex } from './hooks/useLatestZIndex';
+export { useReqore } from './hooks/useReqore';
+export { useReqoreTheme } from './hooks/useTheme';

package/src/mock/multiSelect.ts

@@ -0,0 +1,61 @@
+import { TReqoreMultiSelectItem } from '../components/MultiSelect';
+
+export const MultiSelectItems: TReqoreMultiSelectItem[] = [
+  {
+    label: 'Existing item 1',
+    value: 'Existing item 1',
+    icon: 'SunCloudyLine',
+  },
+  {
+    label: 'Existing item 2',
+    value: 'Existing item 2',
+    icon: 'BatteryChargeFill',
+  },
+  {
+    label: 'Existing item 3',
+    value: 'Existing item 3',
+    icon: 'DropboxFill',
+    intent: 'info',
+  },
+  {
+    label: 'Existing item 4',
+    value: 'Existing item 4',
+    icon: 'PagesLine',
+    effect: { gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } },
+  },
+  {
+    disabled: true,
+    label: 'Disabled item',
+    value: 'Disabled item',
+    icon: 'StopCircleLine',
+  },
+  {
+    minimal: true,
+    label: 'Minimal item',
+    value: 'Minimal item',
+    icon: 'StopCircleLine',
+  },
+  {
+    divider: true,
+    icon: 'CheckDoubleLine',
+  },
+  {
+    value: 'itemWithNoLabel',
+    icon: 'TakeawayLine',
+  },
+  {
+    label: 'Other Item 1',
+    value: 'Other Item 1',
+    icon: 'MapFill',
+  },
+  {
+    label: 'Other Item 2',
+    value: 'Other Item 2',
+    icon: 'ArrowLeftUpFill',
+  },
+  {
+    label: 'Other Item 3',
+    value: 'Other Item 3',
+    icon: 'MicLine',
+  },
+];

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

@@ -32,17 +32,29 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} active tooltip='hello'>
           Active
         </ReqoreButton>
+        <ReqoreButton {...buttonProps} minimal flat>
+          Minimal
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} readOnly onClick={alert}>
+          Read only
+        </ReqoreButton>
+      </ReqoreControlGroup>
+      <br />
+      <ReqoreControlGroup size={buttonProps.size}>
+        <ReqoreButton {...buttonProps} active flat={false} tooltip='hello'>
+          Active Not Flat
+        </ReqoreButton>
         <ReqoreButton {...buttonProps} flat={false}>
           Not Flat
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal>
-          Minimal
+        <ReqoreButton {...buttonProps} minimal flat={false}>
+          Minimal not flat
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal flat>
-          Minimal flat
+        <ReqoreButton {...buttonProps} readOnly onClick={alert} flat={false}>
+          Read only not flat
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} readOnly onClick={alert}>
-          Read only
+        <ReqoreButton {...buttonProps} disabled flat={false}>
+          Disabled not flat
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
@@ -98,10 +110,10 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
       <br />
       <ReqoreControlGroup>
         <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
-          With Badge
+          Read only with badge
         </ReqoreButton>
         <ReqoreButton {...buttonProps} minimal badge={20} onClick={alert}>
-          With Badge
+          Minimal with badge
         </ReqoreButton>
         <ReqoreButton
           {...buttonProps}

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreControlGroupProps } from '../../components/ControlGroup';
 import ReqoreInput from '../../components/Input';
 import { ReqoreButton, ReqoreControlGroup, ReqoreTag } from '../../index';
-import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
+import { argManager, GapSizeArg, MinimalArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
 
@@ -39,7 +39,7 @@ const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProp
       <ReqoreButton>Button</ReqoreButton>
       <ReqoreButton
         flat={false}
-        effect={{ gradient: { colors: { 0: 'success', 100: 'success:darken:1' } } }}
+        effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
       >
         Non flat Button
       </ReqoreButton>
@@ -60,6 +60,11 @@ Minimal.args = {
   minimal: true,
 };
 
+export const NotFlat = Template.bind({});
+NotFlat.args = {
+  flat: false,
+};
+
 export const Vertical = Template.bind({});
 Vertical.args = {
   vertical: true,

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

@@ -47,6 +47,11 @@ export default {
           value: 'i aM diSAblEd',
           icon: 'StopCircleLine',
         },
+        {
+          divider: true,
+          label: 'Divider',
+          dividerAlign: 'left',
+        },
         {
           selected: true,
           value: 'Hello',
@@ -125,7 +130,7 @@ export default {
 } as Meta<IReqoreDropdownProps>;
 
 const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
-  const [selected, setSelected] = useState<string[]>(['Item 3', 'Item 6']);
+  const [selected, setSelected] = useState<(string | number)[]>(['Item 3', 'Item 6']);
 
   if (args.multiSelect) {
     return (

package/src/stories/Input/Input.stories.tsx

@@ -26,6 +26,31 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
 
   return (
     <>
+      <ReqoreControlGroup>
+        <ReqoreInput {...args} placeholder='Reqore Input' onChange={handleValueChange} />
+        <ReqoreInput {...args} placeholder='Minimal Input' minimal onChange={handleValueChange} />
+        <ReqoreInput
+          {...args}
+          placeholder='Flat Input'
+          flat
+          tooltip="I'm a tooltip"
+          onChange={handleValueChange}
+        />
+        <ReqoreInput
+          {...args}
+          placeholder='Clearable Input'
+          onClearClick={handleValueClear}
+          onChange={handleValueChange}
+        />
+        <ReqoreInput {...args} placeholder='Disabled Input' disabled onChange={handleValueChange} />
+        <ReqoreInput
+          {...args}
+          placeholder='Read Only Input'
+          readOnly
+          onChange={handleValueChange}
+        />
+      </ReqoreControlGroup>
+      <br />
       <ReqoreControlGroup>
         <ReqoreInput
           {...args}

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

@@ -8,7 +8,7 @@ import {
   ReqoreMenuItem,
   ReqorePopover,
 } from '../../index';
-import { IntentArg, argManager } from '../utils/args';
+import { argManager, IntentArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreMenuProps>();
 
@@ -154,7 +154,8 @@ const Template: Story<IReqoreMenuProps> = (args) => {
       </ReqorePopover>
       <ReqoreMenuDivider
         label='Fancy divider'
-        effect={{ textAlign: 'left', gradient: { colors: { 0: '#0d5ba5', 100: '#ff5dfd' } } }}
+        effect={{ gradient: { colors: { 0: '#0d5ba5', 100: '#ff5dfd' } } }}
+        align='left'
       />
       <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine' selected>
         I am selected!

package/src/stories/MultiSelect/MultiSelect.stories.tsx

@@ -0,0 +1,99 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { useState } from 'react';
+import { IReqoreMultiSelectProps, ReqoreMultiSelect } from '../../components/MultiSelect';
+import { MultiSelectItems } from '../../mock/multiSelect';
+import { argManager, FlatArg, MinimalArg, SizeArg } from '../utils/args';
+
+const { createArg } = argManager<IReqoreMultiSelectProps>();
+
+export default {
+  title: 'Components/MultiSelect',
+  parameters: {
+    chromatic: {
+      delay: 500,
+    },
+  },
+  argTypes: {
+    ...FlatArg,
+    ...MinimalArg(),
+    ...SizeArg,
+    ...createArg('canCreateItems', {
+      defaultValue: true,
+      name: 'Can create items',
+      type: 'boolean',
+    }),
+    ...createArg('canRemoveItems', {
+      defaultValue: true,
+      name: 'Can remove items',
+      type: 'boolean',
+    }),
+  },
+} as Meta<IReqoreMultiSelectProps>;
+
+const Template: Story<IReqoreMultiSelectProps> = (args: IReqoreMultiSelectProps) => {
+  const [selected, setSelected] = useState<string[]>([
+    'Existing item 1',
+    'Existing item 3',
+    'Disabled item',
+    'Minimal item with border',
+    'itemWithNoLabel',
+  ]);
+
+  return (
+    <ReqoreMultiSelect
+      value={selected}
+      {...args}
+      onValueChange={setSelected}
+      enterKeySelects
+      onItemClick={(item) => console.log('onItemClick', item)}
+      selectorProps={{
+        listHeight: '600px',
+        ...args.selectorProps,
+      }}
+      items={MultiSelectItems}
+    />
+  );
+};
+
+export const Basic = Template.bind({});
+export const Empty = Template.bind({});
+Empty.args = {
+  value: [],
+};
+
+export const AutoOpen = Template.bind({});
+AutoOpen.args = {
+  openOnMount: true,
+};
+
+export const Flat = Template.bind({});
+Flat.args = {
+  flat: true,
+};
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  minimal: true,
+};
+
+export const WithEffect = Template.bind({});
+WithEffect.args = {
+  selectedItemEffect: {
+    gradient: {
+      colors: {
+        0: '#7f60ea',
+        100: '#00fd67',
+      },
+    },
+  },
+  selectorProps: {
+    effect: {
+      gradient: {
+        colors: {
+          0: '#7f60ea',
+          100: '#00fd67',
+        },
+      },
+    },
+  },
+};

package/src/stories/Tabs/Tabs.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreTabsProps } from '../../components/Tabs';
 import { ReqoreTabs, ReqoreTabsContent } from '../../index';
-import { IntentArg, SizeArg, argManager } from '../utils/args';
+import { argManager, IntentArg, SizeArg } from '../utils/args';
 
 const tabs = [
   {
@@ -67,14 +67,34 @@ const tabs = [
     },
   },
   {
-    label: 'Tab 8',
+    label: 'With Effect',
     id: 'tab8',
     icon: 'MapPin3Line',
+    flat: false,
+    effect: {
+      gradient: {
+        colors: {
+          0: 'info',
+          100: 'danger',
+        },
+      },
+    },
   },
   {
-    label: 'Tab 9',
+    label: 'With another effect',
     id: 'tab9',
     icon: 'EjectLine',
+    effect: {
+      glow: {
+        color: 'warning',
+        blur: 16,
+        size: -5,
+      },
+      spaced: 3,
+      uppercase: true,
+      weight: 'thick',
+      textSize: 'small',
+    },
   },
 ] as IReqoreTabsProps['tabs'];
 

package/src/stories/Tag/Tag.stories.tsx

@@ -60,7 +60,14 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
   return (
     <ReqoreTagGroup columns={columns} size={args.size} gapSize={args.gapSize}>
       <ReqoreTag {...args} actions={null} onRemoveClick={null} rightIcon={null} label={1} />
-      <ReqoreTag {...args} actions={null} onRemoveClick={null} rightIcon={null} label='Basic Tag' />
+      <ReqoreTag
+        {...args}
+        actions={null}
+        onRemoveClick={null}
+        rightIcon={null}
+        label='Basic Tag'
+        onClick={() => console.log('Tag clicked')}
+      />
       <ReqoreTag
         {...args}
         actions={null}