@qoretechnologies/reqore 0.36.0 → 0.36.2

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

@@ -1,18 +1,17 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryObj } from '@storybook/react';
 import ReqoreIcon from '../../components/Icon';
 import { IReqoreKeyValueTableProps, ReqoreKeyValueTable } from '../../components/KeyValueTable';
-import {
-  IReqoreTableProps,
-  IReqoreTableRowData,
-  TReqoreTableColumnContent,
-} from '../../components/Table';
+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';
 
 const { createArg } = argManager<IReqoreKeyValueTableProps>();
 
-export default {
+const meta = {
   title: 'Collections/Key Value Table/Stories',
+  component: ReqoreKeyValueTable,
   argTypes: {
     ...createArg('rounded', {
       type: 'boolean',
@@ -37,32 +36,6 @@ export default {
       description: 'The height of the table',
     }),
     ...createArg('data', {
-      defaultValue: {
-        firstName: 'Filip',
-        lastName: 'Machinia',
-        age: 25,
-        married: false,
-        'In Relationship': true,
-        DOB: '1995-01-01',
-        occupation: 'Software Engineer',
-        address: {
-          street: 'Some street',
-          city: 'Some city',
-          country: 'Some country',
-        },
-        groups: ['Admin', 'User'],
-        race: 'Human',
-        sex: 'Male',
-        height: 180,
-        weight: 80,
-        device: undefined,
-        OS: 'MacOS',
-        browser: 'Chrome',
-        email: 'test@test.com',
-        phone: '+420 123 456 789',
-        website: 'https://machinia.com',
-        company: 'Machinia',
-      },
       name: 'Data',
       description: 'The data to be displayed in the table',
     }),
@@ -77,123 +50,216 @@ export default {
     ...IntentArg,
     ...CustomIntentArg('selectedRowIntent'),
   },
-} as Meta<IReqoreTableProps>;
+  args: {
+    height: 600,
+    width: undefined,
+    fill: false,
+    label: 'Table',
+    data: {
+      firstName: 'Filip',
+      lastName: 'Machinia',
+      age: 25,
+      married: false,
+      'In Relationship': true,
+      DOB: '1995-01-01',
+      occupation: 'Software Engineer',
+      address: {
+        street: 'Some street',
+        city: 'Some city',
+        country: 'Some country',
+      },
+      groups: ['Admin', 'User'],
+      race: 'Human',
+      sex: 'Male',
+      height: 180,
+      weight: 80,
+      device: undefined,
+      OS: 'MacOS',
+      browser: 'Chrome',
+      email: 'test@test.com',
+      phone: '+420 123 456 789',
+      website: 'https://machinia.com',
+      company: 'Machinia',
+    },
+  },
+} as StoryMeta<typeof ReqoreKeyValueTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {};
 
-const Template: Story<IReqoreKeyValueTableProps> = (args) => {
-  return <ReqoreKeyValueTable label='Table' {...args} />;
+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 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,
+  },
 };
-export const Striped = Template.bind({});
-Striped.args = {
-  striped: true,
+
+export const DefaultFilter: Story = {
+  args: {
+    filterable: true,
+    filter: 'Mach',
+  },
 };
-export const Filterable = Template.bind({});
-Filterable.args = {
-  filterable: true,
+
+export const DefaultValueFilter: Story = {
+  args: {
+    defaultValueFilter: 80,
+  },
 };
-export const DefaultFilter = Template.bind({});
-DefaultFilter.args = {
-  filterable: true,
-  filter: 'Mach',
+
+export const AllFiltersActive: Story = {
+  args: {
+    filterable: true,
+    filter: 1,
+    defaultValueFilter: 80,
+  },
 };
 
-export const DefaultValueFilter = Template.bind({});
-DefaultValueFilter.args = {
-  defaultValueFilter: 80,
+export const WithActions: Story = {
+  args: {
+    rowActions: () => [
+      {
+        icon: 'EditLine',
+      },
+      {
+        icon: 'DeleteBinLine',
+        intent: 'danger',
+      },
+    ],
+    zoomable: true,
+  },
 };
 
-export const AllFiltersActive = Template.bind({});
-AllFiltersActive.args = {
-  filterable: true,
-  filter: 1,
-  defaultValueFilter: 80,
+export const CustomTheme: Story = {
+  args: {
+    customTheme: { main: '#ff0000' },
+    flat: false,
+    transparent: false,
+  },
 };
 
-export const NoDataMessage = Template.bind({});
-NoDataMessage.args = {
-  filterable: true,
-  filter: 'asjkghakshgjkashg',
+export const NoDataMessage: Story = {
+  args: {
+    filterable: true,
+    filter: 'asjkghakshgjkashg',
+  },
 };
 
-export const Zoomable = Template.bind({});
-Zoomable.args = {
-  zoomable: true,
+export const Zoomable: Story = {
+  args: {
+    zoomable: true,
+  },
 };
 
-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 CustomColumnWidths = Template.bind({});
-CustomColumnWidths.args = {
-  minValueWidth: 500,
-  maxKeyWidth: 100,
+export const CustomColumnWidths: Story = {
+  args: {
+    minValueWidth: 500,
+    maxKeyWidth: 100,
+  },
 };
 
-export const CustomKeyIntent = Template.bind({});
-CustomKeyIntent.args = {
-  keyColumnIntent: 'success',
+export const CustomKeyIntent: Story = {
+  args: {
+    keyColumnIntent: 'success',
+  },
 };
 
-export const CustomAlign = Template.bind({});
-CustomAlign.args = {
-  keyAlign: 'right',
-  valueAlign: 'center',
+export const CustomAlign: Story = {
+  args: {
+    keyAlign: 'right',
+    valueAlign: 'center',
+  },
 };
 
-export const CustomPaging = Template.bind({});
-CustomPaging.args = {
-  paging: {
-    fluid: true,
-    loadMoreLabel: 'Load more rows...',
-    showLabels: true,
-    infinite: true,
-    itemsPerPage: 2,
-  } as TReqorePaginationType<IReqoreTableRowData>,
+export const CustomPaging: Story = {
+  args: {
+    paging: {
+      fluid: true,
+      loadMoreLabel: 'Load more rows...',
+      showLabels: true,
+      infinite: true,
+      itemsPerPage: 2,
+    } as TReqorePaginationType<IReqoreTableRowData>,
+  },
 };
 
-export const CustomValueRenderer = Template.bind({});
-CustomValueRenderer.args = {
-  valueRenderer: ({ value, tableKey }, Component): TReqoreTableColumnContent | JSX.Element => {
-    switch (tableKey) {
-      case 'race':
-        return 'tag:success';
-      case 'sex':
-        return <ReqoreIcon icon={value === 'Male' ? 'User6Line' : 'User6Fill'} />;
-      case 'height':
-        return <>{value} cm</>;
-      case 'weight':
-        return <Component value={value} />;
-      default:
-        return undefined;
-    }
+export const CustomValueRenderer: Story = {
+  args: {
+    valueRenderer: ({ value, tableKey }, Component): TReqoreTableColumnContent | JSX.Element => {
+      switch (tableKey) {
+        case 'race':
+          return 'tag:success';
+        case 'sex':
+          return <ReqoreIcon icon={value === 'Male' ? 'User6Line' : 'User6Fill'} />;
+        case 'height':
+          return <>{value} cm</>;
+        case 'weight':
+          return <Component value={value} />;
+        default:
+          return undefined;
+      }
+    },
   },
 };

package/src/stories/Menu/Menu.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { IReqoreMenuProps } from '../../components/Menu';
 import { IReqoreMenuItemProps } from '../../components/Menu/item';
 import {
@@ -8,12 +8,23 @@ import {
   ReqoreMenuItem,
   ReqorePopover,
 } from '../../index';
+import { StoryMeta } from '../utils';
 import { IntentArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreMenuProps>();
 
-export default {
+const meta = {
   title: 'Navigation/Menu/Stories',
+  component: ReqoreMenu,
+  args: {
+    width: '210px',
+    maxHeight: undefined,
+    wrapText: false,
+    minimal: false,
+    flat: true,
+    rounded: true,
+    transparent: false,
+  },
   argTypes: {
     ...createArg('width', {
       type: 'string',
@@ -75,9 +86,12 @@ export default {
     }),
     ...IntentArg,
   },
-} as Meta<IReqoreMenuProps>;
+} as StoryMeta<typeof ReqoreMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IReqoreMenuProps> = (args) => {
+const Template: StoryFn<IReqoreMenuProps> = (args) => {
   return (
     <ReqoreMenu {...args}>
       <ReqoreInput placeholder='Custom component' icon='Search2Fill' flat={false} />
@@ -193,24 +207,46 @@ const Template: Story<IReqoreMenuProps> = (args) => {
   );
 };
 
-export const Basic = Template.bind({});
-export const WrappedText = Template.bind({});
-WrappedText.args = {
-  wrapText: true,
+export const Basic: Story = {
+  render: Template,
 };
-export const Minimal = Template.bind({});
-Minimal.args = {
-  minimal: true,
+
+export const WrappedText: Story = {
+  render: Template,
+
+  args: {
+    wrapText: true,
+  },
+};
+
+export const Minimal: Story = {
+  render: Template,
+
+  args: {
+    minimal: true,
+  },
 };
-export const NoPadding = Template.bind({});
-NoPadding.args = {
-  padded: false,
+
+export const NoPadding: Story = {
+  render: Template,
+
+  args: {
+    padded: false,
+  },
 };
-export const NotFlat = Template.bind({});
-NotFlat.args = {
-  flat: false,
+
+export const NotFlat: Story = {
+  render: Template,
+
+  args: {
+    flat: false,
+  },
 };
-export const Transparent = Template.bind({});
-Transparent.args = {
-  transparent: true,
+
+export const Transparent: Story = {
+  render: Template,
+
+  args: {
+    transparent: true,
+  },
 };

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

@@ -1,12 +1,14 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { noop } from 'lodash';
 import ReqoreMessage, { IReqoreMessageProps } from '../../components/Message';
+import { StoryMeta } from '../utils';
 import { FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreMessageProps>();
 
-export default {
+const meta = {
   title: 'Other/Message/Stories',
+  component: ReqoreMessage,
   argTypes: {
     ...SizeArg,
     ...FlatArg,
@@ -24,9 +26,16 @@ export default {
       type: 'boolean',
     }),
   },
-} as Meta<IReqoreMessageProps>;
+  args: {
+    title: 'This is a test',
+    minimal: false,
+  },
+} as StoryMeta<typeof ReqoreMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IReqoreMessageProps> = (args: IReqoreMessageProps) => {
+const Template: StoryFn<IReqoreMessageProps> = (args: IReqoreMessageProps) => {
   return (
     <>
       <ReqoreMessage {...args} onClick={noop}>
@@ -40,51 +49,101 @@ const Template: Story<IReqoreMessageProps> = (args: IReqoreMessageProps) => {
   );
 };
 
-export const Basic: Story<IReqoreMessageProps> = Template.bind({});
-export const Flat: Story<IReqoreMessageProps> = Template.bind({});
-Flat.args = {
-  flat: true,
-  intent: 'success',
+export const Basic: Story = {
+  render: Template,
+};
+
+export const Flat: Story = {
+  render: Template,
+
+  args: {
+    flat: true,
+    intent: 'success',
+  },
 };
-export const Minimal: Story<IReqoreMessageProps> = Template.bind({});
-Minimal.args = {
-  minimal: true,
-  intent: 'danger',
+
+export const Minimal: Story = {
+  render: Template,
+
+  args: {
+    minimal: true,
+    intent: 'danger',
+  },
 };
 
-export const WithIconColor: Story<IReqoreMessageProps> = Template.bind({});
-WithIconColor.args = {
-  minimal: true,
-  intent: 'success',
-  iconColor: '#00fd9f',
+export const WithIconColor: Story = {
+  render: Template,
+
+  args: {
+    minimal: true,
+    intent: 'success',
+    iconColor: '#00fd9f',
+  },
 };
 
-export const Opaque: Story<IReqoreMessageProps> = Template.bind({});
-Opaque.args = {
-  opaque: true,
-  intent: 'info',
+export const Opaque: Story = {
+  render: Template,
+
+  args: {
+    opaque: true,
+    intent: 'info',
+  },
 };
 
-export const Pending: Story<IReqoreMessageProps> = Template.bind({});
-Pending.args = {
-  opaque: true,
-  intent: 'pending',
+export const Pending: Story = {
+  render: Template,
+
+  args: {
+    opaque: true,
+    intent: 'pending',
+  },
 };
 
-export const CustomTheme: Story<IReqoreMessageProps> = Template.bind({});
-CustomTheme.args = {
-  customTheme: {
-    main: '#6e1295',
+export const CustomTheme: Story = {
+  render: Template,
+
+  args: {
+    customTheme: {
+      main: '#6e1295',
+    },
   },
 };
 
-export const Effect: Story<IReqoreMessageProps> = Template.bind({});
-Effect.args = {
-  effect: {
-    gradient: {
-      colors: {
-        0: '#eb0e8c',
-        100: 'danger:darken:2',
+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,
+
+  args: {
+    effect: {
+      gradient: {
+        colors: {
+          0: '#eb0e8c',
+          100: 'danger:darken:2',
+        },
       },
     },
   },