@qoretechnologies/reqore 0.32.3 → 0.34.0

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

@@ -0,0 +1,202 @@
+import { Story, StoryObj } from '@storybook/react/types-6-0';
+import { useState } from 'react';
+import { useMount } from 'react-use';
+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 [scrollContainer, setScrollContainer] = useState<any>(undefined);
+    const paging = useReqorePaging<any>({ items: tableData, ...args.pagingOptions });
+
+    useMount(() => {
+      setScrollContainer(document.querySelector('.reqore-content')!);
+    });
+
+    return (
+      <ReqoreControlGroup vertical fluid>
+        {paging.items.map((item) => (
+          <ReqoreTag fixed='key' labelKey={item.id} label={`${item.firstName} ${item.lastName}`} />
+        ))}
+        <ReqorePagination<any> {...paging} {...args} scrollContainer={scrollContainer} />
+      </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 ScrollToTop: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+ScrollToTop.args = {
+  scrollToTopOnPageChange: true,
+  pagingOptions: {
+    pagesToShow: 5,
+    itemsPerPage: 100,
+  } 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>
   );
 };