@qoretechnologies/reqore 0.29.1 → 0.29.3

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

@@ -42,7 +42,7 @@ export { ReqoreP, ReqoreP as ReqoreParagraph } from './components/Paragraph';
 export { default as ReqorePopover } from './components/Popover';
 export { default as ReqoreRadioGroup } from './components/RadioGroup';
 export { default as ReqoreSidebar } from './components/Sidebar';
-export { ReqoreSpacer } from './components/Spacer';
+export { ReqoreHorizontalSpacer, ReqoreSpacer, ReqoreVerticalSpacer } from './components/Spacer';
 export { default as ReqoreTable } from './components/Table';
 export { default as ReqoreTabs } from './components/Tabs';
 export { default as ReqoreTabsContent } from './components/Tabs/content';
@@ -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/multiSelect.ts

@@ -16,7 +16,7 @@ export const MultiSelectItems: TReqoreMultiSelectItem[] = [
     value: 'Existing item 3',
     icon: 'DropboxFill',
     intent: 'info',
-    rightIcon: 'SunLine',
+    rightIcon: 'ArrowRightLine',
   },
   {
     label: 'Existing item 4',

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

@@ -19,7 +19,7 @@ const Template: ComponentStory<typeof Checkbox> = (args) => {
         <ReqoreCheckbox {...args} label='Read Only' labelPosition='left' readOnly />
       </ReqoreControlGroup>
       <ReqoreControlGroup>
-        <ReqoreCheckbox {...args} intent='info' />
+        <ReqoreCheckbox {...args} intent='info' checked />
         <ReqoreCheckbox
           {...args}
           label='Label'

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -1,8 +1,8 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreControlGroupProps } from '../../components/ControlGroup';
 import ReqoreInput from '../../components/Input';
-import { ReqoreButton, ReqoreControlGroup, ReqoreTag } from '../../index';
-import { argManager, GapSizeArg, MinimalArg, SizeArg } from '../utils/args';
+import { ReqoreButton, ReqoreCheckbox, ReqoreControlGroup, ReqoreTag } from '../../index';
+import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
 
@@ -36,8 +36,9 @@ export default {
 const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProps) => {
   return (
     <ReqoreControlGroup {...args}>
-      <ReqoreButton>Button</ReqoreButton>
+      <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
       <ReqoreButton
+        icon='PictureInPictureLine'
         flat={false}
         effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
       >
@@ -45,11 +46,25 @@ const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProp
       </ReqoreButton>
       <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
       <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
+      <ReqoreCheckbox
+        asSwitch
+        label='Switchy switch'
+        margin='both'
+        intent='warning'
+        checkedIcon='CheckFill'
+        checked
+        uncheckedIcon='CheckboxBlankLine'
+      />
       <ReqoreInput icon='4KFill' value='Hello' />
       <ReqoreButton disabled fixed>
         Disabled & Fixed
       </ReqoreButton>
+      <ReqoreCheckbox checked margin='both'>
+        Checkbox
+      </ReqoreCheckbox>
+
       <ReqoreButton minimal>Minimal</ReqoreButton>
+      <ReqoreTag label='smol tag' size='small' />
     </ReqoreControlGroup>
   );
 };

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

@@ -8,7 +8,7 @@ import { FlatArg, IconArg, MinimalArg, SizeArg, argManager } from '../utils/args
 const { createArg } = argManager<IReqoreMultiSelectProps>();
 
 export default {
-  title: 'Components/MultiSelect',
+  title: 'Components/Multi Select',
   parameters: {
     chromatic: {
       delay: 500,
@@ -57,6 +57,9 @@ const Template: Story<IReqoreMultiSelectProps> = (args: IReqoreMultiSelectProps)
 };
 
 export const Basic = Template.bind({});
+Basic.args = {
+  onItemClickIcon: 'EditLine' as IReqoreIconName,
+};
 export const Empty = Template.bind({});
 Empty.args = {
   value: [],

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

@@ -127,7 +127,7 @@ const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
             Full popover
           </ReqorePopover>
           <ReqoreControlGroup>
-            <ReqoreSpacer width={200} />
+            <ReqoreSpacer width={350} />
             <ReqorePopover
               {...args}
               component={ReqoreButton}

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

@@ -36,11 +36,36 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
           onText: 1,
           offText: 0,
         },
+        {
+          divider: true,
+          label: 'Intents',
+        },
         {
           label: 'Danger option',
           value: 'danger',
           intent: 'danger',
         },
+        {
+          label: 'Success option',
+          value: 'sucess',
+          intent: 'success',
+        },
+        {
+          label: 'Pending option',
+          value: 'pending',
+          intent: 'pending',
+        },
+        {
+          label: 'Info option',
+          value: 'info',
+          intent: 'info',
+        },
+        {
+          label: 'Warning option',
+          value: 'warning',
+          intent: 'warning',
+        },
+
         {
           label: 'Effect option',
           labelPosition: 'left',
@@ -54,6 +79,16 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
             },
           },
         },
+        {
+          label: 'Effect option with main color gradient and hover animation',
+          value: 'effect2',
+          effect: {
+            gradient: {
+              colors: 'main',
+              animate: 'hover',
+            },
+          },
+        },
         {
           label: 'Text effect & custom theme option',
           value: 'textEffect',
@@ -97,6 +132,12 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
         {
           label: 'Custom Image Option',
           value: 'customOpt',
+          labelEffect: {
+            glow: {
+              color: 'danger',
+              blur: 2,
+            },
+          },
           image:
             'https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4',
         },
@@ -112,6 +153,12 @@ const Template: Story<IReqoreRadioGroupProps> = (args: IReqoreRadioGroupProps) =
           label: 'Disabled Option',
           value: 'opt5',
           disabled: true,
+          labelEffect: {
+            glow: {
+              color: '#ffffff',
+              blur: 0,
+            },
+          },
         },
       ]}
       onSelectClick={(value) => setSelected(value)}

