@qoretechnologies/reqore 0.35.3 → 0.36.1

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',
+  },
 };