@qoretechnologies/reqore 0.20.1 → 0.20.4

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

@@ -0,0 +1,200 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+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 { ReqoreUIProvider } from '../../index';
+
+export default {
+  title: 'Components/Notifications/Item',
+  component: ReqoreNotification,
+} as Meta;
+
+const Template: Story<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'
+      icon='TimerLine'
+      content='I am still waiting'
+      onClick={noop}
+    />
+    <ReqoreNotification
+      {...args}
+      type='success'
+      title='Simple notification'
+      content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
+      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 inverted </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
+      inverted
+    />
+    <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}
+      inverted
+    />
+    <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='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: Story<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
+  theme,
+  ...args
+}: IReqoreNotificationProps & IReqoreUIProviderProps) => (
+  <ReqoreUIProvider theme={theme}>
+    <ReqoreNotification {...args} />
+  </ReqoreUIProvider>
+);
+
+export const Default = Template.bind({});
+
+export const CustomColors = Template.bind({});
+
+CustomColors.args = {
+  theme: {
+    notifications: {
+      info: '#6c2d80',
+      success: '#81a194',
+      pending: '#b8d8f5',
+      warning: '#382d31',
+      danger: '#786714',
+    },
+  },
+} as IReqoreUIProviderProps;
+
+export const CustomColors2 = Template.bind({});
+
+CustomColors2.args = {
+  theme: {
+    notifications: {
+      info: '#d6bac0',
+      success: '#2aeb37',
+      pending: '#181d7d',
+      warning: '#96714e',
+      danger: '#b87cd6',
+    },
+  },
+} as IReqoreUIProviderProps;
+
+export const WithTimeout = SingleTemplate.bind({});
+
+WithTimeout.args = {
+  type: 'info',
+  content: 'I am a notification with a 10s timeout',
+  onClick: noop,
+  duration: 10000,
+};
+
+const UpdateTemplate: Story<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 = UpdateTemplate.bind({});
+
+WithUpdate.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

