@qoretechnologies/reqore 0.35.3 → 0.36.1

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

@@ -0,0 +1,224 @@
+import { StoryObj } from '@storybook/react';
+import ReqoreIcon from '../../components/Icon';
+import { IReqoreKeyValueTableProps, ReqoreKeyValueTable } from '../../components/KeyValueTable';
+import { IReqoreTableRowData, TReqoreTableColumnContent } from '../../components/Table';
+import { TReqorePaginationType } from '../../constants/paging';
+import { StoryMeta } from '../utils';
+import { CustomIntentArg, FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
+
+const { createArg } = argManager<IReqoreKeyValueTableProps>();
+
+const meta = {
+  title: 'Collections/Key Value Table/Stories',
+  component: ReqoreKeyValueTable,
+  argTypes: {
+    ...createArg('rounded', {
+      type: 'boolean',
+      name: 'Rounded',
+      description: 'If the table should have rounded corners',
+    }),
+    ...createArg('striped', {
+      type: 'boolean',
+      name: 'Striped',
+      description: 'If the table should have striped rows',
+    }),
+    ...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', {
+      name: 'Data',
+      description: 'The data to be displayed in the table',
+    }),
+    ...createArg('fill', {
+      type: 'boolean',
+      defaultValue: false,
+      name: 'Fill',
+      description: 'Whether the table should fill the parent',
+    }),
+    ...SizeArg,
+    ...FlatArg,
+    ...IntentArg,
+    ...CustomIntentArg('selectedRowIntent'),
+  },
+  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 = {};
+
+export const NoLabel: Story = {
+  args: {
+    label: undefined,
+  },
+};
+
+export const CustomWidth: Story = {
+  args: {
+    width: 400,
+  },
+};
+
+export const NotFlat: Story = {
+  args: {
+    flat: false,
+  },
+};
+
+export const Striped: Story = {
+  args: {
+    striped: true,
+  },
+};
+
+export const Filterable: Story = {
+  args: {
+    filterable: true,
+  },
+};
+
+export const DefaultFilter: Story = {
+  args: {
+    filterable: true,
+    filter: 'Mach',
+  },
+};
+
+export const DefaultValueFilter: Story = {
+  args: {
+    defaultValueFilter: 80,
+  },
+};
+
+export const AllFiltersActive: Story = {
+  args: {
+    filterable: true,
+    filter: 1,
+    defaultValueFilter: 80,
+  },
+};
+
+export const NoDataMessage: Story = {
+  args: {
+    filterable: true,
+    filter: 'asjkghakshgjkashg',
+  },
+};
+
+export const Zoomable: Story = {
+  args: {
+    zoomable: true,
+  },
+};
+
+export const FillParent: Story = {
+  args: {
+    fill: true,
+  },
+};
+
+export const Sizes: Story = {
+  args: {
+    size: 'small',
+    filterable: true,
+    wrapperSize: 'big',
+  },
+};
+
+export const DefaultPaging: Story = {
+  args: {
+    paging: 'buttons',
+  },
+};
+
+export const CustomColumnWidths: Story = {
+  args: {
+    minValueWidth: 500,
+    maxKeyWidth: 100,
+  },
+};
+
+export const CustomKeyIntent: Story = {
+  args: {
+    keyColumnIntent: 'success',
+  },
+};
+
+export const CustomAlign: Story = {
+  args: {
+    keyAlign: 'right',
+    valueAlign: 'center',
+  },
+};
+
+export const CustomPaging: Story = {
+  args: {
+    paging: {
+      fluid: true,
+      loadMoreLabel: 'Load more rows...',
+      showLabels: true,
+      infinite: true,
+      itemsPerPage: 2,
+    } as TReqorePaginationType<IReqoreTableRowData>,
+  },
+};
+
+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,76 @@ 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 Minimal: Story<IReqoreMessageProps> = Template.bind({});
-Minimal.args = {
-  minimal: true,
-  intent: 'danger',
+
+export const Flat: Story = {
+  render: Template,
+
+  args: {
+    flat: true,
+    intent: 'success',
+  },
+};
+
+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 Effect: Story = {
+  render: Template,
+
+  args: {
+    effect: {
+      gradient: {
+        colors: {
+          0: '#eb0e8c',
+          100: 'danger:darken:2',
+        },
       },
     },
   },

package/src/stories/Modal/Modal.stories.tsx

@@ -1,14 +1,25 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { noop } from 'lodash';
 import { useMount } from 'react-use';
 import { IReqoreModalProps } from '../../components/Modal';
 import { ReqoreModal, ReqorePanel, useReqoreProperty } from '../../index';
+import { StoryMeta } from '../utils';
 import { FlatArg, IntentArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreModalProps>();
 
-export default {
+const meta = {
   title: 'Dialogs/Modal/Stories',
+  component: ReqoreModal,
+  args: {
+    isOpen: true,
+    label: 'This is a test',
+    blur: 3,
+    opacity: 1,
+    hasBackdrop: true,
+    width: '80vw',
+    height: '50vh',
+  },
   argTypes: {
     ...IntentArg,
     ...FlatArg,
@@ -49,9 +60,12 @@ export default {
       type: 'string',
     }),
   },
-} as Meta<IReqoreModalProps>;
+} as StoryMeta<typeof ReqoreModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IReqoreModalProps & { confirm?: boolean }> = (args) => {
+const Template: StoryFn<IReqoreModalProps & { confirm?: boolean }> = (args) => {
   const confirmAction = useReqoreProperty('confirmAction');
 
   useMount(() => {
@@ -218,8 +232,14 @@ const Template: Story<IReqoreModalProps & { confirm?: boolean }> = (args) => {
   );
 };
 
-export const Basic = Template.bind({});
-export const ConfirmationModal = Template.bind({});
-ConfirmationModal.args = {
-  confirm: true,
+export const Basic: Story = {
+  render: Template,
+};
+
+export const ConfirmationModal: Story = {
+  render: Template,
+
+  args: {
+    confirm: true,
+  },
 };

package/src/stories/MultiSelect/MultiSelect.stories.tsx

@@ -1,19 +1,25 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { IReqoreMultiSelectProps, ReqoreMultiSelect } from '../../components/MultiSelect';
 import { MultiSelectItems } from '../../mock/multiSelect';
 import { IReqoreIconName } from '../../types/icons';
+import { StoryMeta } from '../utils';
 import { FlatArg, IconArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreMultiSelectProps>();
 
-export default {
+const meta = {
   title: 'Form/Multi Select/Stories',
+  component: ReqoreMultiSelect,
   parameters: {
     chromatic: {
       delay: 500,
     },
   },
+  args: {
+    canCreateItems: true,
+    canRemoveItems: true,
+  },
   argTypes: {
     ...FlatArg,
     ...MinimalArg(),
@@ -30,9 +36,12 @@ export default {
     }),
     ...IconArg('onItemClickIcon', 'Clickable item right icon', null),
   },
-} as Meta<IReqoreMultiSelectProps>;
+} as StoryMeta<typeof ReqoreMultiSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IReqoreMultiSelectProps> = (args: IReqoreMultiSelectProps) => {
+const Template: StoryFn<IReqoreMultiSelectProps> = (args: IReqoreMultiSelectProps) => {
   const [selected, setSelected] = useState<string[]>([
     'Existing item 1',
     'Existing item 3',
@@ -56,48 +65,60 @@ const Template: Story<IReqoreMultiSelectProps> = (args: IReqoreMultiSelectProps)
   );
 };
 
-export const Basic = Template.bind({});
-Basic.args = {
-  onItemClickIcon: 'EditLine' as IReqoreIconName,
-};
-export const Empty = Template.bind({});
-Empty.args = {
-  value: [],
+export const Basic: Story = {
+  render: Template,
+
+  args: {
+    onItemClickIcon: 'EditLine',
+  },
 };
 
-export const AutoOpen = Template.bind({});
-AutoOpen.args = {
-  openOnMount: true,
+export const Empty: Story = {
+  render: Template,
+
+  args: {
+    value: [],
+  },
 };
 
-export const Flat = Template.bind({});
-Flat.args = {
-  flat: true,
+export const AutoOpen: Story = {
+  render: Template,
+
+  args: {
+    openOnMount: true,
+  },
 };
 
-export const Minimal = Template.bind({});
-Minimal.args = {
-  minimal: true,
+export const Flat: Story = {
+  render: Template,
+
+  args: {
+    flat: true,
+  },
 };
 
-export const Clickable = Template.bind({});
-Clickable.args = {
-  onItemClick: (item) => console.log('onItemClick', item),
-  onItemClickIcon: 'EditLine' as IReqoreIconName,
+export const Minimal: Story = {
+  render: Template,
+
+  args: {
+    minimal: true,
+  },
 };
 
-export const WithEffect = Template.bind({});
-WithEffect.args = {
-  selectedItemEffect: {
-    gradient: {
-      colors: {
-        0: '#7f60ea',
-        100: '#00fd67',
-      },
-    },
+export const Clickable: Story = {
+  render: Template,
+
+  args: {
+    onItemClick: (item) => console.log('onItemClick', item),
+    onItemClickIcon: 'EditLine' as IReqoreIconName,
   },
-  selectorProps: {
-    effect: {
+};
+
+export const WithEffect: Story = {
+  render: Template,
+
+  args: {
+    selectedItemEffect: {
       gradient: {
         colors: {
           0: '#7f60ea',
@@ -105,5 +126,15 @@ WithEffect.args = {
         },
       },
     },
+    selectorProps: {
+      effect: {
+        gradient: {
+          colors: {
+            0: '#7f60ea',
+            100: '#00fd67',
+          },
+        },
+      },
+    },
   },
 };