open-index/open-npm huggingface dataset:
npm package: @n3/react-list-placeholder
Description: List placeholder component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-list-placeholder

Плейсхолдер пустого списка для приложений на базе `@n3/kit`.

```javascript
import ListPlaceholder, {
  ListPlaceholderWithoutFilters,
} from '@n3/react-list-placeholder';
```

- `ListPlaceholder` - используется в случае, когда применены фильтры
- `ListPlaceholderWithoutFilters` - используется в случае, когда ни один фильтр не применён

## Props

### ListPlaceholder

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| children |  | ReactNode | `'Не найдено ни одной записи'` | Заголовок |
| renderDescription |  | RenderDescription | `null` | Руководство к действиям<br>@param params - параметры |
| reload |  | () => void | `null` | Функиця перезагрузки списка, по умолчанию очищает параметры адресной строки |
npm package: @n3/react-loading-area
Description: Tag component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-loading-area

Индикация загрузки для определённой области для приложений на базе `@n3/kit`.

```javascript
import LoadingArea from '@n3/react-loading-area';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| loading |  | boolean | `true` | Состояние загрузки |
| children |  | ReactNode | `null` |  |
npm package: @n3/react-modal
Description: Modal dialog for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-modal

Модальное окно для приложений на базе `@n3/kit`.

```javascript
import Modal, {
  modalSizes,
} from '@n3/react-modal';

...

<Modal
  show={show}
  onHide={toggleShow}
>
  <Modal.Body>
    <Modal.Title>
      Заголовок модального окна
    </Modal.Title>

    <div>
      Контент модального окна
    </div>
  </Modal.Body>

  <Modal.Footer>
    Футер модального окна
  </Modal.Footer>
</Modal>
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| size |  | enum<br>- modalSizes.DEFAULT<br>- modalSizes.SMALL | `modalSizes.DEFAULT` | Размер модального окна |
| show | + | bool |  | Отображается ли модальное окно |
| hasCloseButton |  | bool | `true` | Отображается ли кнопка закрытия окна |
| onHide | + | func |  | Обработчик закрытия модального окна |
| isHideOnBackdropClick |  | bool | `true` | Закрывать ли окно при нажатии вне окна |
| children |  | node | `null` |  |
npm package: @n3/react-modal-select
Description: Input with select from modal for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-modal-select

Поле выбора из модального окна для приложений на базе `@n3/kit`.

```javascript
import ModalSelect from '@n3/react-modal-select';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| modalComponent | + | ComponentType<ModalSelectButtonModalProps> |  | Компонент модального окна<br>@prop {Function} onSelect - функция выбора значения<br>@prop {Function} onCancel - функция закрытия модального окна без изменения значения |
| modalProps |  | { [key: string]: any; } | "{}" | Дополнительные props компонента модального окна |
| disabled |  | boolean | false | Выключено ли поле |
| hasError |  | boolean | false | Есть ли у поля ошибка |
| hasWarning |  | boolean | false | Есть ли у поля предупреждение |
| text | + | string |  | Текст, выводящийся в поле |
| placeholder |  | string | "" |  |
| onChange |  | (nextValue: any) => void | "(): void => {}" | Обработчик изменения значения поля |
npm package: @n3/react-modal-select-button
Description: Modal dialog for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-modal-select-button

Кнопка, открывающая модальное окно для выбора для приложений на базе `@n3/kit`.

```javascript
import ModalSelectButton from '@n3/react-modal-select-button';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| className |  | string | "" |  |
| modalComponent | + | ComponentType<ModalSelectButtonModalProps> |  |  |
| modalProps |  | { [key: string]: any; } | "{}" |  |
| disabled |  | boolean | false |  |
| onSelect |  | (nextValue: any) => void | "(): void => {}" |  |
npm package: @n3/react-page-size-select
Description: Page size select component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-page-size-select

Компонент выбора количества элементов на странице для приложений на базе `@n3/kit`.

```javascript
import PageSizeSelect from '@n3/react-page-size-select';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| start | + | number |  | Порядковый номер первого элемента |
| end | + | number |  | Порядковый номер последнего элемента |
| count | + | number |  | Общее количество элементов |
| value | + | number |  | Выбранное значение |
| options |  | number[] | `[20, 40, 100]` | Список возможных значений |
| onChange | + | (nextValue: number) => void |  | Обработчик изменения значения<br>@param nextValue - новое значение |
| toggleButtonId |  | string | `''` | id кнопки открытия/закрытия меню |
| wrapperId |  | string | `''` | id корневого элемента |
npm package: @n3/react-page-title
Description: Page title component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-page-title

Заголовок страницы для приложений на базе `@n3/kit`.

```javascript
import PageTitle from '@n3/react-page-title';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| pageType |  | enum<br>- 'list'<br>- 'form'<br>- 'parent' | `'list'` | Тип страницы |
| actionsBlock |  | ReactNode | `null` | Блок действий (кнопки и т.п.) |
| status |  | ReactNode | `null` | Статус |
| statusColor |  | TagColor | `'gray` | Цвет тэга статуса |
| children |  | node | `null` | Заголовок страницы |
npm package: @n3/react-paginator
Description: Paginator components for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-paginator

