@qoretechnologies/reqore 0.29.0 → 0.29.1

package/src/components/RadioGroup/index.tsx

@@ -19,6 +19,8 @@ export interface IReqoreRadioGroupProps
   size?: TSizes;
   disabled?: boolean;
   asSwitch?: boolean;
+  onText?: string;
+  offText?: string;
 }
 
 const ReqoreRadioGroup = ({
@@ -29,6 +31,8 @@ const ReqoreRadioGroup = ({
   disabled,
   asSwitch,
   vertical = true,
+  onText,
+  offText,
   ...rest
 }: IReqoreRadioGroupProps) => (
   <ReqoreControlGroup {...rest} vertical={vertical}>
@@ -44,6 +48,8 @@ const ReqoreRadioGroup = ({
       ) : (
         <ReqoreCheckbox
           asSwitch={asSwitch}
+          onText={onText}
+          offText={offText}
           {...itemRest}
           key={value}
           checked={value === selected}

package/src/components/Tag/index.tsx

@@ -53,7 +53,7 @@ export interface IReqoreTagProps
   color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
-  badge?: boolean;
+  asBadge?: boolean;
   intent?: TReqoreIntent;
   wrap?: boolean;
 }
@@ -77,17 +77,18 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  border-radius: ${({ badge, size }) => (badge ? 18 : RADIUS_FROM_SIZE[size])}px;
+  border-radius: ${({ asBadge, size }) => (asBadge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
   ${({ wrap, hasWidth }) =>
     wrap || hasWidth
       ? css`
-          min-height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
+          min-height: ${({ size, asBadge }) =>
+            asBadge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size]}px;
         `
       : css`
-          height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
+          height: ${({ size, asBadge }) => (asBadge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
         `}
 
   ${({ theme, color, labelKey, minimal }: IReqoreTagStyle) =>
@@ -220,7 +221,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       size = 'normal',
       onRemoveClick,
       actions,
-      badge,
+      asBadge,
       intent,
       color,
       minimal,
@@ -236,10 +237,15 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
     useTooltip(targetRef.current, tooltip);
 
     // If color or intent was specified, set the color
-    let customColor: TReqoreHexColor = intent
-      ? theme.intents[intent]
-      : getColorFromMaybeString(theme, color);
-    customColor = minimal ? `${customColor || '#000000'}40` : customColor;
+    const getCustomColor = (itemIntent?: TReqoreIntent): TReqoreHexColor => {
+      let customColor: TReqoreHexColor = itemIntent
+        ? theme.intents[itemIntent]
+        : getColorFromMaybeString(theme, color);
+
+      customColor = minimal ? `${customColor || '#000000'}40` : customColor;
+
+      return customColor;
+    };
 
     return (
       <StyledTag
@@ -250,11 +256,11 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
         }}
         width={width}
         labelKey={labelKey}
-        color={customColor}
+        color={getCustomColor(intent)}
         className={`${className || ''} reqore-tag`}
         size={size}
         ref={targetRef}
-        badge={badge}
+        asBadge={asBadge}
         minimal={minimal}
         removable={!!onRemoveClick}
         interactive={!!onClick && !rest.disabled}
@@ -308,7 +314,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                   component={StyledButtonWrapper}
                   componentProps={{
                     size,
-                    color: customColor,
+                    color: getCustomColor(action.intent),
                     className: 'reqore-tag-action',
                     onClick: action.onClick,
                     effect: rest.effect,
@@ -330,7 +336,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             component={StyledButtonWrapper}
             componentProps={{
               size,
-              color: customColor,
+              color: getCustomColor(intent),
               className: 'reqore-tag-remove',
               onClick: onRemoveClick,
               effect: rest.effect,

package/src/components/Textarea/index.tsx

@@ -81,9 +81,9 @@ export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
   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};
+    !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.2)}` : 0};
   border-bottom: ${({ minimal, theme, flat }) =>
-    minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.05)}` : undefined};
+    minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.2)}` : undefined};
 
   transition: all 0.2s ease-out;
 
@@ -94,7 +94,7 @@ export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
           &:focus,
           &:hover {
             outline: none;
-            border-color: ${({ theme }) => changeLightness(theme.main, 0.1)};
+            border-color: ${({ theme }) => changeLightness(theme.main, 0.25)};
           }
         `
       : undefined}

package/src/mock/collectionData.tsx

@@ -16,12 +16,12 @@ export default [
     tags: [
       {
         label: 23,
-        badge: true,
+        asBadge: true,
       },
       {
         label: 2022,
         labelKey: 'Year',
-        badge: true,
+        asBadge: true,
         onRemoveClick: noop,
       },
     ],
@@ -69,12 +69,12 @@ export default [
     tags: [
       {
         label: 23,
-        badge: true,
+        asBadge: true,
       },
       {
         label: 2022,
         labelKey: 'Year',
-        badge: true,
+        asBadge: true,
         onRemoveClick: noop(),
       },
     ],
@@ -273,12 +273,12 @@ export default [
     tags: [
       {
         label: 23,
-        badge: true,
+        asBadge: true,
       },
       {
         label: 2022,
         labelKey: 'Year',
-        badge: true,
+        asBadge: true,
         onRemoveClick: noop,
       },
     ],

package/src/mock/multiSelect.ts

@@ -16,6 +16,7 @@ export const MultiSelectItems: TReqoreMultiSelectItem[] = [
     value: 'Existing item 3',
     icon: 'DropboxFill',
     intent: 'info',
+    rightIcon: 'SunLine',
   },
   {
     label: 'Existing item 4',
@@ -42,6 +43,13 @@ export const MultiSelectItems: TReqoreMultiSelectItem[] = [
   {
     value: 'itemWithNoLabel',
     icon: 'TakeawayLine',
+    actions: [
+      {
+        icon: 'ArrowLeftUpFill',
+        onClick: () => console.log('clicked'),
+        intent: 'pending',
+      },
+    ],
   },
   {
     label: 'Other Item 1',

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

@@ -9,13 +9,48 @@ export default {
 
 const Template: ComponentStory<typeof Checkbox> = (args) => {
   return (
-    <ReqoreControlGroup>
-      <ReqoreCheckbox {...args} />
-      <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
-      <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 vertical>
+      <ReqoreControlGroup>
+        <ReqoreCheckbox {...args} />
+        <ReqoreCheckbox {...args} label='Label' labelDetail='Detail' labelDetailPosition='left' />
+        <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>
+      <ReqoreControlGroup>
+        <ReqoreCheckbox {...args} intent='info' />
+        <ReqoreCheckbox
+          {...args}
+          label='Label'
+          labelDetail='Detail'
+          labelDetailPosition='left'
+          labelEffect={{ gradient: { colors: { 0: 'danger:lighten:1', 100: '#ff6700' } } }}
+        />
+        <ReqoreCheckbox
+          {...args}
+          checked
+          tooltip='I am checked'
+          effect={{ gradient: { colors: { 0: '#00fafd', 100: '#ff00d0' } } }}
+        />
+        <ReqoreCheckbox {...args} disabled onText='yes' offText='no' />
+        <ReqoreCheckbox
+          {...args}
+          label='Label'
+          labelDetail='Detail'
+          labelPosition='left'
+          checkedIcon='EmotionHappyFill'
+          uncheckedIcon='EmotionSadFill'
+        />
+        <ReqoreCheckbox
+          {...args}
+          label='Read Only'
+          labelPosition='left'
+          readOnly
+          checked
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+        />
+      </ReqoreControlGroup>
     </ReqoreControlGroup>
   );
 };

package/src/stories/Icon/Icon.stories.tsx

@@ -15,22 +15,46 @@ export const Icon: Story<IReqoreIconProps> = () => {
         <ReqoreIcon icon='ArrowLeftCircleFill' intent='success' margin='both' />
         <ReqoreIcon icon='HotelFill' size='18px' margin='both' />
         <ReqoreIcon icon='SignalTowerFill' size='20px' color='#ff0000' margin='both' />
-        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#291133' sepia margin='both' />
-        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#0c7052' blur={1} margin='both' />
+        <ReqoreIcon
+          icon='SignalTowerFill'
+          size='20px'
+          color='#291133'
+          effect={{ sepia: true }}
+          margin='both'
+        />
+        <ReqoreIcon
+          icon='SignalTowerFill'
+          size='20px'
+          color='#0c7052'
+          effect={{ blur: 1 }}
+          margin='both'
+        />
         <ReqoreIcon
           icon='SignalTowerFill'
           size='20px'
           color='#700c57'
-          contrast={150}
+          effect={{ contrast: 150 }}
+          margin='both'
+        />
+        <ReqoreIcon
+          icon='SignalTowerFill'
+          size='20px'
+          color='#d5be0f'
+          effect={{ grayscale: true }}
+          margin='both'
+        />
+        <ReqoreIcon
+          icon='SignalTowerFill'
+          size='20px'
+          color='#0f5bd5'
+          effect={{ invert: true }}
           margin='both'
         />
-        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#d5be0f' grayscale margin='both' />
-        <ReqoreIcon icon='SignalTowerFill' size='20px' color='#0f5bd5' invert margin='both' />
         <ReqoreIcon
           icon='SignalTowerFill'
           size='20px'
           color='#ffffff'
-          opacity={0.5}
+          effect={{ opacity: 0.5 }}
           margin='both'
         />
       </ReqorePanel>
@@ -50,37 +74,43 @@ export const Icon: Story<IReqoreIconProps> = () => {
         <ReqoreIcon
           image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
           size='30px'
-          sepia
+          effect={{ sepia: true }}
           margin='both'
         />
         <ReqoreIcon
           image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
           size='40px'
-          blur={3}
+          effect={{ grayscale: true }}
           margin='both'
         />
         <ReqoreIcon
           image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
           size='70px'
-          contrast={150}
+          effect={{ blur: 1 }}
+          margin='both'
+        />
+        <ReqoreIcon
+          image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
+          size='40px'
+          effect={{ contrast: 150 }}
           margin='both'
         />
         <ReqoreIcon
           image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
           size='40px'
-          brightness={150}
+          effect={{ invert: true }}
           margin='both'
         />
         <ReqoreIcon
           image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
           size='40px'
-          opacity={0.5}
+          effect={{ opacity: 0.5 }}
           margin='both'
         />
         <ReqoreIcon
           image='https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4'
           size='40px'
-          invert
+          effect={{ saturate: 150 }}
           margin='both'
         />
       </ReqorePanel>

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

@@ -8,7 +8,7 @@ import {
   ReqoreMenuItem,
   ReqorePopover,
 } from '../../index';
-import { argManager, IntentArg } from '../utils/args';
+import { IntentArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreMenuProps>();
 
@@ -113,6 +113,7 @@ const Template: Story<IReqoreMenuProps> = (args) => {
       <ReqoreMenuDivider label='Divider' />
       <ReqorePopover
         component={ReqoreMenuItem}
+        flat={args.flat}
         componentProps={
           {
             icon: 'EmotionUnhappyLine',

package/src/stories/MultiSelect/MultiSelect.stories.tsx

@@ -2,7 +2,8 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import { IReqoreMultiSelectProps, ReqoreMultiSelect } from '../../components/MultiSelect';
 import { MultiSelectItems } from '../../mock/multiSelect';
-import { argManager, FlatArg, MinimalArg, SizeArg } from '../utils/args';
+import { IReqoreIconName } from '../../types/icons';
+import { FlatArg, IconArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreMultiSelectProps>();
 
@@ -27,6 +28,7 @@ export default {
       name: 'Can remove items',
       type: 'boolean',
     }),
+    ...IconArg('onItemClickIcon', 'Clickable item right icon', null),
   },
 } as Meta<IReqoreMultiSelectProps>;
 
@@ -45,7 +47,6 @@ const Template: Story<IReqoreMultiSelectProps> = (args: IReqoreMultiSelectProps)
       {...args}
       onValueChange={setSelected}
       enterKeySelects
-      onItemClick={(item) => console.log('onItemClick', item)}
       selectorProps={{
         listHeight: '600px',
         ...args.selectorProps,
@@ -76,6 +77,12 @@ Minimal.args = {
   minimal: true,
 };
 
+export const Clickable = Template.bind({});
+Clickable.args = {
+  onItemClick: (item) => console.log('onItemClick', item),
+  onItemClickIcon: 'EditLine' as IReqoreIconName,
+};
+
 export const WithEffect = Template.bind({});
 WithEffect.args = {
   selectedItemEffect: {

package/src/stories/Popover/Popover.stories.tsx

@@ -10,7 +10,7 @@ import {
   ReqorePopover,
   ReqoreSpacer,
 } from '../../index';
-import { argManager, FlatArg } from '../utils/args';
+import { FlatArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePopoverProps>();
 
@@ -178,10 +178,27 @@ const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
         component={ReqoreButton}
         isReqoreComponent
         openOnMount
-        placement='bottom'
+        placement='right'
       >
         Auto open popover
       </ReqorePopover>
+      <ReqorePopover
+        {...args}
+        component={ReqoreButton}
+        isReqoreComponent
+        openOnMount
+        placement='bottom'
+        content={
+          <ReqorePanel label='This is a test' flat>
+            <ReqoreMessage flat>
+              In to am attended desirous raptures declared diverted confined at. Collected instantly
+              remaining up certainly to necessary as. Over walk dull into
+            </ReqoreMessage>
+          </ReqorePanel>
+        }
+      >
+        With Custom Content
+      </ReqorePopover>
     </ReqoreControlGroup>
   );
 };

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

@@ -33,6 +33,43 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
         {
           label: 'Option 2',
           value: 'opt2',
+          onText: 1,
+          offText: 0,
+        },
+        {
+          label: 'Danger option',
+          value: 'danger',
+          intent: 'danger',
+        },
+        {
+          label: 'Effect option',
+          labelPosition: 'left',
+          value: 'effect',
+          effect: {
+            gradient: {
+              colors: {
+                0: 'info',
+                100: 'success',
+              },
+            },
+          },
+        },
+        {
+          label: 'Text effect & custom theme option',
+          value: 'textEffect',
+          customTheme: {
+            main: '#110134',
+          },
+          onText: 'On',
+          offText: 'Off',
+          switchTextEffect: {
+            gradient: {
+              colors: {
+                0: 'warning',
+                100: 'pending',
+              },
+            },
+          },
         },
         {
           divider: true,
@@ -41,7 +78,7 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
         {
           label: 'Beautiful option 3 with gradient effect',
           value: 'opt3',
-          effect: {
+          labelEffect: {
             gradient: {
               colors: {
                 0: 'info',
@@ -51,6 +88,12 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
             weight: 'thick',
           },
         },
+        {
+          label: 'Custom Icons Option',
+          value: 'customIconsOpt',
+          checkedIcon: 'EmotionHappyLine',
+          uncheckedIcon: 'EmotionSadLine',
+        },
         {
           label: 'Custom Image Option',
           value: 'customOpt',
@@ -86,3 +129,10 @@ export const Switch = Template.bind({});
 Switch.args = {
   asSwitch: true,
 };
+
+export const WithTexts = Template.bind({});
+WithTexts.args = {
+  asSwitch: true,
+  onText: 'True',
+  offText: 'False and wrong',
+};

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

@@ -3,7 +3,7 @@ import { noop } from 'lodash';
 import { IReqoreTagProps } from '../../components/Tag';
 import { IReqoreTagGroup } from '../../components/Tag/group';
 import { ReqoreTag, ReqoreTagGroup } from '../../index';
-import { argManager, SizeArg } from '../utils/args';
+import { SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreTagGroup & IReqoreTagProps>();
 
@@ -195,7 +195,7 @@ export const Basic = Template.bind({});
 export const BigGapSize = Template.bind({});
 BigGapSize.args = { gapSize: 'big' };
 export const Badge = Template.bind({});
-Badge.args = { badge: true };
+Badge.args = { asBadge: true };
 
 export const Effect = Template.bind({});
 Effect.args = {

package/src/stories/utils/args.ts

@@ -57,7 +57,7 @@ export const IconArg = (
   defaultValue?: IReqoreIconName
 ) =>
   argManager<any>().createArg(iconKeyName, {
-    defaultValue: defaultValue || '24HoursFill',
+    defaultValue: defaultValue || (defaultValue === null ? null : '24HoursFill'),
     name: name || 'Icon',
     description: 'The icon name used',
     control: {