@cloud-ru/ds-uikit-product-modal-predefined 1.0.0

package/src/helperComponents/MobileReleaseNotes/MobileReleaseNotes.tsx

@@ -0,0 +1,88 @@
+import { BottomSheet } from '@cloud-ru/ds-bottom-sheet';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import { MouseEvent } from 'react';
+
+import { CONTENT_STATE } from '../../constants';
+import { useReleaseNotesNavigation } from '../../hooks';
+import { modalPredefinedLocale } from '../../locale';
+import { ReleaseNotesProps } from '../../types';
+import { ReleaseNotesContent } from '../ReleaseNotesContent';
+import { ReleaseNotesFooter } from '../ReleaseNotesFooter';
+
+export function MobileReleaseNotes({
+  open,
+  onClose,
+  closeOnPopstate,
+  contentState = CONTENT_STATE.Data,
+  items,
+  loading,
+  onReadLaterClick,
+  onDataErrorRetryClick,
+  onSlideChange,
+  readLaterButtonProps,
+  ...rest
+}: ReleaseNotesProps) {
+  const { t } = modalPredefinedLocale.useTranslations();
+  const {
+    pageIndex,
+    readablePageNumber,
+    setPage,
+    handleClose,
+    handleReadLaterClick,
+    handleNextPageClick,
+    handlePrevPageClick,
+  } = useReleaseNotesNavigation({ onClose, onReadLaterClick, onSlideChange });
+  const { onClick: onReadLaterButtonClick, ...readLaterButtonRest } = readLaterButtonProps ?? {};
+  const shouldShowFooter = contentState === CONTENT_STATE.Data && (loading || items.length > 0);
+
+  const handleReadLaterButtonClick = (event: MouseEvent<HTMLButtonElement>) => {
+    onReadLaterButtonClick?.(event);
+    handleReadLaterClick();
+  };
+
+  return (
+    <BottomSheet
+      // Дефолт `withDividers` сменился на `true` — здесь вид сохраняем прежним.
+      withDividers={false}
+      open={open}
+      onClose={handleClose}
+      closeOnPopstate={closeOnPopstate}
+      title={t('releaseNotes.title')}
+      content={
+        <ReleaseNotesContent
+          contentState={contentState}
+          items={items}
+          loading={loading}
+          pageIndex={pageIndex}
+          surface='bottomSheet'
+          noDataTitle={t('releaseNotes.noDataTitle')}
+          noDataDescription={t('releaseNotes.noDataDescription')}
+          errorTitle={t('releaseNotes.errorTitle')}
+          errorDescription={t('releaseNotes.errorDescription')}
+          retryLabel={t('releaseNotes.retry')}
+          onPageChange={setPage}
+          onDataErrorRetryClick={onDataErrorRetryClick}
+        />
+      }
+      footer={
+        shouldShowFooter ? (
+          <ReleaseNotesFooter
+            surface='bottomSheet'
+            total={items.length}
+            pageIndex={pageIndex}
+            readablePageNumber={readablePageNumber}
+            counterLabel={t('releaseNotes.counter', { page: readablePageNumber, total: items.length })}
+            readLaterLabel={t('releaseNotes.readLater')}
+            onReadLaterClick={handleReadLaterButtonClick}
+            onPrevPageClick={handlePrevPageClick}
+            onNextPageClick={() => handleNextPageClick(items.length)}
+            readLaterButtonProps={readLaterButtonRest}
+          />
+        ) : undefined
+      }
+      data-content-state={contentState}
+      data-surface='bottomSheet'
+      {...extractSupportProps(rest)}
+    />
+  );
+}

package/src/helperComponents/MobileReleaseNotes/index.ts

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

package/src/helperComponents/NoteItem/NoteItem.tsx

