Merge pull request #358 from qoretechnologies/foxhoundn/bug-templates…

…-on-textarea-357 Improve tree styling, fix compact buttons, fix textarea templates
qoretechnologies · Dec 5, 2023 · 041a95e · 041a95e
2 parents 99cf3fb + 4ee2cb4
commit 041a95e
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 63 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,5 +1,7 @@
 import { ReqoreContent, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
+
 export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
   layout: 'fullscreen',
   options: {
     panelPosition: 'right',

diff --git a/__tests__/tree.test.tsx b/__tests__/tree.test.tsx
@@ -36,22 +36,6 @@ test('<Tree /> items can be expanded and collapsed', () => {
   expect(document.querySelectorAll('.reqore-tree-label').length).toBe(0);
 });
 
-test('Shows types for <Tree /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreTree data={MockObject} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  fireEvent.click(document.querySelector('.reqore-tree-show-types'));
-
-  expect(document.querySelectorAll('.reqore-tree-type').length).toBe(7);
-});
-
 test('Renders <Tree /> with clickable items', () => {
   const fn = jest.fn();
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.38.3",
+  "version": "0.38.4",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -283,9 +283,10 @@ export interface IReqoreButtonBadgeProps extends IWithReqoreSize {
   content?: TReqoreBadge | TReqoreBadge[];
   wrap?: boolean;
   wrapGroup?: boolean;
+  compact?: boolean;
 }
 
-export const ButtonBadge = memo(({ wrapGroup, ...props }: IReqoreButtonBadgeProps) => {
+export const ButtonBadge = memo(({ wrapGroup, compact, ...props }: IReqoreButtonBadgeProps) => {
   const renderTag = useCallback(
     ({ size, color, theme, content, key }: IReqoreButtonBadgeProps & { key: number }) => (
       <ReqoreTag
@@ -309,7 +310,7 @@ export const ButtonBadge = memo(({ wrapGroup, ...props }: IReqoreButtonBadgeProp
     return (
       <>
         <ReqoreSpacer
-          width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size]}
+          width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / (compact ? 2 : 1)}
           height={!props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / 2}
         />
         <ReqoreTagGroup wrap={wrapGroup}>
@@ -363,6 +364,7 @@ const ReqoreButton = memo(
         leftIconProps,
         rightIconProps,
         label,
+        compact,
         as,
         ...rest
       }: IReqoreButtonProps,
@@ -418,6 +420,7 @@ const ReqoreButton = memo(
           wrap={wrap}
           description={description}
           className={`${className || ''} reqore-control reqore-button`}
+          compact={compact}
         >
           <StyledButtonContent size={size} wrap={wrap} description={description} flat={_flat}>
             {hasLeftIcon ? (
@@ -426,6 +429,7 @@ const ReqoreButton = memo(
                   icon={icon}
                   size={size}
                   color={leftIconColor || iconColor}
+                  compact={compact}
                   {...leftIconProps}
                   style={
                     textAlign !== 'left' || iconsAlign === 'center'
@@ -440,7 +444,7 @@ const ReqoreButton = memo(
                   }
                 />
                 {_children || hasRightIcon ? (
-                  <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
+                  <ReqoreSpacer width={PADDING_FROM_SIZE[size] / (compact ? 2 : 1)} />
                 ) : null}
               </>
             ) : _children ? (
@@ -471,7 +475,7 @@ const ReqoreButton = memo(
               </StyledAnimatedTextWrapper>
             )}
             {(badge || badge === 0) && !wrap ? (
-              <ButtonBadge content={badge} size={size} theme={theme} />
+              <ButtonBadge content={badge} size={size} theme={theme} compact={compact} />
             ) : null}
             {!hasRightIcon ? (
               _children ? (
@@ -482,11 +486,14 @@ const ReqoreButton = memo(
               ) : null
             ) : (
               <>
-                {_children || badge ? <ReqoreSpacer width={PADDING_FROM_SIZE[size]} /> : null}
+                {_children || badge ? (
+                  <ReqoreSpacer width={PADDING_FROM_SIZE[size] / (compact ? 2 : 1)} />
+                ) : null}
                 <ReqoreIcon
                   icon={rightIcon}
                   size={size}
                   color={rightIconColor || iconColor}
+                  compact={compact}
                   {...rightIconProps}
                   style={
                     textAlign !== 'right' || iconsAlign === 'center'

diff --git a/src/components/Dropdown/list.tsx b/src/components/Dropdown/list.tsx
@@ -81,7 +81,7 @@ const ReqoreDropdownList = memo(
 
       return _items.filter((item) => {
         if (item.divider) {
-          return false;
+          return true;
         }
 
         const text: string | undefined = item.label || item.value || item.children;
@@ -153,7 +153,8 @@ const ReqoreDropdownList = memo(
               {_onBackClick && (
                 <ReqoreButton
                   icon='ArrowLeftSLine'
-                  fluid
+                  fluid={!filterable}
+                  fixed={filterable}
                   onClick={_onBackClick}
                   className='reqore-dropdown-back-button'
                 />
@@ -163,7 +164,10 @@ const ReqoreDropdownList = memo(
                   value={onFilterChange ? filter : query}
                   icon='SearchLine'
                   onChange={handleQueryChange}
-                  placeholder={filterPlaceholder || `Search ${size(_items)} items...`}
+                  placeholder={
+                    filterPlaceholder ||
+                    `Search ${size(_items.filter((item) => !item.divider))} items...`
+                  }
                   onClearClick={() => (onFilterChange ? onFilterChange('') : setQuery(''))}
                   {...inputProps}
                 />
@@ -195,6 +199,7 @@ const ReqoreDropdownList = memo(
                     <ReqoreDropdownItem
                       key={item.label || item.value || index}
                       {...item}
+                      disabled={'items' in item && !size(item.items) ? true : item.disabled}
                       onItemClick={handleItemClick}
                       scrollIntoView={scrollToSelected && item.selected && !multiSelect}
                     />

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -29,6 +29,8 @@ export interface IReqoreIconProps
   rounded?: boolean;
   rotation?: number;
   animation?: 'spin' | 'heartbeat';
+  interactive?: boolean;
+  compact?: boolean;
 }
 
 const SpinKeyframes = keyframes`
@@ -51,18 +53,23 @@ export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left'
 
   border-radius: ${({ rounded }) => (rounded ? '50%' : undefined)};
   rotate: ${({ rotation }) => (rotation ? `${rotation}deg` : undefined)};
+  cursor: ${({ interactive }) => (interactive ? 'pointer' : undefined)};
 
-  ${({ margin, size }) =>
+  ${({ margin, size, compact }) =>
     margin &&
     css`
       margin-left: ${margin === 'left' || margin === 'both'
         ? isStringSize(size)
-          ? `${PADDING_FROM_SIZE[size]}px`
+          ? `${PADDING_FROM_SIZE[size] / (compact ? 2 : 1)}px`
+          : compact
+          ? '3px'
           : '10px'
         : undefined};
       margin-right: ${margin === 'right' || margin === 'both'
         ? isStringSize(size)
-          ? `${PADDING_FROM_SIZE[size]}px`
+          ? `${PADDING_FROM_SIZE[size] / (compact ? 2 : 1)}px`
+          : compact
+          ? '3px'
           : '10px'
         : undefined};
     `}

diff --git a/src/components/Paragraph/index.tsx b/src/components/Paragraph/index.tsx
@@ -17,7 +17,8 @@ export interface IReqoreParagraphProps
 export const StyledParagraph = styled(StyledTextEffect)`
   padding: 0;
   margin: 0;
-  color: ${({ theme, intent }) => (intent ? theme.intents[intent] : 'inherit')};
+  color: ${({ theme, intent }) =>
+    intent ? theme.intents[intent] : theme.text?.color || 'inherit'};
   font-size: ${({ _size }) => (isStringSize(_size) ? `${TEXT_FROM_SIZE[_size]}px` : _size)};
 `;
 
@@ -29,6 +30,7 @@ export const ReqoreP = memo(
       <StyledParagraph
         as='p'
         theme={theme}
+        color={theme.text.color}
         intent={intent}
         {...props}
         _size={size}

diff --git a/src/components/Textarea/index.tsx b/src/components/Textarea/index.tsx
@@ -188,6 +188,8 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
         )}`;
 
         setValue(value);
+        // Trigger the onChange event
+        onChange?.({ target: { value } } as any);
       },
       [inputRef, _value]
     );
@@ -232,6 +234,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
           component={StyledTextareaWrapper}
           className={`${className || ''} reqore-control-wrapper`}
           width={width}
+          filterable
           height={height}
           fluid={fluid}
           fixed={fixed}

diff --git a/src/components/Tree/index.tsx b/src/components/Tree/index.tsx
@@ -1,17 +1,16 @@
 import { cloneDeep, size as lodashSize } from 'lodash';
 import { useMemo, useState } from 'react';
 import styled from 'styled-components';
-import { ReqoreMessage, ReqorePanel, useReqoreProperty } from '../..';
+import { ReqoreHorizontalSpacer, ReqoreIcon, ReqoreP, ReqorePanel, useReqoreProperty } from '../..';
 import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
-import { getTypeFromValue } from '../../helpers/utils';
+import { getOneLessSize, getTypeFromValue } from '../../helpers/utils';
 import { IWithReqoreSize } from '../../types/global';
-import ReqoreButton from '../Button';
+import ReqoreButton, { IReqoreButtonProps } from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
 import { ReqoreExportModal } from '../ExportModal';
 import { IReqorePanelAction, IReqorePanelProps } from '../Panel';
 import { getExportActions, getZoomActions, sizeToZoom, zoomToSize } from '../Table/helpers';
-import ReqoreTag from '../Tag';
 
 export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
   data: Record<string, unknown> | Array<any>;
@@ -33,8 +32,10 @@ export interface ITreeStyle {
   size?: TSizes;
 }
 
-export const StyledTreeLabel = styled(ReqoreMessage)`
+export const StyledTreeLabel = styled(ReqoreP)`
   flex-shrink: 1;
+
+  cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')};
 `;
 
 export const StyledTreeWrapper = styled.div<ITreeStyle>`
@@ -107,49 +108,68 @@ export const ReqoreTree = ({
         isExpandable = false;
       }
 
+      const badges: IReqoreButtonProps['badge'] = [`{...} ${lodashSize(data[key])} items`];
+
+      if (_showTypes) {
+        badges.push({
+          icon: 'CodeBoxFill',
+          label: dataType,
+        });
+      }
+
       return (
         <StyledTreeWrapper key={index} size={zoomToSize[zoom]} level={level}>
           {isObject ? (
             <ReqoreControlGroup size={zoomToSize[zoom]}>
+              {level !== 1 && <ReqoreHorizontalSpacer width={5} />}
               <ReqoreButton
+                compact
+                minimal
                 className='reqore-tree-toggle'
                 icon={isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill'}
                 intent={isExpandable ? 'info' : undefined}
                 onClick={() => handleItemClick(stateKey, isExpandable)}
-                flat
+                flat={false}
+                badge={badges}
               >
                 {displayKey}
               </ReqoreButton>
-              {_showTypes ? <ReqoreTag label={dataType} className='reqore-tree-type' /> : null}
             </ReqoreControlGroup>
           ) : (
-            <ReqoreControlGroup size={zoomToSize[zoom]} verticalAlign='flex-start'>
-              <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}
+            <ReqoreControlGroup verticalAlign='flex-start'>
+              {level !== 1 && <ReqoreHorizontalSpacer width={5} />}
+              <ReqoreP
+                customTheme={{ text: { color: 'info:lighten' } }}
+                style={{ flexShrink: 0 }}
+                size={zoomToSize[zoom]}
+              >
+                {displayKey}:
+              </ReqoreP>
+              {withLabelCopy && (
+                <ReqoreIcon
+                  interactive
+                  icon='ClipboardLine'
+                  size={getOneLessSize(zoomToSize[zoom])}
+                  onClick={() => {
+                    try {
+                      navigator.clipboard.writeText(JSON.stringify(data[key]));
+                      addNotification({
+                        content: 'Successfuly copied to clipboard',
+                        id: Date.now().toString(),
+                        type: 'success',
+                        duration: 3000,
+                      });
+                    } catch (e) {
+                      console.error(e);
+                    }
+                  }}
+                />
+              )}
               <StyledTreeLabel
                 flat
-                onClick={() => onItemClick(data[key], [...path, key])}
+                onClick={() => onItemClick?.(data[key], [...path, key])}
                 className='reqore-tree-label'
+                size={zoomToSize[zoom]}
               >
                 {JSON.stringify(data[key])}
               </StyledTreeLabel>

diff --git a/src/constants/colors.ts b/src/constants/colors.ts
@@ -4,7 +4,7 @@ export const Colors: Record<string, TReqoreHexColor> = {
   DARK: '#000000',
   DARK_THEME: '#333333',
   LIGHT: '#ffffff',
-  BLUE: '#0E5A8A',
+  BLUE: '#0776CB',
   GREEN: '#0A6640',
   YELLOW: '#d1a036',
   ORANGE: '#A66321',

diff --git a/src/stories/Button/Button.stories.tsx b/src/stories/Button/Button.stories.tsx
@@ -53,6 +53,13 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
         </ReqoreButton>
         <ReqoreButton {...buttonProps} rightIcon={undefined} compact />
         <ReqoreButton {...buttonProps} compact />
+        <ReqoreButton
+          {...buttonProps}
+          compact
+          icon='AirplayLine'
+          rightIcon='Building3Fill'
+          label='Compact'
+        />
         <ReqoreButton {...buttonProps} readOnly onClick={alert}>
           Read only
         </ReqoreButton>