Компонент пагинатора для приложений на базе `@n3/kit`.

```javascript
import Paginator from '@n3/react-paginator';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| page | + | number |  | Текущая страница пагинатора, начиная с 1 |
| pageCount | + | number |  | Количество страниц |
| hrefBuilder |  | func | `null` | Функция генерации атрибута href компонента \<a\><br>@param {number} page - номер страницы, начиная с 1 |
| onPageChange | + | func |  | Обработчик изменения страницы<br>@param {number} page - номер страницы, начиная с 1 |
| wrapperId |  | string |  | id корневого dom-элемента |
npm package: @n3/react-radio
Description: Radio button component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-radio

Радиокнопка для приложений на базе `@n3/kit`.

```javascript
import Radio from '@n3/react-radio';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| value | + | ReactText |  | value html-элемента input, также передаётся в колбэке onChange |
| checked | + | boolean |  | выбрано |
| disabled |  | boolean | `false` | выключено |
| name |  | string | `""` | name html-элемента input |
| label |  | ReactNode | `null` | текст/контент, выводящийся рядом с радио |
| onChange |  | (value: ReactText) => void | `(): void => {}` | хэндлер изменения значения, вызывается с параметрами: (newChecked) |
npm package: @n3/react-radio-group
Description: Radio button group component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-radio-group

Группа радиокнопок для приложений на базе `@n3/kit`.

```javascript
import RadioGroup from '@n3/react-radio-group';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| inline |  | boolean | false | инлайновый вывод |
| name |  | string | "" | name каждого html-элемента input |
| value |  | ReactText | null | значение выбранной опции |
| disabled |  | boolean | false | выключена ли данная группа радио |
| options | + | Record<string, any>[] |  | список опций данной группы радио |
| valueKey |  | string | "value" | ключ, по которому хранятся значения в объектах options |
| labelKey |  | string | "label" | ключ, по которому хранятся заголовки в объектах options |
| onChange |  | (value: ReactText) => void | "(): void => {}" | хэндлер изменения значения |
npm package: @n3/react-remove-button
Description: Remove button component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-remove-button

Кнопка удаления для приложений на базе `@n3/kit`.

```javascript
import {
  RemoveButton,
} from '@n3/react-remove-button';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| color |  | enum<br>- buttonColors.DEFAULT<br>- buttonColors.PRIMARY<br>- buttonColors.TERTIARY<br>- buttonColors.DANGER | `undefined` | Цвет кнопки |
| size |  | enum<br>- buttonSizes.DEFAULT<br>- buttonSizes.SMALL | `undefined` | Размер кнопки |
| disabled |  | bool | `false` | Выключена ли кнопка |
| children | + | node |  |  |
| remove | + | func |  | Асинхронная функция удаления |
| onRemoveSuccess |  | func | `undefined` | Обработчик успешного удаления |
| approveTitle |  | node | `undefined` | Заголовок подтверждения |
| approveContent |  | node | `undefined` | Текст подтверждения |
| approveButtonText | + | string |  | Текст кнопки подтвеждения |
| approveButtonColor |  | enum<br>- buttonColors.DEFAULT<br>- buttonColors.PRIMARY<br>- buttonColors.TERTIARY<br>- buttonColors.DANGER | `buttonColors.DANGER` | Цвет кнопки подтверждения |
| cancelButtonText | + | string |  | Текст кнопки отмены |
| errorsPath |  | string | `'response.data.detail'` | Путь до объекта ошибкок в случае ошибки удаления |
| redirectTo |  | any | `undefined` | Адрес редиректа в случае успешного удаления |
| notification |  | object | `undefined` | Сообщение @n3/browser-messages в случае успешного удаления |

### Создание кастомной кнопки удаления

```typescript
import type {
  FC,
  ReactNode,
} from 'react';
import {
  useRemoveButton,
} from '@n3/react-remove-button';
import type {
  UseRemoveButtonParams,
} from '@n3/react-remove-button';

type CustomRemoveButtonProps = UseRemoveButtonParams & {
  children?: ReactNode;
};

const CustomRemoveButton: FC<CustomRemoveButtonProps> = (props) => {
  const {
    children,
    remove,
    onRemoveSuccess,
    approveTitle,
    approveContent,
    approveButtonText,
    approveButtonColor,
    cancelButtonText,
    errorsPath,
    redirectTo,
    notification,
  } = props;

  const {
    isRemoving,
    onClick,
  } = useRemoveButton({
    remove,
    onRemoveSuccess,
    approveTitle,
    approveContent,
    approveButtonText,
    approveButtonColor,
    cancelButtonText,
    errorsPath,
    redirectTo,
    notification,
  });

  return (
    <button
      type="button"
      disabled={isRemoving}
      onClick={onClick}
    >
      {children}
    </button>
  );
};
```
npm package: @n3/react-repeat
Description: Repeating blocks component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-repeat

