@qoretechnologies/reqore 0.44.0 → 0.45.0

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

@@ -1,317 +0,0 @@
-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 { expect } from '@storybook/jest';
-import { fireEvent } from '@storybook/testing-library';
-import { waitFor } from '@testing-library/react';
-import { sleep } from '../../helpers/utils';
-import { StoryMeta } from '../utils';
-import { argManager, IntentArg, SizeArg } from '../utils/args';
-
-export interface IColumnsStoryArgs extends IReqoreColumnsProps {
-  multipleColumns?: boolean;
-}
-
-const { createArg, disableArgs } = argManager<IReqoreCollectionProps>();
-
-const meta = {
-  title: 'Collections/Collection/Stories',
-  component: ReqoreCollection,
-  argTypes: {
-    ...createArg('stacked', {
-      type: 'boolean',
-      name: 'Stacked',
-      description: 'If true, the collection will be stacked',
-    }),
-    ...createArg('maxItemHeight', {
-      type: 'number',
-      name: 'Max Item Height',
-      description: 'Max height of the collection item',
-    }),
-    ...createArg('sortable', {
-      type: 'boolean',
-      name: 'Sortable',
-      description: 'If true, the collection will be sortable',
-    }),
-    ...createArg('filterable', {
-      type: 'boolean',
-      name: 'Filterable',
-      description: 'If true, the collection will be filterable',
-    }),
-    ...createArg('rounded', {
-      type: 'boolean',
-      name: 'Rounded',
-      description: 'If true, the collection will be rounded when stacked',
-    }),
-    ...createArg('height', {
-      type: 'string',
-      name: 'Height',
-      description: 'Height of the collection',
-    }),
-    ...createArg('fill', {
-      type: 'boolean',
-      name: 'Fill parent',
-      description: 'If true, the collection will fill the parent',
-    }),
-    ...createArg('label', {
-      type: 'string',
-      name: 'Label',
-      description: 'Label of the collection',
-    }),
-    ...disableArgs(['items', 'actions', 'bottomActions', 'size', 'customTheme', 'className']),
-    ...IntentArg,
-    ...SizeArg,
-  },
-  args: {
-    selectedIcon: 'CheckLine',
-    maxItemHeight: 100,
-    sortable: true,
-    filterable: true,
-    rounded: true,
-  },
-} as StoryMeta<typeof ReqoreCollection>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  args: {
-    label: 'Config Items',
-    items,
-    actions: [
-      { label: 'Custom action', icon: 'Home7Line', fixed: true },
-      { actions: [{ label: '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: Story = {
-  args: {
-    label: 'Collection of items',
-    stacked: true,
-    items,
-    actions: [
-      { label: 'Custom action', icon: 'Home7Line', fixed: true },
-      { actions: [{ label: '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: Story = {
-  args: {
-    label: 'Collection of items',
-    items,
-    showSelectedFirst: true,
-  },
-};
-
-export const Zoomable: Story = {
-  args: {
-    label: 'Collection of items',
-    items,
-    zoomable: true,
-  },
-};
-
-export const WithDefaultZoom: Story = {
-  args: {
-    label: 'Collection of items',
-    items,
-    zoomable: true,
-    size: 'tiny',
-    defaultZoom: 2,
-  },
-};
-
-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: Story = {
-  args: {
-    label: 'Collection of items',
-    items,
-    inputProps: {
-      effect: {
-        gradient: { colors: 'warning' },
-      },
-      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'}`,
-  },
-};
-
-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>
-      </>
-    ),
-  },
-};
-
-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,
-};
-
-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,
-};
-
-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,
-};
-
-export const CustomSortKeysWithDefaultSort: Story = {
-  args: {
-    label: 'Posts',
-    items: items.map((item) => ({
-      ...item,
-      badge: [item.metadata.id, item.metadata.category],
-    })),
-    defaultSort: 'desc',
-    defaultSortBy: 'id',
-    sortKeys: {
-      id: 'ID',
-      category: 'Category',
-    },
-  },
-  play: async ({ canvasElement }) => {
-    await sleep(500);
-
-    await fireEvent.click(canvasElement.querySelector('.reqore-collection-sort'));
-
-    await waitFor(
-      () => expect(document.querySelectorAll('.reqore-popover-content')).toHaveLength(1),
-      {
-        timeout: 5000,
-      }
-    );
-  },
-};

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

@@ -1,158 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { IReqoreColumnsProps } from '../../components/Columns';
-import {
-  ReqoreButton,
-  ReqoreColumn,
-  ReqoreColumns,
-  ReqoreControlGroup,
-  ReqoreH2,
-  ReqoreInput,
-  ReqoreVerticalSpacer,
-} from '../../index';
-import { StoryMeta } from '../utils';
-import { argManager } from '../utils/args';
-
-export interface IColumnsStoryArgs extends IReqoreColumnsProps {
-  multipleColumns?: boolean;
-}
-
-const { createArg, disableArgs } = argManager<IColumnsStoryArgs>();
-
-const meta = {
-  title: 'Layout/Columns/Stories',
-  component: ReqoreColumns,
-  argTypes: {
-    ...createArg('minColumnWidth', {
-      defaultValue: '200px',
-    }),
-    ...createArg('maxColumnWidth', {
-      defaultValue: '300px',
-    }),
-    ...createArg('alignItems', {
-      defaultValue: 'normal',
-    }),
-    ...createArg('columns', {
-      defaultValue: undefined,
-      type: 'string',
-    }),
-    ...createArg('columnsGap', {
-      defaultValue: undefined,
-    }),
-    ...disableArgs(['className', 'multipleColumns']),
-  },
-  args: {
-    minColumnWidth: '200px',
-    maxColumnWidth: '300px',
-    alignItems: 'normal',
-  },
-} as StoryMeta<typeof ReqoreColumns>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template = (args) => {
-  return (
-    <ReqoreColumns {...args} columnsGap='10px'>
-      <ReqoreColumn
-        {...args}
-        style={{ border: '1px solid white', padding: '10px' }}
-        flexFlow='column'
-      >
-        <ReqoreH2>Left Column</ReqoreH2>
-        <ReqoreVerticalSpacer height={20} lineSize='tiny' />
-        <ReqoreControlGroup fluid>
-          <ReqoreInput placeholder='Filter' />
-        </ReqoreControlGroup>
-        <ReqoreVerticalSpacer height={10} />
-        <ReqoreControlGroup vertical fluid>
-          <ReqoreButton description='This is a button'>Button</ReqoreButton>
-          <ReqoreButton description='This is a button'>Button</ReqoreButton>
-          <ReqoreButton description='This is a button'>Button</ReqoreButton>
-          <ReqoreButton description='This is a button'>Button</ReqoreButton>
-          <ReqoreButton description='This is a button'>Button</ReqoreButton>
-          <ReqoreButton description='This is a button'>Button</ReqoreButton>
-          <ReqoreButton description='This is a button'>Button</ReqoreButton>
-        </ReqoreControlGroup>
-      </ReqoreColumn>
-      <ReqoreColumn
-        {...args}
-        style={{ border: '1px solid white', padding: '10px' }}
-        flexFlow='column'
-      >
-        <ReqoreH2>Right Column</ReqoreH2>
-        <ReqoreVerticalSpacer height={20} lineSize='tiny' />
-        <ReqoreControlGroup fluid>
-          <ReqoreInput placeholder='Filter' />
-        </ReqoreControlGroup>
-        <ReqoreVerticalSpacer height={10} />
-        <ReqoreControlGroup vertical fluid>
-          <ReqoreButton description='This is a button'>Button</ReqoreButton>
-          <ReqoreButton description='This is a button'>Button</ReqoreButton>
-        </ReqoreControlGroup>
-      </ReqoreColumn>
-      {args.multipleColumns && (
-        <>
-          <ReqoreColumn
-            {...args}
-            style={{ border: '1px solid white', padding: '10px' }}
-            flexFlow='column'
-          >
-            <ReqoreH2>3rd Column</ReqoreH2>
-            <ReqoreVerticalSpacer height={20} lineSize='tiny' />
-            <ReqoreControlGroup fluid>
-              <ReqoreInput placeholder='Filter' />
-            </ReqoreControlGroup>
-            <ReqoreVerticalSpacer height={10} />
-            <ReqoreControlGroup vertical fluid>
-              <ReqoreButton description='This is a button'>Button</ReqoreButton>
-              <ReqoreButton description='This is a button'>Button</ReqoreButton>
-              <ReqoreButton description='This is a button'>Button</ReqoreButton>
-              <ReqoreButton description='This is a button'>Button</ReqoreButton>
-            </ReqoreControlGroup>
-          </ReqoreColumn>
-          <ReqoreColumn
-            {...args}
-            style={{ border: '1px solid white', padding: '10px' }}
-            flexFlow='column'
-          >
-            <ReqoreH2>4th Column</ReqoreH2>
-            <ReqoreVerticalSpacer height={20} lineSize='tiny' />
-            <ReqoreControlGroup fluid>
-              <ReqoreInput placeholder='Filter' />
-            </ReqoreControlGroup>
-          </ReqoreColumn>
-        </>
-      )}
-    </ReqoreColumns>
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};
-
-export const MultipleColumns: Story = {
-  render: Template,
-
-  args: {
-    multipleColumns: true,
-  },
-};
-
-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,136 +0,0 @@
-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>();
-
-const meta = {
-  title: 'Other/Comments/Stories',
-  component: ReqoreCommentFeed,
-  argTypes: {
-    ...createArg('gapSize', {
-      type: 'string',
-    }),
-  },
-  args: {
-    gapSize: '0',
-  },
-} as StoryMeta<typeof ReqoreCommentFeed>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template = (args) => {
-  return (
-    <ReqoreCommentFeed {...args}>
-      <ReqoreComment title='Test comment' detail='2 hours ago' icon='UserFill'>
-        This is a test
-      </ReqoreComment>
-      <ReqoreComment
-        title='Test comment'
-        detail='2 hours ago'
-        icon='UserFill'
-        rounded
-        flat
-        intent='info'
-      >
-        root@f075a0285dc4:/usr/src/app# yarn storybook yarn run v1.22.5 $ start-storybook -p 6006
-        --no-dll info @storybook/react v6.3.6 info (node:94152) DeprecationWarning: DLL-related CLI
-        flags are deprecated, see:
-        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags (Use
-        `node --trace-deprecation ...` to show where the warning was created) info = Loading presets
-        info = Loading 1 config file in "/usr/src/app/.storybook" info = Loading 9 other files in
-        "/usr/src/app/.storybook" info = Adding stories defined in "/usr/src/app/.storybook/main.js"
-        info = Using implicit CSS loaders info = Using prebuilt manager info = Using default
-        Webpack4 setup (node:94152) DeprecationWarning: Default PostCSS plugins are deprecated. When
-        switching to '@storybook/addon-postcss', you will need to add your own plugins, such as
-        'postcss-flexbugs-fixes' and 'autoprefixer'. See
-        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins
-        for details. webpack built preview fa5eb92344441c8f8b60 in 13740ms
-      </ReqoreComment>
-      <ReqoreComment
-        title='Test comment'
-        detail='2 hours ago'
-        intent='danger'
-        image='https://lh3.googleusercontent.com/ogw/ADea4I59tV_-XSMTDNNfJuHsP5-6I22aIE7Q8itFr2peUQ=s32-c-mo'
-      >
-        This is a test of some kind
-      </ReqoreComment>
-      <ReqoreComment icon='UserFill' rounded flat intent='info' detail='2 hours ago'>
-        root@f075a0285dc4:/usr/src/app# yarn storybook yarn run v1.22.5 $ start-storybook -p 6006
-        --no-dll info @storybook/react v6.3.6 info (node:94152) DeprecationWarning: DLL-related CLI
-        flags are deprecated, see:
-        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags (Use
-        `node --trace-deprecation ...` to show where the warning was created) info = Loading presets
-        info = Loading 1 config file in "/usr/src/app/.storybook" info = Loading 9 other files in
-        "/usr/src/app/.storybook" info = Adding stories defined in "/usr/src/app/.storybook/main.js"
-        info = Using implicit CSS loaders info = Using prebuilt manager info = Using default
-        Webpack4 setup (node:94152) DeprecationWarning: Default PostCSS plugins are deprecated. When
-        switching to '@storybook/addon-postcss', you will need to add your own plugins, such as
-        'postcss-flexbugs-fixes' and 'autoprefixer'. See
-        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins
-        for details. webpack built preview fa5eb92344441c8f8b60 in 13740ms
-      </ReqoreComment>
-      <ReqoreComment
-        rounded
-        flat
-        intent='info'
-        title='Awesome comment'
-        actions={[
-          {
-            label: 'Edit',
-            icon: 'Edit2Line',
-          },
-        ]}
-      >
-        root@f075a0285dc4:/usr/src/app# yarn storybook yarn run v1.22.5 $ start-storybook -p 6006
-        --no-dll info @storybook/react v6.3.6 info (node:94152) DeprecationWarning: DLL-related CLI
-        flags are deprecated, see:
-        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags (Use
-        `node --trace-deprecation ...` to show where the warning was created) info = Loading presets
-        info = Loading 1 config file in "/usr/src/app/.storybook" info = Loading 9 other files in
-        "/usr/src/app/.storybook" info = Adding stories defined in "/usr/src/app/.storybook/main.js"
-        info = Using implicit CSS loaders info = Using prebuilt manager info = Using default
-        Webpack4 setup (node:94152) DeprecationWarning: Default PostCSS plugins are deprecated. When
-        switching to '@storybook/addon-postcss', you will need to add your own plugins, such as
-        'postcss-flexbugs-fixes' and 'autoprefixer'. See
-        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins
-        for details. webpack built preview fa5eb92344441c8f8b60 in 13740ms
-      </ReqoreComment>
-      <ReqoreComment
-        rounded
-        flat
-        intent='warning'
-        actions={[
-          {
-            label: 'Edit',
-            icon: 'Edit2Line',
-          },
-          {
-            icon: 'DeleteBin2Fill',
-          },
-        ]}
-      >
-        root@f075a0285dc4:/usr/src/app# yarn storybook yarn run v1.22.5 $ start-storybook -p 6006
-        --no-dll info @storybook/react v6.3.6 info (node:94152) DeprecationWarning: DLL-related CLI
-        flags are deprecated, see:
-        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags (Use
-        `node --trace-deprecation ...` to show where the warning was created) info = Loading presets
-        info = Loading 1 config file in "/usr/src/app/.storybook" info = Loading 9 other files in
-        "/usr/src/app/.storybook" info = Adding stories defined in "/usr/src/app/.storybook/main.js"
-        info = Using implicit CSS loaders info = Using prebuilt manager info = Using default
-        Webpack4 setup (node:94152) DeprecationWarning: Default PostCSS plugins are deprecated. When
-        switching to '@storybook/addon-postcss', you will need to add your own plugins, such as
-        'postcss-flexbugs-fixes' and 'autoprefixer'. See
-        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins
-        for details. webpack built preview fa5eb92344441c8f8b60 in 13740ms
-      </ReqoreComment>
-    </ReqoreCommentFeed>
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};