open-index/open-npm huggingface dataset:
npm package: @shaiq0/vue3-draggable
Description: simple drag&drop component for vue 3.x
Author: Shaiq Ul Hassan
Latest version: 2.1.9

# vue3-draggable

list-based drag&drop component for vue 3.x, with no dependencies

![vue3-drag2](https://user-images.githubusercontent.com/59331444/104086030-774ce700-5297-11eb-9f5a-211bd4b7c01f.gif)

# Features

- support v-model
- support transition
- customizable draggable component

Nested useage is currently not supported

# Installation

```
npm i vue3-draggable
```

# Try Sample

```bash
git clone https://github.com/Shaiq01/Vue3-draggable

npm i
npm run serve
```

# Usage

import component:

```javascript
import Draggable from "vue3-draggable";

export default {
  components: {
    Draggable,
  },
};
```

template:

```vue
<draggable v-model="items">
    <template v-slot:item="{item}">
        <!-- example -->
        <div>
            {{item.title}}
        </div>
        <!-- or your own template -->
    </template>
</draggable>
```

This componet is implemented based on [v-slot](https://v3.vuejs.org/guide/component-slots.html#slots)

### Props

| Name       | Required | Type   | Description                      |
| :--------- | :------- | :----- | :------------------------------- |
| modelValue | REQUIRED | ARRAY  | v-model value, items to be bound |
| transition | OPTIONAL | STRING | transition delay in ms           |
npm package: @shaishab316/custom-json-stringify
Description: Custom JSON.stringify with double-precision float formatting and pretty printing
Author: shaishab316
Latest version: 1.0.1

# @shaishab316/custom-json-stringify

A custom JSON stringify implementation with special support for double-precision float formatting and pretty printing.

[![Test](https://github.com/shaishab316/custom-json-stringify/actions/workflows/test.yml/badge.svg)](https://github.com/shaishab316/custom-json-stringify/actions/workflows/test.yml)

## Features

- ✨ **Double-precision formatting** - Show `.0` suffix for integer floats
- 🎨 **Pretty printing** - Customizable indentation
- 📦 **TypeScript** - Full type definitions included
- 🧪 **Well tested** - Comprehensive test suite with Vitest
- 📘 **ESM & CJS** - Supports both module systems

## Installation

First, configure npm to use GitHub Packages:

```bash
npm login --scope=@shaishab316 --registry=https://npm.pkg.github.com
```

Then install:

```bash
npm install @shaishab316/custom-json-stringify
```

## Usage

### Basic Stringify

```typescript
import { stringify } from "@shaishab316/custom-json-stringify";

const obj = { name: "John", age: 30 };
console.log(stringify(obj));
// Output: {"name":"John","age":30}
```

### Double-Precision Numbers

```typescript
import { stringify, Double } from "@shaishab316/custom-json-stringify";

const data = {
  id: Double(5),
  price: Double(99),
  value: 3.14,
};

console.log(stringify(data));
// Output: {"id":5.0,"price":99.0,"value":3.14}
```

### Mark Fields as Doubles

```typescript
import { stringify, markAsDouble } from "@shaishab316/custom-json-stringify";

const product = { id: 100, price: 50, name: "Widget" };
markAsDouble(product, "id", "price");

console.log(stringify(product));
// Output: {"id":100.0,"price":50.0,"name":"Widget"}
```

### Pretty Printing

```typescript
import { stringify } from "@shaishab316/custom-json-stringify";

const obj = { a: 1, b: { c: 2 } };
console.log(stringify(obj, null, 2));
// Output:
// {
//   "a": 1,
//   "b": {
//     "c": 2
//   }
// }
```

## API

### `stringify(value, replacer?, space?)`

Converts a value to JSON string.

- **value**: The value to stringify
- **replacer**: (Not implemented yet) Replacer function
- **space**: Indentation (number or string)

### `Double(n: number)`

Wraps a number to serialize with decimal point.

### `markAsDouble(obj, ...keys)`

Marks specific object keys to serialize as doubles.

### `registerGlobalStringify()`

Replaces global `JSON.stringify` (use with caution).

## Development

```bash
# Install dependencies
npm install

# Run tests
npm test

# Run tests in watch mode
npm run test:watch

# Run tests with UI
npm run test:ui

# Type check
npm run type-check

# Build
npm run build
```

## License

MIT
npm package: @shaitan-masters/config
Description: Common config
Latest version: 0.2.0

# Common Config

##### Install

```npm i @shaitan-masters/config```

or 

```yarn add @shaitan-masters/config```

------------

##### Usage

```typescript
import {Config} from '@shaitan-masters/config';

export interface AppConfig {
	api: {
		apiUrl: string;
		authorization: {
			apikey: string;
		}
	};
	redis: {
		host: string;
		password: string;
		port: number;
		channels: {
			websockets: string
		}
	};
}

const configStruct = new Config('./config.js', (defineConfig) => ({
	api  : {
		apiUrl       : defineConfig<string>('API_URL', 'https://example.com'),
		authorization: {
			apikey: defineConfig<string>('apikey', '123456')
		}
	},
	redis: {
		host    : defineConfig<string>('REDIS_HOST', 'localhost'),
		password: defineConfig<string>('REDIS_PASSWORD', 'secret'),
		port    : defineConfig<number>('REDIS_PORT', 6379),
		channels: {
			websockets: defineConfig<string>('REDIS_CHANNELS_WEBSOCKETS', 'channel42')
		}
	}
}));

const config = configStruct.get();
console.log(config);

// {
// 	api: {
// 		apiUrl: 'https://example.com',
// 		authorization: { apikey: '123456' }
// 	},
// 	redis: {
// 		host: 'localhost',
// 		password: 'secret',
// 		port: 6379,
// 		channels: { websockets: 'channel42' }
// 	}
// }
```
npm package: @shaitan-masters/redis
Description: Redis wrapper
Latest version: 0.3.0

# Redis Wrapper


This is a node module for interacting with the redis.

Documentation for redis is available [here](https://redis.io).

---

### Installation

`npm install @shaitan-masters/redis`

`yarn add @shaitan-masters/redis`

---

### Usage

#### Base

```typescript
import { Redis, RedisOptions } from '@shaitan-masters/redis';


const options: RedisOptions = {
    host: 'localhost',
    port: 6379,
};

const redis = new Redis(options);

interface Message {
    readonly hello: string;
    readonly moto: number;
}

await redis.listen('channel', (message: Message): void => {
    console.log(message); // { hello: 'world', moto: 667 }
});

await redis.publish('channel', { hello: 'world', moto: 667 });
```
npm package: @shaizei/babel-preset
Description: This package contains shareable babel.js configuration used by the applications created with @shaizei/cli.
Latest version: 0.1.0-beta.12

<h1 align="center">@shaizei/babel-preset</h1>

<p align="center">This package contains shareable babel.js configuration used by the applications created with @shaizei/cli.</p>

## Getting Started

### 1. Installation

Using Yarn:

```shell
  yarn add @shaizei/babel-preset --dev
```

Using npm:

```shell
  npm install @shaizei/babel-preset --save-dev
```

### 2. Usage

* Create a new `.babelrc` file
* Add `@shaizei/babel-preset` as follows:

For JavaScript projects:

```javascript
  {
    "presets": "@shaizei/babel-preset"
  }
```

## Override Default Config

If you want to override the default configuration, then extend `.babelrc` normally.

## Naming Convention

Note that you can also create `babel.config.js` instead of `.babelrc` file.
npm package: @shaizei/cli
Description: A next-generation CLI to quickly scaffold pre-configured yet on-demand configurable React applications.
Latest version: 0.1.0-beta.13

<h1 align="center">@shaizei/cli</h1>

<p align="center">A next-generation CLI to quickly scaffold pre-configured yet on-demand configurable React applications.</p>

## Getting Started

### 1. Installation

Using Yarn:

```sh
  yarn global add @shaizei/cli
```

Using npm:

```sh
  npm install @shaizei/cli -g
```

### 2. Verifying Installation

After installation, confirm if the installation is successful by running the following command:

```shell
shaizei --version
```

If the above command is successfully executed, and the current version is printed, it means that CLI is installed successfully.

### 3. Usage

In order to check all the available commands and options, pass the `--help`  command:

```shell
shaizei --help
```

In order to find all the available scripts, please checkout [@shaizei/scrips](https://www.npmjs.com/package/@shaizei/scripts).
npm package: @shaizei/eslint-config
Description: This package contains shareable ESLint configuration used by the applications created with @shaizei/cli.
Author: Shahzaib Khalid
Latest version: 0.1.0-beta.13

<h1 align="center">@shaizei/eslint-config</h1>

<p align="center">This package contains shareable ESLint configuration used by the applications created with @shaizei/cli.</p>

## Getting Started

### 1. Installation

Using Yarn:

```shell
  yarn add @shaizei/eslint-config --dev
```

Using npm:

```shell
  npm install @shaizei/eslint-config --save-dev
```

### 2. Usage

* Create a new file and name it as `.eslintrc.js`
* Import relevant config file from `@shaizei/eslint-config` and just export it as follows.

For JavaScript projects:

```javascript
module.exports = {
  extends: '@shaizei/eslint-config/javascriptReact',
};
```

For TypeScript projects:

```javascript
module.exports = {
  extends: '@shaizei/eslint-config/typescriptReact',
};
```

* In order to have a `.eslintignore` file as well, just run the following command from terminal:

```sh
  cat ./node_modules/@shaizei/eslint-config/.eslintignore >> .eslintignore
```

## Override Default Config

If you want to override the default configuration, then add the following code in `.eslintrc.js` file:

For JavaScript projects:

```javascript
module.exports = {
  extends: '@shaizei/eslint-config/javascriptReact',
  // your config options goes here, e.g. plugins: [...]
};
```

For TypeScript projects:

```javascript
module.exports = {
  extends: '@shaizei/eslint-config/typescriptReact',
  // your config options goes here, e.g. plugins: [...]
};
```

## VSCode ESLint Extension Setup

As we're not installing ESLint locally per project, but leveraging ESLint and associated packages installed in `@shaizei/eslint-config` project. Thus, we need to inform VSCode ESLint extension that how to resolve ESLint.

* Go to `settings.json` in VSCode.

* Add following settings:

```json
  "eslint.nodePath": "./node_modules/@shaizei/eslint-config/node_modules"
```

Above mentioned settings will let the extension read ESLint from `@shaizei/eslint-config`.

Also, for TypeScript, we need to tell ESLint extension to lint `.ts` and `.tsx` files as well. We recommend to add following setting as well in `settings.json`:

```json
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
```
npm package: @shaizei/helpers
Description: This package contains common helper utilities for shaizei core.
Author: Shahzaib Khalid
Latest version: 0.1.0-beta.12

<h1 align="center">@shaizei/helpers</h1>

<p>This package contains common helper utilities for shaizei core.</p>

Note that this package is used internally within `shaizei` and not advised to use directly.
npm package: @shaizei/prettier-config
Description: This package contains shareable Prettier configuration used by the applications created with @shaizei/cli.
Author: Shahzaib Khalid
Latest version: 0.1.0-beta.12

<h1 align="center">@shaizei/prettier-config</h1>

<p align="center">This package contains shareable Prettier configuration used by the applications created with @shaizei/cli.</p>

## Getting Started

### 1. Installation

Using Yarn:

```shell
  yarn add @shaizei/prettier-config --dev
```

Using npm:

```shell
  npm install @shaizei/prettier-config --save-dev
```

### 2. Usage

* Create a new file and name it as `prettier.config.js`
* Just import `@shaizei/prettier-config` and export it.

```javascript
module.exports = require('@shaizei/prettier-config');
```

* In order to have a `.prettierignore` file as well, just run the following command from terminal:

```sh
  cat ./node_modules/@shaizei/prettier-config/.prettierignore >> .prettierignore
```
## Override Default Config

If you want to override the default configuration, then add the following code in `prettier.config.js` file:

```javascript
  const prettierConfig = require('@shaizei/prettier-config');
  module.exports = {
    ...prettierConfig,
    // your config options goes here, e.g. printWidth: 80
  }
```
npm package: @shaizei/scripts
Description: This package contains automation task used by the applications created with @shaizei/cli.
Author: Shahzaib Khalid
Latest version: 0.1.0-beta.13

<h1 align="center">@shaizei/scripts</h1>

<p align="center">This package contains automation task used by the applications created with @shaizei/cli.</p>

## Task Scripts

Here's a brief list of all tasks scripts that are offered by this package:

* **develop**  
It will start the development server using `webpack-dev-server` and configurations exposed by `@shaizei/webpack-config`.

* **build**  
It will prepare an optimized production build of your application and will create a new `build` directory.

* **lint**  
It will run linter against files having following extensions and existing is `src`.
  * jsx
  * tsx
  * js
  * ts

* **lint-fix**  
It will try to fix common fixable issues reported by linter.

* **analyze**  
It will analyze the production bundle by using `webpack-bundle-analyzer`.

* **serve**  
It will serve the production bundle locally (instead of serving the app from `src`).

* **prettier**  
It will run Prettier throughout your codebase and will print wherever Prettier rules have been violated.

* **prettier-fix**  
It will fix Prettier formatting issues that were reported by `prettier` command.

* **eslint-prettier-integration**  
It will check and warn if ESLint and Prettier have any contradicting rules.

* **type-check**  
It will type-check the TypeScript code and log results to the console. (in case the project is React-TypeScript)

## Running Task Scripts

You need to install `@shaizei/cli` in order to run the above mentioned scripts. Take a look at [@shaizei/cli](https://www.npmjs.com/package/@shaizei/cli) to learn more on how to install it. Apps created with `@shaizei/cli` comes pre-configured with these scripts.

After installing the CLI, every time you're going to run any of the above mentioned scripts, you need to run them with `@shaizei/cli` e.g. `develop` needs to be run as `shaizei develop` and same is true for other scripts as well.
npm package: @shaizei/typescript-config
Description: This package contains shareable TypeScript compiler configuration used by the applications created with @shaizei/cli.
Author: Shahzaib Khalid
Latest version: 0.1.0-beta.13

<h1 align="center">@shaizei/typescript-config</h1>

<p>This package contains shareable TypeScript compiler configuration used by the applications created with @shaizei/cli.</p>

## Getting Started

### 1. Installation

Using Yarn:

```sh
  yarn add @shaizei/typescript-config typescript --dev
```

Using npm:

```sh
  npm install @shaizei/typescript-config typescript --save-dev
```


### 2. Usage

* Create a new `tsconfig.js` at the root directory of your project.
* Extend the config from `@shaizei/typescript-config`

```json
{
  "extends": "@shaizei/typescript-config",
}
```

And that's it.

## Override Default Config

If you want to override some of the pre-defined configuration, then simply write them down after extending from `@shaizei/typescript-config`.

```json
{
  "extends": "@shaizei/typescript-config",
  "compilerOptions": {
    ...
  },
  "exclude": [...],
  "include": [...]
}
```
npm package: @shaizei/webpack-config
Description: This package contains shareable webpack configuration used by the applications created with @shaizei/cli.
Author: Shahzaib Khalid
Latest version: 0.1.0-beta.12

<h1 align="center">@shaizei/webpack-config</h1>

<p>This package contains shareable webpack configuration used by the applications created with @shaizei/cli.</p>

## Getting Started

### 1. Installation

Using Yarn:

```sh
  yarn add @shaizei/webpack-config webpack webpack-dev-server webpack-cli --dev
```

Using npm:

```sh
  npm install @shaizei/webpack-config webpack webpack-dev-server webpack-cli --save-dev
```

### 2. Usage

* Create a new `webpack.config.js` at the root directory of your project.
* Import the config function from `@shaizei/webpack-config` package.

```js
  const WebpackConfig = require('@shaizei/webpack-config');
```

* Then, we just need to export the configurations.

```js
  module.exports = WebpackConfig();
```

## Override Default Config

If you want to override some of the pre-defined configuration, then simply pass a JavaScript object into `WebpackConfig` as follows:

```js
module.exports = WebpackConfig({
  plugins: [...]
});
```