@cloud-ru/uikit-product-site-selector-platform-drop-list 0.1.4

package/dist/esm/helperComponents/SelectorPlatformDropListPrivate/SelectorPlatformDropListPrivate.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/uikit-product-icons';
+import { AdaptiveDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { MobileModalCustom } from '@cloud-ru/uikit-product-mobile-modal';
+import { Typography } from '@snack-uikit/typography';
+import { BaseIcon, ContentItemList, IconItemList, SelectedItemList, TitleWithGoBack, Tooltip, } from '../../helperComponents';
+import styles from './styles.module.css';
+import { findItems } from './utils';
+export function SelectorPlatformDropListPrivate({ items, value, onChange, footer, title, baseTitle, baseIcon, layoutType, mode, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [tooltipMobile, setTooltipMobile] = useState({
+        open: false,
+    });
+    const handleCloseTooltipMobile = () => {
+        setTooltipMobile({
+            open: false,
+        });
+    };
+    const itemsView = useMemo(() => items.map(item => ({
+        id: item.id,
+        content: _jsx(ContentItemList, { title: item.title }),
+        beforeContent: _jsx(IconItemList, { icon: item.icon }),
+        afterContent: (_jsx(Tooltip, { setTooltipMobile: setTooltipMobile, tooltipText: item.tooltipText, layoutType: layoutType })),
+        className: styles.rowItem,
+        onClick: item.onClick,
+    })), [items, layoutType]);
+    const itemsWithDivider = useMemo(() => [...itemsView, { type: 'group', divider: true, items: [] }], [itemsView]);
+    const selection = useMemo(() => mode === 'multiple'
+        ? { value, onChange, mode: 'multiple' }
+        : { value, onChange, mode: 'single' }, [mode, onChange, value]);
+    const foundItems = useMemo(() => findItems(items, value), [items, value]);
+    return (_jsxs(_Fragment, { children: [_jsx(AdaptiveDroplist
+            // @ts-expect-error label существует только у MobileDroplist, отсутствует у Droplist
+            , { 
+                // @ts-expect-error label существует только у MobileDroplist, отсутствует у Droplist
+                label: _jsx(TitleWithGoBack, { title: '\u041E\u0431\u043B\u0430\u0447\u043D\u0430\u044F \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0430' }), layoutType: layoutType, trigger: 'click', open: isOpen, items: footer ? itemsWithDivider : itemsView, onOpenChange: setIsOpen, selection: selection, footer: footer, closeDroplistOnItemClick: true, size: 'm', children: _jsxs("div", { className: styles.root, "data-focus": isOpen, role: 'button', children: [_jsx(BaseIcon, { baseIcon: baseIcon, value: foundItems, lengthDroplist: items.length }), _jsxs("div", { className: styles.titleContainer, children: [_jsx(Typography, { className: styles.valueLabel, family: 'sans', purpose: 'body', size: 's', children: title }), _jsx(SelectedItemList, { lengthDroplist: items.length, baseTitle: baseTitle, value: foundItems })] }), _jsx("div", { className: styles.iconContainer, children: isOpen ? _jsx(ChevronUpSVG, { className: styles.icon }) : _jsx(ChevronDownSVG, { className: styles.icon }) })] }) }), _jsxs(MobileModalCustom, { open: tooltipMobile.open, onClose: handleCloseTooltipMobile, children: [_jsx(MobileModalCustom.Header, { title: _jsx(TitleWithGoBack, { onGoBack: handleCloseTooltipMobile, title: '\u041E\u0431\u043B\u0430\u0447\u043D\u0430\u044F \u043F\u043B\u0430\u0442\u0444\u043E\u0440\u043C\u0430' }) }), _jsx(MobileModalCustom.Body, { content: _jsx(Typography.SansBodyL, { children: tooltipMobile.text }) })] })] }));
+}

package/dist/esm/helperComponents/SelectorPlatformDropListPrivate/index.d.ts

@@ -0,0 +1,2 @@
+export { SelectorPlatformDropListPrivate } from './SelectorPlatformDropListPrivate';
+export type { SelectorPlatformDropListPrivateProps } from './SelectorPlatformDropListPrivate';

package/dist/esm/helperComponents/SelectorPlatformDropListPrivate/index.js

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

package/dist/esm/helperComponents/SelectorPlatformDropListPrivate/styles.module.css

@@ -0,0 +1,54 @@
+.root{
+  cursor:pointer;
+  display:flex;
+  align-items:center;
+  gap:8px;
+  height:48px;
+  padding:4px 12px 4px 8px;
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border:1px solid var(--sys-neutral-decor-default, #dde0ea);
+  box-sizing:border-box;
+}
+.root:hover{
+  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+}
+.root[data-focus=true]{
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-primary-accent-default, #26d07c);
+  outline-color:var(--sys-primary-decor-activated, #8ee7bb);
+}
+
+.titleContainer{
+  display:flex;
+  flex-direction:column;
+  justify-content:space-between;
+  height:36px;
+  width:100%;
+  flex:1 1 auto;
+  min-width:0;
+}
+
+.iconContainer{
+  width:24px;
+  height:24px;
+}
+
+.valueLabel{
+  cursor:pointer;
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+.valueTitle{
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.icon{
+  color:var(--sys-graphite-text-main, #222222);
+}
+
+.rowItem{
+  box-sizing:border-box;
+}

package/dist/esm/helperComponents/SelectorPlatformDropListPrivate/utils.d.ts

@@ -0,0 +1,2 @@
+import { Item } from '../../types';
+export declare function findItems(items: Array<Item>, value: Array<string> | string | undefined): Item[];

package/dist/esm/helperComponents/SelectorPlatformDropListPrivate/utils.js

@@ -0,0 +1,12 @@
+export function findItems(items, value) {
+    if (!value)
+        return [];
+    if (typeof value === 'string') {
+        const foundItem = items.find(item => item.id === value);
+        if (!foundItem) {
+            return [];
+        }
+        return [foundItem];
+    }
+    return items.filter(item => value.find(val => val === item.id));
+}

package/dist/esm/helperComponents/TitleWithGoBack/TitleWithGoBack.d.ts

@@ -0,0 +1,7 @@
+import { MouseEventHandler, ReactNode } from 'react';
+type TitleWithGoBackProps = {
+    title: ReactNode;
+    onGoBack?: MouseEventHandler<SVGElement>;
+};
+export declare function TitleWithGoBack({ onGoBack, title }: TitleWithGoBackProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/helperComponents/TitleWithGoBack/TitleWithGoBack.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftSVG } from '@cloud-ru/uikit-product-icons';
+import { Typography } from '@snack-uikit/typography';
+import s from './styles.module.css';
+export function TitleWithGoBack({ onGoBack, title }) {
+    return (_jsxs("div", { className: s.wrapper, "data-icon-back": Boolean(onGoBack), children: [onGoBack && _jsx(ArrowLeftSVG, { size: 24, className: s.arrow, onClick: onGoBack }), _jsx(Typography.SansTitleL, { children: title }), onGoBack && _jsx("div", { className: s.buttonStub })] }));
+}

package/dist/esm/helperComponents/TitleWithGoBack/index.d.ts

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

package/dist/esm/helperComponents/TitleWithGoBack/index.js

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

package/dist/esm/helperComponents/TitleWithGoBack/styles.module.css

@@ -0,0 +1,17 @@
+.wrapper{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  width:calc(100vw - 32px);
+}
+.wrapper[data-icon-back=false]{
+  justify-content:center;
+}
+
+.arrow{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+}
+
+.buttonStub{
+  width:24px;
+}

package/dist/esm/helperComponents/Tooltip/Tooltip.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch, SetStateAction } from 'react';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { TooltipMobile } from '../../types';
+type TooltipProps = WithLayoutType<{
+    tooltipText?: string;
+    setTooltipMobile: Dispatch<SetStateAction<TooltipMobile>>;
+}>;
+export declare function Tooltip({ layoutType, tooltipText, setTooltipMobile }: TooltipProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/helperComponents/Tooltip/Tooltip.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QuestionSVG } from '@cloud-ru/uikit-product-icons';
+import { QuestionTooltip } from '@snack-uikit/tooltip';
+import styles from './styles.module.css';
+export function Tooltip({ layoutType, tooltipText, setTooltipMobile }) {
+    if (!tooltipText) {
+        return null;
+    }
+    if (layoutType !== 'mobile') {
+        return _jsx(QuestionTooltip, { className: styles.questionTooltip, tip: tooltipText });
+    }
+    const handleOpen = (event) => {
+        event.stopPropagation();
+        setTooltipMobile({
+            open: true,
+            text: tooltipText,
+        });
+    };
+    return _jsx(QuestionSVG, { className: styles.icon, onClick: handleOpen, size: 16 });
+}

package/dist/esm/helperComponents/Tooltip/index.d.ts

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

package/dist/esm/helperComponents/Tooltip/index.js

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

package/dist/esm/helperComponents/Tooltip/styles.module.css

@@ -0,0 +1,8 @@
+.questionTooltip{
+  margin:auto 0;
+}
+
+.icon{
+  color:var(--sys-neutral-text-light, #8b8e9b);
+  margin:auto 0;
+}

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

@@ -0,0 +1,7 @@
+export { SelectedItemList } from './SelectedItemList';
+export { ContentItemList } from './ContentItemList';
+export { IconItemList } from './IconItemList';
+export { BaseIcon } from './BaseIcon';
+export { TitleWithGoBack } from './TitleWithGoBack';
+export { Tooltip } from './Tooltip';
+export { SelectorPlatformDropListPrivate } from './SelectorPlatformDropListPrivate';

package/dist/esm/helperComponents/index.js

@@ -0,0 +1,7 @@
+export { SelectedItemList } from './SelectedItemList';
+export { ContentItemList } from './ContentItemList';
+export { IconItemList } from './IconItemList';
+export { BaseIcon } from './BaseIcon';
+export { TitleWithGoBack } from './TitleWithGoBack';
+export { Tooltip } from './Tooltip';
+export { SelectorPlatformDropListPrivate } from './SelectorPlatformDropListPrivate';

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/dist/esm/types.d.ts

@@ -0,0 +1,32 @@
+import { JSXElementConstructor } from 'react';
+export type IconSelector = JSXElementConstructor<{
+    size?: number;
+    className?: string;
+}>;
+export type Item = {
+    id: string;
+    title: string;
+    icon: IconSelector;
+    onClick?: () => void;
+    tooltipText?: string;
+};
+export type TooltipMobile = {
+    open: boolean;
+    text?: string;
+};
+export type MultipleSelectorPlatformDropListProps = {
+    /** Режим выбора */
+    mode: 'multiple';
+    /** Controlled состояние */
+    value: Array<string>;
+    /** Controlled обработчик изменения состояния */
+    onChange(value: Array<string>): void;
+};
+export type SingleSelectorPlatformDropListProps = {
+    /** Режим выбора */
+    mode: 'single';
+    /** Controlled состояние */
+    value: string | undefined;
+    /** Controlled обработчик изменения состояния */
+    onChange(value: string | undefined): void;
+};

package/dist/esm/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@cloud-ru/uikit-product-site-selector-platform-drop-list",
+  "title": "Site Selector Platform DropList",
+  "version": "0.1.4",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "Site Selector Platform DropList",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/cjs/index.js"
+  },
+  "files": [
+    "dist/esm",
+    "dist/cjs",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "homepage": "https://gitverse.ru/cloud-ru-tech/uikit-product/-/tree/master/packages/site-site-selector-platform-drop-list",
+  "repository": {
+    "type": "git",
+    "url": "https://gitverse.ru/cloud-ru-tech/uikit-product.git",
+    "directory": "packages/site-site-selector-platform-drop-list"
+  },
+  "author": "daparfirov <daparfirov@cloud.ru>",
+  "contributors": [
+    "daparfirov <daparfirov@cloud.ru>"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@cloud-ru/uikit-product-icons": "15.1.6",
+    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.26",
+    "@cloud-ru/uikit-product-mobile-modal": "0.9.23",
+    "@cloud-ru/uikit-product-utils": "8.0.1",
+    "@snack-uikit/list": "0.32.7",
+    "@snack-uikit/tooltip": "0.18.5",
+    "@snack-uikit/typography": "0.8.11"
+  },
+  "gitHead": "9d319ea89df880ac5585f1da30140c8e1ed69086"
+}

package/src/components/SelectorPlatformDropList/SelectorPlatformDropList.tsx

@@ -0,0 +1,69 @@
+import { ReactNode, useMemo } from 'react';
+
+import { CloudSVG } from '@cloud-ru/uikit-product-icons';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+
+import { SelectorPlatformDropListPrivate } from '../../helperComponents';
+import { Item, MultipleSelectorPlatformDropListProps, SingleSelectorPlatformDropListProps } from '../../types';
+import { PLATFORMS } from './platforms';
+
+export type PlatformType = 'advanced' | 'evolution' | 'vmware' | 'all';
+
+export type Platform = {
+  /** Тип элемента */
+  type: PlatformType;
+  /** Колбек клика на элемент */
+  onClick?: () => void;
+};
+
+type BaseSelectorPlatformDropListProps = WithLayoutType<{
+  /** Список элементов droplist */
+  items: Array<Platform>;
+  /** Нижняя часть под списком droplist */
+  footer?: ReactNode;
+}>;
+
+export type SelectorPlatformDropListProps = BaseSelectorPlatformDropListProps &
+  (MultipleSelectorPlatformDropListProps | SingleSelectorPlatformDropListProps);
+
+export function SelectorPlatformDropList({
+  items,
+  value,
+  footer,
+  onChange,
+  layoutType,
+  mode,
+}: SelectorPlatformDropListProps) {
+  const selection = useMemo(
+    () =>
+      mode === 'multiple'
+        ? ({
+            value,
+            onChange,
+            mode: 'multiple',
+          } as MultipleSelectorPlatformDropListProps)
+        : ({
+            value,
+            onChange,
+            mode: 'single',
+          } as SingleSelectorPlatformDropListProps),
+    [mode, value, onChange],
+  );
+
+  const itemsView: Array<Item> = useMemo(
+    () => items.map(({ type, onClick }: Platform) => ({ ...PLATFORMS[type], onClick })),
+    [items],
+  );
+
+  return (
+    <SelectorPlatformDropListPrivate
+      layoutType={layoutType === 'tablet' ? 'mobile' : layoutType}
+      items={itemsView}
+      title={'Облачная платформа'}
+      baseTitle={'Все платформы'}
+      baseIcon={CloudSVG}
+      footer={footer}
+      {...selection}
+    />
+  );
+}

package/src/components/SelectorPlatformDropList/index.ts

@@ -0,0 +1,2 @@
+export { SelectorPlatformDropList } from './SelectorPlatformDropList';
+export type { SelectorPlatformDropListProps, PlatformType, Platform } from './SelectorPlatformDropList';

package/src/components/SelectorPlatformDropList/platforms.ts

@@ -0,0 +1,35 @@
+import { AdvancedSVG, CloudSVG, EvolutionSVG, VMwareBackupServerSVG } from '@cloud-ru/uikit-product-icons';
+
+import { Item } from '../../types';
+import { PlatformType } from './SelectorPlatformDropList';
+
+export const PLATFORMS: { [key in PlatformType]: Item } = {
+  evolution: {
+    id: 'evolution',
+    title: 'Evolution',
+    icon: EvolutionSVG,
+    tooltipText:
+      'Платформа собственной разработки с доступом к IaaS- и PaaS-сервисам, вычислительным мощностям с GPU, аренде выделенных физических серверов и AI-инструментам.',
+  },
+  advanced: {
+    id: 'advanced',
+    title: 'Advanced',
+    icon: AdvancedSVG,
+    tooltipText:
+      'Вендорская платформа с широким набором IaaS- и PaaS-сервисов от одного из лидеров мирового рынка облачных услуг.',
+  },
+  vmware: {
+    id: 'vmware',
+    title: 'Облако VMware',
+    icon: VMwareBackupServerSVG,
+    tooltipText:
+      'Вендорская платформа, предоставляющая инфраструктуру как услугу, основанную на технологиях VMware — ведущего поставщика решений IaaS.',
+  },
+  all: {
+    id: 'all',
+    title: 'Все платформы',
+    icon: CloudSVG,
+    tooltipText:
+      'Совокупность сервисов, программных и/или аппаратных средств, решающих определенную задачу или группу задач.',
+  },
+};

package/src/components/index.ts

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

package/src/helperComponents/BaseIcon/BaseIcon.tsx

@@ -0,0 +1,20 @@
+import { IconSelector, Item } from '../../types';
+import { IconItemList } from '../IconItemList';
+
+type BaseIconProps = {
+  baseIcon?: IconSelector;
+  value: Array<Item>;
+  lengthDroplist: number;
+};
+
+export function BaseIcon({ baseIcon, value, lengthDroplist }: BaseIconProps) {
+  if (value.length === 1) {
+    return <IconItemList icon={value[0].icon} />;
+  }
+
+  if (!baseIcon || (value.length > 1 && lengthDroplist !== value.length)) {
+    return null;
+  }
+
+  return <IconItemList icon={baseIcon} />;
+}

package/src/helperComponents/BaseIcon/index.ts

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

package/src/helperComponents/ContentItemList/ContentItemList.tsx

@@ -0,0 +1,15 @@
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+
+type ContentItemListProps = {
+  title: string;
+};
+
+export function ContentItemList({ title }: ContentItemListProps) {
+  return (
+    <div className={styles.container}>
+      <Typography.SansTitleS>{title}</Typography.SansTitleS>
+    </div>
+  );
+}

package/src/helperComponents/ContentItemList/index.ts

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

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

@@ -0,0 +1,5 @@
+.container {
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+}

package/src/helperComponents/IconItemList/IconItemList.tsx

@@ -0,0 +1,14 @@
+import { IconSelector } from '../../types';
+import styles from './styles.module.scss';
+
+type IconItemListProps = {
+  icon: IconSelector;
+};
+
+export function IconItemList({ icon: IconComponent }: IconItemListProps) {
+  return (
+    <div className={styles.container}>
+      <IconComponent size={24} className={styles.icon} />
+    </div>
+  );
+}

package/src/helperComponents/IconItemList/index.ts

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

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

@@ -0,0 +1,14 @@
+@use '@sbercloud/figma-tokens-web/build/scss/styles-theme-variables' as ste;
+
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  min-height: 32px;
+  background: ste.$sys-graphite-background;
+}
+
+.icon {
+  color: ste.$sys-neutral-text-main;
+}

package/src/helperComponents/SelectedItemList/SelectedItemList.tsx

@@ -0,0 +1,33 @@
+import { Typography } from '@snack-uikit/typography';
+
+import { Item } from '../../types';
+import styles from './styles.module.scss';
+
+type SelectedItemListProps = {
+  baseTitle: string;
+  value: Array<Item>;
+  lengthDroplist: number;
+};
+
+export function SelectedItemList({ baseTitle, value, lengthDroplist }: SelectedItemListProps) {
+  if (value.length === 0 || value.length === lengthDroplist) {
+    return <Typography.SansTitleS className={styles.text}>{baseTitle}</Typography.SansTitleS>;
+  }
+
+  if (value.length === 1) {
+    return <Typography.SansTitleS className={styles.text}>{value[0]?.title}</Typography.SansTitleS>;
+  }
+
+  return (
+    <div className={styles.container}>
+      {value.map(({ title, icon: IconComponent }, index) => (
+        <div key={title} className={styles.item}>
+          {IconComponent && <IconComponent size={12} className={styles.icon} />}
+          <Typography.SansLabelM className={styles.text}>
+            {`${title}${index !== value.length - 1 ? ',' : ''}`}
+          </Typography.SansLabelM>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/helperComponents/SelectedItemList/index.ts

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

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

@@ -0,0 +1,35 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as ste;
+
+.iconPlatform {
+  color: ste.$sys-primary-text-light;
+}
+
+.text {
+  color: ste.$sys-neutral-text-main;
+}
+
+.container {
+  display: flex;
+  gap: 8px;
+  flex-wrap: nowrap;
+  align-items: center;
+  margin-bottom: 2px;
+  width: 100%;
+
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.item {
+  display: flex;
+  gap: 4px;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
+.icon {
+  color: ste.$sys-primary-text-light;
+}