nntc-ui 0.2.4 → 0.2.6

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

@@ -0,0 +1,260 @@
+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/{components/common/MultiSelect/index.d.ts → src/components/common/MultiSelect/index.ts}

@@ -1,4 +1,4 @@
 export { MultiSelect } from './MultiSelect';
+
 export type { Item } from './models/Item';
 export type { TitleVariant } from './models/TitleVariant';
-//# sourceMappingURL=index.d.ts.map

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

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

package/{components/common/MultiSelect/models/TitleVariant.d.ts → src/components/common/MultiSelect/models/TitleVariant.ts}

@@ -1,2 +1 @@
 export type TitleVariant = 'allValue' | 'numberValue' | 'firstValue' | 'chips';
-//# sourceMappingURL=TitleVariant.d.ts.map

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

@@ -0,0 +1,198 @@
+/* Специфика 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

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

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

@@ -0,0 +1,69 @@
+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/{components/common/MultiSelect/ui/SelectPopover/index.d.ts → src/components/common/MultiSelect/ui/SelectPopover/index.ts}

@@ -1,2 +1 @@
 export { SelectPopover } from './SelectPopover';
-//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,134 @@
+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 />,
+};