@qoretechnologies/reqore 0.44.0 → 0.45.0

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

@@ -1,119 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-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 { StoryMeta } from '../utils';
-import { FlatArg, NoContentArg } from '../utils/args';
-
-const meta = {
-  title: 'Layout/Header & Footer/Stories',
-  component: ReqoreHeader,
-  args: {
-    withoutContent: true,
-  },
-  argTypes: {
-    ...FlatArg,
-    ...NoContentArg,
-  },
-} as StoryMeta<typeof ReqoreHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<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: Story = {
-  render: Template,
-};

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

@@ -1,117 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import ReqoreNotification from '../../components/Notifications/notification';
-import { ReqoreUIProvider, useReqoreProperty } from '../../index';
-import { StoryMeta, StoryRenderer } from '../utils';
-
-const meta = {
-  title: 'Other/Notifications/Interactive/Stories',
-  component: ReqoreNotification,
-} as StoryMeta<typeof ReqoreNotification>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const AddingButton = ({ id, onClick, onClose, onFinish }: any) => {
-  const addNotification = useReqoreProperty('addNotification');
-
-  return (
-    <button
-      onClick={() =>
-        addNotification({
-          title: 'Created notification',
-          content: 'Yo, wassup?',
-          icon: 'FileChartLine',
-          opaque: true,
-          duration: 5000,
-          id: id || Date.now(),
-          onClick,
-          onClose,
-          onFinish,
-        })
-      }
-    >
-      Add notification
-    </button>
-  );
-};
-
-const UpdatingButton = ({ id }) => {
-  const addNotification = useReqoreProperty('addNotification');
-
-  return (
-    <button
-      onClick={() =>
-        addNotification({
-          content: 'I have just updated!',
-          icon: 'AccountPinBoxLine',
-          type: 'danger',
-          duration: 3000,
-          id,
-        })
-      }
-    >
-      Update notification
-    </button>
-  );
-};
-
-const Template: StoryRenderer<typeof meta> = ({ theme, ...args }) => (
-  <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.notificationId && <UpdatingButton id={args.id} />}
-    </div>
-  </ReqoreUIProvider>
-);
-
-export const Adding: Story = {
-  render: Template,
-};
-
-export const Updating: Story = {
-  render: Template,
-
-  args: {
-    notificationId: 'test',
-  },
-};
-
-export const Clickable: Story = {
-  render: Template,
-
-  args: {
-    onClick: () => {
-      alert(`Notification clicked`);
-    },
-  },
-};
-
-export const CloseCallback: Story = {
-  render: Template,
-
-  args: {
-    onClose: () => {
-      alert(`Notification closed`);
-    },
-  },
-};
-
-export const FinishCallback: Story = {
-  render: Template,
-
-  args: {
-    onFinish: () => {
-      alert(`Notification finished`);
-    },
-  },
-};

package/src/stories/Notifications/Notification.stories.tsx

