@qoretechnologies/reqore 0.26.1 → 0.27.1

package/src/components/Panel/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { rgba } from 'polished';
-import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
+import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -40,7 +40,9 @@ export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreToolt
   label?: string | number;
   onClick?: () => void;
   actions?: IReqoreDropdownItem[];
-  customContent?: () => string | React.ReactNode;
+  // Custom react element
+  as?: React.ElementType;
+  props?: any;
 }
 
 export interface IReqorePanelBottomAction extends IReqorePanelAction {
@@ -175,7 +177,6 @@ export const StyledPanelBottomActions = styled(StyledPanelTitle)`
 
 export const StyledPanelContent = styled.div<IStyledPanel>`
   display: ${({ isCollapsed }) => (isCollapsed ? 'none' : undefined)};
-  min-height: ${({ isCollapsed }) => (isCollapsed ? undefined : '40px')};
   padding: ${({ padded, contentSize, noHorizontalPadding }) =>
     !padded
       ? undefined
@@ -184,7 +185,9 @@ export const StyledPanelContent = styled.div<IStyledPanel>`
       : `${TEXT_FROM_SIZE[contentSize]}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 }) => (minimal && hasLabel ? '0px' : undefined)};
+  padding-top: ${({ minimal, hasLabel, padded }) =>
+    minimal && hasLabel && padded ? '0px' : undefined};
+  padding-bottom: ${({ minimal, padded }) => (minimal && padded ? '10px' : undefined)};
   flex: 1;
   overflow: auto;
   font-size: ${({ contentSize }) => TEXT_FROM_SIZE[contentSize]}px;
@@ -229,7 +232,7 @@ export const ReqorePanel = forwardRef(
     ref
   ) => {
     const [_isCollapsed, setIsCollapsed] = useState(isCollapsed || false);
-    const theme = useReqoreTheme('main', customTheme, intent);
+    const theme = useReqoreTheme('main', customTheme);
     const { targetRef } = useCombinedRefs(ref);
 
     useTooltip(targetRef.current, tooltip);
@@ -279,7 +282,8 @@ export const ReqorePanel = forwardRef(
           label,
           intent,
           className,
-          customContent,
+          as: CustomElement,
+          props,
           ...rest
         }: IReqorePanelAction = actionOrActions;
 
@@ -292,14 +296,25 @@ export const ReqorePanel = forwardRef(
               items={actions}
               intent={intent}
               className={className}
+              customTheme={theme}
               onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
               id={id}
             />
           );
         }
 
