@qoretechnologies/reqore 0.30.4 → 0.30.6

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

@@ -1,15 +1,8 @@
 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 { argManager, GapSizeArg, MinimalArg, SizeArg } from '../utils/args';
+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,182 +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.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"
-        >
-          Non flat 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>
   );
 };
 
@@ -222,11 +75,6 @@ Minimal.args = {
   minimal: true,
 };
 
-export const Fluid = Template.bind({});
-Fluid.args = {
-  fluid: true,
-};
-
 export const NotFlat = Template.bind({});
 NotFlat.args = {
   flat: false,
@@ -237,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,
@@ -259,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',
-};

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

@@ -159,21 +159,11 @@ const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
 
   return (
     <>
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreDropdown label='Default Dropdown' {...args} />
         <ReqoreDropdown label='Disabled if empty' {...args} items={[]} />
-        <ReqoreDropdown
-          icon='SunCloudyLine'
-          label='Custom icon'
-          {...args}
-          leftIconColor='warning:lighten:2'
-        />
-        <ReqoreDropdown
-          rightIcon='SunCloudyLine'
-          caretPosition='right'
-          {...args}
-          iconColor='success:lighten:2'
-        >
+        <ReqoreDropdown icon='SunCloudyLine' label='Custom icon' {...args} />
+        <ReqoreDropdown rightIcon='SunCloudyLine' caretPosition='right' {...args}>
           Custom icon with caret on right
         </ReqoreDropdown>
         <ReqoreDropdown

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

@@ -21,7 +21,6 @@ export const Icon: Story<IReqoreIconProps> = () => {
           color='#291133'
           effect={{ sepia: true }}
           margin='both'
-          tooltip={{ content: 'I have a tooltip', openOnMount: true }}
         />
         <ReqoreIcon
           icon='SignalTowerFill'

package/src/stories/Input/Input.stories.tsx

@@ -2,14 +2,13 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { ReqoreControlGroup } from '../../index';
-import { FlatArg, IconArg, MinimalArg, SizeArg } from '../utils/args';
+import { FlatArg, IconArg, MinimalArg } from '../utils/args';
 
 export default {
   title: 'Components/Input',
   argTypes: {
     ...MinimalArg,
     ...FlatArg,
-    ...SizeArg,
     ...IconArg('icon', 'Icon', 'SearchLine'),
   },
 } as Meta<IReqoreInputProps>;
@@ -27,7 +26,7 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
 
   return (
     <>
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreInput {...args} placeholder='Reqore Input' onChange={handleValueChange} />
         <ReqoreInput {...args} placeholder='Minimal Input' minimal onChange={handleValueChange} />
         <ReqoreInput
@@ -39,7 +38,6 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
         />
         <ReqoreInput
           {...args}
-          iconColor='pending:lighten:2'
           placeholder='Clearable Input'
           onClearClick={handleValueClear}
           onChange={handleValueChange}
@@ -53,7 +51,7 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
         />
       </ReqoreControlGroup>
       <br />
-      <ReqoreControlGroup wrap>
+      <ReqoreControlGroup>
         <ReqoreInput
           {...args}
           placeholder='Reqore Input'

package/src/stories/Menu/Menu.stories.tsx

@@ -118,7 +118,6 @@ const Template: Story<IReqoreMenuProps> = (args) => {
           {
             icon: 'EmotionUnhappyLine',
             rightIcon: 'Scissors2Fill',
-            leftIconColor: 'danger:lighten',
             wrap: args.wrapText,
             flat: args.flat,
           } as IReqoreMenuItemProps
@@ -149,7 +148,6 @@ const Template: Story<IReqoreMenuProps> = (args) => {
           </ReqoreMenu>
         }
         isReqoreComponent
-        noWrapper
         handler='click'
         placement='right'
       >

package/src/stories/Message/Message.stories.tsx

@@ -52,13 +52,6 @@ Minimal.args = {
   intent: 'danger',
 };
 
-export const WithIconColor: Story<IReqoreMessageProps> = Template.bind({});
-WithIconColor.args = {
-  minimal: true,
-  intent: 'success',
-  iconColor: '#00fd9f',
-};
-
 export const Opaque: Story<IReqoreMessageProps> = Template.bind({});
 Opaque.args = {
   opaque: true,