@@ -0,0 +1,58 @@
+import { Markdown } from '@cloud-ru/ds-markdown';
+import { BAR_HIDE_STRATEGY, Scroll } from '@cloud-ru/ds-scroll';
+import { Skeleton } from '@cloud-ru/ds-skeleton';
+import { Typography } from '@cloud-ru/ds-typography';
+import { useState } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { NoteItemProps } from '../../types';
+import styles from './styles.module.scss';
+
+type NoteItemComponentProps = NoteItemProps & {
+  surface?: 'modal' | 'bottomSheet';
+};
+
+export function NoteItem({ title, description, image, video, surface = 'modal' }: NoteItemComponentProps) {
+  const [isVideoReady, setIsVideoReady] = useState(false);
+  const [hasVideoError, setHasVideoError] = useState(false);
+  const shouldShowVideo = Boolean(video && !hasVideoError);
+
+  return (
+    <article className={styles.root} data-surface={surface} data-test-id={TEST_IDS.releaseNotesItem}>
+      <div className={styles.media} data-test-id={TEST_IDS.releaseNotesMedia}>
+        {shouldShowVideo && (
+          <>
+            <video
+              className={styles.video}
+              src={video}
+              muted
+              loop
+              playsInline
+              autoPlay
+              onLoadedData={() => setIsVideoReady(true)}
+              onError={() => setHasVideoError(true)}
+              data-test-id={TEST_IDS.releaseNotesVideo}
+            />
+            {!isVideoReady && (
+              <div className={styles.videoSkeleton} aria-hidden>
+                <Skeleton loading width='100%' height='100%' />
+              </div>
+            )}
+          </>
+        )}
+
+        {!shouldShowVideo && <img className={styles.image} src={image.src} alt={image.alt} />}
+      </div>
+
+      <div className={styles.content}>
+        <Typography variant='headline' size='s'>
+          {title}
+        </Typography>
+
+        <Scroll className={styles.description} barHideStrategy={BAR_HIDE_STRATEGY.Leave}>
+          <Markdown value={description} />
+        </Scroll>
+      </div>
+    </article>
+  );
+}

package/src/helperComponents/NoteItem/index.ts

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

package/src/helperComponents/NoteItem/styles.module.scss

