@qoretechnologies/reqore 0.44.0 → 0.46.0

package/src/stories/Menu/Menu.stories.tsx

@@ -1,367 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { fireEvent, within } from '@storybook/testing-library';
-import { noop } from 'lodash';
-import { IReqoreMenuProps } from '../../components/Menu';
-import { IReqoreMenuItemProps } from '../../components/Menu/item';
-import { ReqoreMenuSection } from '../../components/Menu/section';
-import {
-  ReqoreControlGroup,
-  ReqoreInput,
-  ReqoreMenu,
-  ReqoreMenuDivider,
-  ReqoreMenuItem,
-  ReqorePopover,
-} from '../../index';
-import { StoryMeta } from '../utils';
-import { IntentArg, argManager } from '../utils/args';
-
-const { createArg } = argManager<IReqoreMenuProps>();
-
-const meta = {
-  title: 'Navigation/Menu/Stories',
-  component: ReqoreMenu,
-  args: {
-    width: '210px',
-    maxHeight: undefined,
-    wrapText: false,
-    minimal: false,
-    flat: true,
-    rounded: true,
-    transparent: false,
-  },
-  argTypes: {
-    ...createArg('width', {
-      type: 'string',
-      defaultValue: '210px',
-      name: 'Width',
-    }),
-    ...createArg('maxHeight', {
-      type: 'string',
-      defaultValue: undefined,
-      name: 'Max Height',
-    }),
-    ...createArg('position', {
-      defaultValue: undefined,
-      name: 'Position',
-      options: ['left', 'right'],
-      control: {
-        type: 'select',
-      },
-    }),
-    ...createArg('wrapText', {
-      defaultValue: false,
-      name: 'Wrap text',
-      control: {
-        type: 'boolean',
-      },
-      description: 'Whether to wrap text or not',
-    }),
-    ...createArg('minimal', {
-      defaultValue: false,
-      name: 'Minimal',
-      control: {
-        type: 'boolean',
-      },
-      description: 'Whether to use minimal style or not',
-    }),
-    ...createArg('flat', {
-      defaultValue: true,
-      name: 'Flat',
-      control: {
-        type: 'boolean',
-      },
-      description: 'Whether to use flat style or not',
-    }),
-    ...createArg('rounded', {
-      defaultValue: true,
-      name: 'Rounded',
-      control: {
-        type: 'boolean',
-      },
-      description: 'Whether to use rounded style or not',
-    }),
-    ...createArg('transparent', {
-      defaultValue: false,
-      name: 'Transparent',
-      control: {
-        type: 'boolean',
-      },
-      description: 'Whether to use transparent style or not',
-    }),
-    ...IntentArg,
-  },
-} as StoryMeta<typeof ReqoreMenu>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const MenuWithSubmenus = (args: IReqoreMenuProps) => (
-  <ReqoreMenu {...args} width='300px'>
-    <ReqoreMenuSection label='Submenu 1' icon='Apps2Fill'>
-      <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine' onRightIconClick={noop}>
-        Submenu Item 1
-      </ReqoreMenuItem>
-      <ReqoreMenuItem
-        icon='DualSim1Line'
-        rightIcon='MoneyEuroBoxLine'
-        disabled
-        onRightIconClick={noop}
-      >
-        Submenu Item 2
-      </ReqoreMenuItem>
-      <ReqoreMenuSection icon='PlayListLine' label='Submenu 2 active' activeIntent='info'>
-        <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine'>
-          Submenu Item 3
-        </ReqoreMenuItem>
-        <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine'>
-          Submenu Item 4
-        </ReqoreMenuItem>
-      </ReqoreMenuSection>
-      <ReqoreMenuSection label='Collapsed submenu' isCollapsed={true} icon='ListOrdered'>
-        <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine'>
-          Submenu Item 5
-        </ReqoreMenuItem>
-        <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine'>
-          Submenu Item 6
-        </ReqoreMenuItem>
-      </ReqoreMenuSection>
-    </ReqoreMenuSection>
-  </ReqoreMenu>
-);
-
-const Template: StoryFn<IReqoreMenuProps> = (args) => {
-  return (
-    <ReqoreControlGroup verticalAlign='flex-start'>
-      <ReqoreMenu {...args}>
-        <ReqoreInput placeholder='Custom component' icon='Search2Fill' flat={false} />
-        <ReqoreMenuItem icon='Save3Fill' intent='success' selected>
-          Selected success
-        </ReqoreMenuItem>
-        <ReqoreMenuItem icon='Save3Fill' badge={[10, 20]}>
-          Save this item
-        </ReqoreMenuItem>
-        <ReqoreMenuDivider label='BIG Divider' size='huge' />
-        <ReqoreMenuItem
-          icon='ChatPollFill'
-          onClick={() => alert('Item clicked')}
-          rightIcon='FahrenheitFill'
-          onRightIconClick={() => alert('Icon clicked')}
-          tooltip={{
-            content: 'You sure?',
-          }}
-          intent='danger'
-        >
-          Delete
-        </ReqoreMenuItem>
-
-        <>
-          <ReqoreMenuItem
-            icon='BluetoothConnectLine'
-            rightIcon='EditLine'
-            onRightIconClick={() => alert('Icon clicked')}
-            description='Button with right icon and description'
-            customTheme={{
-              main: 'info:darken:5:0.3',
-            }}
-          >
-            Some button
-          </ReqoreMenuItem>
-        </>
-
-        <ReqoreMenuItem icon='Lock2Fill' description='I also have a description'>
-          This is a really long item that should wrap
-        </ReqoreMenuItem>
-        <ReqoreMenuItem icon='Lock2Fill' disabled>
-          Disabled
-        </ReqoreMenuItem>
-        <ReqoreMenuItem icon='Lock2Fill' disabled intent='warning'>
-          Disabled intent
-        </ReqoreMenuItem>
-        <ReqoreMenuDivider label='Divider' />
-        <ReqorePopover
-          component={ReqoreMenuItem}
-          flat={args.flat}
-          componentProps={
-            {
-              icon: 'EmotionUnhappyLine',
-              rightIcon: 'Scissors2Fill',
-              leftIconColor: 'danger:lighten',
-              wrap: args.wrapText,
-              flat: args.flat,
-            } as IReqoreMenuItemProps
-          }
-          openOnMount
-          content={
-            <ReqoreMenu {...args}>
-              <ReqoreMenuItem icon='ZhihuFill'>Item 1</ReqoreMenuItem>
-              <ReqoreMenuItem
-                icon='AccountCircleFill'
-                description='Would you look at that beautiful description'
-                intent='warning'
-              >
-                Item 2
-              </ReqoreMenuItem>
-              <ReqoreMenuItem icon='AnticlockwiseFill' disabled>
-                Item 3
-              </ReqoreMenuItem>
-              <ReqoreMenuItem
-                icon='ArchiveFill'
-                badge={{
-                  label: '10',
-                  effect: { gradient: { colors: { 0: '#00e3e8', 100: '#eb0e8c' } } },
-                }}
-              >
-                Item 4
-              </ReqoreMenuItem>
-            </ReqoreMenu>
-          }
-          isReqoreComponent
-          noWrapper
-          handler='click'
-          placement='right'
-        >
-          I have a submenu on click
-        </ReqorePopover>
-        <ReqoreMenuDivider
-          label='Fancy divider'
-          effect={{ gradient: { colors: { 0: '#0d5ba5', 100: '#ff5dfd' } } }}
-          align='left'
-          padded='none'
-          margin='none'
-        />
-        <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine' selected>
-          I am selected!
-        </ReqoreMenuItem>
-        <ReqoreMenuItem
-          icon='FireLine'
-          rightIcon='ArrowRightDownLine'
-          effect={{
-            gradient: {
-              colors: {
-                0: '#000000',
-                100: 'transparent',
-              },
-            },
-          }}
-          description='I also have a description'
-          badge={10}
-        >
-          Fancy
-        </ReqoreMenuItem>
-      </ReqoreMenu>
-      <MenuWithSubmenus {...args} />
-    </ReqoreControlGroup>
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};
-
-export const WrappedText: Story = {
-  render: Template,
-
-  args: {
-    wrapText: true,
-  },
-};
-
-export const Minimal: Story = {
-  render: Template,
-
-  args: {
-    minimal: true,
-  },
-};
-
-export const NoPadding: Story = {
-  render: Template,
-
-  args: {
-    padded: false,
-  },
-};
-
-export const NotFlat: Story = {
-  render: Template,
-
-  args: {
-    flat: false,
-  },
-};
-
-export const Transparent: Story = {
-  render: Template,
-
-  args: {
-    transparent: true,
-  },
-};
-
-export const Positioned: Story = {
-  render: Template,
-
-  args: {
-    position: 'left',
-    transparent: true,
-    rounded: false,
-    padded: false,
-  },
-};
-
-export const Small: Story = {
-  render: Template,
-
-  args: {
-    position: 'left',
-    size: 'small',
-    rounded: false,
-  },
-};
-
-export const BigGapSize: Story = {
-  render: Template,
-
-  args: {
-    itemGap: 'big',
-  },
-};
-
-export const SubmenuCanBeToggled: Story = {
-  render: (args) => <MenuWithSubmenus {...args} />,
-  play: async ({ canvasElement, ...rest }) => {
-    const canvas = within(canvasElement);
-
-    await fireEvent.click(canvas.queryAllByText('Submenu 2 active')[0]);
-    await fireEvent.click(canvas.queryAllByText('Collapsed submenu')[0]);
-  },
-};
-
-export const Resizable: Story = {
-  render: Template,
-
-  args: {
-    position: 'left',
-    showResizableBorder: true,
-    resizable: {
-      enable: { left: true },
-      minWidth: 400,
-      maxWidth: 600,
-      defaultSize: { width: 400, height: '100%' },
-    },
-  },
-};
-
-export const ResizableBothSidesWithBorder: Story = {
-  render: Template,
-
-  args: {
-    showResizableBorder: true,
-    resizable: {
-      enable: { right: true, left: true },
-      minWidth: 400,
-      maxWidth: 600,
-      defaultSize: { width: 400, height: '100%' },
-    },
-  },
-};

package/src/stories/Message/Message.stories.tsx

@@ -1,167 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { noop } from 'lodash';
-import ReqoreMessage, { IReqoreMessageProps } from '../../components/Message';
-import { StoryMeta } from '../utils';
-import { FlatArg, IntentArg, SizeArg, argManager } from '../utils/args';
-
-const { createArg } = argManager<IReqoreMessageProps>();
-
-const meta = {
-  title: 'Other/Message/Stories',
-  component: ReqoreMessage,
-  argTypes: {
-    ...SizeArg,
-    ...FlatArg,
-    ...IntentArg,
-    ...createArg('title', {
-      defaultValue: 'This is a test',
-      name: 'Message Header',
-      type: 'string',
-      description: 'The title of the message',
-    }),
-    ...createArg('minimal', {
-      defaultValue: false,
-      name: 'Minimal',
-      description: 'If the message should be minimal',
-      type: 'boolean',
-    }),
-  },
-  args: {
-    title: 'This is a test',
-    minimal: false,
-  },
-} as StoryMeta<typeof ReqoreMessage>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<IReqoreMessageProps> = (args: IReqoreMessageProps) => {
-  return (
-    <>
-      <ReqoreMessage {...args} onClick={noop}>
-        {args.children ||
-          'In to am attended desirous raptures declared diverted confined at. Collected instantly remaining up certainly to necessary as. Over walk dull into son boy door went new. At or happiness commanded daughters as. Is handsome an declared at received in extended vicinity subjects. Into miss on he over been late pain an. Only week bore boy what fat case left use. Match round scale now sex style far times. Your me past an much.'}
-      </ReqoreMessage>
-    </>
-  );
-};
-
-export const Basic: Story = {
-  render: Template,
-};
-
-export const NoTitle: Story = {
-  render: Template,
-  args: {
-    icon: 'InformationFill',
-    flat: true,
-    title: undefined,
-    children: 'This is a test',
-  },
-};
-
-export const Flat: Story = {
-  render: Template,
-
-  args: {
-    flat: true,
-    intent: 'success',
-  },
-};
-
-export const Minimal: Story = {
-  render: Template,
-
-  args: {
-    minimal: true,
-    intent: 'danger',
-    size: 'small',
-  },
-};
-
-export const WithIconColor: Story = {
-  render: Template,
-
-  args: {
-    minimal: true,
-    intent: 'success',
-    iconColor: '#00fd9f',
-  },
-};
-
-export const NonOpaque: Story = {
-  render: Template,
-
-  args: {
-    opaque: false,
-    intent: 'info',
-  },
-};
-
-export const Pending: Story = {
-  render: Template,
-
-  args: {
-    opaque: true,
-    intent: 'pending',
-  },
-};
-
-export const Muted: Story = {
-  render: Template,
-
-  args: {
-    opaque: true,
-    intent: 'muted',
-  },
-};
-
-export const CustomTheme: Story = {
-  render: Template,
-
-  args: {
-    customTheme: {
-      main: '#6e1295',
-    },
-  },
-};
-
-export const WithMargin: Story = {
-  render: () => (
-    <>
-      <ReqoreMessage margin='both' title='Bottom & top margin'>
-        In to am attended desirous raptures declared diverted confined at. Collected instantly
-        remaining up certainly to necessary as. Over walk dull into son boy door went new. At or
-        happiness commanded daughters as.
-      </ReqoreMessage>
-      <ReqoreMessage margin='top' title='Top margin'>
-        In to am attended desirous raptures declared diverted confined at.
-      </ReqoreMessage>
-      <ReqoreMessage margin='bottom' size='big' title='Bottom margin'>
-        In to am attended desirous raptures declared diverted confined at. Collected instantly
-        remaining up certainly to necessary as. Over walk dull into son boy door went new. At or
-        happiness commanded daughters as.
-      </ReqoreMessage>
-      <ReqoreMessage margin='bottom' size='small' title='Bottom small margin'>
-        In to am attended desirous raptures declared diverted confined at. Collected instantly
-        remaining up certainly to necessary as. Over walk dull into son boy door went new. At or
-        happiness commanded daughters as.
-      </ReqoreMessage>
-    </>
-  ),
-};
-
-export const Effect: Story = {
-  render: Template,
-
-  args: {
-    effect: {
-      gradient: {
-        colors: {
-          0: '#eb0e8c',
-          100: 'danger:darken:2',
-        },
-      },
-    },
-  },
-};