@qoretechnologies/reqore 0.25.9 → 0.26.0

package/src/components/Tabs/item.tsx

@@ -1,8 +1,9 @@
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem } from '.';
 import { TABS_PADDING_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
+import { changeLightness } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import ReqoreButton from '../Button';
@@ -37,7 +38,16 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
       padding: ${vertical ? `${TABS_PADDING_TO_PX[size!]}px` : `${TABS_PADDING_TO_PX[size!]}px`};
       ${active &&
       css`
-        background-color: ${activeColor}60;
+        &:after {
+          width: ${vertical ? '5px' : '1px'};
+          height: ${vertical ? '1px' : '5px'};
+          left: ${vertical ? '0' : '50%'};
+          top: ${vertical ? '50%' : undefined};
+          bottom: ${vertical ? undefined : '0'};
+          content: '';
+          position: absolute;
+          background-color: ${activeColor};
+        }
       `}
 
       ${fill &&
@@ -64,87 +74,90 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
   }
 `;
 
-const ReqoreTabsListItem = forwardRef(
-  (
-    {
-      tooltip,
-      label,
-      props,
-      icon,
-      active,
-      as,
-      disabled,
-      vertical,
-      onClick,
-      activeIntent,
-      onCloseClick,
-      fill,
-      intent,
-      size = 'normal',
-      closeIcon,
-      customTheme,
-      className,
-    }: IReqoreTabListItemProps,
-    ref
-  ) => {
-    const { targetRef } = useCombinedRefs(ref);
-    const theme = useReqoreTheme('main', customTheme);
-    const _intent = activeIntent || intent;
-    const activeColor = _intent ? theme.intents[_intent] : theme.main;
+const ReqoreTabsListItem = memo(
+  forwardRef(
+    (
+      {
+        tooltip,
+        label,
+        props,
+        icon,
+        active,
+        as,
+        disabled,
+        vertical,
+        onClick,
+        activeIntent,
+        onCloseClick,
+        fill,
+        intent,
+        size = 'normal',
+        closeIcon,
+        customTheme,
+        className,
+      }: IReqoreTabListItemProps,
+      ref
+    ) => {
+      const { targetRef } = useCombinedRefs(ref);
+      const theme = useReqoreTheme('main', customTheme);
+      const _intent = activeIntent || intent;
+      const activeColor = _intent ? theme.intents[_intent] : changeLightness(theme.main, 0.05);
 
-    return (
-      <StyledTabListItem
-        ref={targetRef}
-        {...props}
-        className={className}
-        intent={intent}
-        activeIntent={activeIntent}
-        activeColor={activeColor}
-        as={as}
-        size={size}
-        active={active}
-        disabled={disabled}
-        vertical={vertical}
-        theme={theme}
-        fill={fill}
-      >
-        {label || icon ? (
-          <ReqoreControlGroup stack size={size} fluid={fill || vertical}>
-            <ReqoreButton
-              flat
-              fluid={fill || vertical}
-              icon={icon}
-              minimal
-              intent={active ? activeIntent || intent : intent}
-              active={active}
-              disabled={disabled}
-              onClick={onClick}
-              tooltip={tooltip}
-              customTheme={customTheme}
-              className={`reqore-tabs-list-item ${active ? 'reqore-tabs-list-item-active' : ''}`}
-            >
-              {label}
-            </ReqoreButton>
-            {onCloseClick && !disabled ? (
+      return (
+        <StyledTabListItem
+          ref={targetRef}
+          {...props}
+          className={className}
+          intent={intent}
+          activeIntent={activeIntent}
+          activeColor={activeColor}
+          as={as}
+          size={size}
+          active={active}
+          disabled={disabled}
+          vertical={vertical}
+          theme={theme}
+          fill={fill}
+        >
+          {label || icon ? (
+            <ReqoreControlGroup stack size={size} fluid={fill || vertical}>
               <ReqoreButton
-                fixed
-                flat
-                icon={closeIcon || 'CloseLine'}
-                intent={active ? activeIntent || intent : intent}
+                flat={!active && !intent}
+                fluid={fill || vertical}
+                icon={icon}
                 minimal
-                className='reqore-tabs-list-item-close'
+                intent={active ? activeIntent || intent : intent}
+                active={active}
+                disabled={disabled}
+                onClick={onClick}
+                tooltip={tooltip}
                 customTheme={customTheme}
-                onClick={(event) => {
-                  event.stopPropagation();
-                  onCloseClick?.();
-                }}
-              />
-            ) : null}
-          </ReqoreControlGroup>
-        ) : null}
-      </StyledTabListItem>
-    );
-  }
+                className={`reqore-tabs-list-item ${active ? 'reqore-tabs-list-item-active' : ''}`}
+              >
+                {label}
+              </ReqoreButton>
+              {onCloseClick && !disabled ? (
+                <ReqoreButton
+                  fixed
+                  flat={!active && !intent}
+                  icon={closeIcon || 'CloseLine'}
+                  intent={active ? activeIntent || intent : intent}
+                  minimal
+                  active={active}
+                  className='reqore-tabs-list-item-close'
+                  customTheme={customTheme}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onCloseClick?.();
+                  }}
+                />
+              ) : null}
+            </ReqoreControlGroup>
+          ) : null}
+        </StyledTabListItem>
+      );
+    }
+  )
 );
 
 export default ReqoreTabsListItem;

package/src/components/Tag/index.tsx

@@ -1,4 +1,5 @@
 import _size from 'lodash/size';
+import { rgba } from 'polished';
 import React, { forwardRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { ReqorePopover } from '../..';
@@ -14,8 +15,14 @@ import ThemeContext from '../../context/ThemeContext';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useTooltip } from '../../hooks/useTooltip';
-import { IReqoreDisabled, IReqoreIntent, IWithReqoreTooltip } from '../../types/global';
+import {
+  IReqoreDisabled,
+  IReqoreIntent,
+  IWithReqoreEffect,
+  IWithReqoreTooltip,
+} from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { StyledEffect } from '../Effect';
 import ReqoreIcon from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
@@ -26,7 +33,8 @@ export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, I
 export interface IReqoreTagProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
     IWithReqoreTooltip,
-    IReqoreDisabled {
+    IReqoreDisabled,
+    IWithReqoreEffect {
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -47,7 +55,7 @@ export interface IReqoreTagStyle extends IReqoreTagProps {
   interactive?: boolean;
 }
 
-export const StyledTag = styled.div<IReqoreTagStyle>`
+export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   display: inline-flex;
   justify-content: center;
   flex-shrink: 0;
@@ -55,6 +63,7 @@ export const StyledTag = styled.div<IReqoreTagStyle>`
   font-family: system-ui;
   font-weight: 600;
   overflow: hidden;
+  vertical-align: middle;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
   height: ${({ size }) => SIZE_TO_PX[size]}px;
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
@@ -67,8 +76,8 @@ export const StyledTag = styled.div<IReqoreTagStyle>`
       background-color: ${color || changeLightness(theme.main, 0.1)};
       color: ${color ? getReadableColorFrom(color) : getReadableColor(theme, undefined, undefined)};
 
-      ${StyledTagContentKey}, ${StyledTagContentWrapper} {
-        background-color: ${labelKey ? changeLightness(color || theme.main, 0.05) : undefined};
+      ${StyledTagContentWrapper} {
+        background-color: ${labelKey ? rgba('#000000', 0.2) : undefined};
       }
     `}
 
@@ -130,14 +139,14 @@ const StyledButtonWrapper = styled.div<IReqoreTagStyle>`
   align-items: center;
   transition: all 0.2s ease-out;
 
-  ${({ theme, color }) =>
+  ${({ color }) =>
     css`
       .reqore-icon {
         transform: scale(0.85);
       }
       &:hover {
         cursor: pointer;
-        background-color: ${changeLightness(color || theme.main, color ? 0.09 : 0.19)};
+        background-color: ${color ? changeLightness(color, 0.09) : rgba('#000000', 0.2)};
 
         .reqore-icon {
           transform: scale(1);

package/src/components/Textarea/index.tsx

@@ -13,8 +13,10 @@ import {
   IReqoreIntent,
   IReqoreReadOnly,
   IWithReqoreCustomTheme,
+  IWithReqoreEffect,
   IWithReqoreTooltip,
 } from '../../types/global';
+import { StyledEffect } from '../Effect';
 import { IReqoreInputStyle } from '../Input';
 import ReqoreInputClearButton from '../InputClearButton';
 
@@ -24,7 +26,8 @@ export interface IReqoreTextareaProps
     IReqoreDisabled,
     IWithReqoreCustomTheme,
     IWithReqoreTooltip,
-    IReqoreIntent {
+    IReqoreIntent,
+    IWithReqoreEffect {
   autoFocus?: boolean;
   width?: number;
   height?: number;
@@ -53,7 +56,7 @@ export const StyledTextareaWrapper = styled.div<IReqoreTextareaStyle>`
   overflow: hidden;
 `;
 
-export const StyledTextarea = styled.textarea<IReqoreTextareaStyle>`
+export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
   height: 100%;
   width: 100%;
   font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
@@ -62,15 +65,16 @@ export const StyledTextarea = styled.textarea<IReqoreTextareaStyle>`
   resize: none;
 
   background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
-    minimal ? 'transparent' : rgba(theme.main, 0.3)};
-  color: ${({ theme }: IReqoreInputStyle) => getReadableColor(theme)};
+    minimal ? 'transparent' : rgba(theme.main, 0.1)};
+  color: ${({ theme }: IReqoreInputStyle) =>
+    getReadableColor(theme, undefined, undefined, true, theme.originalMain)};
 
   transition: all 0.2s ease-out;
 
   &:active,
   &:focus {
     background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
-      minimal ? 'transparent' : rgba(theme.main, 0.5)};
+      minimal ? 'transparent' : rgba(theme.main, 0.15)};
   }
 
   border-radius: ${({ minimal, rounded, _size }) =>
@@ -96,12 +100,14 @@ export const StyledTextarea = styled.textarea<IReqoreTextareaStyle>`
 
   &::placeholder {
     transition: all 0.2s ease-out;
-    color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
+    color: ${({ theme }) =>
+      rgba(getReadableColor(theme, undefined, undefined, true, theme.originalMain), 0.3)};
   }
 
   &:focus {
     &::placeholder {
-      color: ${({ theme }) => rgba(getReadableColor(theme), 0.5)};
+      color: ${({ theme }) =>
+        rgba(getReadableColor(theme, undefined, undefined, true, theme.originalMain), 0.5)};
     }
   }
 
@@ -146,6 +152,7 @@ const ReqoreInput = forwardRef(
       >
         <StyledTextarea
           {...rest}
+          as='textarea'
           className={`${className || ''} reqore-control reqore-textarea`}
           _size={size}
           ref={targetRef}

package/src/constants/sizes.ts

@@ -73,3 +73,11 @@ export const ICON_FROM_HEADER_SIZE = {
   5: 9,
   6: 6,
 };
+
+export const WEIGHT_TO_NUMBER = {
+  thin: 100,
+  light: 250,
+  normal: 400,
+  bold: 550,
+  thick: 700,
+};

package/src/constants/theme.ts

@@ -49,6 +49,7 @@ export interface IReqoreNavbarTheme {
 
 export interface IReqoreTheme {
   main: string;
+  originalMain?: string;
   text?: {
     color?: string;
     dim?: boolean;

package/src/containers/ReqoreProvider.tsx

@@ -2,10 +2,8 @@ import { size } from 'lodash';
 import React, { useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import shortid from 'shortid';
-import { ReqoreModal } from '..';
-import ReqoreNotificationsWrapper, {
-  IReqoreNotificationsPosition,
-} from '../components/Notifications';
+import { ReqoreModal, ReqoreTextEffect } from '..';
+import ReqoreNotificationsWrapper from '../components/Notifications';
 import ReqoreNotification, {
   IReqoreNotificationType,
 } from '../components/Notifications/notification';
@@ -13,6 +11,7 @@ import { TSizes } from '../constants/sizes';
 import { TReqoreIntent } from '../constants/theme';
 import ReqoreContext from '../context/ReqoreContext';
 import { IReqoreIconName } from '../types/icons';
+import { IReqoreOptions } from './UIProvider';
 
 export interface IReqoreNotificationData {
   title?: string;
@@ -32,7 +31,7 @@ export interface IReqoreNotificationData {
 
 export interface IReqoreNotifications {
   children: any;
-  position?: IReqoreNotificationsPosition;
+  options?: IReqoreOptions;
 }
 
 export interface IReqoreConfirmationModal {
@@ -48,7 +47,7 @@ export interface IReqoreConfirmationModal {
   intent?: TReqoreIntent;
 }
 
-const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, position }) => {
+const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options }) => {
   const [notifications, setNotifications] = useState<IReqoreNotificationData[] | null>([]);
   const [confirmationModal, setConfirmationModal] = useState<IReqoreConfirmationModal>({});
   const latestZIndex = useRef<number>(9000);
@@ -110,6 +109,8 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, position })
     });
   };
 
+  console.log(options);
+
   return (
     <>
       <ReqoreContext.Provider
@@ -122,10 +123,11 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, position })
           isTablet,
           isMobileOrTablet,
           getAndIncreaseZIndex,
+          animations: options?.animations || { buttons: true },
         }}
       >
         {size(notifications) > 0 ? (
-          <ReqoreNotificationsWrapper position={position}>
+          <ReqoreNotificationsWrapper position={options?.notificationsPosition}>
             {notifications.map((notification) => (
               <ReqoreNotification
                 {...notification}
@@ -159,6 +161,7 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, position })
           flat
           opacity={0.9}
           blur={2}
+          width='500px'
           intent={confirmationModal.intent}
           label={confirmationModal.title || 'Confirm your action'}
           icon='ErrorWarningFill'
@@ -184,7 +187,12 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, position })
             },
           ]}
         >
