@qoretechnologies/reqore 0.36.0 → 0.36.1

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { IReqoreControlGroupProps } from '../../components/ControlGroup';
 import {
   ReqoreButton,
@@ -9,12 +9,14 @@ import {
   ReqoreTag,
   ReqoreVerticalSpacer,
 } from '../../index';
+import { StoryMeta } from '../utils';
 import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
 
-export default {
+const meta = {
   title: 'Form/Control Group/Stories',
+  component: ReqoreControlGroup,
   argTypes: {
     ...SizeArg,
     ...GapSizeArg,
@@ -44,9 +46,19 @@ export default {
       control: 'boolean',
     }),
   },
-} as Meta<IReqoreControlGroupProps>;
+  args: {
+    wrap: true,
+    vertical: false,
+    stack: false,
+    fluid: false,
+    minimal: false,
+  },
+} as StoryMeta<typeof ReqoreControlGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProps) => {
+const Template: StoryFn<typeof ReqoreControlGroup> = (args) => {
   if (args.fill) {
     return (
       <>
@@ -274,72 +286,114 @@ const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProp
   );
 };
 
-export const Basic = Template.bind({});
-export const Minimal = Template.bind({});
-Minimal.args = {
-  minimal: true,
+export const Basic: Story = {
+  render: Template,
 };
 
-export const Fluid = Template.bind({});
-Fluid.args = {
-  fluid: true,
+export const Minimal: Story = {
+  render: Template,
+
+  args: {
+    minimal: true,
+  },
 };
 
-export const Fill = Template.bind({});
-Fill.args = {
-  fill: true,
+export const Fluid: Story = {
+  render: Template,
+
+  args: {
+    fluid: true,
+  },
 };
 
-export const NotFlat = Template.bind({});
-NotFlat.args = {
-  flat: false,
+export const Fill: Story = {
+  render: Template,
+
+  args: {
+    fill: true,
+  },
 };
 
-export const Vertical = Template.bind({});
-Vertical.args = {
-  vertical: true,
+export const NotFlat: Story = {
+  render: Template,
+
+  args: {
+    flat: false,
+  },
 };
 
-export const VerticalFluid = Template.bind({});
-VerticalFluid.args = {
-  vertical: true,
-  fluid: true,
+export const Vertical: Story = {
+  render: Template,
+
+  args: {
+    vertical: true,
+  },
+};
+
+export const VerticalFluid: Story = {
+  render: Template,
+
+  args: {
+    vertical: true,
+    fluid: true,
+  },
 };
 
-export const VerticalStackedFluid = Template.bind({});
-VerticalStackedFluid.args = {
-  vertical: true,
-  stack: true,
-  fluid: true,
+export const VerticalStackedFluid: Story = {
+  render: Template,
+
+  args: {
+    vertical: true,
+    stack: true,
+    fluid: true,
+  },
 };
 
-export const Stacked = Template.bind({});
-Stacked.args = {
-  stack: true,
+export const Stacked: Story = {
+  render: Template,
+
+  args: {
+    stack: true,
+  },
 };
 
-export const BigGapSize = Template.bind({});
-BigGapSize.args = {
-  gapSize: 'big',
+export const BigGapSize: Story = {
+  render: Template,
+
+  args: {
+    gapSize: 'big',
+  },
 };
 
-export const NoWrap = Template.bind({});
-NoWrap.args = {
-  wrap: false,
+export const NoWrap: Story = {
+  render: Template,
+
+  args: {
+    wrap: false,
+  },
 };
 
-export const HorizontalAlign = Template.bind({});
-HorizontalAlign.args = {
-  vertical: true,
-  horizontalAlign: 'center',
+export const HorizontalAlign: Story = {
+  render: Template,
+
+  args: {
+    vertical: true,
+    horizontalAlign: 'center',
+  },
 };
 
-export const VerticalAlign = Template.bind({});
-VerticalAlign.args = {
-  verticalAlign: 'flex-end',
+export const VerticalAlign: Story = {
+  render: Template,
+
+  args: {
+    verticalAlign: 'flex-end',
+  },
 };
 
-export const Responsive = Template.bind({});
-Responsive.args = {
-  responsive: true,
+export const Responsive: Story = {
+  render: Template,
+
+  args: {
+    responsive: true,
+  },
 };

package/src/stories/Drawer/Drawer.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { noop } from 'lodash';
 import { IReqoreDrawerProps, ReqoreDrawer } from '../../components/Drawer';
 import { IReqoreInputProps } from '../../components/Input';
@@ -10,12 +10,14 @@ import {
   ReqoreTabsContent,
   useReqoreProperty,
 } from '../../index';
+import { StoryMeta } from '../utils';
 import { FlatArg, IntentArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreDrawerProps>();
 
-export default {
+const meta = {
   title: 'Dialogs/Drawer/Stories',
+  component: ReqoreDrawer,
   parameters: {
     chromatic: {
       viewports: [450, 600, 1440],
@@ -83,9 +85,24 @@ export default {
     }),
     ...IntentArg,
   },
-} as Meta;
+  args: {
+    isOpen: true,
+    position: 'right',
+    resizable: true,
+    hidable: true,
+    size: 'auto',
+    minSize: '150px',
+    maxSize: '90vw',
+    blur: 3,
+    opacity: 1,
+    hasBackdrop: true,
+  },
+} as StoryMeta<typeof ReqoreDrawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IReqoreDrawerProps> = (args: IReqoreDrawerProps) => {
+const Template: StoryFn<typeof ReqoreDrawer> = (args) => {
   const confirmAction = useReqoreProperty('confirmAction');
 
   return (
@@ -236,20 +253,38 @@ const Template: Story<IReqoreDrawerProps> = (args: IReqoreDrawerProps) => {
   );
 };
 
-export const Basic = Template.bind({});
-export const Flat = Template.bind({});
-Flat.args = {
-  flat: true,
+export const Basic: Story = {
+  render: Template,
 };
-export const Floating = Template.bind({});
-Floating.args = {
-  floating: true,
+
+export const Flat: Story = {
+  render: Template,
+
+  args: {
+    flat: true,
+  },
 };
-export const Transparent = Template.bind({});
-Transparent.args = {
-  opacity: 0.5,
+
+export const Floating: Story = {
+  render: Template,
+
+  args: {
+    floating: true,
+  },
 };
-export const WithSize = Template.bind({});
-WithSize.args = {
-  size: '500px',
+
+export const Transparent: Story = {
+  render: Template,
+
+  args: {
+    opacity: 0.5,
+  },
+};
+
+export const WithSize: Story = {
+  render: Template,
+
+  args: {
+    size: '500px',
+  },
 };

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -1,13 +1,15 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
-import ReqoreButton from '../../components/Button';
+import { StoryFn, StoryObj } from '@storybook/react';
+import ReqoreButton, { IReqoreButtonProps } from '../../components/Button';
 import { IReqoreDropdownProps } from '../../components/Dropdown';
 import { ReqoreControlGroup, ReqoreDropdown, ReqoreInput } from '../../index';
+import { StoryMeta } from '../utils';
 import { argManager } from '../utils/args';
 
 const { createArg, disableArg } = argManager<IReqoreDropdownProps>();
 
-export default {
+const meta = {
   title: 'Form/Dropdown/Stories',
+  component: ReqoreDropdown,
   parameters: {
     chromatic: {
       delay: 1500,
@@ -30,105 +32,112 @@ export default {
       table: {
         disable: true,
       },
-
-      defaultValue: [
-        {
-          selected: true,
-          value: 'Hello',
-          icon: 'SunCloudyLine',
-        },
-        {
-          value: 'How are ya, I am super long item and I am not going to fit in the dropdown',
-          icon: 'BatteryChargeFill',
-        },
-        {
-          disabled: true,
-          value: 'i aM diSAblEd',
-          icon: 'StopCircleLine',
-        },
-        {
-          divider: true,
-          label: 'Divider',
-          dividerAlign: 'left',
-        },
-        {
-          selected: true,
-          value: 'Hello',
-          icon: 'SunCloudyLine',
-        },
-        {
-          value: 'How are ya',
-          icon: 'BatteryChargeFill',
-          description:
-            "Yep, and the description is now also available and possible, isn't that great?",
-        },
-        {
-          disabled: true,
-          value: 'i aM diSAblEd',
-          icon: 'StopCircleLine',
-        },
-        {
-          selected: true,
-          value: 'Hello',
-          icon: 'SunCloudyLine',
-        },
-        {
-          value: 'How are ya',
-          icon: 'BatteryChargeFill',
-        },
-        {
-          disabled: true,
-          value: 'i aM diSAblEd',
-          icon: 'StopCircleLine',
-        },
-        {
-          selected: true,
-          value: 'Hello',
-          icon: 'SunCloudyLine',
-        },
-        {
-          value: 'How are ya',
-          icon: 'BatteryChargeFill',
-        },
-        {
-          disabled: true,
-          value: 'i aM diSAblEd',
-          icon: 'StopCircleLine',
-        },
-        {
-          selected: true,
-          value: 'Hello',
-          icon: 'SunCloudyLine',
-        },
-        {
-          value: 'How are ya',
-          icon: 'BatteryChargeFill',
-        },
-        {
-          disabled: true,
-          value: 'i aM diSAblEd',
-          icon: 'StopCircleLine',
-        },
-        {
-          selected: true,
-          value: 'Hello',
-          icon: 'SunCloudyLine',
-        },
-        {
-          value: 'How are ya',
-          icon: 'BatteryChargeFill',
-        },
-        {
-          disabled: true,
-          value: 'i aM diSAblEd',
-          icon: 'StopCircleLine',
-        },
-      ],
     }),
   },
-} as Meta<IReqoreDropdownProps>;
+  args: {
+    component: ReqoreButton,
+    filterable: true,
+    items: [
+      {
+        selected: true,
+        value: 'Hello',
+        icon: 'SunCloudyLine',
+      },
+      {
+        value: 'How are ya, I am super long item and I am not going to fit in the dropdown',
+        icon: 'BatteryChargeFill',
+      },
+      {
+        disabled: true,
+        value: 'i aM diSAblEd',
+        icon: 'StopCircleLine',
+      },
+      {
+        divider: true,
+        label: 'Divider',
+        dividerAlign: 'left',
+      },
+      {
+        selected: true,
+        value: 'Hello',
+        icon: 'SunCloudyLine',
+      },
+      {
+        value: 'How are ya',
+        icon: 'BatteryChargeFill',
+        description:
+          "Yep, and the description is now also available and possible, isn't that great?",
+      },
+      {
+        disabled: true,
+        value: 'i aM diSAblEd',
+        icon: 'StopCircleLine',
+      },
+      {
+        selected: true,
+        value: 'Hello',
+        icon: 'SunCloudyLine',
+      },
+      {
+        value: 'How are ya',
+        icon: 'BatteryChargeFill',
+      },
+      {
+        disabled: true,
+        value: 'i aM diSAblEd',
+        icon: 'StopCircleLine',
+      },
+      {
+        selected: true,
+        value: 'Hello',
+        icon: 'SunCloudyLine',
+      },
+      {
+        value: 'How are ya',
+        icon: 'BatteryChargeFill',
+      },
+      {
+        disabled: true,
+        value: 'i aM diSAblEd',
+        icon: 'StopCircleLine',
+      },
+      {
+        selected: true,
+        value: 'Hello',
+        icon: 'SunCloudyLine',
+      },
+      {
+        value: 'How are ya',
+        icon: 'BatteryChargeFill',
+      },
+      {
+        disabled: true,
+        value: 'i aM diSAblEd',
+        icon: 'StopCircleLine',
+      },
+      {
+        selected: true,
+        value: 'Hello',
+        icon: 'SunCloudyLine',
+      },
+      {
+        value: 'How are ya',
+        icon: 'BatteryChargeFill',
+      },
+      {
+        disabled: true,
+        value: 'i aM diSAblEd',
+        icon: 'StopCircleLine',
+      },
+    ],
+  },
+} as StoryMeta<typeof ReqoreDropdown<IReqoreButtonProps>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
+const Template: StoryFn<typeof ReqoreDropdown<IReqoreButtonProps>> = (args) => {
   if (args.scrollToSelected || args.paging) {
     return (
       <ReqoreControlGroup>
@@ -214,72 +223,95 @@ const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
   );
 };
 
-export const Basic = Template.bind({});
-export const CustomComponent = Template.bind({});
-CustomComponent.args = {
-  component: ReqoreInput,
-  placeholder: 'Custom component',
+export const Basic: Story = {
+  render: Template,
 };
-export const ScrollToSelectedItem = Template.bind({});
-ScrollToSelectedItem.args = {
-  scrollToSelected: true,
-  label: 'Dropdown that scrolls to selected item',
+
+export const CustomComponent: Story = {
+  render: Template,
+
+  args: {
+    component: ReqoreInput,
+    placeholder: 'Custom component',
+  },
 };
 
-export const WithCustomFilter: Story<IReqoreDropdownProps> = Template.bind({});
-WithCustomFilter.args = {
-  label: 'Dropdown with custom filter',
-  filterPlaceholder: 'Custom filter placeholder',
-  filter: 'something',
-  onFilterChange: (value) => {
-    console.log(value);
+export const ScrollToSelectedItem: Story = {
+  render: Template,
+
+  args: {
+    scrollToSelected: true,
+    label: 'Dropdown that scrolls to selected item',
   },
 };
-export const WithPaging: Story<IReqoreDropdownProps> = Template.bind({});
-WithPaging.args = {
-  paging: {
-    itemsPerPage: 50,
-    changePageOnScroll: 'horizontal',
+
+export const WithCustomFilter: Story = {
+  render: Template,
+
+  args: {
+    label: 'Dropdown with custom filter',
+    filterPlaceholder: 'Custom filter placeholder',
+    filter: 'something',
+    onFilterChange: (value) => {
+      console.log(value);
+    },
+  },
+};
+
+export const WithPaging: Story = {
+  render: Template,
+
+  args: {
+    paging: {
+      itemsPerPage: 50,
+      changePageOnScroll: 'horizontal',
+    },
+    label: 'Dropdown with paging',
   },
-  label: 'Dropdown with paging',
 };
 
-export const WithLoadMore: Story<IReqoreDropdownProps> = Template.bind({});
-WithLoadMore.args = {
-  paging: {
-    fluid: true,
-    infinite: true,
-    scrollOnLoadMore: true,
-    loadMoreLabel: 'Load additional items...',
-    showLabels: true,
-    includeBottomControls: false,
+export const WithLoadMore: Story = {
+  render: Template,
+
+  args: {
+    paging: {
+      fluid: true,
+      infinite: true,
+      scrollOnLoadMore: true,
+      loadMoreLabel: 'Load additional items...',
+      showLabels: true,
+      includeBottomControls: false,
+    },
+    label: 'Dropdown with load more',
   },
-  label: 'Dropdown with load more',
 };
 
-export const WithCustomPaging: Story<IReqoreDropdownProps> = Template.bind({});
-WithCustomPaging.args = {
-  paging: {
-    fluid: true,
-    infinite: true,
-    scrollOnLoadMore: true,
-    pageControlsPosition: 'both',
-    loadMoreLabel: 'Load additional items...',
-    showLabels: true,
-    loadMoreButtonProps: {
-      textAlign: 'center',
-      effect: {
-        gradient: {
-          colors: 'info',
-          animate: 'hover',
+export const WithCustomPaging: Story = {
+  render: Template,
+
+  args: {
+    paging: {
+      fluid: true,
+      infinite: true,
+      scrollOnLoadMore: true,
+      pageControlsPosition: 'both',
+      loadMoreLabel: 'Load additional items...',
+      showLabels: true,
+      loadMoreButtonProps: {
+        textAlign: 'center',
+        effect: {
+          gradient: {
+            colors: 'info',
+            animate: 'hover',
+          },
+          textSize: 'small',
+          uppercase: true,
+          spaced: 3,
         },
-        textSize: 'small',
-        uppercase: true,
-        spaced: 3,
       },
     },
+    label: 'Dropdown with custom paging',
   },
-  label: 'Dropdown with custom paging',
-};
 
-WithCustomPaging.play = () => {};
+  play: () => {},
+};

package/src/stories/ExportModal/ExportModal.stories.tsx

@@ -0,0 +1,18 @@
+import { StoryObj } from '@storybook/react';
+import { ReqoreExportModal } from '../../components/ExportModal';
+import { tableData } from '../../mock/tableData';
+import { StoryMeta } from '../utils';
+
+const meta = {
+  title: 'Utilities/Export Modal/Stories',
+  component: ReqoreExportModal,
+} as StoryMeta<typeof ReqoreExportModal>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    data: tableData,
+  },
+};