@qoretechnologies/reqore 0.28.5 → 0.29.0

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 { MinimalArg, SizeArg, argManager } from '../utils/args';
+import { argManager, GapSizeArg, MinimalArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
 
@@ -10,6 +10,7 @@ export default {
   title: 'Components/Control Group',
   argTypes: {
     ...SizeArg,
+    ...GapSizeArg,
     ...MinimalArg(),
     ...createArg('stack', {
       name: 'Stack',
@@ -38,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>
@@ -59,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,
@@ -68,3 +74,8 @@ export const Stacked = Template.bind({});
 Stacked.args = {
   stack: true,
 };
+
+export const BigGapSize = Template.bind({});
+BigGapSize.args = {
+  gapSize: 'big',
+};

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

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreIconProps } from '../../components/Icon';
-import { ReqoreIcon } from '../../index';
+import { ReqoreIcon, ReqorePanel } from '../../index';
 
 export default {
   title: 'Components/Icon',
@@ -9,27 +9,104 @@ export default {
 export const Icon: Story<IReqoreIconProps> = () => {
   return (
     <>
-      <ReqoreIcon icon='AccountCircleLine' size='12px' />
-      <ReqoreIcon icon='4KFill' size='14px' />
-      <ReqoreIcon icon='ArrowLeftCircleFill' intent='success' />
-      <ReqoreIcon icon='HotelFill' size='18px' />
-      <ReqoreIcon icon='SignalTowerFill' size='20px' color='#ff0000' />
-      <h4> Margined </h4>
-      <ReqoreIcon icon='AccountCircleLine' />
-      No Margin
-      <div>
-        <ReqoreIcon icon='4KFill' margin='right' />
-        Right Margin
-      </div>
-      <div>
-        Left Margin
-        <ReqoreIcon icon='ArrowLeftCircleFill' margin='left' />
-      </div>
-      <div>
-        Both
-        <ReqoreIcon icon='HotelFill' margin='both' />
-        Sides
-      </div>
+      <ReqorePanel label='Basic' flat minimal>
+        <ReqoreIcon icon='AccountCircleLine' size='12px' margin='both' />
+        <ReqoreIcon icon='4KFill' size='14px' margin='both' />
+        <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='#700c57'
+          contrast={150}
+          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}
+          margin='both'
+        />
+      </ReqorePanel>
+      <br />
+      <ReqorePanel label='Image' flat minimal>
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='20px'
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='40px'
+          rounded
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='30px'
+          sepia
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='40px'
+          blur={3}
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='70px'
+          contrast={150}
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='40px'
+          brightness={150}
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='40px'
+          opacity={0.5}
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='40px'
+          invert
+          margin='both'
+        />
+      </ReqorePanel>
+      <br />
+      <ReqorePanel label='Margined' flat minimal>
+        <ReqoreIcon icon='AccountCircleLine' />
+        No Margin
+        <div>
+          <ReqoreIcon icon='4KFill' margin='right' />
+          Right Margin
+        </div>
+        <div>
+          Left Margin
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='20px'
+            rounded
+            margin='left'
+          />
+        </div>
+        <div>
+          Both
+          <ReqoreIcon icon='HotelFill' margin='both' />
+          Sides
+        </div>
+      </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

@@ -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/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 { argManager, FlatArg, IntentArg, SizeArg } from '../utils/args';
+import { FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreMessageProps>();
 
@@ -52,6 +52,12 @@ Minimal.args = {
   intent: 'danger',
 };
 
+export const Opaque: Story<IReqoreMessageProps> = Template.bind({});
+Opaque.args = {
+  opaque: true,
+  intent: 'info',
+};
+
 export const CustomTheme: Story<IReqoreMessageProps> = Template.bind({});
 CustomTheme.args = {
   customTheme: {

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

@@ -162,9 +162,9 @@ NoLabel.args = {
   label: undefined,
 };
 
-export const Opaque: Story<IReqorePanelProps> = Template.bind({});
-Opaque.args = {
-  opacity: 0,
+export const Transparent: Story<IReqorePanelProps> = Template.bind({});
+Transparent.args = {
+  transparent: true,
 };
 
 export const Minimal: Story<IReqorePanelProps> = Template.bind({});

package/src/stories/Popover/Popover.stories.tsx

@@ -2,18 +2,25 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import { IReqorePopoverProps } from '../../components/Popover';
 import usePopover from '../../hooks/usePopover';
-import { ReqoreButton, ReqoreMessage, ReqorePanel, ReqorePopover } from '../../index';
-import { argManager } from '../utils/args';
+import {
+  ReqoreButton,
+  ReqoreControlGroup,
+  ReqoreMessage,
+  ReqorePanel,
+  ReqorePopover,
+  ReqoreSpacer,
+} from '../../index';
+import { argManager, FlatArg } from '../utils/args';
 
 const { createArg } = argManager<IReqorePopoverProps>();
 
 export default {
   title: 'Components/Popover',
   argTypes: {
-    ...createArg('opaque', {
+    ...createArg('transparent', {
       defaultValue: false,
-      name: 'Opaque',
-      description: 'Makes the popover opaque',
+      name: 'Transparent',
+      description: 'Makes the popover transparent',
       type: 'boolean',
     }),
     ...createArg('blur', {
@@ -40,6 +47,10 @@ export default {
       description: 'The content of the popover',
       type: 'string',
     }),
+    ...FlatArg,
+  },
+  args: {
+    flat: true,
   },
 } as Meta<IReqorePopoverProps>;
 
@@ -95,23 +106,91 @@ const HoverStayButton = (args: any) => {
 
 const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
   return (
-    <>
+    <ReqoreControlGroup vertical gapSize='huge'>
       <HoverButton {...args} />
-      <br />
       <ClickButton {...args} />
-      <br />
       <DelayButton {...args} />
-      <br />
       <HoverStayButton {...args} />
-      <br />
-      <ReqorePopover {...args} component={ReqoreButton} isReqoreComponent openOnMount>
+      {typeof args.content === 'string' && (
+        <>
+          <ReqoreSpacer height={100} />
+          <ReqorePopover
+            {...args}
+            component={ReqoreButton}
+            isReqoreComponent
+            openOnMount
+            title='I opened on my own'
+            icon='CactusFill'
+            intent='success'
+            placement='top'
+          >
+            Full popover
+          </ReqorePopover>
+          <ReqoreControlGroup>
+            <ReqoreSpacer width={200} />
+            <ReqorePopover
+              {...args}
+              component={ReqoreButton}
+              isReqoreComponent
+              openOnMount
+              intent='info'
+              minimal
+              placement='left'
+            >
+              Minimal popover
+            </ReqorePopover>
+          </ReqoreControlGroup>
+          <ReqorePopover
+            {...args}
+            component={ReqoreButton}
+            isReqoreComponent
+            openOnMount
+            icon='CactusFill'
+            effect={{
+              gradient: {
+                colors: {
+                  0: 'warning',
+                  100: 'warning:darken:2',
+                },
+              },
+              spaced: 2,
+              uppercase: true,
+              weight: 'thick',
+            }}
+            placement='right'
+          >
+            Effect popover
+          </ReqorePopover>
+          <ReqorePopover
+            {...args}
+            component={ReqoreButton}
+            isReqoreComponent
+            openOnMount
+            transparent
+            placement='right'
+          >
+            Transparent popover
+          </ReqorePopover>
+        </>
+      )}
+      <ReqorePopover
+        {...args}
+        component={ReqoreButton}
+        isReqoreComponent
+        openOnMount
+        placement='bottom'
+      >
         Auto open popover
       </ReqorePopover>
-    </>
+    </ReqoreControlGroup>
   );
 };
 
 export const Basic = Template.bind({});
+export const NotFlat = Template.bind({});
+NotFlat.args = {
+  flat: false,
+};
 export const CustomContent = Template.bind({});
 CustomContent.args = {
   content: (

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

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import ReqoreRadioGroup, { IReqoreRadioGroupProps } from '../../components/RadioGroup';
-import { argManager, DisabledArg } from '../utils/args';
+import { DisabledArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreRadioGroupProps>();
 
@@ -14,6 +14,7 @@ export default {
       name: 'As Switch',
       description: 'If the radio group should be rendered as a switch',
     }),
+    ...SizeArg,
     ...DisabledArg,
   },
 } as Meta<IReqoreRadioGroupProps>;
@@ -34,8 +35,30 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
           value: 'opt2',
         },
         {
-          label: 'Option 3',
+          divider: true,
+          label: 'Divider',
+        },
+        {
+          label: 'Beautiful option 3 with gradient effect',
           value: 'opt3',
+          effect: {
+            gradient: {
+              colors: {
+                0: 'info',
+                100: 'info:lighten:3',
+              },
+            },
+            weight: 'thick',
+          },
+        },
+        {
+          label: 'Custom Image Option',
+          value: 'customOpt',
+          image:
+            'https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4',
+        },
+        {
+          divider: true,
         },
         {
           label: 'Read Only Option',
@@ -55,6 +78,10 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
 };
 
 export const Basic = Template.bind({});
+export const Horizontal = Template.bind({});
+Horizontal.args = {
+  vertical: false,
+};
 export const Switch = Template.bind({});
 Switch.args = {
   asSwitch: true,

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 { SizeArg, argManager } from '../utils/args';
+import { argManager, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTagGroup & IReqoreTagProps>();
 
@@ -58,9 +58,16 @@ export default {
 
 const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }) => {
   return (
-    <ReqoreTagGroup columns={columns} size={args.size}>
+    <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}
@@ -185,6 +192,8 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
 };
 
 export const Basic = Template.bind({});
+export const BigGapSize = Template.bind({});
+BigGapSize.args = { gapSize: 'big' };
 export const Badge = Template.bind({});
 Badge.args = { badge: true };