-        if (customContent) {
-          return customContent();
+        if (CustomElement) {
+          return (
+            <CustomElement
+              {...props}
+              key={index}
+              customTheme={theme}
+              onClick={(e: React.MouseEvent<any>) => {
+                e.stopPropagation();
+                props?.onClick?.(e);
+              }}
+            />
+          );
         }
 
         return (
@@ -345,7 +360,18 @@ export const ReqorePanel = forwardRef(
         className={`${className || ''} reqore-panel`}
         interactive={interactive}
         theme={theme}
-        effect={contentEffect}
+        effect={
+          {
+            glow: intent
+              ? {
+                  color: intent,
+                  size: 2,
+                  useBorder: true,
+                }
+              : undefined,
+            ...contentEffect,
+          } as IReqoreEffect
+        }
       >
         {hasTitleBar && (
           <StyledPanelTitle
@@ -370,6 +396,7 @@ export const ReqorePanel = forwardRef(
               {typeof label === 'string' ? (
                 <ReqoreHeading
                   size={headerSize}
+                  customTheme={theme}
                   effect={{
                     noWrap: true,
                     ...headerEffect,

package/src/components/Spacer/index.tsx

@@ -4,4 +4,5 @@ export const ReqoreSpacer = styled.div`
   visibility: hidden;
   height: ${({ height }) => height || 1}px;
   width: ${({ width }) => width || 1}px;
+  flex-shrink: 0;
 `;

package/src/components/Tabs/index.tsx

@@ -59,7 +59,7 @@ const ReqoreTabs = ({
   _testWidth,
   vertical,
   activeTabIntent,
-  flat,
+  flat = true,
   size = 'normal',
   width,
   wrapTabNames,

package/src/components/Tabs/item.tsx

@@ -6,10 +6,11 @@ import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import { changeLightness } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
+import { IWithReqoreFlat } from '../../types/global';
 import ReqoreButton from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
 
-export interface IReqoreTabListItemProps extends IReqoreTabsListItem {
+export interface IReqoreTabListItemProps extends IReqoreTabsListItem, IWithReqoreFlat {
   active?: boolean;
   vertical?: boolean;
   onCloseClick?: any;
@@ -95,6 +96,8 @@ const ReqoreTabsListItem = memo(
         closeIcon,
         customTheme,
         className,
+        flat = true,
+        wrapTabNames,
       }: IReqoreTabListItemProps,
       ref
     ) => {
@@ -122,10 +125,11 @@ const ReqoreTabsListItem = memo(
           {label || icon ? (
             <ReqoreControlGroup stack size={size} fluid={fill || vertical}>
               <ReqoreButton
-                flat={!active && !intent}
+                flat={active || intent ? false : flat}
                 fluid={fill || vertical}
                 icon={icon}
                 minimal
+                wrap={wrapTabNames}
                 intent={active ? activeIntent || intent : intent}
                 active={active}
                 disabled={disabled}
@@ -139,7 +143,7 @@ const ReqoreTabsListItem = memo(
               {onCloseClick && !disabled ? (
                 <ReqoreButton
                   fixed
-                  flat={!active && !intent}
+                  flat={active || intent ? false : flat}
                   icon={closeIcon || 'CloseLine'}
                   intent={active ? activeIntent || intent : intent}
                   minimal

package/src/components/Tabs/list.tsx

@@ -245,6 +245,7 @@ const ReqoreTabsList = ({
                 {...item}
                 fill={fill}
                 size={size}
+                flat={flat}
                 activeIntent={activeTabIntent}
                 customTheme={theme}
                 wrapTabNames={wrapTabNames}

package/src/components/Tag/index.tsx

@@ -4,6 +4,7 @@ import React, { forwardRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { ReqorePopover } from '../..';
 import {
+  BADGE_SIZE_TO_PX,
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   SIZE_TO_PX,
@@ -65,9 +66,9 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   overflow: hidden;
   vertical-align: middle;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
-  height: ${({ size }) => SIZE_TO_PX[size]}px;
+  height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  border-radius: ${({ badge, size }) => (badge ? 20 : RADIUS_FROM_SIZE[size])}px;
+  border-radius: ${({ badge, size }) => (badge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 

package/src/constants/animations.ts

@@ -2,3 +2,8 @@ export const SPRING_CONFIG = {
   tension: 120,
   friction: 20,
 };
+
+export const SPRING_CONFIG_NO_ANIMATIONS = {
+  tension: 0,
+  friction: 0,
+};

package/src/constants/sizes.ts

@@ -1,6 +1,22 @@
 export type TSizes = 'tiny' | 'small' | 'normal' | 'big' | 'huge';
 export type TWeights = 'soft' | 'normal' | 'heavy';
 
+export const SIZE_TO_NUMBER = {
+  tiny: 1,
+  small: 2,
+  normal: 3,
+  big: 4,
+  huge: 5,
+};
+
+export const NUMBER_TO_SIZE = {
+  1: 'tiny',
+  2: 'small',
+  3: 'normal',
+  4: 'big',
+  5: 'huge',
+};
+
 export const SIZE_TO_PX = {
   tiny: 10,
   small: 20,
@@ -9,6 +25,14 @@ export const SIZE_TO_PX = {
   huge: 50,
 };
 
+export const BADGE_SIZE_TO_PX = {
+  tiny: 10,
+  small: 17,
+  normal: 23,
+  big: 30,
+  huge: 36,
+};
+
 export const TABS_SIZE_TO_PX = {
   tiny: 20,
   small: 30,

package/src/containers/ReqoreProvider.tsx

@@ -121,7 +121,7 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options }) =
           isTablet,
           isMobileOrTablet,
           getAndIncreaseZIndex,
-          animations: options?.animations || { buttons: true },
+          animations: options?.animations || { buttons: true, dialogs: true },
         }}
       >
         {size(notifications) > 0 ? (

package/src/containers/UIProvider.tsx

@@ -16,6 +16,7 @@ export interface IReqoreOptions {
   uiScale?: number;
   animations?: {
     buttons?: boolean;
+    dialogs?: boolean;
   };
 }
 export interface IReqoreUIProviderProps {

package/src/context/ReqoreContext.tsx

@@ -21,5 +21,6 @@ export default createContext<IReqoreContext>({
   removeNotification: null,
   animations: {
     buttons: true,
+    dialogs: true,
   },
 });

package/src/helpers/colors.ts

@@ -140,3 +140,18 @@ export const getNotificationIntent = (theme: IReqoreTheme, intent?: TReqoreInten
 
 export const getMainBackgroundColor = (theme: IReqoreTheme): string =>
   changeLightness(theme.main, 0.02);
+
+export const getColorFromMaybeIntentOrString = (
+  theme: IReqoreTheme,
+  intent: TReqoreIntent | string
+): string => {
+  if (theme.intents[intent]) {
+    return theme.intents[intent];
+  }
+
+  if (isValidSixCharHex(intent)) {
+    return intent;
+  }
+
+  return theme.main;
+};

package/src/helpers/utils.ts

@@ -8,6 +8,7 @@ import {
   isString,
   isUndefined,
 } from 'lodash';
+import { NUMBER_TO_SIZE, SIZE_TO_NUMBER, TSizes } from '../constants/sizes';
 
 export const sleep = async (ms: number) => await new Promise((r) => setTimeout(r, ms));
 
@@ -73,3 +74,12 @@ export const calculateStringSizeInPixels = (value: string = '', fontSize: number
     Array.from(value).reduce((acc, cur) => acc + (widths[cur.charCodeAt(0)] ?? avg), 0) * fontSize
   );
 };
+
+export const getOneLessSize = (size: TSizes): TSizes => {
+  // Get the initial sizes number
+  const initialSizeNumber: number = SIZE_TO_NUMBER[size];
+  // Reduce the size number by one
+  const oneLessSizeNumber: number = initialSizeNumber - 1 === 0 ? 1 : initialSizeNumber - 1;
+  // Get the size name from the number
+  return NUMBER_TO_SIZE[oneLessSizeNumber];
+};

package/src/mock/collectionData.tsx

@@ -178,7 +178,7 @@ export default [
   {
     label: 'I have intent!',
     content: (
-      <p>
+      <ReqoreP>
         'Well would you look at that. Lorem ipsum dolor{' '}
         <ReqoreTag label='dolor' icon='Briefcase3Line' /> <ReqoreTag label='sit amet' />,
         consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
@@ -220,7 +220,7 @@ export default [
         nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci
         luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero.
         Phasellus dolor. Maecenas vestibulum mollis'
-      </p>
+      </ReqoreP>
     ),
     expandable: true,
     intent: 'info',

package/src/stories/Button/Button.stories.tsx

@@ -1,7 +1,8 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { noop } from 'lodash';
 import ReqoreButton from '../../components/Button';
 import { ReqoreControlGroup } from '../../index';
-import { IconArg } from '../utils/args';
+import { IconArg, SizeArg } from '../utils/args';
 
 export default {
   title: 'Components/Button',
@@ -11,6 +12,7 @@ export default {
   argTypes: {
     ...IconArg('icon', 'Icon'),
     ...IconArg('rightIcon', 'Right Icon'),
+    ...SizeArg,
   },
 } as ComponentMeta<typeof ReqoreButton>;
 
@@ -18,7 +20,12 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
   return (
     <>
       <ReqoreControlGroup size={buttonProps.size}>
+        <ReqoreButton {...buttonProps} icon='BankFill' rightIcon={null} />
+        <ReqoreButton {...buttonProps} />
         <ReqoreButton {...buttonProps}>Default</ReqoreButton>
+        <ReqoreButton {...buttonProps} wrap maxWidth='150px'>
+          Default wrapped button with long text
+        </ReqoreButton>
         <ReqoreButton {...buttonProps} disabled>
           Disabled
         </ReqoreButton>
@@ -37,6 +44,23 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} readOnly onClick={alert}>
           Read only
         </ReqoreButton>
+        <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
+          With Badge
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          badge={{
+            effect: {
+              gradient: { colors: { 0: '#00fafd', 100: '#eb0e8c' }, direction: 'to right bottom' },
+            },
+            labelKey: 'Cool',
+            label: 1234,
+            actions: [{ icon: 'ShuffleLine', onClick: noop }],
+          }}
+          onClick={alert}
+        >
+          With modified Badge
+        </ReqoreButton>
       </ReqoreControlGroup>
       <br />
       <ReqoreControlGroup fluid>
@@ -44,6 +68,50 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
           Fluid button
         </ReqoreButton>
       </ReqoreControlGroup>
+      <br />
+      <ReqoreControlGroup>
+        <ReqoreButton
+          {...buttonProps}
+          description='This is a very interesting description for a button, I like it very much'
+        >
+          With Default Description
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          description='This is a very interesting description for a button, I like it very much'
+          maxWidth='200px'
+          badge={{
+            color: '#00fafd',
+            labelKey: 'Cool',
+            label: 1234,
+            actions: [{ icon: 'ShuffleLine', onClick: noop }],
+          }}
+        >
+          With description and max width
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          description='This is a very interesting description for a button, I like it very much'
+          maxWidth='200px'
+          badge={{
+            effect: {
+              gradient: { colors: { 0: '#00fafd', 130: '#eb0e8c' }, direction: 'to right bottom' },
+              uppercase: true,
+            },
+            labelKey: 'Cool',
+            label: 1234,
+            actions: [{ icon: 'ShuffleLine', onClick: noop }],
+          }}
+          wrap
+        >
+          With description and max width, wrapped
+        </ReqoreButton>
+        <ReqoreButton
+          {...buttonProps}
+          description='This is a very interesting description for a button, I like it very much'
+          wrap
+        />
+      </ReqoreControlGroup>
     </>
   );
 };

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

@@ -55,6 +55,8 @@ export default {
         {
           value: 'How are ya',
           icon: 'BatteryChargeFill',
+          description:
+            "Yep, and the description is now also available and possible, isn't that great?",
         },
         {
           disabled: true,

package/src/stories/Menu/Menu.stories.tsx

@@ -2,7 +2,7 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreMenuProps } from '../../components/Menu';
 import { IReqoreMenuItemProps } from '../../components/Menu/item';
 import { ReqoreMenu, ReqoreMenuDivider, ReqoreMenuItem, ReqorePopover } from '../../index';
-import { argManager, IntentArg } from '../utils/args';
+import { IntentArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreMenuProps>();
 
@@ -28,7 +28,7 @@ export default {
       },
     }),
     ...createArg('wrapText', {
-      defaultValue: true,
+      defaultValue: false,
       name: 'Wrap text',
       control: {
         type: 'boolean',
@@ -59,30 +59,49 @@ const Template: Story<IReqoreMenuProps> = (args) => {
         Delete
       </ReqoreMenuItem>
 
-      <ReqoreMenuItem icon='Lock2Fill'>This is a really long item that should wrap</ReqoreMenuItem>
+      <ReqoreMenuItem icon='Lock2Fill' description='I also have a description'>
+        This is a really long item that should wrap
+      </ReqoreMenuItem>
       <ReqoreMenuItem icon='Lock2Fill' disabled>
         Disabled
       </ReqoreMenuItem>
       <ReqoreMenuItem icon='Lock2Fill' disabled intent='warning'>
         Disabled intent
       </ReqoreMenuItem>
-      <ReqoreMenuDivider />
+      <ReqoreMenuDivider label='Divider' />
       <ReqorePopover
         component={ReqoreMenuItem}
         componentProps={
           {
             icon: 'EmotionUnhappyLine',
             rightIcon: 'Scissors2Fill',
+            wrap: args.wrapText,
+            flat: args.flat,
           } as IReqoreMenuItemProps
         }
+        openOnMount
         content={
           <ReqoreMenu {...args}>
             <ReqoreMenuItem icon='ZhihuFill'>Item 1</ReqoreMenuItem>
-            <ReqoreMenuItem icon='AccountCircleFill'>Item 2</ReqoreMenuItem>
+            <ReqoreMenuItem
+              icon='AccountCircleFill'
+              description='Would you look at that beautiful description'
+              intent='warning'
+            >
+              Item 2
+            </ReqoreMenuItem>
             <ReqoreMenuItem icon='AnticlockwiseFill' disabled>
               Item 3
             </ReqoreMenuItem>
-            <ReqoreMenuItem icon='ArchiveFill'>Item 4</ReqoreMenuItem>
+            <ReqoreMenuItem
+              icon='ArchiveFill'
+              badge={{
+                label: '10',
+                effect: { gradient: { colors: { 0: '#00e3e8', 100: '#eb0e8c' } } },
+              }}
+            >
+              Item 4
+            </ReqoreMenuItem>
           </ReqoreMenu>
         }
         isReqoreComponent
@@ -91,7 +110,10 @@ const Template: Story<IReqoreMenuProps> = (args) => {
       >
         I have a submenu on click
       </ReqorePopover>
-      <ReqoreMenuDivider label='Divider' />
+      <ReqoreMenuDivider
+        label='Fancy divider'
+        effect={{ textAlign: 'left', gradient: { colors: { 0: '#0d5ba5', 100: '#ff5dfd' } } }}
+      />
       <ReqoreMenuItem icon='DualSim1Line' rightIcon='MoneyEuroBoxLine' selected>
         I am selected!
       </ReqoreMenuItem>
@@ -106,6 +128,8 @@ const Template: Story<IReqoreMenuProps> = (args) => {
             },
           },
         }}
+        description='I also have a description'
+        badge={10}
       >
         Fancy
       </ReqoreMenuItem>
@@ -116,5 +140,9 @@ const Template: Story<IReqoreMenuProps> = (args) => {
 export const Basic = Template.bind({});
 export const WrappedText = Template.bind({});
 WrappedText.args = {
-  wrapText: false,
+  wrapText: true,
+};
+export const NotFlat = Template.bind({});
+NotFlat.args = {
+  flat: false,
 };

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 ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { IReqorePanelProps, ReqorePanel } from '../../components/Panel';
-import { argManager, FlatArg, IconArg, IntentArg } from '../utils/args';
+import { FlatArg, IconArg, IntentArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
 
@@ -67,9 +67,12 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
           { label: 'Stacked Action 2', icon: 'CopperCoinFill', intent: 'danger' },
         ],
         {
-          customContent: () => (
-            <ReqoreInput placeholder={`Custom action!`} icon='Search2Line' minimal={false} />
-          ),
+          as: ReqoreInput,
+          props: {
+            placeholder: 'Custom action!',
+            icon: 'Search2Line',
+            minimal: false,
+          } as IReqoreInputProps,
         },
         {
           label: 'More actions',

package/src/stories/Tabs/Tabs.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreTabsProps } from '../../components/Tabs';
 import { ReqoreTabs, ReqoreTabsContent } from '../../index';
-import { argManager, FlatArg, IntentArg, SizeArg } from '../utils/args';
+import { argManager, IntentArg, SizeArg } from '../utils/args';
 
 const tabs = [
   {
@@ -74,9 +74,14 @@ const { createArg } = argManager<IReqoreTabsProps>();
 export default {
   title: 'Components/Tabs',
   argTypes: {
-    ...FlatArg,
     ...SizeArg,
     ...IntentArg,
+    ...createArg('flat', {
+      type: 'boolean',
+      defaultValue: true,
+      name: 'Flat',
+      description: 'Whether the tabs should be flat or not',
+    }),
     ...createArg('fill', {
       type: 'boolean',
       defaultValue: false,
@@ -227,7 +232,7 @@ VerticalCustomWidth.args = {
   width: '300px',
 };
 
-export const Flat = Template.bind({});
-Flat.args = {
-  flat: true,
+export const NotFlat = Template.bind({});
+NotFlat.args = {
+  flat: false,
 };