@qoretechnologies/reqore 0.20.7 → 0.21.0

package/src/components/Tag/index.tsx

@@ -1,5 +1,5 @@
 import _size from 'lodash/size';
-import React, { forwardRef, useContext, useRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { ReqorePopover } from '../..';
 import {
@@ -9,24 +9,24 @@ import {
   TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
-import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ThemeContext from '../../context/ThemeContext';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import usePopover from '../../hooks/usePopover';
-import { IReqoreTooltip } from '../../types/global';
+import { useTooltip } from '../../hooks/useTooltip';
+import { IReqoreDisabled, IReqoreIntent, IWithReqoreTooltip } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreIcon from '../Icon';
 
-export interface IReqoreTagAction {
+export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
   icon: IReqoreIconName;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  disabled?: boolean;
-  tooltip?: IReqoreTooltip;
-  intent?: IReqoreIntent;
 }
 
-export interface IReqoreTagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+export interface IReqoreTagProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
+    IWithReqoreTooltip,
+    IReqoreDisabled {
   size?: TSizes;
   label?: string;
   onRemoveClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -34,12 +34,10 @@ export interface IReqoreTagProps extends Omit<React.HTMLAttributes<HTMLSpanEleme
   icon?: IReqoreIconName;
   rightIcon?: IReqoreIconName;
   color?: string;
-  tooltip?: IReqoreTooltip;
-  disabled?: boolean;
   actions?: IReqoreTagAction[];
   width?: string;
   badge?: boolean;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
 }
 
 export interface IReqoreTagStyle extends IReqoreTagProps {
@@ -154,15 +152,10 @@ const ReqoreTag = forwardRef(
     }: IReqoreTagProps,
     ref
   ) => {
-    const innerRef = useRef(null);
-    const combinedRef = useCombinedRefs(innerRef, ref);
+    const { targetRef } = useCombinedRefs(ref);
     const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
 
-    usePopover({
-      ...tooltip,
-      targetElement: combinedRef.current,
-      show: !!tooltip?.content,
-    });
+    useTooltip(targetRef.current, tooltip);
 
     // If color or intent was specified, set the color
     const customColor = intent ? theme.intents[intent] : color;
@@ -173,7 +166,7 @@ const ReqoreTag = forwardRef(
         color={customColor}
         className={`${className || ''} reqore-tag`}
         size={size}
-        ref={combinedRef}
+        ref={targetRef}
         badge={badge}
         removable={!!onRemoveClick}
         interactive={!!onClick && !rest.disabled}
@@ -199,7 +192,6 @@ const ReqoreTag = forwardRef(
           ? actions.map((action) => (
               <>
                 <ReqorePopover
-                  {...action.tooltip}
                   component={StyledButtonWrapper}
                   componentProps={{
                     size,
@@ -207,6 +199,11 @@ const ReqoreTag = forwardRef(
                     className: 'reqore-tag-action',
                     onClick: action.onClick,
                   }}
+                  {...(action.tooltip
+                    ? typeof action.tooltip === 'string'
+                      ? { tooltip: action.tooltip }
+                      : action.tooltip || {}
+                    : {})}
                   noWrapper
                 >
                   <ReqoreIcon icon={action.icon} size={`${TEXT_FROM_SIZE[size]}px`} />

package/src/components/Textarea/index.tsx

@@ -1,14 +1,31 @@
-import { darken, rgba } from 'polished';
+import { rgba } from 'polished';
 import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import { TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import styled, { css } from 'styled-components';
+import { RADIUS_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
-import { getReadableColor } from '../../helpers/colors';
+import { changeLightness, getReadableColor } from '../../helpers/colors';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { useTooltip } from '../../hooks/useTooltip';
+import { DisabledElement, ReadOnlyElement } from '../../styles';
+import {
+  IReqoreDisabled,
+  IReqoreIntent,
+  IReqoreReadOnly,
+  IWithReqoreCustomTheme,
+  IWithReqoreTooltip,
+} from '../../types/global';
+import { IReqoreInputStyle } from '../Input';
 import ReqoreInputClearButton from '../InputClearButton';
 
-export interface IReqoreTextareaProps extends React.HTMLAttributes<HTMLTextAreaElement> {
+export interface IReqoreTextareaProps
+  extends React.HTMLAttributes<HTMLTextAreaElement>,
+    IReqoreReadOnly,
+    IReqoreDisabled,
+    IWithReqoreCustomTheme,
+    IWithReqoreTooltip,
+    IReqoreIntent {
   autoFocus?: boolean;
-  disabled?: boolean;
   width?: number;
   height?: number;
   scaleWithContent?: boolean;
@@ -18,6 +35,8 @@ export interface IReqoreTextareaProps extends React.HTMLAttributes<HTMLTextAreaE
   value?: string;
   rows?: number;
   cols?: number;
+  rounded?: boolean;
+  flat?: boolean;
   onClearClick?: () => any;
 }
 
@@ -42,25 +61,39 @@ export const StyledTextarea = styled.textarea<IReqoreTextareaStyle>`
   padding: 5px 7px;
   resize: none;
 
-  background-color: ${({ theme, minimal }: IReqoreTextareaStyle) =>
-    minimal ? 'transparent' : darken(0.01, theme.main)};
-  color: ${({ theme }: IReqoreTextareaStyle) => getReadableColor(theme)};
+  background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
+    minimal ? 'transparent' : rgba(theme.main, 0.3)};
+  color: ${({ theme }: IReqoreInputStyle) => getReadableColor(theme)};
 
-  border: ${({ minimal, theme }) =>
-    !minimal ? `1px solid ${rgba(getReadableColor(theme), 0.2)}` : 0};
-  border-bottom: ${({ minimal, theme }) =>
-    minimal ? `0.5px solid ${rgba(getReadableColor(theme), 0.2)}` : undefined};
-
-  border-radius: ${({ minimal }) => (minimal ? 0 : 3)}px;
   transition: all 0.2s ease-out;
 
   &:active,
-  &:focus,
-  &:hover {
-    outline: none;
-    border-color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
+  &:focus {
+    background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
+      minimal ? 'transparent' : rgba(theme.main, 0.5)};
   }
 
+  border-radius: ${({ minimal, rounded, _size }) =>
+    minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
+  border: ${({ minimal, theme, flat }) =>
+    !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.05)}` : 0};
+  border-bottom: ${({ minimal, theme, flat }) =>
+    minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.05)}` : undefined};
+
+  transition: all 0.2s ease-out;
+
+  ${({ disabled, readOnly }) =>
+    !disabled && !readOnly
+      ? css`
+          &:active,
+          &:focus,
+          &:hover {
+            outline: none;
+            border-color: ${({ theme }) => changeLightness(theme.main, 0.1)};
+          }
+        `
+      : undefined}
+
   &::placeholder {
     transition: all 0.2s ease-out;
     color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
@@ -72,9 +105,10 @@ export const StyledTextarea = styled.textarea<IReqoreTextareaStyle>`
     }
   }
 
+  ${({ readOnly }) => readOnly && ReadOnlyElement};
+
   &:disabled {
-    pointer-events: none;
-    opacity: 0.3;
+    ${DisabledElement};
   }
 `;
 
@@ -88,10 +122,19 @@ const ReqoreInput = forwardRef(
       className,
       onClearClick,
       fluid,
+      tooltip,
+      customTheme,
+      intent,
+      rounded = true,
       ...rest
     }: IReqoreTextareaProps,
     ref: any
   ) => {
+    const { targetRef } = useCombinedRefs(ref);
+    const theme = useReqoreTheme('main', customTheme, intent);
+
+    useTooltip(targetRef?.current, tooltip);
+
     return (
       <StyledTextareaWrapper
         className={`${className || ''} reqore-control-wrapper`}
@@ -99,20 +142,25 @@ const ReqoreInput = forwardRef(
         height={height}
         fluid={fluid}
         _size={size}
+        theme={theme}
       >
         <StyledTextarea
           {...rest}
           className={`${className || ''} reqore-control reqore-textarea`}
           _size={size}
-          ref={ref}
+          ref={targetRef}
+          theme={theme}
+          rounded={rounded}
           rows={scaleWithContent ? (rest?.value?.split(/\r\n|\r|\n/).length || 1) + 1 : rest.rows}
         />
-        <ReqoreInputClearButton
-          enabled={!rest?.disabled && !!(onClearClick && rest?.onChange)}
-          show={rest?.value && rest.value !== ''}
-          onClick={onClearClick}
-          size='big'
-        />
+        {!rest.readOnly && (
+          <ReqoreInputClearButton
+            enabled={!rest?.disabled && !!(onClearClick && rest?.onChange)}
+            show={rest?.value && rest.value !== ''}
+            onClick={onClearClick}
+            size='big'
+          />
+        )}
       </StyledTextareaWrapper>
     );
   }

package/src/constants/theme.ts

@@ -81,7 +81,7 @@ export interface IReqoreIntents {
   muted?: string;
 }
 
-export type IReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';
+export type TReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';
 
 export const DEFAULT_INTENTS: IReqoreIntents = {
   info: '#0E5A8A',

package/src/containers/ReqoreProvider.tsx

@@ -10,7 +10,7 @@ import ReqoreNotification, {
   IReqoreNotificationType,
 } from '../components/Notifications/notification';
 import { TSizes } from '../constants/sizes';
-import { IReqoreIntent } from '../constants/theme';
+import { TReqoreIntent } from '../constants/theme';
 import ReqoreContext from '../context/ReqoreContext';
 import { IReqoreIconName } from '../types/icons';
 
@@ -24,7 +24,7 @@ export interface IReqoreNotificationData {
   onFinish?: (id?: string) => any;
   id?: string;
   type?: IReqoreNotificationType;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   flat?: boolean;
   inverted?: boolean;
   size?: TSizes;
@@ -40,12 +40,12 @@ export interface IReqoreConfirmationModal {
   description?: string;
   onConfirm?: () => void;
   onCancel?: () => void;
-  confirmButtonIntent?: IReqoreIntent;
+  confirmButtonIntent?: TReqoreIntent;
   confirmLabel?: string;
   confirmIcon?: IReqoreIconName;
   cancelLabel?: string;
   isOpen?: boolean;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
 }
 
 const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, position }) => {

package/src/helpers/colors.ts

@@ -1,7 +1,7 @@
 import { cloneDeep, merge } from 'lodash';
 import { darken, lighten, readableColor } from 'polished';
 import { Colors } from '../constants/colors';
-import { DEFAULT_INTENTS, IReqoreIntent, IReqoreTheme } from '../constants/theme';
+import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
 
 export const getReadableColor: (
   theme: Partial<IReqoreTheme>,
@@ -130,7 +130,7 @@ export const mergeThemes = (element: string, theme: IReqoreTheme, customTheme: a
   return clonedTheme;
 };
 
-export const getNotificationIntent = (theme: IReqoreTheme, intent?: IReqoreIntent) => {
+export const getNotificationIntent = (theme: IReqoreTheme, intent?: TReqoreIntent) => {
   if (intent) {
     return theme.notifications[intent];
   }

package/src/hooks/useCombinedRefs.ts

@@ -1,10 +1,17 @@
 import React from 'react';
 
+/**
+ * It takes a list of refs and returns a single ref that can be used to reference the same underlying
+ * DOM element
+ * @param refs - An array of refs to combine.
+ * @returns A ref object.
+ */
 export function useCombinedRefs(...refs) {
+  const [_innerRef, setInnerRef] = React.useState(null);
   const targetRef = React.useRef();
 
   React.useEffect(() => {
-    refs.forEach((ref) => {
+    [...refs, setInnerRef].forEach((ref) => {
       if (!ref) return;
 
       if (typeof ref === 'function') {
@@ -15,5 +22,5 @@ export function useCombinedRefs(...refs) {
     });
   }, [refs]);
 
-  return targetRef;
+  return { _innerRef, targetRef };
 }

package/src/hooks/useTheme.ts

@@ -1,13 +1,13 @@
 import { cloneDeep } from 'lodash';
 import { useContext } from 'react';
-import { IReqoreIntent, IReqoreTheme } from '../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
 import ThemeContext from '../context/ThemeContext';
 import { mergeThemes } from '../helpers/colors';
 
 export const useReqoreTheme = (
   element: string,
   customTheme: Partial<IReqoreTheme> = {},
-  intent?: IReqoreIntent
+  intent?: TReqoreIntent
 ) => {
   const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
   let _customTheme: Partial<IReqoreTheme> = cloneDeep(customTheme);

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

@@ -22,7 +22,7 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} disabled>
           Disabled
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} active>
+        <ReqoreButton {...buttonProps} active tooltip='hello'>
           Active
         </ReqoreButton>
         <ReqoreButton {...buttonProps} flat>
@@ -31,6 +31,9 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} minimal>
           Minimal
         </ReqoreButton>
+        <ReqoreButton {...buttonProps} readOnly onClick={alert}>
+          Read only
+        </ReqoreButton>
       </ReqoreControlGroup>
       <br />
       <ReqoreControlGroup fluid>

package/src/stories/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import Checkbox from '../../components/Checkbox';
-import { ReqoreCheckbox } from '../../index';
+import { ReqoreCheckbox, ReqoreControlGroup } from '../../index';
 
 export default {
   title: 'Components/Checkbox',
@@ -9,13 +9,14 @@ export default {
 
 const Template: ComponentStory<typeof Checkbox> = (args) => {
   return (
-    <>
+    <ReqoreControlGroup>
       <ReqoreCheckbox {...args} />
       <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
-      <ReqoreCheckbox {...args} checked />
+      <ReqoreCheckbox {...args} checked tooltip='I am checked' />
       <ReqoreCheckbox {...args} disabled />
       <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelPosition='left' />
-    </>
+      <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
+    </ReqoreControlGroup>
   );
 };
 

package/src/stories/Input/Input.stories.tsx

@@ -2,13 +2,14 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { ReqoreControlGroup } from '../../index';
-import { FlatArg, MinimalArg } from '../utils/args';
+import { FlatArg, IconArg, MinimalArg } from '../utils/args';
 
 export default {
   title: 'Components/Input',
   argTypes: {
     ...MinimalArg,
     ...FlatArg,
+    ...IconArg('icon', 'Icon', 'SearchLine'),
   },
 } as Meta<IReqoreInputProps>;
 
@@ -27,47 +28,55 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
     <>
       <ReqoreControlGroup>
         <ReqoreInput
+          {...args}
           placeholder='Reqore Input'
           onChange={handleValueChange}
           value={value}
-          {...args}
         />
         <ReqoreInput
+          {...args}
           placeholder='Minimal Input'
           minimal
           onChange={handleValueChange}
           value={value}
-          {...args}
         />
         <ReqoreInput
+          {...args}
           placeholder='Flat Input'
           flat
+          tooltip="I'm a tooltip"
           onChange={handleValueChange}
           value={value}
-          {...args}
         />
         <ReqoreInput
+          {...args}
           placeholder='Clearable Input'
           onClearClick={handleValueClear}
           value={value}
           onChange={handleValueChange}
-          {...args}
         />
         <ReqoreInput
+          {...args}
           placeholder='Disabled Input'
           disabled
           onChange={handleValueChange}
           value={value}
+        />
+        <ReqoreInput
           {...args}
+          placeholder='Read Only Input'
+          readOnly
+          onChange={handleValueChange}
+          value={value}
         />
       </ReqoreControlGroup>
       <br />
       <ReqoreControlGroup fluid>
         <ReqoreInput
+          {...args}
           placeholder='Fluid Input'
           onChange={handleValueChange}
           value={value}
-          {...args}
         />
       </ReqoreControlGroup>
     </>
@@ -75,3 +84,27 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
 };
 
 export const Basic = Template.bind({});
+export const Info = Template.bind({});
+Info.args = {
+  intent: 'info',
+};
+export const Success = Template.bind({});
+Success.args = {
+  intent: 'success',
+};
+export const Warning = Template.bind({});
+Warning.args = {
+  intent: 'warning',
+};
+export const Danger = Template.bind({});
+Danger.args = {
+  intent: 'danger',
+};
+export const Pending = Template.bind({});
+Pending.args = {
+  intent: 'pending',
+};
+export const Muted = Template.bind({});
+Muted.args = {
+  intent: 'muted',
+};

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

@@ -27,11 +27,19 @@ export default {
         type: 'select',
       },
     }),
+    ...createArg('wrapText', {
+      defaultValue: true,
+      name: 'Wrap text',
+      control: {
+        type: 'boolean',
+      },
+      description: 'Whether to wrap text or not',
+    }),
     ...IntentArg,
   },
 } as Meta<IReqoreMenuProps>;
 
-export const MenuStory: Story<IReqoreMenuProps> = (args) => {
+const Template: Story<IReqoreMenuProps> = (args) => {
   return (
     <ReqoreMenu {...args}>
       <ReqoreMenuItem icon='Save3Fill' intent='success' selected>
@@ -91,4 +99,8 @@ export const MenuStory: Story<IReqoreMenuProps> = (args) => {
   );
 };
 
-MenuStory.storyName = 'Menu';
+export const Basic = Template.bind({});
+export const WrappedText = Template.bind({});
+WrappedText.args = {
+  wrapText: false,
+};

package/src/stories/RadioGroup/RadioGroup.stories.tsx

@@ -37,6 +37,16 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
           label: 'Option 3',
           value: 'opt3',
         },
+        {
+          label: 'Read Only Option',
+          value: 'opt4',
+          readOnly: true,
+        },
+        {
+          label: 'Disabled Option',
+          value: 'opt5',
+          disabled: true,
+        },
       ]}
       onSelectClick={(value) => setSelected(value)}
       selected={selected}

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

@@ -60,7 +60,13 @@ const Template: Story<IReqoreTagGroup & IReqoreTagProps> = ({ columns, ...args }
     <ReqoreTagGroup columns={columns} size={args.size}>
       <ReqoreTag label='Basic Tag' icon='AlarmWarningLine' {...args} />
       <ReqoreTag label='Disabled Tag' disabled icon='AlarmWarningLine' {...args} />
-      <ReqoreTag label='300px Tag' width='300px' icon='AlarmWarningLine' {...args} />
+      <ReqoreTag
+        label='300px Tag'
+        width='300px'
+        icon='AlarmWarningLine'
+        {...args}
+        tooltip='I am wiiiiiiide'
+      />
       <ReqoreTag label='Danger Tag' icon='AlarmWarningLine' intent='danger' {...args} />
       <ReqoreTag label='Custom Color Tag' icon='AlarmWarningLine' color='#38fdb2' {...args} />
     </ReqoreTagGroup>