@@ -0,0 +1,65 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { noop } from 'lodash';
+import ReqoreNotificationsWrapper, {
+  IReqoreNotificationsWrapperProps,
+} from '../../components/Notifications';
+import ReqoreNotification, {
+  IReqoreNotificationProps,
+} from '../../components/Notifications/notification';
+import { IReqoreUIProviderProps } from '../../containers/UIProvider';
+import { ReqoreUIProvider } from '../../index';
+
+export default {
+  title: 'Components/Notifications/Wrapper',
+  component: ReqoreNotification,
+} as Meta;
+
+const Template: Story<
+  IReqoreNotificationProps & IReqoreUIProviderProps & IReqoreNotificationsWrapperProps
+> = ({
+  theme,
+  ...args
+}: IReqoreNotificationProps & IReqoreUIProviderProps & IReqoreNotificationsWrapperProps) => (
+  <ReqoreUIProvider theme={theme}>
+    <ReqoreNotificationsWrapper position={args.position}>
+      <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='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 = Template.bind({});
+export const Bottom = Template.bind({});
+Bottom.args = {
+  position: 'BOTTOM',
+};
+
+export const TopLeft = Template.bind({});
+TopLeft.args = {
+  position: 'TOP LEFT',
+};
+
+export const TopRight = Template.bind({});
+TopRight.args = {
+  position: 'TOP RIGHT',
+};
+
+export const BottomLeft = Template.bind({});
+BottomLeft.args = {
+  position: 'BOTTOM LEFT',
+};
+
+export const BottomRight = Template.bind({});
+BottomRight.args = {
+  position: 'BOTTOM RIGHT',
+};

package/src/stories/Panel/Panel.stories.tsx

@@ -0,0 +1,107 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { IReqorePanelProps, ReqorePanel } from '../../components/Panel';
+import { argManager, FlatArg, IntentArg } from '../utils/args';
+
+const { createArg } = argManager<IReqorePanelProps>();
+
+export default {
+  title: 'Components/Panel',
+  argTypes: {
+    ...IntentArg,
+    ...FlatArg,
+    ...createArg('padded', {
+      type: 'boolean',
+      defaultValue: true,
+      name: 'Padded',
+      description: 'If the panel should have padding',
+    }),
+    ...createArg('rounded', {
+      type: 'boolean',
+      defaultValue: true,
+      name: 'Rounded',
+      description: 'If the panel should have rounded corners',
+    }),
+    ...createArg('collapsible', {
+      type: 'boolean',
+      defaultValue: true,
+      name: 'Collapsible',
+      description: 'If the panel should be collapsible',
+    }),
+    ...createArg('label', {
+      type: 'string',
+      defaultValue: 'Reqore panel component',
+      name: 'Label',
+      description: 'The title of the panel component',
+    }),
+  },
+} as Meta<IReqorePanelProps>;
+
+const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
+  return (
+    <ReqorePanel
+      {...args}
+      actions={[
+        { label: 'Test', icon: '24HoursFill', intent: 'info' },
+        {
+          label: 'More actions',
+          actions: [
+            { label: 'Sub Test', icon: 'FileDownloadLine' },
+            { label: 'Sub Test 2', icon: 'FileDownloadLine', intent: 'success' },
+          ],
+          intent: 'info',
+        },
+      ]}
+      bottomActions={[
+        { label: 'Test', icon: '24HoursFill', position: 'left' },
+        {
+          label: 'More actions',
+          position: 'right',
+          actions: [
+            { label: 'Sub Test', icon: 'FileDownloadLine', intent: 'success' },
+            { label: 'Sub Test 2', icon: 'FileDownloadLine' },
+          ],
+        },
+      ]}
+    >
+      Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system
+      of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant.
+      This system works for main characters who have started late, for alts, for players who have
+      switched Covenants and are starting over, and for players who have simply missed weekly quests
+      for earning Renown due to being away from the game. I am a message a very long message -
+      Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system
+      of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant.
+      This system works for main characters who have started late, for alts, for players who have
+      switched Covenants and are starting over, and for players who have simply missed weekly quests
+      for earning Renown due to being away from the game. I am a message a very long message -
+      Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system
+      of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant.
+      This system works for main characters who have started late, for alts, for players who have
+      switched Covenants and are starting over, and for players who have simply missed weekly quests
+      for earning Renown due to being away from the game. I am a message a very long message -
+      Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system
+      of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant.
+      This system works for main characters who have started late, for alts, for players who have
+      switched Covenants and are starting over, and for players who have simply missed weekly quests
+      for earning Renown due to being away from the game. I am a message a very long message -
+      Shadowlands has mechanisms put in place for allowing players to catch up on Renown, the system
+      of gaining favor and unlocking rewards, Campaign chapters, and soulbinds within your Covenant.
+      This system works for main characters who have started late, for alts, for players who have
+      switched Covenants and are starting over, and for players who have simply missed weekly quests
+      for earning Renown due to being away from the game.
+    </ReqorePanel>
+  );
+};
+
+export const Basic = Template.bind({});
+export const NoPadding = Template.bind({});
+NoPadding.args = {
+  padded: false,
+};
+export const Flat = Template.bind({});
+Flat.args = {
+  flat: true,
+};
+export const NoLabel: Story<IReqorePanelProps> = Template.bind({});
+NoLabel.args = {
+  label: undefined,
+};

package/src/stories/Popover/Popover.stories.tsx

@@ -0,0 +1,54 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { useState } from 'react';
+import { IReqorePopoverProps } from '../../components/Popover';
+import usePopover from '../../hooks/usePopover';
+import { ReqoreButton, ReqorePopover } from '../../index';
+
+export default {
+  title: 'Components/Popover',
+} as Meta<IReqorePopoverProps>;
+
+const HoverButton = () => {
+  return (
+    <ReqorePopover component={ReqoreButton} content='I am shown on hover' isReqoreComponent>
+      Hover popover
+    </ReqorePopover>
+  );
+};
+
+const ClickButton = ({ content, placement }: any) => {
+  const [refElement, setRefElement] = useState(null);
+
+  usePopover({
+    targetElement: refElement,
+    content: content || 'I am a tooltip on click',
+    handler: 'click',
+    placement,
+    closeOnOutsideClick: false,
+    noArrow: true,
+    useTargetWidth: true,
+  });
+
+  return <ReqoreButton ref={setRefElement}>Click popover</ReqoreButton>;
+};
+
+const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
+  return (
+    <>
+      <HoverButton />
+      <br />
+      <ClickButton {...args} />
+      <br />
+      <ReqorePopover
+        component={ReqoreButton}
+        content='I am shown on mount'
+        isReqoreComponent
+        openOnMount
+      >
+        Auto open popover
+      </ReqorePopover>
+    </>
+  );
+};
+
+export const Basic = Template.bind({});

