Bump version to 0.48.23, enable DeepScan, and enhance ReqoreIcon and …

…ReqorePanel components with new margin and description features
qoretechnologies · Dec 16, 2024 · ccfb325 · ccfb325
1 parent 4ed7788
commit ccfb325
Show file tree

Hide file tree

Showing 8 changed files with 311 additions and 197 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "deepscan.enable": true
 }
diff --git a/build-storybook.log b/build-storybook.log
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.48.22",
+  "version": "0.48.23",
   "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
@@ -357,10 +357,11 @@ export interface IReqoreButtonBadgeProps extends IWithReqoreSize {
   wrapGroup?: boolean;
   compact?: boolean;
   active?: boolean;
+  margin?: 'left' | 'none';
 }
 
 export const ButtonBadge = memo(
-  ({ wrapGroup, compact, active, ...props }: IReqoreButtonBadgeProps) => {
+  ({ wrapGroup, compact, active, margin = 'left', ...props }: IReqoreButtonBadgeProps) => {
     const renderTag = useCallback(
       ({ size, color, theme, content, key }: IReqoreButtonBadgeProps & { key: number }) => (
         <ReqoreTag
@@ -418,10 +419,12 @@ export const ButtonBadge = memo(
 
     return (
       <>
-        <ReqoreSpacer
-          width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / (compact ? 2 : 1)}
-          height={!props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / 2}
-        />
+        {margin === 'left' && (
+          <ReqoreSpacer
+            width={props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / (compact ? 2 : 1)}
+            height={!props.wrap ? undefined : PADDING_FROM_SIZE[props.size] / 2}
+          />
+        )}
         {size(leftBadges) ? (
           <ReqoreTagGroup wrap={wrapGroup} align='left'>
             {leftBadges.map((badge, index) =>

diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx
@@ -24,7 +24,10 @@ export interface IReqoreIconProps
   wrapperSize?: TSizes | string;
   wrapperElement?: any;
   iconProps?: IconBaseProps;
+
   margin?: 'right' | 'left' | 'both';
+  marginSize?: TSizes | string | number;
+
   image?: string;
   rounded?: boolean;
   rotation?: number;
@@ -55,18 +58,22 @@ export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left'
   rotate: ${({ rotation }) => (rotation ? `${rotation}deg` : undefined)};
   cursor: ${({ interactive }) => (interactive ? 'pointer' : undefined)};
 
-  ${({ margin, size, compact }) =>
+  ${({ margin, marginSize, size, compact }) =>
     margin &&
     css`
       margin-left: ${margin === 'left' || margin === 'both'
-        ? isStringSize(size)
+        ? marginSize
+          ? `${marginSize}px`
+          : isStringSize(size)
           ? `${PADDING_FROM_SIZE[size] / (compact ? 2 : 1)}px`
           : compact
           ? '3px'
           : '6px'
         : undefined};
       margin-right: ${margin === 'right' || margin === 'both'
-        ? isStringSize(size)
+        ? marginSize
+          ? `${marginSize}px`
+          : isStringSize(size)
           ? `${PADDING_FROM_SIZE[size] / (compact ? 2 : 1)}px`
           : compact
           ? '3px'
@@ -95,7 +102,10 @@ const ReqoreIcon = memo(
         wrapperElement,
         className,
         color,
+
         margin,
+        marginSize,
+
         style = {},
         iconProps,
         intent,
@@ -118,6 +128,9 @@ const ReqoreIcon = memo(
           ? ICON_FROM_SIZE[wrapperSize]
           : wrapperSize
         : finalSize;
+      const finalMarginSize: number = isStringSize(marginSize)
+        ? PADDING_FROM_SIZE[marginSize]
+        : marginSize;
 
       useTooltip(iconRef, tooltip);
 
@@ -129,6 +142,7 @@ const ReqoreIcon = memo(
             ref={targetRef}
             size={size}
             margin={margin}
+            marginSize={finalMarginSize}
             className={`${className || ''} reqore-icon`}
             style={{ width: finalWrapperSize, height: finalWrapperSize, ...style }}
           >
@@ -145,6 +159,7 @@ const ReqoreIcon = memo(
             ref={targetRef}
             size={size}
             margin={margin}
+            marginSize={finalMarginSize}
             className={`${className || ''} reqore-icon`}
             style={{ width: finalWrapperSize, height: finalWrapperSize, ...style }}
           />
@@ -161,6 +176,7 @@ const ReqoreIcon = memo(
           }}
           margin={margin}
           size={size}
+          marginSize={finalMarginSize}
           style={{ width: finalWrapperSize, height: finalWrapperSize, ...style }}
           className={`${className || ''} reqore-icon`}
         >

diff --git a/src/components/Panel/index.tsx b/src/components/Panel/index.tsx
@@ -10,13 +10,14 @@ import {
   GAP_FROM_SIZE,
   HEADER_SIZE_TO_NUMBER,
   ICON_FROM_HEADER_SIZE,
+  NUMBER_TO_SIZE,
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   SIZE_TO_PX,
   TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
-import { IReqoreTheme } from '../../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import {
   changeDarkness,
   changeLightness,
@@ -47,6 +48,7 @@ import ReqoreDropdown from '../Dropdown';
 import { IReqoreDropdownItem } from '../Dropdown/list';
 import { IReqoreEffect, StyledEffect, TReqoreEffectColor } from '../Effect';
 import ReqoreIcon, { IReqoreIconProps, StyledIconWrapper } from '../Icon';
+import { ReqoreSpan } from '../Span';
 import { LabelEditor } from './LabelEditor';
 import { ReqorePanelNonResponsiveActions } from './NonResponsiveActions';
 
@@ -86,10 +88,13 @@ export interface IReqorePanelProps
     React.HTMLAttributes<HTMLDivElement> {
   as?: any;
   children?: any;
+
   icon?: IReqoreIconName;
   iconProps?: IReqoreIconProps;
   label?: string | ReactElement<any>;
   badge?: TReqoreBadge | TReqoreBadge[];
+  description?: string;
+
   collapsible?: boolean;
   isCollapsed?: boolean;
   collapseButtonProps?: IReqoreButtonProps;
@@ -121,6 +126,8 @@ export interface IReqorePanelProps
   contentSize?: TSizes;
   contentEffect?: IReqoreEffect;
   headerEffect?: IReqoreEffect;
+  descriptionEffect?: IReqoreEffect;
+  descriptionIntent?: TReqoreIntent;
   transparent?: boolean;
   iconColor?: TReqoreEffectColor;
   responsiveActions?: boolean;
@@ -164,6 +171,19 @@ export const StyledPanelTitleHeaderContent = styled.div`
   }}px;
 `;
 
+export const StyledPanelTitleHeaderLabelAndDescription = styled.div`
+  display: flex;
+  flex-flow: column;
+  gap: 3px;
+  min-width: 0;
+  flex: 1 auto;
+`;
+
+export const StyledPanelTitleHeaderLabelAndBadge = styled.div`
+  display: inline-flex;
+  max-width: 100%;
+`;
+
 export type TPanelStyle = React.FC<
   Omit<IReqorePanelProps, 'onResize' | 'size'> &
     ResizableProps & {
@@ -347,6 +367,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
     {
       children,
       label,
+      description,
       collapseButtonProps = {},
       collapsible,
       onClose,
@@ -367,6 +388,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       contentStyle,
       contentEffect,
       headerEffect = {},
+      descriptionEffect = {},
+      descriptionIntent,
       headerSize,
       contentSize,
       minimal,
@@ -764,30 +787,44 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                         }
                       />
                     ) : null}
-                    {typeof label === 'string' ? (
-                      <LabelEditor
-                        size={headerSize || panelSize}
-                        customTheme={theme}
-                        effect={{
-                          noWrap: true,
-                          ...headerEffect,
-                        }}
-                        label={label}
-                        onSubmit={onLabelEdit}
-                        tooltip={showHeaderTooltip ? label : undefined}
-                      />
-                    ) : (
-                      label
-                    )}
+                    <StyledPanelTitleHeaderLabelAndDescription>
+                      <StyledPanelTitleHeaderLabelAndBadge>
+                        {typeof label === 'string' ? (
+                          <LabelEditor
+                            size={headerSize || panelSize}
+                            customTheme={theme}
+                            effect={{
+                              noWrap: true,
+                              ...headerEffect,
+                            }}
+                            label={label}
+                            onSubmit={onLabelEdit}
+                            tooltip={showHeaderTooltip ? label : undefined}
+                          />
+                        ) : (
+                          label
+                        )}
+                        {badge || badge === 0 ? (
+                          <ButtonBadge
+                            size={getOneHigherSize(panelSize)}
+                            content={badge}
+                            wrapGroup={isSmall}
+                            margin={label ? 'left' : 'none'}
+                          />
+                        ) : null}
+                      </StyledPanelTitleHeaderLabelAndBadge>
+                      {description && (
+                        <ReqoreSpan
+                          size={headerSize ? NUMBER_TO_SIZE[headerSize] : panelSize}
+                          effect={{ opacity: 0.7, ...descriptionEffect }}
+                          intent={descriptionIntent}
+                        >
+                          {description}
+                        </ReqoreSpan>
+                      )}
+                    </StyledPanelTitleHeaderLabelAndDescription>
                   </StyledPanelTitleHeaderContent>
                 ) : null}
-                {badge || badge === 0 ? (
-                  <ButtonBadge
-                    size={getOneHigherSize(panelSize)}
-                    content={badge}
-                    wrapGroup={isSmall}
-                  />
-                ) : null}
                 <ReqorePanelNonResponsiveActions
                   show={isSmall && (!!onClose || collapsible)}
                   isSmall={isSmall}

diff --git a/src/stories/Icon/Icon.stories.tsx b/src/stories/Icon/Icon.stories.tsx
@@ -155,6 +155,16 @@ export const Basic: Story = {
             <ReqoreIcon icon='HotelFill' margin='both' />
             Sides
           </div>
+          <div>
+            Huge
+            <ReqoreIcon icon='HotelFill' margin='both' marginSize={50} />
+            Margins
+          </div>
+          <div>
+            Tiny
+            <ReqoreIcon icon='HotelFill' margin='both' marginSize='tiny' />
+            Margins
+          </div>
         </ReqorePanel>
       </>
     );

diff --git a/src/stories/Panel/Panel.stories.tsx b/src/stories/Panel/Panel.stories.tsx
@@ -761,3 +761,26 @@ export const Loading: Story = {
     loading: true,
   },
 };
+
+export const WithDescription: Story = {
+  render: Template,
+
+  args: {
+    description: 'This is a description',
+  },
+};
+
+export const WithLongDescription: Story = {
+  render: Template,
+
+  args: {
+    minimal: true,
+    descriptionIntent: 'info',
+    descriptionEffect: {
+      uppercase: true,
+      textSize: 'small',
+    },
+    description:
+      'This is a very long description that should be wrapped and not overflow, but it should be long enough to test the wrapping',
+  },
+};