Повторяющиеся блоки для приложений на базе `@n3/kit`.

```javascript
import Repeat from '@n3/react-repeat';

<Repeat
  title="Группа полей"
>
  <Repeat.Block
    index={0}
  >
    Блок №1
  </Repeat.Block>

  <Repeat.Block
    index={1}
  >
    Блок №2
  </Repeat.Block>

  <Repeat.Block
    index={2}
  >
    Блок №3
  </Repeat.Block>
</Repeat>
```

## Props

### Repeat

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| disabled |  | boolean | false | Выключена ли кнопка добавления |
| title |  | ReactNode | null | Заголовок |
| addButtonTitle |  | ReactNode | "Добавить ещё" | Текст кнопки добавления |
| handleAdd |  | () => void | null | Обработчик нажания на кнопку добавления, если не определён, кнопка добавления не отображается |

### Repeat.Block

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| disabled |  | boolean | false | Выключена ли кнопка удаления |
| title |  | ReactNode | null | Заголовок |
| index | + | number |  | Индекс в последовательности блоков |
| hasHorizontalPadding |  | boolean | true | Есть ли отступ от левой и правой границ до контента |
| handleRemove |  | (index: number) => void | null | Обработчик нажания на кнопку удаления, если не определён, кнопка удаления не отображается<br>@param index - индекс блока в массиве |
npm package: @n3/react-search-input
Description: Search input component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-search-input

Поле поиска для приложений на базе `@n3/kit`.

```javascript
import SearchInput from '@n3/react-search-input';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| component |  | InputComponent |  | Компонент корневого элемента инпута |
| disabled |  | boolean | false | Выключено ли поле<br>Выключено ли поле |
| hasError |  | boolean |  | Есть ли у поля ошибка |
| hasWarning |  | boolean |  | Есть ли у поля предупреждение |
| small |  | boolean |  | Маленькое ли поле |
| className |  | string |  | Дополнительный класс корневого компонента инпута |
| isOnlyBorderBottom |  | boolean |  | Отображение без рамки только с подчёркиванием снизу |
| buttons |  | RenderInputButton[] |  | Массив функций реднеда кнопок<br>@param props - все props инпута<br>@param index - индекс кнопки |
| value | + | string |  | Значение поля |
| onChange |  | (event: ChangeEvent<HTMLInputElement>) => void | "(): void => { }" | Обработчик изменения инпута<br>@param event - событие |
| onValueChange |  | (nextValue: string) => void | "(): void => { }" | Обработчик изменения значения поля (в т.ч. при нажатии на кнопку сброса)<br>@param newValue - новое значение поля |
| handleClear |  | () => void | "(): void => { }" | Обработчик нажатия на кнопку сброса |
| handleSearch |  | (searchValue: string) => void | "(): void => { }" | Обработчик нажатия на кнопку поиска<br>@param searchValue - текущее значение поля поиска |
npm package: @n3/react-section
Description: Section components for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-section

Секция для приложений на базе `@n3/kit`.

```javascript
import Section from '@n3/react-section';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| title |  | string | null | Заголовок секции |
| titleColsXs |  | CellValue | 3 | Количество колонок заголовка |
| contentColsXs |  | CellValue | 8 | Количество колонок контента |
| hint |  | ReactNode | null | Подсказка, выводящаяся у заголовка поля |
| isEdit |  | boolean | false | Используется ли внутри формы редактирования |
| children |  | ReactNode | null | Контент |
npm package: @n3/react-sort-indicator
Description: Sort indicator component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-sort-indicator

Индикатор сортировки для приложений на базе `@n3/kit`.

```javascript
import SortIndicator from '@n3/react-sort-indicator';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| iconUpClassName |  | string | "" | Дополнительный класс иконки "вверх" |
| iconDownClassName |  | string | "" | Дополнительный класс иконки "вниз" |
| isActive |  | boolean | false | Активна ли сортировка по выбранному параметру |
| asc |  | boolean | true | По возрастанию ли сортировка |
npm package: @n3/react-sort-switcher
Description: Sort switcher component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-sort-switcher

Переключатель сортировки для приложений на базе `@n3/kit`.

```javascript
import SortIndicator from '@n3/react-sort-switcher';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| activeParam |  | string | null | Параметр, по которому произведена сортировка |
| param | + | string |  | Текущий параметр для сортировки |
| asc | + | boolean |  | Сортировка по возрастанию |
| isDefaultSortAsc |  | boolean | true | Сортировка по умолчанию по возрастанию |
| setSorting | + | (paramName: string, asc: boolean) => void |  | Обработчик изменения параметра или порядка сортировки<br>@param paramName - параметр сортировки<br>@param asc - сортировка по возрастанию |
| children |  | ReactNode | null | Заголовок |
npm package: @n3/react-table
Description: Table components for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-table

