@cloud-ru/uikit-product-page-layout 0.21.3

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

@@ -0,0 +1,59 @@
+@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 {
+  padding: styles-theme-variables.$dimension-3m;
+  min-width: fit-content;
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+  min-height: 100%;
+  box-sizing: border-box;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 800px;
+  background-color: styles-theme-variables.$sys-neutral-background1-level;
+  padding: 56px;
+  flex-shrink: 0;
+  border-radius: 16px;
+  min-height: 100%;
+  box-sizing: border-box;
+}
+
+.headline {
+  position: relative;
+}
+
+.footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.mainActions {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+}
+
+.sideItems {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 304px;
+  position: sticky;
+  top: 24px;
+  align-self: flex-start;
+}
+
+.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;
+}

package/src/components/PageForm/types.ts

@@ -0,0 +1,6 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { BUTTON_PRIMARY_VARIANT, BUTTON_SECONDARY_VARIANT } from './constants';
+
+export type ButtonPrimaryVariant = ValueOf<typeof BUTTON_PRIMARY_VARIANT>;
+export type ButtonSecondaryVariant = ValueOf<typeof BUTTON_SECONDARY_VARIANT>;

package/src/components/PageLoading/PageLoading.tsx

@@ -0,0 +1,18 @@
+import cn from 'classnames';
+
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Spinner as UISpinner } from '@snack-uikit/loaders';
+
+import styles from './styles.module.scss';
+
+export type PageLoadingProps = WithSupportProps<{
+  className?: string;
+}>;
+
+export function PageLoading({ className, ...rest }: PageLoadingProps) {
+  return (
+    <div className={cn(styles.wrapper, className)} {...extractSupportProps(rest)}>
+      <UISpinner size='m' className={styles.spinner} />
+    </div>
+  );
+}

package/src/components/PageLoading/index.ts

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

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

@@ -0,0 +1,14 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-loader';
+
+.wrapper {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  color: styles-tokens-loader.$sys-neutral-accent-default;
+}
+
+.spinner {
+  position: fixed;
+  top: calc(50% - styles-tokens-loader.simple-var(styles-tokens-loader.$loader-spiner-m, 'height') / 2);
+  left: calc(50% - styles-tokens-loader.simple-var(styles-tokens-loader.$loader-spiner-m, 'width') / 2);
+}

package/src/components/PageServices/PageServices.tsx

