open-index/open-npm huggingface dataset:
npm package: @nabcellent/sui-vue
Description: Sidooh's Vue component library
Author: Nabcellent
Latest version: 3.1.4

# Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.

## Recommended IDE Setup

- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)

## Type Support For `.vue` Imports in TS

Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:

1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.

You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
npm package: @nabeelh/editorjs-fontsize-tool
Description: Editor.js tool for font size changes
Author: nabeelhussain
Latest version: 1.0.4

# Editor.js Font Size Tool

The `@nabeelh/editorjs-fontsize-tool` is a custom tool for Editor.js that allows users to adjust the font size of selected text within the editor. This tool provides a dropdown menu for selecting different font sizes and applying them to the text.

## Features

- **Font Size Dropdown**: Provides a list of predefined font sizes for users to choose from.
- **Inline Styling**: Applies font sizes directly to the selected text without affecting other content.
- **Clean Fragment**: Ensures that existing styles are cleaned up when applying new font sizes.

## Installation

To install the package, run:

```bash
npm install @nabeelh/editorjs-fontsize-tool

```
## Usage

To Use the package, run:

```bash
import FontSizeTool from '@nabeelh/editorjs-fontsize-tool';

- Register Font Size like this.

fontSize: {
    class: FontSizeTool,
    inlineToolbar: true, // Ensures it's available in the inline toolbar
},

- use it like that in your paragraph module.

paragraph: {
    class: paragraph,
    inlineToolbar: ['fontSize', 'link', 'bold'], // Specify inline tools as an array
    tunes: ["alignmentTuneTool"],
},

```


