@qoretechnologies/reqore 0.36.1 → 0.36.3

package/src/hooks/usePopover.tsx

@@ -194,13 +194,7 @@ const usePopover = ({
         }
       }
     };
-  }, [
-    targetElement?.toString(),
-    //@ts-ignore
-    content,
-    current,
-    currentPopover,
-  ]);
+  }, [targetElement?.toString(), content, current, currentPopover]);
 
   useUnmount(() => {
     cancelTimeout();

package/src/hooks/useTheme.ts

@@ -27,7 +27,7 @@ export const useReqoreTheme = (
       return theme;
     }
 
-    let _customTheme: IReqoreCustomTheme = cloneDeep(customTheme);
+    const _customTheme: IReqoreCustomTheme = cloneDeep(customTheme);
 
     if (_customTheme.main) {
       _customTheme.main = getColorFromMaybeString(theme, customTheme.main);

package/src/hooks/useWhyDidYouUpdate.ts

@@ -23,7 +23,7 @@ export function useWhyDidYouUpdate(name, props) {
       });
       // If changesObj not empty then output to console
       if (Object.keys(changesObj).length) {
-        console.log('[why-did-you-update]', name, changesObj);
+        console.warn('[why-did-you-update]', name, changesObj);
       }
     }
     // Finally update previousProps with current props for next hook call

package/src/stories/KeyValueTable/KeyValueTable.stories.tsx

@@ -1,8 +1,11 @@
 import { StoryObj } from '@storybook/react';
+import { userEvent } from '@storybook/testing-library';
+import { noop } from 'lodash';
 import ReqoreIcon from '../../components/Icon';
 import { IReqoreKeyValueTableProps, ReqoreKeyValueTable } from '../../components/KeyValueTable';
 import { IReqoreTableRowData, TReqoreTableColumnContent } from '../../components/Table';
 import { TReqorePaginationType } from '../../constants/paging';
+import { Exportable as ExportableTable } from '../Table/Table.stories';
 import { StoryMeta } from '../utils';
 import { CustomIntentArg, FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
@@ -91,6 +94,16 @@ export const Basic: Story = {};
 export const NoLabel: Story = {
   args: {
     label: undefined,
+    onRowClick: noop,
+  },
+};
+
+export const InteractiveRows: Story = {
+  args: {
+    onRowClick: noop,
+  },
+  play: async ({ canvasElement }) => {
+    await userEvent.hover(canvasElement.querySelectorAll('.reqore-table-row')[2]);
   },
 };
 
@@ -106,12 +119,35 @@ export const NotFlat: Story = {
   },
 };
 
+export const NoHeight: Story = {
+  args: {
+    height: undefined,
+  },
+};
+
 export const Striped: Story = {
   args: {
     striped: true,
   },
 };
 
+export const Exportable: Story = {
+  args: {
+    exportable: true,
+    zoomable: true,
+  },
+  play: async ({ canvasElement, ...rest }) => {
+    // @ts-ignore
+    await ExportableTable.play({ canvasElement, ...rest });
+  },
+};
+
+export const Sortable: Story = {
+  args: {
+    sortable: true,
+  },
+};
+
 export const Filterable: Story = {
   args: {
     filterable: true,
@@ -139,6 +175,29 @@ export const AllFiltersActive: Story = {
   },
 };
 
+export const WithActions: Story = {
+  args: {
+    rowActions: () => [
+      {
+        icon: 'EditLine',
+      },
+      {
+        icon: 'DeleteBinLine',
+        intent: 'danger',
+      },
+    ],
+    zoomable: true,
+  },
+};
+
+export const CustomTheme: Story = {
+  args: {
+    customTheme: { main: '#ff0000' },
+    flat: false,
+    transparent: false,
+  },
+};
+
 export const NoDataMessage: Story = {
   args: {
     filterable: true,

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

@@ -109,6 +109,31 @@ export const CustomTheme: Story = {
   },
 };
 
+export const WithMargin: Story = {
+  render: () => (
+    <>
+      <ReqoreMessage margin='both' title='Bottom & top margin'>
+        In to am attended desirous raptures declared diverted confined at. Collected instantly
+        remaining up certainly to necessary as. Over walk dull into son boy door went new. At or
+        happiness commanded daughters as.
+      </ReqoreMessage>
+      <ReqoreMessage margin='top' title='Top margin'>
+        In to am attended desirous raptures declared diverted confined at.
+      </ReqoreMessage>
+      <ReqoreMessage margin='bottom' size='big' title='Bottom margin'>
+        In to am attended desirous raptures declared diverted confined at. Collected instantly
+        remaining up certainly to necessary as. Over walk dull into son boy door went new. At or
+        happiness commanded daughters as.
+      </ReqoreMessage>
+      <ReqoreMessage margin='bottom' size='small' title='Bottom small margin'>
+        In to am attended desirous raptures declared diverted confined at. Collected instantly
+        remaining up certainly to necessary as. Over walk dull into son boy door went new. At or
+        happiness commanded daughters as.
+      </ReqoreMessage>
+    </>
+  ),
+};
+
 export const Effect: Story = {
   render: Template,
 

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

@@ -1,5 +1,6 @@
 import { StoryObj } from '@storybook/react';
-import { fireEvent, waitFor, within } from '@storybook/testing-library';
+import { fireEvent, userEvent, waitFor, within } from '@storybook/testing-library';
+import { noop, slice } from 'lodash';
 import { StyledEffect } from '../../components/Effect';
 import { IReqoreTableColumn, IReqoreTableProps, IReqoreTableRowData } from '../../components/Table';
 import { IReqoreCustomTableBodyCellProps } from '../../components/Table/cell';
@@ -375,6 +376,22 @@ export const NotFlat: Story = {
   },
 };
 
+export const NoHeight: Story = {
+  args: {
+    height: undefined,
+    data: slice(tableData.data, 0, 150),
+  },
+};
+
+export const InteractiveRows: Story = {
+  args: {
+    onRowClick: noop,
+  },
+  play: async ({ canvasElement }) => {
+    await userEvent.hover(canvasElement.querySelectorAll('.reqore-table-row')[2]);
+  },
+};
+
 export const Striped: Story = {
   args: {
     striped: true,