Компоненты для создания таблиц для приложений на базе `@n3/kit`.

```javascript
import {
  Table,
  Th,
  Td,
} from '@n3/react-table';

...

<Table>
  <thead>
    <tr>
      <Th rowSpan={2}>#</Th>
      <Th colSpan={2}>Name of person</Th>
      <Th rowSpan={2}>Username</Th>
    </tr>

    <tr>
      <Th>First Name</Th>
      <Th>Last Name</Th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <Td>1</Td>
      <Td>Mark</Td>
      <Td>Otto</Td>
      <Td>@mdo</Td>
    </tr>

    <tr>
      <Td>2</Td>
      <Td>Jacob</Td>
      <Td>Thornton</Td>
      <Td>@fat</Td>
    </tr>

    <tr>
      <Td>3</Td>
      <Td colSpan="2">Larry the Bird</Td>
      <Td>@twitter</Td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <Td>#</Td>
      <Td>First Name</Td>
      <Td>Last Name</Td>
      <Td>Username</Td>
    </tr>
  </tfoot>
</Table>
```

## Props

### Table

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| lightenRow |  | number | `null` | Номер строки, для которой применена подсветка |

### Th/Td

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| className |  | string | `''` |  |
| isMinWidth |  | bool | `false` | Добавить width: 1px для рендера узких колонок (иконкий действий и т.п.) |
| isNowrap |  | bool | `false` | Добавить white-space: nowrap |
| hasWordBreak |  | bool | `false` | Добавить свойства для разбиения строк в случае переполнения |
| textAlign |  | enum<br>- 'left'<br>- 'right'<br>- 'center' | `'left'` |  |
| width |  | union<br>- string<br>- number | `null` |  |
npm package: @n3/react-table-actions
Description: Component of actions for row of table for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-table-actions

Компонент действий со строками таблицы для приложений на базе `@n3/kit`.

```javascript
import TableActions from '@n3/react-table-actions';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| actions | + | arrayOf [<br>  shape {<br>  - **component**<br>    elementType<br>  - **disabled**<br>    bool<br>  - **label**<br>    string<br>  - **onClick**<br>    func<br>  - **renderIcon**<br>    func<br>  }<br>] |  | Список действий |
npm package: @n3/react-tabs
Description: Tabs component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-tabs

Табы для приложений на базе `@n3/kit`.

```javascript
import Tabs from '@n3/react-tabs';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| tabs | + | arrayOf [<br>  shape {<br>  - id<br>    union<br>    - number<br>    - string<br>  - title<br>    node<br>  }<br>] |  | Массив табов для рендера |
| current |  | union<br>- number<br>- string | `null` | id выбранного таба |
| recountOnResize |  | bool | `false` | Пересчитывать ли состояние скрытий/показа табов при изменении размеров окна |
| renderTab |  | func | `defaultRenderTab` | Функция рендера таба<br>@param {Object} renderProps<br>@param {string} renderProps.className<br>@param {Function} renderProps.onClick<br>@param {ReactNode} renderProps.label - заголовок таба<br>@param {Object} renderProps.tab - объект таба |
| setCurrentTab |  | func | `Function.prototype` | Обработчик изменения текущего таба<br>@param {string|number} tabId - id выбранного таба |
| renderContent |  | func | `(contentNode) => contentNode` | Функция рендера табов для возможности создания обёртки |
npm package: @n3/react-tag
Description: Tag component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-tag

Тег для приложений на базе `@n3/kit`.

```javascript
import Tag from '@n3/react-tag';
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| color | + | TagColor |  | Цвет тега |
| component |  | TagComponent | `'span'` | Компонент тега |
| className |  | string | `''` | Дополнительный класс тега |
| small |  | boolean | `false` | Отображение в минималистичном виде (кружок и текст) |
npm package: @n3/react-tooltip
Description: Tooltip component for react applications based on @n3/kit
Author: Vadim Taits
Latest version: 0.2.0

# @n3/react-tooltip

Компонент для создания всплывающих подсказок для приложений на базе `@n3/kit`.

```javascript
import Tooltip from '@n3/react-tooltip';

...

<Tooltip
  tooltip="Подсказка"
>
  {({
    innerProps,
    ref,
  }) => (
    <span
      {...innerProps}
      ref={ref}
    >
      Наведите, чтобы увидеть подсказку
    </span>
  )}
