@qoretechnologies/reqore 0.44.0 → 0.46.0

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -1,375 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { fireEvent, within } from '@storybook/testing-library';
-import ReqoreButton, { IReqoreButtonProps } from '../../components/Button';
-import { IReqoreDropdownProps } from '../../components/Dropdown';
-import { sleep } from '../../helpers/utils';
-import { ReqoreControlGroup, ReqoreDropdown, ReqoreInput } from '../../index';
-import { StoryMeta } from '../utils';
-import { argManager } from '../utils/args';
-
-const { createArg, disableArg } = argManager<IReqoreDropdownProps>();
-
-const meta = {
-  title: 'Form/Dropdown/Stories',
-  component: ReqoreDropdown,
-  parameters: {
-    chromatic: {
-      delay: 1500,
-    },
-  },
-  argTypes: {
-    ...disableArg('multiSelect'),
-    ...createArg('component', {
-      defaultValue: ReqoreButton,
-      table: {
-        disable: true,
-      },
-    }),
-    ...createArg('filterable', {
-      defaultValue: true,
-      name: 'Filterable',
-      type: 'boolean',
-    }),
-    ...createArg('items', {
-      table: {
-        disable: true,
-      },
-    }),
-  },
-  args: {
-    component: ReqoreButton,
-    filterable: true,
-    items: [
-      {
-        selected: true,
-        value: 'Hello',
-        icon: 'SunCloudyLine',
-      },
-      {
-        value: 'How are ya, I am super long item and I am not going to fit in the dropdown',
-        icon: 'BatteryChargeFill',
-      },
-      {
-        disabled: true,
-        value: 'i aM diSAblEd',
-        icon: 'StopCircleLine',
-      },
-      {
-        divider: true,
-        label: 'Divider',
-        dividerAlign: 'left',
-      },
-      {
-        selected: true,
-        value: 'Hello',
-        icon: 'SunCloudyLine',
-      },
-      {
-        value: 'How are ya',
-        icon: 'BatteryChargeFill',
-        description:
-          "Yep, and the description is now also available and possible, isn't that great?",
-      },
-      {
-        disabled: true,
-        value: 'i aM diSAblEd',
-        icon: 'StopCircleLine',
-      },
-      {
-        selected: true,
-        value: 'Hello',
-        icon: 'SunCloudyLine',
-      },
-      {
-        value: 'How are ya',
-        icon: 'BatteryChargeFill',
-      },
-      {
-        disabled: true,
-        value: 'i aM diSAblEd',
-        icon: 'StopCircleLine',
-      },
-      {
-        selected: true,
-        value: 'Hello',
-        icon: 'SunCloudyLine',
-      },
-      {
-        value: 'How are ya',
-        icon: 'BatteryChargeFill',
-      },
-      {
-        disabled: true,
-        value: 'i aM diSAblEd',
-        icon: 'StopCircleLine',
-      },
-      {
-        selected: true,
-        value: 'Hello',
-        icon: 'SunCloudyLine',
-      },
-      {
-        value: 'How are ya',
-        icon: 'BatteryChargeFill',
-      },
-      {
-        disabled: true,
-        value: 'i aM diSAblEd',
-        icon: 'StopCircleLine',
-      },
-      {
-        selected: true,
-        value: 'Hello',
-        icon: 'SunCloudyLine',
-      },
-      {
-        value: 'How are ya',
-        icon: 'BatteryChargeFill',
-      },
-      {
-        disabled: true,
-        value: 'i aM diSAblEd',
-        icon: 'StopCircleLine',
-      },
-    ],
-  },
-} as StoryMeta<typeof ReqoreDropdown<IReqoreButtonProps>>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<typeof ReqoreDropdown<IReqoreButtonProps>> = (args) => {
-  if (args.scrollToSelected || args.paging) {
-    return (
-      <ReqoreControlGroup>
-        <ReqoreDropdown
-          {...args}
-          label={args.label}
-          isDefaultOpen
-          filterable
-          scrollToSelected={args.scrollToSelected}
-          paging={args.paging}
-          items={Array(130)
-            .fill(null)
-            .map((_, i) => ({
-              label: `Item ${i}`,
-              value: `item-${i}`,
-              selected: i === 55,
-            }))}
-        />
-      </ReqoreControlGroup>
-    );
-  }
-
-  return (
-    <>
-      <ReqoreControlGroup wrap>
-        <ReqoreDropdown label='Default Dropdown' {...args} />
-        <ReqoreDropdown label='Disabled if empty' {...args} items={[]} />
-        <ReqoreDropdown
-          icon='SunCloudyLine'
-          label='Custom icon'
-          {...args}
-          leftIconColor='warning:lighten:2'
-        />
-        <ReqoreDropdown
-          rightIcon='SunCloudyLine'
-          caretPosition='right'
-          label='Custom icon with caret on right'
-          {...args}
-          iconColor='success:lighten:2'
-        />
-        <ReqoreDropdown
-          items={[
-            {
-              selected: true,
-              label: 'Hello',
-              value: 'hello',
-              icon: 'SunCloudyLine',
-            },
-            {
-              label: 'How are ya',
-              value: 'howareya',
-              icon: 'BatteryChargeFill',
-            },
-            {
-              disabled: true,
-              label: 'i aM diSAblEd',
-              value: 'disabled',
-              icon: 'StopCircleLine',
-            },
-            {
-              label: 'With right button',
-              value: 'kek',
-              icon: 'CheckDoubleLine',
-            },
-          ]}
-        />
-        <ReqoreDropdown label='Disabled with items' {...args} disabled />
-      </ReqoreControlGroup>
-      <br />
-      <ReqoreControlGroup fluid>
-        <ReqoreDropdown
-          rightIcon='SunCloudyLine'
-          caretPosition='right'
-          label='Open By Default'
-          {...args}
-          placeholder='Fluid component'
-          isDefaultOpen
-          useTargetWidth
-        />
-      </ReqoreControlGroup>
-    </>
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};
-
-export const CustomComponent: Story = {
-  render: Template,
-
-  args: {
-    component: ReqoreInput,
-    placeholder: 'Custom component',
-    label: undefined,
-  },
-};
-
-export const ScrollToSelectedItem: Story = {
-  render: Template,
-
-  args: {
-    scrollToSelected: true,
-    label: 'Dropdown that scrolls to selected item',
-  },
-};
-
-export const WithCustomFilter: Story = {
-  render: Template,
-
-  args: {
-    label: 'Dropdown with custom filter',
-    filterPlaceholder: 'Custom filter placeholder',
-    filter: 'something',
-    onFilterChange: (value) => {
-      console.log(value);
-    },
-  },
-};
-
-export const WithPaging: Story = {
-  render: Template,
-
-  args: {
-    paging: {
-      itemsPerPage: 50,
-      changePageOnScroll: 'horizontal',
-    },
-    label: 'Dropdown with paging',
-  },
-};
-
-export const WithLoadMore: Story = {
-  render: Template,
-
-  args: {
-    paging: {
-      fluid: true,
-      infinite: true,
-      scrollOnLoadMore: true,
-      loadMoreLabel: 'Load additional items...',
-      showLabels: true,
-      includeBottomControls: false,
-    },
-    label: 'Dropdown with load more',
-  },
-};
-
-export const WithCustomPaging: Story = {
-  render: Template,
-
-  args: {
-    paging: {
-      fluid: true,
-      infinite: true,
-      scrollOnLoadMore: true,
-      pageControlsPosition: 'both',
-      loadMoreLabel: 'Load additional items...',
-      showLabels: true,
-      loadMoreButtonProps: {
-        textAlign: 'center',
-        effect: {
-          gradient: {
-            colors: 'info',
-            animate: 'hover',
-          },
-          textSize: 'small',
-          uppercase: true,
-          spaced: 3,
-        },
-      },
-    },
-    label: 'Dropdown with custom paging',
-  },
-
-  play: () => {},
-};
-
-export const WithChildItems: Story = {
-  render: (args) => <ReqoreDropdown {...args} />,
-  args: {
-    label: 'Dropdown with child items',
-    items: [
-      {
-        label: 'Test',
-        description: 'I have children',
-        rightIcon: 'MenuLine',
-        rightIconColor: 'info:lighten:2',
-        items: [
-          {
-            label: 'Test child 1',
-          },
-          {
-            label: 'Test child 2',
-          },
-          {
-            label: 'Test child 3',
-            description: 'I have children too',
-            items: [
-              {
-                label: 'Test deep child 1',
-              },
-              {
-                label: 'Test deep child 2',
-              },
-              {
-                label: 'Test deep child 3',
-              },
-            ],
-          },
-          {
-            label: 'Test child 4',
-          },
-        ],
-      },
-      {
-        label: 'Normal item',
-        description: 'I have no children',
-      },
-    ],
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    await sleep(200);
-
-    await fireEvent.click(canvas.getAllByText('Dropdown with child items')[0]);
-
-    await sleep(200);
-
-    await fireEvent.click(canvas.getAllByText('Test')[0]);
-  },
-};

package/src/stories/Dropdown/DropdownTests.stories.tsx

@@ -1,111 +0,0 @@
-import { expect } from '@storybook/jest';
-import { StoryObj } from '@storybook/react';
-import { fireEvent, waitFor, within } from '@storybook/testing-library';
-import ReqoreButton, { IReqoreButtonProps } from '../../components/Button';
-import { IReqoreDropdownProps } from '../../components/Dropdown';
-import { sleep } from '../../helpers/utils';
-import { ReqoreDropdown } from '../../index';
-import { StoryMeta } from '../utils';
-import { argManager } from '../utils/args';
-import { WithChildItems } from './Dropdown.stories';
-
-const { createArg, disableArg } = argManager<IReqoreDropdownProps>();
-
-const meta = {
-  title: 'Form/Dropdown/Tests',
-  component: ReqoreDropdown,
-  parameters: {
-    chromatic: {
-      delay: 1500,
-    },
-  },
-  argTypes: {
-    ...disableArg('multiSelect'),
-    ...createArg('component', {
-      defaultValue: ReqoreButton,
-      table: {
-        disable: true,
-      },
-    }),
-    ...createArg('filterable', {
-      defaultValue: true,
-      name: 'Filterable',
-      type: 'boolean',
-    }),
-    ...createArg('items', {
-      table: {
-        disable: true,
-      },
-    }),
-  },
-  args: {
-    component: ReqoreButton,
-    filterable: true,
-  },
-} as StoryMeta<typeof ReqoreDropdown<IReqoreButtonProps>>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const ListIsClosedWhenItemIsClicked: Story = {
-  args: {
-    label: 'Default dropdown',
-    items: [
-      {
-        label: 'Test item 1',
-      },
-      {
-        label: 'Test item 2',
-      },
-      {
-        label: 'Test item 3',
-      },
-    ],
-  },
-  play: async ({ canvasElement, ...rest }) => {
-    const canvas = within(canvasElement);
-
-    await sleep(200);
-
-    await fireEvent.click(canvas.getAllByText('Default dropdown')[0]);
-
-    await sleep(200);
-
-    await fireEvent.click(canvas.getAllByText('Test item 1')[0]);
-
-    await sleep(200);
-
-    await expect(document.querySelector('.reqore-popover-content')).toBeFalsy();
-  },
-};
-
-export const ItemsCanBeTraversed: Story = {
-  ...WithChildItems,
-  play: async ({ canvasElement, ...rest }) => {
-    const canvas = within(canvasElement);
-
-    await WithChildItems.play({ canvasElement, ...rest });
-
-    await waitFor(() => expect(canvas.getAllByText('Test child 3')[0]).toBeTruthy(), {
-      timeout: 5000,
-    });
-
-    await fireEvent.click(canvas.getAllByText('Test child 3')[0]);
-
-    await expect(canvas.getAllByText('Test deep child 3')[0]).toBeTruthy();
-  },
-};
-
-export const BackButtonsWork: Story = {
-  ...ItemsCanBeTraversed,
-  play: async ({ canvasElement, ...rest }) => {
-    const canvas = within(canvasElement);
-
-    await ItemsCanBeTraversed.play({ canvasElement, ...rest });
-
-    await fireEvent.click(document.querySelector('.reqore-dropdown-back-button'));
-
-    await expect(canvas.getAllByText('Test child 3')[0]).toBeTruthy();
-  },
-};

package/src/stories/ExportModal/ExportModal.stories.tsx

@@ -1,18 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { ReqoreExportModal } from '../../components/ExportModal';
-import { tableData } from '../../mock/tableData';
-import { StoryMeta } from '../utils';
-
-const meta = {
-  title: 'Utilities/Export Modal/Stories',
-  component: ReqoreExportModal,
-} as StoryMeta<typeof ReqoreExportModal>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    data: tableData,
-  },
-};

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

