@qoretechnologies/reqore 0.37.9 → 0.38.1

package/src/stories/MultiSelect/MultiSelect.stories.tsx

@@ -43,13 +43,13 @@ type Story = StoryObj<typeof meta>;
 
 const Template: StoryFn<IReqoreMultiSelectProps> = (args: IReqoreMultiSelectProps) => {
   const [selected, setSelected] = useState<string[]>([
-    'Existing item 1',
     'Existing item 3',
     'Disabled item',
-    'Minimal item with border',
     'itemWithNoLabel',
   ]);
 
+  console.log({ selected });
+
   return (
     <ReqoreMultiSelect
       value={selected}

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

@@ -1,4 +1,5 @@
 import { StoryFn, StoryObj } from '@storybook/react';
+import { fireEvent } from '@storybook/testing-library';
 import { noop } from 'lodash';
 import ReqoreControlGroup from '../../components/ControlGroup';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
@@ -358,6 +359,103 @@ export const Minimal: Story = {
   },
 };
 
+export const MinimalOnlyContent: Story = {
+  render: Template,
+
+  args: {
+    label: undefined,
+    badge: undefined,
+    icon: undefined,
+    minimal: true,
+    actions: [
+      { label: 'test', show: false },
+      {
+        show: false,
+        group: [
+          { label: 'test 2', show: true },
+          { label: 'test 3', show: true },
+        ],
+      },
+    ],
+    bottomActions: [
+      { label: 'test', show: false, position: 'left' },
+      {
+        position: 'right',
+        show: false,
+        group: [
+          { label: 'test 2', show: true },
+          { label: 'test 3', show: true },
+        ],
+      },
+    ],
+    collapsible: false,
+  },
+};
+
+export const MinimalOnlyTopBar: Story = {
+  render: Template,
+
+  args: {
+    label: undefined,
+    badge: undefined,
+    icon: undefined,
+    minimal: true,
+    bottomActions: [
+      { label: 'test', show: false, position: 'left' },
+      {
+        position: 'right',
+        show: false,
+        group: [
+          { label: 'test 2', show: true },
+          { label: 'test 3', show: true },
+        ],
+      },
+    ],
+    collapsible: false,
+  },
+};
+
+export const MinimalOnlyBottomBar: Story = {
+  render: Template,
+
+  args: {
+    label: undefined,
+    badge: undefined,
+    icon: undefined,
+    minimal: true,
+    actions: [
+      { label: 'test', show: false },
+      {
+        show: false,
+        group: [
+          { label: 'test 2', show: true },
+          { label: 'test 3', show: true },
+        ],
+      },
+    ],
+    collapsible: false,
+  },
+};
+
+export const MinimalWithIntent: Story = {
+  render: Template,
+
+  args: {
+    minimal: true,
+    flat: true,
+    intent: 'info',
+    transparent: true,
+  },
+};
+
+export const WithOpacity: Story = {
+  render: Template,
+
+  args: {
+    opacity: 0.5,
+  },
+};
+
 export const Disabled: Story = {
   render: Template,
 
@@ -615,3 +713,28 @@ export const WithEffect: Story = {
     headerSize: 2,
   },
 };
+
+export const Resizable: Story = {
+  render: Template,
+
+  args: {
+    resizable: {
+      minWidth: 400,
+      maxWidth: 600,
+      defaultSize: { width: 400, height: '100%' },
+      enable: { right: true },
+    },
+  },
+};
+
+export const EditableLabel: Story = {
+  render: Template,
+
+  args: {
+    onLabelEdit: (label) => console.log(label),
+    badge: undefined,
+  },
+  play: async ({ canvasElement }) => {
+    await fireEvent.click(canvasElement.querySelector('.reqore-label-editor'));
+  },
+};

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

@@ -1,15 +1,20 @@
 import { StoryFn, StoryObj } from '@storybook/react';
+import { fireEvent } from '@storybook/testing-library';
 import { useState } from 'react';
 import { IReqorePopoverProps } from '../../components/Popover';
+import { sleep } from '../../helpers/utils';
 import usePopover from '../../hooks/usePopover';
 import {
   ReqoreButton,
   ReqoreControlGroup,
+  ReqoreMenu,
+  ReqoreMenuItem,
   ReqoreMessage,
   ReqoreModal,
   ReqorePanel,
   ReqorePopover,
   ReqoreSpacer,
+  ReqoreTextarea,
 } from '../../index';
 import { StoryMeta } from '../utils';
 import { FlatArg, argManager } from '../utils/args';
@@ -393,3 +398,39 @@ export const BlurredInsideModal: Story = {
     animatedDialogs: false,
   },
 };
+
+export const ChangingElement: Story = {
+  render: (args) => {
+    return <ReqoreTextarea scaleWithContent tooltip={args} />;
+  },
+
+  args: {
+    content: (
+      <ReqoreMenu>
+        <ReqoreMenuItem label='Item 1' />
+        <ReqoreMenuItem label='Item 2' />
+        <ReqoreMenuItem label='Item 3' />
+        <ReqoreMenuItem label='Item 4' />
+        <ReqoreMenuItem label='Item 5' />
+        <ReqoreMenuItem label='Item 6' />
+      </ReqoreMenu>
+    ),
+    handler: 'focus',
+    noArrow: true,
+    noWrapper: true,
+    useTargetWidth: true,
+  },
+
+  play: async ({ canvasElement }) => {
+    const textarea = canvasElement.querySelector('textarea');
+    await sleep(1000);
+    fireEvent.focusIn(textarea);
+    await sleep(1000);
+    fireEvent.change(textarea, {
+      target: {
+        value:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam tincidunt, nunc nisl aliquet nunc, quis aliquam nisl nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam tincidunt, nunc nisl aliquet nunc, quis aliquam nisl nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam tincidunt, nunc nisl aliquet nunc, quis aliquam nisl nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam tincidunt, nunc nisl aliquet nunc, quis aliquam nisl nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam tincidunt, nunc nisl aliquet nunc, quis aliquam nisl nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam tincidunt, nunc nisl aliquet nunc, quis aliquam nisl nisl.',
+      },
+    });
+  },
+};

