@qoretechnologies/reqore 0.31.2 → 0.32.2

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

@@ -62,4 +62,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

@@ -3,6 +3,7 @@ import { ReqoreButton, ReqoreControlGroup } from '../..';
 import { IReqoreCollectionProps, ReqoreCollection } from '../../components/Collection';
 import { IReqoreColumnsProps } from '../../components/Columns';
 import items from '../../mock/collectionData';
+import data from '../../mock/data.json';
 import { IntentArg, SizeArg, argManager } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
@@ -58,7 +59,7 @@ export default {
       description: 'If true, the collection will fill the parent',
     }),
     ...createArg('label', {
-      defaultValue: 'Collection of items',
+      defaultValue: undefined,
       type: 'string',
       name: 'Label',
       description: 'Label of the collection',
@@ -70,20 +71,17 @@ export default {
 } as Meta<IReqoreCollectionProps>;
 
 const Template: Story<IReqoreCollectionProps> = (args) => {
-  return (
-    <ReqoreCollection
-      {...args}
-      badge={10}
-      selectedIcon='CheckLine'
-      actions={[{ label: 'Custom action', icon: 'Home7Line' }, { actions: [{ value: 'Test' }] }]}
-    />
-  );
+  return <ReqoreCollection {...args} selectedIcon='CheckLine' />;
 };
 
 export const Basic = Template.bind({});
 Basic.args = {
   label: 'Config Items',
   items,
+  actions: [
+    { label: 'Custom action', icon: 'Home7Line', fixed: true },
+    { actions: [{ value: 'Test' }] },
+  ],
 };
 
 export const WithHeight = Template.bind({});
@@ -91,6 +89,10 @@ WithHeight.args = {
   label: 'Collection of items',
   height: '600px',
   items,
+  actions: [
+    { label: 'Custom action', icon: 'Home7Line', fixed: true },
+    { actions: [{ value: 'Test' }] },
+  ],
 };
 
 export const Stacked = Template.bind({});
@@ -98,6 +100,10 @@ Stacked.args = {
   label: 'Collection of items',
   stacked: true,
   items,
+  actions: [
+    { label: 'Custom action', icon: 'Home7Line', fixed: true },
+    { actions: [{ value: 'Test' }] },
+  ],
 };
 
 export const Fill = Template.bind({});
@@ -105,6 +111,10 @@ Fill.args = {
   label: 'Collection of items',
   fill: true,
   items,
+  actions: [
+    { label: 'Custom action', icon: 'Home7Line', fixed: true },
+    { actions: [{ value: 'Test' }] },
+  ],
 };
 
 export const SelectedFirst = Template.bind({});
@@ -157,3 +167,40 @@ ChildrenBeforeAndAfter.args = {
     </ReqoreControlGroup>
   ),
 };
+
+export const FilteringSearchingPaging = Template.bind({});
+FilteringSearchingPaging.args = {
+  inputProps: {
+    focusRules: {
+      type: 'keypress',
+      shortcut: 'letters',
+      clearOnFocus: true,
+    },
+  },
+  displayButtonProps: {
+    fixed: false,
+  },
+  sortButtonProps: {
+    fixed: false,
+  },
+  size: 'big',
+  padded: false,
+  fill: true,
+  items: data.slice(0, 100).map((datum) => ({
+    label: `${datum.firstName} ${datum.lastName}`,
+    badge: datum.id,
+    size: 'small',
+    expandable: true,
+    content: datum.address,
+    tags: [
+      {
+        labelKey: 'Age',
+        label: datum.age,
+      },
+      {
+        labelKey: 'Occupation',
+        label: datum.occupation,
+      },
+    ],
+  })),
+} as IReqoreCollectionProps;

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

@@ -29,7 +29,13 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
     <>
       <ReqoreControlGroup wrap>
         <ReqoreInput {...args} placeholder='Reqore Input' onChange={handleValueChange} />
-        <ReqoreInput {...args} placeholder='Minimal Input' minimal onChange={handleValueChange} />
+        <ReqoreInput
+          {...args}
+          placeholder='Minimal Input'
+          minimal
+          onChange={handleValueChange}
+          rightIcon='ClipboardLine'
+        />
         <ReqoreInput
           {...args}
           placeholder='Flat Input'
@@ -44,11 +50,22 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
           onClearClick={handleValueClear}
           onChange={handleValueChange}
         />
+        <ReqoreInput
+          {...args}
+          iconColor='pending:lighten:2'
+          placeholder='Clearable Input w/ icon'
+          onClearClick={handleValueClear}
+          onChange={handleValueChange}
+          rightIcon='EraserFill'
+          rightIconColor='#8727b7'
+        />
         <ReqoreInput {...args} placeholder='Disabled Input' disabled onChange={handleValueChange} />
         <ReqoreInput
           {...args}
           placeholder='Read Only Input'
           readOnly
+          rightIcon='Bus2Fill'
+          rightIconColor='info'
           onChange={handleValueChange}
         />
       </ReqoreControlGroup>
@@ -73,6 +90,8 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
           flat
           tooltip="I'm a tooltip"
           onChange={handleValueChange}
+          rightIcon='DragMoveLine'
+          rightIconColor='#eb0e8c'
           value={value}
         />
         <ReqoreInput
@@ -84,18 +103,21 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
         />
         <ReqoreInput
           {...args}
-          placeholder='Disabled Input'
-          disabled
-          onChange={handleValueChange}
+          placeholder='Clearable Input w/ icon'
+          onClearClick={handleValueClear}
           value={value}
+          rightIcon='FilePptFill'
+          rightIconColor='#508a90'
+          onChange={handleValueChange}
         />
         <ReqoreInput
           {...args}
-          placeholder='Read Only Input'
-          readOnly
+          placeholder='Disabled Input'
+          disabled
           onChange={handleValueChange}
           value={value}
         />
+        <ReqoreInput {...args} placeholder='Read Only Input' readOnly value={value} />
       </ReqoreControlGroup>
       <br />
       <ReqoreControlGroup fluid>
@@ -104,6 +126,7 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
           placeholder='Fluid Input'
           onChange={handleValueChange}
           value={value}
+          focusRules={{ type: 'keypress', shortcut: 'k' }}
         />
       </ReqoreControlGroup>
     </>

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

@@ -3,7 +3,7 @@ import { noop } from 'lodash';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../../components/Panel';
 import { ReqoreVerticalSpacer } from '../../components/Spacer';
-import { FlatArg, IconArg, IntentArg, SizeArg, argManager } from '../utils/args';
+import { argManager, FlatArg, IconArg, IntentArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
 
@@ -168,10 +168,12 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
             {
               icon: 'FullscreenExitLine',
               customTheme: { main: '#a40a62' },
+              fixed: true,
             },
           ],
         },
         {
+          fixed: true,
           group: [
             { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
             { icon: 'CopperCoinFill', intent: 'danger' },
@@ -199,7 +201,7 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
           position: 'left',
           intent: 'success',
           group: [
-            { label: 'Test 1', icon: '24HoursFill' },
+            { label: 'Test 1', icon: '24HoursFill', fixed: true },
             { label: 'Test 2', icon: '24HoursFill' },
           ],
         },

package/src/stories/TextArea/TextArea.stories.tsx

@@ -137,6 +137,7 @@ const Template: Story<IReqoreTextareaProps> = (args) => {
           onClearClick={handleValueClear}
           value={value}
           fluid
+          focusRules={{ type: 'keypress', shortcut: 'letters', clearOnFocus: true }}
         />
       </ReqoreControlGroup>
     </>

package/src/styles.ts

@@ -51,6 +51,5 @@ export const DisabledElement = css`
 `;
 
 export const ReadOnlyElement = css`
-  pointer-events: none;
   cursor: not-allowed;
 `;