@@ -1,108 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { ReqoreControlGroup, ReqoreHeading } from '../../index';
-import { StoryMeta } from '../utils';
-import { IntentArg } from '../utils/args';
-
-const meta = {
-  title: 'Other/Heading/Stories',
-  component: ReqoreHeading,
-  argTypes: {
-    ...IntentArg,
-  },
-} as StoryMeta<typeof ReqoreHeading>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<typeof ReqoreHeading> = (args) => {
-  return (
-    <ReqoreControlGroup gapSize='big' vertical>
-      <ReqoreHeading size={1} {...args}>
-        This is a heading
-      </ReqoreHeading>
-      <ReqoreHeading size={2} {...args}>
-        This is a heading
-      </ReqoreHeading>
-      <ReqoreHeading size={3} {...args}>
-        This is a heading
-      </ReqoreHeading>
-      <ReqoreHeading size={4} {...args}>
-        This is a heading
-      </ReqoreHeading>
-      <ReqoreHeading size={5} {...args}>
-        This is a heading
-      </ReqoreHeading>
-      <ReqoreHeading size={6} {...args}>
-        This is a heading
-      </ReqoreHeading>
-      <ReqoreHeading size={1} {...args} tooltip={{ content: 'Nice tooltip', openOnMount: true }}>
-        This is a heading with tooltip
-      </ReqoreHeading>
-    </ReqoreControlGroup>
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};
-
-export const Success: Story = {
-  render: Template,
-
-  args: {
-    intent: 'success',
-  },
-};
-
-export const Danger: Story = {
-  render: Template,
-
-  args: {
-    intent: 'danger',
-  },
-};
-
-export const Warning: Story = {
-  render: Template,
-
-  args: {
-    intent: 'warning',
-  },
-};
-
-export const Info: Story = {
-  render: Template,
-
-  args: {
-    intent: 'info',
-  },
-};
-
-export const Pending: Story = {
-  render: Template,
-
-  args: {
-    intent: 'pending',
-  },
-};
-
-export const Muted: Story = {
-  render: Template,
-
-  args: {
-    intent: 'muted',
-  },
-};
-
-export const Effect: Story = {
-  render: Template,
-
-  args: {
-    effect: {
-      gradient: { colors: { 0: '#5e0acc', 100: '#c008c0' } },
-      spaced: 4,
-      weight: 'bold',
-      uppercase: true,
-    },
-  },
-};