nntc-ui 0.2.6 → 0.2.7

package/src/components/common/MultiSelect/MultiSelect.tsx

@@ -1,260 +0,0 @@
-import classnames from 'classnames';
-import {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  MouseEvent,
-  ReactNode,
-  forwardRef,
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useTranslation } from 'react-i18next';
-import { mergeRefs } from 'react-merge-refs';
-import { v4 as uuidv4 } from 'uuid';
-
-import { FieldError, FieldErrorIcon, FieldShell, FieldSize, FieldVariant } from '@components/common/FieldShell';
-import * as fieldStyles from '@components/common/FieldShell/fieldShell.module.css';
-import { InputChip } from '@components/view/InputChip';
-import { Popover } from '@components/view/Popover';
-import { Arrow } from '@components/view/Popover/ui/Arrow';
-import { CloseIcon } from '@icons/CloseIcon';
-import { PropsObject, UiProps } from '@models/UiProps';
-
-import { Item } from './models/Item';
-import { TitleVariant } from './models/TitleVariant';
-import * as styles from './multiSelect.module.css';
-import { SelectPopover } from './ui/SelectPopover';
-import { getTitle } from './utils/getTitle';
-
-interface Props {
-  variant?: FieldVariant;
-  componentSize?: FieldSize;
-  icon?: ReactNode;
-  fullWidth?: boolean;
-  label?: string;
-  error?: FieldError;
-  placeholder?: string;
-  items: Item[];
-  onValueChange?: (newItem: Item[] | null) => void;
-  selected: string[] | null;
-  titleType?: TitleVariant;
-  showSelectedCount?: boolean;
-  enableSearch?: boolean;
-  popoverInComponent?: boolean;
-}
-
-export const MultiSelect = forwardRef<
-  HTMLInputElement,
-  UiProps<Props> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
->(function MultiSelect(props, ref) {
-  const {
-    variant = 'filled',
-    componentSize = 'medium',
-    icon,
-    fullWidth,
-    label,
-    error,
-    placeholder,
-    items,
-    onValueChange,
-    selected,
-    classes,
-    disabled,
-    id,
-    titleType = 'allValue',
-    showSelectedCount = false,
-    enableSearch = false,
-    popoverInComponent = false,
-    ...inputProps
-  } = props;
-
-  const chips = titleType === 'chips';
-
-  const { t } = useTranslation();
-
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const popoverTargetRef = useRef<HTMLDivElement>(null);
-
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const [popoverWidth, setPopoverWidth] = useState<number>();
-  const [popoverLayoutVersion, setPopoverLayoutVersion] = useState(0);
-
-  const activeItems = useMemo(() => items.filter((i) => selected?.includes(i.value)), [selected, items]);
-
-  useLayoutEffect(() => {
-    const element = wrapperRef.current;
-    if (!element) {
-      return;
-    }
-
-    const updateLayout = () => {
-      const { width } = element.getBoundingClientRect();
-      setPopoverWidth(width);
-      setPopoverLayoutVersion((prev) => prev + 1);
-    };
-
-    updateLayout();
-
-    if (typeof ResizeObserver === 'undefined') {
-      return;
-    }
-
-    const resizeObserver = new ResizeObserver(updateLayout);
-    resizeObserver.observe(element);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  useLayoutEffect(() => {
-    if (chips) {
-      setPopoverLayoutVersion((prev) => prev + 1);
-    }
-  }, [chips, activeItems.length]);
-
-  const inputClickHandler = useCallback(
-    (e: MouseEvent) => {
-      e.preventDefault();
-      if (!disabled) {
-        setIsPopoverOpen((prev) => !prev);
-      }
-    },
-    [disabled],
-  );
-
-  const handleSelectedChange = useCallback(
-    (newItems: Item[]) => {
-      onValueChange?.(newItems);
-    },
-    [onValueChange],
-  );
-
-  const title = useMemo(() => {
-    if (!activeItems.length) return '';
-    return getTitle(titleType, activeItems, t);
-  }, [titleType, activeItems, t]);
-
-  const clearHandler = () => {
-    onValueChange?.(null);
-  };
-  const inputId = id ?? uuidv4();
-  const showErrorIcon = !!error && !label;
-
-  return (
-    <FieldShell
-      variant={variant}
-      componentSize={componentSize}
-      fullWidth={fullWidth}
-      label={label}
-      error={error}
-      labelExtra={
-        showSelectedCount && activeItems.length > 0 ? (
-          <span
-            className={classnames(styles.labelSelectedCount, classes?.labelSelectedCount)}
-          >{` (${activeItems.length})`}</span>
-        ) : undefined
-      }
-      inputId={inputId}
-      onLabelClick={inputClickHandler}
-      ref={wrapperRef}
-      hasStartIcon={!!icon}
-      hasArrow
-      hasErrorIcon={showErrorIcon}
-      hasClearButton={!!activeItems.length}
-      chipsMode={chips}
-      classes={classes}
-    >
-      <input
-        ref={mergeRefs([inputRef, ref])}
-        id={inputId}
-        className={classnames(fieldStyles.input, styles.input, classes?.input)}
-        placeholder={chips && activeItems.length ? undefined : placeholder}
-        {...inputProps}
-        value={chips ? '' : title}
-        onClick={inputClickHandler}
-        disabled={disabled}
-        readOnly
-        title={chips ? undefined : activeItems.map((i) => i.name).join(', ')}
-        autoComplete={'off'}
-      />
-      {chips && !!activeItems.length && (
-        <span className={classnames(fieldStyles.chips, styles.chips, classes?.chips)}>
-          {activeItems.map((item) => (
-            <InputChip
-              key={item.value}
-              componentSize={componentSize}
-              disabled={disabled}
-              onClick={() => {
-                if (!disabled) setIsPopoverOpen((prev) => !prev);
-              }}
-              onRemove={() => {
-                const rest = activeItems.filter((i) => i.value !== item.value);
-                onValueChange?.(rest.length ? rest : null);
-              }}
-            >
-              {item.name}
-            </InputChip>
-          ))}
-        </span>
-      )}
-      {!!icon && (
-        <span onClick={inputClickHandler} className={classnames(styles.icon, classes?.icon)}>
-          {icon}
-        </span>
-      )}
-      {!!activeItems.length && (
-        <span onClick={clearHandler} className={classnames(styles.clear, classes?.clear)}>
-          <CloseIcon />
-        </span>
-      )}
-      <span onClick={inputClickHandler} className={classnames(fieldStyles.arrow, classes?.arrow)}>
-        <Arrow />
-      </span>
-      {showErrorIcon && error && (
-        <FieldErrorIcon error={error} componentSize={componentSize} className={classes?.errorIcon} />
-      )}
-      <Popover
-        placement="bottom-start"
-        open={isPopoverOpen}
-        onOpenChange={setIsPopoverOpen}
-        contentStyle={
-          popoverWidth ? { width: popoverWidth, minWidth: popoverWidth, maxWidth: popoverWidth } : undefined
-        }
-        classes={{
-          content: classnames(styles.popoverContent, classes?.popoverContent),
-          ...(classes?.popover as PropsObject | undefined),
-        }}
-        containerOffset={4}
-        layoutVersion={popoverLayoutVersion}
-        root={popoverInComponent ? wrapperRef.current : undefined}
-        description={
-          <SelectPopover
-            items={items}
-            classes={{
-              searchInput: {
-                root: styles.searchInputRoot,
-                ...((classes?.selectPopover as PropsObject | undefined)?.searchInput as PropsObject | undefined),
-              },
-              root: styles.checklistRoot,
-              checklistWrapper: classnames(styles.checklistWrapper),
-              scrolled: styles.checklistScrolled,
-              ...(classes?.selectPopover as PropsObject | undefined),
-            }}
-            componentSize={componentSize}
-            selected={selected}
-            onSelectedChange={handleSelectedChange}
-            enableSearch={enableSearch}
-            disabled={disabled}
-          />
-        }
-      >
-        <div ref={popoverTargetRef} className={classnames(styles.popoverTarget)} />
-      </Popover>
-    </FieldShell>
-  );
-});

package/src/components/common/MultiSelect/models/Item.ts

@@ -1,7 +0,0 @@
-export interface Item {
-  name: string;
-  value: string;
-  description?: string;
-  selected?: boolean;
-  disabled?: boolean;
-}

package/src/components/common/MultiSelect/multiSelect.module.css

@@ -1,198 +0,0 @@
-/* Специфика MultiSelect: кнопка очистки, кастомная иконка слева, попап с чеклистом.
-   Общая геометрия и состояния — в FieldShell. */
-
-.label-selected-count {
-  color: var(--theme-text-secondary);
-}
-
-.input {
-  cursor: pointer;
-}
-
-.input:disabled {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-/* Справа два элемента (очистка + стрелка) — расширяем отступ поля и чипсов */
-[data-size='small'] .input {
-  padding-right: 50px;
-}
-
-[data-size='medium'] .input {
-  padding-right: 56px;
-}
-
-[data-size='large'] .input,
-[data-size='extraLarge'] .input {
-  padding-right: 64px;
-}
-
-[data-size='small'] [data-error-icon][data-clear] > .input {
-  padding-right: 74px;
-}
-
-[data-size='medium'] [data-error-icon][data-clear] > .input {
-  padding-right: 80px;
-}
-
-[data-size='large'] [data-error-icon][data-clear] > .input,
-[data-size='extraLarge'] [data-error-icon][data-clear] > .input {
-  padding-right: 88px;
-}
-
-[data-size='small'] .chips {
-  padding-right: 50px;
-}
-
-[data-size='medium'] .chips {
-  padding-right: 56px;
-}
-
-[data-size='large'] .chips,
-[data-size='extraLarge'] .chips {
-  padding-right: 64px;
-}
-
-[data-size='small'] [data-error-icon][data-clear] > .chips {
-  padding-right: 74px;
-}
-
-[data-size='medium'] [data-error-icon][data-clear] > .chips {
-  padding-right: 80px;
-}
-
-[data-size='large'] [data-error-icon][data-clear] > .chips,
-[data-size='extraLarge'] [data-error-icon][data-clear] > .chips {
-  padding-right: 88px;
-}
-
-[data-size='small'] [data-error-icon][data-clear] > .clear {
-  right: 54px;
-}
-
-[data-size='medium'] [data-error-icon][data-clear] > .clear {
-  right: 56px;
-}
-
-[data-size='large'] [data-error-icon][data-clear] > .clear,
-[data-size='extraLarge'] [data-error-icon][data-clear] > .clear {
-  right: 60px;
-}
-
-/* Кастомная иконка в левом слоте */
-.icon {
-  position: absolute;
-  top: 50%;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  transform: translateY(-50%);
-}
-
-[data-size='small'] .icon {
-  left: 6px;
-}
-
-[data-size='medium'] .icon {
-  left: 8px;
-}
-
-[data-size='large'] .icon,
-[data-size='extraLarge'] .icon {
-  left: 4px;
-  width: 24px;
-  height: 24px;
-}
-
-.icon > svg {
-  width: 100%;
-  height: 100%;
-  fill: var(--theme-icon-primary);
-}
-
-/* Кнопка очистки выбранного */
-.clear {
-  position: absolute;
-  top: 50%;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  cursor: pointer;
-  border-radius: 50%;
-  transform: translateY(-50%);
-}
-
-.clear:hover {
-  background-color: var(--theme-icon-hover);
-}
-
-.clear > svg {
-  width: 16px;
-  height: 16px;
-  fill: var(--theme-icon-primary);
-}
-
-[data-size='small'] .clear {
-  right: 26px;
-}
-
-[data-size='medium'] .clear {
-  right: 32px;
-}
-
-[data-size='large'] .clear,
-[data-size='extraLarge'] .clear {
-  right: 32px;
-  width: 24px;
-  height: 24px;
-}
-
-[data-size='large'] .clear > svg,
-[data-size='extraLarge'] .clear > svg {
-  width: 20px;
-  height: 20px;
-}
-
-.popover-target {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.popover-content {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 8px;
-}
-
-.checklist-wrapper {
-  display: flex;
-  flex-direction: column;
-  max-height: 300px;
-  overflow: hidden;
-}
-
-.checklist-root {
-  max-height: 284px;
-}
-
-.checklist-scrolled {
-  max-height: 100%;
-}
-
-.search-input-root {
-  padding: 0 8px;
-  margin-top: 8px;
-}

package/src/components/common/MultiSelect/multiSelect.stories.module.css

@@ -1,4 +0,0 @@
-.popover-content {
-  width: 380px;
-  height: 250px;
-}

package/src/components/common/MultiSelect/ui/SelectPopover/SelectPopover.tsx

@@ -1,69 +0,0 @@
-import classNames from 'classnames';
-import { useCallback, useMemo } from 'react';
-
-import { Checklist, Item as ChecklistItem, SelectedItems } from '@components/common/Checklist';
-import { FieldSize } from '@components/common/FieldShell';
-import { PropsObject, UiProps } from '@models/UiProps';
-
-import { Item } from '../../models/Item';
-
-interface Props {
-  items: Item[];
-  componentSize?: FieldSize;
-  selected: string[] | null;
-  onSelectedChange: (items: Item[]) => void;
-  enableSearch?: boolean;
-  disabled?: boolean;
-}
-
-export function SelectPopover(props: UiProps<Props>) {
-  const { items, selected, onSelectedChange, classes, enableSearch = false, disabled } = props;
-
-  const checklistItems = useMemo<ChecklistItem[]>(
-    () =>
-      items.map((item) => ({
-        name: item.name,
-        value: item.value,
-      })),
-    [items],
-  );
-
-  const selectedItems = useMemo<SelectedItems>(() => {
-    const result: SelectedItems = {};
-    selected?.forEach((value) => {
-      result[value] = true;
-    });
-    return result;
-  }, [selected]);
-
-  const handleActionWithSelected = useCallback(
-    (newSelected: SelectedItems) => {
-      const values = Object.entries(newSelected).reduce<Item[]>((acc, [value, isSelected]) => {
-        if (isSelected) {
-          const item = items.find((i) => i.value === value);
-          if (item) {
-            acc.push(item);
-          }
-        }
-        return acc;
-      }, []);
-      onSelectedChange(values);
-    },
-    [onSelectedChange, items],
-  );
-
-  const { checklistWrapper, ...checklistClasses } = (classes as PropsObject | undefined) ?? {};
-
-  return (
-    <div className={classNames(checklistWrapper)}>
-      <Checklist
-        disableSearch={!enableSearch}
-        isDisabled={disabled}
-        items={checklistItems}
-        selected={selectedItems}
-        actionWithSelected={handleActionWithSelected}
-        classes={checklistClasses as PropsObject | undefined}
-      />
-    </div>
-  );
-}

package/src/components/common/MultiSelect/utils/getTitle.ts

@@ -1,19 +0,0 @@
-import { Item } from '../models/Item';
-import { TitleVariant } from '../models/TitleVariant';
-
-export const getTitle = (titleType: TitleVariant, activeItems: Item[], t: (v: string) => string) => {
-  switch (titleType) {
-    case 'allValue': {
-      return activeItems.map((i) => i.name).join(', ');
-    }
-    case 'numberValue': {
-      return `${t('Выбрано элементов')}: ` + activeItems.length;
-    }
-    case 'firstValue': {
-      return `${activeItems[0]?.name} ${activeItems.length > 1 ? ' +' + (activeItems.length - 1) : ''}`;
-    }
-    case 'chips': {
-      return '';
-    }
-  }
-};

package/src/components/common/RadioButton/RadioButton.stories.tsx

@@ -1,134 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
-
-import { RadioButton } from './RadioButton';
-
-const meta: Meta<typeof RadioButton> = {
-  title: 'Components/RadioButton',
-  component: RadioButton,
-  tags: ['autodocs'],
-  argTypes: {
-    componentSize: {
-      control: 'select',
-      options: ['medium', 'large'],
-    },
-    checked: {
-      control: 'boolean',
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    canUncheck: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof RadioButton>;
-
-export const Default: Story = {
-  args: {
-    label: 'Радиокнопка',
-    name: 'default',
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    label: 'Выбранная радиокнопка',
-    name: 'checked',
-    checked: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Отключенная радиокнопка',
-    name: 'disabled',
-    checked: true,
-    disabled: true,
-  },
-};
-
-export const Large: Story = {
-  args: {
-    label: 'Большая радиокнопка',
-    name: 'large',
-    componentSize: 'large',
-  },
-};
-
-const RadioGroupDemo = () => {
-  const [value, setValue] = useState('option1');
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-      <RadioButton
-        label="Вариант 1"
-        name="group"
-        value="option1"
-        checked={value === 'option1'}
-        onChange={() => setValue('option1')}
-      />
-      <RadioButton
-        label="Вариант 2"
-        name="group"
-        value="option2"
-        checked={value === 'option2'}
-        onChange={() => setValue('option2')}
-      />
-      <RadioButton
-        label="Вариант 3"
-        name="group"
-        value="option3"
-        checked={value === 'option3'}
-        onChange={() => setValue('option3')}
-      />
-    </div>
-  );
-};
-
-export const Group: Story = {
-  render: () => <RadioGroupDemo />,
-};
-
-const UncheckableGroupDemo = () => {
-  const [value, setValue] = useState<string | null>('option1');
-
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
-      <RadioButton
-        label="Вариант 1"
-        name="uncheck-group"
-        value="option1"
-        checked={value === 'option1'}
-        canUncheck
-        onChange={() => setValue('option1')}
-        onUncheck={() => setValue(null)}
-      />
-      <RadioButton
-        label="Вариант 2"
-        name="uncheck-group"
-        value="option2"
-        checked={value === 'option2'}
-        canUncheck
-        onChange={() => setValue('option2')}
-        onUncheck={() => setValue(null)}
-      />
-      <RadioButton
-        label="Вариант 3"
-        name="uncheck-group"
-        value="option3"
-        checked={value === 'option3'}
-        canUncheck
-        onChange={() => setValue('option3')}
-        onUncheck={() => setValue(null)}
-      />
-    </div>
-  );
-};
-
-export const GroupWithUncheck: Story = {
-  render: () => <UncheckableGroupDemo />,
-};