@qoretechnologies/reqore 0.32.0 → 0.32.3

package/src/containers/ReqoreProvider.tsx

@@ -2,14 +2,16 @@ import { size } from 'lodash';
 import React, { useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import shortid from 'shortid';
+import { useContext } from 'use-context-selector';
 import { ReqoreModal, ReqoreTextEffect } from '..';
 import ReqoreNotificationsWrapper from '../components/Notifications';
 import ReqoreNotification, {
   IReqoreNotificationType,
 } from '../components/Notifications/notification';
 import { TSizes } from '../constants/sizes';
-import { TReqoreIntent } from '../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
 import ReqoreContext from '../context/ReqoreContext';
+import ThemeContext from '../context/ThemeContext';
 import { IReqoreIconName } from '../types/icons';
 import { IReqoreOptions } from './UIProvider';
 
@@ -50,6 +52,7 @@ export interface IReqoreConfirmationModal {
 const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {} }) => {
   const [notifications, setNotifications] = useState<IReqoreNotificationData[] | null>([]);
   const [confirmationModal, setConfirmationModal] = useState<IReqoreConfirmationModal>({});
+  const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
   const latestZIndex = useRef<number>(9000);
 
   const isMobile = process.env.NODE_ENV === 'test' ? false : useMedia('(max-width: 480px)');
@@ -114,6 +117,7 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
       <ReqoreContext.Provider
         value={{
           notifications,
+          theme,
           addNotification,
           removeNotification,
           confirmAction,

package/src/containers/ThemeProvider.tsx

@@ -1,22 +1,12 @@
-import { useContext } from 'react';
 import { ThemeProvider } from 'styled-components';
+import { useContext } from 'use-context-selector';
 import { IReqoreTheme } from '../constants/theme';
 import ThemeContext from '../context/ThemeContext';
 
-const ReqoreThemeProvider = ({
-  children,
-  theme,
-}: {
-  children: any;
-  theme?: IReqoreTheme;
-}) => {
+const ReqoreThemeProvider = ({ children, theme }: { children: any; theme?: IReqoreTheme }) => {
   const _theme: IReqoreTheme = useContext(ThemeContext);
 
-  return (
-    <ThemeProvider theme={theme || _theme}>
-      <>{children}</>
-    </ThemeProvider>
-  );
+  return <ThemeProvider theme={theme || _theme}>{children}</ThemeProvider>;
 };
 
 export default ReqoreThemeProvider;

package/src/context/PopoverContext.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext } from 'use-context-selector';
 import { IPopoverData } from '../containers/PopoverProvider';
 
 export default createContext<{

package/src/context/ReqoreContext.tsx

@@ -1,4 +1,5 @@
-import { createContext } from 'react';
+import { createContext } from 'use-context-selector';
+import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
 import { IReqoreConfirmationModal, IReqoreNotificationData } from '../containers/ReqoreProvider';
 import { IReqoreOptions } from '../containers/UIProvider';
 
@@ -15,6 +16,7 @@ export interface IReqoreContext {
   readonly tooltips?: IReqoreOptions['tooltips'];
   readonly closePopoversOnEscPress?: boolean;
   readonly latestZIndex?: number;
+  theme: IReqoreTheme;
 }
 
 export default createContext<IReqoreContext>({
@@ -27,4 +29,5 @@ export default createContext<IReqoreContext>({
     dialogs: true,
   },
   closePopoversOnEscPress: true,
+  theme: DEFAULT_THEME,
 });

package/src/context/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext } from 'use-context-selector';
 import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
 
 export default createContext<IReqoreTheme>(DEFAULT_THEME);

package/src/hooks/useLatestZIndex.ts

@@ -1,8 +1,10 @@
-import { useContext, useMemo } from 'react';
-import { ReqoreContext } from '..';
+import { useMemo } from 'react';
+import { useReqoreProperty } from './useReqoreContext';
 
 const useLatestZIndex = (): number => {
-  const { getAndIncreaseZIndex, latestZIndex } = useContext(ReqoreContext);
+  const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
+  const latestZIndex = useReqoreProperty('latestZIndex');
+
   const zIndex = useMemo(() => getAndIncreaseZIndex(), [latestZIndex]);
 
   return zIndex;

package/src/hooks/usePopover.tsx

@@ -1,7 +1,9 @@
 import { Placement } from '@popperjs/core';
-import { MutableRefObject, useContext, useEffect, useMemo, useRef } from 'react';
+import { MutableRefObject, useEffect, useMemo, useRef } from 'react';
 import { useUnmount, useUpdateEffect } from 'react-use';
 import shortid from 'shortid';
+import { useContext } from 'use-context-selector';
+import { useReqoreProperty } from '..';
 import { IPopoverData } from '../containers/PopoverProvider';
 import PopoverContext from '../context/PopoverContext';
 import {
@@ -11,7 +13,6 @@ import {
   IWithReqoreMinimal,
 } from '../types/global';
 import { IReqoreIconName } from '../types/icons';
-import { useReqore } from './useReqore';
 
 const startEvents = {
   hover: 'mouseenter',
@@ -78,7 +79,7 @@ const usePopover = ({
 }: IPopoverOptions): IPopoverControls => {
   const { addPopover, removePopover, updatePopover, popovers, isPopoverOpen } =
     useContext(PopoverContext);
-  const { tooltips } = useReqore();
+  const tooltips = useReqoreProperty('tooltips');
   const { current }: MutableRefObject<string> = useRef(shortid.generate());
   let { current: timeout }: MutableRefObject<any> = useRef(0);
 

package/src/hooks/useReqore.ts

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext } from 'use-context-selector';
 import ReqoreContext, { IReqoreContext } from '../context/ReqoreContext';
 
 export const useReqore = (): IReqoreContext => {

package/src/hooks/useReqoreContext.ts

@@ -0,0 +1,16 @@
+import { useContextSelector } from 'use-context-selector';
+import ReqoreContext, { IReqoreContext } from '../context/ReqoreContext';
+
+export const useReqoreProperty = <T extends keyof IReqoreContext>(
+  property: T
+): IReqoreContext[T] => {
+  const contextProperty = useContextSelector(ReqoreContext, (value) => {
+    if (!(property in value)) {
+      throw new Error(`Reqore context property ${property} not found`);
+    }
+
+    return value[property];
+  });
+
+  return contextProperty;
+};

package/src/hooks/useReqoreEffect.ts

@@ -1,18 +1,18 @@
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import {
   IReqoreEffect,
   TReqoreEffectGradientAnimationTrigger,
   TReqoreHexColor,
 } from '../components/Effect';
 import { IReqoreTheme } from '../constants/theme';
-import ThemeContext from '../context/ThemeContext';
+import { useReqoreTheme } from './useTheme';
 
 export const useReqoreEffect = (
   component: 'buttons',
   theme: IReqoreTheme,
   effect?: IReqoreEffect
 ): IReqoreEffect => {
-  let _theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+  let _theme: IReqoreTheme = useReqoreTheme();
 
   // Return the effect if the component is not defined in the theme
   if (!theme[component]) {

package/src/hooks/useTheme.ts

@@ -1,9 +1,9 @@
 import { cloneDeep } from 'lodash';
-import { useContext } from 'react';
+import { useMemo } from 'react';
 import { TReqoreEffectColor } from '../components/Effect';
 import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
-import ThemeContext from '../context/ThemeContext';
 import { getColorFromMaybeString, mergeThemes } from '../helpers/colors';
+import { useReqoreProperty } from './useReqoreContext';
 
 export interface IReqoreCustomTheme extends Partial<Omit<IReqoreTheme, 'main' | 'text'>> {
   main?: TReqoreEffectColor;
@@ -20,25 +20,29 @@ export const useReqoreTheme = (
   intent?: TReqoreIntent,
   intentsKey: 'intents' | 'notifications' = 'intents'
 ): IReqoreTheme => {
-  const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+  const theme: IReqoreTheme = useReqoreProperty('theme');
 
-  if (!element) {
-    return theme;
-  }
+  const finalTheme = useMemo(() => {
+    if (!element) {
+      return theme;
+    }
 
-  let _customTheme: IReqoreCustomTheme = cloneDeep(customTheme);
+    let _customTheme: IReqoreCustomTheme = cloneDeep(customTheme);
 
-  if (_customTheme.main) {
-    _customTheme.main = getColorFromMaybeString(theme, customTheme.main);
-  }
+    if (_customTheme.main) {
+      _customTheme.main = getColorFromMaybeString(theme, customTheme.main);
+    }
 
-  if (_customTheme.text?.color) {
-    _customTheme.text.color = getColorFromMaybeString(theme, customTheme.text.color);
-  }
+    if (_customTheme.text?.color) {
+      _customTheme.text.color = getColorFromMaybeString(theme, customTheme.text.color);
+    }
 
-  if (element === 'main' && intent) {
-    _customTheme.main = theme[intentsKey][intent];
-  }
+    if (element === 'main' && intent) {
+      _customTheme.main = theme[intentsKey][intent];
+    }
 
-  return mergeThemes(element, theme, _customTheme) as IReqoreTheme;
+    return mergeThemes(element, theme, _customTheme) as IReqoreTheme;
+  }, [JSON.stringify(theme), element, JSON.stringify(customTheme), intent, intentsKey]);
+
+  return finalTheme;
 };

package/src/index.tsx

@@ -43,6 +43,7 @@ export { default as ReqorePopover } from './components/Popover';
 export { default as ReqoreRadioGroup } from './components/RadioGroup';
 export { default as ReqoreSidebar } from './components/Sidebar';
 export { ReqoreHorizontalSpacer, ReqoreSpacer, ReqoreVerticalSpacer } from './components/Spacer';
+export { ReqoreSpinner } from './components/Spinner';
 export { default as ReqoreTable } from './components/Table';
 export { default as ReqoreTabs } from './components/Tabs';
 export { default as ReqoreTabsContent } from './components/Tabs/content';
@@ -62,4 +63,5 @@ 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 { useReqoreProperty } from './hooks/useReqoreContext';
 export { useReqoreTheme } from './hooks/useTheme';

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

@@ -23,6 +23,13 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
       <ReqoreControlGroup size={buttonProps.size} wrap>
         <ReqoreButton {...buttonProps} icon='BankFill' rightIcon={null} />
         <ReqoreButton {...buttonProps} />
+        <ReqoreButton
+          {...buttonProps}
+          icon='BankFill'
+          rightIcon={null}
+          textAlign='center'
+          style={{ width: '100px' }}
+        />
         <ReqoreButton {...buttonProps}>Default</ReqoreButton>
         <ReqoreButton {...buttonProps} wrap maxWidth='150px'>
           Default wrapped button with long text

package/src/stories/Collection/Collection.stories.tsx

@@ -4,7 +4,7 @@ import { IReqoreCollectionProps, ReqoreCollection } from '../../components/Colle
 import { IReqoreColumnsProps } from '../../components/Columns';
 import items from '../../mock/collectionData';
 import data from '../../mock/data.json';
-import { argManager, IntentArg, SizeArg } from '../utils/args';
+import { IntentArg, SizeArg, argManager } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
   multipleColumns?: boolean;
@@ -177,8 +177,11 @@ FilteringSearchingPaging.args = {
       clearOnFocus: true,
     },
   },
-  inputPlaceholder(items) {
-    return `Start typing to search in ${items.length} items`;
+  displayButtonProps: {
+    fixed: false,
+  },
+  sortButtonProps: {
+    fixed: false,
   },
   size: 'big',
   padded: false,

package/src/stories/Drawer/Drawer.stories.tsx

@@ -1,15 +1,14 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { noop } from 'lodash';
-import { useContext } from 'react';
 import { IReqoreDrawerProps, ReqoreDrawer } from '../../components/Drawer';
 import { IReqoreInputProps } from '../../components/Input';
 import {
   ReqoreButton,
-  ReqoreContext,
   ReqoreInput,
   ReqorePanel,
   ReqoreTabs,
   ReqoreTabsContent,
+  useReqoreProperty,
 } from '../../index';
 import { FlatArg, IntentArg, argManager } from '../utils/args';
 
@@ -82,7 +81,8 @@ export default {
 } as Meta;
 
 const Template: Story<IReqoreDrawerProps> = (args: IReqoreDrawerProps) => {
-  const { confirmAction } = useContext(ReqoreContext);
+  const confirmAction = useReqoreProperty('confirmAction');
+
   return (
     <>
       <ReqorePanel label='Just some background text' padded>
@@ -147,6 +147,7 @@ const Template: Story<IReqoreDrawerProps> = (args: IReqoreDrawerProps) => {
             ],
           },
           {
+            fixed: true,
             group: [
               { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
               { icon: 'CopperCoinFill', intent: 'danger' },

package/src/stories/Modal/Modal.stories.tsx

@@ -1,10 +1,9 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { noop } from 'lodash';
-import { useContext } from 'react';
 import { useMount } from 'react-use';
 import { IReqoreModalProps } from '../../components/Modal';
-import { ReqoreContext, ReqoreModal, ReqorePanel } from '../../index';
-import { argManager, FlatArg, IntentArg } from '../utils/args';
+import { ReqoreModal, ReqorePanel, useReqoreProperty } from '../../index';
+import { FlatArg, IntentArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreModalProps>();
 
@@ -53,7 +52,7 @@ export default {
 } as Meta<IReqoreModalProps>;
 
 const Template: Story<IReqoreModalProps & { confirm?: boolean }> = (args) => {
-  const { confirmAction } = useContext(ReqoreContext);
+  const confirmAction = useReqoreProperty('confirmAction');
 
   useMount(() => {
     if (args.confirm) {

package/src/stories/Notifications/Interactive.stories.tsx

@@ -1,10 +1,9 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
-import { useContext } from 'react';
 import ReqoreNotification, {
   IReqoreNotificationProps,
 } from '../../components/Notifications/notification';
 import { IReqoreUIProviderProps } from '../../containers/UIProvider';
-import { ReqoreContext, ReqoreUIProvider } from '../../index';
+import { ReqoreUIProvider, useReqoreProperty } from '../../index';
 
 export default {
   title: 'Components/Notifications/Interactive',
@@ -12,7 +11,7 @@ export default {
 } as Meta;
 
 const AddingButton = ({ id, onClick, onClose, onFinish }: any) => {
-  const { addNotification } = useContext(ReqoreContext);
+  const addNotification = useReqoreProperty('addNotification');
 
   return (
     <button
@@ -35,7 +34,7 @@ const AddingButton = ({ id, onClick, onClose, onFinish }: any) => {
 };
 
 const UpdatingButton = ({ id }) => {
-  const { addNotification } = useContext(ReqoreContext);
+  const addNotification = useReqoreProperty('addNotification');
 
   return (
     <button

package/src/stories/Panel/Panel.stories.tsx

@@ -173,6 +173,7 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
           ],
         },
         {
+          fixed: true,
           group: [
             { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
             { icon: 'CopperCoinFill', intent: 'danger' },

package/src/stories/Spinner/Spinner.stories.tsx

@@ -35,8 +35,13 @@ const Template: Story<IReqoreSpinnerProps> = (args) => {
         {...args}
         type={4}
         iconColor='#f21616'
-        labelEffect={{ gradient: { colors: 'warning' } }}
-        size='big'
+        labelEffect={{
+          gradient: { colors: 'warning' },
+          uppercase: true,
+          spaced: 2,
+          textSize: 'small',
+        }}
+        size='huge'
       >
         {args.children}
       </ReqoreSpinner>