@qoretechnologies/reqore 0.36.0 → 0.36.1

package/src/stories/Header/Header.stories.tsx

@@ -1,16 +1,20 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
-import { IReqoreHeadingProps } from '../../components/Header';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { ReqoreControlGroup, ReqoreHeading } from '../../index';
+import { StoryMeta } from '../utils';
 import { IntentArg } from '../utils/args';
 
-export default {
+const meta = {
   title: 'Other/Heading/Stories',
+  component: ReqoreHeading,
   argTypes: {
     ...IntentArg,
   },
-} as Meta;
+} as StoryMeta<typeof ReqoreHeading>;
 
-const Template: Story<IReqoreHeadingProps> = (args) => {
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: StoryFn<typeof ReqoreHeading> = (args) => {
   return (
     <ReqoreControlGroup gapSize='big' vertical>
       <ReqoreHeading size={1} {...args}>
@@ -38,37 +42,67 @@ const Template: Story<IReqoreHeadingProps> = (args) => {
   );
 };
 
-export const Basic = Template.bind({});
-export const Success = Template.bind({});
-Success.args = {
-  intent: 'success',
+export const Basic: Story = {
+  render: Template,
 };
-export const Danger = Template.bind({});
-Danger.args = {
-  intent: 'danger',
+
+export const Success: Story = {
+  render: Template,
+
+  args: {
+    intent: 'success',
+  },
 };
-export const Warning = Template.bind({});
-Warning.args = {
-  intent: 'warning',
+
+export const Danger: Story = {
+  render: Template,
+
+  args: {
+    intent: 'danger',
+  },
+};
+
+export const Warning: Story = {
+  render: Template,
+
+  args: {
+    intent: 'warning',
+  },
 };
-export const Info = Template.bind({});
-Info.args = {
-  intent: 'info',
+
+export const Info: Story = {
+  render: Template,
+
+  args: {
+    intent: 'info',
+  },
 };
-export const Pending = Template.bind({});
-Pending.args = {
-  intent: 'pending',
+
+export const Pending: Story = {
+  render: Template,
+
+  args: {
+    intent: 'pending',
+  },
 };
-export const Muted = Template.bind({});
-Muted.args = {
-  intent: 'muted',
+
+export const Muted: Story = {
+  render: Template,
+
+  args: {
+    intent: 'muted',
+  },
 };
-export const Effect = Template.bind({});
-Effect.args = {
-  effect: {
-    gradient: { colors: { 0: '#5e0acc', 100: '#c008c0' } },
-    spaced: 4,
-    weight: 'bold',
-    uppercase: true,
+
+export const Effect: Story = {
+  render: Template,
+
+  args: {
+    effect: {
+      gradient: { colors: { 0: '#5e0acc', 100: '#c008c0' } },
+      spaced: 4,
+      weight: 'bold',
+      uppercase: true,
+    },
   },
 };

package/src/stories/Icon/Icon.stories.tsx

@@ -1,143 +1,149 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
-import { IReqoreIconProps } from '../../components/Icon';
+import { StoryObj } from '@storybook/react';
 import { ReqoreIcon, ReqorePanel } from '../../index';
+import { StoryMeta } from '../utils';
 
-export default {
+const meta = {
   title: 'Other/Icon/Stories',
-} as Meta;
+  component: ReqoreIcon,
+} as StoryMeta<typeof ReqoreIcon>;
 
-export const Icon: Story<IReqoreIconProps> = () => {
-  return (
-    <>
-      <ReqorePanel label='Basic' flat minimal>
-        <ReqoreIcon icon='AccountCircleLine' size='12px' margin='both' />
-        <ReqoreIcon icon='4KFill' size='14px' margin='both' />
-        <ReqoreIcon icon='ArrowLeftCircleFill' intent='success' margin='both' />
-        <ReqoreIcon icon='HotelFill' size='18px' margin='both' />
-        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#ff0000' margin='both' />
-        <ReqoreIcon
-          icon='SignalTowerFill'
-          size='20px'
-          color='#291133'
-          effect={{ sepia: true }}
-          margin='both'
-          tooltip={{ content: 'I have a tooltip', openOnMount: true }}
-        />
-        <ReqoreIcon
-          icon='SignalTowerFill'
-          size='20px'
-          color='#0c7052'
-          effect={{ blur: 1 }}
-          margin='both'
-        />
-        <ReqoreIcon
-          icon='SignalTowerFill'
-          size='20px'
-          color='#700c57'
-          effect={{ contrast: 150 }}
-          margin='both'
-        />
-        <ReqoreIcon
-          icon='SignalTowerFill'
-          size='20px'
-          color='#d5be0f'
-          effect={{ grayscale: true }}
-          margin='both'
-        />
-        <ReqoreIcon
-          icon='SignalTowerFill'
-          size='20px'
-          color='#0f5bd5'
-          effect={{ invert: true }}
-          margin='both'
-        />
-        <ReqoreIcon
-          icon='SignalTowerFill'
-          size='20px'
-          color='#ffffff'
-          effect={{ opacity: 0.5 }}
-          margin='both'
-        />
-      </ReqorePanel>
-      <br />
-      <ReqorePanel label='Image' flat minimal>
-        <ReqoreIcon
-          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-          size='20px'
-          margin='both'
-        />
-        <ReqoreIcon
-          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-          size='40px'
-          rounded
-          margin='both'
-        />
-        <ReqoreIcon
-          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-          size='30px'
-          effect={{ sepia: true }}
-          margin='both'
-        />
-        <ReqoreIcon
-          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-          size='40px'
-          effect={{ grayscale: true }}
-          margin='both'
-        />
-        <ReqoreIcon
-          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-          size='70px'
-          effect={{ blur: 1 }}
-          margin='both'
-        />
-        <ReqoreIcon
-          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-          size='40px'
-          effect={{ contrast: 150 }}
-          margin='both'
-        />
-        <ReqoreIcon
-          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-          size='40px'
-          effect={{ invert: true }}
-          margin='both'
-        />
-        <ReqoreIcon
-          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-          size='40px'
-          effect={{ opacity: 0.5 }}
-          margin='both'
-        />
-        <ReqoreIcon
-          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
-          size='40px'
-          effect={{ saturate: 150 }}
-          margin='both'
-        />
-      </ReqorePanel>
-      <br />
-      <ReqorePanel label='Margined' flat minimal>
-        <ReqoreIcon icon='AccountCircleLine' />
-        No Margin
-        <div>
-          <ReqoreIcon icon='4KFill' margin='right' />
-          Right Margin
-        </div>
-        <div>
-          Left Margin
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: () => {
+    return (
+      <>
+        <ReqorePanel label='Basic' flat minimal>
+          <ReqoreIcon icon='AccountCircleLine' size='12px' margin='both' />
+          <ReqoreIcon icon='4KFill' size='14px' margin='both' />
+          <ReqoreIcon icon='ArrowLeftCircleFill' intent='success' margin='both' />
+          <ReqoreIcon icon='HotelFill' size='18px' margin='both' />
+          <ReqoreIcon icon='SignalTowerFill' size='20px' color='#ff0000' margin='both' />
+          <ReqoreIcon
+            icon='SignalTowerFill'
+            size='20px'
+            color='#291133'
+            effect={{ sepia: true }}
+            margin='both'
+            tooltip={{ content: 'I have a tooltip', openOnMount: true }}
+          />
+          <ReqoreIcon
+            icon='SignalTowerFill'
+            size='20px'
+            color='#0c7052'
+            effect={{ blur: 1 }}
+            margin='both'
+          />
+          <ReqoreIcon
+            icon='SignalTowerFill'
+            size='20px'
+            color='#700c57'
+            effect={{ contrast: 150 }}
+            margin='both'
+          />
+          <ReqoreIcon
+            icon='SignalTowerFill'
+            size='20px'
+            color='#d5be0f'
+            effect={{ grayscale: true }}
+            margin='both'
+          />
+          <ReqoreIcon
+            icon='SignalTowerFill'
+            size='20px'
+            color='#0f5bd5'
+            effect={{ invert: true }}
+            margin='both'
+          />
+          <ReqoreIcon
+            icon='SignalTowerFill'
+            size='20px'
+            color='#ffffff'
+            effect={{ opacity: 0.5 }}
+            margin='both'
+          />
+        </ReqorePanel>
+        <br />
+        <ReqorePanel label='Image' flat minimal>
           <ReqoreIcon
             image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
             size='20px'
+            margin='both'
+          />
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='40px'
             rounded
-            margin='left'
+            margin='both'
+          />
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='30px'
+            effect={{ sepia: true }}
+            margin='both'
+          />
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='40px'
+            effect={{ grayscale: true }}
+            margin='both'
+          />
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='70px'
+            effect={{ blur: 1 }}
+            margin='both'
+          />
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='40px'
+            effect={{ contrast: 150 }}
+            margin='both'
+          />
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='40px'
+            effect={{ invert: true }}
+            margin='both'
+          />
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='40px'
+            effect={{ opacity: 0.5 }}
+            margin='both'
+          />
+          <ReqoreIcon
+            image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+            size='40px'
+            effect={{ saturate: 150 }}
+            margin='both'
           />
-        </div>
-        <div>
-          Both
-          <ReqoreIcon icon='HotelFill' margin='both' />
-          Sides
-        </div>
-      </ReqorePanel>
-    </>
-  );
+        </ReqorePanel>
+        <br />
+        <ReqorePanel label='Margined' flat minimal>
+          <ReqoreIcon icon='AccountCircleLine' />
+          No Margin
+          <div>
+            <ReqoreIcon icon='4KFill' margin='right' />
+            Right Margin
+          </div>
+          <div>
+            Left Margin
+            <ReqoreIcon
+              image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+              size='20px'
+              rounded
+              margin='left'
+            />
+          </div>
+          <div>
+            Both
+            <ReqoreIcon icon='HotelFill' margin='both' />
+            Sides
+          </div>
+        </ReqorePanel>
+      </>
+    );
+  },
 };

package/src/stories/Input/Input.stories.tsx

@@ -1,20 +1,28 @@
-import { Meta, Story } from '@storybook/react/types-6-0';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { ReqoreControlGroup } from '../../index';
+import { StoryMeta } from '../utils';
 import { FlatArg, IconArg, MinimalArg, SizeArg } from '../utils/args';
 
-export default {
+const meta = {
   title: 'Form/Input/Stories',
+  component: ReqoreInput,
   argTypes: {
     ...MinimalArg,
     ...FlatArg,
     ...SizeArg,
-    ...IconArg('icon', 'Icon', 'SearchLine'),
+    ...IconArg('icon', 'Icon'),
   },
-} as Meta<IReqoreInputProps>;
+  args: {
+    icon: 'SearchLine',
+  },
+} as StoryMeta<typeof ReqoreInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
+const Template: StoryFn<typeof ReqoreInput> = (args: IReqoreInputProps) => {
   const [value, setValue] = useState('Input value');
 
   const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -133,39 +141,68 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
   );
 };
 
-export const Basic = Template.bind({});
-export const Info = Template.bind({});
-Info.args = {
-  intent: 'info',
+export const Basic: Story = {
+  render: Template,
 };
-export const Success = Template.bind({});
-Success.args = {
-  intent: 'success',
+
+export const Info: Story = {
+  render: Template,
+
+  args: {
+    intent: 'info',
+  },
 };
-export const Warning = Template.bind({});
-Warning.args = {
-  intent: 'warning',
+
+export const Success: Story = {
+  render: Template,
+
+  args: {
+    intent: 'success',
+  },
+};
+
+export const Warning: Story = {
+  render: Template,
+
+  args: {
+    intent: 'warning',
+  },
 };
-export const Danger = Template.bind({});
-Danger.args = {
-  intent: 'danger',
+
+export const Danger: Story = {
+  render: Template,
+
+  args: {
+    intent: 'danger',
+  },
 };
-export const Pending = Template.bind({});
-Pending.args = {
-  intent: 'pending',
+
+export const Pending: Story = {
+  render: Template,
+
+  args: {
+    intent: 'pending',
+  },
 };
-export const Muted = Template.bind({});
-Muted.args = {
-  intent: 'muted',
+
+export const Muted: Story = {
+  render: Template,
+
+  args: {
+    intent: 'muted',
+  },
 };
 
-export const Effect = Template.bind({});
-Effect.args = {
-  effect: {
-    gradient: {
-      colors: {
-        0: '#56345e',
-        100: 'transparent',
+export const Effect: Story = {
+  render: Template,
+
+  args: {
+    effect: {
+      gradient: {
+        colors: {
+          0: '#56345e',
+          100: 'transparent',
+        },
       },
     },
   },