@qoretechnologies/reqore 0.36.0 → 0.36.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',
+          },
+        },
+      },
+    },
   },
 };

package/src/stories/Navbar/Navbar.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 ReqoreContent from '../../components/Content';
 import ReqoreIcon from '../../components/Icon';
@@ -14,17 +14,25 @@ import {
   ReqoreNavbarItem,
   ReqorePopover,
 } from '../../index';
+import { StoryMeta } from '../utils';
 import { FlatArg, NoContentArg } from '../utils/args';
 
-export default {
+const meta = {
   title: 'Layout/Header & Footer/Stories',
+  component: ReqoreHeader,
+  args: {
+    withoutContent: true,
+  },
   argTypes: {
     ...FlatArg,
     ...NoContentArg,
   },
-} as Meta<IReqoreNavbarProps>;
+} as StoryMeta<typeof ReqoreHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IReqoreNavbarProps> = (args: IReqoreNavbarProps) => {
+const Template: StoryFn<IReqoreNavbarProps> = (args: IReqoreNavbarProps) => {
   return (
     <>
       <ReqoreHeader {...args}>
@@ -106,4 +114,6 @@ const Template: Story<IReqoreNavbarProps> = (args: IReqoreNavbarProps) => {
   );
 };
 
-export const Basic = Template.bind({});
+export const Basic: Story = {
+  render: Template,
+};

package/src/stories/Notifications/Interactive.stories.tsx

@@ -1,14 +1,15 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
-import ReqoreNotification, {
-  IReqoreNotificationProps,
-} from '../../components/Notifications/notification';
-import { IReqoreUIProviderProps } from '../../containers/UIProvider';
+import { StoryObj } from '@storybook/react';
+import ReqoreNotification from '../../components/Notifications/notification';
 import { ReqoreUIProvider, useReqoreProperty } from '../../index';
+import { StoryMeta, StoryRenderer } from '../utils';
 
-export default {
+const meta = {
   title: 'Other/Notifications/Interactive/Stories',
   component: ReqoreNotification,
-} as Meta;
+} as StoryMeta<typeof ReqoreNotification>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
 const AddingButton = ({ id, onClick, onClose, onFinish }: any) => {
   const addNotification = useReqoreProperty('addNotification');
@@ -54,10 +55,7 @@ const UpdatingButton = ({ id }) => {
   );
 };
 
-const Template: Story<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
-  theme,
-  ...args
-}: IReqoreNotificationProps & IReqoreUIProviderProps & { id?: string | number }) => (
+const Template: StoryRenderer<typeof meta> = ({ theme, ...args }) => (
   <ReqoreUIProvider theme={theme}>
     <div
       style={{
@@ -71,35 +69,49 @@ const Template: Story<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
     >
       <h4>Hello, I am a notification testing page</h4>
       <AddingButton {...args} />
-      {args.id && <UpdatingButton id={args.id} />}
+      {args.notificationId && <UpdatingButton id={args.id} />}
     </div>
   </ReqoreUIProvider>
 );
 
-export const Adding = Template.bind({});
+export const Adding: Story = {
+  render: Template,
+};
+
+export const Updating: Story = {
+  render: Template,
 
-export const Updating = Template.bind({});
-Updating.args = {
-  id: 'test',
+  args: {
+    notificationId: 'test',
+  },
 };
 
-export const Clickable = Template.bind({});
-Clickable.args = {
-  onClick: (id) => {
-    alert(`Notification ${id} clicked`);
+export const Clickable: Story = {
+  render: Template,
+
+  args: {
+    onClick: () => {
+      alert(`Notification clicked`);
+    },
   },
 };
 
-export const CloseCallback = Template.bind({});
-CloseCallback.args = {
-  onClose: (id) => {
-    alert(`Notification ${id} closed`);
+export const CloseCallback: Story = {
+  render: Template,
+
+  args: {
+    onClose: () => {
+      alert(`Notification closed`);
+    },
   },
 };
 
-export const FinishCallback = Template.bind({});
-FinishCallback.args = {
-  onFinish: (id) => {
-    alert(`Notification ${id} finished`);
+export const FinishCallback: Story = {
+  render: Template,
+
+  args: {
+    onFinish: () => {
+      alert(`Notification finished`);
+    },
   },
 };

package/src/stories/Notifications/Notification.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 { useState } from 'react';
 import { useMount } from 'react-use';
@@ -7,13 +7,17 @@ import ReqoreNotification, {
 } from '../../components/Notifications/notification';
 import { IReqoreUIProviderProps } from '../../containers/UIProvider';
 import { ReqoreTag, ReqoreUIProvider } from '../../index';
+import { StoryMeta } from '../utils';
 
-export default {
+const meta: StoryMeta<typeof ReqoreNotification> = {
   title: 'Other/Notifications/Item/Stories',
   component: ReqoreNotification,
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
+const Template: StoryFn<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
   theme,
   ...args
 }: IReqoreNotificationProps & IReqoreUIProviderProps) => (
@@ -119,7 +123,7 @@ const Template: Story<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
   </ReqoreUIProvider>
 );
 
-const SingleTemplate: Story<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
+const SingleTemplate: StoryFn<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
   theme,
   ...args
 }: IReqoreNotificationProps & IReqoreUIProviderProps) => (
@@ -128,46 +132,54 @@ const SingleTemplate: Story<IReqoreNotificationProps & IReqoreUIProviderProps> =
   </ReqoreUIProvider>
 );
 
-export const Default = Template.bind({});
+export const Default: Story = {
+  render: Template,
+};
 
-export const CustomColors = Template.bind({});
+export const CustomColors: Story = {
+  render: Template,
 
-CustomColors.args = {
-  theme: {
-    notifications: {
-      info: '#6c2d80',
-      success: '#81a194',
-      pending: '#b8d8f5',
-      warning: '#382d31',
-      danger: '#786714',
+  args: {
+    theme: {
+      notifications: {
+        info: '#6c2d80',
+        success: '#81a194',
+        pending: '#b8d8f5',
+        warning: '#382d31',
+        danger: '#786714',
+      },
     },
   },
-} as IReqoreUIProviderProps;
-
-export const CustomColors2 = Template.bind({});
-
-CustomColors2.args = {
-  theme: {
-    notifications: {
-      info: '#d6bac0',
-      success: '#2aeb37',
-      pending: '#181d7d',
-      warning: '#96714e',
-      danger: '#b87cd6',
+};
+
+export const CustomColors2: Story = {
+  render: Template,
+
+  args: {
+    theme: {
+      notifications: {
+        info: '#d6bac0',
+        success: '#2aeb37',
+        pending: '#181d7d',
+        warning: '#96714e',
+        danger: '#b87cd6',
+      },
     },
   },
-} as IReqoreUIProviderProps;
+};
 
-export const WithTimeout = SingleTemplate.bind({});
+export const WithTimeout: Story = {
+  render: SingleTemplate,
 
-WithTimeout.args = {
-  type: 'info',
-  content: 'I am a notification with a 10s timeout',
-  onClick: noop,
-  duration: 10000,
+  args: {
+    type: 'info',
+    content: 'I am a notification with a 10s timeout',
+    onClick: noop,
+    duration: 10000,
+  },
 };
 
-const UpdateTemplate: Story<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
+const UpdateTemplate: StoryFn<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
   theme,
   ...args
 }: IReqoreNotificationProps & IReqoreUIProviderProps) => {
@@ -192,11 +204,13 @@ const UpdateTemplate: Story<IReqoreNotificationProps & IReqoreUIProviderProps> =
   );
 };
 
-export const WithUpdate = UpdateTemplate.bind({});
+export const WithUpdate: Story = {
+  render: UpdateTemplate,
 
-WithUpdate.args = {
-  type: 'pending',
-  content: 'I am a notification with a 10s timeout thats gonna update',
-  onClick: noop,
-  duration: 10000,
+  args: {
+    type: 'pending',
+    content: 'I am a notification with a 10s timeout thats gonna update',
+    onClick: noop,
+    duration: 10000,
+  },
 };

package/src/stories/Notifications/Notifications.stories.tsx

@@ -1,35 +1,33 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { noop } from 'lodash';
 import ReqoreNotificationsWrapper, {
   IReqoreNotificationsWrapperProps,
 } from '../../components/Notifications';
-import ReqoreNotification, {
-  IReqoreNotificationProps,
-} from '../../components/Notifications/notification';
+import ReqoreNotification from '../../components/Notifications/notification';
 import { IReqoreUIProviderProps } from '../../containers/UIProvider';
 import { ReqoreUIProvider } from '../../index';
+import { StoryMeta } from '../utils';
 
-export default {
+const meta: StoryMeta<typeof ReqoreNotificationsWrapper> = {
   title: 'Other/Notifications/Wrapper/Stories',
-  component: ReqoreNotification,
-} as Meta;
+  component: ReqoreNotificationsWrapper,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<
-  IReqoreNotificationProps & IReqoreUIProviderProps & IReqoreNotificationsWrapperProps
-> = ({
+const Template: StoryFn<IReqoreUIProviderProps & IReqoreNotificationsWrapperProps> = ({
   theme,
   ...args
-}: IReqoreNotificationProps & IReqoreUIProviderProps & IReqoreNotificationsWrapperProps) => (
+}) => (
   <ReqoreUIProvider theme={theme}>
     <ReqoreNotificationsWrapper position={args.position}>
       <ReqoreNotification
-        {...args}
         type='info'
         content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
         onClick={noop}
       />
       <ReqoreNotification
-        {...args}
         type='info'
         content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
         onClick={noop}
@@ -38,28 +36,46 @@ const Template: Story<
   </ReqoreUIProvider>
 );
 
-export const Top = Template.bind({});
-export const Bottom = Template.bind({});
-Bottom.args = {
-  position: 'BOTTOM',
+export const Top: Story = {
+  render: Template,
 };
 
-export const TopLeft = Template.bind({});
-TopLeft.args = {
-  position: 'TOP LEFT',
+export const Bottom: Story = {
+  render: Template,
+
+  args: {
+    position: 'BOTTOM',
+  },
 };
 
-export const TopRight = Template.bind({});
-TopRight.args = {
-  position: 'TOP RIGHT',
+export const TopLeft: Story = {
+  render: Template,
+
+  args: {
+    position: 'TOP LEFT',
+  },
 };
 
-export const BottomLeft = Template.bind({});
-BottomLeft.args = {
-  position: 'BOTTOM LEFT',
+export const TopRight: Story = {
+  render: Template,
+
+  args: {
+    position: 'TOP RIGHT',
+  },
 };
 
-export const BottomRight = Template.bind({});
-BottomRight.args = {
-  position: 'BOTTOM RIGHT',
+export const BottomLeft: Story = {
+  render: Template,
+
+  args: {
+    position: 'BOTTOM LEFT',
+  },
+};
+
+export const BottomRight: Story = {
+  render: Template,
+
+  args: {
+    position: 'BOTTOM RIGHT',
+  },
 };