@qoretechnologies/reqore 0.36.0 → 0.36.2

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

@@ -1,9 +1,12 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryObj } from '@storybook/react';
+import { fireEvent, waitFor, within } from '@storybook/testing-library';
 import { StyledEffect } from '../../components/Effect';
 import { IReqoreTableColumn, IReqoreTableProps, IReqoreTableRowData } from '../../components/Table';
 import { IReqoreCustomTableBodyCellProps } from '../../components/Table/cell';
 import { IReqoreCustomHeaderCellProps } from '../../components/Table/header';
+import { IReqoreCustomTableRowProps } from '../../components/Table/row';
 import { TReqorePaginationType } from '../../constants/paging';
+import { sleep } from '../../helpers/utils';
 import {
   ReqoreH3,
   ReqoreH4,
@@ -14,6 +17,7 @@ import {
   ReqoreTag,
 } from '../../index';
 import tableData from '../../mock/tableData';
+import { StoryMeta } from '../utils';
 import { CustomIntentArg, FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTableProps>();
@@ -191,7 +195,7 @@ const defaultColumns: IReqoreTableColumn[] = [
   },
 ];
 
-const defaultColumnsWithFilters = defaultColumns.map((column, index) => {
+const defaultColumnsWithFilters: IReqoreTableColumn[] = defaultColumns.map((column, index) => {
   if (index === 4) {
     return {
       ...column,
@@ -215,71 +219,85 @@ const defaultColumnsWithFilters = defaultColumns.map((column, index) => {
   return column;
 });
 
-const defaultColumnsWithHiddenColumns = defaultColumns.map((column, index) => {
-  if (index === 4) {
-    return {
-      ...column,
-      header: {
-        ...column.header,
-        columns: column.header.columns.map((subColumn, subIndex) =>
-          subIndex === 0
-            ? {
-                ...subColumn,
-                show: false,
-              }
-            : subColumn
-        ),
-      },
-    };
-  }
-
-  if (index === 2) {
-    return {
-      ...column,
-      show: false,
-    };
-  }
+const defaultColumnsWithHiddenColumns: IReqoreTableColumn[] = defaultColumns.map(
+  (column, index) => {
+    if (index === 4) {
+      return {
+        ...column,
+        header: {
+          ...column.header,
+          columns: column.header.columns.map((subColumn, subIndex) =>
+            subIndex === 0
+              ? {
+                  ...subColumn,
+                  show: false,
+                }
+              : subColumn
+          ),
+        },
+      };
+    }
 
-  return column;
-});
+    if (index === 2) {
+      return {
+        ...column,
+        show: false,
+      };
+    }
 
-const defaultColumnsWithPinnedColumns = defaultColumns.map((column, index) => {
-  if (index === 0) {
-    return {
-      ...column,
-      pin: 'left',
-    };
+    return column;
   }
+);
+
+const defaultColumnsWithPinnedColumns: IReqoreTableColumn[] = 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 === 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',
+      };
+    }
 
-  if (index === 3) {
-    return {
-      ...column,
-      pin: 'right',
-    };
+    return column;
   }
+);
 
-  return column;
-});
-
-export default {
+const meta = {
   title: 'Collections/Table/Stories',
+  component: ReqoreTable,
+  args: {
+    columns: defaultColumns,
+    data: tableData.data,
+    height: 600,
+    selectToggleTooltip: 'Select this row',
+    fill: false,
+    sort: { by: 'lastName', direction: 'desc' },
+    label: 'Table',
+  },
   argTypes: {
     ...createArg('rounded', {
       type: 'boolean',
@@ -298,23 +316,19 @@ export default {
     }),
     ...createArg('columns', {
       name: 'Columns',
-      defaultValue: defaultColumns,
     }),
     ...createArg('width', {
       type: 'number',
-      defaultValue: undefined,
       name: 'Width',
       description: 'The width of the table',
     }),
     ...createArg('height', {
       type: 'number',
-      defaultValue: 600,
       name: 'Height',
       description: 'The height of the table',
     }),
     ...createArg('data', {
       type: 'array',
-      defaultValue: tableData.data as any,
       name: 'Data',
       description: 'The data to be displayed in the table',
       table: {
@@ -323,13 +337,11 @@ export default {
     }),
     ...createArg('selectToggleTooltip', {
       type: 'string',
-      defaultValue: 'Select This Row',
       name: 'Select Toggle Tooltip',
       description: 'The tooltip of the select toggle',
     }),
     ...createArg('fill', {
       type: 'boolean',
-      defaultValue: false,
       name: 'Fill',
       description: 'Whether the table should fill the parent',
     }),
@@ -338,113 +350,156 @@ export default {
     ...IntentArg,
     ...CustomIntentArg('selectedRowIntent'),
   },
-} as Meta<IReqoreTableProps>;
+} as StoryMeta<typeof ReqoreTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};
 
-const Template: Story<IReqoreTableProps> = (args) => {
-  return <ReqoreTable label='Table' {...args} sort={{ by: 'lastName', direction: 'desc' }} />;
+export const NoLabel: Story = {
+  args: {
+    label: undefined,
+  },
 };
 
-export const Basic = Template.bind({});
-export const NoLabel = Template.bind({});
-NoLabel.args = {
-  label: undefined,
+export const CustomWidth: Story = {
+  args: {
+    width: 400,
+  },
 };
 
-export const CustomWidth = Template.bind({});
-CustomWidth.args = {
-  width: 400,
+export const NotFlat: Story = {
+  args: {
+    flat: false,
+  },
 };
 
-export const NotFlat = Template.bind({});
-NotFlat.args = {
-  flat: false,
+export const Striped: Story = {
+  args: {
+    striped: true,
+  },
 };
-export const Striped = Template.bind({});
-Striped.args = {
-  striped: true,
+
+export const Filterable: Story = {
+  args: {
+    filterable: true,
+  },
 };
-export const Filterable = Template.bind({});
-Filterable.args = {
-  filterable: true,
+
+export const DefaultFilter: Story = {
+  args: {
+    filterable: true,
+    filter: 'Village',
+  },
 };
-export const DefaultFilter = Template.bind({});
-DefaultFilter.args = {
-  filterable: true,
-  filter: 'Village',
+
+export const NoDataMessage: Story = {
+  args: {
+    filterable: true,
+    filter: 'asjkghakshgjkashg',
+  },
 };
 
-export const NoDataMessage = Template.bind({});
-NoDataMessage.args = {
-  filterable: true,
-  filter: 'asjkghakshgjkashg',
+export const FilterableColumns: Story = {
+  args: {
+    columns: defaultColumnsWithFilters,
+  },
 };
 
-export const FilterableColumns = Template.bind({});
-FilterableColumns.args = {
-  columns: defaultColumnsWithFilters,
+export const AllFiltersActive: Story = {
+  args: {
+    filterable: true,
+    filter: 'Road',
+    columns: defaultColumnsWithFilters,
+  },
 };
 
-export const AllFiltersActive = Template.bind({});
-AllFiltersActive.args = {
-  filterable: true,
-  filter: 'Road',
-  columns: defaultColumnsWithFilters,
+export const HiddenColumns: Story = {
+  args: {
+    columns: defaultColumnsWithHiddenColumns,
+  },
 };
 
-export const HiddenColumns = Template.bind({});
-HiddenColumns.args = {
-  columns: defaultColumnsWithHiddenColumns,
+export const PinnedColumns: Story = {
+  args: {
+    columns: defaultColumnsWithPinnedColumns,
+    zoomable: true,
+    filterable: true,
+  },
 };
 
-export const PinnedColumns = Template.bind({});
-PinnedColumns.args = {
-  columns: defaultColumnsWithPinnedColumns,
-  zoomable: true,
-  filterable: true,
+export const Selectable: Story = {
+  args: {
+    selectable: true,
+  },
 };
 
-export const Selectable = Template.bind({});
-Selectable.args = {
-  selectable: true,
+export const PreselectedRows: Story = {
+  args: {
+    selected: ['274', '280'],
+    selectable: true,
+  },
 };
 
-export const PreselectedRows = Template.bind({});
-PreselectedRows.args = {
-  selected: [274, 280],
-  selectable: true,
+export const Zoomable: Story = {
+  args: {
+    zoomable: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(1000);
+    await fireEvent.click(document.querySelector('.reqore-table-more'));
+    await waitFor(() => canvas.findAllByText('Zoom in'), { timeout: 5000 });
+  },
 };
 
-export const Zoomable = Template.bind({});
-Zoomable.args = {
-  zoomable: true,
+export const Exportable: Story = {
+  args: {
+    exportable: true,
+    filterable: true,
+    paging: 'buttons',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(1000);
+    await fireEvent.click(document.querySelector('.reqore-table-more'));
+    await waitFor(() => canvas.findAllByText('Export current view'), { timeout: 5000 });
+  },
 };
 
-export const FillParent = Template.bind({});
-FillParent.args = {
-  fill: true,
+export const FillParent: Story = {
+  args: {
+    fill: true,
+  },
 };
 
-export const Sizes = Template.bind({});
-Sizes.args = {
-  size: 'small',
-  filterable: true,
-  wrapperSize: 'big',
+export const Sizes: Story = {
+  args: {
+    size: 'small',
+    filterable: true,
+    wrapperSize: 'big',
+  },
 };
 
-export const DefaultPaging = Template.bind({});
-DefaultPaging.args = {
-  paging: 'buttons',
+export const DefaultPaging: Story = {
+  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>,
+export const CustomPaging: Story = {
+  args: {
+    paging: {
+      fluid: true,
+      loadMoreLabel: 'Load more rows...',
+      showLabels: true,
+      infinite: true,
+      itemsPerPage: 100,
+    } as TReqorePaginationType<IReqoreTableRowData>,
+  },
 };
 
 const CustomHeaderCell = (props: IReqoreCustomHeaderCellProps) => {
@@ -464,13 +519,14 @@ const CustomCell = (props: IReqoreCustomTableBodyCellProps) => {
   return <ReqoreP style={{ width: props.width, flexGrow: props.grow }}>{props.children}</ReqoreP>;
 };
 
-const CustomRow = (props: IReqoreCustomTableBodyCellProps) => {
+const CustomRow = (props: IReqoreCustomTableRowProps) => {
   return <StyledEffect style={props.style}>{props.children}</StyledEffect>;
 };
 
-export const CustomCellsAndRows = Template.bind({});
-CustomCellsAndRows.args = {
-  headerCellComponent: CustomHeaderCell,
-  bodyCellComponent: CustomCell,
-  rowComponent: CustomRow,
+export const CustomCellsAndRows: Story = {
+  args: {
+    headerCellComponent: CustomHeaderCell,
+    bodyCellComponent: CustomCell,
+    rowComponent: CustomRow,
+  },
 };

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

@@ -0,0 +1,9 @@
+import ReqoreTable from '../../components/Table';
+import { StoryMeta } from '../utils';
+
+const meta = {
+  title: 'Collections/Table/Tests',
+  component: ReqoreTable,
+} as StoryMeta<typeof ReqoreTable>;
+
+export default meta;

package/src/stories/Tabs/Tabs.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { IReqoreTabsProps } from '../../components/Tabs';
-import { TReqoreTabsContentPadding } from '../../components/Tabs/content';
 import { ReqoreH3, ReqoreTabs, ReqoreTabsContent } from '../../index';
+import { StoryMeta } from '../utils';
 import { IntentArg, SizeArg, argManager } from '../utils/args';
 
 const tabs = [
@@ -100,47 +100,53 @@ const tabs = [
   },
 ] as IReqoreTabsProps['tabs'];
 
-const { createArg } = argManager<IReqoreTabsProps & { tabPadding: TReqoreTabsContentPadding }>();
+const { createArg } = argManager<IReqoreTabsProps>();
 
-export default {
+const meta = {
   title: 'Navigation/Tabs/Stories',
+  component: ReqoreTabs,
+  args: {
+    flat: true,
+    fill: false,
+    fillParent: false,
+    wrapTabNames: false,
+    vertical: false,
+  },
   argTypes: {
     ...SizeArg,
     ...IntentArg,
     ...createArg('flat', {
       type: 'boolean',
-      defaultValue: true,
       name: 'Flat',
       description: 'Whether the tabs should be flat or not',
     }),
     ...createArg('fill', {
       type: 'boolean',
-      defaultValue: false,
       name: 'Fill',
       description: 'If the tabs should fill the container',
     }),
     ...createArg('fillParent', {
       type: 'boolean',
-      defaultValue: false,
       name: 'Fill Parent',
       description: 'If the tabs should fill the parent container',
     }),
     ...createArg('wrapTabNames', {
       type: 'boolean',
-      defaultValue: false,
       name: 'Wrap Tab Names',
       description: 'If the tab names should wrap',
     }),
     ...createArg('vertical', {
       type: 'boolean',
-      defaultValue: false,
       name: 'Vertical',
       description: 'If the tabs should be vertical',
     }),
   },
-} as Meta<IReqoreTabsProps & { tabPadding: TReqoreTabsContentPadding }>;
+} as StoryMeta<typeof ReqoreTabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IReqoreTabsProps & { tabPadding: TReqoreTabsContentPadding }> = (args) => {
+const Template: StoryFn<IReqoreTabsProps> = (args) => {
   return (
     <ReqoreTabs {...args} tabs={tabs}>
       <ReqoreTabsContent tabId='tab1'>
@@ -229,55 +235,85 @@ const Template: Story<IReqoreTabsProps & { tabPadding: TReqoreTabsContentPadding
   );
 };
 
-export const Basic = Template.bind({});
-export const Fill = Template.bind({});
-Fill.args = {
-  fill: true,
+export const Basic: Story = {
+  render: Template,
 };
 
-export const CustomActiveIntent = Template.bind({});
-CustomActiveIntent.args = {
-  activeTabIntent: 'warning',
-  activeTab: 'tab8',
+export const Fill: Story = {
+  render: Template,
+
+  args: {
+    fill: true,
+  },
 };
 
-export const NotFlat = Template.bind({});
-NotFlat.args = {
-  flat: false,
+export const CustomActiveIntent: Story = {
+  render: Template,
+
+  args: {
+    activeTabIntent: 'warning',
+    activeTab: 'tab8',
+  },
 };
 
-export const NoTabsPadding = Template.bind({});
-NoTabsPadding.args = {
-  padded: false,
+export const NotFlat: Story = {
+  render: Template,
+
+  args: {
+    flat: false,
+  },
 };
 
-export const Vertical = Template.bind({});
-Vertical.args = {
-  vertical: true,
-  fillParent: true,
+export const NoTabsPadding: Story = {
+  render: Template,
+
+  args: {
+    padded: false,
+  },
 };
 
-export const VerticalNoTabsPadding = Template.bind({});
-VerticalNoTabsPadding.args = {
-  padded: false,
-  vertical: true,
+export const Vertical: Story = {
+  render: Template,
+
+  args: {
+    vertical: true,
+    fillParent: true,
+  },
 };
 
-export const VerticalWithWrapping = Template.bind({});
-VerticalWithWrapping.args = {
-  vertical: true,
-  fillParent: true,
-  wrapTabNames: true,
+export const VerticalNoTabsPadding: Story = {
+  render: Template,
+
+  args: {
+    padded: false,
+    vertical: true,
+  },
 };
 
-export const VerticalCustomWidth = Template.bind({});
-VerticalCustomWidth.args = {
-  vertical: true,
-  fillParent: true,
-  width: '300px',
+export const VerticalWithWrapping: Story = {
+  render: Template,
+
+  args: {
+    vertical: true,
+    fillParent: true,
+    wrapTabNames: true,
+  },
 };
 
-export const CustomTabsPadding = Template.bind({});
-CustomTabsPadding.args = {
-  tabsPadding: 'none',
+export const VerticalCustomWidth: Story = {
+  render: Template,
+
+  args: {
+    vertical: true,
+    fillParent: true,
+    width: '300px',
+  },
+};
+
+export const CustomTabsPadding: Story = {
+  render: Template,
+
+  args: {
+    tabsPadding: 'none',
+  },
 };