@@ -0,0 +1,91 @@
+import cn from 'classnames';
+import { forwardRef, PropsWithChildren, useEffect, useState } from 'react';
+
+import { WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { extractSupportProps } from '@snack-uikit/utils';
+
+import { Headline, HeadlineProps } from '../Headline';
+import { PageSidebar, PageSidebarProps } from '../PageSidebar';
+import styles from './styles.module.scss';
+
+export type PageServicesProps = WithSupportProps<
+  PropsWithChildren<
+    Pick<HeadlineProps, 'title' | 'actions' | 'subHeader' | 'afterHeadline' | 'beforeHeadline' | 'truncateTitle'> & {
+      className?: string;
+      sidebar?: PageSidebarProps;
+      autoHeight?: boolean;
+    }
+  >
+>;
+
+const GLOBAL_CONTAINER_ID = 'single-spa-wrapper';
+
+export const PageServices = forwardRef<HTMLDivElement, PageServicesProps>(
+  (
+    {
+      children,
+      title,
+      actions,
+      className,
+      sidebar,
+      beforeHeadline,
+      subHeader,
+      afterHeadline,
+      truncateTitle,
+      autoHeight,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [height, setHeight] = useState(0);
+
+    useEffect(() => {
+      if (autoHeight) return;
+
+      const container = document.getElementById(GLOBAL_CONTAINER_ID);
+
+      if (container) {
+        const observer = new ResizeObserver(entities =>
+          entities.forEach(entity => {
+            if (entity.target === container) {
+              const [{ blockSize }] = entity.contentBoxSize;
+              setHeight(Math.floor(blockSize));
+            }
+          }),
+        );
+
+        observer.observe(container);
+
+        return () => observer.disconnect();
+      }
+    }, [autoHeight]);
+
+    return (
+      <div
+        className={cn(styles.wrapper, className)}
+        {...(!autoHeight && { style: { height } })}
+        {...extractSupportProps(rest)}
+      >
+        <div className={styles.tempContainer} ref={ref}>
+          <div className={styles.container}>
+            <Headline
+              title={title}
+              actions={actions}
+              beforeHeadline={beforeHeadline}
+              afterHeadline={afterHeadline}
+              subHeader={subHeader}
+              truncateTitle={truncateTitle}
+            />
+
+            <div className={styles.childWrapper}>{children}</div>
+          </div>
+        </div>
+        {sidebar && (
+          <div className={styles.sidebar}>
+            <PageSidebar {...sidebar} />
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/PageServices/index.ts

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

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

@@ -0,0 +1,45 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  min-width: 100%;
+  height: 100%;
+  justify-content: flex-end;
+}
+
+.sidebar {
+  flex-shrink: 0;
+  flex-grow: 0;
+  max-width: 256px;
+  width: fit-content;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.tempContainer {
+  position: relative;
+  box-sizing: border-box;
+  min-width: 992px;
+  flex-shrink: 1;
+  flex-grow: 1;
+  overflow-y: auto;
+}
+
+.container {
+  position: relative;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: styles-theme-variables.$dimension-3m;
+  gap: styles-theme-variables.$dimension-2m;
+  box-sizing: border-box;
+}
+
+.childWrapper {
+  flex-shrink: 1;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}

package/src/components/PageSidebar/PageSidebar.tsx

@@ -0,0 +1,133 @@
+import cn from 'classnames';
+import { useCallback, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { VerticalMenuCloseSVG, VerticalMenuOpenSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonElevated } from '@snack-uikit/button';
+import { List, ListProps } from '@snack-uikit/list';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { SearchContextProvider } from './contexts';
+import { SidebarSearch } from './helperComponents/SidebarSearch';
+import { useItemsContent, useTopPinnedContent } from './hooks/useItemsCreator';
+import { useSearchFilter } from './hooks/useSearchFilter';
+import styles from './styles.module.scss';
+import { Documentation, HeaderProps, SidebarItem } from './types';
+
+export type PageSidebarProps = WithSupportProps<{
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChanged?(open: boolean): void;
+  items: SidebarItem[];
+  footerItems?: SidebarItem[];
+  header?: HeaderProps;
+  selected?: string | number;
+  onSelect?(id: string | number): void;
+  className?: string;
+  documentation?: Documentation;
+  pageContainerId?: string;
+  hasSearch?: boolean;
+  collapse?: ListProps['collapse'];
+}>;
+
+function PrivateSideBar({
+  open: openProp,
+  defaultOpen,
+  onOpenChanged,
+  className,
+  items,
+  footerItems = [],
+  header,
+  selected,
+  onSelect,
+  hasSearch,
+  collapse,
+  ...otherProps
+}: PageSidebarProps) {
+  const [open, setOpenState] = useUncontrolledProp(openProp, defaultOpen || true, onOpenChanged);
+  const [hoverOff, setHoverOff] = useState(false);
+
+  const toggleOpen = useCallback(
+    (newValue: boolean = !open) => {
+      if (newValue === open) {
+        return;
+      }
+
+      if (!newValue) {
+        /* кнопка сворачивания находится внутри сайдбара, а он открывается по ховеру на него,
+        поэтому после клика на время отключаем ховер, чтоб дать ему закрыться */
+        setHoverOff(true);
+        setTimeout(() => setHoverOff(false), 300);
+      }
+
+      setOpenState(newValue);
+    },
+    [open, setOpenState],
+  );
+
+  const { filteredList, searchOpened, searchValue, searchCollapseState } = useSearchFilter(items);
+  const list = useItemsContent(filteredList, onSelect);
+  const footerList = useItemsContent(footerItems);
+  const { pinTop } = useTopPinnedContent(header, hasSearch);
+
+  return (
+    <div
+      // TODO: typescript error
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      {...extractSupportProps(otherProps)}
+      data-collapsed={!open || undefined}
+      className={cn(styles.wrapper, className)}
+    >
+      {!open && (
+        <ButtonElevated
+          className={styles.expandButton}
+          icon={<VerticalMenuOpenSVG />}
+          onClick={() => toggleOpen(true)}
+        />
+      )}
+
+      <div
+        data-collapsed={!open || undefined}
+        data-hover-off={hoverOff || undefined}
+        data-has-search={hasSearch || undefined}
+        className={styles.body}
+      >
+        <div className={styles.content} data-collapsed={!open || undefined}>
+          <div className={styles.list}>
+            <List
+              selection={{ mode: 'single', value: selected }}
+              size='m'
+              items={list}
+              pinTop={pinTop}
+              pinBottom={footerList}
+              scroll
+              scrollToSelectedItem
+              collapse={searchValue ? searchCollapseState : collapse}
+              barHideStrategy='leave'
+            />
+            {hasSearch && searchOpened && (
+              <div className={styles.searchWrapper}>
+                <SidebarSearch />
+              </div>
+            )}
+          </div>
+          <div className={styles.toggler}>
+            <ButtonElevated
+              icon={open ? <VerticalMenuCloseSVG /> : <VerticalMenuOpenSVG />}
+              onClick={() => toggleOpen()}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function PageSidebar(props: PageSidebarProps) {
+  return (
+    <SearchContextProvider>
+      <PrivateSideBar {...props} />
+    </SearchContextProvider>
+  );
+}

package/src/components/PageSidebar/contexts.tsx

@@ -0,0 +1,30 @@
+import { createContext, SetStateAction, useContext, useState } from 'react';
+
+type SearchContextValue = {
+  searchValue: string;
+  setSearchValue(searchValue: string): void;
+  searchOpened: boolean;
+  setSearchOpened: React.Dispatch<SetStateAction<boolean>>;
+};
+
+export const SearchContext = createContext<SearchContextValue>({
+  searchValue: '',
+  searchOpened: false,
+  setSearchValue: () => {},
+  setSearchOpened: () => {},
+});
+
+export function useSearchContext() {
+  return useContext(SearchContext);
+}
+
+export function SearchContextProvider({ children }: { children: React.ReactNode }) {
+  const [searchValue, setSearchValue] = useState('');
+  const [searchOpened, setSearchOpened] = useState(false);
+
+  return (
+    <SearchContext.Provider value={{ searchValue, setSearchValue, searchOpened, setSearchOpened }}>
+      {children}
+    </SearchContext.Provider>
+  );
+}

package/src/components/PageSidebar/helperComponents/SidebarSearch/SidebarSearch.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { Search } from '@snack-uikit/search';
+
+import { useSearchContext } from '../../contexts';
+import styles from './styles.module.scss';
+
+export function SidebarSearch() {
+  const { searchValue, setSearchValue, searchOpened } = useSearchContext();
+
+  const ref = useRef<HTMLInputElement>(null);
+
+  const { t } = useLocale('PageLayout');
+
+  useEffect(() => {
+    if (searchOpened) {
+      ref?.current?.focus();
+    }
+  }, [searchOpened]);
+
+  if (!searchOpened) return null;
+
+  return (
+    <Search
+      ref={ref}
+      className={styles.searchItem}
+      size='m'
+      placeholder={t('PageSidebar.searchByServices')}
+      value={searchValue}
+      onChange={setSearchValue}
+    />
+  );
+}

package/src/components/PageSidebar/helperComponents/SidebarSearch/index.ts

@@ -0,0 +1 @@
+export { SidebarSearch } from './SidebarSearch';

package/src/components/PageSidebar/helperComponents/SidebarSearch/styles.module.scss

@@ -0,0 +1,28 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables.scss';
+@use '@sbercloud/figma-tokens-web/build/scss/components/styles-tokens-element';
+
+.searchItem {
+  background-color: styles-theme-variables.$sys-neutral-background;
+}
+
+.button {
+  cursor: pointer;
+  position: relative;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  background: none;
+  border: none;
+
+  &:focus,
+  &:focus-visible {
+    @include styles-tokens-element.outline-var(styles-tokens-element.$container-focused-s);
+
+    border-radius: styles-theme-variables.$dimension-050m;
+    outline-color: styles-tokens-element.$sys-available-complementary;
+  }
+
+  &:active {
+    outline: none;
+  }
+}

package/src/components/PageSidebar/helperComponents/SidebarSearchToggle/SidebarSearchToggle.tsx

@@ -0,0 +1,23 @@
+import { SearchSVG, VerticalMenuRightCloseSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Tooltip } from '@snack-uikit/tooltip';
+
+import { useSearchContext } from '../../contexts';
+
+export function SidebarSearchToggle() {
+  const { searchOpened, setSearchValue, setSearchOpened } = useSearchContext();
+
+  const { t } = useLocale('PageLayout');
+
+  const toggle = () => {
+    setSearchValue('');
+    setSearchOpened(prev => !prev);
+  };
+
+  return (
+    <Tooltip tip={searchOpened ? t('PageSidebar.closeSearch') : t('PageSidebar.openSearch')}>
+      <ButtonFunction size='s' onClick={toggle} icon={searchOpened ? <VerticalMenuRightCloseSVG /> : <SearchSVG />} />
+    </Tooltip>
+  );
+}

package/src/components/PageSidebar/helperComponents/SidebarSearchToggle/index.ts

@@ -0,0 +1 @@
+export { SidebarSearchToggle } from './SidebarSearchToggle';

package/src/components/PageSidebar/helperComponents/SidebarTitle/SidebarTitle.tsx

@@ -0,0 +1,32 @@
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { IconPredefined } from '@snack-uikit/icon-predefined';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+
+import { Icon } from '../../types';
+import styles from './styles.module.scss';
+
+export type SidebarTitleProps = {
+  title: string;
+  icon: Icon;
+  className?: string;
+  afterContent?: ReactNode;
+};
+
+export function SidebarTitle({ title, className, icon, afterContent }: SidebarTitleProps) {
+  return (
+    <div className={cn(className, styles.wrapper)}>
+      <div className={styles.icon}>
+        <IconPredefined appearance='neutral' size='s' shape='square' icon={icon} />
+      </div>
+      <div className={styles.title}>
+        <Typography.SansLabelL>
+          <TruncateString text={title} />
+        </Typography.SansLabelL>
+      </div>
+      {afterContent}
+    </div>
+  );
+}

package/src/components/PageSidebar/helperComponents/SidebarTitle/index.ts

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

package/src/components/PageSidebar/helperComponents/SidebarTitle/styles.module.scss

@@ -0,0 +1,20 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables.scss';
+
+.wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: styles-theme-variables.$dimension-1m;
+  align-items: center;
+}
+
+.icon {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.title {
+  overflow: hidden;
+  flex-grow: 1;
+  flex-shrink: 1;
+  color: styles-theme-variables.$sys-neutral-text-main;
+}