open-index/open-npm huggingface dataset:
npm package: @ktspl/ui-lib
Description: A reusable React + Tailwind + TypeScript component library with Storybook
Latest version: 0.1.1

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```
npm package: @ktspl_og/ui_library
Description: A UI library for KTSPL
Author: KTSPL Team
Latest version: 1.0.0

# @ktspl_og/ui-library

A UI library for KTSPL - A CLI tool to add UI components to your React project, inspired by shadcn/ui.

## Installation

### Recommended: Use `npx` (no installation needed)

```bash
npx @ktspl_og/ui-library add <component-name>
```

### Alternative: Install as dev dependency

```bash
npm install -D @ktspl_og/ui-library
```

Then use:

```bash
npx ui-library add <component-name>
```

### Alternative: Global installation

```bash
npm install -g @ktspl_og/ui-library
```

Note: If you get permission errors, use `npx` instead or configure npm to use a different directory for global packages.

## Usage

### Add a component

```bash
ui-library add button
```

This will copy the `button` component to `src/components/comp_lib/button/` in your current project.

### Add all components

```bash
ui-library add all
```

This will copy all available components to your project.

## Available Components

- `button` - A customizable button component with variants (default, outline)
- `input` - A customizable input component with variants (default, outline, filled) and error states

## How it works

The CLI tool copies component files from the library's `components` directory to your project's `src/components/comp_lib/` directory. You can then import and use these components in your React application.

## Development

```bash
# Install dependencies
npm install

# Build the project
npm run build

# Run in development mode
npm run dev
```

## License

MIT

## Author

KTSPL Team

## Version

1.0.0
npm package: @ktsstudio/mediaproject-ok
Description: Package with utils for OK apps
Author: KTS Studio
Latest version: 1.0.6

![kts](./logo.png)

# @ktsstudio/mediaproject-ok

Package with utils for OK media projects.

### Usage

`npm install @ktsstudio/mediaproject-ok`

`yarn add @ktsstudio/mediaproject-ok`

### About

Contains wrappers for several FAPI methods. Also has and [method to initialize OK App parameters](./src/initializeOkApp.ts) on start using GET parameters. Stores app parameters in [Window](./src/types/window.ts).

### Proposals & feedback

Please, fell free to write on [hello@ktsstudio.ru](mailto:hello@ktsstudio.ru) with theme "mediaproject-ok feedback"
npm package: @ktsstudio/mediaproject-style
Description: Package with common styles for media projects
Author: KTS Studio
Latest version: 4.0.0

![kts](./logo.png)

# @ktsstudio/mediaproject-style

Пакет с общими стилями для медиапроектов.

## Использование

`npm install @ktsstudio/mediaproject-style`

`yarn add @ktsstudio/mediaproject-style`

## Содержимое

### Утилиты

* [markup](./src/markup) — утилита для адаптивной верстки на rem

Чтобы использовать адаптивную верстку на rem, необходимо при инициализации приложения вызвать функцию initMarkup и передать в нее нужные параметры:

```typescript
import { initMarkup } from '@ktsstudio/mediaproject-style';

...

initMarkup();
```

Утилита создает объект типа Markup и экспортирует его в виде переменной markup. При необходимости к ней можно обратиться:

```typescript
import { markup } from '@ktsstudio/mediaproject-style';

...

console.log(markup.currentHtmlFontSize);
```

### Миксины и анимации

* [mixins.ts](./src/mixins.ts) — миксины для styled-components
* [animations.ts](./src/animations.ts) — анимации для styled-components
* [mixins.scss](./src/mixins.scss) — миксины для Sass
* [animations.scss](./src/animations.scss) — анимации для Sass

Чтобы использовать миксин или анимацию в проекте с styled-components, импортируйте нужный объект из библиотеки:

```typescript
import { mixins } from '@ktsstudio/mediaproject-style';

...

${mixins.centerPos()};
```

Чтобы использовать миксин или анимацию в проекте с Sass, импортируйте файл с ними:

```scss
@import '~@ktsstudio/mediaproject-style/dist/mixins';

...

@include centerPos;
```

### Использование с SSR на примере Next.js

Для корректной работы утилиты markup с Next.js необходимо вызывать функцию инициализации в useEffect.

Пример:

```typescript
import { initMarkup } from '@ktsstudio/mediaproject-style';

...

