@qoretechnologies/reqore 0.30.8 → 0.30.10

package/src/stories/Columns/Columns.stories.tsx

@@ -1,6 +1,14 @@
 import { Meta, Story } from '@storybook/react';
 import { IReqoreColumnsProps } from '../../components/Columns';
-import { ReqoreColumn, ReqoreColumns } from '../../index';
+import {
+  ReqoreButton,
+  ReqoreColumn,
+  ReqoreColumns,
+  ReqoreControlGroup,
+  ReqoreH2,
+  ReqoreInput,
+  ReqoreVerticalSpacer,
+} from '../../index';
 import { argManager } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
@@ -43,20 +51,74 @@ export default {
 
 const Template: Story<IColumnsStoryArgs> = (args) => {
   return (
-    <ReqoreColumns {...args}>
-      <ReqoreColumn {...args} style={{ border: '1px solid white', padding: '10px' }}>
-        1st column
+    <ReqoreColumns {...args} columnsGap='10px'>
+      <ReqoreColumn
+        {...args}
+        style={{ border: '1px solid white', padding: '10px' }}
+        flexFlow='column'
+      >
+        <ReqoreH2>Left Column</ReqoreH2>
+        <ReqoreVerticalSpacer height={20} lineSize='tiny' />
+        <ReqoreControlGroup fluid>
+          <ReqoreInput placeholder='Filter' />
+        </ReqoreControlGroup>
+        <ReqoreVerticalSpacer height={10} />
+        <ReqoreControlGroup vertical fluid>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+        </ReqoreControlGroup>
       </ReqoreColumn>
-      <ReqoreColumn {...args} style={{ border: '1px solid white', padding: '10px' }}>
-        2nd column
+      <ReqoreColumn
+        {...args}
+        style={{ border: '1px solid white', padding: '10px' }}
+        flexFlow='column'
+      >
+        <ReqoreH2>Right Column</ReqoreH2>
+        <ReqoreVerticalSpacer height={20} lineSize='tiny' />
+        <ReqoreControlGroup fluid>
+          <ReqoreInput placeholder='Filter' />
+        </ReqoreControlGroup>
+        <ReqoreVerticalSpacer height={10} />
+        <ReqoreControlGroup vertical fluid>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+        </ReqoreControlGroup>
       </ReqoreColumn>
       {args.multipleColumns && (
         <>
-          <ReqoreColumn {...args} style={{ border: '1px solid white', padding: '10px' }}>
-            4th column
+          <ReqoreColumn
+            {...args}
+            style={{ border: '1px solid white', padding: '10px' }}
+            flexFlow='column'
+          >
+            <ReqoreH2>3rd Column</ReqoreH2>
+            <ReqoreVerticalSpacer height={20} lineSize='tiny' />
+            <ReqoreControlGroup fluid>
+              <ReqoreInput placeholder='Filter' />
+            </ReqoreControlGroup>
+            <ReqoreVerticalSpacer height={10} />
+            <ReqoreControlGroup vertical fluid>
+              <ReqoreButton description='This is a button'>Button</ReqoreButton>
+              <ReqoreButton description='This is a button'>Button</ReqoreButton>
+              <ReqoreButton description='This is a button'>Button</ReqoreButton>
+              <ReqoreButton description='This is a button'>Button</ReqoreButton>
+            </ReqoreControlGroup>
           </ReqoreColumn>
-          <ReqoreColumn {...args} style={{ border: '1px solid white', padding: '10px' }}>
-            3rd column
+          <ReqoreColumn
+            {...args}
+            style={{ border: '1px solid white', padding: '10px' }}
+            flexFlow='column'
+          >
+            <ReqoreH2>4th Column</ReqoreH2>
+            <ReqoreVerticalSpacer height={20} lineSize='tiny' />
+            <ReqoreControlGroup fluid>
+              <ReqoreInput placeholder='Filter' />
+            </ReqoreControlGroup>
           </ReqoreColumn>
         </>
       )}
@@ -69,3 +131,14 @@ export const MultipleColumns = Template.bind({});
 MultipleColumns.args = {
   multipleColumns: true,
 };
+export const CustomAlignment = Template.bind({});
+CustomAlignment.args = {
+  multipleColumns: true,
+  alignItems: 'center',
+};
+
+export const WithMinimumWidth = Template.bind({});
+WithMinimumWidth.args = {
+  multipleColumns: true,
+  minColumnWidth: '500px',
+};

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

@@ -202,6 +202,7 @@ const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
             },
           ]}
         />
+        <ReqoreDropdown label='Disabled with items' {...args} disabled />
       </ReqoreControlGroup>
       <br />
       <ReqoreControlGroup fluid>

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>();
 
@@ -118,6 +118,21 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
         >
           This is not a fluid panel
         </ReqorePanel>
