@qoretechnologies/reqore 0.20.1 → 0.20.2

package/src/components/Notifications/index.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+
+export interface IReqoreNotificationsWrapperProps {
+  children: any;
+  position?: IReqoreNotificationsPosition;
+}
+
+export type IReqoreNotificationsPosition =
+  | 'TOP'
+  | 'BOTTOM'
+  | 'TOP LEFT'
+  | 'TOP RIGHT'
+  | 'BOTTOM LEFT'
+  | 'BOTTOM RIGHT';
+
+export interface IReqoreNotificationsStyle {
+  positions: string[];
+}
+const StyledNotificationsWrapper = styled.div<IReqoreNotificationsStyle>`
+  position: fixed;
+  z-index: 10000;
+  padding: 0 20px 20px 20px;
+
+  ${({ positions }) => {
+    const hasTwoPositions = positions.length > 1;
+
+    if (hasTwoPositions) {
+      return css`
+        ${positions[0]}: 30px;
+        ${positions[1]}: 30px;
+      `;
+    }
+
+    return css`
+      ${positions[0]}: 30px;
+      left: 50%;
+      transform: translateX(-50%);
+    `;
+  }}
+`;
+
+const ReqoreNotificationsWrapper: React.FC<IReqoreNotificationsWrapperProps> = forwardRef(
+  ({ children, position = 'TOP' }, ref: any) => (
+    <StyledNotificationsWrapper
+      positions={position
+        .split(' ')
+        .map((p: IReqoreNotificationsPosition | string): string => p.toLowerCase())}
+      ref={ref}
+    >
+      {children}
+    </StyledNotificationsWrapper>
+  )
+);
+
+export default ReqoreNotificationsWrapper;

package/src/components/Notifications/notification.tsx

