@cloud-ru/ds-uikit-product-page-layout 1.0.0

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

@@ -0,0 +1,61 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.headline {
+  display: flex;
+  flex-direction: column;
+}
+
+.headlineLayout {
+  display: flex;
+  flex-direction: row;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: flex-start;
+}
+
+.titleLayout {
+  display: flex;
+  flex-direction: row;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: flex-start;
+
+  width: 100%;
+  min-width: 0;
+
+  color: base.$sn-theme-color-available-version-textMain;
+}
+
+.title {
+  min-width: 0;
+}
+
+.prefixButtonWrapper,
+.statusWrapper {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  // min-height = высота строки заголовка: before-слот/статус не короче строки title.
+  min-height: base.$sn-regular-headline-s-lineHeight;
+}
+
+.moreActions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  // Кап высоты до строки заголовка: kebab (`Button` 40px) центрируется и симметрично торчит ±4px,
+  // НЕ растягивая строку выше line-height title (Figma: slotTitle 32px, кнопка 40px offset -4,-4).
+  height: base.$sn-regular-headline-s-lineHeight;
+  margin-left: auto;
+}
+
+.actions {
+  display: flex;
+  flex-shrink: 0;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.subtitle {
+  margin-top: base.$sn-primitive-dimension-4;
+  color: base.$sn-theme-color-available-version-textMain;
+}

package/src/components/Headline/types.ts

@@ -0,0 +1,19 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+
+export type HeadlineProps = WithSupportProps<{
+  /** Заголовок страницы */
+  title: string;
+  /** Слот перед заголовком (например, кнопка «назад») */
+  slotBeforeTitle?: ReactNode;
+  /** Слот после заголовка (например, статус) */
+  slotAfterTitle?: ReactNode;
+  /** Действия справа от заголовка */
+  actions?: ReactNode;
+  /** Слот действий внутри строки заголовка (mobile-рендереры кладут сюда kebab/«ещё») */
+  moreActions?: ReactNode;
+  /** Подзаголовок под заголовком */
+  subtitle?: ReactNode;
+  /** Обрезать заголовок в одну строку с многоточием */
+  truncateTitle?: boolean;
+}>;

package/src/components/PageCatalog/DesktopPageCatalog.tsx

@@ -0,0 +1,26 @@
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { PropsWithChildren } from 'react';
+
+import { Headline, HeadlineProps } from '../Headline';
+import styles from './styles.module.scss';
+
+export type DesktopPageCatalogProps = WithSupportProps<
+  PropsWithChildren<
+    Pick<HeadlineProps, 'title' | 'actions'> & {
+      /** CSS-класс */
+      className?: string;
+    }
+  >
+>;
+
+export function DesktopPageCatalog({ children, title, actions, className, ...rest }: DesktopPageCatalogProps) {
+  return (
+    <div className={cn(styles.catalog, className)} {...extractSupportProps(rest)}>
+      <Headline title={title} actions={actions} />
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+}
+
+DesktopPageCatalog.displayName = 'DesktopPageCatalog';

package/src/components/PageCatalog/MobilePageCatalog.tsx

@@ -0,0 +1,36 @@
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { PropsWithChildren } from 'react';
+
+import { ActionsProps, MobileActions } from '../Actions';
+import { Headline, HeadlineProps } from '../Headline';
+import styles from './mobileStyles.module.scss';
+
+export type MobilePageCatalogProps = WithSupportProps<
+  PropsWithChildren<
+    Pick<HeadlineProps, 'title'> & {
+      className?: string;
+      actions?: ActionsProps['items'];
+      maxVisibleActionsItems?: ActionsProps['maxVisibleItems'];
+    }
+  >
+>;
+
+export function MobilePageCatalog({
+  children,
+  title,
+  actions = [],
+  maxVisibleActionsItems,
+  className,
+  ...rest
+}: MobilePageCatalogProps) {
+  return (
+    <div className={cn(styles.catalog, className)} {...extractSupportProps(rest)}>
+      <Headline title={title} />
+
+      {actions.length > 0 && <MobileActions items={actions} maxVisibleItems={maxVisibleActionsItems} />}
+
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+}

package/src/components/PageCatalog/PageCatalog.tsx

@@ -0,0 +1,28 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+
+import { DesktopActions } from '../Actions';
+import { DesktopPageCatalog, DesktopPageCatalogProps } from './DesktopPageCatalog';
+import { MobilePageCatalog, MobilePageCatalogProps } from './MobilePageCatalog';
+
+export type PageCatalogProps = Omit<DesktopPageCatalogProps, 'actions'> &
+  Pick<MobilePageCatalogProps, 'actions' | 'maxVisibleActionsItems'>;
+
+/**
+ * Адаптивный `PageCatalog`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageCatalog` со структурированными `actions`; на остальных раскладках оборачивает `actions`
+ * в `DesktopActions` и отдаёт `DesktopPageCatalog`. Форс платформы — `withLayoutType` / вложенный
+ * `<AdaptiveProvider layoutType=…>`; пропа `layoutType` у компонента нет.
+ */
+export function PageCatalog({ actions, maxVisibleActionsItems, ...props }: PageCatalogProps) {
+  const { layoutType } = useAdaptiveLayout();
+
+  if (isMobileLayout(layoutType)) {
+    return <MobilePageCatalog actions={actions} maxVisibleActionsItems={maxVisibleActionsItems} {...props} />;
+  }
+
+  const actionsNode = actions ? <DesktopActions items={actions} /> : undefined;
+
+  return <DesktopPageCatalog {...props} actions={actionsNode} />;
+}
+
+PageCatalog.displayName = 'PageCatalog';

package/src/components/PageCatalog/index.ts

@@ -0,0 +1,3 @@
+export * from './PageCatalog';
+export * from './DesktopPageCatalog';
+export * from './MobilePageCatalog';

package/src/components/PageCatalog/mobileStyles.module.scss

@@ -0,0 +1,18 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.catalog {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-density-spacing-interval-l;
+
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0 auto;
+  padding: base.$sn-density-spacing-interval-l;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}

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

@@ -0,0 +1,21 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.catalog {
+  display: flex;
+  flex-direction: column;
+  gap: base.$sn-density-spacing-interval-m;
+
+  box-sizing: border-box;
+  min-width: 992px;
+
+  // 992px/1248px — ширина body и десктопного фрейма страницы, токена нет.
+  max-width: min(100%, 1248px);
+  margin: 0 auto;
+  padding: base.$sn-density-spacing-interval-l;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}

package/src/components/PageForm/DesktopPageForm.tsx

@@ -0,0 +1,112 @@
+import { Block, SIZE as BLOCK_SIZE } from '@cloud-ru/ds-block';
+import { APPEARANCE, SIZE, VIEW } from '@cloud-ru/ds-button';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useMemo } from 'react';
+
+import { Headline } from '../Headline';
+import { useButtonWithTooltip, useGetButtonLabel, useStickyFooterShadow } from './hooks';
+import styles from './styles.module.scss';
+import { DesktopPageFormProps } from './types';
+
+export function DesktopPageForm({
+  children,
+  stepper,
+  title,
+  subtitle,
+  className,
+  footer,
+  sideBlock,
+  priceSummary,
+  stickyFooter,
+  ...rest
+}: DesktopPageFormProps) {
+  const getButtonLabel = useGetButtonLabel();
+
+  const { sentinelRef, atBottom } = useStickyFooterShadow(stickyFooter);
+
+  const moreItems = useMemo(
+    () => [priceSummary?.content].concat(sideBlock?.map(item => item.content)).filter(Boolean),
+    [priceSummary?.content, sideBlock],
+  );
+
+  const PrimaryButton = useButtonWithTooltip({ view: VIEW.Filled, tooltip: footer?.buttonPrimary.tooltip });
+  const SecondaryButton = useButtonWithTooltip({ view: VIEW.Outline, tooltip: footer?.buttonSecondary?.tooltip });
+  const AdditionalButton = useButtonWithTooltip({ view: VIEW.Simple, tooltip: footer?.buttonAdditional?.tooltip });
+
+  return (
+    <div className={cn(styles.container, className)} {...extractSupportProps(rest)}>
+      <Block size={BLOCK_SIZE.L} className={styles.form} contentClassName={styles.formContent}>
+        <div className={styles.headline}>
+          <Headline title={title} subtitle={subtitle} />
+        </div>
+
+        {stepper}
+
+        <div className={styles.body}>{children}</div>
+
+        {footer && (
+          <>
+            <div
+              className={cn(styles.footer, {
+                [styles.footerSticky]: stickyFooter,
+                [styles.footerStuck]: stickyFooter && !atBottom,
+              })}
+            >
+              {footer.buttonSecondary && (
+                <SecondaryButton
+                  {...footer.buttonSecondary}
+                  size={SIZE.M}
+                  appearance={APPEARANCE.Neutral}
+                  label={
+                    footer.buttonSecondary.variant === 'custom'
+                      ? footer.buttonSecondary.label
+                      : getButtonLabel(footer.buttonSecondary.variant)
+                  }
+                />
+              )}
+
+              <div className={styles.mainActions}>
+                {footer.buttonAdditional && (
+                  <AdditionalButton {...footer.buttonAdditional} size={SIZE.M} appearance={APPEARANCE.Neutral} />
+                )}
+
+                <PrimaryButton
+                  {...footer.buttonPrimary}
+                  size={SIZE.M}
+                  appearance={APPEARANCE.Primary}
+                  label={
+                    footer.buttonPrimary.variant === 'custom'
+                      ? footer.buttonPrimary.label
+                      : getButtonLabel(footer.buttonPrimary.variant)
+                  }
+                />
+              </div>
+            </div>
+
+            {stickyFooter && (
+              <>
+                <div ref={sentinelRef} className={styles.footerSentinel} aria-hidden />
+                {/* Замыкающий пустой блок держит нижний отступ формы под прилипшим футером. */}
+                {/* <div /> */}
+              </>
+            )}
+          </>
+        )}
+      </Block>
+
+      {moreItems.length > 0 && (
+        <div className={styles.sideItems}>
+          {/* sideBlock/priceSummary приносят свою подложку сами (quota-виджет, price-summary).
+              Своя `.card`-обёртка давала двойную подложку и расходилась с mobile-PageForm
+              (там контент рендерится без карточки) и с легаси-PageForm. */}
+          {moreItems.map((item, index) => (
+            <div key={index}>{item}</div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+DesktopPageForm.displayName = 'DesktopPageForm';

package/src/components/PageForm/MobilePageForm.tsx

@@ -0,0 +1,187 @@
+import { LAYOUT_TYPE, withLayoutType } from '@cloud-ru/ds-adaptive';
+import { APPEARANCE, Button, BUTTON_GROUP_ACTION_SLOT, ButtonGroup, VIEW } from '@cloud-ru/ds-button';
+import { Dropdown } from '@cloud-ru/ds-dropdown';
+import { ChevronRightSVG, KebabSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist } from '@cloud-ru/ds-list';
+import { ModalCustom } from '@cloud-ru/ds-modal';
+import { WithTooltip } from '@cloud-ru/ds-tooltip';
+import { SIZE, Typography, VARIANT } from '@cloud-ru/ds-typography';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useState } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { Headline } from '../Headline';
+import { useGetButtonLabel } from './hooks';
+import styles from './mobileStyles.module.scss';
+import { DesktopPageFormProps } from './types';
+
+export type MobilePageFormProps = DesktopPageFormProps;
+
+/** Убирает PageForm-специфичные поля (`variant`/`tooltip`/`size`), оставляя пропсы `@cloud-ru/ds-button` для `ButtonGroup`. */
+function stripFooterButton<T extends object>(button: T): Omit<T, 'variant' | 'tooltip' | 'size'> {
+  const buttonProps = { ...button } as Record<string, unknown>;
+
+  delete buttonProps.variant;
+  delete buttonProps.tooltip;
+  delete buttonProps.size;
+
+  return buttonProps as Omit<T, 'variant' | 'tooltip' | 'size'>;
+}
+
+function MobilePageFormBase({
+  children,
+  title,
+  subtitle,
+  className,
+  footer,
+  stepper,
+  priceSummary,
+  sideBlock,
+  ...rest
+}: MobilePageFormProps) {
+  const [openPriceSummary, setOpenPriceSummary] = useState(false);
+  const [openMore, setOpenMore] = useState(false);
+  const [openMoreContentIndex, setOpenMoreContentIndex] = useState<number | undefined>(undefined);
+
+  const getButtonLabel = useGetButtonLabel();
+
+  const footerTooltips = footer && {
+    [BUTTON_GROUP_ACTION_SLOT.Primary]: footer.buttonPrimary.tooltip,
+    [BUTTON_GROUP_ACTION_SLOT.Secondary]: footer.buttonSecondary?.tooltip,
+    [BUTTON_GROUP_ACTION_SLOT.Tertiary]: footer.buttonAdditional?.tooltip,
+  };
+
+  return (
+    <div className={cn(styles.container, className)} {...extractSupportProps(rest)}>
+      <div className={styles.header}>
+        <Headline
+          title={title}
+          subtitle={subtitle}
+          moreActions={
+            sideBlock ? (
+              <Droplist
+                size='m'
+                open={openMore}
+                onOpenChange={setOpenMore}
+                items={sideBlock.map(({ label }, idx) => ({
+                  id: idx,
+                  content: {
+                    label: label,
+                  },
+                  onClick: () => {
+                    setOpenMoreContentIndex(idx);
+                    setOpenMore(false);
+                  },
+                }))}
+              >
+                <Button view={VIEW.Function} appearance={APPEARANCE.Neutral} icon={<KebabSVG />} size='m' />
+              </Droplist>
+            ) : undefined
+          }
+        />
+
+        {stepper}
+      </div>
+
+      {sideBlock && (
+        <ModalCustom
+          open={openMoreContentIndex !== undefined}
+          onClose={() => setOpenMoreContentIndex(undefined)}
+          // Высоту листа задаёт сам sideBlock-элемент (`snapPoints`); напр. `[1]` — на всю высоту.
+          // По умолчанию — по высоте контента.
+          snapPoints={sideBlock[openMoreContentIndex ?? 0].snapPoints}
+        >
+          <ModalCustom.Body content={sideBlock[openMoreContentIndex ?? 0].content} />
+        </ModalCustom>
+      )}
+
+      <div className={styles.body}>{children}</div>
+
+      {(priceSummary || footer) && (
+        <div className={styles.footer}>
+          {priceSummary && (
+            <div className={styles.priceSummary}>
+              <Typography variant={VARIANT.body} size={SIZE.m} className={styles.priceSummaryText}>
+                Оценка бюджета
+              </Typography>
+
+              <Dropdown
+                open={openPriceSummary}
+                onOpenChange={setOpenPriceSummary}
+                content={<div className={styles.modalContent}>{priceSummary.content}</div>}
+                data-test-id={TEST_IDS.pageForm.priceSummarySheet}
+              >
+                <div className={styles.priceSummaryRight} data-test-id={TEST_IDS.pageForm.priceSummaryTrigger}>
+                  <Typography variant={VARIANT.label} size={SIZE.l} className={styles.priceSummaryTotal}>
+                    {priceSummary.total}
+                  </Typography>
+                  {priceSummary.content && (
+                    <Button view={VIEW.Function} appearance={APPEARANCE.Neutral} size='m' icon={<ChevronRightSVG />} />
+                  )}
+                </div>
+              </Dropdown>
+            </div>
+          )}
+
+          {footer && (
+            <ButtonGroup
+              size='m'
+              filled
+              // 2 кнопки — в ряд (делят ширину); 3 — в столбик (правило футеров).
+              vertical={
+                [footer.buttonPrimary, footer.buttonSecondary, footer.buttonAdditional].filter(Boolean).length >= 3
+              }
+              renderAction={(button, slot) => {
+                const tooltip = footerTooltips?.[slot];
+
+                // disableSpanWrapper — чтобы кнопка осталась прямым flex-потомком группы (раскладка `filled`).
+                return (
+                  <WithTooltip tooltip={tooltip && { ...tooltip, disableSpanWrapper: true }}>{button}</WithTooltip>
+                );
+              }}
+              primaryAction={{
+                ...stripFooterButton(footer.buttonPrimary),
+                view: VIEW.Filled,
+                appearance: APPEARANCE.Primary,
+                label:
+                  footer.buttonPrimary.variant === 'custom'
+                    ? footer.buttonPrimary.label
+                    : getButtonLabel(footer.buttonPrimary.variant),
+              }}
+              secondaryAction={
+                footer.buttonSecondary
+                  ? {
+                      ...stripFooterButton(footer.buttonSecondary),
+                      view: VIEW.Outline,
+                      appearance: APPEARANCE.Neutral,
+                      label:
+                        footer.buttonSecondary.variant === 'custom'
+                          ? footer.buttonSecondary.label
+                          : getButtonLabel(footer.buttonSecondary.variant),
+                    }
+                  : undefined
+              }
+              tertiaryAction={
+                footer.buttonAdditional
+                  ? {
+                      ...stripFooterButton(footer.buttonAdditional),
+                      view: VIEW.Simple,
+                      appearance: APPEARANCE.Neutral,
+                    }
+                  : undefined
+              }
+            />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Мобильный `PageForm`. Форсирует `mobile`-раскладку через `withLayoutType`, чтобы вложенные
+ * адаптивные `@ds`-примитивы (`Dropdown` price-summary, `ModalCustom` sideBlock) рендерили
+ * bottom-sheet даже под desktop-провайдером.
+ */
+export const MobilePageForm = withLayoutType(MobilePageFormBase, LAYOUT_TYPE.Mobile);

package/src/components/PageForm/PageForm.tsx

@@ -0,0 +1,25 @@
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+
+import { DesktopPageForm } from './DesktopPageForm';
+import { MobilePageForm } from './MobilePageForm';
+import { DesktopPageFormProps } from './types';
+
+export type PageFormProps = DesktopPageFormProps;
+
+/**
+ * Адаптивный `PageForm`: раскладку берёт из `AdaptiveProvider` (контекст). На `mobile` рендерит
+ * `MobilePageForm` (sticky-футер, bottom-sheet для sideBlock / price-summary), на остальных
+ * раскладках — `DesktopPageForm`. Форс платформы — `withLayoutType` / вложенный
+ * `<AdaptiveProvider layoutType=…>`; пропа `layoutType` у компонента нет.
+ */
+export function PageForm(props: PageFormProps) {
+  const { layoutType } = useAdaptiveLayout();
+
+  if (isMobileLayout(layoutType)) {
+    return <MobilePageForm {...props} />;
+  }
+
+  return <DesktopPageForm {...props} />;
+}
+
+PageForm.displayName = 'PageForm';

package/src/components/PageForm/hooks.tsx

@@ -0,0 +1,63 @@
+import { Button, ButtonProps, View } from '@cloud-ru/ds-button';
+import { Tooltip, TooltipProps } from '@cloud-ru/ds-tooltip';
+import { useEffect, useRef, useState } from 'react';
+
+import { pageLayoutLocale } from '../../locale';
+import { ButtonPrimaryVariant, ButtonSecondaryVariant } from '../../types';
+
+/**
+ * Возвращает компонент кнопки с заданным `view`. Если передан `tooltip`,
+ * кнопка оборачивается в `Tooltip`. Соответствует легаси-`useButtonWithTooltip`,
+ * где вместо `view` передавался отдельный компонент кнопки (`ButtonFilled`/`ButtonOutline`/`ButtonSimple`).
+ */
+export function useButtonWithTooltip({ view, tooltip }: { view: View; tooltip?: TooltipProps }) {
+  if (tooltip) {
+    return function ButtonWithTooltip(props: ButtonProps) {
+      return (
+        <Tooltip {...tooltip}>
+          <Button view={view} {...props} />
+        </Tooltip>
+      );
+    };
+  }
+
+  return function ButtonWithView(props: ButtonProps) {
+    return <Button view={view} {...props} />;
+  };
+}
+
+/**
+ * Показывает тень у прилипшего футера, пока под ним есть прокручиваемый контент.
+ * Внизу формы стоит sentinel-элемент: когда он попадает в область видимости
+ * (прокрутка дошла до конца), тень скрывается.
+ */
+export function useStickyFooterShadow(enabled?: boolean) {
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const [atBottom, setAtBottom] = useState(false);
+
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+
+    if (!enabled || !sentinel || typeof IntersectionObserver === 'undefined') {
+      setAtBottom(false);
+
+      return undefined;
+    }
+
+    const observer = new IntersectionObserver(([entry]) => setAtBottom(entry.isIntersecting), { threshold: 1 });
+
+    observer.observe(sentinel);
+
+    return () => observer.disconnect();
+  }, [enabled]);
+
+  return { sentinelRef, atBottom };
+}
+
+export function useGetButtonLabel() {
+  const { t } = pageLayoutLocale.useTranslations();
+
+  return function getButtonLabel(variant: ButtonPrimaryVariant | ButtonSecondaryVariant): string {
+    return t(`PageForm.${variant}`);
+  };
+}

package/src/components/PageForm/index.ts

@@ -0,0 +1,4 @@
+export * from './PageForm';
+export * from './DesktopPageForm';
+export * from './MobilePageForm';
+export * from './types';