@qoretechnologies/reqore 0.26.0 → 0.27.0

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/components/Tree/index.tsx

@@ -30,6 +30,10 @@ export interface ITreeStyle {
   theme: IReqoreTheme;
 }
 
+export const StyledTreeLabel = styled(ReqoreMessage)`
+  flex-shrink: 1;
+`;
+
 export const ReqoreTree = ({
   data,
   mode = 'tree',
@@ -135,13 +139,13 @@ export const ReqoreTree = ({
                 }
               />
               {_showTypes ? <ReqoreTag className='reqore-tree-type' label={dataType} /> : null}
-              <ReqoreMessage
+              <StyledTreeLabel
                 flat
                 onClick={() => onItemClick(data[key], [...path, key])}
                 className='reqore-tree-label'
               >
                 {JSON.stringify(data[key])}
-              </ReqoreMessage>
+              </StyledTreeLabel>
             </ReqoreControlGroup>
           )}
           {isExpandable && isObject

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

@@ -109,8 +109,6 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options }) =
     });
   };
 
-  console.log(options);
-
   return (
     <>
       <ReqoreContext.Provider
@@ -123,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 {
@@ -35,8 +36,6 @@ const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, o
   const _defaultTheme: IReqoreTheme = cloneDeep(DEFAULT_THEME);
   const rebuiltTheme: IReqoreTheme = buildTheme(merge(_defaultTheme, _theme));
 
-  console.log(options);
-
   return (
     <>
       <ThemeContext.Provider value={{ ...rebuiltTheme }}>

package/src/context/ReqoreContext.tsx

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

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/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>
@@ -31,9 +38,29 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} minimal>
           Minimal
         </ReqoreButton>
+        <ReqoreButton {...buttonProps} minimal flat>
+          Minimal flat
+        </ReqoreButton>
         <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>
@@ -41,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/Menu/Menu.stories.tsx

@@ -28,7 +28,7 @@ export default {
       },
     }),
     ...createArg('wrapText', {
-      defaultValue: true,
+      defaultValue: false,
       name: 'Wrap text',
       control: {
         type: 'boolean',
@@ -59,7 +59,9 @@ 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>
@@ -73,16 +75,33 @@ const Template: Story<IReqoreMenuProps> = (args) => {
           {
             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
@@ -106,6 +125,8 @@ const Template: Story<IReqoreMenuProps> = (args) => {
             },
           },
         }}
+        description='I also have a description'
+        badge={10}
       >
         Fancy
       </ReqoreMenuItem>
@@ -116,5 +137,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/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,
 };

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

@@ -47,7 +47,6 @@ export default {
           icon: 'SpyFill',
           onClick: noop,
           intent: 'success',
-          tooltip: { content: 'Hm, another tooltip', openOnMount: true },
         },
       ],
       table: {
@@ -60,7 +59,17 @@ export default {
 const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }) => {
   return (
     <ReqoreTagGroup columns={columns} size={args.size}>
-      <ReqoreTag label='Basic Tag' icon='AlarmWarningLine' {...args} />
+      <ReqoreTag {...args} actions={null} onRemoveClick={null} rightIcon={null} label={1} />
+      <ReqoreTag {...args} actions={null} onRemoveClick={null} rightIcon={null} label='Basic Tag' />
+      <ReqoreTag
+        {...args}
+        actions={null}
+        onRemoveClick={null}
+        rightIcon={null}
+        labelKey='Number'
+        label={2}
+      />
+      <ReqoreTag label='With Icon' icon='AlarmWarningLine' {...args} />
       <ReqoreTag labelKey='Tag with' label='Label Key' icon='AlarmWarningLine' {...args} />
       <ReqoreTag labelKey='Key' label='value' {...args} />
       <ReqoreTag icon='QuestionAnswerLine' {...args} />
@@ -71,10 +80,39 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
         icon='AlarmWarningLine'
         {...args}
         tooltip='I am wiiiiiiide'
+        actions={[
+          {
+            icon: '24HoursFill',
+            onClick: noop,
+            disabled: true,
+            intent: 'info',
+            tooltip: { content: 'I am a tooltip' },
+          },
+          {
+            icon: 'SpyFill',
+            onClick: noop,
+            intent: 'success',
+            tooltip: { content: 'Hm, another tooltip', openOnMount: true },
+          },
+        ]}
       />
       <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} />
+      <ReqoreTag
+        label='Custom Color Tag'
+        icon='AlarmWarningLine'
+        color='#38fdb2'
+        {...args}
+        tooltip={{ content: 'Hm, another tooltip', openOnMount: true }}
+      />
+      <ReqoreTag
+        {...args}
+        label='No Buttons Tag'
+        icon='CarLine'
+        color='#0b4578'
+        rightIcon={args.rightIcon}
+        actions={null}
+        onRemoveClick={null}
+      />
     </ReqoreTagGroup>
   );
 };