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

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@cloud-ru/ds-uikit-product-modal-predefined",
+  "version": "1.0.0",
+  "description": "Product preset-компоненты для delete, recall и release notes сценариев на базе Modal и BottomSheet.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloud-ru-tech/snack-v2.git",
+    "directory": "packages/uikit-product-modal-predefined"
+  },
+  "homepage": "https://github.com/cloud-ru-tech/snack-v2/tree/master/packages/uikit-product-modal-predefined",
+  "license": "Apache-2.0",
+  "author": "Robert Kuzhin <rikuzhin@cloud.ru>",
+  "type": "module",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./locale": {
+      "source": "./src/locale/index.ts",
+      "types": "./dist/esm/locale/index.d.ts",
+      "import": "./dist/esm/locale/index.js",
+      "require": "./dist/cjs/locale/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "@cloud-ru/ds-adaptive": "^1.0.0",
+    "@cloud-ru/ds-button": "^1.0.0",
+    "@cloud-ru/ds-bottom-sheet": "^1.0.0",
+    "@cloud-ru/ds-carousel": "^1.0.0",
+    "@cloud-ru/ds-fields": "^1.0.0",
+    "@cloud-ru/ds-icons": "^1.0.0",
+    "@cloud-ru/ds-info-block": "^1.0.0",
+    "@cloud-ru/ds-locale": "^1.0.0",
+    "@cloud-ru/ds-markdown": "^1.0.0",
+    "@cloud-ru/ds-modal": "^1.0.0",
+    "@cloud-ru/ds-scroll": "^1.0.0",
+    "@cloud-ru/ds-skeleton": "^1.0.0",
+    "@cloud-ru/ds-tooltip": "^1.0.0",
+    "@cloud-ru/ds-typography": "^1.0.0",
+    "@cloud-ru/ds-utils": "^1.0.0",
+    "@cloud-ru/ds-uikit-product-copy": "^1.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/DeleteModal/DeleteModal.tsx

@@ -0,0 +1,116 @@
+import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
+import { ModalCustom, WIDTH } from '@cloud-ru/ds-modal';
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import { useRef } from 'react';
+
+import { CONFIRM_TEXT_VARIANT, TEST_IDS } from '../../constants';
+import { InputConfirm } from '../../helperComponents';
+import { useTextFieldValidation } from '../../hooks';
+import { modalPredefinedLocale } from '../../locale';
+import { DeleteModalProps } from '../../types';
+import styles from './styles.module.scss';
+
+export function DeleteModal({
+  open,
+  onClose,
+  mode,
+  closeOnPopstate,
+  objectType,
+  titleTooltip,
+  onDelete,
+  deleting,
+  content,
+  confirmable = false,
+  confirmText,
+  hideConfirmCopyButton,
+  subtitle,
+  confirmTextVariant = CONFIRM_TEXT_VARIANT.Name,
+  ...rest
+}: DeleteModalProps) {
+  const { t } = modalPredefinedLocale.useTranslations();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { value, error, handleChange, reset, validate } = useTextFieldValidation({
+    target: confirmable ? confirmText : undefined,
+    errorText: t('confirm.error'),
+  });
+  const shouldShowConfirm = Boolean(confirmable && confirmText);
+  const title = objectType ? t('deleteModal.title', { objectType }) : t('deleteModal.fallbackTitle');
+  const confirmPlaceholder =
+    confirmTextVariant === CONFIRM_TEXT_VARIANT.Text ? t('confirm.textPlaceholder') : t('confirm.namePlaceholder');
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  const handleApproveClick = () => {
+    if (!validate()) {
+      inputRef.current?.focus();
+      return;
+    }
+
+    onDelete(handleClose);
+  };
+
+  return (
+    <ModalCustom
+      open={open}
+      onClose={handleClose}
+      mode={mode}
+      closeOnPopstate={closeOnPopstate}
+      width={WIDTH.S}
+      data-test-id={TEST_IDS.deleteModal}
+      data-confirmable={confirmable || undefined}
+      {...rest}
+    >
+      <div className={styles.safeAreaTop} />
+      <ModalCustom.Header
+        title={title}
+        subtitle={subtitle}
+        slotAfterTitle={titleTooltip ? <QuestionTooltip size='s' tip={titleTooltip} /> : undefined}
+      />
+      <ModalCustom.Body
+        className={styles.body}
+        content={
+          <div className={styles.content}>
+            {content ?? t('deleteModal.content')}
+            {shouldShowConfirm && (
+              <InputConfirm
+                ref={inputRef}
+                confirmText={confirmText ?? ''}
+                hideConfirmCopyButton={hideConfirmCopyButton}
+                value={value}
+                error={error}
+                size='l'
+                copyLineAlign='start'
+                confirmLabel={t('deleteModal.confirmLabel')}
+                placeholder={confirmPlaceholder}
+                onChange={handleChange}
+              />
+            )}
+          </div>
+        }
+      />
+      <div className={styles.safeAreaBottom} />
+      <ModalCustom.Footer>
+        <div className={styles.footer}>
+          <Button
+            view={VIEW.Outline}
+            appearance={APPEARANCE.Neutral}
+            label={t('deleteModal.cancel')}
+            onClick={handleClose}
+            data-test-id={TEST_IDS.cancelButton}
+          />
+          <Button
+            view={VIEW.Filled}
+            appearance={APPEARANCE.Critical}
+            label={t('deleteModal.approve')}
+            loading={deleting}
+            onClick={handleApproveClick}
+            data-test-id={TEST_IDS.approveButton}
+          />
+        </div>
+      </ModalCustom.Footer>
+    </ModalCustom>
+  );
+}

