@cloud-ru/uikit-product-claudia 1.6.2

package/src/components/RecommendPannel/helperComponents/Chip/styles.module.scss

@@ -0,0 +1,45 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.text {
+  color: stv.$sys-neutral-text-support;
+}
+
+.chip {
+  height: 32px;
+  border-radius: 4px;
+  padding: 8px;
+  box-sizing: border-box;
+  cursor: pointer;
+  max-width: 250px;
+  width: fit-content;
+
+  &[data-mobile] {
+    height: 40px;
+  }
+
+  &:hover {
+    border: 1px solid stv.$sys-neutral-decor-hovered;
+  }
+
+  &:hover .text {
+    color: stv.$sys-neutral-text-main;
+  }
+
+  &:focus {
+    border: 1px solid stv.$sys-neutral-decor-hovered;
+  }
+
+  &:active {
+    border: 1px solid stv.$sys-neutral-decor-activated;
+  }
+}
+
+.chipDefault {
+  border: 1px solid stv.$sys-neutral-background;
+  background-color: stv.$sys-neutral-background;
+}
+
+.chipOutline {
+  border: 1px solid stv.$sys-neutral-decor-default;
+  background-color: transparent;
+}

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

@@ -0,0 +1,40 @@
+import { forwardRef, MouseEventHandler, ReactNode, RefObject } from 'react';
+
+import { AgentClaudiaSVG } from '@cloud-ru/uikit-product-icons';
+import { LAYOUT_TYPE, LayoutType } from '@cloud-ru/uikit-product-utils';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+import { ButtonClaudia } from '../../../ButtonClaudia';
+import { SIZE, Size } from '../../types';
+
+type ClaudiaChipProps = {
+  onClick?: MouseEventHandler<HTMLElement>;
+  size: Size;
+  tooltip?: ReactNode;
+  layoutType?: LayoutType;
+};
+
+export const ClaudiaChip = forwardRef<HTMLElement | HTMLButtonElement, ClaudiaChipProps>(
+  ({ onClick, size, tooltip, layoutType }, ref) => {
+    const isMobile = layoutType === LAYOUT_TYPE.Mobile || size === SIZE.M;
+    const totalSize = isMobile ? SIZE.M : size;
+
+    if (!tooltip) {
+      return (
+        <ButtonClaudia
+          size={totalSize}
+          data-mobile={isMobile}
+          ref={ref as RefObject<HTMLButtonElement>}
+          onClick={onClick}
+          icon={<AgentClaudiaSVG size={24} />}
+        />
+      );
+    }
+
+    return (
+      <Tooltip triggerRef={ref as RefObject<HTMLElement>} tip={tooltip}>
+        <ButtonClaudia size={totalSize} data-mobile={isMobile} onClick={onClick} icon={<AgentClaudiaSVG size={24} />} />
+      </Tooltip>
+    );
+  },
+);

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

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

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

@@ -0,0 +1,106 @@
+import { ReactNode, useRef, useState } from 'react';
+
+import { MoreInterfaceSVG } from '@cloud-ru/uikit-product-icons';
+import { MobileDropdown } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { LAYOUT_TYPE, LayoutType } from '@cloud-ru/uikit-product-utils';
+import { Dropdown } from '@snack-uikit/dropdown';
+import { Typography } from '@snack-uikit/typography';
+
+import { useOutsideClick } from '../../hooks';
+import { SIZE, Size } from '../../types';
+import styles from './styles.module.scss';
+
+type DropdownContentProps = {
+  content: ReactNode;
+  onClick: () => void;
+  closeDropdown: () => void;
+  isMobileChipSize: boolean;
+};
+
+function DropdownContent({ content, onClick, closeDropdown, isMobileChipSize }: DropdownContentProps) {
+  const onDropdownItemClick = () => {
+    closeDropdown();
+    onClick();
+  };
+
+  const TypographyComponent = isMobileChipSize ? Typography.SansBodyM : Typography.SansBodyS;
+
+  return (
+    <div className={styles.dropdown}>
+      <button className={styles.dropdownItem} data-mobile={isMobileChipSize || undefined} onClick={onDropdownItemClick}>
+        <TypographyComponent>{content}</TypographyComponent>
+      </button>
+    </div>
+  );
+}
+
+type CloseChipProps = {
+  content: ReactNode;
+  size: Size;
+  layoutType?: LayoutType;
+  onClick: () => void;
+  isVisible?: boolean;
+};
+
+export function CloseChip({ size, content, onClick, isVisible, layoutType }: CloseChipProps) {
+  const [isDropdownOpen, setDropdownOpen] = useState(false);
+  const ref = useRef<HTMLButtonElement>(null);
+  const isMobile = layoutType === LAYOUT_TYPE.Mobile;
+  const isMobileChipSize = isMobile || size === SIZE.M;
+
+  const openDropdown = () => setDropdownOpen(true);
+  const closeDropdown = () => setDropdownOpen(false);
+
+  useOutsideClick([ref], closeDropdown);
+
+  if (isMobile) {
+    return (
+      <MobileDropdown
+        open={isDropdownOpen}
+        content={
+          <DropdownContent
+            isMobileChipSize={isMobileChipSize}
+            closeDropdown={closeDropdown}
+            content={content}
+            onClick={onClick}
+          />
+        }
+      >
+        <button
+          data-hidden={!isVisible || undefined}
+          data-mobile={true}
+          className={styles.closeChip}
+          ref={ref}
+          onClick={openDropdown}
+        >
+          <MoreInterfaceSVG size={24} />
+        </button>
+      </MobileDropdown>
+    );
+  }
+
+  return (
+    <Dropdown
+      open={isDropdownOpen}
+      triggerRef={ref}
+      placement='bottom-end'
+      content={
+        <DropdownContent
+          isMobileChipSize={isMobileChipSize}
+          closeDropdown={closeDropdown}
+          content={content}
+          onClick={onClick}
+        />
+      }
+    >
+      <button
+        data-hidden={!isVisible || undefined}
+        data-mobile={isMobileChipSize || undefined}
+        className={styles.closeChip}
+        onClick={openDropdown}
+      >
+        <MoreInterfaceSVG size={24} />
+      </button>
+    </Dropdown>
+  );
+}

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

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

