@qoretechnologies/reqore 0.38.0 → 0.38.2

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

@@ -39,11 +39,8 @@ const Template: StoryFn<IReqoreMessageProps> = (args: IReqoreMessageProps) => {
   return (
     <>
       <ReqoreMessage {...args} onClick={noop}>
-        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.
+        {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>
     </>
   );
@@ -53,6 +50,16 @@ 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,
 
@@ -68,6 +75,7 @@ export const Minimal: Story = {
   args: {
     minimal: true,
     intent: 'danger',
+    size: 'small',
   },
 };
 

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

@@ -359,6 +359,94 @@ export const Minimal: Story = {
   },
 };
 
+export const MinimalCollapsed: Story = {
+  render: Template,
+
+  args: {
+    minimal: true,
+    flat: true,
+    isCollapsed: true,
+  },
+};
+
+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,
 
@@ -370,6 +458,14 @@ export const MinimalWithIntent: Story = {
   },
 };
 
+export const WithOpacity: Story = {
+  render: Template,
+
+  args: {
+    opacity: 0.5,
+  },
+};
+
 export const Disabled: Story = {
   render: Template,
 

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';
@@ -147,7 +150,7 @@ const Template: StoryFn<IReqoreTextareaProps> = (args) => {
           onClearClick={handleValueClear}
           value={value}
           fluid
-          focusRules={{ type: 'keypress', shortcut: 'letters', clearOnFocus: true }}
+          focusRules={{ type: 'auto' }}
         />
       </ReqoreControlGroup>
     </>
@@ -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();
+  },
+};