open-index/open-npm huggingface dataset:
npm package: @minsgy/msw-devtools
Description: MSW Devtools
Author: minsgy
Latest version: 0.6.0

<p align="center">
  <img src="https://github.com/mswjs/msw/blob/main/media/msw-logo.svg?raw=true" width="120" alt="Mock Service Worker logo" />
</p>

<h1 align="center">Mock Service Worker Devtools</h1>
<p align="center"><a href="https://github.com/mswjs/msw">Mock Service Worker</a> Devtools</p>

---

## Description

This repository contains a collection of tools and scripts that are useful for development and testing of the MSW project.

## 🚩 The project is in its early stages of development 🚩

- This project is based on `MSW v2` and works only in a browser environment.
- currently only support `React`

## Features

comming soon

## Installation

```bash
npm install @minsgy/msw-devtools
```

## usage

comming soon

## roadmap

- [ ] Add UI for MSW Devtools
  - [x] Add handler list
  - [ ] Add handler details
  - [ ] Add handler Editor (add, edit, delete handlers)
  - [x] Add support for REST handlers
  - [ ] Add support for GraphQL handlers
- [ ] Add Utility functions
  - [ ] Add handler list
  - [ ] Add handler details
  - [ ] Add Data fetching Delay
- [ ] Add handler Editor (add, edit, delete handlers)
  - [ ] Add support for REST handlers
  - [ ] Add support for GraphQL handlers
- [ ] Add Vanilla JS support
- [x] Add React support
- [ ] Add Vue support
- [ ] Add Next.js (SSR) support
- [ ] Add codesandbox examples
npm package: @minsize/core
Description: Core Module: The foundation for managing your application's modules and functionality.
Author: Egor Kytyukov
Latest version: 1.0.12


# Модуль Ядра

Добро пожаловать в модуль Ядра нашего проекта. Этот модуль предоставляет основные функциональности и API, которые поддерживают общую архитектуру и интеграцию модулей в нашем приложении.

## Содержание

