@qoretechnologies/reqore 0.38.0 → 0.38.1

package/src/components/Panel/index.tsx

@@ -273,11 +273,9 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
     2 +
     (SIZE_TO_PX[size] + ((transparent && flat) || minimal ? 0 : PADDING_FROM_SIZE[size]) * 2)}px;
   align-items: center;
-  padding: ${({ noHorizontalPadding, size, transparent, flat, minimal, intent }: IStyledPanel) =>
+  padding: ${({ noHorizontalPadding, size, transparent, flat, intent }: IStyledPanel) =>
     `${transparent && flat && !intent ? 0 : PADDING_FROM_SIZE[size]}px ${
-      noHorizontalPadding
-        ? 0
-        : `${minimal ? PADDING_FROM_SIZE[size] / 2 : PADDING_FROM_SIZE[size]}px`
+      noHorizontalPadding ? 0 : `${PADDING_FROM_SIZE[size]}px`
     }`};
   border-bottom: ${({ theme, isCollapsed, flat, opacity = 1 }) =>
     !isCollapsed && !flat
@@ -308,17 +306,17 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
 `;
 
 export const StyledPanelTopBar = styled(StyledPanelTitle)`
-  padding-bottom: ${({ minimal, padded, size }: IStyledPanel) =>
-    !padded ? `${PADDING_FROM_SIZE[size] / (minimal ? 2 : 1)}px` : minimal ? 0 : undefined};
+  padding-bottom: ${({ minimal, padded, size, transparent }: IStyledPanel) =>
+    !padded ? `${PADDING_FROM_SIZE[size]}px` : minimal || transparent ? 0 : undefined};
   padding-top: ${({ minimal, size }: IStyledPanel) =>
-    minimal ? `${PADDING_FROM_SIZE[size] / 2}px` : undefined};
+    minimal ? `${PADDING_FROM_SIZE[size]}px` : undefined};
 `;
 
 export const StyledPanelBottomActions = styled(StyledPanelTitle)`
-  padding-top: ${({ minimal, padded, size }: IStyledPanel) =>
-    !padded ? `${PADDING_FROM_SIZE[size] / (minimal ? 2 : 1)}px` : minimal ? 0 : undefined};
+  padding-top: ${({ minimal, padded, size, transparent }: IStyledPanel) =>
+    !padded ? `${PADDING_FROM_SIZE[size]}px` : minimal || transparent ? 0 : undefined};
   padding-bottom: ${({ minimal, size }: IStyledPanel) =>
-    minimal ? `${PADDING_FROM_SIZE[size] / 2}px` : undefined};
+    minimal ? `${PADDING_FROM_SIZE[size]}px` : undefined};
   border-bottom: 0;
   border-top: ${({ theme, flat, opacity = 1 }) =>
     !flat
@@ -333,13 +331,21 @@ export const StyledPanelContent = styled.div<IStyledPanel>`
       ? undefined
       : noHorizontalPadding
       ? `${PADDING_FROM_SIZE[size]}px 0`
-      : `${minimal ? PADDING_FROM_SIZE[size] / 2 : PADDING_FROM_SIZE[size]}px`};
+      : `${PADDING_FROM_SIZE[size] / (minimal ? 2 : 1)}px ${PADDING_FROM_SIZE[size]}px`};
   // The padding is not needed when the panel is minimal and has title, since
   // the title already has padding and is transparent
   padding-top: ${({ minimal, hasLabel, padded, size }) =>
-    minimal && hasLabel && padded ? `${PADDING_FROM_SIZE[size] / 2}px` : undefined};
-  padding-bottom: ${({ minimal, padded, size }) =>
-    minimal && padded ? `${PADDING_FROM_SIZE[size] / 2}px` : undefined};
+    minimal && hasLabel && padded
+      ? `${PADDING_FROM_SIZE[size] / 2}px`
+      : padded
+      ? `${PADDING_FROM_SIZE[size]}px`
+      : undefined};
+  padding-bottom: ${({ minimal, padded, size, hasBottomActions }) =>
+    minimal && hasBottomActions && padded
+      ? `${PADDING_FROM_SIZE[size] / 2}px`
+      : padded
+      ? `${PADDING_FROM_SIZE[size]}px`
+      : undefined};
   flex: 1;
   overflow: auto;
   overflow-wrap: anywhere;
@@ -719,7 +725,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             isMobile={isMobile || isSmall}
             ref={measureRef}
             padded={padded}
-            transparent={rest.transparent}
+            transparent={rest.transparent || opacity === 0}
             intent={intent}
           >
             {hasTitleHeader && (
@@ -830,7 +836,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           <StyledPanelContent
             as={'div'}
             className='reqore-panel-content'
-            hasLabel={!!label}
+            hasLabel={!!hasTitleBar}
+            hasBottomActions={hasBottomActions}
             isCollapsed={_isCollapsed}
             style={contentStyle}
             padded={padded}
@@ -850,7 +857,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             padded={padded}
             intent={intent}
             minimal={minimal}
-            transparent={rest.transparent}
+            transparent={rest.transparent || opacity === 0}
             opacity={opacity ?? (minimal ? 0 : 1)}
             size={contentSize || panelSize}
             noHorizontalPadding={noHorizontalPadding}

package/src/components/Textarea/index.tsx

@@ -1,6 +1,7 @@
 import { rgba } from 'polished';
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
+import { ReqoreDropdown } from '../..';
 import { RADIUS_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
@@ -18,10 +19,13 @@ import {
   IWithReqoreEffect,
   IWithReqoreTooltip,
 } from '../../types/global';
+import { IReqoreDropdownProps } from '../Dropdown';
 import { StyledEffect } from '../Effect';
 import { IReqoreInputStyle } from '../Input';
 import ReqoreInputClearButton from '../InputClearButton';
 
+export interface IReqoreFormTemplates extends IReqoreDropdownProps {}
+
 export interface IReqoreTextareaProps
   extends React.HTMLAttributes<HTMLTextAreaElement>,
     IReqoreReadOnly,
@@ -46,6 +50,7 @@ export interface IReqoreTextareaProps
   onClearClick?: () => any;
   wrapperStyle?: React.CSSProperties;
   focusRules?: IReqoreAutoFocusRules;
+  templates?: IReqoreFormTemplates;
 }
 
 export interface IReqoreTextareaStyle extends IReqoreTextareaProps {
@@ -141,6 +146,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
       onChange,
       fixed,
       focusRules,
+      templates,
       ...rest
     }: IReqoreTextareaProps,
     ref
@@ -158,6 +164,75 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
     useAutosizeTextArea(inputRef, _value, scaleWithContent);
     useAutoFocus(inputRef, rest.readOnly || rest.disabled ? undefined : focusRules, onChange);
 
+    const handleItemSelect = useCallback(
+      (item) => {
+        if (!inputRef || !item || !item.value) {
+          return;
+        }
+        // Add the value of the selected item to the current value at the cursor position
+        const value = `${_value.slice(0, inputRef.selectionStart)}${item.value}${_value.slice(
+          inputRef.selectionEnd
+        )}`;
+
+        setValue(value);
+      },
+      [inputRef, _value]
+    );
+
+    const renderChildren = () => {
+      return (
+        <>
+          <StyledTextarea
+            {...rest}
+            effect={{
+              interactive: !rest?.disabled && !rest.readOnly,
+              ...rest?.effect,
+            }}
+            onChange={(e) => {
+              setValue(e.target.value);
+              onChange?.(e);
+            }}
+            as='textarea'
+            className={`${className || ''} reqore-control reqore-textarea`}
+            _size={size}
+            ref={(ref) => setInputRef(ref)}
+            theme={theme}
+            rounded={rounded}
+            rows={1}
+            value={_value}
+            readonly={rest?.readOnly}
+          />
+          <ReqoreInputClearButton
+            enabled={!rest?.readOnly && !rest?.disabled && !!(onClearClick && onChange)}
+            show={_value && _value !== ''}
+            onClick={onClearClick}
+            size={size}
+          />
+        </>
+      );
+    };
+
+    if (templates) {
+      return (
+        <ReqoreDropdown<Omit<IReqoreTextareaStyle & { ref: any }, 'content'>>
+          component={StyledTextareaWrapper}
+          className={`${className || ''} reqore-control-wrapper`}
+          width={width}
+          height={height}
+          fluid={fluid}
+          fixed={fixed}
+          _size={size}
+          theme={theme}
+          style={wrapperStyle}
+          ref={targetRef}
+          onItemSelect={handleItemSelect}
+          {...templates}
+        >
+          {renderChildren()}
+        </ReqoreDropdown>
+      );
+    }
+
     return (
       <StyledTextareaWrapper
         className={`${className || ''} reqore-control-wrapper`}
@@ -170,32 +245,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
         style={wrapperStyle}
         ref={targetRef}
       >
-        <StyledTextarea
-          {...rest}
-          effect={{
-            interactive: !rest?.disabled && !rest.readOnly,
-            ...rest?.effect,
-          }}
-          onChange={(e) => {
-            setValue(e.target.value);
-            onChange?.(e);
-          }}
-          as='textarea'
-          className={`${className || ''} reqore-control reqore-textarea`}
-          _size={size}
-          ref={(ref) => setInputRef(ref)}
-          theme={theme}
-          rounded={rounded}
-          rows={1}
-          value={_value}
-          readonly={rest?.readOnly}
-        />
-        <ReqoreInputClearButton
-          enabled={!rest?.readOnly && !rest?.disabled && !!(onClearClick && onChange)}
-          show={_value && _value !== ''}
-          onClick={onClearClick}
-          size={size}
-        />
+        {renderChildren()}
       </StyledTextareaWrapper>
     );
   }

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -1,6 +1,8 @@
 import { StoryFn, StoryObj } from '@storybook/react';
+import { fireEvent, within } from '@storybook/testing-library';
 import ReqoreButton, { IReqoreButtonProps } from '../../components/Button';
 import { IReqoreDropdownProps } from '../../components/Dropdown';
+import { sleep } from '../../helpers/utils';
 import { ReqoreControlGroup, ReqoreDropdown, ReqoreInput } from '../../index';
 import { StoryMeta } from '../utils';
 import { argManager } from '../utils/args';
@@ -315,3 +317,59 @@ export const WithCustomPaging: Story = {
 
   play: () => {},
 };
+
+export const WithChildItems: Story = {
+  render: (args) => <ReqoreDropdown {...args} />,
+  args: {
+    label: 'Dropdown with child items',
+    items: [
+      {
+        label: 'Test',
+        description: 'I have children',
+        rightIcon: 'MenuLine',
+        rightIconColor: 'info:lighten:2',
+        items: [
+          {
+            label: 'Test child 1',
+          },
+          {
+            label: 'Test child 2',
+          },
+          {
+            label: 'Test child 3',
+            description: 'I have children too',
+            items: [
+              {
+                label: 'Test deep child 1',
+              },
+              {
+                label: 'Test deep child 2',
+              },
+              {
+                label: 'Test deep child 3',
+              },
+            ],
+          },
+          {
+            label: 'Test child 4',
+          },
+        ],
+      },
+      {
+        label: 'Normal item',
+        description: 'I have no children',
+      },
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(200);
+
+    await fireEvent.click(canvas.getAllByText('Dropdown with child items')[0]);
+
+    await sleep(200);
+
+    await fireEvent.click(canvas.getAllByText('Test')[0]);
+  },
+};

package/src/stories/Dropdown/DropdownTests.stories.tsx

@@ -0,0 +1,78 @@
+import { expect } from '@storybook/jest';
+import { StoryObj } from '@storybook/react';
+import { fireEvent, waitFor, within } from '@storybook/testing-library';
+import ReqoreButton, { IReqoreButtonProps } from '../../components/Button';
+import { IReqoreDropdownProps } from '../../components/Dropdown';
+import { ReqoreDropdown } from '../../index';
+import { StoryMeta } from '../utils';
+import { argManager } from '../utils/args';
+import { WithChildItems } from './Dropdown.stories';
+
+const { createArg, disableArg } = argManager<IReqoreDropdownProps>();
+
+const meta = {
+  title: 'Form/Dropdown/Tests',
+  component: ReqoreDropdown,
+  parameters: {
+    chromatic: {
+      delay: 1500,
+    },
+  },
+  argTypes: {
+    ...disableArg('multiSelect'),
+    ...createArg('component', {
+      defaultValue: ReqoreButton,
+      table: {
+        disable: true,
+      },
+    }),
+    ...createArg('filterable', {
+      defaultValue: true,
+      name: 'Filterable',
+      type: 'boolean',
+    }),
+    ...createArg('items', {
+      table: {
+        disable: true,
+      },
+    }),
+  },
+  args: {
+    component: ReqoreButton,
+    filterable: true,
+  },
+} as StoryMeta<typeof ReqoreDropdown<IReqoreButtonProps>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ItemsCanBeTraversed: Story = {
+  ...WithChildItems,
+  play: async ({ canvasElement, ...rest }) => {
+    const canvas = within(canvasElement);
+
+    await WithChildItems.play({ canvasElement, ...rest });
+
+    await waitFor(() => expect(canvas.getAllByText('Test child 3')[0]).toBeTruthy(), {
+      timeout: 5000,
+    });
+
+    await fireEvent.click(canvas.getAllByText('Test child 3')[0]);
+
+    await expect(canvas.getAllByText('Test deep child 3')[0]).toBeTruthy();
+  },
+};
+
+export const BackButtonsWork: Story = {
+  ...ItemsCanBeTraversed,
+  play: async ({ canvasElement, ...rest }) => {
+    const canvas = within(canvasElement);
+
+    await ItemsCanBeTraversed.play({ canvasElement, ...rest });
+
+    await fireEvent.click(document.querySelector('.reqore-dropdown-back-button'));
+
+    await expect(canvas.getAllByText('Test child 3')[0]).toBeTruthy();
+  },
+};

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,84 @@ 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,
 
@@ -370,6 +448,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';
@@ -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();
+  },
+};