package/src/components/RecommendPannel/helperComponents/CloseChip/styles.module.scss

@@ -0,0 +1,73 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.closeChip {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  transform: rotate(90deg);
+  cursor: pointer;
+  border: unset;
+  background-color: unset;
+
+  &[data-hidden] {
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  &[data-mobile] {
+    width: 40px;
+    height: 40px;
+  }
+
+  & svg {
+    fill: stv.$sys-neutral-text-support;
+  }
+
+  &:hover svg {
+    fill: stv.$sys-neutral-text-main;
+  }
+}
+
+.dropdown {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  padding: 4px 0px;
+  box-sizing: border-box;
+}
+
+.dropdownItem {
+  width: 100%;
+  height: 32px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  border: unset;
+  background-color: unset;
+  position: relative;
+  padding: 0px 8px;
+
+  &[data-mobile] {
+    padding: 0px 10px;
+    height: 40px;
+  }
+
+  &:before {
+    pointer-events: none;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+  }
+
+  &:hover::before {
+    background-color: stv.$sys-neutral-accent-default;
+    opacity: 0.08;
+  }
+}

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

@@ -0,0 +1,112 @@
+import { useRef, useState } from 'react';
+
+import { MobileDropdown } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { LAYOUT_TYPE, LayoutType } from '@cloud-ru/uikit-product-utils';
+import { Dropdown } from '@snack-uikit/dropdown';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+
+import { useOutsideClick } from '../../hooks';
+import { ChipProps, ChipType, SIZE, Size } from '../../types';
+import { Chip } from '../Chip';
+import styles from './styles.module.scss';
+
+type DropdownContentProps = {
+  dropdownItems: ChipProps[];
+  closeDropdown: () => void;
+  isMobile: boolean;
+  size: Size;
+};
+
+function DropdownContent({ size, dropdownItems, closeDropdown, isMobile }: DropdownContentProps) {
+  const isMobileChipSize = isMobile || size === SIZE.M;
+
+  const TypographyComponent = isMobileChipSize ? Typography.SansBodyM : Typography.SansBodyS;
+
+  return (
+    <div className={styles.dropdown} data-mobile={isMobile || undefined}>
+      {dropdownItems.map(item => (
+        <button
+          key={item.id}
+          data-mobile={isMobileChipSize || undefined}
+          className={styles.dropdownItem}
+          onClick={() => {
+            closeDropdown();
+            item?.onClick?.();
+          }}
+        >
+          <TypographyComponent>
+            <TruncateString variant='end' placement='top' text={item.label} maxLines={1} />
+          </TypographyComponent>
+        </button>
+      ))}
+    </div>
+  );
+}
+
+type DropdownChip = {
+  label: string;
+  type: ChipType;
+  size: Size;
+  layoutType?: LayoutType;
+  dropdownItems: ChipProps[];
+};
+
+export function DropdownChip({ size, layoutType, type, label, dropdownItems }: DropdownChip) {
+  const [isDropdownOpen, setDropdownOpen] = useState(false);
+  const ref = useRef<HTMLButtonElement>(null);
+  const isMobile = layoutType === LAYOUT_TYPE.Mobile;
+
+  const openDropdown = () => setDropdownOpen(true);
+  const closeDropdown = () => setDropdownOpen(false);
+
+  useOutsideClick([ref], closeDropdown);
+
+  if (isMobile) {
+    return (
+      <MobileDropdown
+        open={isDropdownOpen}
+        content={
+          <DropdownContent
+            size={size}
+            isMobile={isMobile}
+            closeDropdown={closeDropdown}
+            dropdownItems={dropdownItems}
+          />
+        }
+      >
+        <Chip
+          ref={ref}
+          isVisible={true}
+          className={styles.dropdownChip}
+          type={type}
+          label={label}
+          size={size}
+          layoutType={layoutType}
+          onClick={openDropdown}
+        />
+      </MobileDropdown>
+    );
+  }
+
+  return (
+    <Dropdown
+      triggerRef={ref}
+      open={isDropdownOpen}
+      placement='bottom-end'
+      content={
+        <DropdownContent size={size} isMobile={isMobile} closeDropdown={closeDropdown} dropdownItems={dropdownItems} />
+      }
+    >
+      <Chip
+        isVisible={true}
+        className={styles.dropdownChip}
+        type={type}
+        label={label}
+        size={size}
+        layoutType={layoutType}
+        onClick={openDropdown}
+      />
+    </Dropdown>
+  );
+}

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

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

package/src/components/RecommendPannel/helperComponents/DropdownChip/styles.module.scss

@@ -0,0 +1,56 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as stv;
+
+.dropdown {
+  width: 256px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  padding: 4px 0px;
+  box-sizing: border-box;
+
+  &[data-mobile] {
+    width: 100%;
+  }
+}
+
+.dropdownChip {
+  min-width: 33px;
+
+  &[data-mobile] {
+    min-width: 40px;
+  }
+}
+
+.dropdownItem {
+  width: 100%;
+  height: 32px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  border: unset;
+  background-color: unset;
+  padding: 4px 8px;
+  position: relative;
+
+  &[data-mobile] {
+    padding: 8px 10px;
+    height: 40px;
+  }
+
+  &:before {
+    pointer-events: none;
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+  }
+
+  &:hover::before {
+    background-color: stv.$sys-neutral-accent-default;
+    opacity: 0.08;
+  }
+}

package/src/components/RecommendPannel/hooks/index.ts

@@ -0,0 +1,15 @@
+import { RefObject, useEffect } from 'react';
+
+export const useOutsideClick = (ref: RefObject<HTMLElement>[], handler: () => void) => {
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      ref.forEach(ref => {
+        if (ref.current && event.target instanceof Element && !ref.current.contains(event.target)) {
+          handler();
+        }
+      });
+    };
+    document.body.addEventListener('click', handleClick);
+    return () => document.body.removeEventListener('click', handleClick);
+  }, [ref, handler]);
+};

