@qoretechnologies/reqore 0.20.1 → 0.20.2

package/src/stories/Icon/Icon.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { IReqoreIconProps } from '../../components/Icon';
+import { ReqoreIcon } from '../../index';
+
+export default {
+  title: 'Components/Icon',
+} as Meta;
+
+export const Icon: Story<IReqoreIconProps> = () => {
+  return (
+    <>
+      <ReqoreIcon icon='AccountCircleLine' size='12px' />
+      <ReqoreIcon icon='4KFill' size='14px' />
+      <ReqoreIcon icon='ArrowLeftCircleFill' intent='success' />
+      <ReqoreIcon icon='HotelFill' size='18px' />
+      <ReqoreIcon icon='SignalTowerFill' size='20px' color='#ff0000' />
+      <h4> Margined </h4>
+      <ReqoreIcon icon='AccountCircleLine' />
+      No Margin
+      <div>
+        <ReqoreIcon icon='4KFill' margin='right' />
+        Right Margin
+      </div>
+      <div>
+        Left Margin
+        <ReqoreIcon icon='ArrowLeftCircleFill' margin='left' />
+      </div>
+      <div>
+        Both
+        <ReqoreIcon icon='HotelFill' margin='both' />
+        Sides
+      </div>
+    </>
+  );
+};

package/src/stories/Input/Input.stories.tsx

@@ -0,0 +1,77 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { useState } from 'react';
+import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
+import { ReqoreControlGroup } from '../../index';
+import { FlatArg, MinimalArg } from '../utils/args';
+
+export default {
+  title: 'Components/Input',
+  argTypes: {
+    ...MinimalArg,
+    ...FlatArg,
+  },
+} as Meta<IReqoreInputProps>;
+
+const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
+  const [value, setValue] = useState('Input value');
+
+  const handleValueChange = (e) => {
+    setValue(e.target.value);
+  };
+
+  const handleValueClear = () => {
+    setValue('');
+  };
+
+  return (
+    <>
+      <ReqoreControlGroup>
+        <ReqoreInput
+          placeholder='Reqore Input'
+          onChange={handleValueChange}
+          value={value}
+          {...args}
+        />
+        <ReqoreInput
+          placeholder='Minimal Input'
+          minimal
+          onChange={handleValueChange}
+          value={value}
+          {...args}
+        />
+        <ReqoreInput
+          placeholder='Flat Input'
+          flat
+          onChange={handleValueChange}
+          value={value}
+          {...args}
+        />
+        <ReqoreInput
+          placeholder='Clearable Input'
+          onClearClick={handleValueClear}
+          value={value}
+          onChange={handleValueChange}
+          {...args}
+        />
+        <ReqoreInput
+          placeholder='Disabled Input'
+          disabled
+          onChange={handleValueChange}
+          value={value}
+          {...args}
+        />
+      </ReqoreControlGroup>
+      <br />
+      <ReqoreControlGroup fluid>
+        <ReqoreInput
+          placeholder='Fluid Input'
+          onChange={handleValueChange}
+          value={value}
+          {...args}
+        />
+      </ReqoreControlGroup>
+    </>
+  );
+};
+
+export const Basic = Template.bind({});

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

