@cloud-ru/uikit-product-claudia 1.8.3 → 1.9.0

package/dist/esm/components/RateForm/components/TextFieldWithAccordionMessage/TextFieldWithAccordionMessage.d.ts

@@ -0,0 +1,19 @@
+export type TextFieldWithAccordionMessageProps = {
+    /** Существующий комментарий */
+    comment?: string;
+    /** Плейсхолдер для поля ввода */
+    placeholder?: string;
+    /** Callback при изменении текста */
+    onChange?: (value: string) => void;
+    /** Callback при отправке */
+    onSubmit?: (value: string) => void;
+    /** Максимальная длина сообщения */
+    maxLength?: number;
+    /** Является ли устройство тач-девайсом */
+    isTouchDevice?: boolean;
+    /** Показывать ли тултип на кнопке отправки */
+    showSubmitTooltip?: boolean;
+    /** Текст тултипа для кнопки отправки */
+    submitTooltipText?: string;
+};
+export declare function TextFieldWithAccordionMessage({ comment, placeholder, onChange, onSubmit, maxLength, isTouchDevice, showSubmitTooltip, submitTooltipText, }: TextFieldWithAccordionMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/RateForm/components/TextFieldWithAccordionMessage/TextFieldWithAccordionMessage.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+import { ChevronUpInterfaceSVG } from '@cloud-ru/uikit-product-icons';
+import { Divider } from '@snack-uikit/divider';
+import { FieldTextArea } from '@snack-uikit/fields';
+import { Typography } from '@snack-uikit/typography';
+import { useLayoutEffect } from '@snack-uikit/utils';
+import { MESSAGE_MAX_LENGTH, STATIC_LINE_HEIGHT } from '../../constants';
+import { FieldSubmitButton } from '../FieldSubmitButton';
+import styles from './styles.module.css';
+export function TextFieldWithAccordionMessage({ comment, placeholder, onChange, onSubmit, maxLength = MESSAGE_MAX_LENGTH, isTouchDevice = false, showSubmitTooltip = true, submitTooltipText, }) {
+    const textRef = useRef(null);
+    const [isMultiLine, setIsMultiLine] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [message, setMessage] = useState(comment || '');
+    const isValid = typeof message === 'string' && message.trim().length > 0;
+    useLayoutEffect(() => {
+        if (!comment)
+            return;
+        setMessage(comment);
+        const timeout = setTimeout(() => {
+            if (textRef.current) {
+                const textHeight = textRef.current.scrollHeight;
+                setIsMultiLine(textHeight > STATIC_LINE_HEIGHT * 2 + 5);
+            }
+        }, 0);
+        return () => clearTimeout(timeout);
+    }, [comment]);
+    const handleClickMessage = () => {
+        setIsExpanded(!isExpanded);
+    };
+    const handleChangeMessage = (value) => {
+        const truncatedValue = value.slice(0, maxLength);
+        setMessage(truncatedValue);
+        onChange === null || onChange === void 0 ? void 0 : onChange(truncatedValue);
+    };
+    const handleSubmit = () => {
+        if (isValid) {
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(message);
+        }
+    };
+    const handleKeyDown = event => {
+        if (event.key === 'Enter' && !event.shiftKey && !isTouchDevice) {
+            event.preventDefault();
+            handleSubmit();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [comment && (_jsxs("div", { className: styles.comment, children: [_jsx(Divider, {}), _jsxs("div", { className: styles.container, "data-clickable": isMultiLine || undefined, onClick: isMultiLine ? handleClickMessage : undefined, role: isMultiLine ? 'button' : undefined, children: [_jsx("div", { ref: textRef, className: styles.textContainer, "data-collapsed": (isMultiLine && !isExpanded) || undefined, children: _jsx(Typography.LightBodyS, { className: styles.text, children: message }) }), isMultiLine && (_jsx(ChevronUpInterfaceSVG, { color: themeVars.sys.neutral.textLight, className: styles.textIcon, "data-rotated": !isExpanded || undefined, size: 20 }))] })] })), !comment && (_jsx(FieldTextArea, { value: message, size: 'm', minRows: 1, maxRows: 4, placeholder: placeholder, onChange: handleChangeMessage, onKeyDown: handleKeyDown, spellCheck: true, footer: _jsx("div", { className: styles.actionsFooter, children: _jsx(FieldSubmitButton, { tooltipText: showSubmitTooltip && !isTouchDevice ? submitTooltipText : undefined, className: styles.buttonRight, "data-mobile": isTouchDevice || undefined, active: isValid, onClick: handleSubmit, size: isTouchDevice ? 's' : 'xs' }) }), showClearButton: false }))] }));
+}

