@qoretechnologies/reqore 0.30.5 → 0.30.6

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

@@ -20,7 +20,7 @@ export default {
 const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
   return (
     <>
-      <ReqoreControlGroup size={buttonProps.size} wrap>
+      <ReqoreControlGroup size={buttonProps.size}>
         <ReqoreButton {...buttonProps} icon='BankFill' rightIcon={null} />
         <ReqoreButton {...buttonProps} />
         <ReqoreButton {...buttonProps}>Default</ReqoreButton>
@@ -41,21 +41,14 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup size={buttonProps.size} wrap>
+      <ReqoreControlGroup size={buttonProps.size}>
         <ReqoreButton {...buttonProps} active flat={false} tooltip='hello'>
           Active Not Flat
         </ReqoreButton>
         <ReqoreButton {...buttonProps} flat={false}>
           Not Flat
         </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          minimal
-          flat={false}
-          iconColor='#38fdb2'
-          leftIconColor='#33023c:lighten:3'
-          rightIconColor='#0a487b:lighten:3'
-        >
+        <ReqoreButton {...buttonProps} minimal flat={false}>
           Minimal not flat
         </ReqoreButton>
         <ReqoreButton {...buttonProps} readOnly onClick={alert} flat={false}>
@@ -66,49 +59,16 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup fluid wrap>
+      <ReqoreControlGroup fluid>
         <ReqoreButton {...buttonProps} fluid>
           Fluid button
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup fluid wrap>
-        <ReqoreButton {...buttonProps}>Left text</ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          textAlign='center'
-          maxWidth='250px'
-          badge='10'
-          wrap
-          description='I am a button with a center aligned text and description'
-        >
-          Center
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          textAlign='center'
-          maxWidth='200px'
-          badge="I'm a badge, baby"
-          wrap
-          description='I am a button with a center aligned text and description'
-        >
-          Center text with a longer text
-        </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          textAlign='right'
-          badge="I'm a badge"
-          description='I am a button with a right aligned text and description'
-        >
-          Right text
-        </ReqoreButton>
-      </ReqoreControlGroup>
-      <br />
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreButton
           {...buttonProps}
           description='This is a very interesting description for a button, I like it very much'
-          iconColor='#38fdb2'
         >
           With Default Description
         </ReqoreButton>
@@ -127,22 +87,8 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
         <ReqoreButton
           {...buttonProps}
-          minimal
           description='This is a very interesting description for a button, I like it very much'
           maxWidth='200px'
-          labelEffect={{
-            gradient: { colors: { 0: '#00fafd', 130: '#eb0e8c' }, direction: 'to right bottom' },
-          }}
-          descriptionEffect={{
-            gradient: { colors: { 0: '#fd7600', 90: '#c997ff' }, type: 'radial' },
-          }}
-          effect={{
-            gradient: {
-              colors: { 0: '#be00fd', 130: '#e70eeb' },
-              direction: 'to left bottom',
-              animate: 'hover',
-            },
-          }}
           badge={{
             effect: {
               gradient: { colors: { 0: '#00fafd', 130: '#eb0e8c' }, direction: 'to right bottom' },
@@ -163,22 +109,11 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         />
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
           Read only with badge
         </ReqoreButton>
-        <ReqoreButton
-          {...buttonProps}
-          minimal
-          badge={20}
-          onClick={alert}
-          effect={{
-            gradient: { colors: { 90: '#ffe69c', 0: '#ff7818' }, type: 'radial' },
-          }}
-          labelEffect={{
-            gradient: { colors: { 0: '#ffe69c', 90: '#ff7818' }, type: 'radial' },
-          }}
-        >
+        <ReqoreButton {...buttonProps} minimal badge={20} onClick={alert}>
           Minimal with badge
         </ReqoreButton>
         <ReqoreButton

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Checkbox from '../../components/Checkbox';
-import { ReqoreCheckbox, ReqoreControlGroup, ReqoreVerticalSpacer } from '../../index';
+import { ReqoreCheckbox, ReqoreControlGroup } from '../../index';
 
 export default {
   title: 'Components/Checkbox',
@@ -10,7 +10,7 @@ export default {
 const Template: ComponentStory<typeof Checkbox> = (args) => {
   return (
     <ReqoreControlGroup vertical>
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreCheckbox {...args} />
         <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
         <ReqoreCheckbox {...args} checked tooltip='I am checked' />
@@ -18,8 +18,7 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
         <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelPosition='left' />
         <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
       </ReqoreControlGroup>
-      <ReqoreVerticalSpacer height={10} />
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreCheckbox {...args} intent='info' checked />
         <ReqoreCheckbox
           {...args}
@@ -35,8 +34,6 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
           effect={{ gradient: { colors: { 0: '#00fafd', 100: '#ff00d0' } } }}
         />
         <ReqoreCheckbox {...args} disabled onText='yes' offText='no' />
-        <ReqoreCheckbox {...args} onText='yes' offText='no' />
-        <ReqoreCheckbox {...args} onText='yes' offText='no' checked />
         <ReqoreCheckbox
           {...args}
           label='Label'

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

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react';
 import { IReqoreCollectionProps, ReqoreCollection } from '../../components/Collection';
 import { IReqoreColumnsProps } from '../../components/Columns';
 import items from '../../mock/collectionData';
-import { IntentArg, SizeArg, argManager } from '../utils/args';
+import { argManager, IntentArg, SizeArg } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
   multipleColumns?: boolean;
@@ -45,7 +45,7 @@ export default {
       description: 'If true, the collection will be rounded when stacked',
     }),
     ...createArg('height', {
-      defaultValue: undefined,
+      defaultValue: '600px',
       type: 'string',
       name: 'Height',
       description: 'Height of the collection',
@@ -72,8 +72,6 @@ const Template: Story<IReqoreCollectionProps> = (args) => {
   return (
     <ReqoreCollection
       {...args}
-      badge={10}
-      selectedIcon='CheckLine'
       actions={[{ label: 'Custom action', icon: 'Home7Line' }, { actions: [{ value: 'Test' }] }]}
     />
   );
@@ -85,13 +83,6 @@ Basic.args = {
   items,
 };
 
-export const WithHeight = Template.bind({});
-WithHeight.args = {
-  label: 'Collection of items',
-  height: '600px',
-  items,
-};
-
 export const Stacked = Template.bind({});
 Stacked.args = {
   label: 'Collection of items',
@@ -105,10 +96,3 @@ Fill.args = {
   fill: true,
   items,
 };
-
-export const SelectedFirst = Template.bind({});
-SelectedFirst.args = {
-  label: 'Collection of items',
-  items,
-  showSelectedFirst: true,
-};

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -1,14 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreControlGroupProps } from '../../components/ControlGroup';
-import {
-  ReqoreButton,
-  ReqoreCheckbox,
-  ReqoreControlGroup,
-  ReqoreDropdown,
-  ReqoreInput,
-  ReqoreTag,
-  ReqoreVerticalSpacer,
-} from '../../index';
+import ReqoreInput from '../../components/Input';
+import { ReqoreButton, ReqoreCheckbox, ReqoreControlGroup, ReqoreTag } from '../../index';
 import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
@@ -37,240 +30,42 @@ export default {
       description: 'Whether the control group should be fluid',
       control: 'boolean',
     }),
-    ...createArg('wrap', {
-      name: 'wrap',
-      defaultValue: true,
-      description: 'Whether the control group should wrap',
-      control: 'boolean',
-    }),
   },
 } as Meta<IReqoreControlGroupProps>;
 
 const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProps) => {
-  if (args.fill) {
-    return (
-      <>
-        <ReqoreControlGroup {...args} stack>
-          <ReqoreButton icon='PictureInPictureLine' description='I will be a bit larger'>
-            Button
-          </ReqoreButton>
-          <ReqoreControlGroup stack>
-            <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
-            <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
-          </ReqoreControlGroup>
-          <ReqoreControlGroup stack>
-            <ReqoreControlGroup>
-              <ReqoreInput customTheme={{ main: '#00e3e8' }} placeholder='Level 2 deep' />
-              <ReqoreControlGroup fixed>
-                <ReqoreButton disabled fixed id='test'>
-                  Level 3 deep and fixed
-                </ReqoreButton>
-              </ReqoreControlGroup>
-            </ReqoreControlGroup>
-            <ReqoreCheckbox checked margin='both' label='Level 1 deep' />
-            <ReqoreButton intent='danger'>Level 1 deep</ReqoreButton>
-          </ReqoreControlGroup>
-        </ReqoreControlGroup>
-        <ReqoreVerticalSpacer height={10} />
-        <ReqoreControlGroup {...args} stack>
-          <ReqoreButton
-            icon='PictureInPictureLine'
-            description='Here is a really weird and long description that needs to stretch the button a little bit so we can get some idea on how the other buttons are going to react.'
-            maxWidth='400px'
-          >
-            Please select
-          </ReqoreButton>
-          <ReqoreButton icon='AddLine' intent='info' />
-          <ReqoreButton>Edit</ReqoreButton>
-          <ReqoreButton icon='DeleteBinLine' intent='danger'>
-            Remove
-          </ReqoreButton>
-        </ReqoreControlGroup>
-        <ReqoreVerticalSpacer height={10} />
-        <ReqoreControlGroup {...args} stack fluid>
-          <ReqoreButton
-            icon='PictureInPictureLine'
-            description='Here is a really weird and long description that needs to stretch the button a little bit so we can get some idea on how the other buttons are going to react.'
-          >
-            Please select
-          </ReqoreButton>
-          <ReqoreButton icon='AddLine' intent='info' fixed />
-          <ReqoreButton fixed>Edit</ReqoreButton>
-          <ReqoreButton icon='DeleteBinLine' intent='danger' fixed>
-            Remove
-          </ReqoreButton>
-        </ReqoreControlGroup>
-      </>
-    );
-  }
-
-  if (args.responsive) {
-    return (
-      <div style={{ width: 600 }}>
-        <ReqoreControlGroup {...args} wrap={false}>
-          <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
-          <ReqoreControlGroup stack>
-            <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
-          </ReqoreControlGroup>
-          <ReqoreControlGroup stack>
-            <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
-            <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
-          </ReqoreControlGroup>
-          <ReqoreControlGroup stack>
-            <ReqoreControlGroup>
-              <ReqoreButton customTheme={{ main: '#00e3e8' }}>Level 2 deep</ReqoreButton>
-              <ReqoreControlGroup fixed>
-                <ReqoreButton disabled fixed id='test'>
-                  Level 3 deep and fixed
-                </ReqoreButton>
-              </ReqoreControlGroup>
-            </ReqoreControlGroup>
-            <ReqoreButton intent='danger'>Level 1 deep</ReqoreButton>
-            <ReqoreCheckbox checked margin='both' label='Level 1 deep' />
-          </ReqoreControlGroup>
-          <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
-          <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
-        </ReqoreControlGroup>
-      </div>
-    );
-  }
-
   return (
-    <>
-      <ReqoreControlGroup {...args}>
-        <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
-        <ReqoreButton icon='PictureInPictureLine' fluid>
-          Fluid Button
-        </ReqoreButton>
-        <ReqoreButton
-          icon='PictureInPictureLine'
-          flat={false}
-          effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
-          description="With a description, it's a bit longer than the button itself"
-          fixed
-        >
-          Non flat fixed Button
-        </ReqoreButton>
-        <ReqoreControlGroup stack>
-          <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
-          <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
-        </ReqoreControlGroup>
-        <ReqoreCheckbox
-          asSwitch
-          label='Switchy switch'
-          margin='both'
-          intent='warning'
-          checkedIcon='CheckFill'
-          checked
-          uncheckedIcon='CheckboxBlankLine'
-        />
-        <ReqoreInput icon='4KFill' value='Hello I am fluid' fluid />
-        <ReqoreControlGroup stack>
-          <ReqoreControlGroup>
-            <ReqoreButton customTheme={{ main: '#00e3e8' }}>Level 2 deep</ReqoreButton>
-            <ReqoreControlGroup fixed>
-              <ReqoreButton disabled fixed id='test'>
-                Level 3 deep and fixed
-              </ReqoreButton>
-            </ReqoreControlGroup>
-          </ReqoreControlGroup>
-          <ReqoreButton intent='danger'>Level 1 deep</ReqoreButton>
-          <ReqoreCheckbox checked margin='both' label='Level 1 deep' />
-        </ReqoreControlGroup>
-
-        <ReqoreButton minimal>Minimal</ReqoreButton>
-        <ReqoreTag label='smol tag' size='small' />
-      </ReqoreControlGroup>
-      <ReqoreVerticalSpacer height={15} />
-      <ReqoreControlGroup {...args} className='root-group' id='root-group'>
-        <ReqoreControlGroup intent='info' className='group-1' id='group-1-wrapper'>
-          <ReqoreControlGroup intent='info' className='group-1' id='group-1'>
-            <>
-              <ReqoreButton icon='PictureInPictureLine' id='group-1-button'>
-                Group 1
-              </ReqoreButton>
-              <ReqoreTag icon='PictureInPictureLine' label='Group 1' id='group-1-tag' />
-            </>
-          </ReqoreControlGroup>
-          <ReqoreControlGroup intent='pending' className='group-1-1' id='group-1-1'>
-            <ReqoreButton icon='PictureInPictureLine' id='group-1-1-button'>
-              Group 1-1
-            </ReqoreButton>
-            <ReqoreTag icon='PictureInPictureLine' label='Group 1-1' id='group-1-1-tag' />
-            <ReqoreDropdown
-              items={[
-                {
-                  selected: true,
-                  label: 'Hello',
-                  value: 'hello',
-                  icon: 'SunCloudyLine',
-                },
-                {
-                  label: 'How are ya',
-                  value: 'howareya',
-                  icon: 'BatteryChargeFill',
-                },
-                {
-                  disabled: true,
-                  label: 'i aM diSAblEd',
-                  value: 'disabled',
-                  icon: 'StopCircleLine',
-                },
-                {
-                  label: 'With right button',
-                  value: 'kek',
-                  icon: 'CheckDoubleLine',
-                },
-              ]}
-            >
-              Dropdown
-            </ReqoreDropdown>
-          </ReqoreControlGroup>
-        </ReqoreControlGroup>
-        <ReqoreButton icon='PictureInPictureLine' id='group-root-button'>
-          Root group
-        </ReqoreButton>
-        <ReqoreControlGroup intent='success' className='group-2' id='group-2'>
-          <>
-            <ReqoreButton icon='PictureInPictureLine' id='group-2-button' fixed>
-              Group 2
-            </ReqoreButton>
-            <ReqoreControlGroup intent='danger' className='group-3' id='group-3'>
-              <ReqoreButton icon='PictureInPictureLine' id='group-3-button-1'>
-                Group 3
-              </ReqoreButton>
-              <ReqoreButton icon='PictureInPictureLine' id='group-3-button-2'>
-                Group 3
-              </ReqoreButton>
-            </ReqoreControlGroup>
-          </>
-          <ReqoreCheckbox label='Group 2' margin='both' id='group-2-checkbox' />
-        </ReqoreControlGroup>
-        <ReqoreButton icon='PictureInPictureLine' id='group-root-button-2'>
-          Root group
-        </ReqoreButton>
-        <ReqoreControlGroup intent='warning' className='group-4' id='group-4'>
-          <ReqoreControlGroup id='group-4-1' fluid={false}>
-            <ReqoreTag icon='PictureInPictureLine' label='Group 4' id='group-4-1-tag' />
-            <ReqoreInput icon='PictureInPictureLine' value='Group 4' id='group-4-1-input' />
-          </ReqoreControlGroup>
-          <ReqoreControlGroup id='group-4-3'>
-            <ReqoreTag icon='PictureInPictureLine' label='Group 4' id='group-4-3-tag' />
-            <>
-              <ReqoreInput icon='PictureInPictureLine' value='Group 4' id='group-4-3-input' />
-              <ReqoreControlGroup id='group-5' intent='muted' fluid={false}>
-                <ReqoreTag icon='PictureInPictureLine' label='Group 5' id='group-4-3-1-tag' />
-                <ReqoreTag icon='PictureInPictureLine' label='Group 5' id='group-4-3-2-tag' />
-                <ReqoreTag icon='PictureInPictureLine' label='Group 5' id='group-4-3-3-tag' />
-                <ReqoreControlGroup id='group 6' intent='success'>
-                  <ReqoreButton fixed>Group 6</ReqoreButton>
-                </ReqoreControlGroup>
-              </ReqoreControlGroup>
-            </>
-          </ReqoreControlGroup>
-        </ReqoreControlGroup>
-      </ReqoreControlGroup>
-    </>
+    <ReqoreControlGroup {...args}>
+      <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
+      <ReqoreButton
+        icon='PictureInPictureLine'
+        flat={false}
+        effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
+      >
+        Non flat Button
+      </ReqoreButton>
+      <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
+      <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
+      <ReqoreCheckbox
+        asSwitch
+        label='Switchy switch'
+        margin='both'
+        intent='warning'
+        checkedIcon='CheckFill'
+        checked
+        uncheckedIcon='CheckboxBlankLine'
+      />
+      <ReqoreInput icon='4KFill' value='Hello' />
+      <ReqoreButton disabled fixed>
+        Disabled & Fixed
+      </ReqoreButton>
+      <ReqoreCheckbox checked margin='both'>
+        Checkbox
+      </ReqoreCheckbox>
+
+      <ReqoreButton minimal>Minimal</ReqoreButton>
+      <ReqoreTag label='smol tag' size='small' />
+    </ReqoreControlGroup>
   );
 };
 
@@ -280,16 +75,6 @@ Minimal.args = {
   minimal: true,
 };
 
-export const Fluid = Template.bind({});
-Fluid.args = {
-  fluid: true,
-};
-
-export const Fill = Template.bind({});
-Fill.args = {
-  fill: true,
-};
-
 export const NotFlat = Template.bind({});
 NotFlat.args = {
   flat: false,
@@ -300,19 +85,6 @@ Vertical.args = {
   vertical: true,
 };
 
-export const VerticalFluid = Template.bind({});
-VerticalFluid.args = {
-  vertical: true,
-  fluid: true,
-};
-
-export const VerticalStackedFluid = Template.bind({});
-VerticalStackedFluid.args = {
-  vertical: true,
-  stack: true,
-  fluid: true,
-};
-
 export const Stacked = Template.bind({});
 Stacked.args = {
   stack: true,
@@ -322,24 +94,3 @@ export const BigGapSize = Template.bind({});
 BigGapSize.args = {
   gapSize: 'big',
 };
-
-export const NoWrap = Template.bind({});
-NoWrap.args = {
-  wrap: false,
-};
-
-export const HorizontalAlign = Template.bind({});
-HorizontalAlign.args = {
-  vertical: true,
-  horizontalAlign: 'center',
-};
-
-export const VerticalAlign = Template.bind({});
-VerticalAlign.args = {
-  verticalAlign: 'flex-end',
-};
-
-export const Responsive = Template.bind({});
-Responsive.args = {
-  responsive: true,
-};

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

@@ -2,16 +2,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,
 } from '../../index';
-import { FlatArg, IntentArg, argManager } from '../utils/args';
+import { argManager, FlatArg, IntentArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreDrawerProps>();
 
@@ -48,7 +46,7 @@ export default {
       options: ['left', 'right', 'top', 'bottom'],
     }),
     ...createArg('size', {
-      defaultValue: 'auto',
+      defaultValue: '450px',
       name: 'Size',
       type: 'string',
     }),
@@ -126,68 +124,7 @@ const Template: Story<IReqoreDrawerProps> = (args: IReqoreDrawerProps) => {
         attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had
         judgment out opinions property the supplied.
       </ReqorePanel>
-      <ReqoreDrawer
-        {...args}
-        label='This is a test'
-        icon='EmphasisCn'
-        onClose={noop}
-        actions={[
-          {
-            responsive: false,
-            group: [
-              {
-                label: 'Non responsive',
-                icon: '24HoursFill',
-                customTheme: { main: '#eb0e8c' },
-              },
-              {
-                icon: 'FullscreenExitLine',
-                customTheme: { main: '#a40a62' },
-              },
-            ],
-          },
-          {
-            group: [
-              { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
-              { icon: 'CopperCoinFill', intent: 'danger' },
-            ],
-          },
-          {
-            as: ReqoreInput,
-            props: {
-              placeholder: 'Custom action!',
-              icon: 'Search2Line',
-              minimal: false,
-            } as IReqoreInputProps,
-          },
-          {
-            label: 'More actions',
-            actions: [
-              { value: 'Sub Test', icon: 'FileDownloadLine' },
-              { value: 'Sub Test 2', icon: 'FileDownloadLine', intent: 'success' },
-            ],
-            intent: 'info',
-          },
-        ]}
-        bottomActions={[
-          {
-            position: 'left',
-            intent: 'success',
-            group: [
-              { label: 'Test 1', icon: '24HoursFill' },
-              { label: 'Test 2', icon: '24HoursFill' },
-            ],
-          },
-          {
-            label: 'More actions',
-            position: 'right',
-            actions: [
-              { value: 'Sub Test', icon: 'FileDownloadLine', intent: 'success' },
-              { value: 'Sub Test 2', icon: 'FileDownloadLine' },
-            ],
-          },
-        ]}
-      >
+      <ReqoreDrawer {...args} label='This is a test' icon='EmphasisCn' onClose={noop}>
         <ReqoreTabs
           flat
           intent={args.intent}
@@ -242,7 +179,3 @@ export const Transparent = Template.bind({});
 Transparent.args = {
   opacity: 0.5,
 };
-export const WithSize = Template.bind({});
-WithSize.args = {
-  size: '500px',
-};