package/src/components/DeleteModal/index.ts

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

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

@@ -0,0 +1,37 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/modal.module' as modal;
+
+.safeAreaTop {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  padding-top: base.simple-var(modal.$modal, 'anatomy', 'container', 'safeArea', 'padding-top');
+}
+
+.safeAreaBottom {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  padding-bottom: base.simple-var(modal.$modal, 'anatomy', 'container', 'safeArea', 'padding-bottom');
+}
+
+.body {
+  min-height: auto;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  row-gap: base.$sn-primitive-dimension-16;
+}
+
+.footer {
+  display: flex;
+  column-gap: base.$sn-primitive-dimension-8;
+  justify-content: flex-end;
+  width: 100%;
+}

package/src/components/RecallModal/RecallModal.tsx

@@ -0,0 +1,111 @@
+import { APPEARANCE, Button, VIEW } from '@cloud-ru/ds-button';
+import { ModalCustom, WIDTH } from '@cloud-ru/ds-modal';
+import { QuestionTooltip } from '@cloud-ru/ds-tooltip';
+import { useRef } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { InputConfirm } from '../../helperComponents';
+import { useTextFieldValidation } from '../../hooks';
+import { modalPredefinedLocale } from '../../locale';
+import { RecallModalProps } from '../../types';
+import styles from './styles.module.scss';
+
+export function RecallModal({
+  open,
+  onClose,
+  mode,
+  closeOnPopstate,
+  titleTooltip,
+  onRecall,
+  loading,
+  content,
+  confirmable = false,
+  confirmText,
+  hideConfirmCopyButton,
+  subtitle,
+  ...rest
+}: RecallModalProps) {
+  const { t } = modalPredefinedLocale.useTranslations();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const { value, error, handleChange, reset, validate } = useTextFieldValidation({
+    target: confirmable ? confirmText : undefined,
+    errorText: t('confirm.error'),
+  });
+  const shouldShowConfirm = Boolean(confirmable && confirmText);
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  const handleApproveClick = () => {
+    if (!validate()) {
+      inputRef.current?.focus();
+      return;
+    }
+
+    onRecall(handleClose);
+  };
+
+  return (
+    <ModalCustom
+      open={open}
+      onClose={handleClose}
+      mode={mode}
+      closeOnPopstate={closeOnPopstate}
+      width={WIDTH.S}
+      data-test-id={TEST_IDS.recallModal}
+      data-confirmable={confirmable || undefined}
+      {...rest}
+    >
+      <div className={styles.safeAreaTop} />
+      <ModalCustom.Header
+        title={t('recallModal.title')}
+        subtitle={subtitle}
+        slotAfterTitle={titleTooltip ? <QuestionTooltip size='s' tip={titleTooltip} /> : undefined}
+      />
+      <ModalCustom.Body
+        className={styles.body}
+        content={
+          <div className={styles.content}>
+            {content ?? t('recallModal.content')}
+            {shouldShowConfirm && (
+              <InputConfirm
+                ref={inputRef}
+                confirmText={confirmText ?? ''}
+                confirmLabel={t('recallModal.confirmLabel')}
+                hideConfirmCopyButton={hideConfirmCopyButton}
+                value={value}
+                error={error}
+                size='l'
+                copyLineAlign='start'
+                placeholder={t('confirm.namePlaceholder')}
+                onChange={handleChange}
+              />
+            )}
+          </div>
+        }
+      />
+      <div className={styles.safeAreaBottom} />
+      <ModalCustom.Footer>
+        <div className={styles.footer}>
+          <Button
+            view={VIEW.Outline}
+            appearance={APPEARANCE.Neutral}
+            label={t('recallModal.cancel')}
+            onClick={handleClose}
+            data-test-id={TEST_IDS.cancelButton}
+          />
+          <Button
+            view={VIEW.Filled}
+            appearance={APPEARANCE.Critical}
+            label={t('recallModal.approve')}
+            loading={loading}
+            onClick={handleApproveClick}
+            data-test-id={TEST_IDS.approveButton}
+          />
+        </div>
+      </ModalCustom.Footer>
+    </ModalCustom>
+  );
+}