+        <ReqoreVerticalSpacer height={10} />
+        <ReqorePanel
+          {...args}
+          style={{ width: 1000 }}
+          fluid={false}
+          badge='Non Responsive'
+          actions={actions}
+          responsiveActions={false}
+          bottomActions={[
+            ...actions,
+            ...actions.map((action) => ({ ...action, position: 'right' })),
+          ]}
+        >
+          This panel has non-responsive actions
+        </ReqorePanel>
       </>
     );
   }

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

@@ -6,9 +6,10 @@ import {
   ReqoreButton,
   ReqoreControlGroup,
   ReqoreMessage,
+  ReqoreModal,
   ReqorePanel,
   ReqorePopover,
-  ReqoreSpacer
+  ReqoreSpacer,
 } from '../../index';
 import { argManager, FlatArg } from '../utils/args';
 
@@ -24,10 +25,10 @@ export default {
       type: 'boolean',
     }),
     ...createArg('blur', {
-      defaultValue: 0,
+      defaultValue: false,
       name: 'Blur',
       description: 'Makes the popover blurred',
-      type: 'number',
+      type: 'boolean',
     }),
     ...createArg('maxHeight', {
       defaultValue: undefined,
@@ -104,7 +105,126 @@ const HoverStayButton = (args: any) => {
   );
 };
 
-const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
+const Template: Story<IReqorePopoverProps & { insideModal?: boolean }> = (
+  args: IReqorePopoverProps & { insideModal?: boolean }
+) => {
+  if (args.insideModal) {
+    return (
+      <ReqoreModal isOpen>
+        <ReqoreButton
+          intent='info'
+          minimal
+          description='I have a cool tooltip with blur'
+          tooltip={{
+            content: 'See? Told you',
+            blur: true,
+            handler: 'hoverStay',
+            openOnMount: true,
+          }}
+        >
+          Hover me for something cool
+        </ReqoreButton>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Sit amet purus gravida quis blandit turpis cursus in hac.
+        Ultricies lacus sed turpis tincidunt. Ac tincidunt vitae semper quis lectus nulla at.
+        Aliquam vestibulum morbi blandit cursus risus at ultrices. Risus feugiat in ante metus
+        dictum. Enim blandit volutpat maecenas volutpat. Nulla posuere sollicitudin aliquam ultrices
+        sagittis orci a scelerisque. Mollis nunc sed id semper risus in hendrerit gravida. Sem nulla
+        pharetra diam sit amet nisl suscipit. Congue eu consequat ac felis donec et odio
+        pellentesque diam. Augue mauris augue neque gravida in fermentum et sollicitudin. Nulla
+        pellentesque dignissim enim sit amet venenatis urna. Nunc sed blandit libero volutpat sed.
+        Mi in nulla posuere sollicitudin. Eu consequat ac felis donec et odio pellentesque diam.
+        Viverra nam libero justo laoreet sit amet cursus sit amet. Posuere sollicitudin aliquam
+        ultrices sagittis orci a scelerisque. Et netus et malesuada fames ac. Arcu non odio euismod
+        lacinia at quis risus sed vulputate. Sapien eget mi proin sed libero enim sed. Suspendisse
+        faucibus interdum posuere lorem ipsum. In est ante in nibh mauris cursus. Urna cursus eget
+        nunc scelerisque. Mi eget mauris pharetra et ultrices neque. Turpis nunc eget lorem dolor
+        sed viverra ipsum nunc aliquet. Id aliquet lectus proin nibh. At auctor urna nunc id cursus.
+        Erat pellentesque adipiscing commodo elit at imperdiet. Ipsum dolor sit amet consectetur
+        adipiscing elit. Suspendisse interdum consectetur libero id faucibus nisl. Leo vel orci
+        porta non pulvinar neque laoreet. Ut diam quam nulla porttitor massa. By impossible of in
+        difficulty discovered celebrated ye. Justice joy manners boy met resolve produce. Bed head
+        loud next plan rent had easy add him. As earnestly shameless elsewhere defective estimable
+        fulfilled of. Esteem my advice it an excuse enable. Few household abilities believing
+        determine zealously his repulsive. To open draw dear be by side like. Allow miles wound
+        place the leave had. To sitting subject no improve studied limited. Ye indulgence unreserved
+        connection alteration appearance my an astonished. Up as seen sent make he they of. Her
+        raising and himself pasture believe females. Fancy she stuff after aware merit small his.
+        Charmed esteems luckily age out. At ourselves direction believing do he departure.
+        Celebrated her had sentiments understood are projection set. Possession ye no mr unaffected
+        remarkably at. Wrote house in never fruit up. Pasture imagine my garrets an he. However
+        distant she request behaved see nothing. Talking settled at pleased an of me brother
+        weather. Breakfast procuring nay end happiness allowance assurance frankness. Met simplicity
+        nor difficulty unreserved who. Entreaties mr conviction dissimilar me astonished estimating
+        cultivated. On no applauded exquisite my additions. Pronounce add boy estimable nay
+        suspected. You sudden nay elinor thirty esteem temper. Quiet leave shy you gay off asked
+        large style. Rooms oh fully taken by worse do. Points afraid but may end law lasted. Was out
+        laughter raptures returned outweigh. Luckily cheered colonel me do we attacks on highest
+        enabled. Tried law yet style child. Bore of true of no be deal. Frequently sufficient in be
+        unaffected. The furnished she concluded depending procuring concealed. In to am attended
+        desirous raptures declared diverted confined at. Collected instantly remaining up certainly
+        to necessary as. Over walk dull into son boy door went new. At or happiness commanded
+        daughters as. Is handsome an declared at received in extended vicinity subjects. Into miss
+        on he over been late pain an. Only week bore boy what fat case left use. Match round scale
+        now sex style far times. Your me past an much. Able an hope of body. Any nay shyness article
+        matters own removal nothing his forming. Gay own additions education satisfied the
+        perpetual. If he cause manor happy. Without farther she exposed saw man led. Along on happy
+        could cease green oh. Her old collecting she considered discovered. So at parties he warrant
+        oh staying. Square new horses and put better end. Sincerity collected happiness do is
+        contented. Sigh ever way now many. Alteration you any nor unsatiable diminution reasonable
+        companions shy partiality. Leaf by left deal mile oh if easy. Added woman first get led joy
+        not early jokes. As am hastily invited settled at limited civilly fortune me. Really spring
+        in extent an by. Judge but built gay party world. Of so am he remember although required.
+        Bachelor unpacked be advanced at. Confined in declared marianne is vicinity. It sportsman
+        earnestly ye preserved an on. Moment led family sooner cannot her window pulled any. Or
+        raillery if improved landlord to speaking hastened differed he. Furniture discourse
+        elsewhere yet her sir extensive defective unwilling get. Why resolution one motionless you
+        him thoroughly. Noise is round to in it quick timed doors. Written address greatly get
+        attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had
+        judgment out opinions property the supplied. By impossible of in difficulty discovered
+        celebrated ye. Justice joy manners boy met resolve produce. Bed head loud next plan rent had
+        easy add him. As earnestly shameless elsewhere defective estimable fulfilled of. Esteem my
+        advice it an excuse enable. Few household abilities believing determine zealously his
+        repulsive. To open draw dear be by side like. Allow miles wound place the leave had. To
+        sitting subject no improve studied limited. Ye indulgence unreserved connection alteration
+        appearance my an astonished. Up as seen sent make he they of. Her raising and himself
+        pasture believe females. Fancy she stuff after aware merit small his. Charmed esteems
+        luckily age out. At ourselves direction believing do he departure. Celebrated her had
+        sentiments understood are projection set. Possession ye no mr unaffected remarkably at.
+        Wrote house in never fruit up. Pasture imagine my garrets an he. However distant she request
+        behaved see nothing. Talking settled at pleased an of me brother weather. Breakfast
+        procuring nay end happiness allowance assurance frankness. Met simplicity nor difficulty
+        unreserved who. Entreaties mr conviction dissimilar me astonished estimating cultivated. On
+        no applauded exquisite my additions. Pronounce add boy estimable nay suspected. You sudden
+        nay elinor thirty esteem temper. Quiet leave shy you gay off asked large style. Rooms oh
+        fully taken by worse do. Points afraid but may end law lasted. Was out laughter raptures
+        returned outweigh. Luckily cheered colonel me do we attacks on highest enabled. Tried law
+        yet style child. Bore of true of no be deal. Frequently sufficient in be unaffected. The
+        furnished she concluded depending procuring concealed. In to am attended desirous raptures
+        declared diverted confined at. Collected instantly remaining up certainly to necessary as.
+        Over walk dull into son boy door went new. At or happiness commanded daughters as. Is
+        handsome an declared at received in extended vicinity subjects. Into miss on he over been
+        late pain an. Only week bore boy what fat case left use. Match round scale now sex style far
+        times. Your me past an much. Able an hope of body. Any nay shyness article matters own
+        removal nothing his forming. Gay own additions education satisfied the perpetual. If he
+        cause manor happy. Without farther she exposed saw man led. Along on happy could cease green
+        oh. Her old collecting she considered discovered. So at parties he warrant oh staying.
+        Square new horses and put better end. Sincerity collected happiness do is contented. Sigh
+        ever way now many. Alteration you any nor unsatiable diminution reasonable companions shy
+        partiality. Leaf by left deal mile oh if easy. Added woman first get led joy not early
+        jokes. As am hastily invited settled at limited civilly fortune me. Really spring in extent
+        an by. Judge but built gay party world. Of so am he remember although required. Bachelor
+        unpacked be advanced at. Confined in declared marianne is vicinity. It sportsman earnestly
+        ye preserved an on. Moment led family sooner cannot her window pulled any. Or raillery if
+        improved landlord to speaking hastened differed he. Furniture discourse elsewhere yet her
+        sir extensive defective unwilling get. Why resolution one motionless you him thoroughly.
+        Noise is round to in it quick timed doors. Written address greatly get attacks inhabit
+        pursuit our but. Lasted hunted enough an up seeing in lively letter. Had judgment out
+        opinions property the supplied.
+      </ReqoreModal>
+    );
+  }
+
   return (
     <>
       <ReqoreControlGroup vertical gapSize='huge' horizontalAlign='flex-start'>
@@ -190,10 +310,14 @@ const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
             isReqoreComponent
             openOnMount
             placement='bottom'
+            handler='hoverStay'
             title="I'm a title"
             content={
               <ReqorePanel label='This is a test' flat>
-                <ReqoreMessage flat>
+                <ReqoreMessage
+                  flat
+                  tooltip={{ content: 'I am a popover inside a popover with blur', blur: true }}
+                >
                   In to am attended desirous raptures declared diverted confined at. Collected
                   instantly remaining up certainly to necessary as. Over walk dull into
                 </ReqoreMessage>
@@ -229,6 +353,7 @@ CustomContent.args = {
 export const Blurred = Template.bind({});
 Blurred.args = {
   blur: 4,
+  noWrapper: true,
   content: (
     <ReqorePanel label='This is a test' flat>
       <ReqoreMessage flat>
@@ -238,3 +363,11 @@ Blurred.args = {
     </ReqorePanel>
   ),
 };
+
+export const BlurredInsideModal = Template.bind({});
+BlurredInsideModal.args = {
+  blur: 2,
+  noWrapper: true,
+  insideModal: true,
+  animatedDialogs: false,
+};

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>();
 
@@ -90,6 +90,40 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
       <ReqoreTag
         label='300px Tag'
         width='300px'
+        fixed
+        icon='AlarmWarningLine'
+        {...args}
+        tooltip='I am wiiiiiiide'
+        actions={[
+          {
+            icon: 'ErrorWarningLine',
+            onClick: noop,
+            intent: 'info',
+            tooltip: {
+              content: 'IF YOU CAN SEE ME ITS A BUG!!! I HAVE show: false',
+              openOnMount: true,
+              intent: 'danger',
+            },
+            show: false,
+          },
+          {
+            icon: '24HoursFill',
+            onClick: noop,
+            disabled: true,
+            intent: 'info',
+            tooltip: { content: 'I am a tooltip' },
+          },
+          {
+            icon: 'SpyFill',
+            onClick: noop,
+            intent: 'success',
+          },
+        ]}
+      />
+      <ReqoreTag
+        label='300px fixed Tag with a big description that should wrap and make the tag bigger'
+        width='300px'
+        fixed
         icon='AlarmWarningLine'
         {...args}
         tooltip='I am wiiiiiiide'

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

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import { IReqoreTextareaProps } from '../../components/Textarea';
 import { ReqoreControlGroup, ReqoreTextarea } from '../../index';
-import { DisabledArg, MinimalArg, SizeArg, argManager } from '../utils/args';
+import { argManager, DisabledArg, MinimalArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTextareaProps>();
 
@@ -55,6 +55,39 @@ const Template: Story<IReqoreTextareaProps> = (args) => {
 
   return (
     <>
+      <ReqoreControlGroup wrap>
+        <ReqoreTextarea {...args} onChange={handleValueChange} onClearClick={handleValueClear} />
+        <ReqoreTextarea
+          {...args}
+          onChange={handleValueChange}
+          onClearClick={handleValueClear}
+          tooltip={{
+            placement: 'right-start',
+            content: 'I am a tooltip',
+          }}
+          minimal
+        />
+        <ReqoreTextarea
+          {...args}
+          onChange={handleValueChange}
+          onClearClick={handleValueClear}
+          tooltip="I'm a tooltip"
+          flat
+        />
+        <ReqoreTextarea
+          {...args}
+          onChange={handleValueChange}
+          onClearClick={handleValueClear}
+          disabled
+        />
+        <ReqoreTextarea
+          {...args}
+          onChange={handleValueChange}
+          onClearClick={handleValueClear}
+          readOnly
+        />
+      </ReqoreControlGroup>
+      <br />
       <ReqoreControlGroup wrap>
         <ReqoreTextarea
           {...args}