@qoretechnologies/reqore 0.32.3 → 0.33.0

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

@@ -19,7 +19,7 @@ export default {
 
 const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
   return (
-    <>
+    <ReqoreControlGroup vertical gapSize='big'>
       <ReqoreControlGroup size={buttonProps.size} wrap>
         <ReqoreButton {...buttonProps} icon='BankFill' rightIcon={null} />
         <ReqoreButton {...buttonProps} />
@@ -27,7 +27,7 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           {...buttonProps}
           icon='BankFill'
           rightIcon={null}
-          textAlign='center'
+          iconsAlign='center'
           style={{ width: '100px' }}
         />
         <ReqoreButton {...buttonProps}>Default</ReqoreButton>
@@ -47,7 +47,6 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           Read only
         </ReqoreButton>
       </ReqoreControlGroup>
-      <br />
       <ReqoreControlGroup size={buttonProps.size} wrap>
         <ReqoreButton {...buttonProps} active flat={false} tooltip='hello'>
           Active Not Flat
@@ -72,13 +71,33 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           Disabled not flat
         </ReqoreButton>
       </ReqoreControlGroup>
-      <br />
       <ReqoreControlGroup fluid wrap>
         <ReqoreButton {...buttonProps} fluid>
           Fluid button
         </ReqoreButton>
       </ReqoreControlGroup>
-      <br />
+      <ReqoreControlGroup fluid wrap>
+        <ReqoreButton {...buttonProps} fluid textAlign='center'>
+          Fluid button with centered text
+        </ReqoreButton>
+      </ReqoreControlGroup>
+      <ReqoreControlGroup fluid wrap>
+        <ReqoreButton {...buttonProps} fluid textAlign='center' iconsAlign='center'>
+          Fluid button with centered text & icons
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          rightIcon={null}
+          fluid
+          textAlign='center'
+          iconsAlign='center'
+        >
+          Fluid button with centered text & icons
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} icon={null} fluid textAlign='center' iconsAlign='center'>
+          Fluid button with centered text & icons
+        </ReqoreButton>
+      </ReqoreControlGroup>
       <ReqoreControlGroup fluid wrap>
         <ReqoreButton {...buttonProps}>Left text</ReqoreButton>
         <ReqoreButton
@@ -112,7 +131,6 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           Right text
         </ReqoreButton>
       </ReqoreControlGroup>
-      <br />
       <ReqoreControlGroup wrap>
         <ReqoreButton
           {...buttonProps}
@@ -171,7 +189,6 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           wrap
         />
       </ReqoreControlGroup>
-      <br />
       <ReqoreControlGroup wrap>
         <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
           Read only with badge
@@ -225,7 +242,7 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           With modified Badge
         </ReqoreButton>
       </ReqoreControlGroup>
-    </>
+    </ReqoreControlGroup>
   );
 };
 

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

@@ -1,10 +1,11 @@
 import { Meta, Story } from '@storybook/react';
-import { ReqoreButton, ReqoreControlGroup } from '../..';
+import { ReqoreButton, ReqoreControlGroup, ReqoreVerticalSpacer } from '../..';
 import { IReqoreCollectionProps, ReqoreCollection } from '../../components/Collection';
 import { IReqoreColumnsProps } from '../../components/Columns';
-import items from '../../mock/collectionData';
-import data from '../../mock/data.json';
-import { IntentArg, SizeArg, argManager } from '../utils/args';
+import { PADDING_FROM_SIZE } from '../../constants/sizes';
+import items, { bigCollection } from '../../mock/collectionData';
+
+import { argManager, IntentArg, SizeArg } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
   multipleColumns?: boolean;