- [Модуль Ядра](#модуль-ядра)
  - [Содержание](#содержание)
  - [Введение](#введение)
  - [Функциональность](#функциональность)
  - [Установка](#установка)
  - [Использование](#использование)
  - [Справочник API](#справочник-api)
    - [Core](#core)
  - [Структура плагинов](#структура-плагинов)
    - [plugin.json](#pluginjson)
    - [Инициализация плагина](#инициализация-плагина)
  - [Лицензия](#лицензия)

## Введение

Модуль Ядра спроектирован для предоставления прочной основы для разработки и интеграции дополнительных модулей в приложение. Он управляет критическими операциями, такими как регистрация модулей, управление их жизненным циклом, обработка событий и многое другое.

## Функциональность

- **Модульная архитектура**: Динамическая загрузка и управление модулями.
- **Управление жизненным циклом**: Легкая инициализация, активация, деактивация и уничтожение модулей.
- **Управление зависимостями**: Разрешение и управление зависимостями модулей.
- **Система событий**: Генерация и прослушивание событий на уровне приложения.
- **Безопасность**: Защита взаимодействий модулей с помощью системы разрешений.
- **Логирование**: Интегрированное логирование для отладки и мониторинга.
- **Управление конфигурацией**: Настройка основных настроек и конфигураций модулей.
- **Хеширование**: Блокировка изменений модулей пользователями.

## Установка

Чтобы включить модуль Ядра в ваш проект, добавьте его в зависимости вашего проекта:

```bash
npm install @minsize/core
```

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

Пример использования модуля Ядра в вашем приложении:

```typescript
import mcore from '@minsize/core';

// Регистрация и запуск нового модуля
mcore.register([Plugin()])
```

## Справочник API

### Core

- `register(plugins: Plugin[]): void`
  Регистрирует новые модули в ядро.

## Структура плагинов
```
NAME/
├── src/
└── plugin.json

```

### plugin.json

```typescript
{
  "uid": "randomId or custom name",
  "name": "Test",
  "description": "Testing",
  "version": "1.0.0",
  "authors": [
    "xuserz"
  ],
  "compatibleVersions": {
    "min": "1.0.0"
  },
  "dependencies": {}
}

```
### Инициализация плагина

```typescript
import plugin from './plugin.json'
import type { Plugin, PluginProps } from '@minsize/core'

function init(props: PluginProps) {
	// ваш код инициализации
}

function install(): Plugin {
	return {
		...plugin,
		init,
	}
}

export default install
```

## Лицензия

Этот проект лицензирован под лицензией MIT. Подробности можно найти в файле `LICENSE`.
npm package: @minsize/mutex
Description: Mutex for guarding async workflows
Author: Egor Kytyukov
Latest version: 0.0.7

## Mutex
[![npm version](https://img.shields.io/npm/v/@minsize/mutex)](https://www.npmjs.com/package/@minsize/mutex)

```
npm i @minsize/mutex

yarn add @minsize/mutex
```

### Usage
```js
import { Mutex } from '@minsize/mutex'

const mutex = Mutex({
    globalLimit: 1 // Global limit on how many functions a mutex can process at once
})

const fn = async () => {
    const release = await mutex.wait();

    try {
       // ...
    } finally {
        release();
        // or
        mutex.release();
    }
}

```


### Use with key
```js
import { Mutex } from '@minsize/mutex'

const mutex = Mutex({
    globalLimit: 1 // Global limit on how many functions a mutex can process at once
})

const fn = async (userId) => {
    const release = await mutex.wait({
        key: userId, // Whom Mutex will be used
        limit: 1 // Works the same as the global limit, but only for 1 key
    });

    try {
       // ...
    } finally {
        release();
        // or 
        mutex.release({ key: userId });
    }
}

```
npm package: @minsize/plugin-i18n
Description: Import Frequently Used Utilities
Author: Egor Kytyukov
Latest version: 1.0.1

# @minsize/plugin-i18n

Плагин `@minsize/plugin-i18n` предоставляет возможности интернационализации (i18n) для вашего приложения, построенного на `@minsize/core`. Он позволяет легко управлять языковыми настройками и переводами, обеспечивая поддержку многоязычности.

## Установка

Перед началом работы убедитесь, что у вас установлено ядро `@minsize/core` и другие необходимые зависимости.

### Установка через npm

```bash
npm install @minsize/core @minsize/plugin-i18n
```

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

### Регистрация плагина

Чтобы использовать плагин, зарегистрируйте его в вашем приложении:

```javascript
import mcore from '@minsize/core';
import i18nPlugin from '@minsize/plugin-i18n';

// Пример передачи объектов Props и регистрации плагина
const props = {
  signal: [/* геттер и сеттер текущего языка */],
  default: 'en', // Язык по умолчанию
  dictionaries: {
    en: {...}, // Словарь для английского
    es: {...}, // Словарь для испанского (пример)
  }
};

mcore.register([i18nPlugin(props)]);
```

### Глобальные функции i18n

Плагин `@minsize/plugin-i18n` добавляет в глобальное пространство имен объект `i18n`, который предоставляет следующие методы:

- `i18n.setLanguage(langCode: string)`: Устанавливает текущий язык. Если язык не поддерживается, устанавливается английский язык ('en').

- `i18n.getLanguage()`: Возвращает код текущего языка.

- `i18n.get(path: string, ...args)`: Получает перевод для заданного пути в текущем языке. Поддерживает подстановку аргументов.

- `i18n.getByCode(langCode: string, path: string, ...args)`: Получает перевод для заданного языка, пути и аргументов.

### Пример использования

```javascript
// Установите язык на испанский
i18n.setLanguage('es');

// Получите перевод для ключа 'greeting'
console.log(i18n.get('greeting')); // "¡Hola!"

// Получите перевод для ключа 'greeting' на английском
console.log(i18n.getByCode('en', 'greeting')); // "Hello!"
```

## Преимущества

- **Удобство использования**: Легко переключайтесь между различными языками.
- **Гибкость**: Добавляйте и настраивайте словари для любого количества языков.
- **Поддержка шаблонов**: Используйте подстановку аргументов в строках перевода.

## Заключение

Плагин `@minsize/plugin-i18n` помогает вам легко интегрировать многоязыковую поддержку в ваше приложение на базе `@minsize/core`. Он обеспечивает гибкость и простоту использования, необходимые для совместной работы над проектами, требующими обширной поддержки языков. Почувствуйте свободу добавления новых языков и модификации существующих переводов в любое время.
npm package: @minsize/request-manager
Description: Query manager with limits
Author: Egor Kytyukov
Latest version: 0.0.15

## Request Manager
[![npm version](https://img.shields.io/npm/v/@minsize/request-manager)](https://www.npmjs.com/package/@minsize/request-manager)

```
npm i @minsize/request-manager

yarn add @minsize/request-manager
```
npm package: @minskylab/realshadow
Description: A simple library to give shadows based on the current real time for any html element.
Author: Minsky
Latest version: 0.2.3

# Real Shadow

Realshadow adds a real time based shadow for any HTML Element.
It works with the current time calculating each `1 second` the shadow based on the current hour. You can see the below image for more details.

![realshadow how it works](https://i.imgur.com/MPCmzGb.png)

## Demo

See this codepen: [https://codepen.io/bregydoc/pen/RwoXPVJ](https://codepen.io/bregydoc/pen/RwoXPVJ).

## How to use

Only need to add this line at the end of your `body` tag:

```html
<script src="https://unpkg.com/@minskylab/realshadow/umd/index.min.js" type="text/javascript"></script>
```

Now, you can apply the real shadow only adding the `data-rs-kind` data tag with options `drop|box|text|both`:

### Basic Example

```html
<div data-rs-kind="box" />
<span data-rs-kind="text"> HELLO WORLD </span>
```

### Options

You can configure the behavior of your realshadow using the below data tags.

```env
data-rs-kind="box" # Shadow kind
```

```env
data-rs-from-hour="06" # Sunset hour
```

```env
data-rs-to-hour="18" # Sunrise hour
```

```env
data-rs-distance="10" # Shadow distance
```

```env
data-rs-color="#0d1117" # Shadow color
```

```env
data-rs-blur-radius="2" # Shadow blur radius (in pixels)
```

```env
data-rs-hour="10:00" # Forced static hour
```

#### Shadow kind

The shadow kind: `drop|box|text|both`.

box-shadow: [Official Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
text-shadow: [Official Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow).
drop (filter): [Official Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/filter).

---

## Contribute

I need to complete this documentation, if you want to help only make an issue or pull request. Thanks.
npm package: @minsohng/react-shadow-dom-retarget-events
Description: Retargets event in a shadow root to react
Author: Lukas Bombach
Latest version: 1.0.12

# This is a fork of [react-shadow-dom-retarget-events package](https://github.com/spring-media/react-shadow-dom-retarget-events#readme)

# react-shadow-dom-retarget-events

## What it does

Fixes events for react components rendered in a `shadow dom`.

## Why

When you render a react component inside `shadow dom` events will not be dispatched to react. 
I.e. when a user clicks in your react component nothing happens. This happens (or does not happen) with any events.
 
A bug is filed at [#10422](https://github.com/facebook/react/issues/10422).

## How to fix it

Luckily someone wrote [a workaround on Stack Overflow](https://stackoverflow.com/questions/37866237/click-event-not-firing-when-react-component-in-a-shadow-dom).
It works by adding vanilla JS event listeners and dispatching events to React.

This repo is based on his answer in an npm module.

## Installation

`yarn add react-shadow-dom-retarget-events` or

`npm install react-shadow-dom-retarget-events --save`

## Usage

import `retargetEvents` and call it with the `shadowRoot`:

```jsx
import React from 'react';
import retargetEvents from 'react-shadow-dom-retarget-events';

class App extends React.Component {
  render() {
  	return <div onClick={() => alert('I have been clicked')}>Click me</div>;
  }
}

const proto = Object.create(HTMLElement.prototype, {
  attachedCallback: {
    value: function() {
      const mountPoint = document.createElement('span');
      const shadowRoot = this.createShadowRoot();
      shadowRoot.appendChild(mountPoint);
      ReactDOM.render(<App/>, mountPoint);
      retargetEvents(shadowRoot);
    }
  }
});
document.registerElement('my-custom-element', {prototype: proto});
```
## History

* v1.08 Support for cancelBubble and FireFox's composedPath
* v1.07 Support for onBlur
* v1.06 Support von React 16, Added Events, Code Cleanup
* v1.05 Initial commits and basic functionality
npm package: @minsoo0715/ex-cli
Description: express template generating CLI project
Author: whiteb
Latest version: 2.0.1

# Express-CLI

## Usage


```bash
$ cd my_workspace
$ ex-cli <template-name> <set-name> -l <ts | js>
```

recent template-name : ejs(ts/js)

## prerequirement
```bash
 $ npm install -g ts-node
```

## Installation
```bash
 $ npm install -g ex-cli
 ```
## Debug
```bash
$ npm run debug
$ ex-cli --help
```
#
npm package: @minsoochoo/audio-player
Description: SvelteKit audio player for your music, with custom controls, playlist, filters, and search functionality.
Author: Minsoo Choo
Latest version: 0.3.2

# create-svelte

Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```bash
npm run package
```

To create a production version of your showcase app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

## Publishing

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).

To publish your library to [npm](https://www.npmjs.com):

```bash
npm publish
```
npm package: @minsoohwan/min-ui
Description: Minimal React UI component library
Author: minsoohwan
Latest version: 0.2.0

# Min UI

A minimal React UI component library with clean, modern components.

## Installation

```bash
npm install min-ui
```

## Usage

```tsx
import { Button, TextBox, CheckBox, SelectBox, Tree } from "min-ui";
import "min-ui/dist/index.css"; // Import styles

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <TextBox placeholder="Enter text..." />
      <CheckBox label="Check this" />
      <SelectBox
        items={[
          { value: "1", label: "Option 1" },
          { value: "2", label: "Option 2" },
        ]}
      />
      <Tree
        nodes={[
          {
            id: "1",
            label: "Node 1",
            children: [{ id: "2", label: "Child 1" }],
          },
        ]}
      />
    </div>
  );
}
```

## Components

- **Button**: Various button styles and variants
- **TextBox**: Input field with validation support
- **CheckBox**: Checkbox with label support
- **CheckBoxGroup**: Group of checkboxes
- **SelectBox**: Dropdown selection component
- **Tree**: Hierarchical tree component

## Requirements

- React 18 or higher
- React DOM 18 or higher

## License

MIT

## Storybook

Live demo: https://minsoohwan.github.io/min-ui