package/src/stories/TextArea/TextArea.stories.tsx

@@ -1,6 +1,9 @@
+import { expect } from '@storybook/jest';
 import { StoryFn, StoryObj } from '@storybook/react';
+import { fireEvent } from '@storybook/testing-library';
 import { useState } from 'react';
 import { IReqoreTextareaProps } from '../../components/Textarea';
+import { sleep } from '../../helpers/utils';
 import { ReqoreControlGroup, ReqoreTextarea } from '../../index';
 import { StoryMeta } from '../utils';
 import { DisabledArg, MinimalArg, SizeArg, argManager } from '../utils/args';
@@ -236,3 +239,49 @@ export const Effect: Story = {
     },
   },
 };
+
+export const WithTemplates: Story = {
+  render: (args) => <ReqoreTextarea {...args} />,
+
+  args: {
+    templates: {
+      handler: 'focus',
+      useTargetWidth: true,
+      noWrapper: true,
+      items: [
+        {
+          label: 'New message in discord',
+          icon: 'DiscordLine',
+          description: 'When a new message in discord is received',
+          items: [
+            {
+              divider: true,
+              label: 'Discord',
+            },
+            {
+              label: 'Author',
+              description: 'Author of the message',
+              value: '$state:{1.field.author}',
+            },
+            {
+              label: 'Content',
+              description: 'Content of the message',
+              value: '$state:{1.field.content}',
+            },
+          ],
+        },
+        {
+          label: 'New event in Google Calendar',
+          icon: 'Calendar2Fill',
+          description: 'When a new event is created in Google Calendar',
+        },
+      ],
+    },
+  },
+
+  play: async () => {
+    await sleep(200);
+    await fireEvent.focusIn(document.querySelector('textarea'));
+    await expect(document.querySelector('.reqore-popover-content')).toBeTruthy();
+  },
+};

package/src/stories/TextArea/TextAreaTests.stories.tsx

@@ -0,0 +1,103 @@
+import { expect } from '@storybook/jest';
+import { StoryObj } from '@storybook/react';
+import { fireEvent, waitFor, within } from '@storybook/testing-library';
+import { IReqoreTextareaProps } from '../../components/Textarea';
+import { sleep } from '../../helpers/utils';
+import { ReqoreTextarea } from '../../index';
+import { StoryMeta } from '../utils';
+import { DisabledArg, MinimalArg, SizeArg, argManager } from '../utils/args';
+
+const { createArg } = argManager<IReqoreTextareaProps>();
+
+const meta = {
+  title: 'Form/TextArea/Tests',
+  component: ReqoreTextarea,
+  args: {
+    scaleWithContent: true,
+    fluid: undefined,
+    placeholder: 'Placeholder',
+  },
+  argTypes: {
+    ...MinimalArg(),
+    ...DisabledArg,
+    ...SizeArg,
+    ...createArg('scaleWithContent', {
+      name: 'Scale with content',
+      description: 'Scale with content',
+      control: 'boolean',
+      defaultValue: true,
+    }),
+    ...createArg('fluid', {
+      name: 'Fluid',
+      description: 'Fluid',
+      control: 'boolean',
+      defaultValue: undefined,
+    }),
+    ...createArg('placeholder', {
+      name: 'Placeholder',
+      description: 'Placeholder',
+      control: 'text',
+      defaultValue: 'Placeholder',
+    }),
+  },
+} as StoryMeta<typeof ReqoreTextarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ItemCanBeSelected: Story = {
+  args: {
+    templates: {
+      handler: 'focus',
+      useTargetWidth: true,
+      noWrapper: true,
+      items: [
+        {
+          label: 'New message in discord',
+          icon: 'DiscordLine',
+          description: 'When a new message in discord is received',
+          items: [
+            {
+              divider: true,
+              label: 'Discord',
+            },
+            {
+              label: 'Author',
+              description: 'Author of the message',
+              value: '$state:{1.field.author}',
+            },
+            {
+              label: 'Content',
+              description: 'Content of the message',
+              value: '$state:{1.field.content}',
+            },
+          ],
+        },
+        {
+          label: 'New event in Google Calendar',
+          icon: 'Calendar2Fill',
+          description: 'When a new event is created in Google Calendar',
+        },
+      ],
+    },
+  },
+
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(200);
+    await fireEvent.focusIn(document.querySelector('textarea'));
+    await sleep(200);
+    await expect(document.querySelector('.reqore-popover-content')).toBeTruthy();
+    await sleep(200);
+    await fireEvent.click(canvas.getAllByText('New message in discord')[0]);
+
+    await waitFor(() => expect(canvas.getAllByText('Author')[0]).toBeTruthy(), {
+      timeout: 5000,
+    });
+
+    await fireEvent.click(canvas.getAllByText('Author')[0]);
+
+    await expect(canvas.getAllByText('$state:{1.field.author}')[0]).toBeTruthy();
+  },
+};