@qoretechnologies/reqore 0.30.20 → 0.31.0

package/src/components/Effect/index.tsx

@@ -11,6 +11,7 @@ import {
   getGradientMix,
   getReadableColorFrom,
 } from '../../helpers/colors';
+import { isStringSize } from '../../helpers/utils';
 import { IWithReqoreMinimal } from '../../types/global';
 
 export type TReqoreEffectColorManipulation = 'darken' | 'lighten';
@@ -66,7 +67,7 @@ export interface IReqoreEffect extends IReqoreEffectFilters {
   spaced?: number;
   weight?: number | 'thin' | 'light' | 'normal' | 'bold' | 'thick';
   uppercase?: boolean;
-  textSize?: TSizes;
+  textSize?: TSizes | string;
   textAlign?: 'left' | 'center' | 'right';
   glow?: {
     size?: number;
@@ -126,7 +127,7 @@ export const StyledEffect = styled.span`
     const gradientDirectionOrShape =
       gradientType === 'linear'
         ? effect.gradient.direction || 'to right'
-        : effect.gradient.shape || 'circle';
+        : `${effect.gradient.shape || 'circle'} ${effect.gradient.direction || 'at center'}`;
     let gradient = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColors}) padding-box`;
     let gradientActive = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColorsActive}) padding-box`;
 
@@ -288,7 +289,9 @@ export const StyledEffect = styled.span`
   ${({ effect }: IReqoreTextEffectProps) =>
     effect && effect.textSize
       ? css`
-          font-size: ${TEXT_FROM_SIZE[effect.textSize]}px !important;
+          font-size: ${isStringSize(effect.textSize)
+            ? `${TEXT_FROM_SIZE[effect.textSize]}px`
+            : effect.textSize} !important;
         `
       : undefined}
 

package/src/components/Header/index.tsx

