@cloud-ru/uikit-product-claudia 1.6.2

package/src/components/ButtonGiga/types.ts

@@ -0,0 +1,43 @@
+import {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  FocusEventHandler,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  ReactElement,
+} from 'react';
+
+import { ValueOf } from '@snack-uikit/utils';
+
+import { APPEARANCE, ICON_POSITION, SIZE } from './constants';
+
+export type Appearance = ValueOf<typeof APPEARANCE>;
+
+export type IconPosition = ValueOf<typeof ICON_POSITION>;
+
+export type Size = ValueOf<typeof SIZE>;
+
+export type BaseButtonProps = {
+  className?: string;
+  disabled?: boolean;
+  icon?: ReactElement;
+  iconPosition?: IconPosition;
+  label?: string;
+  loading?: boolean;
+  onClick?: MouseEventHandler<HTMLElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLElement>;
+  onFocus?: FocusEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+  onBlur?: FocusEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+  size?: Size;
+  appearance?: Appearance;
+  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  tabIndex?: number;
+  fullWidth?: boolean;
+};
+
+export type AnchorButtonProps = {
+  href?: string;
+  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+};
+
+export type CommonButtonProps = AnchorButtonProps & BaseButtonProps;

package/src/components/ChatStatusAnnouncement/ChatStatusAnnouncement.tsx