@@ -143,34 +144,38 @@ export const ChildrenBeforeAndAfter = Template.bind({});
 ChildrenBeforeAndAfter.args = {
   label: 'Collection of items',
   items,
-  childrenBefore: (
-    <ReqoreControlGroup horizontalAlign='center' fluid>
-      <ReqoreButton fluid> I could be a filter of some kind</ReqoreButton>
-    </ReqoreControlGroup>
-  ),
-  childrenAfter: (
-    <ReqoreControlGroup horizontalAlign='center' fluid>
-      <ReqoreControlGroup fluid={false} fixed>
-        <ReqoreButton fixed textAlign='center'>
-          1
-        </ReqoreButton>
-        <ReqoreButton fixed textAlign='center'>
-          2
-        </ReqoreButton>
-        <ReqoreButton fixed textAlign='center'>
-          3
-        </ReqoreButton>
-        <ReqoreButton fixed textAlign='center'>
-          4
-        </ReqoreButton>
+  contentRenderer: (children) => (
+    <>
+      <ReqoreControlGroup horizontalAlign='center' fluid>
+        <ReqoreButton fluid> I could be a filter of some kind</ReqoreButton>
+      </ReqoreControlGroup>
+      <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />
+      {children}
+      <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />
+      <ReqoreControlGroup horizontalAlign='center' fluid>
+        <ReqoreControlGroup fluid={false} fixed>
+          <ReqoreButton fixed textAlign='center'>
+            1
+          </ReqoreButton>
+          <ReqoreButton fixed textAlign='center'>
+            2
+          </ReqoreButton>
+          <ReqoreButton fixed textAlign='center'>
+            3
+          </ReqoreButton>
+          <ReqoreButton fixed textAlign='center'>
+            4
+          </ReqoreButton>
+        </ReqoreControlGroup>
       </ReqoreControlGroup>
-    </ReqoreControlGroup>
+    </>
   ),
 };
 
 export const FilteringSearchingPaging = Template.bind({});
 FilteringSearchingPaging.args = {
   inputProps: {
+    fluid: true,
     focusRules: {
       type: 'keypress',
       shortcut: 'letters',
@@ -183,24 +188,9 @@ FilteringSearchingPaging.args = {
   sortButtonProps: {
     fixed: false,
   },
+  paging: true,
   size: 'big',
   padded: false,
   fill: true,
-  items: data.slice(0, 100).map((datum) => ({
-    label: `${datum.firstName} ${datum.lastName}`,
-    badge: datum.id,
-    size: 'small',
-    expandable: true,
-    content: datum.address,
-    tags: [
-      {
-        labelKey: 'Age',
-        label: datum.age,
-      },
-      {
-        labelKey: 'Occupation',
-        label: datum.occupation,
-      },
-    ],
-  })),
+  items: bigCollection,
 } as IReqoreCollectionProps;

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

@@ -11,7 +11,7 @@ export default {
   title: 'Components/Dropdown',
   parameters: {
     chromatic: {
-      delay: 500,
+      delay: 1500,
     },
   },
   argTypes: {
@@ -132,6 +132,25 @@ export default {
 const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
   const [selected, setSelected] = useState<(string | number)[]>(['Item 3', 'Item 6']);
 
+  if (args.scrollToSelected) {
+    return (
+      <ReqoreControlGroup>
+        <ReqoreDropdown
+          label='Scrolling to selected'
+          isDefaultOpen
+          scrollToSelected
+          items={Array(130)
+            .fill(null)
+            .map((_, i) => ({
+              label: `Item ${i}`,
+              value: `item-${i}`,
+              selected: i === 55,
+            }))}
+        />
+      </ReqoreControlGroup>
+    );
+  }
+
   if (args.multiSelect) {
     return (
       <>
@@ -226,6 +245,10 @@ CustomComponent.args = {
   component: ReqoreInput,
   placeholder: 'Custom component',
 };
+export const ScrollToSelectedItem = Template.bind({});
+ScrollToSelectedItem.args = {
+  scrollToSelected: true,
+};
 export const MultiSelect = Template.bind({});
 MultiSelect.args = {
   multiSelect: true,

package/src/stories/Paging/Paging.stories.tsx

@@ -0,0 +1,184 @@
+import { Story, StoryObj } from '@storybook/react/types-6-0';
+import { IReqorePaginationProps, ReqorePagination } from '../../components/Paging';
+import { IReqorePagingOptions } from '../../hooks/usePaging';
+import { ReqoreControlGroup, ReqoreTag, useReqorePaging } from '../../index';
+import { tableData } from '../../mock/tableData';
+
+export default {
+  title: 'Components/Paging',
+} as StoryObj<typeof ReqorePagination>;
+
+const Template: Story<IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }> =
+  (args) => {
+    const paging = useReqorePaging<any>({ items: tableData, ...args.pagingOptions });
+
+    return (
+      <ReqoreControlGroup vertical fluid>
+        {paging.items.map((item) => (
+          <ReqoreTag fixed='key' labelKey={item.id} label={`${item.firstName} ${item.lastName}`} />
+        ))}
+        <ReqorePagination<any> {...paging} {...args} />
+      </ReqoreControlGroup>
+    );
+  };
+
+export const Basic = Template.bind({});
+export const NoPageButtons = Template.bind({});
+NoPageButtons.args = {
+  showPages: false,
+};
+
+export const NoControlButtons = Template.bind({});
+NoControlButtons.args = {
+  showControls: false,
+};
+
+export const ShowSomePages = Template.bind({});
+ShowSomePages.args = {
+  pagingOptions: {
+    pagesToShow: 4,
+  } as IReqorePagingOptions<any>,
+};
+export const AsList = Template.bind({});
+AsList.args = {
+  showPagesAs: 'list',
+  pagingOptions: {
+    pagesToShow: 5,
+  } as IReqorePagingOptions<any>,
+};
+
+export const WithStyling: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+WithStyling.args = {
+  showPagesAs: 'buttons',
+  activePageButtonProps: {
+    effect: {
+      gradient: {
+        colors: 'info',
+      },
+    },
+  },
+  pageButtonProps: {
+    effect: {
+      gradient: {
+        colors: 'warning',
+      },
+    },
+  },
+  controlPageButtonProps: {
+    effect: {
+      gradient: {
+        colors: 'success',
+      },
+    },
+  },
+  pagingOptions: {
+    pagesToShow: 15,
+  } as IReqorePagingOptions<any>,
+};
+
+export const ListWithStyling: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+ListWithStyling.args = {
+  showPagesAs: 'list',
+  activePageButtonProps: {
+    effect: {
+      gradient: {
+        colors: 'info',
+      },
+    },
+  },
+  pageButtonProps: {
+    effect: {
+      gradient: {
+        colors: 'warning',
+      },
+    },
+  },
+  listPageButtonProps: {
+    isDefaultOpen: true,
+    effect: {
+      gradient: {
+        colors: 'info',
+      },
+    },
+  },
+  controlPageButtonProps: {
+    effect: {
+      gradient: {
+        colors: 'success',
+      },
+    },
+  },
+  pagingOptions: {
+    pagesToShow: 15,
+  } as IReqorePagingOptions<any>,
+};
+
+export const WithLabels: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+WithLabels.args = {
+  showPagesAs: 'list',
+  showLabels: true,
+  listPageButtonProps: {
+    isDefaultOpen: true,
+  },
+  pagingOptions: {
+    pagesToShow: 15,
+  } as IReqorePagingOptions<any>,
+};
+
+export const Infinite: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+Infinite.args = {
+  showLabels: true,
+  fluid: true,
+  loadMoreButtonProps: {
+    textAlign: 'center',
+  },
+  loadMoreLabel: 'Load 10 more',
+  pagingOptions: {
+    infinite: true,
+  } as IReqorePagingOptions<any>,
+};
+
+export const InfiniteWithAutoScroll: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+InfiniteWithAutoScroll.args = {
+  showLabels: true,
+  fluid: true,
+  scrollOnLoadMore: true,
+  loadMoreButtonProps: {
+    textAlign: 'center',
+    size: 'big',
+  },
+  loadMoreLabel: 'Load 100 more',
+  pagingOptions: {
+    infinite: true,
+    itemsPerPage: 100,
+  } as IReqorePagingOptions<any>,
+};
+
+export const InfiniteWithAutoLoad: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+InfiniteWithAutoLoad.args = {
+  showLabels: true,
+  fluid: true,
+  autoLoadMore: true,
+  scrollOnLoadMore: true,
+  loadMoreButtonProps: {
+    textAlign: 'center',
+    icon: 'Loader5Line',
+  },
+  loadMoreLabel: 'Scroll to load 20 more',
+  pagingOptions: {
+    infinite: true,
+    itemsPerPage: 20,
+  } as IReqorePagingOptions<any>,
+};

package/src/stories/Tag/Tag.stories.tsx

@@ -267,6 +267,56 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
           },
         ]}
       />
+      <ReqoreTag
+        {...args}
+        labelKey='Fixed'
+        fixed='key'
+        label='Wrapped tag with some long text and NO width specified, AND wrap specified, with fixed key'
+        icon='DriveLine'
+        rightIcon={args.rightIcon}
+        wrap
+        onRemoveClick={null}
+        actions={[
+          {
+            icon: '24HoursFill',
+            onClick: noop,
+            disabled: true,
+            intent: 'info',
+            tooltip: { content: 'I am a tooltip' },
+          },
+          {
+            icon: 'SpyFill',
+            onClick: noop,
+            intent: 'success',
+            tooltip: { content: 'Hm, another tooltip', openOnMount: true },
+          },
+        ]}
+      />
+      <ReqoreTag
+        {...args}
+        labelKey='Wrapped tag with some long text and NO width specified, AND wrap specified, with fixed label, Wrapped tag with some long text and NO width specified, AND wrap specified, with fixed label'
+        fixed='label'
+        label='Fixed'
+        icon='DriveLine'
+        rightIcon={args.rightIcon}
+        wrap
+        onRemoveClick={null}
+        actions={[
+          {
+            icon: '24HoursFill',
+            onClick: noop,
+            disabled: true,
+            intent: 'info',
+            tooltip: { content: 'I am a tooltip' },
+          },
+          {
+            icon: 'SpyFill',
+            onClick: noop,
+            intent: 'success',
+            tooltip: { content: 'Hm, another tooltip', openOnMount: true },
+          },
+        ]}
+      />
     </ReqoreTagGroup>
   );
 };