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

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

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

package/dist/esm/locale/index.js

@@ -0,0 +1,73 @@
+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: 'Обновить',
+        },
+    },
+});
+/** locale компонента ModalPredefined: `modalPredefinedLocale.useTranslations()` в коде, `.extend(...)` в сервисе. */
+export const modalPredefinedLocale = defineLocale('@cloud-ru/ds-uikit-product-modal-predefined', MODAL_PREDEFINED_MESSAGES);

package/dist/esm/style.css

@@ -0,0 +1,243 @@
+.safeAreaTop{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.safeAreaBottom{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+
+.body{
+  min-height:auto;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+}
+
+.footer{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  justify-content:flex-end;
+  width:100%;
+}
+.safeAreaTop{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.safeAreaBottom{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+
+.body{
+  min-height:auto;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+}
+
+.footer{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  justify-content:flex-end;
+  width:100%;
+}
+.safeAreaTop{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-top:var(--sn-modal-anatomy-container-safeArea-paddingTop, var(--sn-density-spacing-interval-l, var(--sn-primitive-dimension-24, 24px)));
+}
+
+.safeAreaBottom{
+  display:flex;
+  flex-direction:column;
+  align-items:flex-start;
+  align-self:stretch;
+  padding-bottom:var(--sn-modal-anatomy-container-safeArea-paddingBottom, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+}
+
+.body{
+  min-height:calc(6 * var(--sn-primitive-dimension-64, 64px));
+}
+.root{
+  display:flex;
+  flex-direction:column;
+}
+
+.confirmText{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+  justify-content:space-between;
+  margin-bottom:var(--sn-primitive-dimension-8, 8px);
+}
+
+.confirmText[data-align=start]{
+  -moz-column-gap:var(--sn-primitive-dimension-4, 4px);
+       column-gap:var(--sn-primitive-dimension-4, 4px);
+  justify-content:flex-start;
+}
+
+.confirmLabel{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+.confirmValue{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+}
+.root{
+  display:grid;
+  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
+  -moz-column-gap:var(--sn-primitive-dimension-24, 24px);
+       column-gap:var(--sn-primitive-dimension-24, 24px);
+  min-height:calc(5 * var(--sn-primitive-dimension-64, 64px));
+}
+.root[data-surface=bottomSheet]{
+  grid-template-columns:minmax(0, 1fr);
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+  min-height:0;
+}
+
+.media{
+  position:relative;
+  overflow:hidden;
+  min-width:0;
+  border-radius:var(--sn-primitive-dimension-16, 16px);
+}
+
+.image,
+.video{
+  display:block;
+  width:100%;
+  height:100%;
+  -o-object-fit:cover;
+     object-fit:cover;
+}
+
+.videoSkeleton{
+  position:absolute;
+  inset:0;
+}
+
+.content{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-12, 12px);
+  min-width:0;
+}
+
+.description{
+  min-height:0;
+}
+
+.root[data-surface=modal] .content{
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+  order:1;
+}
+
+.root[data-surface=modal] .media{
+  order:2;
+}
+.root{
+  display:flex;
+  flex-direction:column;
+  row-gap:var(--sn-primitive-dimension-16, 16px);
+}
+
+.modal{
+  min-width:calc(11 * var(--sn-primitive-dimension-64, 64px));
+}
+
+.bottomSheet{
+  min-width:0;
+}
+
+.carousel{
+  min-width:0;
+}
+
+.stateWrapper{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+}
+.stateWrapper[data-surface=modal]{
+  height:calc(7 * var(--sn-primitive-dimension-64, 64px) - var(--sn-primitive-dimension-4, 4px));
+}
+.stateWrapper[data-surface=bottomSheet]{
+  min-height:calc(7 * var(--sn-primitive-dimension-64, 64px));
+}
+
+.state{
+  width:100%;
+  max-width:calc(9 * var(--sn-primitive-dimension-64, 64px) + 3 * var(--sn-primitive-dimension-16, 16px));
+}
+
+.loading{
+  height:calc(5 * var(--sn-primitive-dimension-64, 64px));
+}
+.root{
+  position:relative;
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-16, 16px);
+       column-gap:var(--sn-primitive-dimension-16, 16px);
+  align-items:center;
+  justify-content:space-between;
+  width:100%;
+}
+
+.controls{
+  display:flex;
+  -moz-column-gap:var(--sn-primitive-dimension-8, 8px);
+       column-gap:var(--sn-primitive-dimension-8, 8px);
+  align-items:center;
+}
+
+.counter{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  color:var(--sn-theme-color-available-version-textTertiary, var(--sn-brand-color-text-version-tertiary, rgba(65, 66, 78, 0.5490196078)));
+  white-space:nowrap;
+}

package/dist/esm/types.d.ts

@@ -0,0 +1,67 @@
+import { ButtonProps } from '@cloud-ru/ds-button';
+import { ModalCustomProps } from '@cloud-ru/ds-modal';
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+import { CONFIRM_TEXT_VARIANT, CONTENT_STATE } from './constants.js';
+export type ReleaseNotesContentState = ValueOf<typeof CONTENT_STATE>;
+export type ConfirmTextVariant = ValueOf<typeof CONFIRM_TEXT_VARIANT>;
+export type NoteItemProps = {
+    /** Заголовок новости */
+    title: string;
+    /** Описание новости в markdown */
+    description: string;
+    /** Иллюстрация */
+    image: {
+        src: string;
+        alt: string;
+    };
+    /** Видео вместо статичной иллюстрации */
+    video?: string;
+};
+type BaseActionModalProps = Pick<ModalCustomProps, 'open' | 'onClose' | 'mode' | 'closeOnPopstate'> & {
+    /** Подсказка рядом с заголовком */
+    titleTooltip?: ReactNode;
+    /** Состояние с подтверждением через ввод текста */
+    confirmable?: boolean;
+    /** Текст, который нужно ввести для подтверждения */
+    confirmText?: string;
+    /** Скрыть кнопку копирования текста подтверждения */
+    hideConfirmCopyButton?: boolean;
+    /** Основной текст модалки */
+    content?: ReactNode;
+    /** Подзаголовок */
+    subtitle?: ReactNode;
+};
+export type DeleteModalProps = WithSupportProps<BaseActionModalProps & {
+    /** Тип удаляемого объекта, отображается в заголовке */
+    objectType?: string;
+    /** Колбэк подтверждения удаления */
+    onDelete(onClose: () => void): void;
+    /** Состояние загрузки кнопки удаления */
+    deleting?: boolean;
+    /** Тип текста подтверждения */
+    confirmTextVariant?: ConfirmTextVariant;
+}>;
+export type RecallModalProps = WithSupportProps<BaseActionModalProps & {
+    /** Колбэк подтверждения отзыва */
+    onRecall(onClose: () => void): void;
+    /** Состояние загрузки кнопки отзыва */
+    loading?: boolean;
+}>;
+export type ReleaseNotesProps = WithSupportProps<Pick<ModalCustomProps, 'open' | 'onClose' | 'closeOnPopstate'> & {
+    /** Визуальное состояние контента по Figma */
+    contentState?: ReleaseNotesContentState;
+    /** Массив новостей */
+    items: NoteItemProps[];
+    /** Состояние загрузки контента */
+    loading?: boolean;
+    /** Действие "Ознакомиться позже" */
+    onReadLaterClick?(): void;
+    /** Действие перезагрузки на экране ошибки */
+    onDataErrorRetryClick?(): void;
+    /** Действие при смене слайда */
+    onSlideChange?(slide: number): void;
+    /** Только mobile: дополнительные пропсы action-кнопки "Ознакомиться позже" (на desktop игнорируется). */
+    readLaterButtonProps?: Partial<ButtonProps>;
+}>;
+export {};

package/dist/esm/types.js

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