package/src/components/RecallModal/index.ts

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

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

@@ -0,0 +1,37 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/modal.module' as modal;
+
+.safeAreaTop {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  padding-top: base.simple-var(modal.$modal, 'anatomy', 'container', 'safeArea', 'padding-top');
+}
+
+.safeAreaBottom {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  padding-bottom: base.simple-var(modal.$modal, 'anatomy', 'container', 'safeArea', 'padding-bottom');
+}
+
+.body {
+  min-height: auto;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  row-gap: base.$sn-primitive-dimension-16;
+}
+
+.footer {
+  display: flex;
+  column-gap: base.$sn-primitive-dimension-8;
+  justify-content: flex-end;
+  width: 100%;
+}

package/src/components/ReleaseNotes/ReleaseNotes.tsx

@@ -0,0 +1,15 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+
+import { DesktopReleaseNotes, MobileReleaseNotes } from '../../helperComponents';
+import { ReleaseNotesProps } from '../../types';
+
+/**
+ * Адаптивный release-notes: на `mobile` — bottom sheet, иначе — модальное окно. Поверхность выбирается
+ * по `useAdaptiveLayout()` из `@cloud-ru/ds-adaptive` и пропом не задаётся. Форс раскладки — через
+ * `withLayoutType(ReleaseNotes, 'mobile')` либо `AdaptiveProvider` в поддереве.
+ */
+export function ReleaseNotes(props: ReleaseNotesProps) {
+  const { layoutType } = useAdaptiveLayout();
+
+  return isMobileLayout(layoutType) ? <MobileReleaseNotes {...props} /> : <DesktopReleaseNotes {...props} />;
+}

package/src/components/ReleaseNotes/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './DeleteModal';
+export * from './RecallModal';
+export * from './ReleaseNotes';

package/src/constants.ts

