nntc-ui 0.2.4 → 0.2.6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+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, []);
+};