@cloud-ru/uikit-product-widget 0.9.4

package/src/components/Widget/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './Widget';

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

@@ -0,0 +1,60 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.widget {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: calc(styles-theme-variables.$dimension-1m + styles-theme-variables.$dimension-050m);
+  background-color: styles-theme-variables.$sys-neutral-background1-level;
+  border-radius: calc(styles-theme-variables.$dimension-1m + styles-theme-variables.$dimension-050m);
+  padding: styles-theme-variables.$dimension-2m;
+}
+
+.widgetHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: styles-theme-variables.$dimension-1m;
+  min-width: 0;
+}
+
+.titleClickable {
+  flex: 1;
+  min-width: 0;
+}
+
+.widgetContent {
+  color: styles-theme-variables.$sys-neutral-text-main;
+  min-height: 0;
+}
+
+.actionsWrapper {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: styles-theme-variables.$dimension-050m;
+}
+
+.actionsWide {
+  justify-content: flex-end;
+}
+
+.skeletonContent {
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-050m;
+}
+
+.skeletonHeader {
+  flex: 1;
+  min-width: 0;
+}
+
+.skeletonActions {
+  display: flex;
+  align-items: center;
+  gap: styles-theme-variables.$dimension-1m;
+  width: 100%;
+}
+
+

package/src/components/Widget/types.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+
+import { TitleClickableProps } from '@cloud-ru/uikit-product-title-clickable';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import type { InfoBlockProps } from '@snack-uikit/info-block';
+import { WithSupportProps } from '@snack-uikit/utils';
+
+import { Action } from '../../helperComponents/Actions/types';
+
+export type WidgetState = 'default' | 'loading' | 'error';
+
+export type WidgetHeaderProps = Pick<
+  TitleClickableProps,
+  'title' | 'icon' | 'avatar' | 'href' | 'target' | 'onClick' | 'titleTag' | 'fullWidth' | 'children' | 'className'
+>;
+
+export type WidgetLoadingStateProps = {
+  loadingContent?: ReactNode;
+  showSkeleton?: boolean;
+};
+
+export type WidgetErrorStateProps = {
+  errorTitle?: string;
+  errorDescription?: string;
+  errorIcon?: InfoBlockProps['icon'];
+};
+
+export type WidgetProps = WithLayoutType<
+  WithSupportProps<{
+    header: WidgetHeaderProps;
+    children: ReactNode;
+    actions?: Action[];
+    wide?: boolean;
+    state?: WidgetState;
+    loadingState?: WidgetLoadingStateProps;
+    errorState?: WidgetErrorStateProps;
+    className?: string;
+  }>
+>;

package/src/components/index.ts

@@ -0,0 +1,3 @@
+export * from './ProductsWidget';
+export * from './SolutionsWidget';
+export * from './Widget';