@@ -0,0 +1,29 @@
+export const CONTENT_STATE = {
+  Data: 'data',
+  NoData: 'noData',
+  Error: 'error',
+} as const;
+
+export const CONFIRM_TEXT_VARIANT = {
+  Name: 'name',
+  Text: 'text',
+} as const;
+
+export const TEST_IDS = {
+  deleteModal: 'delete-modal',
+  recallModal: 'recall-modal',
+  releaseNotes: 'release-notes',
+  approveButton: 'modal-predefined__approve-button',
+  cancelButton: 'modal-predefined__cancel-button',
+  confirmInput: 'modal-predefined__confirm-input',
+  confirmCopyButton: 'modal-predefined__confirm-copy-button',
+  releaseNotesItem: 'modal-predefined__release-notes-item',
+  releaseNotesMedia: 'modal-predefined__release-notes-media',
+  releaseNotesVideo: 'modal-predefined__release-notes-video',
+  releaseNotesError: 'modal-predefined__release-notes-error',
+  releaseNotesNoData: 'modal-predefined__release-notes-no-data',
+  releaseNotesRetryButton: 'modal-predefined__release-notes-retry-button',
+  releaseNotesReadLaterButton: 'modal-predefined__release-notes-read-later-button',
+  releaseNotesPrevButton: 'modal-predefined__release-notes-prev-button',
+  releaseNotesNextButton: 'modal-predefined__release-notes-next-button',
+} as const;

package/src/helperComponents/DesktopReleaseNotes/DesktopReleaseNotes.tsx

@@ -0,0 +1,85 @@
+import { ModalCustom, WIDTH } from '@cloud-ru/ds-modal';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+
+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';
+import styles from './styles.module.scss';
+
+export function DesktopReleaseNotes({
+  open,
+  onClose,
+  closeOnPopstate,
+  contentState = CONTENT_STATE.Data,
+  items,
+  loading,
+  onReadLaterClick,
+  onDataErrorRetryClick,
+  onSlideChange,
+  ...rest
+}: ReleaseNotesProps) {
+  const { t } = modalPredefinedLocale.useTranslations();
+  const {
+    pageIndex,
+    readablePageNumber,
+    setPage,
+    handleClose,
+    handleReadLaterClick,
+    handleNextPageClick,
+    handlePrevPageClick,
+  } = useReleaseNotesNavigation({ onClose, onReadLaterClick, onSlideChange });
+  const shouldShowFooter = contentState === CONTENT_STATE.Data && (loading || items.length > 0);
+
+  return (
+    <ModalCustom
+      open={open}
+      onClose={handleClose}
+      closeOnPopstate={closeOnPopstate}
+      width={WIDTH.M}
+      data-content-state={contentState}
+      data-surface='modal'
+      {...extractSupportProps(rest)}
+    >
+      <div className={styles.safeAreaTop} />
+      <ModalCustom.Header title={t('releaseNotes.title')} />
+      <ModalCustom.Body
+        className={styles.body}
+        content={
+          <ReleaseNotesContent
+            contentState={contentState}
+            items={items}
+            loading={loading}
+            pageIndex={pageIndex}
+            surface='modal'
+            noDataTitle={t('releaseNotes.noDataTitle')}
+            noDataDescription={t('releaseNotes.noDataDescription')}
+            errorTitle={t('releaseNotes.errorTitle')}
+            errorDescription={t('releaseNotes.errorDescription')}
+            retryLabel={t('releaseNotes.retry')}
+            onPageChange={setPage}
+            onDataErrorRetryClick={onDataErrorRetryClick}
+          />
+        }
+      />
+      <div className={styles.safeAreaBottom} />
+      {shouldShowFooter && (
+        <ModalCustom.Footer>
+          <ReleaseNotesFooter
+            surface='modal'
+            total={items.length}
+            pageIndex={pageIndex}
+            readablePageNumber={readablePageNumber}
+            counterLabel={t('releaseNotes.counter', { page: readablePageNumber, total: items.length })}
+            readLaterLabel={t('releaseNotes.readLater')}
+            onReadLaterClick={handleReadLaterClick}
+            onPrevPageClick={handlePrevPageClick}
+            onNextPageClick={() => handleNextPageClick(items.length)}
+          />
+        </ModalCustom.Footer>
+      )}
+    </ModalCustom>
+  );
+}

