@qoretechnologies/reqore 0.35.3 → 0.36.1

package/src/stories/Popover/Popover.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { IReqorePopoverProps } from '../../components/Popover';
 import usePopover from '../../hooks/usePopover';
@@ -11,12 +11,18 @@ import {
   ReqorePopover,
   ReqoreSpacer,
 } from '../../index';
+import { StoryMeta } from '../utils';
 import { FlatArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePopoverProps>();
 
-export default {
+const meta = {
   title: 'Other/Popover/Stories',
+  component: ReqorePopover,
+  args: {
+    content: 'This is a popover',
+    flat: true,
+  },
   argTypes: {
     ...createArg('transparent', {
       defaultValue: false,
@@ -50,10 +56,10 @@ export default {
     }),
     ...FlatArg,
   },
-  args: {
-    flat: true,
-  },
-} as Meta<IReqorePopoverProps>;
+} as StoryMeta<typeof ReqorePopover>;
+
+type Story = StoryObj<typeof meta>;
+export default meta;
 
 const HoverButton = (args: any) => {
   return (
@@ -105,7 +111,7 @@ const HoverStayButton = (args: any) => {
   );
 };
 
-const Template: Story<IReqorePopoverProps & { insideModal?: boolean }> = (
+const Template: StoryFn<IReqorePopoverProps & { insideModal?: boolean }> = (
   args: IReqorePopoverProps & { insideModal?: boolean }
 ) => {
   if (args.insideModal) {
@@ -332,42 +338,58 @@ const Template: Story<IReqorePopoverProps & { insideModal?: boolean }> = (
   );
 };
 
-export const Basic = Template.bind({});
-export const NotFlat = Template.bind({});
-NotFlat.args = {
-  flat: false,
+export const Basic: Story = {
+  render: Template,
+};
+
+export const NotFlat: Story = {
+  render: Template,
+
+  args: {
+    flat: false,
+  },
 };
-export const CustomContent = Template.bind({});
-CustomContent.args = {
-  noWrapper: true,
-  content: (
-    <ReqorePanel label='This is a test' flat>
-      <ReqoreMessage flat>
-        In to am attended desirous raptures declared diverted confined at. Collected instantly
-        remaining up certainly to necessary as. Over walk dull into
-      </ReqoreMessage>
-    </ReqorePanel>
-  ),
+
+export const CustomContent: Story = {
+  render: Template,
+
+  args: {
+    noWrapper: true,
+    content: (
+      <ReqorePanel label='This is a test' flat>
+        <ReqoreMessage flat>
+          In to am attended desirous raptures declared diverted confined at. Collected instantly
+          remaining up certainly to necessary as. Over walk dull into
+        </ReqoreMessage>
+      </ReqorePanel>
+    ),
+  },
 };
 
-export const Blurred = Template.bind({});
-Blurred.args = {
-  blur: 4,
-  noWrapper: true,
-  content: (
-    <ReqorePanel label='This is a test' flat>
-      <ReqoreMessage flat>
-        In to am attended desirous raptures declared diverted confined at. Collected instantly
-        remaining up certainly to necessary as. Over walk dull into
-      </ReqoreMessage>
-    </ReqorePanel>
-  ),
+export const Blurred: Story = {
+  render: Template,
+
+  args: {
+    blur: true,
+    noWrapper: true,
+    content: (
+      <ReqorePanel label='This is a test' flat>
+        <ReqoreMessage flat>
+          In to am attended desirous raptures declared diverted confined at. Collected instantly
+          remaining up certainly to necessary as. Over walk dull into
+        </ReqoreMessage>
+      </ReqorePanel>
+    ),
+  },
 };
 
-export const BlurredInsideModal = Template.bind({});
-BlurredInsideModal.args = {
-  blur: 2,
-  noWrapper: true,
-  insideModal: true,
-  animatedDialogs: false,
+export const BlurredInsideModal: Story = {
+  render: Template,
+
+  args: {
+    blur: true,
+    noWrapper: true,
+    insideModal: true,
+    animatedDialogs: false,
+  },
 };

package/src/stories/RadioGroup/RadioGroup.stories.tsx

@@ -1,12 +1,14 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import ReqoreRadioGroup, { IReqoreRadioGroupProps } from '../../components/RadioGroup';
+import { StoryMeta } from '../utils';
 import { DisabledArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreRadioGroupProps>();
 
-export default {
+const meta = {
   title: 'Form/Radio Group/Stories',
+  component: ReqoreRadioGroup,
   argTypes: {
     ...createArg('asSwitch', {
       type: 'boolean',
@@ -17,9 +19,12 @@ export default {
     ...SizeArg,
     ...DisabledArg,
   },
-} as Meta<IReqoreRadioGroupProps>;
+} as StoryMeta<typeof ReqoreRadioGroup>;
 
-const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) => {
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: StoryFn<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) => {
   const [selected, setSelected] = useState(null);
 
   return (
@@ -168,23 +173,40 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
   );
 };
 
-export const Basic = Template.bind({});
-export const Horizontal = Template.bind({});
-Horizontal.args = {
-  vertical: false,
+export const Basic: Story = {
+  render: Template,
 };
-export const Switch = Template.bind({});
-Switch.args = {
-  asSwitch: true,
+
+export const Horizontal: Story = {
+  render: Template,
+
+  args: {
+    vertical: false,
+  },
 };
 
-export const WithoutMargin = Template.bind({});
-WithoutMargin.args = {
-  margin: 'none',
+export const Switch: Story = {
+  render: Template,
+
+  args: {
+    asSwitch: true,
+  },
 };
-export const WithTexts = Template.bind({});
-WithTexts.args = {
-  asSwitch: true,
-  onText: 'True',
-  offText: 'False and wrong',
+
+export const WithoutMargin: Story = {
+  render: Template,
+
+  args: {
+    margin: 'none',
+  },
+};
+
+export const WithTexts: Story = {
+  render: Template,
+
+  args: {
+    asSwitch: true,
+    onText: 'True',
+    offText: 'False and wrong',
+  },
 };

package/src/stories/Sidebar/Sidebar.stories.tsx

@@ -1,14 +1,24 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { noop } from 'lodash';
 import { IQorusSidebarProps } from '../../components/Sidebar';
 import { ReqorePanel, ReqoreSidebar } from '../../index';
 import { qorusSidebarItems } from '../../mock/menu';
+import { StoryMeta } from '../utils';
 import { FlatArg, NoContentArg, argManager } from '../utils/args';
 
 const { disableArg, createArg } = argManager<IQorusSidebarProps>();
 
-export default {
+const meta = {
   title: 'Navigation/Sidebar/Stories',
+  component: ReqoreSidebar,
+  args: {
+    path: '/',
+    floating: false,
+    bordered: false,
+    isOpen: false,
+    position: 'left',
+    withoutContent: true,
+  },
   argTypes: {
     ...disableArg('items'),
     ...FlatArg,
@@ -45,9 +55,12 @@ export default {
     }),
     ...NoContentArg,
   },
-} as Meta;
+} as StoryMeta<typeof ReqoreSidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IQorusSidebarProps> = (args: IQorusSidebarProps) => {
+const Template: StoryFn<IQorusSidebarProps> = (args: IQorusSidebarProps) => {
   return (
     <ReqoreSidebar
       {...args}
@@ -69,10 +82,16 @@ const Template: Story<IQorusSidebarProps> = (args: IQorusSidebarProps) => {
   );
 };
 
-export const Basic = Template.bind({});
-export const Floating = Template.bind({});
-Floating.args = {
-  floating: true,
-  isOpen: true,
-  hasFloatingBackground: true,
+export const Basic: Story = {
+  render: Template,
+};
+
+export const Floating: Story = {
+  render: Template,
+
+  args: {
+    floating: true,
+    isOpen: true,
+    hasFloatingBackdrop: true,
+  },
 };

package/src/stories/Spacer/Spacer.stories.tsx

@@ -1,16 +1,22 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import {
   IReqoreSpacerProps,
   ReqoreHorizontalSpacer,
+  ReqoreSpacer,
   ReqoreVerticalSpacer,
 } from '../../components/Spacer';
 import { ReqorePanel } from '../../index';
+import { StoryMeta } from '../utils';
 
-export default {
+const meta = {
   title: 'Utilities/Spacer/Stories',
-} as Meta;
+  component: ReqoreSpacer,
+} as StoryMeta<typeof ReqoreSpacer>;
 
-const Template: Story<IReqoreSpacerProps> = () => {
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: StoryFn<IReqoreSpacerProps> = () => {
   return (
     <>
       <ReqorePanel label='Horizontal'>
@@ -89,4 +95,6 @@ const Template: Story<IReqoreSpacerProps> = () => {
   );
 };
 
-export const Basic = Template.bind({});
+export const Basic: Story = {
+  render: Template,
+};

package/src/stories/Spinner/Spinner.stories.tsx

@@ -1,12 +1,17 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { IReqoreSpinnerProps, ReqoreSpinner } from '../../components/Spinner';
 import { ReqoreControlGroup } from '../../index';
+import { StoryMeta } from '../utils';
 
-export default {
+const meta = {
   title: 'Utilities/Spinner/Stories',
-} as Meta;
+  component: ReqoreSpinner,
+} as StoryMeta<typeof ReqoreSpinner>;
 
-const Template: Story<IReqoreSpinnerProps> = (args) => {
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: StoryFn<IReqoreSpinnerProps> = (args) => {
   return (
     <ReqoreControlGroup vertical gapSize='huge'>
       <ReqoreSpinner {...args}>{args.children}</ReqoreSpinner>
@@ -55,14 +60,23 @@ const Template: Story<IReqoreSpinnerProps> = (args) => {
   );
 };
 
-export const Basic = Template.bind({});
-export const WithLabel = Template.bind({});
-WithLabel.args = {
-  children: 'Loading...',
+export const Basic: Story = {
+  render: Template,
 };
 
-export const Centered = Template.bind({});
-Centered.args = {
-  children: 'Loading...',
-  centered: true,
+export const WithLabel: Story = {
+  render: Template,
+
+  args: {
+    children: 'Loading...',
+  },
+};
+
+export const Centered: Story = {
+  render: Template,
+
+  args: {
+    children: 'Loading...',
+    centered: true,
+  },
 };