@qoretechnologies/reqore 0.36.0 → 0.36.2

package/src/stories/Collection/Collection.stories.tsx

@@ -1,10 +1,11 @@
-import { Meta, Story } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
 import { ReqoreButton, ReqoreControlGroup, ReqoreVerticalSpacer } from '../..';
 import { IReqoreCollectionProps, ReqoreCollection } from '../../components/Collection';
 import { IReqoreColumnsProps } from '../../components/Columns';
 import { PADDING_FROM_SIZE } from '../../constants/sizes';
 import items, { bigCollection } from '../../mock/collectionData';
 
+import { StoryMeta } from '../utils';
 import { argManager, IntentArg, SizeArg } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
@@ -13,54 +14,46 @@ export interface IColumnsStoryArgs extends IReqoreColumnsProps {
 
 const { createArg, disableArgs } = argManager<IReqoreCollectionProps>();
 
-export default {
+const meta = {
   title: 'Collections/Collection/Stories',
   component: ReqoreCollection,
   argTypes: {
     ...createArg('stacked', {
-      defaultValue: false,
       type: 'boolean',
       name: 'Stacked',
       description: 'If true, the collection will be stacked',
     }),
     ...createArg('maxItemHeight', {
-      defaultValue: 100,
       type: 'number',
       name: 'Max Item Height',
       description: 'Max height of the collection item',
     }),
     ...createArg('sortable', {
-      defaultValue: true,
       type: 'boolean',
       name: 'Sortable',
       description: 'If true, the collection will be sortable',
     }),
     ...createArg('filterable', {
-      defaultValue: true,
       type: 'boolean',
       name: 'Filterable',
       description: 'If true, the collection will be filterable',
     }),
     ...createArg('rounded', {
-      defaultValue: true,
       type: 'boolean',
       name: 'Rounded',
       description: 'If true, the collection will be rounded when stacked',
     }),
     ...createArg('height', {
-      defaultValue: undefined,
       type: 'string',
       name: 'Height',
       description: 'Height of the collection',
     }),
     ...createArg('fill', {
-      defaultValue: false,
       type: 'boolean',
       name: 'Fill parent',
       description: 'If true, the collection will fill the parent',
     }),
     ...createArg('label', {
-      defaultValue: undefined,
       type: 'string',
       name: 'Label',
       description: 'Label of the collection',
@@ -69,193 +62,224 @@ export default {
     ...IntentArg,
     ...SizeArg,
   },
-} as Meta<IReqoreCollectionProps>;
+  args: {
+    selectedIcon: 'CheckLine',
+    maxItemHeight: 100,
+    sortable: true,
+    filterable: true,
+    rounded: true,
+  },
+} as StoryMeta<typeof ReqoreCollection>;
 
-const Template: Story<IReqoreCollectionProps> = (args) => {
-  return <ReqoreCollection {...args} selectedIcon='CheckLine' />;
-};
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Basic = Template.bind({});
-Basic.args = {
-  label: 'Config Items',
-  items,
-  actions: [
-    { label: 'Custom action', icon: 'Home7Line', fixed: true },
-    { actions: [{ value: 'Test' }] },
-  ],
+export const Basic: Story = {
+  args: {
+    label: 'Config Items',
+    items,
+    actions: [
+      { label: 'Custom action', icon: 'Home7Line', fixed: true },
+      { actions: [{ label: 'Test' }] },
+    ],
+  },
 };
 
-export const WithHeight = Template.bind({});
-WithHeight.args = {
-  label: 'Collection of items',
-  height: '600px',
-  items,
-  actions: [
-    { label: 'Custom action', icon: 'Home7Line', fixed: true },
-    { actions: [{ value: 'Test' }] },
-  ],
+export const WithHeight: Story = {
+  args: {
+    label: 'Collection of items',
+    height: '600px',
+    items,
+    actions: [
+      { label: 'Custom action', icon: 'Home7Line', fixed: true },
+      { actions: [{ label: 'Test' }] },
+    ],
+  },
 };
 
-export const Stacked = Template.bind({});
-Stacked.args = {
-  label: 'Collection of items',
-  stacked: true,
-  items,
-  actions: [
-    { label: 'Custom action', icon: 'Home7Line', fixed: true },
-    { actions: [{ value: 'Test' }] },
-  ],
+export const Stacked: Story = {
+  args: {
+    label: 'Collection of items',
+    stacked: true,
+    items,
+    actions: [
+      { label: 'Custom action', icon: 'Home7Line', fixed: true },
+      { actions: [{ label: 'Test' }] },
+    ],
+  },
 };
 
-export const Fill = Template.bind({});
-Fill.args = {
-  label: 'Collection of items',
-  fill: true,
-  items,
-  actions: [
-    { label: 'Custom action', icon: 'Home7Line', fixed: true },
-    { actions: [{ value: 'Test' }] },
-  ],
+export const Fill: Story = {
+  args: {
+    label: 'Collection of items',
+    fill: true,
+    items,
+    actions: [
+      { label: 'Custom action', icon: 'Home7Line', fixed: true },
+      { actions: [{ label: 'Test' }] },
+    ],
+  },
 };
 
-export const SelectedFirst = Template.bind({});
-SelectedFirst.args = {
-  label: 'Collection of items',
-  items,
-  showSelectedFirst: true,
+export const SelectedFirst: Story = {
+  args: {
+    label: 'Collection of items',
+    items,
+    showSelectedFirst: true,
+  },
 };
 
-export const Zoomable = Template.bind({});
-Zoomable.args = {
-  label: 'Collection of items',
-  items,
-  zoomable: true,
+export const Zoomable: Story = {
+  args: {
+    label: 'Collection of items',
+    items,
+    zoomable: true,
+  },
 };
 
-export const WithDefaultZoom = Template.bind({});
-WithDefaultZoom.args = {
-  label: 'Collection of items',
-  items,
-  zoomable: true,
-  size: 'tiny',
-  defaultZoom: 2,
+export const WithDefaultZoom: Story = {
+  args: {
+    label: 'Collection of items',
+    items,
+    zoomable: true,
+    size: 'tiny',
+    defaultZoom: 2,
+  },
 };
 
-export const CustomColumnsData = Template.bind({});
-CustomColumnsData.args = {
-  columns: 2,
-  columnsGap: '50px',
-  minColumnWidth: '100px',
-  maxColumnWidth: '200px',
-  items,
-  label: '2 columns of max 200px width with 50px gap',
+export const CustomColumnsData: Story = {
+  args: {
+    columns: 2,
+    columnsGap: '50px',
+    minColumnWidth: '100px',
+    maxColumnWidth: '200px',
+    items,
+    label: '2 columns of max 200px width with 50px gap',
+  },
 };
 
-export const CustomPropsAndTexts = Template.bind({});
-CustomPropsAndTexts.args = {
-  label: 'Collection of items',
-  items,
-  inputProps: {
-    effect: {
-      gradient: { colors: 'warning' },
+export const CustomPropsAndTexts: Story = {
+  args: {
+    label: 'Collection of items',
+    items,
+    inputProps: {
+      effect: {
+        gradient: { colors: 'warning' },
+      },
+      minimal: true,
     },
-    minimal: true,
+    inputPlaceholder: (items) => `Search in ${items.length} crazy items`,
+    sortButtonTooltip: (sort) => `Seradit ${sort === 'asc' ? 'vzestupne' : 'sestupne'}`,
+    displayButtonTooltip: (display) => `Zobrazit ${display === 'list' ? 'v liste' : 'v mriezke'}`,
   },
-  inputPlaceholder: (items) => `Search in ${items.length} crazy items`,
-  sortButtonTooltip: (sort) => `Seradit ${sort === 'asc' ? 'vzestupne' : 'sestupne'}`,
-  displayButtonTooltip: (display) => `Zobrazit ${display === 'list' ? 'v liste' : 'v mriezke'}`,
 };
 
-export const ChildrenBeforeAndAfter = Template.bind({});
-ChildrenBeforeAndAfter.args = {
-  label: 'Collection of items',
-  padded: false,
-  items,
-  contentRenderer: (children) => (
-    <>
-      <ReqoreControlGroup horizontalAlign='center' fluid>
-        <ReqoreButton fluid> I could be a filter of some kind</ReqoreButton>
-      </ReqoreControlGroup>
-      <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />
-      {children}
-      <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />
-      <ReqoreControlGroup horizontalAlign='center' fluid>
-        <ReqoreControlGroup fluid={false} fixed>
-          <ReqoreButton fixed textAlign='center'>
-            1
-          </ReqoreButton>
-          <ReqoreButton fixed textAlign='center'>
-            2
-          </ReqoreButton>
-          <ReqoreButton fixed textAlign='center'>
-            3
-          </ReqoreButton>
-          <ReqoreButton fixed textAlign='center'>
-            4
-          </ReqoreButton>
+export const ChildrenBeforeAndAfter: Story = {
+  args: {
+    label: 'Collection of items',
+    padded: false,
+    items,
+    contentRenderer: (children) => (
+      <>
+        <ReqoreControlGroup horizontalAlign='center' fluid>
+          <ReqoreButton fluid> I could be a filter of some kind</ReqoreButton>
+        </ReqoreControlGroup>
+        <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />
+        {children}
+        <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />
+        <ReqoreControlGroup horizontalAlign='center' fluid>
+          <ReqoreControlGroup fluid={false} fixed>
+            <ReqoreButton fixed textAlign='center'>
+              1
+            </ReqoreButton>
+            <ReqoreButton fixed textAlign='center'>
+              2
+            </ReqoreButton>
+            <ReqoreButton fixed textAlign='center'>
+              3
+            </ReqoreButton>
+            <ReqoreButton fixed textAlign='center'>
+              4
+            </ReqoreButton>
+          </ReqoreControlGroup>
         </ReqoreControlGroup>
-      </ReqoreControlGroup>
-    </>
-  ),
+      </>
+    ),
+  },
 };
 
-export const FilteringSearchingPaging = Template.bind({});
-FilteringSearchingPaging.args = {
-  inputProps: {
-    fluid: true,
-    focusRules: {
-      type: 'keypress',
-      shortcut: 'letters',
-      clearOnFocus: true,
+export const FilteringSearchingPaging: Story = {
+  args: {
+    inputProps: {
+      fluid: true,
+      focusRules: {
+        type: 'keypress',
+        shortcut: 'letters',
+        clearOnFocus: true,
+      },
     },
-  },
-  displayButtonProps: {
-    fixed: false,
-  },
-  sortButtonProps: {
-    fixed: false,
-  },
-  paging: 'buttons',
-  size: 'big',
-  padded: false,
-  items: bigCollection,
-} as IReqoreCollectionProps;
+    displayButtonProps: {
+      fixed: false,
+    },
+    sortButtonProps: {
+      fixed: false,
+    },
+    paging: 'buttons',
+    size: 'big',
+    padded: false,
+    items: bigCollection,
+  } as IReqoreCollectionProps,
+};
 
-export const CustomFilteringSearchingPaging = Template.bind({});
-CustomFilteringSearchingPaging.args = {
-  inputProps: {
-    fluid: true,
-    focusRules: {
-      type: 'auto',
-      clearOnFocus: true,
+export const CustomFilteringSearchingPaging: Story = {
+  args: {
+    inputProps: {
+      fluid: true,
+      focusRules: {
+        type: 'auto',
+        clearOnFocus: true,
+      },
     },
-  },
-  paging: {
-    itemsPerPage: 55,
-    scrollToTopOnPageChange: true,
-  },
-  inputInTitle: false,
-  responsiveTitle: true,
-  size: 'small',
-  padded: false,
-  fill: true,
-  items: [...bigCollection, ...bigCollection, ...bigCollection, ...bigCollection, ...bigCollection],
-} as IReqoreCollectionProps;
+    paging: {
+      itemsPerPage: 55,
+      scrollToTopOnPageChange: true,
+    },
+    inputInTitle: false,
+    responsiveTitle: true,
+    size: 'small',
+    padded: false,
+    fill: true,
+    items: [
+      ...bigCollection,
+      ...bigCollection,
+      ...bigCollection,
+      ...bigCollection,
+      ...bigCollection,
+    ],
+  } as IReqoreCollectionProps,
+};
 
-export const DefaultFilter = Template.bind({});
-DefaultFilter.args = {
-  inputProps: {
-    fluid: true,
-  },
-  defaultQuery: 'Med',
-  paging: {
-    itemsPerPage: 55,
-    scrollToTopOnPageChange: true,
-  },
-  inputInTitle: false,
-  responsiveTitle: true,
-  size: 'small',
-  padded: false,
-  fill: true,
-  items: [...bigCollection, ...bigCollection, ...bigCollection, ...bigCollection, ...bigCollection],
-} as IReqoreCollectionProps;
+export const DefaultFilter: Story = {
+  args: {
+    inputProps: {
+      fluid: true,
+    },
+    defaultQuery: 'Med',
+    paging: {
+      itemsPerPage: 55,
+      scrollToTopOnPageChange: true,
+    },
+    inputInTitle: false,
+    responsiveTitle: true,
+    size: 'small',
+    padded: false,
+    fill: true,
+    items: [
+      ...bigCollection,
+      ...bigCollection,
+      ...bigCollection,
+      ...bigCollection,
+      ...bigCollection,
+    ],
+  } as IReqoreCollectionProps,
+};

package/src/stories/Columns/Columns.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
 import { IReqoreColumnsProps } from '../../components/Columns';
 import {
   ReqoreButton,
@@ -9,6 +9,7 @@ import {
   ReqoreInput,
   ReqoreVerticalSpacer,
 } from '../../index';
+import { StoryMeta } from '../utils';
 import { argManager } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
@@ -17,15 +18,10 @@ export interface IColumnsStoryArgs extends IReqoreColumnsProps {
 
 const { createArg, disableArgs } = argManager<IColumnsStoryArgs>();
 
-export default {
+const meta = {
   title: 'Layout/Columns/Stories',
   component: ReqoreColumns,
   argTypes: {
-    ...createArg('multipleColumns', {
-      defaultValue: false,
-      control: 'boolean',
-      name: 'Multiple Columns',
-    }),
     ...createArg('minColumnWidth', {
       defaultValue: '200px',
     }),
@@ -35,9 +31,6 @@ export default {
     ...createArg('alignItems', {
       defaultValue: 'normal',
     }),
-    ...createArg('alignItems', {
-      defaultValue: 'normal',
-    }),
     ...createArg('columns', {
       defaultValue: undefined,
       type: 'string',
@@ -47,9 +40,17 @@ export default {
     }),
     ...disableArgs(['className', 'multipleColumns']),
   },
-} as Meta<IColumnsStoryArgs>;
+  args: {
+    minColumnWidth: '200px',
+    maxColumnWidth: '300px',
+    alignItems: 'normal',
+  },
+} as StoryMeta<typeof ReqoreColumns>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: Story<IColumnsStoryArgs> = (args) => {
+const Template = (args) => {
   return (
     <ReqoreColumns {...args} columnsGap='10px'>
       <ReqoreColumn
@@ -126,19 +127,32 @@ const Template: Story<IColumnsStoryArgs> = (args) => {
   );
 };
 
-export const Basic = Template.bind({});
-export const MultipleColumns = Template.bind({});
-MultipleColumns.args = {
-  multipleColumns: true,
+export const Basic: Story = {
+  render: Template,
 };
-export const CustomAlignment = Template.bind({});
-CustomAlignment.args = {
-  multipleColumns: true,
-  alignItems: 'center',
+
+export const MultipleColumns: Story = {
+  render: Template,
+
+  args: {
+    multipleColumns: true,
+  },
 };
 
-export const WithMinimumWidth = Template.bind({});
-WithMinimumWidth.args = {
-  multipleColumns: true,
-  minColumnWidth: '500px',
+export const CustomAlignment: Story = {
+  render: Template,
+
+  args: {
+    multipleColumns: true,
+    alignItems: 'center',
+  },
+};
+
+export const WithMinimumWidth = {
+  render: Template,
+
+  args: {
+    multipleColumns: true,
+    minColumnWidth: '500px',
+  },
 };

package/src/stories/Comment/Comment.stories.tsx

@@ -1,21 +1,28 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { StoryObj } from '@storybook/react';
 import { IReqoreCommentFeedProps } from '../../components/CommentFeed';
 import { ReqoreComment, ReqoreCommentFeed } from '../../index';
+import { StoryMeta } from '../utils';
 import { argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreCommentFeedProps>();
 
-export default {
+const meta = {
   title: 'Other/Comments/Stories',
+  component: ReqoreCommentFeed,
   argTypes: {
     ...createArg('gapSize', {
-      defaultValue: '0',
       type: 'string',
     }),
   },
-} as ComponentMeta<typeof ReqoreCommentFeed>;
+  args: {
+    gapSize: '0',
+  },
+} as StoryMeta<typeof ReqoreCommentFeed>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-const Template: ComponentStory<typeof ReqoreCommentFeed> = (args) => {
+const Template = (args) => {
   return (
     <ReqoreCommentFeed {...args}>
       <ReqoreComment title='Test comment' detail='2 hours ago' icon='UserFill'>
@@ -124,4 +131,6 @@ const Template: ComponentStory<typeof ReqoreCommentFeed> = (args) => {
   );
 };
 
-export const Basic = Template.bind({});
+export const Basic: Story = {
+  render: Template,
+};