@@ -0,0 +1,94 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { IReqoreMenuProps } from '../../components/Menu';
+import { IReqoreMenuItemProps } from '../../components/Menu/item';
+import { ReqoreMenu, ReqoreMenuDivider, ReqoreMenuItem, ReqorePopover } from '../../index';
+import { argManager, IntentArg } from '../utils/args';
+
+const { createArg } = argManager<IReqoreMenuProps>();
+
+export default {
+  title: 'Components/Menu',
+  argTypes: {
+    ...createArg('width', {
+      type: 'string',
+      defaultValue: '160px',
+      name: 'Width',
+    }),
+    ...createArg('maxHeight', {
+      type: 'string',
+      defaultValue: undefined,
+      name: 'Max Height',
+    }),
+    ...createArg('position', {
+      defaultValue: undefined,
+      name: 'Position',
+      options: ['left', 'right'],
+      control: {
+        type: 'select',
+      },
+    }),
+    ...IntentArg,
+  },
+} as Meta<IReqoreMenuProps>;
+
+export const MenuStory: Story<IReqoreMenuProps> = (args) => {
+  return (
+    <ReqoreMenu {...args}>
+      <ReqoreMenuItem icon='Save3Fill' intent='success' selected>
+        Selected success
+      </ReqoreMenuItem>
+      <ReqoreMenuItem icon='Save3Fill'>Save</ReqoreMenuItem>
+      <ReqoreMenuItem
+        icon='ChatPollFill'
+        onClick={() => alert('Item clicked')}
+        rightIcon='FahrenheitFill'
+        onRightIconClick={() => alert('Icon clicked')}
+        tooltip={{
+          content: 'You sure?',
+        }}
+        intent='danger'
+      >
+        Delete
+      </ReqoreMenuItem>
+
+      <ReqoreMenuItem icon='Lock2Fill'>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 />
+      <ReqorePopover
+        component={ReqoreMenuItem}
+        componentProps={
+          {
+            icon: 'EmotionUnhappyLine',
+            rightIcon: 'Scissors2Fill',
+          } as IReqoreMenuItemProps
+        }
+        content={
+          <ReqoreMenu {...args}>
+            <ReqoreMenuItem icon='ZhihuFill'>Item 1</ReqoreMenuItem>
+            <ReqoreMenuItem icon='AccountCircleFill'>Item 2</ReqoreMenuItem>
+            <ReqoreMenuItem icon='AnticlockwiseFill' disabled>
+              Item 3
+            </ReqoreMenuItem>
+            <ReqoreMenuItem icon='ArchiveFill'>Item 4</ReqoreMenuItem>
+          </ReqoreMenu>
+        }
+        isReqoreComponent
+        handler='click'
+        placement='right'
+      >
+        I have a submenu on click
+      </ReqorePopover>
+      <ReqoreMenuDivider label='Divider' />
+      <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine' selected>
+        I am selected!
+      </ReqoreMenuItem>
+    </ReqoreMenu>
+  );
+};
+
+MenuStory.storyName = 'Menu';

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