package/dist/esm/components/RateForm/components/TextFieldWithAccordionMessage/index.d.ts

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

package/dist/esm/components/RateForm/components/TextFieldWithAccordionMessage/index.js

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

package/dist/esm/components/RateForm/components/TextFieldWithAccordionMessage/styles.module.css

@@ -0,0 +1,62 @@
+.actionsFooter{
+  display:flex;
+  flex-direction:row;
+  justify-content:flex-end;
+  align-items:center;
+  width:100%;
+  padding:0 10px 9px 0;
+  cursor:text;
+}
+
+.textIcon{
+  min-width:20px;
+  min-height:20px;
+  transition:transform 0.2s ease;
+}
+.textIcon[data-rotated]{
+  transform:rotate(180deg);
+}
+
+.textContainer{
+  flex:1;
+  min-width:0;
+  line-height:16px;
+}
+.textContainer[data-collapsed]{
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:2;
+  line-clamp:2;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  line-height:16px;
+  max-height:32px;
+}
+
+.comment{
+  width:100%;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:flex-start;
+  gap:16px;
+}
+
+.text{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  line-height:16px;
+}
+
+.container{
+  display:flex;
+  flex-direction:row;
+  align-items:flex-end;
+  gap:4px;
+  width:100%;
+}
+.container svg path{
+  fill:var(--sys-neutral-text-light, #8b8e9b);
+}
+.container[data-clickable]{
+  cursor:pointer;
+}

package/dist/esm/components/RateForm/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const MESSAGE_MAX_LENGTH = 255;
+export declare const STATIC_LINE_HEIGHT = 16;

package/dist/esm/components/RateForm/constants.js

@@ -0,0 +1,2 @@
+export const MESSAGE_MAX_LENGTH = 255;
+export const STATIC_LINE_HEIGHT = 16;

package/dist/esm/components/RateForm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './RateForm';
+export type { Grade } from './types';
+export { MESSAGE_MAX_LENGTH, STATIC_LINE_HEIGHT } from './constants';

package/dist/esm/components/RateForm/index.js

@@ -0,0 +1,2 @@
+export * from './RateForm';
+export { MESSAGE_MAX_LENGTH, STATIC_LINE_HEIGHT } from './constants';

package/dist/esm/components/RateForm/styles.module.css

@@ -0,0 +1,127 @@
+.closeIcon{
+  cursor:pointer;
+  position:absolute;
+  top:8px;
+  right:8px;
+  opacity:0;
+  transition:opacity 0.2s ease;
+  will-change:opacity;
+}
+
+.feedbackForm{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  width:296px;
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border:1px solid var(--sys-neutral-decor-default, #dde0ea);
+  border-radius:8px;
+  padding:24px;
+  gap:16px;
+}
+.feedbackForm:hover .closeIcon{
+  opacity:1;
+}
+.feedbackForm[data-touch] .closeIcon{
+  opacity:1;
+}
+
+.feedbackFormTitle{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.feedbackFormLoading{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  width:296px;
+  height:141px;
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border:1px solid var(--sys-neutral-decor-default, #dde0ea);
+  border-radius:8px;
+  padding:24px;
+}
+.feedbackFormLoading[data-loading]{
+  cursor:wait;
+}
+
+.gradeBlock{
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content:center;
+  gap:14px;
+  position:relative;
+}
+
+.description{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  position:absolute;
+  bottom:-12px;
+  opacity:0;
+}
+
+.grade{
+  cursor:pointer;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+  transition:all 0.2s ease;
+  height:40px;
+  width:36px;
+}
+.grade:hover > .description{
+  opacity:1;
+}
+
+.gradeIcon{
+  transition:all 0.2s ease;
+  font-size:32px;
+}
+.gradeIcon:hover{
+  font-size:36px !important;
+}
+
+.ratingContainer{
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
+  gap:4px;
+}
+
+.ratingTitle{
+  display:flex;
+  flex-direction:row;
+  justify-content:center;
+  align-items:center;
+  gap:4px;
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.ratingSubtitle{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.ratingIcon{
+  line-height:20px !important;
+}
+
+.mobileSubmitButton{
+  position:relative !important;
+  flex-shrink:0 !important;
+}
+.mobileSubmitButton:after{
+  content:"";
+  display:flex;
+  width:48px;
+  height:48px;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translate(-50%, -50%);
+}

package/dist/esm/components/RateForm/types.d.ts

@@ -0,0 +1,8 @@
+export type Grade = {
+    /** Уникальный идентификатор оценки */
+    id: string;
+    /** Иконка (эмодзи) */
+    icon: string;
+    /** Описание оценки */
+    description: string;
+};

package/dist/esm/components/RateForm/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/SshField/SshField.d.ts

@@ -6,7 +6,7 @@ export type SshFieldProps = WithLayoutType<Omit<FieldTextAreaProps, 'placeholder
     /** Колбек отмены действия */
     onCancel(): void;
 }>;
-export declare const SshField: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "footer" | "spellCheck" | "required" | "labelTooltip"> & {
+export declare const SshField: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "spellCheck" | "labelTooltip" | "required" | "footer"> & {
     /** Колбек действия при отправке */
     onSubmit(value: string): void;
     /** Колбек отмены действия */

package/dist/esm/components/SshField/components/MobileFieldAi/MobileFieldAi.d.ts

@@ -1,5 +1,5 @@
 import { FieldTextAreaProps } from '@cloud-ru/uikit-product-mobile-fields';
-export declare const MobileFieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "footer" | "spellCheck" | "required" | "labelTooltip"> & {
+export declare const MobileFieldAi: import("react").ForwardRefExoticComponent<Omit<FieldTextAreaProps, "label" | "size" | "placeholder" | "spellCheck" | "labelTooltip" | "required" | "footer"> & {
     onSubmit(): void;
     submitEnabled: boolean;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ButtonClaudia';
 export * from './ButtonGiga';
 export * from './ChatStatusAnnouncement';
+export * from './RateForm';
 export * from './IconGiga';
 export * from './RecommendPannel';
 export * from './SshField';

package/dist/esm/components/index.js

@@ -1,6 +1,7 @@
 export * from './ButtonClaudia';
 export * from './ButtonGiga';
 export * from './ChatStatusAnnouncement';
+export * from './RateForm';
 export * from './IconGiga';
 export * from './RecommendPannel';
 export * from './SshField';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloud-ru/uikit-product-claudia",
   "title": "Claudia",
-  "version": "1.8.3",
+  "version": "1.9.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,13 +36,16 @@
   },
   "scripts": {},
   "dependencies": {
-    "@cloud-ru/uikit-product-icons": "15.1.6",
-    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.27",
-    "@cloud-ru/uikit-product-mobile-fields": "0.11.30",
+    "@cloud-ru/uikit-product-icons": "16.0.0",
+    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.28",
+    "@cloud-ru/uikit-product-mobile-fields": "0.11.31",
     "@cloud-ru/uikit-product-utils": "8.0.1",
     "@snack-uikit/button": "0.19.16",
+    "@snack-uikit/divider": "3.2.3",
     "@snack-uikit/drop-zone": "0.9.6",
     "@snack-uikit/dropdown": "0.5.3",
+    "@snack-uikit/fields": "0.51.0",
+    "@snack-uikit/icons": "0.27.3",
     "@snack-uikit/input-private": "4.8.3",
     "@snack-uikit/link": "0.17.12",
     "@snack-uikit/loaders": "0.9.9",
@@ -58,5 +61,5 @@
     "@cloud-ru/uikit-product-locale": "*",
     "@snack-uikit/figma-tokens": "*"
   },
-  "gitHead": "e4143cae723e66aeb12cae059dd3f7310b791ef5"
+  "gitHead": "483e1bfeed59866d6ffbb4fbcc923b2c483e1e45"
 }

package/src/components/RateForm/RateForm.tsx

@@ -0,0 +1,136 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { themeVars } from '@sbercloud/figma-tokens-cloud-platform';
+import { CrossSVG } from '@snack-uikit/icons';
+import { Spinner } from '@snack-uikit/loaders';
+import { Typography } from '@snack-uikit/typography';
+
+import { TextFieldWithAccordionMessage } from './components/TextFieldWithAccordionMessage';
+import styles from './styles.module.scss';
+import { Grade } from './types';
+
+export type RateFormProps = {
+  /** Массив доступных оценок */
+  grades: Grade[];
+  /** Текущая выбранная оценка */
+  selectedGrade?: Grade | null;
+  /** Заголовок формы (показывается когда оценка не выбрана) */
+  title?: string;
+  /** Текст "Вы поставили" */
+  ratedLabel?: string;
+  /** Подзаголовок после выбора оценки */
+  ratedSubtitle?: string;
+  /** Комментарий пользователя */
+  comment?: string;
+  /** Состояние загрузки */
+  isLoading?: boolean;
+  /** Callback при клике на оценку */
+  onGradeClick?: (grade: Grade) => void;
+  /** Callback при закрытии формы */
+  onClose?: () => void;
+  /** Callback при изменении комментария */
+  onCommentChange?: (comment: string) => void;
+  /** Callback при отправке комментария */
+  onCommentSubmit?: (comment: string) => void;
+  /** Плейсхолдер для поля комментария */
+  commentPlaceholder?: string;
+  /** Показывать ли кнопку закрытия */
+  showCloseButton?: boolean;
+  /** Дополнительный className */
+  className?: string;
+  /** Является ли устройство тач-девайсом */
+  isTouchDevice?: boolean;
+  /** Текст тултипа для кнопки отправки */
+  submitTooltipText?: string;
+  /** Render prop для кастомного отображения текстового поля */
+  renderTextField?: (props: {
+    comment?: string;
+    grade: Grade;
+    placeholder?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+  }) => ReactNode;
+};
+
+export function RateForm({
+  grades,
+  selectedGrade,
+  title,
+  ratedLabel,
+  ratedSubtitle,
+  comment,
+  isLoading = false,
+  onGradeClick,
+  onClose,
+  onCommentChange,
+  onCommentSubmit,
+  commentPlaceholder,
+  showCloseButton = true,
+  className,
+  isTouchDevice = false,
+  submitTooltipText,
+  renderTextField,
+}: RateFormProps) {
+  if (isLoading) {
+    return (
+      <div className={cn(styles.feedbackFormLoading, className)} data-loading>
+        <Spinner size='s' />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(styles.feedbackForm, className)} data-touch={isTouchDevice || undefined}>
+      {selectedGrade ? (
+        <div className={styles.ratingContainer}>
+          <div className={styles.ratingTitle}>
+            {ratedLabel && <Typography.SansLabelL>{ratedLabel}</Typography.SansLabelL>}
+            <Typography.SansTitleL className={styles.ratingIcon}>{selectedGrade.icon}</Typography.SansTitleL>
+          </div>
+
+          {ratedSubtitle && (
+            <Typography.SansBodyM className={styles.ratingSubtitle}>{ratedSubtitle}</Typography.SansBodyM>
+          )}
+        </div>
+      ) : (
+        title && <Typography.SansLabelL className={styles.feedbackFormTitle}>{title}</Typography.SansLabelL>
+      )}
+
+      {!selectedGrade && (
+        <div className={styles.gradeBlock}>
+          {grades.map(grade => (
+            <div key={grade.id} className={styles.grade} onClick={() => onGradeClick?.(grade)} role='presentation'>
+              <Typography.SansHeadlineL className={styles.gradeIcon}>{grade.icon}</Typography.SansHeadlineL>
+              <Typography.LightLabelS className={styles.description}>{grade.description}</Typography.LightLabelS>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {selectedGrade &&
+        (renderTextField ? (
+          renderTextField({
+            comment,
+            grade: selectedGrade,
+            placeholder: commentPlaceholder,
+            onChange: onCommentChange,
+            onSubmit: onCommentSubmit,
+          })
+        ) : (
+          <TextFieldWithAccordionMessage
+            comment={comment}
+            placeholder={commentPlaceholder}
+            onChange={onCommentChange}
+            onSubmit={onCommentSubmit}
+            isTouchDevice={isTouchDevice}
+            submitTooltipText={submitTooltipText}
+          />
+        ))}
+
+      {showCloseButton && selectedGrade && (
+        <CrossSVG className={styles.closeIcon} size={24} color={themeVars.sys.neutral.textSupport} onClick={onClose} />
+      )}
+    </div>
+  );
+}

package/src/components/RateForm/components/FieldSubmitButton.tsx

@@ -0,0 +1,45 @@
+import { ArrowUpSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonTonal } from '@snack-uikit/button';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+export type FieldSubmitButtonProps = {
+  /** Активна ли кнопка */
+  active: boolean;
+  /** Callback при клике */
+  onClick: () => void;
+  /** Размер кнопки */
+  size?: 'xs' | 's';
+  /** Дополнительный className */
+  className?: string;
+  /** Кнопка на всю ширину */
+  fullWidth?: boolean;
+  /** Текст тултипа */
+  tooltipText?: string;
+};
+
+export function FieldSubmitButton({
+  active,
+  onClick,
+  size = 'xs',
+  className,
+  fullWidth,
+  tooltipText,
+}: FieldSubmitButtonProps) {
+  if (active) {
+    return (
+      <Tooltip tip={tooltipText} hoverDelayOpen={600} open={tooltipText ? undefined : false}>
+        <ButtonTonal
+          fullWidth={fullWidth}
+          icon={<ArrowUpSVG />}
+          size={size}
+          appearance='primary'
+          type='button'
+          onClick={onClick}
+          className={className}
+        />
+      </Tooltip>
+    );
+  }
+
+  return <ButtonTonal icon={<ArrowUpSVG />} size={size} disabled className={className} fullWidth={fullWidth} />;
+}