@qoretechnologies/reqore 0.36.0 → 0.36.1

package/src/stories/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,38 +1,26 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { IReqoreBreadcrumbItem, IReqoreBreadcrumbsProps } from '../../components/Breadcrumbs';
+import { StoryObj } from '@storybook/react';
 import { ReqoreBreadcrumbs } from '../../index';
 import breadcrumbs, { breadcrumbsTabs } from '../../mock/breadcrumbs';
-import { buildTemplate } from '../utils';
+import { StoryMeta } from '../utils';
 import { SizeArg } from '../utils/args';
 
-export default {
+const meta = {
   title: 'Navigation/Breadcrumbs/Stories',
+  component: ReqoreBreadcrumbs,
   argTypes: {
     withTabs: {
       name: 'With tabs',
-      defaultValue: false,
       description: 'Whether tabs should be shown alongside the breadcrumbs',
       control: 'boolean',
     },
     ...SizeArg,
   },
-} as ComponentMeta<typeof ReqoreBreadcrumbs & { withTabs?: boolean }>;
+  args: { items: breadcrumbs },
+} as StoryMeta<typeof ReqoreBreadcrumbs>;
 
-const Template: ComponentStory<typeof ReqoreBreadcrumbs & { withTabs?: boolean }> = (
-  args: IReqoreBreadcrumbsProps & { withTabs?: boolean }
-) => {
-  const items = args.withTabs ? [...breadcrumbs, breadcrumbsTabs] : breadcrumbs;
-  const customTheme = args.customTheme ? { main: args.customTheme } : undefined;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-  return (
-    <ReqoreBreadcrumbs
-      {...args}
-      items={items as IReqoreBreadcrumbItem[]}
-      customTheme={customTheme as any}
-    />
-  );
-};
-
-export const Default = buildTemplate(Template);
-export const WithTabs = buildTemplate(Template, { withTabs: true });
-export const Flat = buildTemplate(Template, { flat: true });
+export const Default: Story = {};
+export const WithTabs: Story = { args: { items: [...breadcrumbs, breadcrumbsTabs] } };
+export const Flat: Story = { args: { flat: true } };

package/src/stories/Button/Button.stories.tsx

@@ -1,23 +1,28 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { StoryFn, StoryObj } from '@storybook/react';
 import { noop } from 'lodash';
 import ReqoreButton from '../../components/Button';
-import { IReqoreTheme } from '../../constants/theme';
 import { ReqoreControlGroup } from '../../index';
+import { StoryMeta } from '../utils';
 import { IconArg, SizeArg } from '../utils/args';
 
-export default {
+const meta = {
   title: 'Form/Button/Stories',
-  parameters: {
-    jest: ['button.test.tsx'],
-  },
+  component: ReqoreButton,
   argTypes: {
     ...IconArg('icon', 'Icon'),
     ...IconArg('rightIcon', 'Right Icon'),
     ...SizeArg,
   },
-} as ComponentMeta<typeof ReqoreButton>;
+  args: {
+    icon: '24HoursFill',
+    rightIcon: '24HoursFill',
+  },
+} as StoryMeta<typeof ReqoreButton>;
 
-const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
   return (
     <ReqoreControlGroup vertical gapSize='big'>
       <ReqoreControlGroup size={buttonProps.size} wrap>
@@ -246,54 +251,85 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
   );
 };
 
-export const Default = Template.bind({});
-export const Info = Template.bind({});
-Info.args = {
-  intent: 'info',
+export const Default: 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 Pending = Template.bind({});
-Pending.args = {
-  intent: 'pending',
+
+export const Pending: Story = {
+  render: Template,
+
+  args: {
+    intent: 'pending',
+  },
 };
-export const Danger = Template.bind({});
-Danger.args = {
-  intent: 'danger',
+
+export const Danger: Story = {
+  render: Template,
+
+  args: {
+    intent: 'danger',
+  },
 };
-export const Muted = Template.bind({});
-Muted.args = {
-  intent: 'muted',
+
+export const Muted: Story = {
+  render: Template,
+
+  args: {
+    intent: 'muted',
+  },
 };
-export const Effect: ComponentStory<typeof ReqoreButton> = Template.bind({});
-Effect.args = {
-  effect: {
-    gradient: {
-      direction: 'to right bottom',
-      colors: { 0: '#33023c', 100: '#0a487b' },
-      animate: 'active',
+
+export const Effect: Story = {
+  render: Template,
+
+  args: {
+    effect: {
+      gradient: {
+        direction: 'to right bottom',
+        colors: { 0: '#33023c', 100: '#0a487b' },
+        animate: 'active',
+      },
+      spaced: 2,
+      uppercase: true,
+      weight: 'thick',
+      textSize: 'small',
     },
-    spaced: 2,
-    uppercase: true,
-    weight: 'thick',
-    textSize: 'small',
   },
 };
 
-export const GlobalEffect: ComponentStory<
-  typeof ReqoreButton & { otherThemeOptions?: IReqoreTheme }
-> = Template.bind({});
-GlobalEffect.args = {
-  otherThemeOptions: {
-    buttons: {
-      gradient: true,
-      animate: 'active',
+export const GlobalEffect: Story = {
+  render: Template,
+
+  args: {
+    otherThemeOptions: {
+      buttons: {
+        gradient: true,
+        animate: 'active',
+      },
     },
   },
-} as any;
+};

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -1,13 +1,17 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { StoryFn, StoryObj } from '@storybook/react';
 import Checkbox from '../../components/Checkbox';
 import { ReqoreCheckbox, ReqoreControlGroup, ReqoreVerticalSpacer } from '../../index';
+import { StoryMeta } from '../utils';
 
-export default {
+const meta = {
   title: 'Form/Checkbox/Stories',
-  parameters: ['checkbox.test.tsx'],
-} as ComponentMeta<typeof Checkbox>;
+  component: ReqoreCheckbox,
+} as StoryMeta<typeof ReqoreCheckbox>;
 
-const Template: ComponentStory<typeof Checkbox> = (args) => {
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Template: StoryFn<typeof Checkbox> = (args) => {
   return (
     <ReqoreControlGroup vertical>
       <ReqoreControlGroup wrap>
@@ -58,8 +62,14 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
   );
 };
 
-export const Basic = Template.bind({});
-export const Switch = Template.bind({});
-Switch.args = {
-  asSwitch: true,
+export const Basic: Story = {
+  render: Template,
+};
+
+export const Switch: Story = {
+  render: Template,
+
+  args: {
+    asSwitch: true,
+  },
 };