@qoretechnologies/reqore 0.25.3 → 0.25.5

package/src/components/Tree/index.tsx

@@ -1,24 +1,23 @@
-import { cloneDeep } from 'lodash';
-import size from 'lodash/size';
-import { rgba } from 'polished';
+import { cloneDeep, size as lodashSize } from 'lodash';
 import { useContext, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { ReqoreTextarea } from '../..';
+import styled from 'styled-components';
+import { ReqoreMessage, ReqoreTextarea } from '../..';
 import { IReqoreTheme } from '../../constants/theme';
 import ReqoreContext from '../../context/ReqoreContext';
-import { changeLightness } from '../../helpers/colors';
 import { getLineCount, getTypeFromValue } from '../../helpers/utils';
+import { IWithReqoreSize } from '../../types/global';
 import ReqoreButton from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
 import ReqoreTag from '../Tag';
 
-export interface IReqoreTreeProps {
+export interface IReqoreTreeProps extends IWithReqoreSize {
   data: Object | Array<any>;
   mode?: 'tree' | 'copy';
   expanded?: boolean;
   showTypes?: boolean;
   onItemClick?: (value: any, path?: string[]) => void;
   withLabelCopy?: boolean;
+  showControls?: boolean;
 }
 
 const StyledTreeWrapper = styled.div`
@@ -31,35 +30,19 @@ export interface ITreeStyle {
   theme: IReqoreTheme;
 }
 
-const StyledLabel = styled.span<ITreeStyle>`
-  display: inline-block;
-  line-height: 30px;
-  padding: 0 10px;
-  transition: all 0.2s ease-out;
-
-  ${({ interactive, theme }: ITreeStyle) =>
-    interactive &&
-    css`
-      cursor: pointer;
-
-      &:hover {
-        background-color: ${rgba(changeLightness(theme.main, 0.3), 0.2)};
-        border-radius: 5px;
-      }
-    `}
-`;
-
 export const ReqoreTree = ({
   data,
   mode = 'tree',
+  size = 'normal',
   expanded,
   showTypes,
   onItemClick,
   withLabelCopy,
+  showControls = true,
 }: IReqoreTreeProps) => {
   const [_mode, setMode] = useState<'tree' | 'copy'>(mode);
   const [items, setItems] = useState({});
-  const [allExpanded, setAllExpanded] = useState(expanded);
+  const [allExpanded, setAllExpanded] = useState(expanded || !showControls);
   const [_showTypes, setShowTypes] = useState(showTypes);
   const { addNotification } = useContext(ReqoreContext);
 
@@ -108,54 +91,59 @@ export const ReqoreTree = ({
         items[stateKey] ||
         (allExpanded && items[stateKey] !== false);
 
-      if (isObject && size(data[key]) === 0) {
+      if (isObject && lodashSize(data[key]) === 0) {
         isObject = false;
         isExpandable = false;
       }
 
       return (
         <div key={index} style={{ margin: level === 1 ? '15px 0' : `15px` }}>
-          <ReqoreControlGroup>
-            {isObject ? (
+          {isObject ? (
+            <ReqoreControlGroup size={size}>
               <ReqoreButton
                 className='reqore-tree-toggle'
-                icon={isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill'}
-                active={isExpandable}
-                intent={isExpandable ? 'info' : undefined}
-                onClick={() => handleItemClick(stateKey, isExpandable)}
+                icon={isObject ? (isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill') : undefined}
+                intent={isObject && isExpandable ? 'info' : undefined}
+                onClick={isObject ? () => handleItemClick(stateKey, isExpandable) : undefined}
+                flat
               >
                 {displayKey}
               </ReqoreButton>
-            ) : (
-              <ReqoreTag label={`${displayKey}: `} />
-            )}
-            {_showTypes && <ReqoreTag label={dataType} className='reqore-tree-type' />}
-            {!isObject && (
-              <StyledLabel
+              {_showTypes ? <ReqoreTag label={dataType} className='reqore-tree-type' /> : null}
+            </ReqoreControlGroup>
+          ) : (
+            <ReqoreControlGroup size={size}>
+              <ReqoreTag
+                label={displayKey}
+                actions={
+                  withLabelCopy
+                    ? [
+                        {
+                          icon: 'FileCopy2Fill',
+                          onClick: () => {
+                            navigator.clipboard.writeText(JSON.stringify(data[key]));
+                            addNotification({
+                              content: 'Successfuly copied to clipboard',
+                              id: Date.now().toString(),
+                              type: 'success',
+                              duration: 3000,
+                            });
+                          },
+                        },
+                      ]
+                    : undefined
+                }
+              />
+              {_showTypes ? <ReqoreTag className='reqore-tree-type' label={dataType} /> : null}
+              <ReqoreMessage
+                flat
+                onClick={() => onItemClick(data[key], [...path, key])}
                 className='reqore-tree-label'
-                interactive={!!onItemClick}
-                onClick={onItemClick ? () => onItemClick(data[key], [...path, key]) : undefined}
               >
                 {JSON.stringify(data[key])}
-              </StyledLabel>
-            )}
-            {withLabelCopy && (
-              <ReqoreButton
-                className='reqore-tree-copy'
-                icon='FileCopy2Fill'
-                onClick={() => {
-                  navigator.clipboard.writeText(JSON.stringify(data[key]));
-                  addNotification({
-                    content: 'Successfuly copied to clipboard',
-                    id: Date.now().toString(),
-                    type: 'success',
-                    duration: 3000,
-                  });
-                }}
-                minimal
-              />
-            )}
-          </ReqoreControlGroup>
+              </ReqoreMessage>
+            </ReqoreControlGroup>
+          )}
           {isExpandable && isObject
             ? renderTree(data[key], stateKey, level + 1, [...path, key])
             : null}
@@ -188,21 +176,23 @@ export const ReqoreTree = ({
 
   return (
     <StyledTreeWrapper className='reqore-tree'>
-      <ReqoreControlGroup stack>
-        {isDeep() && (
-          <>
-            {!allExpanded && (
-              <ReqoreButton
-                className='reqore-tree-expand-all'
-                icon='ArrowDownFill'
-                onClick={handleExpandClick}
-                key='expand-button'
-              >
-                Expand all
-              </ReqoreButton>
-            )}
-            {allExpanded || size(items) > 0 ? (
+      {showControls && (
+        <ReqoreControlGroup stack size={size}>
+          {isDeep() && !allExpanded ? (
+            <ReqoreButton
+              flat
+              className='reqore-tree-expand-all'
+              icon='ArrowDownFill'
+              onClick={handleExpandClick}
+              key='expand-button'
+            >
+              Expand all
+            </ReqoreButton>
+          ) : null}
+          {isDeep() &&
+            (allExpanded || lodashSize(items) > 0 ? (
               <ReqoreButton
+                flat
                 className='reqore-tree-collapse-all'
                 icon='ArrowUpFill'
                 onClick={handleCollapseClick}
@@ -211,34 +201,36 @@ export const ReqoreTree = ({
                 {' '}
                 Collapse all{' '}
               </ReqoreButton>
-            ) : null}
-          </>
-        )}
-        <ReqoreButton
-          className='reqore-tree-show-types'
-          icon='CodeBoxFill'
-          active={_showTypes}
-          onClick={handleTypesClick}
-        >
-          Show types
-        </ReqoreButton>
-        <ReqoreButton
-          className='reqore-tree-as-tree'
-          active={_mode === 'tree'}
-          onClick={handleTreeClick}
-          icon='Menu2Fill'
-        >
-          Tree View
-        </ReqoreButton>
-        <ReqoreButton
-          className='reqore-tree-as-text'
-          onClick={handleCopyClick}
-          active={_mode === 'copy'}
-          icon='ClipboardFill'
-        >
-          Text View
-        </ReqoreButton>
-      </ReqoreControlGroup>
+            ) : null)}
+          <ReqoreButton
+            flat
+            className='reqore-tree-show-types'
+            icon='CodeBoxFill'
+            active={_showTypes}
+            onClick={handleTypesClick}
+          >
+            Show types
+          </ReqoreButton>
+          <ReqoreButton
+            flat
+            className='reqore-tree-as-tree'
+            active={_mode === 'tree'}
+            onClick={handleTreeClick}
+            icon='Menu2Fill'
+          >
+            Tree View
+          </ReqoreButton>
+          <ReqoreButton
+            flat
+            className='reqore-tree-as-text'
+            onClick={handleCopyClick}
+            active={_mode === 'copy'}
+            icon='ClipboardFill'
+          >
+            Text View
+          </ReqoreButton>
+        </ReqoreControlGroup>
+      )}
 
       {_mode === 'tree' && <div>{renderTree(data, true)}</div>}
 
@@ -247,6 +239,7 @@ export const ReqoreTree = ({
           className='reqore-tree-textarea'
           id='tree-content'
           defaultValue={textData}
+          size={size}
           rows={lineCount > 20 ? 20 : lineCount}
         />
       )}

package/src/constants/sizes.ts

@@ -64,3 +64,12 @@ export const RADIUS_FROM_SIZE = {
   big: 7,
   huge: 9,
 };
+
+export const ICON_FROM_HEADER_SIZE = {
+  1: 21,
+  2: 18,
+  3: 15,
+  4: 12,
+  5: 9,
+  6: 6,
+};

package/src/containers/PopoverProvider.tsx

@@ -27,6 +27,8 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
             !popperRef.current.contains(event.target) &&
             !targetElement?.contains(event.target as Node))
         ) {
+          targetElement.style.position = 'initial';
+          targetElement.style.zIndex = 'initial';
           removePopover(id);
         }
       });

package/src/hooks/usePopover.tsx

@@ -30,6 +30,9 @@ export interface IPopover {
   closeOnAnyClick?: boolean;
   delay?: number;
   blur?: number;
+  opaque?: boolean;
+  maxWidth?: string;
+  maxHeight?: string;
 }
 
 export interface IPopoverOptions extends IPopover {
@@ -47,6 +50,7 @@ const usePopover = ({
   closeOnOutsideClick = true,
   openOnMount = false,
   delay,
+  ...rest
 }: IPopoverOptions) => {
   const { addPopover, removePopover, updatePopover, popovers } = useContext(PopoverContext);
   const { current }: MutableRefObject<string> = useRef(shortid.generate());
@@ -61,7 +65,9 @@ const usePopover = ({
 
   const _addPopover = () => {
     if (currentPopover) {
-      _removePopover?.();
+      if (handler !== 'hoverStay') {
+        _removePopover?.();
+      }
     } else if (show) {
       timeout = setTimeout(() => {
         addPopover?.({
@@ -73,12 +79,23 @@ const usePopover = ({
           useTargetWidth,
           closeOnOutsideClick,
           closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
+          ...rest,
         });
+
+        if (rest?.blur > 0) {
+          targetElement.style.position = 'relative';
+          targetElement.style.zIndex = '999999';
+        }
       }, delay || 0);
     }
   };
 
   const _removePopover = () => {
+    if (rest?.blur > 0) {
+      targetElement.style.position = 'initial';
+      targetElement.style.zIndex = 'initial';
+    }
+
     cancelTimeout();
     removePopover?.(current);
   };
@@ -99,6 +116,7 @@ const usePopover = ({
         useTargetWidth,
         closeOnOutsideClick,
         closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
+        ...rest,
       });
     }
   }, [content?.toString()]);
@@ -125,6 +143,7 @@ const usePopover = ({
     return () => {
       if (targetElement && content) {
         cancelTimeout();
+
         targetElement.removeEventListener(startEvent, _addPopover);
 
         if (endEvent) {
@@ -139,7 +158,6 @@ const usePopover = ({
   }, [targetElement?.toString(), content?.toString(), current, currentPopover]);
 
   useUnmount(() => {
-    console.log('UNMOUNTING POPOVER', content);
     cancelTimeout();
   });
 

package/src/hooks/useTooltip.ts

@@ -14,7 +14,7 @@ export const useTooltip = (
       setElement(targetElement);
       setData(tooltip);
     }
-  }, [targetElement?.toString(), JSON.stringify(tooltip)]);
+  }, [targetElement?.toString(), tooltip?.toString()]);
 
   const popoverData = typeof data === 'string' ? { content: data } : data;
 

package/src/mock/collectionData.tsx

@@ -29,6 +29,8 @@ export default [
   {
     label: 'Test with tooltip',
     tooltip: 'This is a test item',
+    headerSize: 2,
+    contentSize: 'huge',
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     tags: [

package/src/stories/Input/Input.stories.tsx

@@ -16,7 +16,7 @@ export default {
 const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
   const [value, setValue] = useState('Input value');
 
-  const handleValueChange = (e) => {
+  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
   };
 

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

@@ -50,3 +50,10 @@ Inverted.args = {
   inverted: true,
   intent: 'danger',
 };
+
+export const CustomTheme: Story<IReqoreMessageProps> = Template.bind({});
+CustomTheme.args = {
+  customTheme: {
+    main: '#6e1295',
+  },
+};

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

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import ReqoreInput from '../../components/Input';
 import { IReqorePanelProps, ReqorePanel } from '../../components/Panel';
-import { argManager, FlatArg, IntentArg } from '../utils/args';
+import { argManager, FlatArg, IconArg, IntentArg } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
 
@@ -46,6 +46,7 @@ export default {
       name: 'Header Size',
       description: 'The size of the header',
     }),
+    ...IconArg(),
   },
 } as Meta<IReqorePanelProps>;
 

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

@@ -2,64 +2,109 @@ 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';
+import { ReqoreButton, ReqoreMessage, ReqorePanel, ReqorePopover } from '../../index';
+import { argManager } from '../utils/args';
+
+const { createArg } = argManager<IReqorePopoverProps>();
 
 export default {
   title: 'Components/Popover',
+  argTypes: {
+    ...createArg('opaque', {
+      defaultValue: false,
+      name: 'Opaque',
+      description: 'Makes the popover opaque',
+      type: 'boolean',
+    }),
+    ...createArg('blur', {
+      defaultValue: 0,
+      name: 'Blur',
+      description: 'Makes the popover blurred',
+      type: 'number',
+    }),
+    ...createArg('maxHeight', {
+      defaultValue: undefined,
+      name: 'Max Height',
+      description: 'Sets the max height of the popover',
+      type: 'string',
+    }),
+    ...createArg('maxWidth', {
+      defaultValue: undefined,
+      name: 'Max Width',
+      description: 'Sets the max width of the popover',
+      type: 'string',
+    }),
+    ...createArg('content', {
+      defaultValue: 'This is a popover',
+      name: 'Content',
+      description: 'The content of the popover',
+      type: 'string',
+    }),
+  },
 } as Meta<IReqorePopoverProps>;
 
-const HoverButton = () => {
+const HoverButton = (args: any) => {
   return (
-    <ReqorePopover component={ReqoreButton} content='I am shown on hover' isReqoreComponent>
+    <ReqorePopover component={ReqoreButton} isReqoreComponent {...args}>
       Hover popover
     </ReqorePopover>
   );
 };
 
-const ClickButton = ({ content, placement }: any) => {
+const ClickButton = (args: any) => {
   const [refElement, setRefElement] = useState(null);
 
   usePopover({
     targetElement: refElement,
-    content: content || 'I am a tooltip on click',
     handler: 'click',
-    placement,
     closeOnOutsideClick: true,
     noArrow: true,
     useTargetWidth: true,
+    ...args,
   });
 
   return <ReqoreButton ref={setRefElement}>Click popover</ReqoreButton>;
 };
 
-const DelayButton = ({ content, placement }: any) => {
+const DelayButton = (args: any) => {
   const [refElement, setRefElement] = useState(null);
 
   usePopover({
     targetElement: refElement,
-    content: content || 'I am a tooltip on click',
-    placement,
+
     delay: 500,
+    ...args,
   });
 
   return <ReqoreButton ref={setRefElement}>Tooltip with delay of 500ms</ReqoreButton>;
 };
 
+const HoverStayButton = (args: any) => {
+  const [refElement, setRefElement] = useState(null);
+
+  usePopover({
+    targetElement: refElement,
+    handler: 'hoverStay',
+    ...args,
+  });
+
+  return (
+    <ReqoreButton ref={setRefElement}>Tooltip with hover start and click end events</ReqoreButton>
+  );
+};
+
 const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
   return (
     <>
-      <HoverButton />
+      <HoverButton {...args} />
       <br />
       <ClickButton {...args} />
       <br />
       <DelayButton {...args} />
       <br />
-      <ReqorePopover
-        component={ReqoreButton}
-        content='I am shown on mount'
-        isReqoreComponent
-        openOnMount
-      >
+      <HoverStayButton {...args} />
+      <br />
+      <ReqorePopover {...args} component={ReqoreButton} isReqoreComponent openOnMount>
         Auto open popover
       </ReqorePopover>
     </>
@@ -67,3 +112,27 @@ const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
 };
 
 export const Basic = Template.bind({});
+export const CustomContent = Template.bind({});
+CustomContent.args = {
+  content: (
+    <ReqorePanel label='This is a test' flat>
+      <ReqoreMessage flat>
+        In to am attended desirous raptures declared diverted confined at. Collected instantly
+        remaining up certainly to necessary as. Over walk dull into
+      </ReqoreMessage>
+    </ReqorePanel>
+  ),
+};
+
+export const Blurred = Template.bind({});
+Blurred.args = {
+  blur: 4,
+  content: (
+    <ReqorePanel label='This is a test' flat>
+      <ReqoreMessage flat>
+        In to am attended desirous raptures declared diverted confined at. Collected instantly
+        remaining up certainly to necessary as. Over walk dull into
+      </ReqoreMessage>
+    </ReqorePanel>
+  ),
+};

package/src/stories/Tag/Tag.stories.tsx

@@ -28,6 +28,12 @@ export default {
         disable: true,
       },
     }),
+    ...createArg('rightIcon', {
+      defaultValue: 'EBike2Line',
+      name: 'Right Icon',
+      description: 'Right icon',
+      control: 'text',
+    }),
     ...createArg('actions', {
       defaultValue: [
         {
@@ -37,10 +43,6 @@ export default {
           intent: 'info',
           tooltip: { content: 'I am a tooltip' },
         },
-        {
-          icon: 'PsychotherapyFill',
-          onClick: noop,
-        },
         {
           icon: 'SpyFill',
           onClick: noop,
@@ -71,6 +73,7 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
       />
       <ReqoreTag label='Danger Tag' icon='AlarmWarningLine' intent='danger' {...args} />
       <ReqoreTag label='Custom Color Tag' icon='AlarmWarningLine' color='#38fdb2' {...args} />
+      <ReqoreTag label='No Buttons Tag' icon='CarLine' color='#0b4578' rightIcon={args.rightIcon} />
     </ReqoreTagGroup>
   );
 };

package/src/stories/Tree/Tree.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { noop } from 'lodash';
 import { IReqoreTreeProps, ReqoreTree } from '../../components/Tree';
 import MockObject from '../../mock/object.json';
-import { argManager } from '../utils/args';
+import { argManager, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTreeProps>();
 
@@ -27,6 +27,7 @@ export default {
       control: 'boolean',
       defaultValue: false,
     }),
+    ...SizeArg,
   },
 } as Meta<IReqoreTreeProps>;
 
@@ -41,3 +42,8 @@ export const TextView = Template.bind({});
 TextView.args = {
   mode: 'copy',
 };
+
+export const NoControls = Template.bind({});
+NoControls.args = {
+  showControls: false,
+};