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

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

@@ -0,0 +1,27 @@
+declare const LAYOUT_MESSAGES: {
+    readonly 'en-GB': {
+        readonly noAccessTitle: "Access restricted";
+        readonly noAccessSubtitle: "You do not have permission to view this content.";
+        readonly noAccessText: "To get access, contact your organization or project administrator.";
+    };
+    readonly 'ru-RU': {
+        readonly noAccessTitle: "Доступ ограничен";
+        readonly noAccessSubtitle: "У вас нет прав для просмотра этого контента.";
+        readonly noAccessText: "Для получения доступа обратитесь к администратору организации или проекта.";
+    };
+};
+export type LayoutMessages = (typeof LAYOUT_MESSAGES)['en-GB'];
+/** locale пакета Layout: `layoutLocale.useTranslations()` в коде, `layoutLocale.extend(...)` в сервисе. */
+export declare const layoutLocale: import("@cloud-ru/ds-locale").DefinedLocale<{
+    readonly 'en-GB': {
+        readonly noAccessTitle: "Access restricted";
+        readonly noAccessSubtitle: "You do not have permission to view this content.";
+        readonly noAccessText: "To get access, contact your organization or project administrator.";
+    };
+    readonly 'ru-RU': {
+        readonly noAccessTitle: "Доступ ограничен";
+        readonly noAccessSubtitle: "У вас нет прав для просмотра этого контента.";
+        readonly noAccessText: "Для получения доступа обратитесь к администратору организации или проекта.";
+    };
+}, "@cloud-ru/ds-uikit-product-layout">;
+export {};

package/dist/cjs/locale/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.layoutLocale = void 0;
+const locale_1 = require("@cloud-ru/ds-locale");
+const LAYOUT_MESSAGES = (0, locale_1.defineMessages)({
+    'en-GB': {
+        noAccessTitle: 'Access restricted',
+        noAccessSubtitle: 'You do not have permission to view this content.',
+        noAccessText: 'To get access, contact your organization or project administrator.',
+    },
+    'ru-RU': {
+        noAccessTitle: 'Доступ ограничен',
+        noAccessSubtitle: 'У вас нет прав для просмотра этого контента.',
+        noAccessText: 'Для получения доступа обратитесь к администратору организации или проекта.',
+    },
+});
+/** locale пакета Layout: `layoutLocale.useTranslations()` в коде, `layoutLocale.extend(...)` в сервисе. */
+exports.layoutLocale = (0, locale_1.defineLocale)('@cloud-ru/ds-uikit-product-layout', LAYOUT_MESSAGES);

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/style.css

