@qoretechnologies/reqore 0.28.6 → 0.29.1

package/src/stories/Icon/Icon.stories.tsx

@@ -15,22 +15,46 @@ export const Icon: Story<IReqoreIconProps> = () => {
         <ReqoreIcon icon='ArrowLeftCircleFill' intent='success' margin='both' />
         <ReqoreIcon icon='HotelFill' size='18px' margin='both' />
         <ReqoreIcon icon='SignalTowerFill' size='20px' color='#ff0000' margin='both' />
-        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#291133' sepia margin='both' />
-        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#0c7052' blur={1} margin='both' />
+        <ReqoreIcon
+          icon='SignalTowerFill'
+          size='20px'
+          color='#291133'
+          effect={{ sepia: true }}
+          margin='both'
+        />
+        <ReqoreIcon
+          icon='SignalTowerFill'
+          size='20px'
+          color='#0c7052'
+          effect={{ blur: 1 }}
+          margin='both'
+        />
         <ReqoreIcon
           icon='SignalTowerFill'
           size='20px'
           color='#700c57'
-          contrast={150}
+          effect={{ contrast: 150 }}
+          margin='both'
+        />
+        <ReqoreIcon
+          icon='SignalTowerFill'
+          size='20px'
+          color='#d5be0f'
+          effect={{ grayscale: true }}
+          margin='both'
+        />
+        <ReqoreIcon
+          icon='SignalTowerFill'
+          size='20px'
+          color='#0f5bd5'
+          effect={{ invert: true }}
           margin='both'
         />
-        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#d5be0f' grayscale margin='both' />
-        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#0f5bd5' invert margin='both' />
         <ReqoreIcon
           icon='SignalTowerFill'
           size='20px'
           color='#ffffff'
-          opacity={0.5}
+          effect={{ opacity: 0.5 }}
           margin='both'
         />
       </ReqorePanel>
@@ -50,37 +74,43 @@ export const Icon: Story<IReqoreIconProps> = () => {
         <ReqoreIcon
           image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
           size='30px'
-          sepia
+          effect={{ sepia: true }}
           margin='both'
         />
         <ReqoreIcon
           image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
           size='40px'
-          blur={3}
+          effect={{ grayscale: true }}
           margin='both'
         />
         <ReqoreIcon
           image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
           size='70px'
-          contrast={150}
+          effect={{ blur: 1 }}
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='40px'
+          effect={{ contrast: 150 }}
           margin='both'
         />
         <ReqoreIcon
           image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
           size='40px'
-          brightness={150}
+          effect={{ invert: true }}
           margin='both'
         />
         <ReqoreIcon
           image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
           size='40px'
-          opacity={0.5}
+          effect={{ opacity: 0.5 }}
           margin='both'
         />
         <ReqoreIcon
           image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
           size='40px'
-          invert
+          effect={{ saturate: 150 }}
           margin='both'
         />
       </ReqorePanel>

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

@@ -113,6 +113,7 @@ const Template: Story<IReqoreMenuProps> = (args) => {
       <ReqoreMenuDivider label='Divider' />
       <ReqorePopover
         component={ReqoreMenuItem}
+        flat={args.flat}
         componentProps={
           {
             icon: 'EmotionUnhappyLine',
@@ -154,7 +155,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,106 @@
+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 { IReqoreIconName } from '../../types/icons';
+import { FlatArg, IconArg, MinimalArg, SizeArg, argManager } 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',
+    }),
+    ...IconArg('onItemClickIcon', 'Clickable item right icon', null),
+  },
+} 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
+      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 Clickable = Template.bind({});
+Clickable.args = {
+  onItemClick: (item) => console.log('onItemClick', item),
+  onItemClickIcon: 'EditLine' as IReqoreIconName,
+};
+
+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/Popover/Popover.stories.tsx

@@ -10,7 +10,7 @@ import {
   ReqorePopover,
   ReqoreSpacer,
 } from '../../index';
-import { argManager, FlatArg } from '../utils/args';
+import { FlatArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePopoverProps>();
 
@@ -178,10 +178,27 @@ const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
         component={ReqoreButton}
         isReqoreComponent
         openOnMount
-        placement='bottom'
+        placement='right'
       >
         Auto open popover
       </ReqorePopover>
+      <ReqorePopover
+        {...args}
+        component={ReqoreButton}
+        isReqoreComponent
+        openOnMount
+        placement='bottom'
+        content={
+          <ReqorePanel label='This is a test' flat>
+            <ReqoreMessage flat>
+              In to am attended desirous raptures declared diverted confined at. Collected instantly
+              remaining up certainly to necessary as. Over walk dull into
+            </ReqoreMessage>
+          </ReqorePanel>
+        }
+      >
+        With Custom Content
+      </ReqorePopover>
     </ReqoreControlGroup>
   );
 };

package/src/stories/RadioGroup/RadioGroup.stories.tsx

@@ -33,6 +33,43 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
         {
           label: 'Option 2',
           value: 'opt2',
+          onText: 1,
+          offText: 0,
+        },
+        {
+          label: 'Danger option',
+          value: 'danger',
+          intent: 'danger',
+        },
+        {
+          label: 'Effect option',
+          labelPosition: 'left',
+          value: 'effect',
+          effect: {
+            gradient: {
+              colors: {
+                0: 'info',
+                100: 'success',
+              },
+            },
+          },
+        },
+        {
+          label: 'Text effect & custom theme option',
+          value: 'textEffect',
+          customTheme: {
+            main: '#110134',
+          },
+          onText: 'On',
+          offText: 'Off',
+          switchTextEffect: {
+            gradient: {
+              colors: {
+                0: 'warning',
+                100: 'pending',
+              },
+            },
+          },
         },
         {
           divider: true,
@@ -41,7 +78,7 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
         {
           label: 'Beautiful option 3 with gradient effect',
           value: 'opt3',
-          effect: {
+          labelEffect: {
             gradient: {
               colors: {
                 0: 'info',
@@ -51,6 +88,12 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
             weight: 'thick',
           },
         },
+        {
+          label: 'Custom Icons Option',
+          value: 'customIconsOpt',
+          checkedIcon: 'EmotionHappyLine',
+          uncheckedIcon: 'EmotionSadLine',
+        },
         {
           label: 'Custom Image Option',
           value: 'customOpt',
@@ -86,3 +129,10 @@ export const Switch = Template.bind({});
 Switch.args = {
   asSwitch: true,
 };
+
+export const WithTexts = Template.bind({});
+WithTexts.args = {
+  asSwitch: true,
+  onText: 'True',
+  offText: 'False and wrong',
+};

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

@@ -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>();
 
@@ -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}
@@ -188,7 +195,7 @@ export const Basic = Template.bind({});
 export const BigGapSize = Template.bind({});
 BigGapSize.args = { gapSize: 'big' };
 export const Badge = Template.bind({});
-Badge.args = { badge: true };
+Badge.args = { asBadge: true };
 
 export const Effect = Template.bind({});
 Effect.args = {

package/src/stories/utils/args.ts

@@ -57,7 +57,7 @@ export const IconArg = (
   defaultValue?: IReqoreIconName
 ) =>
   argManager<any>().createArg(iconKeyName, {
-    defaultValue: defaultValue || '24HoursFill',
+    defaultValue: defaultValue || (defaultValue === null ? null : '24HoursFill'),
     name: name || 'Icon',
     description: 'The icon name used',
     control: {