@cloud-ru/uikit-product-mobile-layout 0.20.7

package/src/components/MobilePageForm/hooks.tsx

@@ -0,0 +1,23 @@
+import { ForwardRefExoticComponent } from 'react';
+
+import { MobileTooltip, MobileTooltipProps } from '@cloud-ru/uikit-product-mobile-tooltip';
+
+export function useButtonWithTooltip<T extends Record<string, unknown>>({
+  Button,
+  tooltip,
+}: {
+  tooltip?: MobileTooltipProps;
+  Button: ForwardRefExoticComponent<T>;
+}) {
+  if (tooltip) {
+    return function ButtonWithTooltip(props: T) {
+      return (
+        <MobileTooltip {...tooltip}>
+          <Button {...props} />
+        </MobileTooltip>
+      );
+    };
+  }
+
+  return Button;
+}

package/src/components/MobilePageForm/index.ts

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

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

@@ -0,0 +1,98 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+$prefix-height: styles-theme-variables.simple-var(styles-theme-variables.$sans-headline-m-line-height);
+
+.container {
+  background-color: styles-theme-variables.$sys-neutral-background1-level;
+  width: 100%;
+  min-height: 100%;
+  flex-grow: 1;
+
+  display: flex;
+  flex-direction: column;
+
+  gap: styles-theme-variables.$dimension-2m;
+  padding: styles-theme-variables.$dimension-2m;
+  box-sizing: border-box;
+
+  position: relative;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 0;
+}
+
+.body {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+  color: styles-theme-variables.$sys-neutral-text-main;
+  background-color: styles-theme-variables.$sys-neutral-background1-level;
+  flex: 1;
+}
+
+.footer {
+  position: sticky;
+  bottom: 0;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 1;
+
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-1m;
+
+  border-top: solid 1px styles-theme-variables.$sys-neutral-decor-default;
+  box-sizing: border-box;
+  background-color: styles-theme-variables.$sys-neutral-background1-level;
+  padding: styles-theme-variables.$dimension-1m styles-theme-variables.$dimension-2m styles-theme-variables.$dimension-2m;
+  margin: calc(0px - styles-theme-variables.$dimension-1m) calc(0px - styles-theme-variables.$dimension-2m) calc(0px - styles-theme-variables.$dimension-2m);
+
+  .actions {
+    display: flex;
+    flex-direction: row;
+    gap: styles-theme-variables.$dimension-1m;
+
+    &[data-column] {
+      flex-direction: column;
+    }
+  }
+}
+
+.mainActions {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.priceSummary {
+  display: flex;
+  justify-content: space-between;
+  min-height: 40px;
+  align-items: center;
+  gap: 4px;
+}
+
+.priceSummaryText {
+  color: styles-theme-variables.$sys-neutral-text-support;
+}
+
+.priceSummaryRight {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.stepper {
+  position: sticky;
+  top: 0;
+
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 1;
+
+  background-color: styles-theme-variables.$sys-neutral-background1-level;
+  padding: 0 styles-theme-variables.$dimension-2m styles-theme-variables.$dimension-1m;
+  margin: 0 calc(0px - styles-theme-variables.$dimension-2m) calc(0px - styles-theme-variables.$dimension-1m);
+
+  border-bottom: solid 1px styles-theme-variables.$sys-neutral-decor-default;
+  box-sizing: border-box;
+}
+
+.modalContent {
+  padding: 0 styles-theme-variables.$dimension-2m;
+}

package/src/components/MobilePageServices/MobilePageServices.tsx

@@ -0,0 +1,50 @@
+import cn from 'classnames';
+import { PropsWithChildren } from 'react';
+
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+
+import {
+  ActionsProps,
+  Headline,
+  HeadlineProps,
+  MobileActions,
+  SidebarSelect,
+  SidebarSelectProps,
+} from '../../helperComponents';
+import styles from './styles.module.scss';
+
+export type MobilePageServicesProps = WithSupportProps<
+  PropsWithChildren<
+    Pick<HeadlineProps, 'title' | 'beforeHeadline' | 'subHeader' | 'afterHeadline'> & {
+      className?: string;
+      sidebar?: SidebarSelectProps;
+      actions?: ActionsProps['items'];
+      maxVisibleActionsItems?: ActionsProps['maxVisibleItems'];
+    }
+  >
+>;
+
+export function MobilePageServices({
+  children,
+  title,
+  actions = [],
+  className,
+  sidebar,
+  afterHeadline,
+  subHeader,
+  beforeHeadline,
+  maxVisibleActionsItems,
+  ...rest
+}: MobilePageServicesProps) {
+  return (
+    <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
+      <Headline title={title} beforeHeadline={beforeHeadline} afterHeadline={afterHeadline} subHeader={subHeader} />
+
+      {sidebar && <SidebarSelect {...sidebar} />}
+
+      {actions.length > 0 && <MobileActions items={actions} maxVisibleItems={maxVisibleActionsItems} />}
+
+      <div className={styles.childWrapper}>{children}</div>
+    </div>
+  );
+}

package/src/components/MobilePageServices/index.ts

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

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

@@ -0,0 +1,27 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 100%;
+  box-sizing: border-box;
+  padding: styles-theme-variables.$dimension-2m;
+  gap: styles-theme-variables.$dimension-2m;
+}
+
+.childWrapper {
+  flex-shrink: 1;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+  width: 100%;
+  justify-content: stretch;
+}

package/src/components/index.ts

@@ -0,0 +1,7 @@
+export * from './AdaptiveLayout';
+export * from './MobileBlockBasic';
+export * from './MobileCardBanner';
+export * from './MobilePageForm';
+export * from './MobilePageServices';
+export * from './MobileEmptyBlock';
+export * from './MobilePageCatalog';

package/src/helperComponents/Actions/ActionView.tsx

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+
+import { AdaptiveTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { QuotaDropdown, QuotaDropdownProps } from '@cloud-ru/uikit-product-quota';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import {
+  ButtonFilled,
+  ButtonFilledProps,
+  ButtonFunction,
+  ButtonFunctionProps,
+  ButtonOutline,
+  ButtonOutlineProps,
+  ButtonSimple,
+  ButtonSimpleProps,
+  ButtonTonal,
+  ButtonTonalProps,
+} from '@snack-uikit/button';
+
+import { ButtonDropdown, ButtonDropdownProps } from '../ButtonDropdown';
+import { ButtonDroplist, ButtonDroplistProps } from '../ButtonDroplist';
+import { ButtonKebab, ButtonKebabProps } from '../ButtonKebab';
+import { BUTTON_TYPE } from './constants';
+import { Action } from './types';
+
+export function ActionView({
+  variant,
+  tooltip,
+  hidden = false,
+  layoutType,
+  commonProps,
+  ...buttonProps
+}: WithLayoutType<Action & { commonProps: { className?: string; size?: 's' | 'm' | 'l'; fullWidth?: boolean } }>) {
+  if (hidden) {
+    return null;
+  }
+
+  const addTooltip = (component: ReactNode) =>
+    tooltip ? (
+      <AdaptiveTooltip layoutType={layoutType} {...tooltip}>
+        {component}
+      </AdaptiveTooltip>
+    ) : (
+      component
+    );
+
+  switch (variant) {
+    case BUTTON_TYPE.Filled:
+      return addTooltip(<ButtonFilled {...(buttonProps as ButtonFilledProps)} {...commonProps} />);
+    case BUTTON_TYPE.Outline:
+      return addTooltip(<ButtonOutline {...(buttonProps as ButtonOutlineProps)} {...commonProps} />);
+    case BUTTON_TYPE.Tonal:
+      return addTooltip(<ButtonTonal {...(buttonProps as ButtonTonalProps)} {...commonProps} />);
+    case BUTTON_TYPE.Function:
+      return addTooltip(<ButtonFunction {...(buttonProps as ButtonFunctionProps)} {...commonProps} />);
+    case BUTTON_TYPE.Simple:
+      return addTooltip(<ButtonSimple {...(buttonProps as ButtonSimpleProps)} {...commonProps} />);
+    case BUTTON_TYPE.Dropdown: {
+      const { button, dropdown } = buttonProps as ButtonDropdownProps;
+
+      return addTooltip(
+        <ButtonDropdown button={{ ...button, ...commonProps }} dropdown={dropdown} layoutType={layoutType} />,
+      );
+    }
+    case BUTTON_TYPE.Kebab: {
+      const { button, list } = buttonProps as ButtonKebabProps;
+      return addTooltip(<ButtonKebab button={{ ...button, ...commonProps }} list={list} layoutType={layoutType} />);
+    }
+    case BUTTON_TYPE.Droplist: {
+      const { button, list } = buttonProps as ButtonDroplistProps;
+      return addTooltip(<ButtonDroplist button={{ ...button, ...commonProps }} list={list} layoutType={layoutType} />);
+    }
+
+    case BUTTON_TYPE.Quota: {
+      return addTooltip(
+        <QuotaDropdown {...(buttonProps as QuotaDropdownProps)} {...commonProps} layoutType={layoutType} />,
+      );
+    }
+    default:
+      return null;
+  }
+}

package/src/helperComponents/Actions/DesktopActions.tsx

@@ -0,0 +1,25 @@
+import { ActionView } from './ActionView';
+import { hasVisibleActions } from './helpers';
+import styles from './styles.module.scss';
+import { ActionsProps } from './types';
+
+export function DesktopActions({ items }: Pick<ActionsProps, 'items'>) {
+  if (!hasVisibleActions(items)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.desktopActionsWrapper}>
+      {items.map((action, index) => (
+        <ActionView
+          {...action}
+          key={index}
+          layoutType='desktop'
+          commonProps={{
+            className: styles.button,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/helperComponents/Actions/MobileActions.tsx

@@ -0,0 +1,196 @@
+import { Children, isValidElement, useRef, useState } from 'react';
+
+import { ChevronDownSVG, KebabSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveDropdown, MobileDroplist, MobileDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { MobileTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { checkExceeded, QuotaCardProps, QuotaDropdownContent } from '@cloud-ru/uikit-product-quota';
+import { ButtonOutline } from '@snack-uikit/button';
+import { Counter } from '@snack-uikit/counter';
+import { useDynamicList } from '@snack-uikit/utils';
+
+import { ActionView } from './ActionView';
+import { BUTTON_TYPE } from './constants';
+import { hasVisibleActions } from './helpers';
+import styles from './styles.module.scss';
+import { ActionsProps } from './types';
+
+export function MobileActions({ items, maxVisibleItems }: ActionsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const { visibleItems, hiddenItems } = useDynamicList({ parentContainerRef: containerRef, items, maxVisibleItems });
+
+  const { t: tQuota } = useLocale('Quota');
+
+  if (!hasVisibleActions(items)) {
+    return null;
+  }
+
+  const hiddenItemsWithKebab = hiddenItems.concat(visibleItems.filter(item => item.variant === 'kebab'));
+  const visibleItemsWithoutKebab = visibleItems.filter(item => item.variant !== 'kebab');
+
+  return (
+    <div className={styles.mobileActionsWrapper} ref={containerRef}>
+      {hiddenItemsWithKebab.length > 0 && (
+        <MobileDroplist
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          items={hiddenItemsWithKebab.reduce(
+            (acc, action) => {
+              switch (action.variant) {
+                case BUTTON_TYPE.Tonal:
+                case BUTTON_TYPE.Simple:
+                case BUTTON_TYPE.Outline:
+                case BUTTON_TYPE.Function:
+                case BUTTON_TYPE.Filled: {
+                  acc.push({
+                    ...action,
+                    content: { option: action.label ?? '' },
+                    onClick: event => {
+                      setIsOpen(false);
+                      action.onClick?.(event);
+                    },
+                    beforeContent: action?.icon,
+                    itemWrapRender: action.tooltip
+                      ? item => (
+                          <MobileTooltip tip={action.tooltip?.tip ?? ''} {...action.tooltip}>
+                            {item}
+                          </MobileTooltip>
+                        )
+                      : undefined,
+                  });
+                  break;
+                }
+                case BUTTON_TYPE.Quota: {
+                  const quotaExceededCount = Children.toArray(action.children).reduce<number>(
+                    (count, child) =>
+                      isValidElement<QuotaCardProps>(child) &&
+                      !child?.props?.loading &&
+                      !child?.props?.unlimited &&
+                      checkExceeded((child?.props?.limit ?? 0) - (child?.props?.created ?? 0))
+                        ? count + 1
+                        : count,
+                    0,
+                  );
+
+                  const isQuotaExceededCountVisible = !action.dataError && quotaExceededCount > 0;
+
+                  acc.push({
+                    ...action,
+                    type: 'group',
+                    divider: acc.length > 0,
+                    items: [
+                      {
+                        ...action,
+                        content: {
+                          option: tQuota('quotas'),
+                        },
+                        afterContent: (
+                          <>
+                            {isQuotaExceededCountVisible && (
+                              <Counter value={quotaExceededCount} appearance='red' size='m' />
+                            )}
+                            <ChevronDownSVG />
+                          </>
+                        ),
+
+                        itemWrapRender: item => {
+                          const content = (
+                            <AdaptiveDropdown content={<QuotaDropdownContent {...action} />} layoutType='mobile'>
+                              {item}
+                            </AdaptiveDropdown>
+                          );
+
+                          return action.tooltip ? (
+                            <MobileTooltip {...action.tooltip}>{content}</MobileTooltip>
+                          ) : (
+                            content
+                          );
+                        },
+                      },
+                    ],
+                  });
+                  break;
+                }
+                case BUTTON_TYPE.Droplist:
+                case BUTTON_TYPE.Kebab: {
+                  const needDivider = Boolean(action.variant === 'droplist' && action?.button.label) || acc.length > 0;
+
+                  acc.push({
+                    ...action,
+                    type: 'group',
+                    label: action.variant === 'droplist' ? action?.button.label : undefined,
+                    divider: needDivider,
+                    items: action.list.items.map(item => ({
+                      ...item,
+                      onClick: event => {
+                        setIsOpen(false);
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-expect-error
+                        item.onClick?.(event);
+                      },
+                    })),
+                  });
+                  break;
+                }
+                case BUTTON_TYPE.Dropdown: {
+                  acc.push({
+                    ...action,
+                    type: 'group',
+                    divider: acc.length > 0,
+                    items: [
+                      {
+                        ...action.button,
+                        content: { option: action.button.label ?? '' },
+                        onClick: event => {
+                          action.button.onClick?.(event);
+                        },
+                        afterContent: <ChevronDownSVG />,
+                        itemWrapRender: item => {
+                          const content = (
+                            <AdaptiveDropdown {...action.dropdown} layoutType='mobile'>
+                              {item}
+                            </AdaptiveDropdown>
+                          );
+
+                          return action.tooltip ? (
+                            <MobileTooltip {...action.tooltip}>{content}</MobileTooltip>
+                          ) : (
+                            content
+                          );
+                        },
+                      },
+                    ],
+                  });
+                  break;
+                }
+                default: {
+                  break;
+                }
+              }
+
+              return acc;
+            },
+            [] as MobileDroplistProps['items'],
+          )}
+        >
+          <ButtonOutline appearance='neutral' icon={<KebabSVG />} size='m' />
+        </MobileDroplist>
+      )}
+
+      {visibleItemsWithoutKebab.map((action, index) => (
+        <ActionView
+          {...action}
+          key={index}
+          layoutType='mobile'
+          commonProps={{
+            className: styles.button,
+            size: 'm',
+            fullWidth: true,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/helperComponents/Actions/constants.ts

@@ -0,0 +1,11 @@
+export const BUTTON_TYPE = {
+  Filled: 'filled',
+  Outline: 'outline',
+  Tonal: 'tonal',
+  Function: 'function',
+  Simple: 'simple',
+  Dropdown: 'dropdown',
+  Droplist: 'droplist',
+  Quota: 'quota',
+  Kebab: 'kebab',
+} as const;

package/src/helperComponents/Actions/helpers.ts

@@ -0,0 +1,5 @@
+import { Action } from './types';
+
+export function hasVisibleActions(actions: Action[]) {
+  return actions.some(action => !action.hidden);
+}

package/src/helperComponents/Actions/index.ts

@@ -0,0 +1,3 @@
+export * from './DesktopActions';
+export * from './MobileActions';
+export * from './types';

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

@@ -0,0 +1,42 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.desktopActionsWrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  flex-shrink: 0;
+  gap: styles-theme-variables.$dimension-1m;
+  height: 100%;
+}
+
+.mobileActionsWrapper {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+  width: 100%;
+  justify-content: stretch;
+  overflow-y: auto;
+  flex-direction: row-reverse;
+
+  /* Hide scrollbar */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+}
+
+.button {
+  white-space: nowrap;
+
+  &[data-full-width]:not([data-variant='icon-only']) {
+    flex-shrink: 0;
+    width: auto;
+  }
+
+  &[data-variant='icon-only'] {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}

package/src/helperComponents/Actions/types.ts

@@ -0,0 +1,39 @@
+import { TooltipProps } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { QuotaDropdownProps } from '@cloud-ru/uikit-product-quota';
+import {
+  ButtonFilledProps,
+  ButtonFunctionProps,
+  ButtonOutlineProps,
+  ButtonSimpleProps,
+  ButtonTonalProps,
+} from '@snack-uikit/button';
+
+import { ButtonDropdownProps } from '../ButtonDropdown';
+import { ButtonDroplistProps } from '../ButtonDroplist';
+import { ButtonKebabProps } from '../ButtonKebab';
+import { BUTTON_TYPE } from './constants';
+
+type ButtonDropdownPropsWithoutLayout = Omit<ButtonDropdownProps, 'layoutType'>;
+type ButtonKebabPropsWithoutLayout = Omit<ButtonKebabProps, 'layoutType'>;
+type ButtonDroplistWithoutLayout = Omit<ButtonDroplistProps, 'layoutType'>;
+type ButtonQuotaDropdownWithoutLayout = Omit<QuotaDropdownProps, 'layoutType'>;
+
+export type Action = {
+  tooltip?: TooltipProps;
+  hidden?: boolean;
+} & (
+  | ({ variant?: typeof BUTTON_TYPE.Filled } & ButtonFilledProps)
+  | ({ variant: typeof BUTTON_TYPE.Outline } & ButtonOutlineProps)
+  | ({ variant: typeof BUTTON_TYPE.Tonal } & ButtonTonalProps)
+  | ({ variant: typeof BUTTON_TYPE.Function } & ButtonFunctionProps)
+  | ({ variant: typeof BUTTON_TYPE.Simple } & ButtonSimpleProps)
+  | ({ variant: typeof BUTTON_TYPE.Dropdown } & ButtonDropdownPropsWithoutLayout)
+  | ({ variant: typeof BUTTON_TYPE.Kebab } & ButtonKebabPropsWithoutLayout)
+  | ({ variant: typeof BUTTON_TYPE.Droplist } & ButtonDroplistWithoutLayout)
+  | ({ variant: typeof BUTTON_TYPE.Quota } & ButtonQuotaDropdownWithoutLayout)
+);
+
+export type ActionsProps = {
+  items: Action[];
+  maxVisibleItems?: number;
+};

package/src/helperComponents/ButtonDropdown/ButtonDropdown.tsx

@@ -0,0 +1,22 @@
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/uikit-product-icons';
+import { AdaptiveDropdown, AdaptiveDropdownProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
+import { useValueControl } from '@snack-uikit/utils';
+
+export type ButtonDropdownProps = WithLayoutType<{
+  button: Omit<ButtonFunctionProps, 'icon' | 'iconPosition' | 'appearance'>;
+  dropdown: Omit<AdaptiveDropdownProps, 'children' | 'layoutType' | 'placement'>;
+}>;
+
+export function ButtonDropdown({ layoutType, button, dropdown }: ButtonDropdownProps) {
+  const [open, onOpenChange] = useValueControl<boolean>({ onChange: dropdown.onOpenChange, value: dropdown.open });
+
+  const Icon = open ? ChevronUpSVG : ChevronDownSVG;
+
+  return (
+    <AdaptiveDropdown {...dropdown} open={open} onOpenChange={onOpenChange} layoutType={layoutType}>
+      <ButtonFunction {...button} icon={<Icon />} iconPosition='after' appearance='neutral' />
+    </AdaptiveDropdown>
+  );
+}

package/src/helperComponents/ButtonDropdown/index.ts

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