-          {confirmationModal.description || 'Are you sure you want to proceed?'}
+          <ReqoreTextEffect
+            as='p'
+            effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
+          >
+            {confirmationModal.description || 'Are you sure you want to proceed?'}
+          </ReqoreTextEffect>
         </ReqoreModal>
       </ReqoreContext.Provider>
     </>

package/src/containers/UIProvider.tsx

@@ -10,38 +10,40 @@ import { buildTheme } from '../helpers/colors';
 import PopoverProvider from './PopoverProvider';
 import ReqoreProvider from './ReqoreProvider';
 
+export interface IReqoreOptions {
+  withSidebar?: boolean;
+  notificationsPosition?: IReqoreNotificationsPosition;
+  uiScale?: number;
+  animations?: {
+    buttons?: boolean;
+  };
+}
 export interface IReqoreUIProviderProps {
   children: any;
   theme?: Partial<IReqoreTheme>;
-  notificationsPosition?: IReqoreNotificationsPosition;
-  withSidebar?: boolean;
-  uiScale?: number;
+  options?: IReqoreOptions;
 }
 
 const StyledPortal = styled.div`
   z-index: 9999;
 `;
 
-const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({
-  children,
-  theme,
-  notificationsPosition,
-  withSidebar,
-  uiScale,
-}) => {
+const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, options }) => {
   const [modalPortal, setModalPortal] = useState<any>(false);
 
   const _theme: Partial<IReqoreTheme> = cloneDeep(theme || {});
   const _defaultTheme: IReqoreTheme = cloneDeep(DEFAULT_THEME);
   const rebuiltTheme: IReqoreTheme = buildTheme(merge(_defaultTheme, _theme));
 
+  console.log(options);
+
   return (
     <>
       <ThemeContext.Provider value={{ ...rebuiltTheme }}>
-        <ReqoreLayoutWrapper withSidebar={withSidebar}>
+        <ReqoreLayoutWrapper withSidebar={options?.withSidebar}>
           {modalPortal ? (
-            <ReqoreProvider position={notificationsPosition}>
-              <PopoverProvider uiScale={uiScale}>{children}</PopoverProvider>
+            <ReqoreProvider options={options}>
+              <PopoverProvider uiScale={options?.uiScale}>{children}</PopoverProvider>
             </ReqoreProvider>
           ) : null}
         </ReqoreLayoutWrapper>

package/src/context/ReqoreContext.tsx

@@ -1,5 +1,6 @@
 import { createContext } from 'react';
 import { IReqoreConfirmationModal, IReqoreNotificationData } from '../containers/ReqoreProvider';
+import { IReqoreOptions } from '../containers/UIProvider';
 
 export interface IReqoreContext {
   readonly confirmAction: (data: IReqoreConfirmationModal) => void;
@@ -10,6 +11,7 @@ export interface IReqoreContext {
   readonly isTablet?: boolean;
   readonly isMobileOrTablet?: boolean;
   readonly getAndIncreaseZIndex?: () => number;
+  readonly animations?: IReqoreOptions['animations'];
 }
 
 export default createContext<IReqoreContext>({
@@ -17,4 +19,7 @@ export default createContext<IReqoreContext>({
   notifications: null,
   addNotification: null,
   removeNotification: null,
+  animations: {
+    buttons: true,
+  },
 });

package/src/helpers/colors.ts

@@ -122,7 +122,7 @@ export const mergeThemes = (element: string, theme: IReqoreTheme, customTheme: a
   }
 
   if (element === 'main' && customTheme) {
-    merge(clonedTheme, { main: customTheme.main });
+    merge(clonedTheme, { main: customTheme.main, originalMain: clonedTheme.main });
   } else {
     merge(clonedTheme, { [element]: customTheme || {} });
   }

package/src/hooks/usePopover.tsx

@@ -63,30 +63,38 @@ const usePopover = ({
     [popovers, current]
   );
 
+  const openPopover = () => {
+    addPopover?.({
+      id: current,
+      content,
+      targetElement,
+      placement,
+      noArrow,
+      useTargetWidth,
+      closeOnOutsideClick,
+      closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
+      ...rest,
+    });
+
+    if (rest?.blur > 0) {
+      targetElement.style.position = 'relative';
+      targetElement.style.zIndex = '999999';
+    }
+  };
+
   const _addPopover = () => {
     if (currentPopover) {
       if (handler !== 'hoverStay') {
         _removePopover?.();
       }
     } else if (show) {
-      timeout = setTimeout(() => {
-        addPopover?.({
-          id: current,
-          content,
-          targetElement,
-          placement,
-          noArrow,
-          useTargetWidth,
-          closeOnOutsideClick,
-          closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
-          ...rest,
-        });
-
-        if (rest?.blur > 0) {
-          targetElement.style.position = 'relative';
-          targetElement.style.zIndex = '999999';
-        }
-      }, delay || 0);
+      if (delay) {
+        timeout = setTimeout(() => {
+          openPopover();
+        }, delay);
+      } else {
+        openPopover();
+      }
     }
   };
 
@@ -119,7 +127,7 @@ const usePopover = ({
         ...rest,
       });
     }
-  }, [content?.toString()]);
+  }, [content]);
 
   useEffect(() => {
     if (openOnMount && targetElement) {
@@ -155,7 +163,13 @@ const usePopover = ({
         }
       }
     };
-  }, [targetElement?.toString(), content?.toString(), current, currentPopover]);
+  }, [
+    targetElement?.toString(),
+    //@ts-ignore
+    content,
+    current,
+    currentPopover,
+  ]);
 
   useUnmount(() => {
     cancelTimeout();

package/src/hooks/useWhyDidYouUpdate.ts

@@ -0,0 +1,32 @@
+import { useEffect, useRef } from 'react';
+
+export function useWhyDidYouUpdate(name, props) {
+  // Get a mutable ref object where we can store props ...
+  // ... for comparison next time this hook runs.
+  const previousProps: any = useRef();
+  useEffect(() => {
+    if (previousProps.current) {
+      // Get all keys from previous and current props
+      const allKeys = Object.keys({ ...previousProps.current, ...props });
+      // Use this object to keep track of changed props
+      const changesObj = {};
+      // Iterate through keys
+      allKeys.forEach((key) => {
+        // If previous is different from current
+        if (previousProps.current[key] !== props[key]) {
+          // Add to changesObj
+          changesObj[key] = {
+            from: previousProps.current[key],
+            to: props[key],
+          };
+        }
+      });
+      // If changesObj not empty then output to console
+      if (Object.keys(changesObj).length) {
+        console.log('[why-did-you-update]', name, changesObj);
+      }
+    }
+    // Finally update previousProps with current props for next hook call
+    previousProps.current = props;
+  });
+}

package/src/index.tsx

@@ -12,7 +12,16 @@ export { default as ReqoreControlGroup } from './components/ControlGroup';
 export { ReqoreDrawer } from './components/Drawer';
 export { default as ReqoreDropdown } from './components/Dropdown';
 export { ReqoreDropdownDivider, ReqoreDropdownItem } from './components/Dropdown/item';
-export { ReqoreH1, ReqoreH2, ReqoreH3, ReqoreH4, ReqoreH5, ReqoreH6 } from './components/Header';
+export { ReqoreEffect, ReqoreTextEffect } from './components/Effect';
+export {
+  ReqoreH1,
+  ReqoreH2,
+  ReqoreH3,
+  ReqoreH4,
+  ReqoreH5,
+  ReqoreH6,
+  ReqoreHeading,
+} from './components/Header';
 export { default as ReqoreIcon } from './components/Icon';
 export { default as ReqoreInput } from './components/Input';
 export { default as ReqoreLayoutContent } from './components/Layout/content';