## DEMO
![Demo GIF](https://github.com/nabeelhussain819/editorjs-fontsize-tool/raw/main/assets/download.gif)
npm package: @nabeelrao1702/string-utils
Description: A collection of string utility functions
Author: Nabeel Ahmad
Latest version: 1.0.0

# @nabeelrao1702/string-utils

A lightweight JavaScript library providing useful string manipulation utilities.

## Installation

bash
npm install @nabeelrao1702/string-utils


## Usage

javascript
const stringUtils = require('@nabeelrao1702/string-utils');

// Capitalize words
console.log(stringUtils.capitalizeWords('hello world')); // Hello World

// Reverse string
console.log(stringUtils.reverse('hello')); // olleh

// Remove extra spaces
console.log(stringUtils.removeExtraSpaces('hello   world')); // hello world


## API

### capitalizeWords(str)
Capitalizes the first letter of each word in a string.

### reverse(str)
Reverses a string.

### removeExtraSpaces(str)
Removes extra spaces from a string.

## License
MIT

## Author
Nabeel Ahmad (nabeelrao1702)
npm package: @nabeeltahir/react-flexible-daterange
Description: A flexible date range picker for React with multiple range selection support
Author: Your Name
Latest version: 1.0.8

## React Flexible DateRange

A flexible and customizable date range picker for React with multiple range selection support. This package was originally developed while working at Coredirection to address specific date range selection requirements in enterprise applications.

## Background

This package was developed during my time at Coredirection to solve complex date range selection challenges in enterprise applications. The existing solutions didn't provide the flexibility and customization options we needed for handling multiple date ranges with specific business rules.

### Features

- 📅 Multiple date range selections
- 📱 Responsive design (mobile-friendly)
- 🎨 Customizable theme
- 🌍 Internationalization support
- ⌨️ Keyboard navigation
- 🎯 TypeScript support
- 🎨 Tailwind CSS integration

### Installation

```bash
npm install react-flexible-daterange
# or
yarn add react-flexible-daterange
```

### Basic Usage

```tsx
import { Calendar } from 'react-flexible-daterange';
import type { DateRange } from 'react-flexible-daterange';

function App() {
  const [dateRanges, setDateRanges] = useState<DateRange[]>([]);

  return (
    <Calendar
      value={dateRanges}
      onChange={setDateRanges}
      maxDays={7}
    />
  );
}
```

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | DateRange[] | [] | Selected date ranges |
| onChange | (ranges: DateRange[]) => void | - | Callback when ranges change |
| maxDays | number | 7 | Maximum total days that can be selected |
| minDate | Date | - | Minimum selectable date |
| maxDate | Date | - | Maximum selectable date |
| disabledDates | Date[] | - | Array of disabled dates |
| weekStartsOn | 0-6 | 0 | First day of week (0 = Sunday) |
| locale | string | 'en' | Locale for date formatting |
| theme | CalendarTheme | - | Custom theme options |
| showWeekNumbers | boolean | false | Show week numbers |
| monthsToShow | 1 \| 2 | 2 | Number of months to display |
| allowPastDates | boolean | false | Allow selecting past dates |
| formatDate | (date: Date) => string | - | Custom date formatting |
| className | string | - | Additional CSS classes |

### Theme Customization

```tsx
const theme: CalendarTheme = {
  colors: {
    primary: '#3B82F6',
    secondary: '#EFF6FF',
    hover: '#DBEAFE',
    disabled: '#E5E7EB',
    text: '#1F2937',
    textDisabled: '#9CA3AF',
  },
  borderRadius: '0.5rem',
  fontFamily: 'Inter, sans-serif',
};

<Calendar
  value={dateRanges}
  onChange={setDateRanges}
  theme={theme}
/>
```
### Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

### License

MIT

## Author

Muhammad Nabeel Mehmood
npm package: @nabeelvalley/angularfileinput
Description: A Simple drag and drop file input for Angular
Author: Nabeel Valley
Latest version: 0.2.3

# AngularFileInput
A simple drag and drop file input for Angular. Currently only supports single file uploads.

The npm package can be found [here](https://www.npmjs.com/package/@nabeelvalley/angularfileinput)

## Usage
### AppModule
Include the following in your project's NgModule declarations:

```typescript
...
@NgModule({
  declarations: [
    ...
	FileInput
  ],
  ...
```

## File Input Component
### Input
The Component has two main inputs, one for the accepted file types and the other for the display text, which are by default set to "*", and "Click or Drag to Upload a File" respectively.

```typescript
  @Input('accepts') accepts : string = "*";
  @Input('displayText') displayText : string = "Click or Drag to Upload a File";
```

Alternatively the styling on the component can be passed in by means of an HTML inline style set as the following input: 

```
  @Input("styles")
  styles: string =
    "height : 100px; width : 100%; padding : 20px;";
```

### Outputs
The Component has two output events, the File Metadata as a `File` and the File Data as a `Uint8Array`, these must be handled by the parent component.

```typescript
  @Output() fileMetaSet = new EventEmitter<File>();
  @Output() fileDataSet = new EventEmitter<Uint8Array>();
```

## Parent Component
### HTML
The Component should be included in the HTML for the parent component with an accepted file type and event handlers for the `fileDataSetSet` and `fileMetaSetSet` events.

```html
<file-input [accepts]="'image/*'" (fileDataSet)="setfileDataSet($event)" (fileMetaSet)="setfileMetaSet($event)"></file-input>
```

```typescript
  setfileMetaSet(event: File){
    this.fileMeta = event;
  }

  setfileDataSet(event: Uint8Array){
    this.fileData = event;
  }
```
npm package: @nabeelvalley/project-init
Description: Command line application for quickly generating projects based on starter templates
Latest version: 1.0.0

![Publish Node.js Package](https://github.com/nabeelvalley/project-init/workflows/Publish%20Node.js%20Package/badge.svg)

# Starter Templates

Preconfigured Starter templates for different frameworks, languages, and configurations

## Usage

```sh
npx @nabeelvalley/project-init
```

And then select a template and a name for your project. The CLI will then initialize a template with your file contents in the selected directory

## Included Templates

### Typescript Static

The `ts-static` template is a Typescript template for a static site using:

- `typescript` as the language and `tsc --watch` to scan for errors
- `parcel` to compile the application and run the development server
- `concurrently` to run the dev server and error watch at the same time
- A `.prettierrc` config file for formatting with Prettier

### Typescript Node

The `ts-node` template is a Typescript template for Node.js applications using:

- `typescript` as the language and the Typescript compiler to compile
- Includes a `.vscode/launch.json` for debugging
- A `.prettierrc` config file for formatting with Prettier

### Gatsby + MDX + Tailwind

The `gatsby-mdx-tailwind` template is a Javascript Gatsby template using:

- `mdx` for page generation
- `tailwindcss` for styling
- `framer motion` is installed for animations, but the template does not use it
- A `.prettierrc` config file for formatting with Prettier
npm package: @nabh/index-ts-creator
Description: Simple utility that creates index.ts file that imports and reexports all .ts files in a directory
Author: Padmanabh Dabke
Latest version: 1.1.3

# index-ts-creator
index-ts-creator is a simple utility to create an index.ts files that imports and re-exports all 
Typescript modules in a directory. For example if you have the following directory structure in
your typescript project:
```
<project-root>
  |
  - src
      Class1.ts
      Class2.ts
```
Running `index-ts-creator src` from project root directory will generate `index.ts` file in the
`src` directory with the following content:
```
export * from "./Class1";
export * from "./Class2";
```
## Usage
Install globally or locally
```
npm i [-g] @nabh/index-ts-creator
```
Create index.ts file in current directory
```
index-ts-creator
```

Create index.ts file in directory `src`
```
index-ts-creator src
```
npm package: @nabidam/react-captcha
Description: Captcha component for reactjs
Author: navid
Latest version: 1.2.0

# Reusable react captcha component

It's a react component that you can use it to generate captcha very easy.

Demo: [nabidam-react-captcha.netlify.app](https://nabidam-react-captcha.netlify.app/)

## Installation

```bash
npm install @nabidam/react-captcha
```

## Usage

### Simple usage

1. Import the component.

    ```javascript
    import { Captcha } from "@nabidam/react-captcha"
    ```

2. Define your `state`. We are going to pass setter to the component.

    ```javascript
    const [captcha, setCaptcha] = useState("");
    ```

3. Use the component.

    ```javascript
    <Captcha setWord={setCaptcha}/>
    ```

4. When the parent component is rendered, `setCaptcha` will fire and the value assigned to `captcha`.

### Reload when validation failed

You can reload the captcha whenever user submits the wrong value.

1. Use `useRef` to define a reference to the component.

    ```javascript
    const captchaRef = useRef();
    .
    .
    .
    <Captcha setWord={setCaptcha} ref={captchaRef} />
    ```

2. Call method `initializeCaptcha` from the component whenever user submits wrong value.

    ```javascript
    if(userInput !== captcha){
        // your code
        captchaRef.current.initializeCaptcha();
    }
    ```


## Props

|        name        |     type     |    default     |                      description                      |
| :----------------: | :----------: | :------------: | :---------------------------------------------------: |
|      setWord       |   function   |       -        |           callback to store captcha value.            |
| numberOfCharacters |    number    |       4        |       number of characters to generate captcha        |
|    persianChars    |   boolean    |     false      |           use persian letters to generate?            |
|     reloadText     |    string    | Reload Captcha |               text of the reload button               |
|      reloadEl      | html element |       -        | you can pass reload element entirely to the component |
|  backgroundColor   | color strong |    #0c0c0c     |                color of the background                |
|     fontColor      | color string |      #fff      |                   color of the text                   |
npm package: @nabin02/nodejs-library
Description: An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.
Author: Faceki
Latest version: 0.0.1-development

# Faceki Nodejs Library

An npm package for provide all faceki api integration library

## Get Started

1. Run `npm install` in your terminal
2. Run `npm run build` in your terminal
3. Run `node server` in your terminal
4. Test in postman like http://localhost:4848/kyc-verification

## License

This code is available as open source under the MIT License.