@@ -0,0 +1,288 @@
+import { animated, useTransition } from '@react-spring/web';
+import { darken, rgba } from 'polished';
+import React, { forwardRef, useEffect, useState } from 'react';
+import { useMount, useUnmount } from 'react-use';
+import styled, { css, keyframes } from 'styled-components';
+import { SPRING_CONFIG } from '../../constants/animations';
+import { PADDING_FROM_SIZE, TABS_SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import { fadeIn } from '../../helpers/animations';
+import {
+  changeDarkness,
+  changeLightness,
+  getNotificationIntent,
+  getReadableColorFrom,
+} from '../../helpers/colors';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreIcon from '../Icon';
+
+export type IReqoreNotificationType = IReqoreIntent;
+
+export interface IReqoreNotificationProps {
+  type?: IReqoreNotificationType;
+  intent?: IReqoreIntent;
+  title?: string;
+  content: string;
+  icon?: IReqoreIconName;
+  onClose?: () => any;
+  onClick?: () => any;
+  duration?: number;
+  onFinish?: () => any;
+  fluid?: boolean;
+  flat?: boolean;
+  inverted?: boolean;
+  size?: TSizes;
+}
+
+export interface IReqoreNotificationStyle {
+  theme: IReqoreTheme;
+  type?: IReqoreNotificationType;
+  clickable?: boolean;
+  timeout?: number;
+  intent?: IReqoreIntent;
+  hasShadow?: boolean;
+  fluid?: boolean;
+  flat?: boolean;
+  inverted?: boolean;
+  size?: TSizes;
+}
+
+const timeoutAnimation = keyframes`
+  0% {
+    width: 100%;
+  }
+  100% {
+    width: 0;
+  }
+`;
+
+export const StyledReqoreNotification = styled(animated.div)<IReqoreNotificationStyle>`
+  min-width: ${({ fluid }) => (!fluid ? '200px' : undefined)};
+  max-width: ${({ fluid }) => (!fluid ? '450px' : undefined)};
+  border-radius: 5px;
+  min-height: ${({ size = 'normal' }: IReqoreNotificationStyle) => TABS_SIZE_TO_PX[size]}px;
+  display: flex;
+  flex: 0 1 auto;
+  overflow: auto;
+  position: relative;
+  transition: all 0.2s ease-out;
+  animation: 0.2s ${fadeIn} ease-in;
+  font-size: ${({ size = 'normal' }) => TEXT_FROM_SIZE[size]}px;
+
+  &:not(:first-child) {
+    margin-top: 10px;
+  }
+
+  ${({
+    theme,
+    type,
+    intent,
+    clickable,
+    timeout,
+    hasShadow,
+    flat,
+    inverted,
+  }: IReqoreNotificationStyle) => css`
+    background-color: ${inverted ? 'transparent' : getNotificationIntent(theme, intent || type)};
+    border: ${flat ? 0 : '1px solid'};
+    border-color: ${inverted
+      ? getNotificationIntent(theme, intent || type)
+      : darken(0.2, getNotificationIntent(theme, intent || type))};
+
+    ${hasShadow &&
+    css`
+      box-shadow: 0px 0px 30px 10px ${rgba('#000000', 0.3)};
+    `}
+
+    ${timeout &&
+    css`
+      &::before {
+        content: '';
+        position: absolute;
+        display: block;
+        top: 0;
+        height: 3px;
+        background-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.1)};
+        animation-name: ${timeoutAnimation};
+        animation-duration: ${timeout}ms;
+      }
+    `}
+
+    color: ${inverted && (intent || type)
+      ? getNotificationIntent(theme, intent || type)
+      : getReadableColorFrom(getNotificationIntent(theme, intent || type), true)};
+
+    ${clickable &&
+    css`
+      cursor: pointer;
+      &:hover {
+        background-color: ${inverted
+          ? rgba(changeDarkness(getNotificationIntent(theme, intent || type), 0.2), 0.1)
+          : changeLightness(getNotificationIntent(theme, intent || type), 0.0625)};
+      }
+    `}
+  `}
+`;
+
+export const StyledIconWrapper = styled.div<IReqoreNotificationStyle>`
+  min-height: ${({ size = 'normal' }: IReqoreNotificationStyle) => TABS_SIZE_TO_PX[size]}px;
+  flex: 0 1 auto;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.2s ease-out;
+
+  ${({ clickable, theme, intent, type }) =>
+    clickable &&
+    css`
+      .reqore-icon {
+        transform: scale(0.85);
+      }
+
+      &:hover {
+        cursor: pointer;
+        background-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.02)};
+        .reqore-icon {
+          transform: scale(1);
+        }
+      }
+    `}
+`;
+
+export const StyledNotificationContentWrapper = styled.div<IReqoreNotificationStyle>`
+  flex: 1;
+  min-height: ${({ size = 'normal' }: IReqoreNotificationStyle) => TABS_SIZE_TO_PX[size]}px;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  padding: ${({ size = 'normal' }: IReqoreNotificationStyle) => `${PADDING_FROM_SIZE[size]}px`};
+`;
+
+export const StyledNotificationTitle = styled.h4`
+  margin: 0 0 5px 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+`;
+
+export const StyledNotificationContent = styled.p`
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  display: flex;
+  align-items: center;
+`;
+
+export const typeToIcon: { [type: string]: IReqoreIconName } = {
+  info: 'InformationLine',
+  pending: 'TimerLine',
+  warning: 'AlarmWarningLine',
+  danger: 'ErrorWarningLine',
+  success: 'CheckFill',
+  muted: 'Forbid2Line',
+};
+
+const ReqoreNotification: React.FC<IReqoreNotificationProps> = forwardRef(
+  (
+    {
+      type,
+      intent,
+      icon,
+      title,
+      content,
+      onClose,
+      onClick,
+      duration,
+      onFinish,
+      flat,
+      inverted,
+      size = 'normal',
+    },
+    ref: any
+  ) => {
+    const [internalTimeout, setInternalTimeout] = useState(null);
+
+    const transitions = useTransition(true, {
+      from: { opacity: 0, transform: 'scale(0.9)' },
+      enter: { opacity: 1, transform: 'scale(1)' },
+      leave: { opacity: 0, transform: 'scale(0.9)' },
+      config: SPRING_CONFIG,
+    });
+
+    useMount(() => {
+      if (duration) {
+        setInternalTimeout(
+          setTimeout(() => {
+            onFinish && onFinish();
+          }, duration)
+        );
+      }
+    });
+
+    useEffect(() => {
+      if (internalTimeout) {
+        clearTimeout(internalTimeout);
+        setInternalTimeout(
+          setTimeout(() => {
+            onFinish && onFinish();
+          }, duration)
+        );
+      }
+    }, [duration, type, intent, content, title]);
+
+    useUnmount(() => {
+      clearTimeout(internalTimeout);
+    });
+
+    return transitions((styles, item) =>
+      item ? (
+        <ReqoreThemeProvider>
+          <StyledReqoreNotification
+            key={`${duration}${type || intent}${title}${content}`}
+            type={type || intent}
+            hasShadow
+            timeout={duration}
+            clickable={!!onClick}
+            onClick={onClick}
+            flat={flat}
+            inverted={inverted}
+            className='reqore-notification'
+            ref={ref}
+            style={styles}
+            size={size}
+          >
+            {type || intent || icon ? (
+              <StyledIconWrapper type={type || intent} size={size}>
+                <ReqoreIcon
+                  icon={icon || typeToIcon[type || intent]}
+                  margin={'both'}
+                  size={`${TEXT_FROM_SIZE[size]}px`}
+                />
+              </StyledIconWrapper>
+            ) : null}
+            <StyledNotificationContentWrapper size={size}>
+              {title && <StyledNotificationTitle>{title}</StyledNotificationTitle>}
+              <StyledNotificationContent>{content}</StyledNotificationContent>
+            </StyledNotificationContentWrapper>
+            <StyledIconWrapper
+              type={type || intent}
+              size={size}
+              clickable
+              className='reqore-notification-close'
+              onClick={(event) => {
+                event.stopPropagation();
+                onClose && onClose();
+              }}
+            >
+              <ReqoreIcon icon='CloseFill' margin='both' size={`${TEXT_FROM_SIZE[size]}px`} />
+            </StyledIconWrapper>
+          </StyledReqoreNotification>
+        </ReqoreThemeProvider>
+      ) : null
+    );
+  }
+);
+
+export default ReqoreNotification;