package/src/stories/RadioGroup/RadioGroup.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { useState } from 'react';
+import ReqoreRadioGroup, { IReqoreRadioGroupProps } from '../../components/RadioGroup';
+import { argManager, DisabledArg } from '../utils/args';
+
+const { createArg } = argManager<IReqoreRadioGroupProps>();
+
+export default {
+  title: 'Components/Radio Group',
+  argTypes: {
+    ...createArg('asSwitch', {
+      type: 'boolean',
+      defaultValue: false,
+      name: 'As Switch',
+      description: 'If the radio group should be rendered as a switch',
+    }),
+    ...DisabledArg,
+  },
+} as Meta<IReqoreRadioGroupProps>;
+
+const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) => {
+  const [selected, setSelected] = useState(null);
+
+  return (
+    <ReqoreRadioGroup
+      {...args}
+      items={[
+        {
+          label: 'Option 1',
+          value: 'opt1',
+        },
+        {
+          label: 'Option 2',
+          value: 'opt2',
+        },
+        {
+          label: 'Option 3',
+          value: 'opt3',
+        },
+      ]}
+      onSelectClick={(value) => setSelected(value)}
+      selected={selected}
+    />
+  );
+};
+
+export const Basic = Template.bind({});
+export const Switch = Template.bind({});
+Switch.args = {
+  asSwitch: true,
+};

package/src/stories/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,78 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { noop } from 'lodash';
+import { IQorusSidebarProps } from '../../components/Sidebar';
+import { ReqorePanel, ReqoreSidebar } from '../../index';
+import { qorusSidebarItems } from '../../mock/menu';
+import { argManager, FlatArg, NoContentArg } from '../utils/args';
+
+const { disableArg, createArg } = argManager<IQorusSidebarProps>();
+
+export default {
+  title: 'Components/Sidebar',
+  argTypes: {
+    ...disableArg('items'),
+    ...FlatArg,
+    ...createArg('path', {
+      defaultValue: '/',
+      name: 'Path',
+      description: 'Mock location path',
+      type: 'string',
+    }),
+    ...createArg('floating', {
+      control: 'boolean',
+      defaultValue: false,
+      name: 'Floating',
+      description: 'If the sidebar should be floating',
+    }),
+    ...createArg('bordered', {
+      control: 'boolean',
+      defaultValue: false,
+      name: 'Bordered',
+      description: 'If the sidebar should be bordered',
+    }),
+    ...createArg('isOpen', {
+      control: 'boolean',
+      defaultValue: false,
+      name: 'Is Open',
+      description: 'If the sidebar should be shown when floating',
+    }),
+    ...createArg('position', {
+      control: 'select',
+      options: ['left', 'right'],
+      defaultValue: 'left',
+      name: 'Sidebar position',
+      description: 'Sidebar positions - this decides which border is drawn',
+    }),
+    ...NoContentArg,
+  },
+} as Meta;
+
+const Template: Story<IQorusSidebarProps> = (args: IQorusSidebarProps) => {
+  return (
+    <ReqoreSidebar
+      {...args}
+      items={qorusSidebarItems}
+      bookmarks={['submenu-item-2', 'another-item-1']}
+      onBookmarksChange={noop}
+      customItems={[
+        {
+          element: () => (
+            <div style={{ padding: '10px' }}>
+              <ReqorePanel intent='info' flat opacity={0.5}>
+                Hello I am a custom element!
+              </ReqorePanel>
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+};
+
+export const Basic = Template.bind({});
+export const Floating = Template.bind({});
+Floating.args = {
+  floating: true,
+  isOpen: true,
+  hasFloatingBackground: true,
+};