nntc-ui 0.2.6 → 0.2.8

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

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { ButtonsGroup } from './ButtonsGroup';
-import { Button } from '../Button';
-
-const meta: Meta<typeof ButtonsGroup> = {
-  title: 'Components/ButtonsGroup',
-  component: ButtonsGroup,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof ButtonsGroup>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <Button>Кнопка 1</Button>
-        <Button>Кнопка 2</Button>
-        <Button>Кнопка 3</Button>
-      </>
-    ),
-  },
-};
-
-export const WithCustomClass: Story = {
-  args: {
-    children: (
-      <>
-        <Button>Кнопка 1</Button>
-        <Button>Кнопка 2</Button>
-        <Button>Кнопка 3</Button>
-      </>
-    ),
-    classes: {
-      root: 'custom-buttons-group',
-    },
-  },
-};
-
-export const WithDifferentButtonTypes: Story = {
-  args: {
-    children: (
-      <>
-        <Button variant="filled">Заполненная</Button>
-        <Button variant="outlined">Контурная</Button>
-        <Button variant="text">Текстовая</Button>
-      </>
-    ),
-  },
-};

package/src/components/common/ButtonsGroup/ButtonsGroup.tsx

@@ -1,25 +0,0 @@
-import classNames from 'classnames';
-import { HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
-
-import { UiProps } from '@models/UiProps';
-
-import * as styles from './buttonsGroup.module.css';
-
-interface Props {
-  fillEvenly?: boolean;
-}
-
-export const ButtonsGroup = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<UiProps<Props>> & HTMLAttributes<HTMLDivElement>
->(function ButtonsGroup({ children, fillEvenly, classes, className, ...rest }, ref) {
-  return (
-    <div
-      ref={ref}
-      className={classNames(styles.root, fillEvenly && styles.fillEvenly, className, classes?.root)}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-});

package/src/components/common/ButtonsGroup/buttonsGroup.module.css

@@ -1,24 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-}
-
-.fill-evenly > * {
-  flex-grow: 1;
-  width: 0;
-}
-
-.root > *:nth-child(n + 1) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.root > *:nth-child(n + 2) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.root > *:last-child {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}

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

@@ -1,48 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Checkbox } from './Checkbox';
-
-const meta: Meta<typeof Checkbox> = {
-  title: 'Components/Checkbox',
-  component: Checkbox,
-  tags: ['autodocs'],
-  argTypes: {
-    componentSize: {
-      control: 'select',
-      options: ['medium', 'large'],
-    },
-    checked: {
-      control: 'boolean',
-    },
-    disabled: {
-      control: 'boolean',
-    },
-    several: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Checkbox>;
-
-export const Default: Story = {
-  args: {
-    label: 'Чекбокс',
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    label: 'Выбранный чекбокс',
-    checked: true,
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Отключенный чекбокс',
-    checked: true,
-    disabled: true,
-  },
-};

package/src/components/common/Checkbox/Checkbox.tsx

@@ -1,82 +0,0 @@
-import classnames from 'classnames';
-import { DetailedHTMLProps, InputHTMLAttributes, forwardRef, useEffect, useRef } from 'react';
-import { mergeRefs } from 'react-merge-refs';
-
-import { Typography } from '@components/view/Typography';
-import { useCompatId } from '@hooks/useCompatId';
-import { CheckboxDeselectedIcon } from '@icons/CheckboxDeselectedIcon';
-import { CheckboxIcon } from '@icons/CheckboxIcon';
-import { CheckboxSeveralIcon } from '@icons/CheckboxSeveralIcon';
-import { CheckboxSize } from '@models/CheckboxSize';
-import { UiProps } from '@models/UiProps';
-
-import * as styles from './checkbox.module.css';
-
-interface Props {
-  label?: string;
-  componentSize?: CheckboxSize;
-  several?: boolean;
-}
-
-export const Checkbox = forwardRef<
-  HTMLInputElement,
-  UiProps<Props> & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
->(function Checkbox(props, ref) {
-  const { label, several, componentSize = 'medium', classes, id, ...inputProps } = props;
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const generatedId = useCompatId();
-  const inputId = id ?? generatedId;
-
-  useEffect(() => {
-    const el = inputRef.current;
-    if (!el) return;
-
-    const mouseupListener = () => el.classList.remove(styles.pressed);
-    const mousedownListener = () => el.classList.add(styles.pressed);
-
-    el.addEventListener('mousedown', mousedownListener);
-    el.addEventListener('mouseup', mouseupListener);
-
-    return () => {
-      el.removeEventListener('mousedown', mousedownListener);
-      el.removeEventListener('mouseup', mouseupListener);
-    };
-  }, []);
-
-  const typographyVariant = componentSize === 'large' ? 'subtitle1' : 'subtitle2';
-
-  return (
-    <div className={classnames(styles.root, classes?.root)}>
-      <input
-        ref={mergeRefs([inputRef, ref])}
-        type="checkbox"
-        className={classnames(styles.input, classes?.input)}
-        id={inputId}
-        title={label}
-        {...inputProps}
-      />
-      <label htmlFor={inputId} className={classnames(styles.label, classes?.label)} title={label}>
-        {several ? (
-          <span className={classnames(styles.checkbox, styles.several, classes?.checkbox)}>
-            <CheckboxSeveralIcon />
-          </span>
-        ) : (
-          <>
-            <span className={classnames(styles.checkbox, styles.deselected, classes?.checkbox)}>
-              <CheckboxDeselectedIcon />
-            </span>
-            <span className={classnames(styles.checkbox, styles.selected, classes?.checkbox)}>
-              <CheckboxIcon />
-            </span>
-          </>
-        )}
-        {!!label && (
-          <Typography variant={typographyVariant} className={classnames(styles.labelText, classes?.labelText)}>
-            {label}
-          </Typography>
-        )}
-      </label>
-    </div>
-  );
-});

package/src/components/common/Checkbox/checkbox.module.css

@@ -1,112 +0,0 @@
-.root {
-  position: relative;
-  width: 100%;
-  max-width: 320px;
-  height: 24px;
-}
-
-.input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  width: 100%;
-  height: 24px;
-  margin: 0;
-  cursor: pointer;
-  opacity: 0;
-}
-
-.label {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: row;
-  gap: 0;
-  align-items: center;
-  width: 100%;
-  height: 24px;
-  padding-left: 24px;
-}
-
-.checkbox {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 2;
-  display: block;
-  width: 24px;
-  height: 24px;
-  opacity: 0;
-  transition: opacity 0.1s linear;
-}
-
-.checkbox > svg {
-  fill: var(--theme-selection-border);
-}
-
-.several {
-  opacity: 1;
-}
-
-.deselected {
-  opacity: 1;
-}
-
-.input:checked + .label > .deselected {
-  opacity: 0;
-}
-
-.input:checked + .label > .selected {
-  opacity: 1;
-}
-
-.checkbox.selected > svg {
-  fill: var(--theme-focus);
-}
-
-.label-text {
-  display: block;
-  margin-left: 12px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.input + .label > .checkbox::before {
-  position: absolute;
-  top: -8px;
-  left: -8px;
-  z-index: 0;
-  display: block;
-  width: 40px;
-  height: 40px;
-  content: '';
-  background-color: transparent;
-  border-radius: 50%;
-  transition: background-color 0.1s linear;
-}
-
-.input:hover + .label > .checkbox::before {
-  background-color: var(--theme-selection-hover);
-}
-
-.input:focus + .label > .checkbox::before {
-  background-color: var(--theme-selection-focused);
-}
-
-.input.pressed + .label > .checkbox::before {
-  background-color: var(--theme-selection-pressed);
-}
-
-.input:hover + .label > .checkbox.selected::before {
-  background-color: var(--theme-selection-selected-hover);
-}
-
-.input:focus + .label > .checkbox.selected::before {
-  background-color: var(--theme-selection-selected-focused);
-}
-
-.input.pressed + .label > .checkbox.selected::before {
-  background-color: var(--theme-selection-selected-pressed);
-}

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

@@ -1,138 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useEffect, useState } from 'react';
-
-import { PropsObject } from '@models/UiProps';
-
-import { Checklist } from './Checklist';
-import { Item } from './models/Item';
-import { SelectedItems } from './models/SelectedItems';
-
-interface Props {
-  items: Item[];
-  selected: SelectedItems;
-  disableSearch?: boolean;
-  isDisabled?: boolean;
-  actionWithSelected: (value: SelectedItems) => void;
-  onChangeItem?: (item: Item) => void;
-  classes?: {
-    root?: string;
-    searchInput?: PropsObject;
-    actionWrap?: string;
-    button?: string;
-    checkbox?: PropsObject;
-    typography?: string;
-  };
-}
-
-const meta: Meta<typeof Checklist> = {
-  title: 'Components/Checklist',
-  component: Checklist,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    items: {
-      control: 'object',
-      description: 'Список элементов для выбора',
-    },
-    selected: {
-      control: 'object',
-      description: 'Объект с выбранными элементами',
-    },
-    disableSearch: {
-      control: 'boolean',
-      description: 'Отключить поле поиска',
-    },
-    isDisabled: {
-      control: 'boolean',
-      description: 'Отключить компонент',
-    },
-    actionWithSelected: {
-      action: 'selected',
-      description: 'Обработчик выбора элементов',
-    },
-    onChangeItem: {
-      action: 'changed',
-      description: 'Обработчик изменения отдельного элемента',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Checklist>;
-
-const defaultItems: Item[] = [
-  { name: 'Элемент 1', value: '1' },
-  { name: 'Элемент 2', value: '2' },
-  { name: 'Элемент 3', value: '3' },
-  { name: 'Элемент 4', value: '4' },
-  { name: 'Элемент 5', value: '5' },
-];
-
-const ChecklistWrapper = (args: Props) => {
-  const [selected, setSelected] = useState<SelectedItems>(args.selected || {});
-
-  useEffect(() => {
-    if (args.selected) {
-      setSelected(args.selected);
-    }
-  }, [args.selected]);
-
-  const handleSelect = (value: SelectedItems) => {
-    setSelected(value);
-    args.actionWithSelected?.(value);
-  };
-
-  return (
-    <div style={{ width: '300px', border: '1px solid #ccc', padding: '16px' }}>
-      <Checklist {...args} selected={selected} actionWithSelected={handleSelect} />
-    </div>
-  );
-};
-
-export const Default: Story = {
-  render: (args) => <ChecklistWrapper {...args} />,
-  args: {
-    items: defaultItems,
-    disableSearch: false,
-    isDisabled: false,
-  },
-};
-
-export const WithPreSelected: Story = {
-  render: (args) => <ChecklistWrapper {...args} />,
-  args: {
-    items: defaultItems,
-    selected: { '1': true, '3': true },
-    disableSearch: false,
-    isDisabled: false,
-  },
-};
-
-export const WithoutSearch: Story = {
-  render: (args) => <ChecklistWrapper {...args} />,
-  args: {
-    items: defaultItems,
-    disableSearch: true,
-    isDisabled: false,
-  },
-};
-
-export const Disabled: Story = {
-  render: (args) => <ChecklistWrapper {...args} />,
-  args: {
-    items: defaultItems,
-    isDisabled: true,
-  },
-};
-
-export const LongList: Story = {
-  render: (args) => <ChecklistWrapper {...args} />,
-  args: {
-    items: Array.from({ length: 20 }, (_, i) => ({
-      name: `Элемент ${i + 1}`,
-      value: `${i + 1}`,
-    })),
-  },
-};

package/src/components/common/Checklist/Checklist.tsx

@@ -1,159 +0,0 @@
-import classnames from 'classnames';
-import { ChangeEvent, HTMLAttributes, forwardRef, useCallback, useMemo, useState } from 'react';
-
-import { Typography } from '@components/view/Typography';
-import { useTranslation } from '@hooks/useTranslation';
-import { SearchIcon } from '@icons/SearchIcon';
-import { PropsObject, UiProps } from '@models/UiProps';
-
-import * as styles from './checklist.module.css';
-import { Button } from '../Button';
-import { Checkbox } from '../Checkbox';
-import { Input } from '../Input';
-import { Item } from './models/Item';
-import { SelectedItems } from './models/SelectedItems';
-import { filterItems } from './utils/filterItems';
-
-interface Props {
-  items: Item[];
-  selected: SelectedItems;
-  disableSearch?: boolean;
-  isDisabled?: boolean;
-  actionWithSelected: (value: SelectedItems) => void;
-  onChangeItem?: (item: Item) => void;
-}
-
-export const Checklist = forwardRef<HTMLDivElement, UiProps<Props> & HTMLAttributes<HTMLDivElement>>(function Checklist(
-  { items, selected, disableSearch, isDisabled, actionWithSelected, onChangeItem, classes, className, ...rest },
-  ref,
-) {
-  const { t } = useTranslation();
-
-  const [filterSubstring, setFilterSubstring] = useState('');
-
-  // Мемоизация отфильтрованных элементов
-  const filteredItems = useMemo(() => {
-    return filterItems(items, filterSubstring, selected);
-  }, [items, filterSubstring, selected]);
-
-  // Мемоизация списка выбранных элементов
-  const selectedItemsList = useMemo(() => {
-    return items.filter((item) => !!selected[item.value]);
-  }, [items, selected]);
-
-  const handleClick = useCallback(
-    (item: Item) => {
-      const value = !selected[item.value];
-
-      if (onChangeItem) {
-        onChangeItem(item);
-      }
-
-      const newSelected = { ...selected, [item.value]: value };
-      actionWithSelected(newSelected);
-    },
-    [selected, onChangeItem, actionWithSelected],
-  );
-
-  const onSelectAll = useCallback(() => {
-    const newSelected = { ...selected };
-    filteredItems.forEach((item) => {
-      newSelected[item.value] = true;
-    });
-    actionWithSelected(newSelected);
-  }, [selected, filteredItems, actionWithSelected]);
-
-  const onUnSelectAll = useCallback(() => {
-    // Очищаем только те элементы, которые были выбраны
-    const newSelected = { ...selected };
-    selectedItemsList.forEach((item) => {
-      delete newSelected[item.value];
-    });
-    actionWithSelected(newSelected);
-  }, [selected, selectedItemsList, actionWithSelected]);
-
-  const handleFilterChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setFilterSubstring(e.target.value);
-  }, []);
-
-  const handleCheckboxChange = useCallback(
-    (item: Item) => (e: ChangeEvent<HTMLInputElement>) => {
-      e.stopPropagation();
-      handleClick(item);
-    },
-    [handleClick],
-  );
-
-  return (
-    <div ref={ref} className={classnames(styles.root, className, classes?.root)} {...rest}>
-      {' '}
-      {!disableSearch && (
-        <Input
-          variant="outlined"
-          startIcon={<SearchIcon />}
-          placeholder={t('Поиск...')}
-          disabled={isDisabled}
-          value={filterSubstring}
-          fullWidth
-          classes={classes?.searchInput as PropsObject | undefined}
-          onChange={handleFilterChange}
-        />
-      )}
-      <div className={classnames(styles.scrolled, 'styledScroll', classes?.scrolled)}>
-        {selectedItemsList.length > 0 && (
-          <>
-            <div className={classnames(styles.actionWrap, classes?.actionWrap)}>
-              <Typography className={classnames(classes?.typography)}>{t('Выбранное')}</Typography>
-              <Button
-                variant="text"
-                componentSize="small"
-                compact
-                disabled={isDisabled}
-                onClick={onUnSelectAll}
-                className={classnames(classes?.button)}
-              >
-                {t('Отменить')}
-              </Button>
-            </div>
-            <div>
-              {selectedItemsList.map((item) => (
-                <Checkbox
-                  key={`selected-${item.value}`}
-                  label={item.name}
-                  checked={!!selected[item.value]}
-                  onChange={handleCheckboxChange(item)}
-                  disabled={isDisabled}
-                  classes={classes?.checkbox as PropsObject | undefined}
-                />
-              ))}
-            </div>
-          </>
-        )}
-        {!isDisabled && !!filteredItems.length && (
-          <Button
-            variant="text"
-            componentSize="small"
-            compact
-            disabled={isDisabled}
-            onClick={onSelectAll}
-            className={classnames(classes?.button)}
-          >
-            {t('Выбрать все')}
-          </Button>
-        )}
-        <div>
-          {filteredItems.map((item) => (
-            <Checkbox
-              key={`filtered-${item.value}`}
-              label={item.name}
-              checked={!!selected[item.value]}
-              onChange={handleCheckboxChange(item)}
-              disabled={isDisabled}
-              classes={classes?.checkbox as PropsObject | undefined}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-});

package/src/components/common/Checklist/checklist.module.css

@@ -1,23 +0,0 @@
-.root {
-  display: flex;
-  flex: 1 1 0;
-  flex-direction: column;
-  gap: 16px;
-  height: 100%;
-}
-
-.scrolled {
-  flex: 1 1 auto;
-  width: 100%;
-  min-height: 0;
-  max-height: inherit;
-  padding-bottom: 8px;
-}
-
-.action-wrap {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}

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

@@ -1,4 +0,0 @@
-export interface Item {
-  name: string;
-  value: string;
-}

package/src/components/common/Checklist/models/SelectedItems.ts

@@ -1,3 +0,0 @@
-export interface SelectedItems {
-  [keys: string]: boolean;
-}

package/src/components/common/Checklist/utils/filterItems.ts

@@ -1,18 +0,0 @@
-import { Item } from '../models/Item';
-import { SelectedItems } from '../models/SelectedItems';
-
-export const filterItems = (items: Item[], filterText: string, selectedItems: SelectedItems) => {
-  if (!filterText) {
-    return items.filter((item) => !selectedItems[item.value]);
-  }
-
-  const reduceCallback = (filteredItems: Item[], item: Item) => {
-    if (item.name.toUpperCase().includes(filterText.toUpperCase()) && !selectedItems[item.value]) {
-      filteredItems.push({ ...item });
-    }
-
-    return filteredItems;
-  };
-
-  return items.reduce(reduceCallback, []);
-};