nntc-ui 0.2.6 → 0.2.8

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

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

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

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

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

@@ -1,344 +0,0 @@
-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: 'Подробное описание ошибки',
-    },
-  },
-};