package/src/components/Panel/index.tsx

@@ -0,0 +1,333 @@
+import { size } from 'lodash';
+import { rgba } from 'polished';
+import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
+import { useUpdateEffect } from 'react-use';
+import styled, { css } from 'styled-components';
+import { RADIUS_FROM_SIZE } from '../../constants/sizes';
+import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import ReqoreThemeProvider from '../../containers/ThemeProvider';
+import {
+  changeDarkness,
+  changeLightness,
+  getMainBackgroundColor,
+  getReadableColor,
+} from '../../helpers/colors';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { IReqoreIconName } from '../../types/icons';
+import ReqoreButton from '../Button';
+import ReqoreControlGroup from '../ControlGroup';
+import ReqoreDropdown from '../Dropdown';
+import { IReqoreDropdownItemProps } from '../Dropdown/item';
+import ReqoreIcon from '../Icon';
+
+export interface IReqorePanelAction {
+  icon?: IReqoreIconName;
+  label?: string;
+  onClick?: () => void;
+  intent?: IReqoreIntent;
+  actions?: IReqoreDropdownItemProps[];
+  className?: string;
+  id?: string;
+}
+
+export interface IReqorePanelBottomAction extends IReqorePanelAction {
+  position: 'left' | 'right';
+}
+
+export interface IReqorePanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  as?: any;
+  children?: any;
+  icon?: IReqoreIconName;
+  label?: string | ReactElement<any>;
+  collapsible?: boolean;
+  isCollapsed?: boolean;
+  onClose?: () => void;
+  rounded?: boolean;
+  actions?: IReqorePanelAction[];
+  bottomActions?: IReqorePanelBottomAction[];
+  customTheme?: IReqoreTheme;
+  intent?: IReqoreIntent;
+  flat?: boolean;
+  unMountContentOnCollapse?: boolean;
+  onCollapseChange?: (isCollapsed?: boolean) => void;
+  fill?: boolean;
+  padded?: boolean;
+  contentStyle?: React.CSSProperties;
+  opacity?: number;
+  blur?: number;
+}
+
+export interface IStyledPanel extends IReqorePanelProps {
+  theme: IReqoreTheme;
+}
+
+export const StyledPanel = styled.div<IStyledPanel>`
+  background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
+    changeDarkness(rgba(getMainBackgroundColor(theme), opacity), 0.03)};
+  border-radius: ${({ rounded }) => (rounded ? RADIUS_FROM_SIZE.normal : 0)}px;
+  border: ${({ theme, flat, opacity = 1 }) =>
+    flat
+      ? undefined
+      : `1px solid ${changeLightness(rgba(getMainBackgroundColor(theme), opacity), 0.2)}`};
+  color: ${({ theme }) => getReadableColor(theme, undefined, undefined, true)};
+  overflow: hidden;
+  display: flex;
+  flex-flow: column;
+  position: relative;
+  z-index: 1;
+  backdrop-filter: ${({ blur, opacity }) => (blur && opacity < 1 ? `blur(${blur}px)` : undefined)};
+
+  ${({ fill, isCollapsed }) =>
+    !isCollapsed && fill
+      ? css`
+          height: 100%;
+          flex: 1;
+        `
+      : undefined}
+`;
+
+export const StyledPanelTitle = styled.div<IStyledPanel>`
+  display: flex;
+  background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
+    changeLightness(rgba(getMainBackgroundColor(theme), opacity), 0.07)};
+  justify-content: space-between;
+  height: 40px;
+  align-items: center;
+  padding: 0 5px 0 15px;
+  border-bottom: ${({ theme, isCollapsed, flat, opacity = 1 }) =>
+    !isCollapsed && !flat
+      ? `1px solid ${changeLightness(rgba(getMainBackgroundColor(theme), opacity), 0.2)}`
+      : null};
+  transition: background-color 0.2s ease-out;
+  overflow: hidden;
+  flex: 0 0 auto;
+
+  ${({ collapsible }) =>
+    collapsible &&
+    css`
+      cursor: pointer;
+      &:hover {
+        background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
+          changeLightness(rgba(getMainBackgroundColor(theme), opacity), 0.1)};
+      }
+    `}
+`;
+
+export const StyledPanelBottomActions = styled(StyledPanelTitle)`
+  padding-left: 5px;
+  border-bottom: 0;
+  border-top: ${({ theme, flat, opacity = 1 }) =>
+    !flat
+      ? `1px solid ${changeLightness(rgba(getMainBackgroundColor(theme), opacity), 0.2)}`
+      : null};
+`;
+
+export const StyledPanelContent = styled.div<IStyledPanel>`
+  display: ${({ isCollapsed }) => (isCollapsed ? 'none' : undefined)};
+  min-height: ${({ isCollapsed }) => (isCollapsed ? undefined : '40px')};
+  padding: ${({ padded }) => (!padded ? undefined : '10px')};
+  flex: 1;
+  overflow: auto;
+`;
+
+export const StyledPanelTitleLabel = styled.span`
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+export const StyledPanelTitleHeader = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  padding-right: 5px;
+
+  ${StyledPanelTitleLabel} {
+    font-weight: 600;
+  }
+`;
+
+export const ReqorePanel = forwardRef(
+  (
+    {
+      children,
+      label,
+      collapsible,
+      onClose,
+      rounded = true,
+      actions = [],
+      bottomActions = [],
+      isCollapsed,
+      customTheme,
+      icon,
+      intent,
+      className,
+      flat,
+      unMountContentOnCollapse = true,
+      onCollapseChange,
+      padded = true,
+      contentStyle,
+      ...rest
+    }: IReqorePanelProps,
+    ref
+  ) => {
+    const [_isCollapsed, setIsCollapsed] = useState(isCollapsed || false);
+    const theme = useReqoreTheme('main', customTheme, intent);
+
+    useUpdateEffect(() => {
+      setIsCollapsed(!!isCollapsed);
+    }, [isCollapsed]);
+
+    const hasTitleBar: boolean = useMemo(
+      () => !!label || collapsible || !!onClose || !!size(actions),
+      [label, collapsible, onClose, actions]
+    );
+
+    const handleCollapseClick = useCallback(() => {
+      if (collapsible) {
+        setIsCollapsed(!_isCollapsed);
+        onCollapseChange?.(!_isCollapsed);
+      }
+    }, [collapsible, _isCollapsed, onCollapseChange]);
+
+    const leftBottomActions: IReqorePanelBottomAction[] = useMemo(
+      () => bottomActions.filter(({ position }) => position === 'left'),
+      [bottomActions]
+    );
+
+    const rightBottomActions: IReqorePanelBottomAction[] = useMemo(
+      () => bottomActions.filter(({ position }) => position === 'right'),
+      [bottomActions]
+    );
+
+    const hasBottomActions: boolean = useMemo(
+      () => !!(size(leftBottomActions) || size(rightBottomActions)),
+      [leftBottomActions, rightBottomActions]
+    );
+
+    const renderActions = ({
+      label,
+      actions,
+      intent,
+      className,
+      id,
+      ...rest
+    }: IReqorePanelAction) =>
+      size(actions) ? (
+        <ReqoreDropdown
+          {...rest}
+          label={label}
+          componentProps={{
+            intent,
+            id,
+            minimal: true,
+            className,
+            onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
+              e.stopPropagation();
+            },
+          }}
+          items={actions}
+        />
+      ) : (
+        <ReqoreButton
+          {...rest}
+          id={id}
+          className={className}
+          customTheme={theme}
+          intent={intent}
+          onClick={
+            rest.onClick
+              ? (e: React.MouseEvent<HTMLButtonElement>) => {
+                  e.stopPropagation();
+                  rest.onClick?.();
+                }
+              : undefined
+          }
+        >
+          {label}
+        </ReqoreButton>
+      );
+
+    return (
+      <ReqoreThemeProvider theme={theme}>
+        <StyledPanel
+          {...rest}
+          as={rest.as || 'div'}
+          ref={ref as any}
+          isCollapsed={_isCollapsed}
+          rounded={rounded}
+          flat={flat}
+          className={`${className || ''} reqore-panel`}
+        >
+          {hasTitleBar && (
+            <StyledPanelTitle
+              flat={flat}
+              isCollapsed={_isCollapsed}
+              collapsible={collapsible}
+              className='reqore-panel-title'
+              onClick={handleCollapseClick}
+              theme={theme}
+              opacity={rest.opacity}
+            >
+              <StyledPanelTitleHeader>
+                {icon && <ReqoreIcon icon={icon} margin='right' />}
+                {typeof label === 'string' ? (
+                  <StyledPanelTitleLabel>{label}</StyledPanelTitleLabel>
+                ) : (
+                  label
+                )}
+              </StyledPanelTitleHeader>
+              <ReqoreControlGroup minimal>
+                {actions.map(renderActions)}
+                {collapsible && (
+                  <ReqoreButton
+                    customTheme={theme}
+                    icon={_isCollapsed ? 'ArrowDownSLine' : 'ArrowUpSLine'}
+                    onClick={handleCollapseClick}
+                    tooltip={_isCollapsed ? 'Expand' : 'Collapse'}
+                  />
+                )}
+                {onClose && (
+                  <ReqoreButton
+                    customTheme={theme}
+                    icon='CloseLine'
+                    onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                      e.stopPropagation();
+                      onClose?.();
+                    }}
+                  />
+                )}
+              </ReqoreControlGroup>
+            </StyledPanelTitle>
+          )}
+          {!_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? (
+            <StyledPanelContent
+              className='reqore-panel-content'
+              isCollapsed={_isCollapsed}
+              style={contentStyle}
+              padded={padded}
+            >
+              {children}
+            </StyledPanelContent>
+          ) : null}
+          {hasBottomActions && !_isCollapsed ? (
+            <StyledPanelBottomActions
+              flat={flat}
+              className='reqore-panel-bottom-actions'
+              theme={theme}
+              opacity={rest.opacity}
+            >
+              <ReqoreControlGroup minimal>
+                {leftBottomActions.map(renderActions)}
+              </ReqoreControlGroup>
+              <ReqoreControlGroup minimal>
+                {rightBottomActions.map(renderActions)}
+              </ReqoreControlGroup>
+            </StyledPanelBottomActions>
+          ) : null}
+        </StyledPanel>
+      </ReqoreThemeProvider>
+    );
+  }
+);

package/src/components/Panel/panel.screenshot.tsx

@@ -0,0 +1,29 @@
+import { noop } from 'lodash';
+import { ReqorePanel } from '../../index';
+
+export const SomePanel = () => (
+  <ReqorePanel
+    collapsible
+    intent='danger'
+    title='DANGER'
+    icon='AlarmWarningLine'
+    padded
+    actions={[
+      {
+        icon: 'Settings2Line',
+        onClick: noop,
+      },
+      {
+        icon: 'UserFill',
+        onClick: noop,
+        label: 'Test',
+      },
+    ]}
+  >
+    I am a message a very long message - Shadowlands has mechanisms put in place for allowing
+    players to catch up on Renown, the system of gaining favor and unlocking rewards, Campaign
+    chapters, and soulbinds within your Covenant. This system works for main characters who have
+    started late, for alts, for players who have switched Covenants and are starting over, and for
+    players who have simply missed weekly quests for earning Renown due to being away from the game.
+  </ReqorePanel>
+);