package/src/helperComponents/Actions/ActionView.tsx

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+
+import { AdaptiveTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import {
+  ButtonFilled,
+  ButtonFilledProps,
+  ButtonFunction,
+  ButtonFunctionProps,
+  ButtonOutline,
+  ButtonOutlineProps,
+  ButtonSimple,
+  ButtonSimpleProps,
+  ButtonTonal,
+  ButtonTonalProps,
+} from '@snack-uikit/button';
+
+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.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} />);
+    }
+
+    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,111 @@
+import { useRef, useState } from 'react';
+
+import { KebabSVG } from '@cloud-ru/uikit-product-icons';
+import { MobileDroplist, MobileDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { MobileTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { ButtonOutline } from '@snack-uikit/button';
+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 }: ActionsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const { visibleItems, hiddenItems } = useDynamicList({ parentContainerRef: containerRef, items, maxVisibleItems: 2 });
+
+  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.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;
+                }
+
+                default: {
+                  break;
+                }
+              }
+
+              return acc;
+            },
+            [] as MobileDroplistProps['items'],
+          )}
+        >
+          <ButtonOutline appearance='neutral' icon={<KebabSVG />} size='s' />
+        </MobileDroplist>
+      )}
+
+      {visibleItemsWithoutKebab.map((action, index) => (
+        <ActionView
+          {...action}
+          key={index}
+          layoutType='mobile'
+          commonProps={{
+            className: styles.button,
+            size: 's',
+            fullWidth: true,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

package/src/helperComponents/Actions/constants.ts

@@ -0,0 +1,9 @@
+export const BUTTON_TYPE = {
+  Filled: 'filled',
+  Outline: 'outline',
+  Tonal: 'tonal',
+  Function: 'function',
+  Simple: 'simple',
+  Droplist: 'droplist',
+  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,33 @@
+import { TooltipProps } from '@cloud-ru/uikit-product-mobile-tooltip';
+import {
+  ButtonFilledProps,
+  ButtonFunctionProps,
+  ButtonOutlineProps,
+  ButtonSimpleProps,
+  ButtonTonalProps,
+} from '@snack-uikit/button';
+
+import { ButtonDroplistProps } from '../ButtonDroplist';
+import { ButtonKebabProps } from '../ButtonKebab';
+import { BUTTON_TYPE } from './constants';
+
+type ButtonKebabPropsWithoutLayout = Omit<ButtonKebabProps, 'layoutType'>;
+type ButtonDroplistWithoutLayout = Omit<ButtonDroplistProps, '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.Kebab } & ButtonKebabPropsWithoutLayout)
+  | ({ variant: typeof BUTTON_TYPE.Droplist } & ButtonDroplistWithoutLayout)
+);
+
+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';

package/src/helperComponents/ButtonDroplist/ButtonDroplist.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/uikit-product-icons';
+import { AdaptiveDroplist, AdaptiveDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { ButtonFilled, ButtonFilledProps, ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
+import { useValueControl } from '@snack-uikit/utils';
+
+export type ButtonDroplistProps = WithLayoutType<{
+  button:
+    | (Omit<ButtonFilledProps, 'appearance'> & { buttonType?: 'filled' })
+    | (Omit<ButtonFunctionProps, 'icon' | 'iconPosition' | 'appearance'> & { buttonType?: 'function' });
+  list: Pick<AdaptiveDroplistProps, 'items' | 'closeDroplistOnItemClick' | 'className' | 'open' | 'onOpenChange'>;
+}>;
+
+export function ButtonDroplist({ layoutType, button, list }: ButtonDroplistProps) {
+  const [open, onOpenChange] = useValueControl<boolean>({ onChange: list.onOpenChange, value: list.open });
+
+  const Icon = open ? ChevronUpSVG : ChevronDownSVG;
+
+  const buttonType = button.buttonType ?? 'function';
+
+  const Button = buttonType === 'filled' ? ButtonFilled : ButtonFunction;
+
+  const buttonProps: ButtonDroplistProps['button'] = useMemo(
+    () =>
+      buttonType === 'filled' ? button : { ...button, appearance: 'neutral', icon: <Icon />, iconPosition: 'after' },
+    [buttonType, button, Icon],
+  );
+
+  return (
+    <AdaptiveDroplist
+      {...list}
+      open={open}
+      onOpenChange={onOpenChange}
+      layoutType={layoutType}
+      selection={{
+        mode: 'single',
+        value: 'null',
+      }}
+      size='s'
+    >
+      <Button {...buttonProps} />
+    </AdaptiveDroplist>
+  );
+}

package/src/helperComponents/ButtonDroplist/index.ts

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

package/src/helperComponents/ButtonKebab/ButtonKebab.tsx

@@ -0,0 +1,31 @@
+import { KebabSVG } from '@cloud-ru/uikit-product-icons';
+import { AdaptiveDroplist, AdaptiveDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { ButtonOutline, ButtonOutlineProps } from '@snack-uikit/button';
+import { useValueControl } from '@snack-uikit/utils';
+
+export type ButtonKebabProps = WithLayoutType<{
+  button?: Omit<ButtonOutlineProps, 'label' | 'icon'>;
+  list: Pick<AdaptiveDroplistProps, 'items' | 'closeDroplistOnItemClick' | 'open' | 'onOpenChange' | 'className'>;
+}>;
+
+export function ButtonKebab({ layoutType, button, list }: ButtonKebabProps) {
+  const [open, onOpenChange] = useValueControl<boolean>({ onChange: list.onOpenChange, value: list.open });
+
+  return (
+    <AdaptiveDroplist
+      {...list}
+      open={open}
+      onOpenChange={onOpenChange}
+      layoutType={layoutType}
+      selection={{
+        mode: 'single',
+        value: 'null',
+      }}
+      placement='bottom-end'
+      size='s'
+    >
+      <ButtonOutline {...button} icon={<KebabSVG />} appearance='neutral' />
+    </AdaptiveDroplist>
+  );
+}

package/src/helperComponents/ButtonKebab/index.ts

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

package/src/helperComponents/index.ts

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

package/src/index.ts

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