@@ -0,0 +1,54 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.root {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  column-gap: base.$sn-primitive-dimension-24;
+  min-height: calc(5 * #{base.$sn-primitive-dimension-64});
+
+  &[data-surface='bottomSheet'] {
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: base.$sn-primitive-dimension-16;
+    min-height: 0;
+  }
+}
+
+.media {
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+  border-radius: base.$sn-primitive-dimension-16;
+}
+
+.image,
+.video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.videoSkeleton {
+  position: absolute;
+  inset: 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  row-gap: base.$sn-primitive-dimension-12;
+  min-width: 0;
+}
+
+.description {
+  min-height: 0;
+}
+
+.root[data-surface='modal'] .content {
+  row-gap: base.$sn-primitive-dimension-16;
+  order: 1;
+}
+
+.root[data-surface='modal'] .media {
+  order: 2;
+}

package/src/helperComponents/ReleaseNotesContent/ReleaseNotesContent.tsx

@@ -0,0 +1,119 @@
+import { Button } from '@cloud-ru/ds-button';
+import { Carousel } from '@cloud-ru/ds-carousel';
+import { CrossSVG } from '@cloud-ru/ds-icons/interface/system';
+import { InfoBlock } from '@cloud-ru/ds-info-block';
+import { Skeleton } from '@cloud-ru/ds-skeleton';
+import cn from 'classnames';
+
+import { CONTENT_STATE, TEST_IDS } from '../../constants';
+import { NoteItemProps, ReleaseNotesContentState } from '../../types';
+import { NoteItem } from '../NoteItem';
+import styles from './styles.module.scss';
+
+export type ReleaseNotesContentProps = {
+  /** Визуальное состояние */
+  contentState: ReleaseNotesContentState;
+  /** Новости */
+  items: NoteItemProps[];
+  /** Состояние загрузки */
+  loading?: boolean;
+  /** Текущая страница, zero-based */
+  pageIndex: number;
+  /** Поверхность */
+  surface: 'modal' | 'bottomSheet';
+  /** Заголовок no-data */
+  noDataTitle: string;
+  /** Описание no-data */
+  noDataDescription: string;
+  /** Заголовок ошибки */
+  errorTitle: string;
+  /** Описание ошибки */
+  errorDescription: string;
+  /** Label retry-кнопки */
+  retryLabel: string;
+  /** Смена страницы */
+  onPageChange(pageIndex: number): void;
+  /** Повторная загрузка */
+  onDataErrorRetryClick?(): void;
+};
+
+export function ReleaseNotesContent({
+  contentState,
+  items,
+  loading,
+  pageIndex,
+  surface,
+  noDataTitle,
+  noDataDescription,
+  errorTitle,
+  errorDescription,
+  retryLabel,
+  onPageChange,
+  onDataErrorRetryClick,
+}: ReleaseNotesContentProps) {
+  const total = items.length;
+  const hasItems = total > 0;
+
+  if (loading) {
+    return (
+      <div className={styles.loading} data-surface={surface}>
+        <Skeleton loading width='100%' height='100%' borderRadius='var(--border-radius-l)' />
+      </div>
+    );
+  }
+
+  if (contentState === CONTENT_STATE.Error) {
+    return (
+      <div className={styles.stateWrapper} data-surface={surface}>
+        <InfoBlock
+          className={styles.state}
+          size='l'
+          title={errorTitle}
+          content={errorDescription}
+          icon={{ icon: CrossSVG, appearance: 'neutral', background: true }}
+          data-test-id={TEST_IDS.releaseNotesError}
+          footer={
+            <Button
+              view='filled'
+              appearance='neutral'
+              size='l'
+              label={retryLabel}
+              onClick={onDataErrorRetryClick}
+              data-test-id={TEST_IDS.releaseNotesRetryButton}
+            />
+          }
+        />
+      </div>
+    );
+  }
+
+  if (contentState === CONTENT_STATE.NoData || !hasItems) {
+    return (
+      <div className={styles.stateWrapper} data-surface={surface}>
+        <InfoBlock
+          className={styles.state}
+          size='l'
+          title={noDataTitle}
+          content={noDataDescription}
+          data-test-id={TEST_IDS.releaseNotesNoData}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(styles.root, styles[surface])}>
+      <Carousel
+        arrows={false}
+        pagination={false}
+        swipe
+        state={{ page: pageIndex, onChange: onPageChange }}
+        className={styles.carousel}
+      >
+        {items.map(item => (
+          <NoteItem key={`${item.title}-${item.image.src}`} {...item} surface={surface} />
+        ))}
+      </Carousel>
+    </div>
+  );
+}

package/src/helperComponents/ReleaseNotesContent/index.ts

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

package/src/helperComponents/ReleaseNotesContent/styles.module.scss

@@ -0,0 +1,45 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.root {
+  display: flex;
+  flex-direction: column;
+  row-gap: base.$sn-primitive-dimension-16;
+}
+
+.modal {
+  min-width: calc(11 * #{base.$sn-primitive-dimension-64});
+}
+
+.bottomSheet {
+  min-width: 0;
+}
+
+.carousel {
+  min-width: 0;
+}
+
+.stateWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+
+  &[data-surface='modal'] {
+    height: calc(7 * #{base.$sn-primitive-dimension-64} - #{base.$sn-primitive-dimension-4});
+  }
+
+  &[data-surface='bottomSheet'] {
+    min-height: calc(7 * #{base.$sn-primitive-dimension-64});
+  }
+}
+
+.state {
+  width: 100%;
+  max-width: calc(9 * #{base.$sn-primitive-dimension-64} + 3 * #{base.$sn-primitive-dimension-16});
+}
+
+.loading {
+  height: calc(5 * #{base.$sn-primitive-dimension-64});
+}

package/src/helperComponents/ReleaseNotesFooter/ReleaseNotesFooter.tsx

@@ -0,0 +1,84 @@
+import { Button, ButtonProps } from '@cloud-ru/ds-button';
+import { ChevronLeftSVG, ChevronRightSVG } from '@cloud-ru/ds-icons/interface/system';
+import { MouseEvent } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+export type ReleaseNotesFooterProps = {
+  /** Поверхность отображения */
+  surface: 'modal' | 'bottomSheet';
+  /** Количество страниц */
+  total: number;
+  /** Текущая страница, zero-based */
+  pageIndex: number;
+  /** Номер страницы для отображения */
+  readablePageNumber: number;
+  /** Текст счётчика «1 из N» (используется на bottomSheet) */
+  counterLabel: string;
+  /** Label кнопки «Ознакомиться позже» */
+  readLaterLabel: string;
+  /** Действие «Ознакомиться позже» */
+  onReadLaterClick(event: MouseEvent<HTMLButtonElement>): void;
+  /** Предыдущая страница */
+  onPrevPageClick(): void;
+  /** Следующая страница */
+  onNextPageClick(): void;
+  /** Дополнительные пропсы кнопки «Ознакомиться позже» */
+  readLaterButtonProps?: Partial<ButtonProps>;
+};
+
+export function ReleaseNotesFooter({
+  surface,
+  total,
+  pageIndex,
+  readablePageNumber,
+  counterLabel,
+  readLaterLabel,
+  onReadLaterClick,
+  onPrevPageClick,
+  onNextPageClick,
+  readLaterButtonProps,
+}: ReleaseNotesFooterProps) {
+  const hasPagination = total > 1;
+  const isModal = surface === 'modal';
+  const buttonSize = isModal ? 'm' : 'l';
+
+  return (
+    <div className={styles.root} data-surface={surface}>
+      <Button
+        view='function'
+        appearance='neutral'
+        size={buttonSize}
+        label={readLaterLabel}
+        data-test-id={TEST_IDS.releaseNotesReadLaterButton}
+        {...readLaterButtonProps}
+        onClick={onReadLaterClick}
+      />
+
+      {hasPagination && (
+        <div className={styles.controls}>
+          {!isModal && <span className={styles.counter}>{counterLabel}</span>}
+          <Button
+            view='outline'
+            appearance='neutral'
+            size={buttonSize}
+            icon={<ChevronLeftSVG />}
+            disabled={pageIndex === 0}
+            onClick={onPrevPageClick}
+            data-test-id={TEST_IDS.releaseNotesPrevButton}
+          />
+          <Button
+            view='outline'
+            appearance='neutral'
+            size={buttonSize}
+            icon={<ChevronRightSVG />}
+            disabled={readablePageNumber === total}
+            onClick={onNextPageClick}
+            data-test-id={TEST_IDS.releaseNotesNextButton}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/helperComponents/ReleaseNotesFooter/index.ts

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

package/src/helperComponents/ReleaseNotesFooter/styles.module.scss

@@ -0,0 +1,25 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.root {
+  position: relative;
+
+  display: flex;
+  column-gap: base.$sn-primitive-dimension-16;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+}
+
+.controls {
+  display: flex;
+  column-gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+}
+
+.counter {
+  @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', 'm');
+
+  color: base.$sn-theme-color-available-version-textTertiary;
+  white-space: nowrap;
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,6 @@
+export * from './DesktopReleaseNotes';
+export * from './InputConfirm';
+export * from './MobileReleaseNotes';
+export * from './NoteItem';
+export * from './ReleaseNotesContent';
+export * from './ReleaseNotesFooter';

package/src/hooks.ts

@@ -0,0 +1,89 @@
+import { useCallback, useState } from 'react';
+
+type TextFieldValidationParams = {
+  target?: string;
+  errorText: string;
+};
+
+export function useTextFieldValidation({ target, errorText }: TextFieldValidationParams) {
+  const [value, setValue] = useState('');
+  const [error, setError] = useState('');
+
+  const handleChange = useCallback(
+    (nextValue: string) => {
+      setValue(nextValue);
+
+      if (target === nextValue) {
+        setError('');
+      }
+    },
+    [target],
+  );
+
+  const reset = useCallback(() => {
+    setValue('');
+    setError('');
+  }, []);
+
+  const validate = useCallback(() => {
+    if (!target || target === value) {
+      setError('');
+      return true;
+    }
+
+    setError(errorText);
+    return false;
+  }, [errorText, target, value]);
+
+  return { value, error, handleChange, reset, validate };
+}
+
+type ReleaseNotesNavigationParams = {
+  onClose(): void;
+  onReadLaterClick?(): void;
+  onSlideChange?(slide: number): void;
+};
+
+export function useReleaseNotesNavigation({ onClose, onReadLaterClick, onSlideChange }: ReleaseNotesNavigationParams) {
+  const [pageIndex, setPageIndex] = useState(0);
+
+  const setPage = useCallback(
+    (nextPage: number) => {
+      setPageIndex(nextPage);
+      onSlideChange?.(nextPage);
+    },
+    [onSlideChange],
+  );
+
+  const handleClose = useCallback(() => {
+    setPageIndex(0);
+    onClose();
+  }, [onClose]);
+
+  const handleReadLaterClick = useCallback(() => {
+    setPageIndex(0);
+    onReadLaterClick?.();
+    onClose();
+  }, [onClose, onReadLaterClick]);
+
+  const handleNextPageClick = useCallback(
+    (totalPages: number) => {
+      setPage(Math.min(totalPages - 1, pageIndex + 1));
+    },
+    [pageIndex, setPage],
+  );
+
+  const handlePrevPageClick = useCallback(() => {
+    setPage(Math.max(0, pageIndex - 1));
+  }, [pageIndex, setPage]);
+
+  return {
+    pageIndex,
+    readablePageNumber: pageIndex + 1,
+    setPage,
+    handleClose,
+    handleReadLaterClick,
+    handleNextPageClick,
+    handlePrevPageClick,
+  };
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './constants';
+export * from './types';
+export * from './locale';

package/src/locale/index.ts

@@ -0,0 +1,77 @@
+import { defineLocale, defineMessages } from '@cloud-ru/ds-locale';
+
+const MODAL_PREDEFINED_MESSAGES = defineMessages({
+  'en-GB': {
+    deleteModal: {
+      title: 'Delete {{objectType}}',
+      fallbackTitle: 'Delete object',
+      content: 'This action cannot be undone.',
+      confirmLabel: 'To allow deletion, enter:',
+      approve: 'Delete',
+      cancel: 'Cancel',
+    },
+    recallModal: {
+      title: 'Recall request',
+      content: 'This action cannot be undone.',
+      confirmLabel: 'To recall the request, enter:',
+      approve: 'Recall request',
+      cancel: 'Cancel',
+    },
+    confirm: {
+      nameLabel: 'Enter name to confirm',
+      textLabel: 'Enter text to confirm',
+      namePlaceholder: 'Name',
+      textPlaceholder: 'Text',
+      error: 'The entered value does not match the confirmation text',
+    },
+    releaseNotes: {
+      title: 'What is new',
+      readLater: 'Read later',
+      counter: '{{page}} of {{total}}',
+      noDataTitle: 'No news yet',
+      noDataDescription: 'Platform news will appear here soon',
+      errorTitle: 'Could not get data',
+      errorDescription: 'Try to reload the page',
+      retry: 'Refresh',
+    },
+  },
+  'ru-RU': {
+    deleteModal: {
+      title: 'Удаление {{objectType}}',
+      fallbackTitle: 'Удалить объект',
+      content: 'Это действие нельзя отменить.',
+      confirmLabel: 'Чтобы разрешить удаление, введите:',
+      approve: 'Удалить',
+      cancel: 'Отмена',
+    },
+    recallModal: {
+      title: 'Отзыв заявки',
+      content: 'Это действие нельзя отменить.',
+      confirmLabel: 'Чтобы отозвать заявку, введите:',
+      approve: 'Отозвать заявку',
+      cancel: 'Отмена',
+    },
+    confirm: {
+      nameLabel: 'Введите название для подтверждения',
+      textLabel: 'Введите текст для подтверждения',
+      namePlaceholder: 'Введите название',
+      textPlaceholder: 'Текст',
+      error: 'Введенное значение не совпадает с текстом подтверждения',
+    },
+    releaseNotes: {
+      title: 'Что нового',
+      readLater: 'Ознакомиться позже',
+      counter: '{{page}} из {{total}}',
+      noDataTitle: 'Новостей пока нет',
+      noDataDescription: 'Скоро здесь появятся новости платформы',
+      errorTitle: 'Не удалось получить данные',
+      errorDescription: 'Попробуйте перезагрузить страницу',
+      retry: 'Обновить',
+    },
+  },
+});
+
+export type ModalPredefinedMessages = (typeof MODAL_PREDEFINED_MESSAGES)['en-GB'];
+
+/** locale компонента ModalPredefined: `modalPredefinedLocale.useTranslations()` в коде, `.extend(...)` в сервисе. */
+export const modalPredefinedLocale = defineLocale('@cloud-ru/ds-uikit-product-modal-predefined', MODAL_PREDEFINED_MESSAGES);