@@ -0,0 +1,109 @@
+import cn from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+
+import { PlaceholderSVG } from '@cloud-ru/uikit-product-icons';
+import { LAYOUT_TYPE } from '@cloud-ru/uikit-product-utils';
+
+import { ANIMATION_INTERVAL } from './constants';
+import { AlertButton } from './helperComponents/AlertButton';
+import { TextContent } from './helperComponents/TextContent';
+import styles from './styled.module.scss';
+import { ChatStatusAnnouncementProps } from './types';
+import { getContent, isReactNode } from './utils';
+
+export function ChatStatusAnnouncement({
+  content,
+  onActionClick,
+  actionLabel,
+  icon,
+  layoutType,
+  className,
+}: ChatStatusAnnouncementProps) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isAnimationEnded, setAnimationEnded] = useState(false);
+  const [mouseEntered, setMouseEntered] = useState(false);
+  const hoverRef = useRef<NodeJS.Timeout>();
+  const totalTextItems = getContent(content);
+  const isMobile = layoutType === LAYOUT_TYPE.Mobile;
+
+  useEffect(() => () => clearTimeout(hoverRef.current));
+
+  // запуск основной анимации
+  useEffect(() => {
+    if (isReactNode(content) || isAnimationEnded || content.length <= 1) return;
+
+    let interval: NodeJS.Timeout;
+
+    if (currentIndex === content.length - 1) {
+      interval = setInterval(() => {
+        setAnimationEnded(true);
+      }, ANIMATION_INTERVAL);
+      return;
+    }
+
+    interval = setInterval(() => {
+      setCurrentIndex(prevIndex => (prevIndex + 1) % content.length);
+    }, ANIMATION_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, [currentIndex, content, isAnimationEnded]);
+
+  // запуск анимации по ховеру
+  useEffect(() => {
+    if (!isAnimationEnded || totalTextItems.length === 1) return;
+
+    const runForwardAnimation = () => {
+      if (hoverRef.current) clearTimeout(hoverRef.current);
+
+      if (currentIndex === totalTextItems.length - 1) return;
+
+      hoverRef.current = setTimeout(() => setCurrentIndex(prev => prev + 1), 300);
+    };
+
+    const runBackwardAnimation = () => {
+      if (hoverRef.current) clearTimeout(hoverRef.current);
+
+      if (currentIndex <= totalTextItems.length - 2) return;
+
+      hoverRef.current = setTimeout(() => setCurrentIndex(prev => prev - 1), 300);
+    };
+
+    if (mouseEntered) {
+      runForwardAnimation();
+      return;
+    }
+    runBackwardAnimation();
+  }, [currentIndex, isAnimationEnded, mouseEntered, totalTextItems.length]);
+
+  const onMouseEnter = () => setMouseEntered(true);
+
+  const onMouseLeave = () => setMouseEntered(false);
+
+  return (
+    <div
+      className={cn(styles.fieldAdvice, className)}
+      data-mobile={isMobile || undefined}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <div className={styles.descriptionContainer}>
+        {icon ?? <PlaceholderSVG size={16} />}
+        <div className={styles.animationContainer}>
+          {totalTextItems.map((item, index) => {
+            const currentTextNextOrPreviousStyle =
+              index === (currentIndex - 1 + totalTextItems.length) % totalTextItems.length
+                ? styles.textBlockPrevious
+                : styles.textBlockNext;
+
+            const currentTextStyle = index === currentIndex ? styles.textBlockCurrent : currentTextNextOrPreviousStyle;
+
+            return (
+              <TextContent key={index} content={item.content} className={cn(styles.textBlock, currentTextStyle)} />
+            );
+          })}
+        </div>
+      </div>
+      <AlertButton onClick={onActionClick} text={actionLabel} layoutType={layoutType} />
+    </div>
+  );
+}

package/src/components/ChatStatusAnnouncement/constants.ts

@@ -0,0 +1 @@
+export const ANIMATION_INTERVAL = 1900;

package/src/components/ChatStatusAnnouncement/helperComponents/AlertButton/AlertButton.tsx

@@ -0,0 +1,24 @@
+import { MouseEvent } from 'react';
+
+import { LAYOUT_TYPE, LayoutType } from '@cloud-ru/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+
+type PrivateAlertButtonProps = {
+  text?: string;
+  onClick?(e: MouseEvent<HTMLButtonElement>): void;
+  layoutType: LayoutType;
+};
+
+export type AlertButtonProps = Omit<PrivateAlertButtonProps, 'appearance' | 'variant'>;
+
+export function AlertButton({ text, onClick, layoutType }: PrivateAlertButtonProps) {
+  const TypographyText = layoutType === LAYOUT_TYPE.Mobile ? Typography.SansLabelL : Typography.SansLabelM;
+
+  return (
+    <button type='button' onClick={onClick} className={styles.alertButton}>
+      {text && <TypographyText className={styles.text}>{text}</TypographyText>}
+    </button>
+  );
+}

package/src/components/ChatStatusAnnouncement/helperComponents/AlertButton/index.ts

@@ -0,0 +1 @@
+export * from './AlertButton';

package/src/components/ChatStatusAnnouncement/helperComponents/AlertButton/styles.module.scss

@@ -0,0 +1,27 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.alertButton {
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 16px;
+
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+
+  white-space: nowrap;
+
+  background: none;
+  border: 0;
+}
+
+.text {
+  color: stv.$sys-blue-text-support;
+
+  &:hover {
+    color: stv.$sys-blue-text-main;
+  }
+}

package/src/components/ChatStatusAnnouncement/helperComponents/TextContent/TextContent.tsx

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+import { Typography } from '@snack-uikit/typography';
+
+import { isReactNode } from '../../utils';
+
+type TextContent = {
+  content: ReactNode;
+  className?: string;
+};
+
+export function TextContent({ content, className }: TextContent) {
+  if (isReactNode(content)) {
+    return content;
+  }
+
+  return <Typography.SansBodyS className={className}>{content}</Typography.SansBodyS>;
+}

package/src/components/ChatStatusAnnouncement/helperComponents/TextContent/index.ts

@@ -0,0 +1 @@
+export * from './TextContent';

package/src/components/ChatStatusAnnouncement/index.ts

@@ -0,0 +1 @@
+export * from './ChatStatusAnnouncement';

package/src/components/ChatStatusAnnouncement/styled.module.scss

@@ -0,0 +1,65 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.fieldAdvice {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 4px 8px 0px 8px;
+  height: 38px;
+  max-height: 38px;
+  border-radius: 10px 10px 0 0;
+  border: 1px solid stv.$sys-blue-decor-activated;
+  background-color: stv.$sys-blue-decor-default;
+  box-sizing: border-box;
+
+  &[data-mobile] {
+    height: 44px;
+    max-height: 44px;
+    border-radius: 0;
+    padding: 8px 16px 0px 16px;
+  }
+}
+
+.descriptionContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+}
+
+.animationContainer {
+  position: relative;
+  width: 100%;
+  height: 16px;
+  padding: 0 8px 0 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  overflow: hidden;
+}
+
+.textBlock {
+  position: absolute;
+  padding: 0 8px 0 0;
+  box-sizing: border-box;
+  transition: all 0.7s ease-in-out;
+  will-change: transform, opacity;
+}
+
+.textBlockCurrent {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.textBlockPrevious {
+  opacity: 0;
+  transform: translateY(-50px);
+}
+
+.textBlockNext {
+  opacity: 0;
+  transform: translateY(50px);
+}

package/src/components/ChatStatusAnnouncement/types.ts

@@ -0,0 +1,17 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { LayoutType } from '@cloud-ru/uikit-product-utils';
+
+export type TextItem = {
+  content: ReactNode;
+  shouldFocusOnHover?: boolean;
+};
+
+export type ChatStatusAnnouncementProps = {
+  icon?: ReactElement;
+  content: ReactNode | TextItem[];
+  actionLabel: string;
+  onActionClick?: () => void;
+  layoutType: LayoutType;
+  className?: string;
+};

package/src/components/ChatStatusAnnouncement/utils/index.ts

@@ -0,0 +1,52 @@
+import { isValidElement, ReactElement, ReactNode } from 'react';
+
+import { ChatStatusAnnouncementProps, TextItem } from '../types';
+
+export function isString(value: unknown): value is string {
+  return typeof value === 'string';
+}
+
+export function isReactNode(value: unknown): value is ReactNode {
+  if (
+    value === null ||
+    value === undefined ||
+    typeof value === 'boolean' ||
+    typeof value === 'string' ||
+    typeof value === 'number'
+  ) {
+    return true;
+  }
+
+  if (isValidElement(value)) {
+    return true;
+  }
+
+  if (Array.isArray(value)) {
+    return value.every(item => isReactNode(item));
+  }
+
+  if (value && typeof value === 'object' && 'key' in value && 'props' in value && 'type' in value) {
+    return isValidElement(value as ReactElement);
+  }
+
+  return false;
+}
+
+export const getContent = (textContent: ChatStatusAnnouncementProps['content']): TextItem[] => {
+  if (isReactNode(textContent))
+    return [
+      {
+        content: textContent,
+      },
+    ];
+
+  if (textContent.length === 1) return textContent;
+
+  const alertTextElement = textContent.find(item => item.shouldFocusOnHover);
+
+  if (!alertTextElement) return textContent;
+
+  const totalTextItems = [...textContent, { content: alertTextElement.content }];
+
+  return totalTextItems;
+};

package/src/components/IconGiga/IconGiga.tsx

@@ -0,0 +1,64 @@
+import { CSSProperties, forwardRef, SVGProps } from 'react';
+
+import { GIGA_ICON_GRADIENT_ID, GRADIENT_PARAMS, GRADIENT_STOPS, ICON_PATH } from './constants';
+
+export type IconGigaProps = {
+  className?: string;
+  size?: number;
+  style?: CSSProperties;
+  withBranding?: boolean;
+} & SVGProps<SVGSVGElement>;
+
+export const IconGiga = forwardRef<SVGSVGElement, IconGigaProps>(
+  ({ size = 24, className, style, withBranding, ...props }, ref) => {
+    const customStyle: CSSProperties = {
+      ...style,
+    };
+
+    if (typeof size === 'number') {
+      customStyle.width = `${size}px`;
+      customStyle.height = `${size}px`;
+    }
+
+    if (withBranding) {
+      return (
+        <svg
+          ref={ref}
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          style={customStyle}
+          className={className}
+          {...props}
+        >
+          <path d={ICON_PATH} fill={`url(#${GIGA_ICON_GRADIENT_ID})`} />
+          <defs>
+            <radialGradient id={GIGA_ICON_GRADIENT_ID} {...GRADIENT_PARAMS}>
+              {GRADIENT_STOPS.map(({ offset, stopColor }) => (
+                <stop key={offset} offset={offset} stopColor={stopColor} />
+              ))}
+            </radialGradient>
+          </defs>
+        </svg>
+      );
+    }
+
+    return (
+      <svg
+        ref={ref}
+        width={24}
+        height={24}
+        viewBox='0 0 24 24'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+        style={customStyle}
+        className={className}
+        {...props}
+      >
+        <path d={ICON_PATH} fill='currentColor' />
+      </svg>
+    );
+  },
+);

package/src/components/IconGiga/constants.ts

@@ -0,0 +1,23 @@
+export const ICON_PATH =
+  'M12 3C7.02902 3 3 7.0297 3 12C3 16.9703 7.0297 21 12 21C16.9703 21 21 16.9703 21 12C21 7.0297 16.9703 3 12 3ZM5.54642 10.3679C5.4259 9.98549 5.40974 9.54784 5.49794 9.0698C5.65146 8.28473 6.04938 7.48418 6.64861 6.75499L6.65737 6.74422C8.04234 4.91352 10.4521 3.82075 13.1035 3.82075C13.6503 3.82075 14.1882 3.86721 14.7121 3.95878C12.7581 4.1399 10.7436 5.00038 8.71901 6.51934C8.63283 6.58398 8.57762 6.6816 8.56752 6.78866C8.55742 6.89571 8.59243 7.00277 8.66515 7.08289C9.32566 7.8114 9.98684 8.60791 10.7443 9.59026C10.8702 9.75387 11.1011 9.78821 11.2708 9.66769C12.7979 8.57358 14.1229 7.76292 15.4062 7.14147C15.349 7.79928 14.469 8.81866 13.5493 9.58959C12.0788 10.7934 10.308 12.0451 8.32176 12.2054L8.24434 12.2121C7.95213 12.2256 7.63769 12.1912 7.31114 12.1104C6.5254 11.9091 5.83257 11.223 5.54777 10.3686L5.54642 10.3679ZM11.9939 19.7827C10.1908 19.7827 8.53183 19.1673 7.21419 18.1358C7.466 18.1587 7.73128 18.1701 8.02012 18.1701C8.26184 18.1701 8.52039 18.162 8.79846 18.1466C10.4413 18.0267 12.1394 17.5372 13.7095 16.7326C15.2971 15.9186 16.6808 14.8178 17.713 13.5459C18.3822 12.6989 19.1841 11.3974 19.4117 9.81985C19.4258 9.83938 19.44 9.85958 19.4541 9.87978C19.6494 10.5605 19.7544 11.2796 19.7544 12.0236C19.7544 16.3091 16.2802 19.7833 11.9946 19.7833L11.9939 19.7827Z';
+
+export const GIGA_ICON_GRADIENT_ID = 'GIGA_ICON_GRADIENT_ID';
+
+export const GRADIENT_STOPS = [
+  { offset: '0.08', stopColor: '#7CB5F2' },
+  { offset: '0.17', stopColor: '#78B9EC' },
+  { offset: '0.28', stopColor: '#70C6DD' },
+  { offset: '0.38', stopColor: '#64D8C7' },
+  { offset: '0.44', stopColor: '#5FD7C2' },
+  { offset: '0.51', stopColor: '#54D5B3' },
+  { offset: '0.58', stopColor: '#40D39C' },
+  { offset: '0.66', stopColor: '#26D07C' },
+];
+
+export const GRADIENT_PARAMS = {
+  cx: '0',
+  cy: '0',
+  r: '1',
+  gradientUnits: 'userSpaceOnUse',
+  gradientTransform: 'translate(14.8575 6.90447) scale(16.6554)',
+};

package/src/components/IconGiga/index.ts

@@ -0,0 +1 @@
+export * from './IconGiga';

package/src/components/RecommendPannel/RecommendPanel.tsx

@@ -0,0 +1,131 @@
+import { ReactNode, useEffect, useRef, useState } from 'react';
+
+import { LAYOUT_TYPE, LayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { Chip } from './helperComponents/Chip';
+import { ClaudiaChip } from './helperComponents/ClaudiaChip';
+import { CloseChip } from './helperComponents/CloseChip';
+import { DropdownChip } from './helperComponents/DropdownChip';
+import styles from './styles.module.scss';
+import { CHIP_TYPE, ChipProps, ChipType, SIZE, Size } from './types';
+import { getVisibleChipsCount } from './utils/gitVisibleChipsCount';
+
+export type RecommendPanelProps = {
+  chips: ChipProps[];
+  size: Size;
+  type?: ChipType;
+  layoutType?: LayoutType;
+  onCloseClick?: () => void;
+  onCloseChipLabel?: ReactNode;
+  tooltip?: ReactNode;
+  onClaudiaClick?: () => void;
+};
+
+export function RecommendPanel({
+  chips,
+  type = CHIP_TYPE.Default,
+  size = SIZE.S,
+  layoutType,
+  onCloseClick,
+  onCloseChipLabel,
+  tooltip,
+  onClaudiaClick,
+}: RecommendPanelProps) {
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [isCloseIconVisible, setCloseIconVisible] = useState(false);
+  const [chipWidths, setChipWidths] = useState<number[]>([]);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const allChipsRefs = useRef<(HTMLButtonElement | HTMLElement | null)[]>([]);
+  const isSmall = size === SIZE.S;
+
+  useEffect(() => {
+    if (layoutType === LAYOUT_TYPE.Mobile) {
+      setCloseIconVisible(true);
+      return;
+    }
+
+    setCloseIconVisible(false);
+  }, [layoutType]);
+
+  useEffect(() => {
+    const widths = allChipsRefs.current.map(ref => {
+      if (!ref) return 0;
+      const rect = ref.getBoundingClientRect();
+
+      return rect.width;
+    });
+
+    setChipWidths(widths);
+  }, [chips, allChipsRefs]);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        setContainerWidth(entry.contentRect.width);
+      }
+    });
+
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  const visibleChipsCount = getVisibleChipsCount({
+    containerWidth,
+    chips,
+    chipWidths,
+    isSmall,
+    isCloseChipExist: Boolean(onCloseClick) && Boolean(onCloseChipLabel),
+  });
+  const visibleChips = chips.slice(0, visibleChipsCount);
+  const hiddenChips = chips.slice(visibleChipsCount);
+  const hasHiddenChips = hiddenChips.length > 0;
+
+  const showCloseIcon = () => {
+    if (layoutType === LAYOUT_TYPE.Mobile) return;
+    setCloseIconVisible(true);
+  };
+  const hideCloseIcon = () => {
+    if (layoutType === LAYOUT_TYPE.Mobile) return;
+    setCloseIconVisible(false);
+  };
+
+  return (
+    <div className={styles.container} ref={containerRef} onMouseEnter={showCloseIcon} onMouseLeave={hideCloseIcon}>
+      <ClaudiaChip layoutType={layoutType} onClick={onClaudiaClick} size={size} tooltip={tooltip} />
+      {visibleChips.map((chip, index) => (
+        <Chip
+          ref={chipElement => (allChipsRefs.current[index] = chipElement)}
+          key={chip.id}
+          label={chip.label}
+          size={size}
+          type={type}
+          layoutType={layoutType}
+          onClick={chip.onClick}
+        />
+      ))}
+      {hasHiddenChips && (
+        <DropdownChip
+          layoutType={layoutType}
+          type={type}
+          size={size}
+          label={`+${hiddenChips.length}`}
+          dropdownItems={hiddenChips}
+        />
+      )}
+      {onCloseClick && onCloseChipLabel && (
+        <CloseChip
+          size={size}
+          layoutType={layoutType}
+          content={onCloseChipLabel}
+          onClick={onCloseClick}
+          isVisible={isCloseIconVisible}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/RecommendPannel/helperComponents/Chip/Chip.tsx

@@ -0,0 +1,47 @@
+import cn from 'classnames';
+import { forwardRef, MouseEventHandler } from 'react';
+
+import { LAYOUT_TYPE, LayoutType } from '@cloud-ru/uikit-product-utils';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+
+import { CHIP_TYPE, ChipType, SIZE, Size } from '../../types';
+import styles from './styles.module.scss';
+
+type ChipProps = {
+  type: ChipType;
+  label: string;
+  onClick?: MouseEventHandler<HTMLElement>;
+  className?: string;
+  isVisible?: boolean;
+  size: Size;
+  layoutType?: LayoutType;
+};
+
+export const Chip = forwardRef<HTMLButtonElement, ChipProps>(
+  ({ layoutType, type, label, onClick, size, className }, ref) => {
+    const isDefaultType = type === CHIP_TYPE.Default;
+    const isMobile = layoutType === LAYOUT_TYPE.Mobile;
+    const isMobileChipSize = isMobile || size === SIZE.M;
+
+    return (
+      <button
+        ref={ref}
+        data-mobile={isMobileChipSize || undefined}
+        className={cn(
+          styles.chip,
+          {
+            [styles.chipOutline]: !isDefaultType,
+            [styles.chipDefault]: isDefaultType,
+          },
+          className,
+        )}
+        onClick={onClick}
+      >
+        <Typography.SansBodyS className={styles.text}>
+          <TruncateString variant='end' placement='top' text={label} maxLines={1} />
+        </Typography.SansBodyS>
+      </button>
+    );
+  },
+);

package/src/components/RecommendPannel/helperComponents/Chip/index.ts

@@ -0,0 +1 @@
+export * from './Chip';