package/src/components/RecommendPannel/index.ts

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

package/src/components/RecommendPannel/styles.module.scss

@@ -0,0 +1,4 @@
+.container {
+  display: flex;
+  gap: 8px;
+}

package/src/components/RecommendPannel/types.ts

@@ -0,0 +1,21 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+export const CHIP_TYPE = {
+  Default: 'default',
+  Outline: 'outline',
+} as const;
+
+export type ChipType = ValueOf<typeof CHIP_TYPE>;
+
+export type ChipProps = {
+  id: string;
+  label: string;
+  onClick?: () => void;
+};
+
+export const SIZE = {
+  S: 's',
+  M: 'm',
+} as const;
+
+export type Size = ValueOf<typeof SIZE>;

package/src/components/RecommendPannel/utils/gitVisibleChipsCount.ts

@@ -0,0 +1,57 @@
+import { ChipProps } from '../types';
+
+const GAP = 8;
+
+type GetVisibleChipsCountArgs = {
+  containerWidth: number;
+  chipWidths: number[];
+  chips: ChipProps[];
+  isSmall: boolean;
+  isCloseChipExist: boolean;
+};
+
+export const getVisibleChipsCount = ({
+  containerWidth,
+  chipWidths,
+  chips,
+  isSmall,
+  isCloseChipExist,
+}: GetVisibleChipsCountArgs) => {
+  if (containerWidth === 0 || chipWidths.length === 0) {
+    return chips.length;
+  }
+
+  const baseIcon = (isSmall ? 40 : 32) + GAP;
+  const closeIconWidth = isCloseChipExist ? baseIcon - GAP : 0;
+
+  let availableWidth = Math.round(containerWidth) - baseIcon - closeIconWidth;
+  let visibleCount = 0;
+  let isCounterChipExist = false;
+  let isCounterChipWidthSubstracted = false;
+  const chipsWidthWithGap = chipWidths.map(chip => Math.round(chip + GAP));
+
+  for (let i = 0; i < chipsWidthWithGap.length; i++) {
+    const chipWidth = chipsWidthWithGap[i];
+
+    if (availableWidth >= chipWidth) {
+      if (isCounterChipExist && !isCounterChipWidthSubstracted) {
+        availableWidth -= baseIcon;
+        isCounterChipWidthSubstracted = true;
+      }
+
+      availableWidth -= chipWidth;
+      visibleCount++;
+
+      if (visibleCount === chipsWidthWithGap.length) {
+        isCounterChipExist = false;
+        isCounterChipWidthSubstracted = false;
+      } else {
+        isCounterChipExist = true;
+      }
+    } else {
+      break;
+    }
+  }
+
+  return Math.max(1, visibleCount);
+};