@@ -0,0 +1,68 @@
+.emptyBlock{
+  display:flex;
+  flex-grow:1;
+  box-sizing:border-box;
+  width:100%;
+}
+.emptyBlock > :last-child{
+  display:flex;
+  flex:1 1 auto;
+  width:100%;
+  min-width:0;
+}
+
+.inner{
+  display:flex;
+  flex:1 0 0;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+}
+
+.infoBlock{
+  max-width:624px;
+}
+.wrapper{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  box-sizing:border-box;
+  width:100%;
+  max-width:1200px;
+  min-height:100%;
+}
+
+.wrapper[data-mobile=true]{
+  max-width:360px;
+}
+
+.block{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  justify-content:center;
+}
+
+.serviceName{
+  font-family:var(--sn-thin-headline-s-fontFamily, var(--sn-brand-font-fontFamily-thin-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-headline-s, var(--sn-brand-font-fontWeight-light-thin-headline-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-thin-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
+  font-size:var(--sn-thin-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
+  letter-spacing:var(--sn-thin-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-thin-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
+  display:block;
+  margin-bottom:var(--sn-primitive-dimension-16, 16px);
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.description{
+  max-width:500px;
+  margin-top:var(--sn-primitive-dimension-8, 8px);
+}
+
+.text{
+  display:block;
+  text-align:center;
+  white-space:break-spaces;
+}

package/dist/esm/components/EmptyBlock/EmptyBlock.d.ts

@@ -0,0 +1,36 @@
+import { LayoutPresets } from '@cloud-ru/ds-adaptive';
+import { IconPredefinedProps } from '@cloud-ru/ds-icon-predefined';
+import { Align } from '@cloud-ru/ds-info-block';
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ReactNode } from 'react';
+type EmptyBlockAdaptiveFieldProps = {
+    /** Выравнивание иконки и текста */
+    align?: Align;
+};
+/** Пропы `EmptyBlock`, дефолты которых меняет адаптив (preset-класс). */
+type EmptyBlockLayoutDefaults = Pick<EmptyBlockAdaptiveFieldProps, 'align'>;
+export type EmptyBlockProps = WithSupportProps<EmptyBlockAdaptiveFieldProps & {
+    /** Заголовок */
+    title?: string;
+    /** Описание под заголовком */
+    content?: ReactNode;
+    /** Иконка */
+    icon?: IconPredefinedProps;
+    /** Слот действий под текстом (например, `ButtonGroup`) */
+    footer?: ReactNode;
+    /**
+     * Override mobile-дефолтов адаптива для этого инстанса (deep-merge поверх `EMPTY_BLOCK_LAYOUT_PRESETS`).
+     * Escape-hatch: обычно не нужен — DS-пресет применяется автоматически по `AdaptiveProvider`.
+     */
+    layoutPresets?: LayoutPresets<EmptyBlockLayoutDefaults>;
+    /** Дополнительный класс */
+    className?: string;
+}>;
+/** DS-пресет адаптива `EmptyBlock`: на mobile — вертикальное выравнивание, desktop — горизонтальное. */
+export declare const EMPTY_BLOCK_LAYOUT_PRESETS: LayoutPresets<EmptyBlockLayoutDefaults>;
+/**
+ * Блок-заглушка для пустого состояния: иконка, заголовок, описание и опциональный
+ * слот действий на нейтральной подложке.
+ */
+export declare function EmptyBlock({ title, content, icon, footer, align, layoutPresets, className, ...rest }: EmptyBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/EmptyBlock/EmptyBlock.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isMobileLayout, mergePresets, useAdaptiveLayout, useLayoutDefaults } from '@cloud-ru/ds-adaptive';
+import { Block, SIZE as BLOCK_SIZE } from '@cloud-ru/ds-block';
+import { ALIGN, InfoBlock, SIZE as INFO_SIZE } from '@cloud-ru/ds-info-block';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import styles from './styles.module.css';
+/** DS-пресет адаптива `EmptyBlock`: на mobile — вертикальное выравнивание, desktop — горизонтальное. */
+export const EMPTY_BLOCK_LAYOUT_PRESETS = {
+    mobile: { align: ALIGN.Vertical },
+};
+/**
+ * Блок-заглушка для пустого состояния: иконка, заголовок, описание и опциональный
+ * слот действий на нейтральной подложке.
+ */
+export function EmptyBlock({ title, content, icon, footer, align, layoutPresets, className, ...rest }) {
+    const { align: resolvedAlign } = useLayoutDefaults({ align: ALIGN.Horizontal }, mergePresets(EMPTY_BLOCK_LAYOUT_PRESETS, layoutPresets), { align });
+    const { layoutType } = useAdaptiveLayout();
+    const isMobile = isMobileLayout(layoutType);
+    return (_jsx(Block, { size: BLOCK_SIZE.L, className: cn(styles.emptyBlock, className), ...extractSupportProps(rest), children: _jsx("div", { className: styles.inner, children: _jsx(InfoBlock, { className: styles.infoBlock, title: title, content: content, icon: icon, size: isMobile ? INFO_SIZE.M : INFO_SIZE.L, align: resolvedAlign, footer: footer }) }) }));
+}

package/dist/esm/components/EmptyBlock/index.d.ts

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

package/dist/esm/components/EmptyBlock/index.js

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

package/dist/esm/components/EmptyBlock/styles.module.css

@@ -0,0 +1,24 @@
+.emptyBlock{
+  display:flex;
+  flex-grow:1;
+  box-sizing:border-box;
+  width:100%;
+}
+.emptyBlock > :last-child{
+  display:flex;
+  flex:1 1 auto;
+  width:100%;
+  min-width:0;
+}
+
+.inner{
+  display:flex;
+  flex:1 0 0;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+}
+
+.infoBlock{
+  max-width:624px;
+}

package/dist/esm/components/NoAccess/NoAccess.d.ts

@@ -0,0 +1,12 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+export type NoAccessProps = WithSupportProps<{
+    /** Заголовок над блоком (например, название сервиса) */
+    serviceName?: string;
+    /** Дополнительный класс */
+    className?: string;
+}>;
+/**
+ * Экран ограниченного доступа: lock-иконка и локализованное сообщение
+ * на нейтральной подложке, с опциональным заголовком сервиса сверху.
+ */
+export declare function NoAccess({ serviceName, className, ...rest }: NoAccessProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/NoAccess/NoAccess.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isMobileLayout, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
+import { Block, SIZE as BLOCK_SIZE } from '@cloud-ru/ds-block';
+import { LockSVG } from '@cloud-ru/ds-icons/interface/product';
+import { InfoBlock, SIZE as INFO_SIZE } from '@cloud-ru/ds-info-block';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { TEST_IDS } from '../../constants.js';
+import { layoutLocale } from '../../locale/index.js';
+import styles from './styles.module.css';
+/**
+ * Экран ограниченного доступа: lock-иконка и локализованное сообщение
+ * на нейтральной подложке, с опциональным заголовком сервиса сверху.
+ */
+export function NoAccess({ serviceName, className, ...rest }) {
+    const { layoutType } = useAdaptiveLayout();
+    const { t } = layoutLocale.useTranslations();
+    return (_jsxs("div", { className: cn(styles.wrapper, className), "data-mobile": isMobileLayout(layoutType) || undefined, ...extractSupportProps(rest), children: [serviceName && (_jsx("div", { className: styles.serviceName, "data-test-id": TEST_IDS.noAccess.serviceName, children: serviceName })), _jsx(Block, { size: BLOCK_SIZE.L, className: styles.block, children: _jsx(InfoBlock, { size: INFO_SIZE.M, icon: { icon: LockSVG }, title: t('noAccessTitle'), content: _jsxs("div", { className: styles.description, children: [_jsx("div", { className: styles.text, children: t('noAccessSubtitle') }), _jsx("div", { className: styles.text, children: t('noAccessText') })] }) }) })] }));
+}

package/dist/esm/components/NoAccess/index.d.ts

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

package/dist/esm/components/NoAccess/index.js

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

package/dist/esm/components/NoAccess/styles.module.css

@@ -0,0 +1,44 @@
+.wrapper{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  box-sizing:border-box;
+  width:100%;
+  max-width:1200px;
+  min-height:100%;
+}
+
+.wrapper[data-mobile=true]{
+  max-width:360px;
+}
+
+.block{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  justify-content:center;
+}
+
+.serviceName{
+  font-family:var(--sn-thin-headline-s-fontFamily, var(--sn-brand-font-fontFamily-thin-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-headline-s, var(--sn-brand-font-fontWeight-light-thin-headline-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-thin-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
+  font-size:var(--sn-thin-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
+  letter-spacing:var(--sn-thin-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-thin-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
+  display:block;
+  margin-bottom:var(--sn-primitive-dimension-16, 16px);
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.description{
+  max-width:500px;
+  margin-top:var(--sn-primitive-dimension-8, 8px);
+}
+
+.text{
+  display:block;
+  text-align:center;
+  white-space:break-spaces;
+}

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

@@ -0,0 +1,2 @@
+export * from './EmptyBlock/index.js';
+export * from './NoAccess/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1,2 @@
+export * from './EmptyBlock/index.js';
+export * from './NoAccess/index.js';

package/dist/esm/constants.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `data-test-id` внутренних слотов, которые компонент проставляет сам
+ * (потребитель не может адресовать их через spread `...rest`).
+ * Корневой `data-test-id` приходит от потребителя через support-props.
+ */
+export declare const TEST_IDS: {
+    readonly noAccess: {
+        readonly serviceName: "no-access__service-name";
+    };
+};

package/dist/esm/constants.js

@@ -0,0 +1,10 @@
+/**
+ * `data-test-id` внутренних слотов, которые компонент проставляет сам
+ * (потребитель не может адресовать их через spread `...rest`).
+ * Корневой `data-test-id` приходит от потребителя через support-props.
+ */
+export const TEST_IDS = {
+    noAccess: {
+        serviceName: 'no-access__service-name',
+    },
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './locale/index.js';

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './components/index.js';
+export * from './constants.js';
+export * from './locale/index.js';

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

@@ -0,0 +1,27 @@
+declare const LAYOUT_MESSAGES: {
+    readonly 'en-GB': {
+        readonly noAccessTitle: "Access restricted";
+        readonly noAccessSubtitle: "You do not have permission to view this content.";
+        readonly noAccessText: "To get access, contact your organization or project administrator.";
+    };
+    readonly 'ru-RU': {
+        readonly noAccessTitle: "Доступ ограничен";
+        readonly noAccessSubtitle: "У вас нет прав для просмотра этого контента.";
+        readonly noAccessText: "Для получения доступа обратитесь к администратору организации или проекта.";
+    };
+};
+export type LayoutMessages = (typeof LAYOUT_MESSAGES)['en-GB'];
+/** locale пакета Layout: `layoutLocale.useTranslations()` в коде, `layoutLocale.extend(...)` в сервисе. */
+export declare const layoutLocale: import("@cloud-ru/ds-locale").DefinedLocale<{
+    readonly 'en-GB': {
+        readonly noAccessTitle: "Access restricted";
+        readonly noAccessSubtitle: "You do not have permission to view this content.";
+        readonly noAccessText: "To get access, contact your organization or project administrator.";
+    };
+    readonly 'ru-RU': {
+        readonly noAccessTitle: "Доступ ограничен";
+        readonly noAccessSubtitle: "У вас нет прав для просмотра этого контента.";
+        readonly noAccessText: "Для получения доступа обратитесь к администратору организации или проекта.";
+    };
+}, "@cloud-ru/ds-uikit-product-layout">;
+export {};

package/dist/esm/locale/index.js

@@ -0,0 +1,15 @@
+import { defineLocale, defineMessages } from '@cloud-ru/ds-locale';
+const LAYOUT_MESSAGES = defineMessages({
+    'en-GB': {
+        noAccessTitle: 'Access restricted',
+        noAccessSubtitle: 'You do not have permission to view this content.',
+        noAccessText: 'To get access, contact your organization or project administrator.',
+    },
+    'ru-RU': {
+        noAccessTitle: 'Доступ ограничен',
+        noAccessSubtitle: 'У вас нет прав для просмотра этого контента.',
+        noAccessText: 'Для получения доступа обратитесь к администратору организации или проекта.',
+    },
+});
+/** locale пакета Layout: `layoutLocale.useTranslations()` в коде, `layoutLocale.extend(...)` в сервисе. */
+export const layoutLocale = defineLocale('@cloud-ru/ds-uikit-product-layout', LAYOUT_MESSAGES);

package/dist/esm/style.css

@@ -0,0 +1,68 @@
+.emptyBlock{
+  display:flex;
+  flex-grow:1;
+  box-sizing:border-box;
+  width:100%;
+}
+.emptyBlock > :last-child{
+  display:flex;
+  flex:1 1 auto;
+  width:100%;
+  min-width:0;
+}
+
+.inner{
+  display:flex;
+  flex:1 0 0;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+}
+
+.infoBlock{
+  max-width:624px;
+}
+.wrapper{
+  position:relative;
+  display:flex;
+  flex-direction:column;
+  flex-grow:1;
+  box-sizing:border-box;
+  width:100%;
+  max-width:1200px;
+  min-height:100%;
+}
+
+.wrapper[data-mobile=true]{
+  max-width:360px;
+}
+
+.block{
+  display:flex;
+  flex:1;
+  flex-direction:column;
+  justify-content:center;
+}
+
+.serviceName{
+  font-family:var(--sn-thin-headline-s-fontFamily, var(--sn-brand-font-fontFamily-thin-headline, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-thin-headline-s-fontWeight, var(--sn-theme-typography-fontWeight-thin-headline-s, var(--sn-brand-font-fontWeight-light-thin-headline-s, var(--sn-primitive-font-fontWeightValue-500, 500))));
+  line-height:var(--sn-thin-headline-s-lineHeight, var(--sn-density-typography-roleHeadline-lineHeightS, var(--sn-primitive-font-lineHeight-by24, 32px)));
+  font-size:var(--sn-thin-headline-s-fontSize, var(--sn-density-typography-roleHeadline-fontSizeS, var(--sn-primitive-font-fontSize-24, 24px)));
+  letter-spacing:var(--sn-thin-headline-s-letterSpacing, var(--sn-primitive-font-letterSpacing-xs, -0.5px));
+  paragraph-spacing:var(--sn-thin-headline-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize24, 12px));
+  display:block;
+  margin-bottom:var(--sn-primitive-dimension-16, 16px);
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.description{
+  max-width:500px;
+  margin-top:var(--sn-primitive-dimension-8, 8px);
+}
+
+.text{
+  display:block;
+  text-align:center;
+  white-space:break-spaces;
+}