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

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

@@ -0,0 +1,97 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  gap: base.$sn-primitive-dimension-40;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  box-sizing: border-box;
+  width: 100%;
+  padding: base.$sn-density-spacing-interval-s base.$sn-density-spacing-interval-l;
+  // Разделитель на available/borderColor (Figma), не neutral/decor.
+  border-bottom: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-available-borderColor;
+
+  background-color: base.$sn-theme-color-neutral-background;
+}
+
+.description {
+  color: base.$sn-theme-color-available-version-textSecondary;
+}
+
+.body {
+  display: flex;
+  gap: base.$sn-density-spacing-interval-m;
+
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 base.$sn-density-spacing-interval-l;
+}
+
+.sidebar {
+  height: max-content;
+  padding: base.$sn-primitive-dimension-16;
+  border-radius: base.$sn-brand-anatomy-radius-block-m;
+  background: base.$sn-theme-color-neutral-background1Level;
+}
+
+.main {
+  box-sizing: border-box;
+  width: 100%;
+  padding-top: base.$sn-primitive-dimension-16;
+}
+
+.titleWrapper {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: base.$sn-primitive-dimension-8 base.$sn-primitive-dimension-16;
+  align-items: center;
+
+  min-width: 0;
+}
+
+.headerActions {
+  display: flex;
+  flex-shrink: 0;
+  gap: base.$sn-primitive-dimension-8;
+  align-items: center;
+}
+
+.titleInner {
+  display: flex;
+  gap: base.$sn-primitive-dimension-8;
+}
+
+.title {
+  box-sizing: border-box;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+
+  overflow-wrap: break-word;
+}
+
+.innerElement {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: base.$sn-regular-title-l-lineHeight;
+}
+
+.icon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: base.$sn-primitive-dimension-24;
+  height: base.$sn-primitive-dimension-24;
+}

package/src/components/TreeNavigation/types.ts

@@ -0,0 +1,48 @@
+import { StatusProps } from '@cloud-ru/ds-status';
+import { TreeNodeId, TreeNodeProps } from '@cloud-ru/ds-tree';
+import { ReactNode } from 'react';
+
+import { TreeNavigationMode } from '../../types';
+
+export type TreeNavigationProps = {
+  header: {
+    /** Текст заголовка */
+    title: string;
+    /** Иконка */
+    icon?: ReactNode;
+    /** Текст описания */
+    description?: string;
+    /** Статус (цвет, иконка и т.п.) – любой тип, который принимает ваш <Status/> */
+    status?: StatusProps;
+    /** Раздел для действий */
+    actions?: ReactNode;
+  };
+  menu: {
+    /** Заголовок меню */
+    menuTitle?: string;
+    /** Данные для дерева меню */
+    items: TreeNodeProps[];
+    /** Управляемый режим: если передан, меню открывается как popover. */
+    isMenuOpen?: boolean;
+    /** Колбэк, вызываемый при попытке изменить состояние меню.
+     *  В контролируемом режиме обязателен, в неконтролируемом – опционален.
+     */
+    onMenuToggle?(open: boolean): void;
+    /** Открывать меню по умолчанию */
+    defaultMenuOpened?: boolean;
+    /** Позволяет отключить кнопку "Свернуть все" */
+    enableShrinkMenuButton?: boolean;
+    /** Открывать пункты меню по умолчанию */
+    withDefaultOpenedMenuList?: boolean;
+    /** Выбранный элемент меню  */
+    selected?: TreeNodeId;
+    /** Колбэк, вызываемый при попытке изменить состояние селекта. */
+    onSelect?(selectedKey: TreeNodeId | undefined, node: TreeNodeProps): void;
+  };
+  /** Контентная часть страницы */
+  content: ReactNode;
+  /** Вариант отображения */
+  mode: TreeNavigationMode;
+  /** Класс для контейнера контентной части */
+  contentClassName?: string;
+};

package/src/components/index.ts

@@ -0,0 +1,9 @@
+export * from './Headline';
+export * from './PageLoading';
+export * from './DefaultSubtitle';
+export * from './PageCatalog';
+export * from './PageSidebar';
+export * from './TreeNavigation';
+export * from './PageForm';
+export * from './PageServices';
+export * from './Actions';

package/src/constants.ts