React.useEffect(() => {
  initMarkup();
}, []);
```

Импорт миксинов и анимаций в SSR не меняется.

## Обратная связь

Любой фидбэк вы можете передать нам на почту [hello@ktsstudio.ru](mailto:hello@ktsstudio.ru) в письме с темой "mediaproject-style"
npm package: @ktsstudio/mediaproject-utils
Description: Package with basic utils for media projects
Author: KTS Studio
Latest version: 6.0.0

![kts](./logo.png)

# @ktsstudio/mediaproject-utils

Общие утилиты для медиапроектов.

### Использование

`npm install @ktsstudio/mediaproject-utils`

`yarn add @ktsstudio/mediaproject-utils`

### Утилиты

* [api](./src/api.ts) - утилита для отправки запросов к api. Работает поверх axios
* [checkDev](./src/checkDev.ts) - утилита для проверки, соответствуют ли домен приложения или адрес api девовской среде
* [checkMobile](./src/checkMobile.ts) - утилита для проверки, является ли текущий девайс мобильным устройством. Осуществляет проверку путем применения регулярного выражения к user agent
* [copyToClipboard](./src/copyToClipboard.ts) - утилита для копирования в буфер
* [findGetParameter](./src/findGetParameter.ts) - утилита для парсинга квери параметров
* [fixActive](./src/fixActive.ts) - утилита для отключения :active для safari
* [getter](./src/getter.ts) - геттер для вложенных полей объектов
* [initializeAppParams](./src/initializeAppParams.ts) - утилита для инициализации медиапроекта с инициализацией основных параметров и их записи в localStorage
* [loadImages](./src/loadImages.ts) - утилита для загрузки изображений на промисах
* [localStorage](./src/localStorage.ts) - имитация localStorage, хранимая в Window
* [noop](./src/noop.ts) - просто пустая функция
* [pluralize](./src/pluralize.ts) - утилита определения падежного окончания слова в зависимости от числа сущностей
* [randomNumber](./src/randomNumber.ts) - генератор случайных чисел
* [sleep](./src/sleep.ts) - утилита для задержки выполнения кода
* [splitIntoLines](./src/splitIntoLines.tsx) - утилита для разделения текста на строки по разделителю

### Хуки

* [useAndroidKeyboard](./src/hooks/useAndroidKeyboard.ts) - хук для отслеживания открытия клавиатуры на андроиде
* [useOrientationChange](./src/hooks/useOrientationChange.ts) - хук для определения изменения ориентации мобильного устройства
* [useScrollTop](./src/hooks/useScrollTop.ts) - хук для прокрутки страницы на верх
* [orientationContext](./src/hooks/orientationContext.tsx) - хук для получения ориентации мобильного устройства из контекста и компонент-провайдер
* [usePolling](./src/hooks/usePolling.ts) - хук для поллинга
* [usePreviousState](./src/hooks/usePreviousState.ts) - хук для получения предыдущего значения переменной
* [useValueTransition](./src/hooks/useValueTransition.ts) - хук для получения измененного значения переменной с задержкой


### Обратная связь

Любой фидбэк вы можете передать нам на почту [hello@ktsstudio.ru](mailto:hello@ktsstudio.ru) в письме с темой "mediaproject-utils"
npm package: @ktsstudio/mediaproject-vk
Description: Package with utils for VK Mini Apps
Author: KTS Studio
Latest version: 3.0.1

![kts](./logo.png)

# @ktsstudio/mediaproject-vk

Пакет с утилитами для [VK Mini Apps](https://dev.vk.com/mini-apps/overview).

## Установка

`npm install @ktsstudio/mediaproject-vk`

`yarn add @ktsstudio/mediaproject-vk`

## О пакете

Пакет содержит тайные знания, накопленные разработчиками [KTS](https://kts.studio/) за время работы над VK Mini Apps.
Список основных утилит приведен ниже.

## Содержимое

### Утилиты-обертки над [VK Bridge](https://github.com/VKCOM/vk-bridge)

- [callVkApi](./src/callVkApi.ts)
- [getVkAccessToken](./src/getVkAccessToken.ts)
- [setVkViewSettings](./src/setVkViewSettings.ts)
- [shareVkPost и shareVkPostWithUpload](./src/shareVkPost.ts)
- [shareVkStory](./src/shareVkStory.ts)

### Хуки

- [useEventSubscribe](./src/hooks/useEventSubscribe.ts)
- [usePolling](./src/hooks/usePolling.ts)

### Дополнительные утилиты

- [checkVkAvatarIsDefault](./src/checkVkAvatarIsDefault.ts)
- [checkVkPlatform](./src/checkVkPlatform.ts)
- [isVkError](./src/isVkError.ts)

## Обратная связь

Любой фидбэк вы можете отправить нам на почту [hello@ktsstudio.ru](mailto:hello@ktsstudio.ru) или в личные сообщения [нашего сообщества ВКонтакте](https://vk.com/kts.specials).
npm package: @ktt45678/discord-player-downloader
Description: Stream extractor for discord-player via youtube-dl
Author: DevAndromeda
Latest version: 3.0.2

# Downloader
Extractor for **[discord-player](https://npmjs.com/package/discord-player)** using **[youtube-dl](https://npmjs.com/package/youtube-dl)**.

# Installing

```sh
npm i @discord-player/downloader
```

# Example
## General
```js
const downloader = require("@discord-player/downloader").Downloader;
const fs = require("fs");
const url = "https://soundcloud.com/dogesounds/alan-walker-feat-k-391-ignite";