@@ -45,7 +45,7 @@ export const StyledHeader = styled(StyledTextEffect)`
 `;
 
 export const ReqoreHeading = memo(
-  ({ size, children, customTheme, intent, ...props }: IReqoreHeadingProps) => {
+  ({ size, children, customTheme, intent, className, ...rest }: IReqoreHeadingProps) => {
     const theme = useReqoreTheme('main', customTheme, intent);
     const _size: number = isStringSize(size) ? HEADER_SIZE_TO_NUMBER[size] : size;
     const HTMLheaderElement = useMemo(() => {
@@ -53,7 +53,14 @@ export const ReqoreHeading = memo(
     }, [_size]);
 
     return (
-      <StyledHeader as={HTMLheaderElement} theme={theme} intent={intent} {...props} _size={_size}>
+      <StyledHeader
+        as={HTMLheaderElement}
+        theme={theme}
+        intent={intent}
+        {...rest}
+        _size={_size}
+        className={`${className || ''} reqore-heading`}
+      >
         {children}
       </StyledHeader>
     );

package/src/components/Icon/index.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, memo, useContext } from 'react';
 import { IconContext } from 'react-icons';
 import { IconBaseProps, IconType } from 'react-icons/lib';
 import * as RemixIcons from 'react-icons/ri';
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import { ReqoreThemeContext } from '../..';
 import { ICON_FROM_SIZE, PADDING_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { getColorFromMaybeString } from '../../helpers/colors';
@@ -25,8 +25,18 @@ export interface IReqoreIconProps
   margin?: 'right' | 'left' | 'both';
   image?: string;
   rounded?: boolean;
+  animation?: 'spin' | 'heartbeat';
 }
 
+const SpinKeyframes = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
 export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left' | 'both' }>`
   display: inline-block;
   flex: 0 0 auto;
@@ -54,6 +64,12 @@ export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left'
   img {
     width: 100%;
   }
+
+  ${({ animation }) =>
+    animation === 'spin' &&
+    css`
+      animation: ${SpinKeyframes} 1s linear infinite;
+    `}
 `;
 
 const ReqoreIcon = memo(

package/src/components/Message/index.tsx

@@ -29,6 +29,7 @@ import {
   StyledReqoreNotification,
   typeToIcon,
 } from '../Notifications/notification';
+import { ReqoreSpinner } from '../Spinner';
 
 export interface IReqoreMessageProps
   extends IWithReqoreCustomTheme,
@@ -147,12 +148,21 @@ const ReqoreMessage = memo(
           >
             {leftIcon ? (
               <StyledIconWrapper intent={intent} size={size} theme={theme}>
-                <ReqoreIcon
-                  icon={leftIcon}
-                  margin={flat && minimal ? 'right' : 'both'}
-                  size={size}
-                  color={iconColor}
-                />
+                {intent === 'pending' ? (
+                  <ReqoreSpinner
+                    size={size}
+                    iconColor={iconColor}
+                    type={5}
+                    iconMargin={flat && minimal ? 'right' : 'both'}
+                  />
+                ) : (
+                  <ReqoreIcon
+                    icon={leftIcon}
+                    margin={flat && minimal ? 'right' : 'both'}
+                    size={size}
+                    color={iconColor}
+                  />
+                )}
               </StyledIconWrapper>
             ) : null}
             <StyledNotificationContentWrapper size={size} theme={theme}>

package/src/components/Notifications/notification.tsx

@@ -26,6 +26,7 @@ import { IReqoreIconName } from '../../types/icons';
 import { StyledEffect } from '../Effect';
 import { ReqoreHeading } from '../Header';
 import ReqoreIcon from '../Icon';
+import { ReqoreSpinner } from '../Spinner';
 
 export type IReqoreNotificationType = TReqoreIntent;
 
@@ -244,8 +245,6 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
     const [internalTimeout, setInternalTimeout] = useState(null);
     const theme = useReqoreTheme('main', customTheme, type || intent, 'notifications');
 
-    console.log(theme, customTheme, intent);
-
     const transitions = useTransition(true, {
       from: { opacity: 0, transform: 'scale(0.9)' },
       enter: { opacity: 1, transform: 'scale(1)' },
@@ -301,7 +300,15 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
           >
             {type || intent || icon ? (
               <StyledIconWrapper type={type || intent} size={size}>
-                <ReqoreIcon icon={icon || typeToIcon[type || intent]} margin={'both'} size={size} />
+                {intent === 'pending' || type === 'pending' ? (
+                  <ReqoreSpinner size={size} type={5} iconMargin={'both'} />
+                ) : (
+                  <ReqoreIcon
+                    icon={icon || typeToIcon[type || intent]}
+                    margin={'both'}
+                    size={size}
+                  />
+                )}
               </StyledIconWrapper>
             ) : null}
             <StyledNotificationContentWrapper size={size} theme={theme}>

package/src/components/Paragraph/index.tsx

@@ -1,25 +1,41 @@
-import styled, { css } from 'styled-components';
-import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import { getReadableColor } from '../../helpers/colors';
+import { memo } from 'react';
+import styled from 'styled-components';
+import { TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { isStringSize } from '../../helpers/utils';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreEffect } from '../../types/global';
+import { StyledTextEffect } from '../Effect';
 
-export interface IReqoreParagraphStyle extends React.HTMLAttributes<HTMLHeadingElement> {
-  theme: IReqoreTheme;
-  intent?: TReqoreIntent;
+export interface IReqoreParagraphProps
+  extends React.HTMLAttributes<HTMLParagraphElement>,
+    IWithReqoreCustomTheme,
+    IWithReqoreEffect,
+    IReqoreIntent {
+  size?: TSizes | string;
 }
 
-const style = ({ theme, intent }: IReqoreParagraphStyle) => css`
+export const StyledParagraph = styled(StyledTextEffect)`
   margin: 0;
   padding: 0;
-  color: ${intent ? theme.intents[intent] : getReadableColor(theme, undefined, undefined, true)};
+  color: ${({ theme, intent }) => (intent ? theme.intents[intent] : 'inherit')};
+  font-size: ${({ _size }) => (isStringSize(_size) ? `${TEXT_FROM_SIZE[_size]}px` : _size)};
 `;
 
-export const ReqoreP: React.FC<Omit<IReqoreParagraphStyle, 'theme'>> = styled.p.attrs(
-  ({ className, ...rest }: IReqoreParagraphStyle) => ({
-    ...(rest || {}),
-    className: `${className} ${
-      rest?.intent ? `reqore-paragraph-${rest.intent} ` : ``
-    } reqore-paragraph`,
-  })
-)<IReqoreParagraphStyle>`
-  ${(props: IReqoreParagraphStyle) => style(props)};
-`;
+export const ReqoreP = memo(
+  ({ size, children, customTheme, intent, className, ...props }: IReqoreParagraphProps) => {
+    const theme = useReqoreTheme('main', customTheme, intent);
+
+    return (
+      <StyledParagraph
+        as='p'
+        theme={theme}
+        intent={intent}
+        {...props}
+        _size={size}
+        className={`${className || ''} reqore-paragraph`}
+      >
+        {children}
+      </StyledParagraph>
+    );
+  }
+);

package/src/components/Spinner/index.tsx

@@ -0,0 +1,62 @@
+import { useCallback } from 'react';
+import { ReqoreIcon, ReqoreP } from '../..';
+import { TSizes } from '../../constants/sizes';
+import { TReqoreIntent } from '../../constants/theme';
+import { IWithReqoreEffect } from '../../types/global';
+import ReqoreControlGroup from '../ControlGroup';
+import { IReqoreEffect, TReqoreEffectColor } from '../Effect';
+
+export interface IReqoreSpinnerProps extends IWithReqoreEffect {
+  size?: TSizes | string;
+  intent?: TReqoreIntent;
+  children?: any;
+  type?: 2 | 3 | 4 | 5;
+  iconColor?: TReqoreEffectColor;
+  labelEffect?: IReqoreEffect;
+  iconMargin?: 'right' | 'left' | 'both';
+  centered?: boolean;
+}
+
+export const ReqoreSpinner = ({
+  size,
+  intent,
+  children,
+  type,
+  iconColor,
+  labelEffect,
+  effect,
+  iconMargin,
+  centered,
+}: IReqoreSpinnerProps) => {
+  const renderContent = useCallback(() => {
+    return (
+      <ReqoreIcon
+        icon={!type ? 'LoaderLine' : `Loader${type}Line`}
+        color={iconColor || intent}
+        size={size}
+        effect={effect}
+        animation='spin'
+        className='reqore-spinner'
+        margin={iconMargin || (children ? 'right' : undefined)}
+      />
+    );
+  }, [size, intent, type, children, iconColor]);
+
+  if (children) {
+    return (
+      <ReqoreControlGroup vertical={centered} horizontalAlign={centered ? 'center' : undefined}>
+        {renderContent()}
+        <ReqoreP
+          size={size}
+          intent={intent}
+          effect={labelEffect}
+          className='reqore-spinner-wrapper'
+        >
+          {children}
+        </ReqoreP>
+      </ReqoreControlGroup>
+    );
+  }
+
+  return <>{renderContent()}</>;
+};

package/src/stories/Header/Header.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreHeadingProps } from '../../components/Header';
-import { ReqoreHeading } from '../../index';
+import { ReqoreHeading, ReqoreVerticalSpacer } from '../../index';
 import { IntentArg } from '../utils/args';
 
 export default {
@@ -16,18 +16,23 @@ const Template: Story<IReqoreHeadingProps> = (args) => {
       <ReqoreHeading size={1} {...args}>
         This is a heading
       </ReqoreHeading>
+      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={2} {...args}>
         This is a heading
       </ReqoreHeading>
+      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={3} {...args}>
         This is a heading
       </ReqoreHeading>
+      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={4} {...args}>
         This is a heading
       </ReqoreHeading>
+      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={5} {...args}>
         This is a heading
       </ReqoreHeading>
+      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={6} {...args}>
         This is a heading
       </ReqoreHeading>

package/src/stories/Message/Message.stories.tsx

@@ -65,6 +65,12 @@ Opaque.args = {
   intent: 'info',
 };
 
+export const Pending: Story<IReqoreMessageProps> = Template.bind({});
+Pending.args = {
+  opaque: true,
+  intent: 'pending',
+};
+
 export const CustomTheme: Story<IReqoreMessageProps> = Template.bind({});
 CustomTheme.args = {
   customTheme: {

package/src/stories/Notifications/Notification.stories.tsx

@@ -24,13 +24,7 @@ const Template: Story<IReqoreNotificationProps & IReqoreUIProviderProps> = ({
       content="Hello, I am a very simple notification. Look at me, look at me? Isn't this great?"
       onClick={noop}
     />
-    <ReqoreNotification
-      {...args}
-      type='pending'
-      icon='TimerLine'
-      content='I am still waiting'
-      onClick={noop}
-    />
+    <ReqoreNotification {...args} type='pending' content='I am still waiting' onClick={noop} />
     <ReqoreNotification
       {...args}
       type='success'

package/src/stories/Panel/Panel.stories.tsx

@@ -3,7 +3,7 @@ import { noop } from 'lodash';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../../components/Panel';
 import { ReqoreVerticalSpacer } from '../../components/Spacer';
-import { argManager, FlatArg, IconArg, IntentArg, SizeArg } from '../utils/args';
+import { FlatArg, IconArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
 
@@ -359,6 +359,7 @@ WithEffect.args = {
     gradient: {
       type: 'radial',
       shape: 'ellipse',
+      direction: 'at bottom center',
       colors: { 0: '#670079', 100: '#180222' },
       animate: 'hover',
     },

package/src/stories/Paragraph/Paragraph.stories.tsx

@@ -0,0 +1,73 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { IReqoreParagraphProps } from '../../components/Paragraph';
+import { ReqoreParagraph, ReqoreVerticalSpacer } from '../../index';
+import { IntentArg } from '../utils/args';
+
+export default {
+  title: 'Components/Paragraph',
+  argTypes: {
+    ...IntentArg,
+  },
+} as Meta;
+
+const Template: Story<IReqoreParagraphProps> = (args) => {
+  return (
+    <>
+      <ReqoreParagraph size='tiny' {...args}>
+        This is a paragraph of some text
+      </ReqoreParagraph>
+      <ReqoreVerticalSpacer height={10} />
+      <ReqoreParagraph size='small' {...args}>
+        This is a paragraph of some text
+      </ReqoreParagraph>
+      <ReqoreVerticalSpacer height={10} />
+      <ReqoreParagraph size='normal' {...args}>
+        This is a paragraph of some text
+      </ReqoreParagraph>
+      <ReqoreVerticalSpacer height={10} />
+      <ReqoreParagraph size='big' {...args}>
+        This is a paragraph of some text
+      </ReqoreParagraph>
+      <ReqoreVerticalSpacer height={10} />
+      <ReqoreParagraph size='huge' {...args}>
+        This is a paragraph of some text
+      </ReqoreParagraph>
+    </>
+  );
+};
+
+export const Basic = Template.bind({});
+export const Success = Template.bind({});
+Success.args = {
+  intent: 'success',
+};
+export const Danger = Template.bind({});
+Danger.args = {
+  intent: 'danger',
+};
+export const Warning = Template.bind({});
+Warning.args = {
+  intent: 'warning',
+};
+export const Info = Template.bind({});
+Info.args = {
+  intent: 'info',
+};
+export const Pending = Template.bind({});
+Pending.args = {
+  intent: 'pending',
+};
+export const Muted = Template.bind({});
+Muted.args = {
+  intent: 'muted',
+};
+export const Effect = Template.bind({});
+Effect.args = {
+  effect: {
+    gradient: { colors: { 0: '#5e0acc', 100: '#c008c0' } },
+    spaced: 4,
+    weight: 'bold',
+    uppercase: true,
+    textSize: '40px',
+  },
+};

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

@@ -76,7 +76,6 @@ const Template: Story<IReqoreSpacerProps> = () => {
               animate: 'always',
               animationSpeed: 5,
               type: 'radial',
-              direction: 'to right',
             },
             glow: {
               color: 'success',

package/src/stories/Spinner/Spinner.stories.tsx

@@ -0,0 +1,63 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { IReqoreSpinnerProps, ReqoreSpinner } from '../../components/Spinner';
+import { ReqoreControlGroup } from '../../index';
+
+export default {
+  title: 'Components/Spinner',
+} as Meta;
+
+const Template: Story<IReqoreSpinnerProps> = (args) => {
+  return (
+    <ReqoreControlGroup vertical gapSize='huge'>
+      <ReqoreSpinner {...args}>{args.children}</ReqoreSpinner>
+      <ReqoreSpinner type={2} {...args}>
+        {args.children}
+      </ReqoreSpinner>
+      <ReqoreSpinner type={3} {...args}>
+        {args.children}
+      </ReqoreSpinner>
+      <ReqoreSpinner type={4} {...args}>
+        {args.children}
+      </ReqoreSpinner>
+      <ReqoreSpinner type={5} {...args}>
+        {args.children}
+      </ReqoreSpinner>
+      <ReqoreSpinner intent='info' {...args}>
+        {args.children}
+      </ReqoreSpinner>
+      <ReqoreSpinner type={2} size='small' {...args}>
+        {args.children}
+      </ReqoreSpinner>
+      <ReqoreSpinner {...args} type={3} iconColor='success:lighten:2' size='50px'>
+        {args.children}
+      </ReqoreSpinner>
+      <ReqoreSpinner
+        {...args}
+        type={4}
+        iconColor='#f21616'
+        labelEffect={{ gradient: { colors: 'warning' } }}
+        size='big'
+      >
+        {args.children}
+      </ReqoreSpinner>
+      <ReqoreSpinner {...args} type={5} iconColor='#987df4'>
+        {args.children}
+      </ReqoreSpinner>
+      <ReqoreSpinner {...args} type={5} effect={{ blur: 2 }} iconColor='pending'>
+        {args.children}
+      </ReqoreSpinner>
+    </ReqoreControlGroup>
+  );
+};
+
+export const Basic = Template.bind({});
+export const WithLabel = Template.bind({});
+WithLabel.args = {
+  children: 'Loading...',
+};
+
+export const Centered = Template.bind({});
+Centered.args = {
+  children: 'Loading...',
+  centered: true,
+};