@@ -0,0 +1,56 @@
+/** id глобального хост-контейнера single-spa, по которому PageServices считает высоту */
+export const GLOBAL_CONTAINER_ID = 'single-spa-wrapper';
+
+/** Варианты основной кнопки футера PageForm. Лейбл резолвится через locale `PageForm.<variant>`. */
+export const BUTTON_PRIMARY_VARIANT = {
+  Continue: 'continue',
+  Create: 'create',
+  Save: 'save',
+  Rent: 'rent',
+  Send: 'send',
+  Restore: 'restore',
+  Add: 'add',
+} as const;
+
+/** Варианты вторичной кнопки футера PageForm. */
+export const BUTTON_SECONDARY_VARIANT = {
+  Cancel: 'cancel',
+  Back: 'back',
+} as const;
+
+/**
+ * Режим отображения меню TreeNavigation.
+ * `fixed` соответствует Figma-состоянию `treeMenu=fixed` (постоянно раскрытый aside).
+ */
+export const TREE_NAVIGATION_MODE = {
+  Popover: 'popover',
+  Aside: 'aside',
+  Fixed: 'fixed',
+} as const;
+
+/** Тип элемента сайдбара с вложенностью. */
+export const SIDEBAR_ITEM_TYPE = {
+  Collapse: 'collapse',
+  Group: 'group',
+} as const;
+
+/** Тип шапки сайдбара. */
+export const SIDEBAR_HEADER_TYPE = {
+  Title: 'title',
+  Back: 'back',
+} as const;
+
+/** data-test-id mobile-триггеров, которые компонент ставит сам (публичны для stories и e2e). */
+export const TEST_IDS = {
+  mobileActions: { root: 'page-layout__mobile-actions', trigger: 'page-layout__mobile-actions-trigger' },
+  sidebarSelect: { trigger: 'page-layout__sidebar-select-trigger' },
+  sidebarSearch: { trigger: 'page-layout__sidebar-search-trigger' },
+  sidebarToggle: {
+    collapse: 'page-layout__sidebar-collapse',
+    expand: 'page-layout__sidebar-expand',
+  },
+  pageForm: {
+    priceSummaryTrigger: 'page-form__price-summary-trigger',
+    priceSummarySheet: 'page-form__price-summary-sheet',
+  },
+} as const;

package/src/index.ts

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

package/src/locale/index.ts

@@ -0,0 +1,64 @@
+import { defineLocale, defineMessages } from '@cloud-ru/ds-locale';
+
+/**
+ * Строки `@cloud-ru/ds-uikit-product-page-layout`. Тип-истина ключей — рядом с компонентом.
+ * `defineMessages` требует одинаковый набор ключей во всех языках: забыл ключ в одном — ошибка компиляции.
+ */
+const PAGE_LAYOUT_MESSAGES = defineMessages({
+  'en-GB': {
+    PageForm: {
+      continue: 'Continue',
+      create: 'Create',
+      save: 'Save',
+      rent: 'Rent',
+      send: 'Send',
+      restore: 'Restore',
+      add: 'Add',
+      cancel: 'Cancel',
+      back: 'Back',
+    },
+    PageSidebar: {
+      backTo: 'Back to',
+      searchByServices: 'Search by services',
+      closeSearch: 'Close search',
+      openSearch: 'Open search',
+    },
+    TreeNavigation: {
+      closeMenu: 'Close menu',
+      openMenu: 'Open menu',
+      collapseAll: 'Collapse all',
+      expandAll: 'Expand all',
+    },
+  },
+  'ru-RU': {
+    PageForm: {
+      continue: 'Продолжить',
+      create: 'Создать',
+      save: 'Сохранить',
+      rent: 'Арендовать',
+      send: 'Отправить',
+      restore: 'Восстановить',
+      add: 'Добавить',
+      cancel: 'Отмена',
+      back: 'Назад',
+    },
+    PageSidebar: {
+      backTo: 'Назад в',
+      searchByServices: 'Поиск по разделам',
+      closeSearch: 'Закрыть поиск',
+      openSearch: 'Открыть поиск',
+    },
+    TreeNavigation: {
+      closeMenu: 'Закрыть меню',
+      openMenu: 'Открыть меню',
+      collapseAll: 'Свернуть все',
+      expandAll: 'Развернуть все',
+    },
+  },
+});
+
+/** Форма словаря PageLayout — для типизации сервисных оверрайдов/новых языков. */
+export type PageLayoutMessages = (typeof PAGE_LAYOUT_MESSAGES)['en-GB'];
+
+/** locale компонента PageLayout: `pageLayoutLocale.useTranslations()` в коде, `pageLayoutLocale.extend(...)` в сервисе. */
+export const pageLayoutLocale = defineLocale('@cloud-ru/ds-uikit-product-page-layout', PAGE_LAYOUT_MESSAGES);

package/src/types.ts

@@ -0,0 +1,15 @@
+import { ValueOf } from '@cloud-ru/ds-utils';
+
+import {
+  BUTTON_PRIMARY_VARIANT,
+  BUTTON_SECONDARY_VARIANT,
+  SIDEBAR_HEADER_TYPE,
+  SIDEBAR_ITEM_TYPE,
+  TREE_NAVIGATION_MODE,
+} from './constants';
+
+export type ButtonPrimaryVariant = ValueOf<typeof BUTTON_PRIMARY_VARIANT>;
+export type ButtonSecondaryVariant = ValueOf<typeof BUTTON_SECONDARY_VARIANT>;
+export type TreeNavigationMode = ValueOf<typeof TREE_NAVIGATION_MODE>;
+export type SidebarItemType = ValueOf<typeof SIDEBAR_ITEM_TYPE>;
+export type SidebarHeaderType = ValueOf<typeof SIDEBAR_HEADER_TYPE>;