@@ -1,216 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { noop } from 'lodash';
-import { useState } from 'react';
-import { useMount } from 'react-use';
-import ReqoreNotification, {
-  IReqoreNotificationProps,
-} from '../../components/Notifications/notification';
-import { IReqoreUIProviderProps } from '../../containers/UIProvider';
-import { ReqoreTag, ReqoreUIProvider } from '../../index';
-import { StoryMeta } from '../utils';
-
-const meta: StoryMeta<typeof ReqoreNotification> = {
-  title: 'Other/Notifications/Item/Stories',
-  component: ReqoreNotification,
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
-  theme,
-  ...args
-}: IReqoreNotificationProps & IReqoreUIProviderProps) => (
-  <ReqoreUIProvider theme={theme}>
-    <ReqoreNotification
-      {...args}
-      type='info'
-      content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
-      onClick={noop}
-    />
-    <ReqoreNotification {...args} type='pending' content='I am still waiting' onClick={noop} />
-    <ReqoreNotification
-      {...args}
-      type='success'
-      title='Simple notification'
-      opaque
-      content={
-        <ReqoreTag
-          label='Custom content in notification'
-          effect={{ gradient: { colors: { 0: '#a11c58', 100: '#ff47a3' } } }}
-        />
-      }
-      onClick={noop}
-    />
-    <ReqoreNotification
-      {...args}
-      type='warning'
-      title='Simple notification'
-      content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
-      onClose={noop}
-    />
-    <ReqoreNotification
-      {...args}
-      type='danger'
-      title='Simple notification'
-      content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
-      onClick={noop}
-      onClose={noop}
-    />
-    <h4> Flat and minimal </h4>
-    <ReqoreNotification
-      {...args}
-      type='danger'
-      title='Simple notification'
-      content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
-      onClick={noop}
-      onClose={noop}
-      flat
-      minimal
-    />
-    <ReqoreNotification
-      {...args}
-      title='Simple notification'
-      content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
-      onClick={noop}
-      onClose={noop}
-      intent='pending'
-      minimal
-    />
-    <ReqoreNotification
-      {...args}
-      title='Simple notification'
-      content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
-      onClick={noop}
-      onClose={noop}
-      flat
-      opaque
-      intent='info'
-      size='big'
-    />
-    <ReqoreNotification
-      {...args}
-      title='Simple notification'
-      content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
-      onClick={noop}
-      onClose={noop}
-      intent='success'
-      flat
-      icon='4KLine'
-      size='small'
-    />
-    <ReqoreNotification
-      {...args}
-      title='Simple notification'
-      content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
-      onClick={noop}
-      onClose={noop}
-      flat
-      intent='danger'
-      size='huge'
-    />
-    <ReqoreNotification
-      {...args}
-      title='Simple notification'
-      content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
-      onClick={noop}
-      onClose={noop}
-      intent='warning'
-      flat
-      icon='4KLine'
-      size='tiny'
-    />
-  </ReqoreUIProvider>
-);
-
-const SingleTemplate: StoryFn<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
-  theme,
-  ...args
-}: IReqoreNotificationProps & IReqoreUIProviderProps) => (
-  <ReqoreUIProvider theme={theme}>
-    <ReqoreNotification {...args} />
-  </ReqoreUIProvider>
-);
-
-export const Default: Story = {
-  render: Template,
-};
-
-export const CustomColors: Story = {
-  render: Template,
-
-  args: {
-    theme: {
-      notifications: {
-        info: '#6c2d80',
-        success: '#81a194',
-        pending: '#b8d8f5',
-        warning: '#382d31',
-        danger: '#786714',
-      },
-    },
-  },
-};
-
-export const CustomColors2: Story = {
-  render: Template,
-
-  args: {
-    theme: {
-      notifications: {
-        info: '#d6bac0',
-        success: '#2aeb37',
-        pending: '#181d7d',
-        warning: '#96714e',
-        danger: '#b87cd6',
-      },
-    },
-  },
-};
-
-export const WithTimeout: Story = {
-  render: SingleTemplate,
-
-  args: {
-    type: 'info',
-    content: 'I am a notification with a 10s timeout',
-    onClick: noop,
-    duration: 10000,
-  },
-};
-
-const UpdateTemplate: StoryFn<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
-  theme,
-  ...args
-}: IReqoreNotificationProps & IReqoreUIProviderProps) => {
-  const [notificationData, setNotificationData] = useState({ ...args });
-
-  useMount(() => {
-    setTimeout(() => {
-      setNotificationData({
-        ...notificationData,
-        title: 'I am updated notification',
-        content: 'Hellooo I am an updated notification with 7s duration',
-        type: 'success',
-        duration: 7000,
-      });
-    }, 5000);
-  });
-
-  return (
-    <ReqoreUIProvider theme={theme}>
-      <ReqoreNotification {...notificationData} />
-    </ReqoreUIProvider>
-  );
-};
-
-export const WithUpdate: Story = {
-  render: UpdateTemplate,
-
-  args: {
-    type: 'pending',
-    content: 'I am a notification with a 10s timeout thats gonna update',
-    onClick: noop,
-    duration: 10000,
-  },
-};

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

@@ -1,81 +0,0 @@
-import { StoryFn, StoryObj } from '@storybook/react';
-import { noop } from 'lodash';
-import ReqoreNotificationsWrapper, {
-  IReqoreNotificationsWrapperProps,
-} from '../../components/Notifications';
-import ReqoreNotification from '../../components/Notifications/notification';
-import { IReqoreUIProviderProps } from '../../containers/UIProvider';
-import { ReqoreUIProvider } from '../../index';
-import { StoryMeta } from '../utils';
-
-const meta: StoryMeta<typeof ReqoreNotificationsWrapper> = {
-  title: 'Other/Notifications/Wrapper/Stories',
-  component: ReqoreNotificationsWrapper,
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const Template: StoryFn<IReqoreUIProviderProps & IReqoreNotificationsWrapperProps> = ({
-  theme,
-  ...args
-}) => (
-  <ReqoreUIProvider theme={theme}>
-    <ReqoreNotificationsWrapper position={args.position}>
-      <ReqoreNotification
-        type='info'
-        content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
-        onClick={noop}
-      />
-      <ReqoreNotification
-        type='info'
-        content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
-        onClick={noop}
-      />
-    </ReqoreNotificationsWrapper>
-  </ReqoreUIProvider>
-);
-
-export const Top: Story = {
-  render: Template,
-};
-
-export const Bottom: Story = {
-  render: Template,
-
-  args: {
-    position: 'BOTTOM',
-  },
-};
-
-export const TopLeft: Story = {
-  render: Template,
-
-  args: {
-    position: 'TOP LEFT',
-  },
-};
-
-export const TopRight: Story = {
-  render: Template,
-
-  args: {
-    position: 'TOP RIGHT',
-  },
-};
-
-export const BottomLeft: Story = {
-  render: Template,
-
-  args: {
-    position: 'BOTTOM LEFT',
-  },
-};
-
-export const BottomRight: Story = {
-  render: Template,
-
-  args: {
-    position: 'BOTTOM RIGHT',
-  },
-};