</Tooltip>
```

## Props

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| tooltip | + | node |  | Контент тултипа |
| placement |  | string | `'bottom'` | Расположение popper-компонента |
| popperStyle |  | objectOf {<br>  any<br>} | `{}` | Дополнительные стили popper-компонента |
| popperProps |  | objectOf {<br>  any<br>} | `{}` | Дополнительные опции popper-компонента |
| children | + | func |  | Функция рендера тултипа<br>@param {Object} renderProps<br>@param {Object} renderProps.ref - ref dom-элемента, открывающего тултип<br>@param {Object} renderProps.innerProps - props, которые должны переданы dom-элементу, открывающему тултип<br>@param {boolean} renderProps.isOpen - открыт ли тултип |
npm package: @n30n/imageprocessingtoolkit
Description: by n30n from CPI
Author: n30n
Latest version: 1.0.0

# Image Processing Toolkit

## Overview

The Image Processing Toolkit is a JavaScript library for performing various image processing tasks. It provides simple and easy-to-use methods for resizing, cropping, rotating, and applying filters to images.

## Installation

To install the Image Processing Toolkit package, run the following command:

```bash
npm install image-processing-toolkit
```

## Usage

### Importing the library

```javascript
const ImageProcessingToolkit = require('image-processing-toolkit');
const imageToolkit = new ImageProcessingToolkit();
```

### Resizing an image

```javascript
await imageToolkit.resizeImage('input.jpg', 'output.jpg', 300, 200);
```

### Cropping an image

```javascript
await imageToolkit.cropImage('input.jpg', 'output.jpg', 100, 100, 200, 150);
```

### Rotating an image

```javascript
await imageToolkit.rotateImage('input.jpg', 'output.jpg', 90);
```

### Converting an image to grayscale

```javascript
await imageToolkit.grayscaleImage('input.jpg', 'output.jpg');
```

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @n370/rolltip
Description: Yet another tooltip react component
Author: Dylson Valente Neto
Latest version: 0.1.2

# Rolltip

> Yet another tooltip react component

## Get Started!

```bash
$ npm install @n370/rolltip
```

```jsx
// App.jsx

import React from 'react';
import { render } from 'react-dom';

import Rolltip from '@n370/rolltip';

const App = () => (
    <Rolltip spacing="10px" position="top">
        <div>This is your tooltip target!</div>
        <div>This is your tooltip content!</div>
    </Rolltip>
);

render(<App />, document.querySelector('[data-react-root]'));
```

## Props

### position {String}

> default: `'bottom'`

Control the positioning of your tooltip content.

**Possible values:**

-   `'top'`
-   `'right'`
-   `'bottom'`
-   `'left'`

### spacing {String}

> default: `0`

Control the distance between the tooltip content and the tooltip target.

**Possible values:**

All valid CSS number values.

---

Copyright 2020 Dylson Valente Neto

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
npm package: @n3bula/colors
Description: ### Colors convert util
Author: Moriarty47
Latest version: 0.0.1-alpha.1

# `@n3bula/colors`

### Colors convert util

for **Personal learning and testing use**

## Install

```sh
npm install @n3bula/colors
# or
yarn add @n3bula/colors
# or
pnpm add @n3bula/colors
```

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/eslint-config
Description: My eslint config based on Antfu's eslint config
Author: Moriarty47
Latest version: 0.0.6-alpha.1

# `@n3bula/eslint-config`

### My eslint config based on Antfu's eslint config

## Install

```sh
npm install @n3bula/eslint-config
# or
yarn add @n3bula/eslint-config
# or
pnpm add @n3bula/eslint-config
```

## Reference
Thanks to [@antfu/eslint-config](https://github.com/antfu/eslint-config)

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/express
Description: A Node.js server based on Express.js
Author: Moriarty47
Latest version: 0.0.3-alpha.3

# `@n3bula/express`

### A Node.js server based on Express.js

## Install

```sh
npm install @n3bula/express
# or
yarn add @n3bula/express
# or
pnpm add @n3bula/express
```

## Example

### 1. Conventional routes

```ts
// nova.config.ts
import { fileURLToPath } from 'node:url';
import { dirname, resolve } from 'node:path';
import { virtualApiResolver } from '@n3bula/express';

import type { NovaOptions } from '@n3bula/nova';

const __dirname = dirname(fileURLToPath(import.meta.url));
const config: NovaOptions = {
  nova: { input: resolve(__dirname, 'src/index.ts') },
  output: { dir: 'dist' },
  plugins: [
    virtualApiResolver({
      dir: 'src/apis',
    }),
  ],
};

export default config;
```

```json
// package.json
{
  ...
  "scripts": {
    "dev": "node --import @n3bula/express/loader",
  }
  ...
}
```

```ts
import { createApp } from '@n3bula/express';
import { logger } from '$util/log';

// use bundler to handle the virtual module
import { apis } from 'virtual:api-resolver';

const PORT = 3000;
async function startServer() {
  const app = await createApp({ apiDir: apis });
  const server = await app.listen(PORT);
  logger(`Server is running on http://localhost:${PORT}`);
  return server;
}