@@ -0,0 +1,52 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import ReqoreMessage, { IReqoreMessageProps } from '../../components/Message';
+import { argManager, FlatArg, IntentArg, SizeArg } from '../utils/args';
+
+const { createArg } = argManager<IReqoreMessageProps>();
+
+export default {
+  title: 'Components/Message',
+  argTypes: {
+    ...SizeArg,
+    ...FlatArg,
+    ...IntentArg,
+    ...createArg('title', {
+      defaultValue: 'This is a test',
+      name: 'Message Header',
+      type: 'string',
+      description: 'The title of the message',
+    }),
+    ...createArg('inverted', {
+      defaultValue: false,
+      name: 'Inverted',
+      description: 'Inverts the message colors',
+      type: 'boolean',
+    }),
+  },
+} as Meta<IReqoreMessageProps>;
+
+const Template: Story<IReqoreMessageProps> = (args: IReqoreMessageProps) => {
+  return (
+    <>
+      <ReqoreMessage {...args}>
+        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<IReqoreMessageProps> = Template.bind({});
+export const Flat: Story<IReqoreMessageProps> = Template.bind({});
+Flat.args = {
+  flat: true,
+  intent: 'success',
+};
+export const Inverted: Story<IReqoreMessageProps> = Template.bind({});
+Inverted.args = {
+  inverted: true,
+  intent: 'danger',
+};

package/src/stories/Modal/Modal.stories.tsx

@@ -0,0 +1,148 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { noop } from 'lodash';
+import { useContext } from 'react';
+import { useMount } from 'react-use';
+import { IReqoreModalProps } from '../../components/Modal';
+import { ReqoreContext, ReqoreModal, ReqorePanel } from '../../index';
+import { argManager, FlatArg, IntentArg } from '../utils/args';
+
+const { createArg } = argManager<IReqoreModalProps>();
+
+export default {
+  title: 'Components/Modal',
+  argTypes: {
+    ...IntentArg,
+    ...FlatArg,
+    ...createArg('isOpen', {
+      type: 'boolean',
+      defaultValue: true,
+      name: 'Is Open',
+      description: 'Whether the modal is open or not',
+    }),
+    ...createArg('label', {
+      defaultValue: 'This is a test',
+      name: 'Label',
+      type: 'string',
+    }),
+    ...createArg('blur', {
+      defaultValue: 3,
+      name: 'Backdrop blur',
+      type: 'number',
+    }),
+    ...createArg('opacity', {
+      defaultValue: 1,
+      name: 'Modal Opacity',
+      type: 'number',
+    }),
+    ...createArg('hasBackdrop', {
+      defaultValue: true,
+      name: 'Has Backdrop',
+      type: 'boolean',
+    }),
+    ...createArg('width', {
+      defaultValue: '80vw',
+      name: 'Width',
+      type: 'string',
+    }),
+    ...createArg('height', {
+      defaultValue: '50vh',
+      name: 'Height',
+      type: 'string',
+    }),
+  },
+} as Meta<IReqoreModalProps>;
+
+const Template: Story<IReqoreModalProps & { confirm?: boolean }> = (args) => {
+  const { confirmAction } = useContext(ReqoreContext);
+
+  useMount(() => {
+    if (args.confirm) {
+      confirmAction({
+        description: 'How is the wheather going to be?',
+        title: 'Tell me something',
+        onConfirm: noop,
+        onCancel: noop,
+      });
+    }
+  });
+
+  return (
+    <>
+      <ReqorePanel label='Just some background text' padded>
+        By impossible of in difficulty discovered celebrated ye. Justice joy manners boy met resolve
+        produce. Bed head loud next plan rent had easy add him. As earnestly shameless elsewhere
+        defective estimable fulfilled of. Esteem my advice it an excuse enable. Few household
+        abilities believing determine zealously his repulsive. To open draw dear be by side like.
+        Allow miles wound place the leave had. To sitting subject no improve studied limited. Ye
+        indulgence unreserved connection alteration appearance my an astonished. Up as seen sent
+        make he they of. Her raising and himself pasture believe females. Fancy she stuff after
+        aware merit small his. Charmed esteems luckily age out. At ourselves direction believing do
+        he departure. Celebrated her had sentiments understood are projection set. Possession ye no
+        mr unaffected remarkably at. Wrote house in never fruit up. Pasture imagine my garrets an
+        he. However distant she request behaved see nothing. Talking settled at pleased an of me
+        brother weather. Breakfast procuring nay end happiness allowance assurance frankness. Met
+        simplicity nor difficulty unreserved who. Entreaties mr conviction dissimilar me astonished
+        estimating cultivated. On no applauded exquisite my additions. Pronounce add boy estimable
+        nay suspected. You sudden nay elinor thirty esteem temper. Quiet leave shy you gay off asked
+        large style. Rooms oh fully taken by worse do. Points afraid but may end law lasted. Was out
+        laughter raptures returned outweigh. Luckily cheered colonel me do we attacks on highest
+        enabled. Tried law yet style child. Bore of true of no be deal. Frequently sufficient in be
+        unaffected. The furnished she concluded depending procuring concealed. 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. Able an hope of body. Any nay shyness article
+        matters own removal nothing his forming. Gay own additions education satisfied the
+        perpetual. If he cause manor happy. Without farther she exposed saw man led. Along on happy
+        could cease green oh. Her old collecting she considered discovered. So at parties he warrant
+        oh staying. Square new horses and put better end. Sincerity collected happiness do is
+        contented. Sigh ever way now many. Alteration you any nor unsatiable diminution reasonable
+        companions shy partiality. Leaf by left deal mile oh if easy. Added woman first get led joy
+        not early jokes. As am hastily invited settled at limited civilly fortune me. Really spring
+        in extent an by. Judge but built gay party world. Of so am he remember although required.
+        Bachelor unpacked be advanced at. Confined in declared marianne is vicinity. It sportsman
+        earnestly ye preserved an on. Moment led family sooner cannot her window pulled any. Or
+        raillery if improved landlord to speaking hastened differed he. Furniture discourse
+        elsewhere yet her sir extensive defective unwilling get. Why resolution one motionless you
+        him thoroughly. Noise is round to in it quick timed doors. Written address greatly get
+        attacks inhabit pursuit our but. Lasted hunted enough an up seeing in lively letter. Had
+        judgment out opinions property the supplied.
+      </ReqorePanel>
+      <ReqoreModal
+        {...args}
+        onClose={() => noop}
+        bottomActions={[
+          { label: 'Confirm', intent: 'success', position: 'right' },
+          { label: 'Cancel', intent: 'danger', position: 'left' },
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Sit amet purus gravida quis blandit turpis cursus in hac.
+        Ultricies lacus sed turpis tincidunt. Ac tincidunt vitae semper quis lectus nulla at.
+        Aliquam vestibulum morbi blandit cursus risus at ultrices. Risus feugiat in ante metus
+        dictum. Enim blandit volutpat maecenas volutpat. Nulla posuere sollicitudin aliquam ultrices
+        sagittis orci a scelerisque. Mollis nunc sed id semper risus in hendrerit gravida. Sem nulla
+        pharetra diam sit amet nisl suscipit. Congue eu consequat ac felis donec et odio
+        pellentesque diam. Augue mauris augue neque gravida in fermentum et sollicitudin. Nulla
+        pellentesque dignissim enim sit amet venenatis urna. Nunc sed blandit libero volutpat sed.
+        Mi in nulla posuere sollicitudin. Eu consequat ac felis donec et odio pellentesque diam.
+        Viverra nam libero justo laoreet sit amet cursus sit amet. Posuere sollicitudin aliquam
+        ultrices sagittis orci a scelerisque. Et netus et malesuada fames ac. Arcu non odio euismod
+        lacinia at quis risus sed vulputate. Sapien eget mi proin sed libero enim sed. Suspendisse
+        faucibus interdum posuere lorem ipsum. In est ante in nibh mauris cursus. Urna cursus eget
+        nunc scelerisque. Mi eget mauris pharetra et ultrices neque. Turpis nunc eget lorem dolor
+        sed viverra ipsum nunc aliquet. Id aliquet lectus proin nibh. At auctor urna nunc id cursus.
+        Erat pellentesque adipiscing commodo elit at imperdiet. Ipsum dolor sit amet consectetur
+        adipiscing elit. Suspendisse interdum consectetur libero id faucibus nisl. Leo vel orci
+        porta non pulvinar neque laoreet. Ut diam quam nulla porttitor massa.
+      </ReqoreModal>
+    </>
+  );
+};
+
+export const Basic = Template.bind({});
+export const ConfirmationModal = Template.bind({});
+ConfirmationModal.args = {
+  confirm: true,
+};

package/src/stories/Navbar/Navbar.stories.tsx

@@ -0,0 +1,109 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { noop } from 'lodash';
+import ReqoreContent from '../../components/Content';
+import ReqoreIcon from '../../components/Icon';
+import { IReqoreNavbarProps, ReqoreFooter } from '../../components/Navbar';
+import { IReqoreNavbarItemProps } from '../../components/Navbar/item';
+import {
+  ReqoreHeader,
+  ReqoreMenu,
+  ReqoreMenuDivider,
+  ReqoreMenuItem,
+  ReqoreNavbarDivider,
+  ReqoreNavbarGroup,
+  ReqoreNavbarItem,
+  ReqorePopover,
+} from '../../index';
+import { FlatArg, NoContentArg } from '../utils/args';
+
+export default {
+  title: 'Components/Header - Footer Navbar',
+  argTypes: {
+    ...FlatArg,
+    ...NoContentArg,
+  },
+} as Meta<IReqoreNavbarProps>;
+
+const Template: Story<IReqoreNavbarProps> = (args: IReqoreNavbarProps) => {
+  return (
+    <>
+      <ReqoreHeader {...args}>
+        <ReqoreNavbarGroup>
+          <ReqoreNavbarItem>
+            <h3>I am a logo on the left</h3>
+          </ReqoreNavbarItem>
+        </ReqoreNavbarGroup>
+        <ReqoreNavbarGroup position='right'>
+          <ReqoreNavbarItem active>
+            <ReqoreIcon icon='AwardFill' />
+          </ReqoreNavbarItem>
+          <ReqoreNavbarItem disabled>
+            <ReqoreIcon icon='BehanceLine' />
+          </ReqoreNavbarItem>
+          <ReqorePopover
+            component={ReqoreNavbarItem}
+            content={
+              <ReqoreMenu>
+                <ReqoreMenuDivider label='User area' />
+                <ReqoreMenuItem icon='ArrowGoBackFill'>Profile</ReqoreMenuItem>
+                <ReqoreMenuItem icon='DeleteBack2Fill'>Alerts</ReqoreMenuItem>
+                <ReqoreMenuItem icon='FileTextFill'>Log out</ReqoreMenuItem>
+              </ReqoreMenu>
+            }
+            handler='click'
+            componentProps={{ interactive: true } as IReqoreNavbarItemProps}
+            isReqoreComponent
+          >
+            <ReqoreIcon icon='UserFill' />
+          </ReqorePopover>
+          <ReqoreNavbarDivider />
+          <ReqorePopover
+            component={ReqoreNavbarItem}
+            content='Notifications'
+            componentProps={{ onClick: noop } as IReqoreNavbarItemProps}
+            isReqoreComponent
+          >
+            <ReqoreIcon icon='Notification4Fill' />
+          </ReqorePopover>
+        </ReqoreNavbarGroup>
+      </ReqoreHeader>
+
+      <ReqoreContent>Hey!</ReqoreContent>
+      <ReqoreFooter {...args}>
+        <ReqoreNavbarGroup>
+          <ReqoreNavbarItem>
+            <h3>I am a logo on the left</h3>
+          </ReqoreNavbarItem>
+        </ReqoreNavbarGroup>
+        <ReqoreNavbarGroup position='right'>
+          <ReqorePopover
+            component={ReqoreNavbarItem}
+            content={
+              <ReqoreMenu>
+                <ReqoreMenuDivider label='User area' />
+                <ReqoreMenuItem icon='DualSim1Fill'>Profile</ReqoreMenuItem>
+                <ReqoreMenuItem icon='FolderReceivedFill'>Alerts</ReqoreMenuItem>
+                <ReqoreMenuItem icon='FolderOpenFill'>Log out</ReqoreMenuItem>
+              </ReqoreMenu>
+            }
+            handler='click'
+            componentProps={{ interactive: true } as IReqoreNavbarItemProps}
+            isReqoreComponent
+          >
+            <ReqoreIcon icon='FlightLandLine' />
+          </ReqorePopover>
+          <ReqorePopover
+            component={ReqoreNavbarItem}
+            content='Notifications'
+            componentProps={{ interactive: true } as IReqoreNavbarItemProps}
+            isReqoreComponent
+          >
+            <ReqoreIcon icon='GpsLine' />
+          </ReqorePopover>
+        </ReqoreNavbarGroup>
+      </ReqoreFooter>
+    </>
+  );
+};
+
+export const Basic = Template.bind({});

package/src/stories/Notifications/Interactive.stories.tsx

@@ -0,0 +1,105 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { useContext } from 'react';
+import ReqoreNotification, {
+  IReqoreNotificationProps,
+} from '../../components/Notifications/notification';
+import { IReqoreUIProviderProps } from '../../containers/UIProvider';
+import { ReqoreContext, ReqoreUIProvider } from '../../index';
+
+export default {
+  title: 'Components/Notifications/Interactive',
+  component: ReqoreNotification,
+} as Meta;
+
+const AddingButton = ({ id, onClick, onClose, onFinish }: any) => {
+  const { addNotification } = useContext(ReqoreContext);
+
+  return (
+    <button
+      onClick={() =>
+        addNotification({
+          title: 'Created notification',
+          content: 'Yo, wassup?',
+          icon: 'FileChartLine',
+          duration: 5000,
+          id: id || Date.now(),
+          onClick,
+          onClose,
+          onFinish,
+        })
+      }
+    >
+      Add notification
+    </button>
+  );
+};
+
+const UpdatingButton = ({ id }) => {
+  const { addNotification } = useContext(ReqoreContext);
+
+  return (
+    <button
+      onClick={() =>
+        addNotification({
+          content: 'I have just updated!',
+          icon: 'AccountPinBoxLine',
+          type: 'danger',
+          duration: 3000,
+          id,
+        })
+      }
+    >
+      Update notification
+    </button>
+  );
+};
+
+const Template: Story<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
+  theme,
+  ...args
+}: IReqoreNotificationProps & IReqoreUIProviderProps & { id?: string | number }) => (
+  <ReqoreUIProvider theme={theme}>
+    <div
+      style={{
+        width: '100%',
+        height: '500px',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexFlow: 'column',
+      }}
+    >
+      <h4>Hello, I am a notification testing page</h4>
+      <AddingButton {...args} />
+      {args.id && <UpdatingButton id={args.id} />}
+    </div>
+  </ReqoreUIProvider>
+);
+
+export const Adding = Template.bind({});
+
+export const Updating = Template.bind({});
+Updating.args = {
+  id: 'test',
+};
+
+export const Clickable = Template.bind({});
+Clickable.args = {
+  onClick: (id) => {
+    alert(`Notification ${id} clicked`);
+  },
+};
+
+export const CloseCallback = Template.bind({});
+CloseCallback.args = {
+  onClose: (id) => {
+    alert(`Notification ${id} closed`);
+  },
+};
+
+export const FinishCallback = Template.bind({});
+FinishCallback.args = {
+  onFinish: (id) => {
+    alert(`Notification ${id} finished`);
+  },
+};