const stream = downloader.download(url);
stream.pipe(fs.createWriteStream("./song.mp3"));
```

## With Discord Player
```js
const downloader = require("@discord-player/downloader").Downloader;

player.use("YOUTUBE_DL", downloader); // enables youtube-dl extractor for discord-player
```
npm package: @ktt45678/primeng
Description: [![npm version](https://badge.fury.io/js/primeng.svg)](https://badge.fury.io/js/primeng) [![npm downloads](https://img.shields.io/npm/dm/primeng.svg)](https://www.npmjs.com/package/primeng) [![Actions CI](https://github.com/primefaces/primeng/workflows/
Latest version: 17.12.0-F4


[![npm version](https://badge.fury.io/js/primeng.svg)](https://badge.fury.io/js/primeng)
[![npm downloads](https://img.shields.io/npm/dm/primeng.svg)](https://www.npmjs.com/package/primeng)
[![Actions CI](https://github.com/primefaces/primeng/workflows/NodeJS%20CI/badge.svg)](https://github.com/primefaces/primeng/actions/workflows/node.js.yml)
[![Discord Chat](https://img.shields.io/discord/557940238991753223.svg?color=7289da&label=chat&logo=discord)](https://discord.gg/gzKFYnpmCY)
[![Discussions](https://img.shields.io/github/discussions-search?query=org%3Aprimefaces&logo=github&label=Prime%20Discussions&link=https%3A%2F%2Fgithub.com%2Forgs%2Fprimefaces%2Fdiscussions)](https://github.com/orgs/primefaces/discussions)

[![PrimeNG Hero](https://www.primefaces.org/static/social/primeng-preview.jpg)](https://primeng.org)

### Website

Visit the [PrimeNG Website](https://primeng.org) for general information, demos and documentation.
npm package: @ktt45678/vidstack
Description: UI component library for building high-quality, accessible video and audio experiences on the web.
Latest version: 1.11.30-F4

# Vidstack

[![package-badge]][package]
[![discord-badge]][discord]

Vidstack is a video/audio platform for frontend developers to build high-quality and accessible
experiences on the web.

## 📖 Docs

You can find our documentation at [vidstack.io](https://www.vidstack.io).

## 📝 License

Vidstack is [MIT licensed](./LICENSE).

[vime]: https://github.com/vime-js/vime
[plyr]: https://github.com/sampotts/plyr
[package]: https://www.npmjs.com/package/vidstack
[package-badge]: https://img.shields.io/npm/v/vidstack/next?style=flat-square
[discord]: https://discord.gg/QAjfh2gZE4
[discord-badge]: https://img.shields.io/discord/742612686679965696?color=%235865F2&label=%20&logo=discord&logoColor=white&style=flat-square
npm package: @ktt45678/vidstack-react
Description: UI component library for building high-quality, accessible video and audio experiences on the web.
Latest version: 1.9.8-F1

# Vidstack React

[![package-badge]][package]
[![discord-badge]][discord]

Vidstack is a video/audio platform for frontend developers to build high-quality and accessible
experiences on the web.

## 📖 Docs

You can find our documentation at [vidstack.io](https://www.vidstack.io).

## 📝 License

Vidstack React is [MIT licensed](./LICENSE).

[vime]: https://github.com/vime-js/vime
[plyr]: https://github.com/sampotts/plyr
[package]: https://www.npmjs.com/package/@vidstack/react
[package-badge]: https://img.shields.io/npm/v/@vidstack/react/next?style=flat-square
[discord]: https://discord.gg/QAjfh2gZE4
[discord-badge]: https://img.shields.io/discord/742612686679965696?color=%235865F2&label=%20&logo=discord&logoColor=white&style=flat-square
[discussions]: https://github.com/vidstack/player/discussions
npm package: @ktty1220/eslint-flex
Description: Flexible ESLint switcher
Author: ktty1220
Latest version: 0.1.2

# Flexible ESLint switcher

If `eslint-flex` is run in a project where eslint is installed, it will run eslint for that project, and if it is run in a location not managed by any project, it will run eslint with the default rules.

## Install

```sh
$ npm i -g @ktty1220/eslint-flex
```

## Usage

Similar to eslint. (Use `eslint-flex` instead of `eslint`)

## Default rules

Extended eslint-config-standard with 'semi: always'. (see .eslintrc)

## License

[MIT](http://www.opensource.org/licenses/mit-license)

&copy; 2020 [ktty1220](mailto:ktty1220@gmail.com)