@qoretechnologies/reqore 0.35.1 → 0.35.3

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

@@ -125,6 +125,22 @@ SelectedFirst.args = {
   showSelectedFirst: true,
 };
 
+export const Zoomable = Template.bind({});
+Zoomable.args = {
+  label: 'Collection of items',
+  items,
+  zoomable: true,
+};
+
+export const WithDefaultZoom = Template.bind({});
+WithDefaultZoom.args = {
+  label: 'Collection of items',
+  items,
+  zoomable: true,
+  size: 'tiny',
+  defaultZoom: 2,
+};
+
 export const CustomColumnsData = Template.bind({});
 CustomColumnsData.args = {
   columns: 2,

package/src/stories/Table/Table.stories.tsx

@@ -1,8 +1,9 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { StyledEffect } from '../../components/Effect';
-import { IReqoreTableColumn, IReqoreTableProps } from '../../components/Table';
+import { IReqoreTableColumn, IReqoreTableProps, IReqoreTableRowData } from '../../components/Table';
 import { IReqoreCustomTableBodyCellProps } from '../../components/Table/cell';
 import { IReqoreCustomHeaderCellProps } from '../../components/Table/header';
+import { TReqorePaginationType } from '../../constants/paging';
 import {
   ReqoreH3,
   ReqoreH4,
@@ -20,6 +21,7 @@ const { createArg } = argManager<IReqoreTableProps>();
 const defaultColumns: IReqoreTableColumn[] = [
   {
     dataId: 'id',
+    intent: 'info',
     header: {
       label: 'ID',
       tooltip: 'Custom ID tooltip nice',
@@ -37,6 +39,8 @@ const defaultColumns: IReqoreTableColumn[] = [
       columns: [
         {
           dataId: 'firstName',
+          minWidth: 50,
+          maxWidth: 500,
           header: {
             icon: 'SlideshowLine',
             label: 'First Name',
@@ -158,6 +162,33 @@ const defaultColumns: IReqoreTableColumn[] = [
       }),
     },
   },
+  {
+    dataId: 'actions',
+    header: {
+      icon: 'SettingsLine',
+    },
+    width: 100,
+    align: 'center',
+    pin: 'right',
+
+    cell: {
+      padded: 'none',
+      actions: () => [
+        {
+          icon: 'AddLine',
+          intent: 'info',
+        },
+        {
+          icon: 'EditLine',
+          intent: 'warning',
+        },
+        {
+          icon: 'DeleteBinLine',
+          intent: 'danger',
+        },
+      ],
+    },
+  },
 ];
 
 const defaultColumnsWithFilters = defaultColumns.map((column, index) => {
@@ -212,6 +243,41 @@ const defaultColumnsWithHiddenColumns = defaultColumns.map((column, index) => {
   return column;
 });
 
+const defaultColumnsWithPinnedColumns = defaultColumns.map((column, index) => {
+  if (index === 0) {
+    return {
+      ...column,
+      pin: 'left',
+    };
+  }
+
+  if (index === 1) {
+    return {
+      ...column,
+      header: {
+        ...column.header,
+        columns: column.header.columns.map((subColumn, subIndex) =>
+          subIndex === 1
+            ? {
+                ...subColumn,
+                pin: 'left',
+              }
+            : subColumn
+        ),
+      },
+    };
+  }
+
+  if (index === 3) {
+    return {
+      ...column,
+      pin: 'right',
+    };
+  }
+
+  return column;
+});
+
 export default {
   title: 'Collections/Table/Stories',
   argTypes: {
@@ -330,11 +396,24 @@ HiddenColumns.args = {
   columns: defaultColumnsWithHiddenColumns,
 };
 
+export const PinnedColumns = Template.bind({});
+PinnedColumns.args = {
+  columns: defaultColumnsWithPinnedColumns,
+  zoomable: true,
+  filterable: true,
+};
+
 export const Selectable = Template.bind({});
 Selectable.args = {
   selectable: true,
 };
 
+export const PreselectedRows = Template.bind({});
+PreselectedRows.args = {
+  selected: [274, 280],
+  selectable: true,
+};
+
 export const Zoomable = Template.bind({});
 Zoomable.args = {
   zoomable: true,
@@ -352,6 +431,22 @@ Sizes.args = {
   wrapperSize: 'big',
 };
 
+export const DefaultPaging = Template.bind({});
+DefaultPaging.args = {
+  paging: 'buttons',
+};
+
+export const CustomPaging = Template.bind({});
+CustomPaging.args = {
+  paging: {
+    fluid: true,
+    loadMoreLabel: 'Load more rows...',
+    showLabels: true,
+    infinite: true,
+    itemsPerPage: 100,
+  } as TReqorePaginationType<IReqoreTableRowData>,
+};
+
 const CustomHeaderCell = (props: IReqoreCustomHeaderCellProps) => {
   if (props.hasColumns) {
     return <ReqoreH3 intent='success'>{props.label}</ReqoreH3>;

package/src/stories/Tree/Tree.stories.tsx

@@ -47,3 +47,16 @@ export const NoControls = Template.bind({});
 NoControls.args = {
   showControls: false,
 };
+
+export const Zoomable = Template.bind({});
+Zoomable.args = {
+  zoomable: true,
+};
+
+export const WithDefaultZoom = Template.bind({});
+WithDefaultZoom.args = {
+  label: 'Collection of items',
+  zoomable: true,
+  size: 'tiny',
+  defaultZoom: 2,
+};