package/src/helperComponents/DesktopReleaseNotes/index.ts

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

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

@@ -0,0 +1,24 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/modal.module' as modal;
+
+.safeAreaTop {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  padding-top: base.simple-var(modal.$modal, 'anatomy', 'container', 'safeArea', 'padding-top');
+}
+
+.safeAreaBottom {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+
+  padding-bottom: base.simple-var(modal.$modal, 'anatomy', 'container', 'safeArea', 'padding-bottom');
+}
+
+.body {
+  min-height: calc(6 * #{base.$sn-primitive-dimension-64});
+}

package/src/helperComponents/InputConfirm/InputConfirm.tsx

@@ -0,0 +1,72 @@
+import { FieldCombo, FieldComboProps, VALIDATION_STATE } from '@cloud-ru/ds-fields';
+import { CopyButton } from '@cloud-ru/ds-uikit-product-copy';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { forwardRef } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+export type InputConfirmProps = WithSupportProps<{
+  /** Текст, который нужно ввести для подтверждения */
+  confirmText: string;
+  /** Инструкция над текстом подтверждения */
+  confirmLabel?: string;
+  /** Скрыть кнопку копирования */
+  hideConfirmCopyButton?: boolean;
+  /** Значение поля */
+  value: string;
+  /** Текст ошибки */
+  error?: string;
+  /** Label поля */
+  label?: string;
+  /** Размер поля */
+  size?: FieldComboProps['size'];
+  /** Выравнивание copy-line */
+  copyLineAlign?: 'start' | 'space-between';
+  /** Placeholder поля */
+  placeholder: string;
+  /** Колбэк изменения значения */
+  onChange(value: string): void;
+}>;
+
+export const InputConfirm = forwardRef<HTMLInputElement, InputConfirmProps>(function InputConfirm(
+  {
+    confirmText,
+    confirmLabel,
+    hideConfirmCopyButton,
+    value,
+    error,
+    label,
+    size = 'm',
+    copyLineAlign = 'space-between',
+    placeholder,
+    onChange,
+    ...rest
+  },
+  ref,
+) {
+  return (
+    <div className={styles.root}>
+      {confirmLabel && <span className={styles.confirmLabel}>{confirmLabel}</span>}
+      <div className={styles.confirmText} data-align={copyLineAlign}>
+        <span className={styles.confirmValue}>{confirmText}</span>
+        {!hideConfirmCopyButton && <CopyButton valueToCopy={confirmText} data-test-id={TEST_IDS.confirmCopyButton} />}
+      </div>
+
+      <FieldCombo
+        {...rest}
+        ref={ref}
+        inputMode='text'
+        label={label}
+        required={Boolean(label)}
+        size={size}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        hint={error}
+        validationState={error ? VALIDATION_STATE.Error : VALIDATION_STATE.Default}
+        data-test-id={TEST_IDS.confirmInput}
+      />
+    </div>
+  );
+});

package/src/helperComponents/InputConfirm/index.ts

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

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

@@ -0,0 +1,30 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.confirmText {
+  display: flex;
+  column-gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+  justify-content: space-between;
+
+  margin-bottom: base.$sn-primitive-dimension-8;
+}
+
+.confirmText[data-align='start'] {
+  column-gap: base.$sn-primitive-dimension-4;
+  justify-content: flex-start;
+}
+
+.confirmLabel {
+  @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', 'm');
+
+  color: base.$sn-theme-color-available-version-textSecondary;
+}
+
+.confirmValue {
+  @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', 'm');
+}