nntc-ui 0.2.4 → 0.2.6

package/src/components/common/Input/Input.tsx

@@ -0,0 +1,140 @@
+import classnames from 'classnames';
+import { ChangeEvent, InputHTMLAttributes, KeyboardEvent, ReactNode, forwardRef, useRef, useState } from 'react';
+import { mergeRefs } from 'react-merge-refs';
+
+import { FieldError, FieldErrorIcon, FieldShell, FieldSize, FieldVariant } from '@components/common/FieldShell';
+import * as fieldStyles from '@components/common/FieldShell/fieldShell.module.css';
+import { useCompatId } from '@hooks/useCompatId';
+import { AttachIcon } from '@icons/AttachIcon';
+import { UiProps } from '@models/UiProps';
+
+import * as styles from './input.module.css';
+
+export type { FieldError };
+
+interface Props {
+  variant?: FieldVariant;
+  componentSize?: FieldSize;
+  fullWidth?: boolean;
+  label?: string;
+  error?: FieldError;
+  startIcon?: ReactNode;
+  endIcon?: ReactNode;
+}
+
+export const Input = forwardRef<HTMLInputElement, UiProps<Props> & InputHTMLAttributes<HTMLInputElement>>(
+  (
+    {
+      variant = 'outlined',
+      componentSize = 'medium',
+      fullWidth,
+      label,
+      error,
+      startIcon,
+      endIcon,
+      classes,
+      placeholder,
+      id,
+      type,
+      onChange,
+      ...inputProps
+    },
+    ref,
+  ) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [fileName, setFileName] = useState('');
+
+    const reactId = useCompatId();
+    const inputId = id ?? reactId;
+    const isFile = type === 'file';
+    const showErrorIcon = !!error && !isFile && !label;
+    const showEndIcon = !isFile && !!endIcon;
+
+    const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      setFileName(file?.name ?? '');
+      onChange?.(e);
+    };
+
+    const handleFileKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        inputRef.current?.click();
+      }
+    };
+
+    const iconClickHandler = () => {
+      inputRef.current?.focus();
+    };
+
+    return (
+      <FieldShell
+        variant={variant}
+        componentSize={componentSize}
+        fullWidth={fullWidth}
+        label={label}
+        error={error}
+        inputId={inputId}
+        hasStartIcon={!isFile && !!startIcon}
+        hasEndIcon={showEndIcon || showErrorIcon}
+        hasDualEndIcon={showEndIcon && showErrorIcon}
+        classes={classes}
+      >
+        {isFile ? (
+          <>
+            <input
+              ref={mergeRefs([inputRef, ref])}
+              id={inputId}
+              className={classnames(styles.fileInput, classes?.fileInput)}
+              type="file"
+              onChange={handleFileChange}
+              {...inputProps}
+            />
+            <div
+              role="button"
+              tabIndex={0}
+              className={classnames(fieldStyles.input, styles.fileDisplay, classes?.input)}
+              onClick={() => inputRef.current?.click()}
+              onKeyDown={handleFileKeyDown}
+            >
+              <span className={classnames(styles.fileName, !fileName && styles.placeholder)}>
+                {fileName || placeholder}
+              </span>
+              <AttachIcon size={20} className={styles.attachIcon} />
+            </div>
+          </>
+        ) : (
+          <input
+            ref={mergeRefs([inputRef, ref])}
+            id={inputId}
+            className={classnames(fieldStyles.input, styles.input, classes?.input)}
+            placeholder={placeholder}
+            type={type}
+            autoComplete="off"
+            onChange={onChange}
+            {...inputProps}
+          />
+        )}
+        {!!startIcon && !isFile && (
+          <span
+            onClick={iconClickHandler}
+            className={classnames(fieldStyles.startIcon, styles.fieldIcon, classes?.startIcon)}
+          >
+            {startIcon}
+          </span>
+        )}
+        {showEndIcon && (
+          <span
+            onClick={iconClickHandler}
+            className={classnames(fieldStyles.endIcon, styles.fieldIcon, classes?.endIcon)}
+          >
+            {endIcon}
+          </span>
+        )}
+        {showErrorIcon && error && (
+          <FieldErrorIcon error={error} componentSize={componentSize} className={classes?.errorIcon} />
+        )}
+      </FieldShell>
+    );
+  },
+);

package/src/components/common/Input/index.ts

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

package/src/components/common/Input/input.module.css

@@ -0,0 +1,49 @@
+.input[type='number'] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.input[type='number']::-webkit-inner-spin-button,
+.input[type='number']::-webkit-outer-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+
+.field-icon {
+  cursor: text;
+}
+
+.file-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.file-display {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.file-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--theme-text-primary);
+  white-space: nowrap;
+}
+
+.file-name.placeholder {
+  color: var(--theme-text-inactive);
+}
+
+.file-display > .attach-icon {
+  flex-shrink: 0;
+  margin-left: 8px;
+  color: var(--theme-text-secondary);
+}

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