startServer();
```

### 2. Manual import routes

```ts
import { createApp } from '@n3bula/express';
import { logger } from '$util/log';

const PORT = 3000;
async function startServer() {
  const app = await createApp({
    apis: {
      test: () => import('./apis/test'),
      test2: () => import('./apis/test2'),
    },
  });
  const server = await app.listen(PORT);
  logger(`Server is running on http://localhost:${PORT}`);
  return server;
}

startServer();
```

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/next-sw
Description: ### Service worker for next.js
Author: Moriarty47
Latest version: 0.0.2

# `@n3bula/next-sw`

### Service worker for next.js

## Install

```sh
npm install @n3bula/next-sw
# or
yarn add @n3bula/next-sw
# or
pnpm add @n3bula/next-sw
```

## Reference
Thanks to [eolme/next-sw](https://github.com/eolme/next-sw)

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/nova
Description: A simple tool for Node.js development
Author: Moriarty47
Latest version: 0.0.3-alpha.1

# `@n3bula/nova`

### A simple tool for Node.js development.

## Install

```sh
npm install @n3bula/nova
# or
yarn add @n3bula/nova
# or
pnpm add @n3bula/nova
```

## [Example](https://github.com/Moriarty47/n3bula/tree/main/packages/nova/example)

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/npm-commands
Description: Show global installed npm commands
Author: Moriarty47
Latest version: 0.0.2-alpha.1

# `@n3bula/npm-commands`

### A simple tool for show all global installed npm commands

## Install

```sh
npm install @n3bula/npm-commands
# or
yarn add @n3bula/npm-commands
# or
pnpm add @n3bula/npm-commands
```

## Example

```cmd
# run command below
showcmds
All installed global npm commands: [
  'corepack',             'npm',
  'npx',                  'pnpm',                 
  'pnpx',                 'rimraf',
  'showcmds',             'ts-node',
  'ts-node-cwd',          'ts-node-esm',
  'ts-node-script',       'ts-node-transpile-only',
  'ts-script',            'vite'
]
```

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/pretty-json
Description: Pretty JSON data into HTML.
Author: Moriarty47
Latest version: 0.0.5

# `@n3bula/pretty-json`

###

## Install

```sh
npm install @n3bula/pretty-json
# or
yarn add @n3bula/pretty-json
# or
pnpm add @n3bula/pretty-json
```

## Use

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@n3bula/pretty-json</title>
    <style>
      html,
      body {
        background: #222222;
      }
    </style>
  </head>

  <body>
    <div id="app"></div>
    <script src="../lib/umd/index.min.js"></script>
    <script>
      console.log(prettyJson);
      const map = new Map();
      map.set('a', 6);
      map.set({ a: 1, c: 2, d: true, b: [1, '3'] }, { b: false });
      map.set(map, map);
      prettyJson.toHTML(map).render('app');
      prettyJson
        .toHTML(
          [
            [1, 2, 3],
            [4, '5', 6],
            [7, 8, 9],
          ],
          {
            matrix: true,
            singleQuote: true,
          },
        )
        .render('app');
      const symbolKey = Symbol.for('key');
      const o = {
        [symbolKey]: Symbol.for('key'),
        xfd: [1, '2', null, false, [4, 5, [6]]],
        a: '1',
        test: function test(app) {
          console.log(app);
        },
        as: function (app) {
          console.log(app);
        },
        arrow: () => {},
        b: 2,
        c: true,
        d: {
          a: 1,
          b: new String('3'),
          c: Symbol('sdf'),
          d: {
            a: 234,
            b: 'asdf',
            c: false,
          },
        },
        g: NaN,
        asdfasfd: 'asdfadsfzcv',
      };
      o.xfd[5] = o;
      o.f = o;
      prettyJson
        .toHTML(o, {
          indent: 6,
        })
        .render('app');
    </script>
  </body>
</html>
```

![pretty-json](./public/pretty.png)

## Options

| option        | value   | description                       |
| :------------ | :------ | :-------------------------------- |
| output        | string  | 'html' \| 'text', default: 'html' |
| indent        | number  | default: 2                        |
| matrix        | boolean | default: false                    |
| singleQuote   | boolean | default: false,                   |
| trailingComma | boolean | default: true                     |

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/react-viewer
Description: Image viewer for React
Author: Moriarty47
Latest version: 0.0.5

# `@n3bula/react-viewer`

### Image viewer for React.

## Install

```sh
npm install @n3bula/react-viewer
# or
yarn add @n3bula/react-viewer
# or
pnpm add @n3bula/react-viewer
```

## Use
Check the demo directory

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/sandbox
Description: Simple Sandbox for Node.js module quick test
Author: Moriarty47
Latest version: 0.0.1-alpha.3

# `@n3bula/sandbox`

### Simple Sandbox for Node.js module quick test

