@qoretechnologies/reqore 0.29.0 → 0.29.2

package/src/constants/theme.ts

@@ -1,4 +1,8 @@
-import { TReqoreEffectColor, TReqoreHexColor } from '../components/Effect';
+import {
+  TReqoreEffectColor,
+  TReqoreEffectGradientAnimationTrigger,
+  TReqoreHexColor,
+} from '../components/Effect';
 
 export interface IReqoreSidebarTheme {
   main?: TReqoreHexColor;
@@ -65,6 +69,7 @@ export interface IReqoreTheme {
   header?: IReqoreNavbarTheme;
   footer?: IReqoreNavbarTheme;
   breadcrumbs?: IReqoreBreadcrumbsTheme;
+  buttons?: IReqoreCustomTheme;
 }
 
 export interface IReqoreCustomTheme {
@@ -73,6 +78,8 @@ export interface IReqoreCustomTheme {
     color?: TReqoreEffectColor;
     dim?: boolean;
   };
+  gradient?: boolean;
+  animate?: TReqoreEffectGradientAnimationTrigger;
 }
 
 export interface IReqoreIntents {

package/src/helpers/colors.ts

@@ -1,6 +1,12 @@
 import { cloneDeep, merge, reduce } from 'lodash';
 import { darken, getLuminance, lighten, mix, readableColor } from 'polished';
-import { TReqoreEffectColor, TReqoreEffectColorList, TReqoreHexColor } from '../components/Effect';
+import {
+  TReqoreEffectColor,
+  TReqoreEffectColorList,
+  TReqoreEffectGradientColors,
+  TReqoreEffectGradientColorsObject,
+  TReqoreHexColor,
+} from '../components/Effect';
 import { Colors } from '../constants/colors';
 import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
 
@@ -175,7 +181,7 @@ export const getColorFromMaybeString = (
     _color = theme.intents[providedColor];
   }
 
-  if (isValidSixCharHex(color)) {
+  if (isValidSixCharHex(providedColor)) {
     _color = providedColor as TReqoreHexColor;
   }
 
@@ -192,28 +198,62 @@ export const getColorFromMaybeString = (
 
 export const createEffectGradient = (
   theme: IReqoreTheme,
-  colors: Record<number, TReqoreEffectColor>,
+  colors: TReqoreEffectGradientColors,
   lighten: number = 0,
   minimal?: boolean
 ): string => {
+  let _colors: TReqoreEffectGradientColorsObject;
+  // Check if the colors are valid
+  if (!colors) {
+    throw new Error('You need to provide colors');
+  }
+
+  if (typeof colors === 'string') {
+    _colors = buildGradientColorsFromString(theme, colors);
+  } else {
+    _colors = colors;
+  }
+
   return reduce(
-    colors,
+    _colors,
     (colorsString, color, percentage) => {
       return `${colorsString}, ${
-        minimal ? theme.main : changeLightness(getColorFromMaybeString(theme, color), lighten)
+        minimal
+          ? theme.originalMain
+          : changeLightness(getColorFromMaybeString(theme, color), lighten)
       } ${percentage}%`;
     },
     ''
   );
 };
 
+export const buildGradientColorsFromString = (
+  theme: IReqoreTheme,
+  color: 'main' | TReqoreHexColor | TReqoreIntent
+): TReqoreEffectGradientColorsObject => {
+  if (!color) {
+    throw new Error('You need to provide a color or intent');
+  }
+
+  const colorFrom: TReqoreHexColor = getColorFromMaybeString(theme, `${color}:lighten:1`);
+  const colorTo: TReqoreHexColor = getColorFromMaybeString(theme, `${color}`);
+
+  return {
+    0: colorFrom,
+    100: colorTo,
+  };
+};
+
 export const getNthGradientColor = (
   theme: IReqoreTheme,
-  colors?: Record<number, TReqoreEffectColor>,
+  colors?: TReqoreEffectGradientColors,
   nth: number = 1
 ): TReqoreHexColor | undefined => {
-  if (colors) {
-    return getColorFromMaybeString(theme, Object.values(colors)[nth - 1]);
+  const _colors =
+    typeof colors === 'string' ? buildGradientColorsFromString(theme, colors) : colors;
+
+  if (_colors) {
+    return getColorFromMaybeString(theme, Object.values(_colors)[nth - 1]);
   }
 
   return undefined;
@@ -221,12 +261,15 @@ export const getNthGradientColor = (
 
 export const getGradientMix = (
   theme: IReqoreTheme,
-  colors: Record<number, TReqoreEffectColor>,
+  colors: TReqoreEffectGradientColors,
   fallback?: TReqoreHexColor
 ): TReqoreHexColor | undefined => {
+  const _colors =
+    typeof colors === 'string' ? buildGradientColorsFromString(theme, colors) : colors;
+
   if (colors && Object.keys(colors).length === 2) {
-    const gradientColor1: TReqoreHexColor = getNthGradientColor(theme, colors);
-    const gradientColor2: TReqoreHexColor = getNthGradientColor(theme, colors, 2);
+    const gradientColor1: TReqoreHexColor = getNthGradientColor(theme, _colors);
+    const gradientColor2: TReqoreHexColor = getNthGradientColor(theme, _colors, 2);
 
     return mix(
       0.5,

package/src/hooks/useReqoreEffect.ts

@@ -0,0 +1,49 @@
+import { useContext, useMemo } from 'react';
+import {
+  IReqoreEffect,
+  TReqoreEffectGradientAnimationTrigger,
+  TReqoreHexColor,
+} from '../components/Effect';
+import { IReqoreTheme } from '../constants/theme';
+import ThemeContext from '../context/ThemeContext';
+
+export const useReqoreEffect = (
+  component: 'buttons',
+  theme: IReqoreTheme,
+  effect?: IReqoreEffect
+): IReqoreEffect => {
+  let _theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+
+  // Return the effect if the component is not defined in the theme
+  if (!theme[component]) {
+    return effect;
+  }
+
+  if (theme) {
+    // No other way to conditionally use a hook
+    _theme = theme;
+  }
+
+  const colors: TReqoreHexColor = useMemo(() => {
+    return _theme[component].gradient ? _theme.main : undefined;
+  }, [_theme, effect]);
+
+  const animate: TReqoreEffectGradientAnimationTrigger = useMemo(() => {
+    return _theme[component].animate;
+  }, [_theme, effect]);
+
+  const _effect = useMemo(() => {
+    return {
+      ...effect,
+      gradient: {
+        colors,
+        animate,
+
+        // If the user has defined a gradient, we don't want to override it
+        ...effect?.gradient,
+      },
+    };
+  }, [colors, animate, effect]);
+
+  return _effect;
+};

package/src/hooks/useTheme.ts

@@ -11,13 +11,14 @@ export interface IReqoreCustomTheme extends Partial<Omit<IReqoreTheme, 'main' |
     color?: TReqoreEffectColor;
     dim?: boolean;
   };
+  gradient?: boolean;
 }
 
 export const useReqoreTheme = (
   element?: string,
   customTheme: IReqoreCustomTheme = {},
   intent?: TReqoreIntent
-) => {
+): IReqoreTheme => {
   const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
 
   if (!element) {

package/src/index.tsx

@@ -54,6 +54,8 @@ export { default as ReqoreTextarea } from './components/Textarea';
 export { TimeAgo as ReqoreTimeAgo } from './components/TimeAgo';
 export { ReqoreTree } from './components/Tree';
 export { Colors as ReqoreColors } from './constants/colors';
+export { ReqoreSizes } from './constants/sizes';
+export { ReqoreIntents } from './constants/theme';
 export { default as ReqoreNotifications } from './containers/ReqoreProvider';
 export { default as ReqoreUIProvider } from './containers/UIProvider';
 export { default as ReqoreContext } from './context/ReqoreContext';

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/Button/Button.stories.tsx

@@ -1,6 +1,7 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { noop } from 'lodash';
 import ReqoreButton from '../../components/Button';
+import { IReqoreTheme } from '../../constants/theme';
 import { ReqoreControlGroup } from '../../index';
 import { IconArg, SizeArg } from '../utils/args';
 
@@ -185,6 +186,7 @@ Effect.args = {
     gradient: {
       direction: 'to right bottom',
       colors: { 0: '#33023c', 100: '#0a487b' },
+      animate: 'active',
     },
     spaced: 2,
     uppercase: true,
@@ -192,3 +194,15 @@ Effect.args = {
     textSize: 'small',
   },
 };
+
+export const GlobalEffect: ComponentStory<
+  typeof ReqoreButton & { otherThemeOptions?: IReqoreTheme }
+> = Template.bind({});
+GlobalEffect.args = {
+  otherThemeOptions: {
+    buttons: {
+      gradient: true,
+      animate: 'active',
+    },
+  },
+} as any;

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/Panel/Panel.stories.tsx

@@ -181,7 +181,7 @@ WithEffect.args = {
       type: 'radial',
       shape: 'ellipse',
       colors: { 0: '#670079', 100: '#180222' },
-      //borderColor: '#fff349',
+      animate: 'hover',
     },
   },
   headerEffect: {

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>
   );
 };