@@ -0,0 +1,344 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
+
+import { UiProps } from '@models/UiProps';
+
+import { Item } from './models/Item';
+import { TitleVariant } from './models/TitleVariant';
+import { MultiSelect } from './MultiSelect';
+import * as styles from './multiSelect.stories.module.css';
+
+type Props = UiProps<{
+  variant?: 'filled' | 'filledBlack' | 'outlined';
+  componentSize?: 'small' | 'medium' | 'large' | 'extraLarge';
+  icon?: React.ReactNode;
+  fullWidth?: boolean;
+  label?: string;
+  placeholder?: string;
+  items: Item[];
+  onValueChange?: (newItem: Item[] | null) => void;
+  selected: string[] | null;
+  titleType?: TitleVariant;
+  showSelectedCount?: boolean;
+  enableSearch?: boolean;
+}> &
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+
+const meta: Meta<typeof MultiSelect> = {
+  title: 'Components/MultiSelect',
+  component: MultiSelect,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['filled', 'filledBlack', 'outlined'],
+      description: 'Вариант отображения компонента',
+    },
+    componentSize: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extraLarge'],
+      description: 'Размер компонента',
+    },
+    fullWidth: {
+      control: 'boolean',
+      description: 'Растянуть на всю ширину',
+    },
+    label: {
+      control: 'text',
+      description: 'Текст метки',
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Текст плейсхолдера',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Отключить компонент',
+    },
+    titleType: {
+      control: 'select',
+      options: ['allValue', 'numberValue', 'firstValue', 'chips'],
+      description: 'Тип отображения выбранных значений',
+    },
+    showSelectedCount: {
+      control: 'boolean',
+      description: 'Показывать число выбранных в скобках рядом с лейблом',
+    },
+    enableSearch: {
+      control: 'boolean',
+      description: 'Включить поиск в выпадающем списке',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MultiSelect>;
+
+const MultiSelectWrapper = (args: Props) => {
+  const [selectedItems, setSelectedItems] = useState<string[] | null>(args.selected);
+
+  const handleValueChange = (newItems: Item[] | null) => {
+    const newSelectedValues = newItems ? newItems.map((item) => item.value) : null;
+    setSelectedItems(newSelectedValues);
+  };
+
+  return (
+    <div style={{ width: '300px', height: '300px' }}>
+      <MultiSelect {...args} selected={selectedItems} onValueChange={handleValueChange} />
+    </div>
+  );
+};
+
+const defaultItems: Item[] = [
+  {
+    name: 'Первый пункт',
+    value: 'item1',
+  },
+  {
+    name: 'Второй пункт',
+    value: 'item2',
+  },
+  {
+    name: 'Третий пункт',
+    value: 'item3',
+  },
+  {
+    name: 'Четвертый пункт',
+    value: 'item4',
+  },
+];
+
+const searchItems: Item[] = [
+  {
+    name: 'Анна Иванова',
+    value: 'anna',
+    description: 'Менеджер по продажам',
+  },
+  {
+    name: 'Борис Петров',
+    value: 'boris',
+    description: 'Разработчик',
+  },
+  {
+    name: 'Виктория Сидорова',
+    value: 'victoria',
+    description: 'Дизайнер',
+  },
+  {
+    name: 'Григорий Козлов',
+    value: 'grigory',
+    description: 'Аналитик',
+  },
+  {
+    name: 'Дарья Морозова',
+    value: 'darya',
+    description: 'Тестировщик',
+  },
+  {
+    name: 'Елена Волкова',
+    value: 'elena',
+    description: 'Маркетолог',
+  },
+  {
+    name: 'Жанна Лебедева',
+    value: 'zhanna',
+    description: 'HR-менеджер',
+  },
+  {
+    name: 'Игорь Соколов',
+    value: 'igor',
+    description: 'DevOps инженер',
+  },
+];
+
+export const Default: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: null,
+  },
+};
+
+export const Outlined: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'outlined',
+    componentSize: 'medium',
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: null,
+  },
+};
+
+export const WithLabel: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    label: 'Выберите пункты',
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: null,
+  },
+};
+
+export const WithLabelAndSelectedCount: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    label: 'Выберите пункты',
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: ['item1', 'item2'],
+    showSelectedCount: true,
+  },
+};
+
+export const Small: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'small',
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: null,
+  },
+};
+
+export const Large: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'large',
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: null,
+  },
+};
+
+export const Chips: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'outlined',
+    componentSize: 'medium',
+    label: 'Выбранные пункты',
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: ['item1', 'item2', 'item3'],
+    titleType: 'chips',
+  },
+};
+
+export const Disabled: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    disabled: true,
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: null,
+  },
+};
+
+export const WithSelectedValues: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: ['item1', 'item3'],
+  },
+};
+
+export const WithNumberTitle: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: ['item1', 'item2', 'item3'],
+    titleType: 'numberValue',
+  },
+};
+
+export const WithSearch: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'filled',
+    componentSize: 'medium',
+    label: 'Выберите сотрудников',
+    placeholder: 'Начните вводить имя...',
+    items: searchItems,
+    selected: null,
+    enableSearch: true,
+    classes: { popoverContent: styles.popoverContent },
+  },
+};
+
+export const WithSearchAndSelected: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'outlined',
+    componentSize: 'medium',
+    label: 'Команда проекта',
+    placeholder: 'Начните вводить имя...',
+    items: searchItems,
+    selected: ['anna', 'boris', 'victoria'],
+    enableSearch: true,
+    titleType: 'numberValue',
+  },
+};
+
+export const FilledBlack: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'filledBlack',
+    componentSize: 'medium',
+    label: 'Filled black',
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: null,
+  },
+};
+
+export const WithError: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'filledBlack',
+    componentSize: 'medium',
+    label: 'Label',
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: ['item1'],
+    error: {
+      name: 'Error name',
+      description: 'Подробное описание ошибки',
+    },
+  },
+};
+
+export const WithErrorIcon: Story = {
+  render: (args) => <MultiSelectWrapper {...args} />,
+  args: {
+    variant: 'outlined',
+    componentSize: 'medium',
+    placeholder: 'Выберите значения',
+    items: defaultItems,
+    selected: ['item1', 'item2'],
+    error: {
+      name: 'Error name',
+      description: 'Подробное описание ошибки',
+    },
+  },
+};