Just use for debug
Debug the current process without restart process

## Install

```sh
npm install @n3bula/sandbox
# or
yarn add @n3bula/sandbox
# or
pnpm add @n3bula/sandbox
```

## Example

```ts
// server.ts
import net from 'node:net';
import { dirname, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';

import { createSandbox } from '@n3bula/sandbox';

const PORT = 4000;
const server = net.createServer();

export type Server = typeof server;

server.listen(PORT, () => console.log(`TCP server listening on ${PORT}`));
const destroy = () => {
  server.close();
  process.exit();
};
process.on('SIGINT', destroy);
process.on('SIGTERM', destroy);

const file = resolve(fileURLToPath(dirname(import.meta.url)), './client.ts');
createSandbox(
  file,
  {
    server,
  },
  {
    // name: 'sandbox',
  },
);
```

```ts
// client.ts
import type { Server } from './server';

declare const server: Server;
console.log(server, typeof server);
// will print current server instance without restart server

const fs = _require(
  'node:fs/promises',
) as typeof import('node:fs/promises');

const file = await fs.readFile('./example/client.ts', 'utf8');
console.log('file :>>', file);

const { echo } = _require('@n3bula/echo') as typeof import('@n3bula/echo');

echo(globalThis);
```

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/startup
Description: ```sh npm install @n3bula/startup # or yarn add @n3bula/startup # or pnpm add @n3bula/startup ```
Author: Moriarty47
Latest version: 0.0.3

# `@n3bula/startup`

### 

## Install

```sh
npm install @n3bula/startup
# or
yarn add @n3bula/startup
# or
pnpm add @n3bula/startup
```

## Use

## Usage

- startup -h/--help # Show help information
- startup # 8000 as default port, current folder as root
- startup [-p/--port] [port] # Running at specified port
- startup -o/--open [browser=chrome,msedge,firefox,brave] # Open url with specified browser
- startup -n/--name [hostname] # Running at specified hostname
- startup -r/--root [root] # Specified root
- startup -c/--cert [cert_path/name] # Specified cert path/name
- startup -k/--key [key_path/name] # Specified key path/name
- startup -l/--log # Show log info
- startup -f/--fallback # Enable history fallback
- startup -x/--proxy [proxy_url] # Specified proxy url

## Certs

Certs files saved in `[package_root]/certs`, replace with own certs files.

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/tampermonkey-template
Description: A CLI tool for creating tampermonkey template.
Author: Moriarty47
Latest version: 0.0.2

# `@n3bula/tampermonkey-template`

### A CLI tool for creating tampermonkey template.

## Install

```sh
npm install @n3bula/tampermonkey-template
# or
yarn add @n3bula/tampermonkey-template
# or
pnpm add @n3bula/tampermonkey-template
```

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/template-creator
Description: A CLI tool for creating library template.
Author: Moriarty47
Latest version: 0.0.6-alpha.1

# `@n3bula/template-creator`

### A CLI for creating library template.

## Install

```sh
npm install @n3bula/template-creator
# or
yarn add @n3bula/template-creator
# or
pnpm add @n3bula/template-creator
```

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/utils
Description: A utils library for n3bula packages.
Author: Moriarty47
Latest version: 0.1.1-alpha.2

# `@n3bula/utils`

### A utils library for n3bula packages.

### Changes: Remove UMD and Now support ESM and CJS

## Install

```sh
npm install @n3bula/utils
# or
yarn add @n3bula/utils
# or
pnpm add @n3bula/utils
```

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/vue-icons
Description: Vue icon components based on Geist Design System Icons.
Author: Moriarty47
Latest version: 0.0.1-alpha.3

# `@n3bula/vue-icons`

### Vue icon components based on Geist Design System Icons.

## Install

```sh
npm install @n3bula/vue-icons
# or
yarn add @n3bula/vue-icons
# or
pnpm add @n3bula/vue-icons
```