package/src/stories/Spacer/Spacer.stories.tsx

@@ -0,0 +1,93 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import {
+  IReqoreSpacerProps,
+  ReqoreHorizontalSpacer,
+  ReqoreVerticalSpacer,
+} from '../../components/Spacer';
+import { ReqorePanel } from '../../index';
+
+export default {
+  title: 'Components/Spacer',
+} as Meta;
+
+const Template: Story<IReqoreSpacerProps> = () => {
+  return (
+    <>
+      <ReqorePanel label='Horizontal'>
+        This is a horizontal spacer with <ReqoreHorizontalSpacer width={50} /> width of 50px
+        <br />
+        <br />
+        This is a horizontal spacer with <ReqoreHorizontalSpacer
+          width={10}
+          lineSize='normal'
+        />{' '}
+        width of 10px and lineSize of normal
+        <br />
+        <br />
+        This is a horizontal spacer with <ReqoreHorizontalSpacer width={50} height={100} /> width of
+        50px and height of 100px
+        <br />
+        <br />
+        This is a horizontal spacer with{' '}
+        <ReqoreHorizontalSpacer width={50} height={50} lineSize='tiny' intent='info' /> width of
+        50px and height of 50px and lineSize of tiny and intent info
+        <br />
+        <br />
+        This is a horizontal spacer with{' '}
+        <ReqoreHorizontalSpacer
+          width={50}
+          lineSize='huge'
+          intent='info'
+          effect={{
+            gradient: {
+              colors: { 0: 'danger:lighten:2', 100: 'danger:darken:2' },
+              animate: 'always',
+              direction: 'to bottom',
+            },
+          }}
+        />{' '}
+        width of 30px and height of auto and lineSize of huge and an effect & animation
+      </ReqorePanel>
+      <ReqoreVerticalSpacer height={10} />
+      <ReqorePanel label='Vertical'>
+        This is a vertical spacer with <ReqoreVerticalSpacer height={50} /> height of 50px
+        <br />
+        <br />
+        This is a vertical spacer with <ReqoreVerticalSpacer height={10} lineSize='normal' /> height
+        of 10px and lineSize of normal
+        <br />
+        <br />
+        This is a vertical spacer with <ReqoreVerticalSpacer height={50} width={100} /> height of
+        50px and width of 100px
+        <br />
+        <br />
+        This is a vertical spacer with{' '}
+        <ReqoreVerticalSpacer width={50} height={50} lineSize='tiny' intent='info' /> width of 50px
+        and height of 50px and lineSize of tiny and intent info
+        <br />
+        <br />
+        This is a vertical spacer with{' '}
+        <ReqoreVerticalSpacer
+          height={50}
+          lineSize='tiny'
+          effect={{
+            gradient: {
+              colors: { 0: 'success:lighten:2', 100: 'success:darken' },
+              animate: 'always',
+              animationSpeed: 5,
+              type: 'radial',
+              direction: 'to right',
+            },
+            glow: {
+              color: 'success',
+              blur: 20,
+            },
+          }}
+        />{' '}
+        height of 50px and width of auto and lineSize of tiny and an effect & animation
+      </ReqorePanel>
+    </>
+  );
+};
+
+export const Basic = Template.bind({});