## [Example](https://github.com/Moriarty47/n3bula/tree/main/packages/vue-icons/example)

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/vue-resizable-panels
Description: based on [React components for resizable panels](https://github.com/bvaughn/react-resizable-panels)
Author: Moriarty47
Latest version: 0.0.1-alpha.5

# `@n3bula/vue-resizable-panels`

### Vue components for resizable panels

based on [React components for resizable panels](https://github.com/bvaughn/react-resizable-panels)

for **Personal learning and testing use**

## Install

```sh
npm install @n3bula/vue-resizable-panels
# or
yarn add @n3bula/vue-resizable-panels
# or
pnpm add @n3bula/vue-resizable-panels
```

## Author

- [Moriarty47](https://github.com/Moriarty47)

## References

- Thanks to [React components for resizable panels](https://github.com/bvaughn/react-resizable-panels)

  - [Demo](https://react-resizable-panels.vercel.app/)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/watcher
Description: A file system watcher based on chokidar
Author: Moriarty47
Latest version: 0.0.2-alpha.3

# `@n3bula/watcher`

### A file system watcher based on chokidar with rename event.

## Install

```sh
npm install @n3bula/watcher
# or
yarn add @n3bula/watcher
# or
pnpm add @n3bula/watcher
```

## Use

```ts
import path from 'path';
import n3bulaWatcher from '@n3bula/watcher';

const cwd = process.cwd();
const testDirPath = path.join(cwd, 'test_dir');
const watcher = n3bulaWatcher(
  testDirPath,
  {
    ignoreInitial: true,
    ignored: ['**/ignoredDir/**/*'],
  },
  (event, oldPath, newPath /* or bigIntStats */) => {
    console.log('event, oldPath, newPath :>>', event, oldPath, newPath);
  },
);

watcher.on('ready', () => {
  console.log('running...');
});
```

## Author

- [Moriarty47](https://github.com/Moriarty47)

## License

[The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3bula/webpack-builder
Description: A CLI for creating test project quickly.
Author: Moriarty47
Latest version: 0.0.3

## `@n3bula/webpack-builder`

**A CLI for creating test project quickly.**

### Install

```bash
npm install @n3bula/webpack-builder
# or
yarn install @n3bula/webpack-builder
# or
pnpm install @n3bula/webpack-builder
```

### Author

- [Moriarty47](https://github.com/Moriarty47)

### License

- [The MIT License(MIT)](https://github.com/Moriarty47/n3bula/blob/main/LICENSE)
npm package: @n3e/styled
Description: CSS-in-JS library with server-side rendering support that can be used with react or solidJS
Author: Nicholas Makhija
Latest version: 1.0.2

# styled

A high performance and easy to use CSS-in-JS library that can be used with `React` or `Solid`.

## Installation

```shell
# with npm
npm install @n3e/styled

# with yarn
yarn add @n3e/styled

# with pnpm
pnpm add @n3e/styled

# with bun
bun add @n3e/styled
```

## Usage

```tsx
import styled from '@n3e/styled';

const Button = styled.button({
  appearance: 'none',
  backgroundColor: '#ff6995',
  border: '2px solid #ff6995',
  borderRadius: '0.25rem',
  margin: 0,
  padding: '0 6px',
  transition: '0.2s linear'
});

const Composition = () => (
  <Button>
    I'm a button
  </Button>
);
```

## Solid

SolidJS users need to import Styled from the the `solid` output folder:

```typescript
// as ES module
import styled from '@n3e/styled/solid/esm';

// as CommonJS module
import styled from '@n3e/styled/solid/cjs';
```

## Documentation

See https://www.styled.guide/
npm package: @n3okill/tslinq
Description: Use Linq Enumerable in typescript
Author: João Parreira
Latest version: 1.1.4

# TsLinq

Linq for typescript

---

[![Codacy Badge](https://app.codacy.com/project/badge/Grade/a724fe0f1ab1456ba159aa5e97834bf7)](https://www.codacy.com/gh/n3okill/tslinq/dashboard?utm_source=github.com&utm_medium=referral&utm_content=n3okill/tslinq&utm_campaign=Badge_Grade) ![Test Status](https://github.com/n3okill/tslinq/actions/workflows/test.yml/badge.svg)

---

## Description

Linq for typescript using the fastest iteration mode and deferred methods,

## Usage

Install the package

```js
npm install --save @n3okill/tslinq
```

```js
import { Enumerable, AsyncEnumerable } from "@n3okill/tslinq";

const sum = Enumerable.create([43, 1, 583, 6]).sum();
console.log(`Sum: ${sum} === 633`);
```

or

```js
const tslinq = require("@n3okill/tslinq");
const sum = await tslinq.AsyncEnumerable.create([43, 1, 583, 6]).sum();
console.log(`Sum: ${sum} === 633`);
```

For more information check [API Documentation](docs/api.md)

## Runing tests

- `npm run lint`: runs the linter
- `npm run test`: run unit tests

## Contribute

If you find a problem with the package you can

- [Submit a Bug](https://github.com/n3okill/tslinq/issues)
  - If you provide a test case it will make the issue resolution faster

or even make a

- [Pull request](https://github.com/n3okill/tslinq/pulls)

### Add something new

If you wan't to add something new, following this steps would be much apreciated:

- Develop the new helper, with clean and readable code
- Develop tests for the new helper
- Include in the comments a description of what the helper does, the input arguments and what it returns

## Documentation

[API Documentation](docs/api.md)

## Examples

For more examples just check the tests folder

## Why this module

To bring the best features of linq and it's easy usability to javascript ecosystem with a fast implementation

## Credits

- [Microsoft](http://www.microsoft.com) - For developing linq

## License

MIT License

Copyright (c) 2021 Joao Parreira [joaofrparreira@gmail.com](mailto:joaofrparreira@gmail.com)