open-index/open-npm huggingface dataset:
npm package: @pelumi_coder/react-native-floating-bubble
Description: A floating bubble component for React Native (compatible with 0.76+). Fork of hybriteq/react-native-floating-bubble
Latest version: 1.0.9


# react-native-floating-bubble


A simple Facebook Chat Head like bubble for react native. Special thanks to [bubble-for-android](https://github.com/txusballesteros/bubbles-for-android) because this is just react native wrapper for that library. 

![Preview](https://github.com/hybriteq/react-native-floating-bubble/raw/master/preview.gif)




## Installation

`$ npm install react-native-floating-bubble --save`

### Mostly automatic installation

`$ react-native link react-native-floating-bubble`

### Manual installation


#### Android

1. Open up `android/app/src/main/java/[...]/MainActivity.java`
  - Add `import com.reactlibrary.RNFloatingBubblePackage;` to the imports at the top of the file
  - Add `new RNFloatingBubblePackage()` to the list returned by the `getPackages()` method
2. Append the following lines to `android/settings.gradle`:
  	```
  	include ':react-native-floating-bubble'
  	project(':react-native-floating-bubble').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-floating-bubble/android')
  	```
3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
  	```
      compile project(':react-native-floating-bubble')
  	```


#### iOS

1. This library is not supported for iOS. This functionality is not there.

## Usage

### Methods

```javascript
import { showFloatingBubble, hideFloatingBubble, requestPermission, initialize } from "react-native-floating-bubble"

// To display the bubble over other apps you need to get 'Draw Over Other Apps' permission from androind.
// If you initialize without having the permission App could crash
requestPermission()
	.then(() => console.log("Permission Granted"))
	.catch(() => console.log("Permission is not granted"))
	
// Initialize bubble manage
initialize()
	.then(() => console.log("Initialized the bubble mange"))


// Show Floating Bubble: x=10, y=10 position of the bubble
showFloatingBubble(10, 10)
	.then(() => console.log("Floating Bubble Added"));

// Hide Floatin Bubble
hideFloatingBubble()
	.then(() => console.log("Floating Bubble Removed"));
```
### Events

You can listen to bubble press and bubble remove events using `DeviceEventEmitter`. 

Events: `floating-bubble-press`, `floating-bubble-remove`

```javascript
    DeviceEventEmitter.addListener("floating-bubble-press", (e) => {
		// What to do when user press the bubble
		console.log("Press Bubble")
    });
    DeviceEventEmitter.addListener("floating-bubble-remove", (e) => {
		// What to do when user removes the bubble
		console.log("Remove Bubble")
    });
```


  ### Change Bubble Icon

 Place the icon file as `android/app/src/main/res/drawable/bubble_icon.png` 
 

 ## Contribute 

 If you want to contribute the source code is here.
  https://github.com/hybriteq/react-native-floating-bubble
npm package: @pelumoses/timepicker
Description: A customizable React time picker component with dropdown interface
Author: Pelu
Latest version: 1.0.0

# React TimePicker Component

A customizable React time picker component with dropdown interface built with TypeScript.

## Features

- 🕐 12-hour time format with AM/PM selection
- 🎨 Customizable styling with Tailwind CSS classes
- 📱 Responsive design
- ♿ Accessible with proper ARIA attributes
- 🔧 TypeScript support
- 🎯 Moment.js integration for time handling

## Installation

```bash
npm install @pelumoses/timepicker
```

## Usage

```jsx
import React, { useState } from 'react';
import { TimePicker } from 'react-timepicker-component';
import moment from 'moment';

function App() {
  const [selectedTime, setSelectedTime] = useState(null);

  const handleTimeChange = (time) => {
    setSelectedTime(time);
    console.log('Selected time:', time?.format('hh:mm A'));
  };

  return (
    <div>
      <TimePicker
        value={selectedTime?.format('hh:mm A')}
        onChange={handleTimeChange}
        placeholder="Select time"
        className="w-64"
      />
    </div>
  );
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `className` | `string` | `''` | Additional CSS classes for styling |
| `placeholder` | `string` | `'Select time'` | Placeholder text for the input |
| `clearIcon` | `React.ReactNode` | `null` | Custom clear icon component |
| `value` | `string` | `undefined` | Controlled value for the time picker |
| `onChange` | `(time: moment.Moment \| null) => void` | `undefined` | Callback function when time changes |

## Styling

The component uses Tailwind CSS classes for styling. You can customize the appearance by:

1. **Overriding classes**: Pass custom `className` prop
2. **CSS customization**: Target the component's classes in your CSS
3. **Tailwind configuration**: Extend your Tailwind config to include custom colors

### Default Classes Used

- `bg-elr-gray`: Background color for input and hover states
- `text-elr-green`: Text color for selected items
- `text-elr-black-400`: Text color for clear button

## Dependencies

- React (>=16.8.0)
- React DOM (>=16.8.0)
- Moment.js (>=2.29.4)

## Development

```bash
# Install dependencies
npm install

# Build the package
npm run build

# Development mode with watch
npm run dev

# Clean build directory
npm run clean
```

## License

MIT

## Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
npm package: @pelusa/create-node-ts-boilerplate
Description: NodeJS Typescript Boilerplate
Author: Tomás Catena
Latest version: 0.0.15

# NodeJS TypeScript Boilerplate

This project is a boilerplate for creating applications using Node.js and TypeScript.

## Features

 - Node.js
 - TypeScript
 - ESLint for linting
 - Jest for testing
 - Husky for Git hooks

## Requirements

Make sure you have the following software installed on your machine:

 - Node.js 16.x or later
 - NPM 6.x or later

## Getting Started

Follow these steps to get started with the boilerplate:

1. Clone the repository:

    ```
    git clone https://github.com/tomascatena/node-typescript-boilerplate.git
    ```

2. Install the dependencies:

    ```
    npm install
    ```

3. Compile TypeScript to JavaScript:

    ```
    npm run build
    ```

4. Start the application in development mode:

    ```
    npm run dev
    ```

4. Start the application in production mode:

    ```
    npm start
    ```


## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
npm package: @pelusa/create-react-ts-boilerplate
Description: React/Typescript Starter Project
Author: Tomás Catena
Latest version: 0.0.7

# React Typescript App Boilerplate

A boilerplate/starter project for quickly building React projects using Typescript, Material UI, React Router and more.

By running a single command, you will get a production-ready React App installed and fully configured on your machine.

## Quick Start

To create a project, simply run:

```bash
npx @pelusa/create-react-ts-boilerplate <project-name>
```

Or

```bash
npm init nodejs-express-app <project-name>
```

## Manual Installation

If you would still prefer to do the installation manually, follow these steps:

Clone the repo:

```bash
git clone --depth 1 https://github.com/tomascatena/react-boilerplate
cd react-boilerplate
npx rimraf ./.git
```

Install the dependencies:

```bash
npm install
```

Set the environment variables:

```bash
cp .env.example .env

# open .env and modify the environment variables (if needed)
```

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

## Project Structure

```
src\
 |--assets\         # Globally available assets like images, svgs, videos, etc
 |--components\     # Components used in the project
 |--constants\      # Constants like API Endpoints, routes, etc
 |--hooks\          # Custom React hooks
 |--pages\          # All the pages of the project
 |--store\          # Redux store
 |--themes\         # MUI themes
 |--typings\        # Types
 |--App.js          # React app
 |--index.js        # App entry point
```
npm package: @pemako.io/pemako-client
Description: React SDK that makes your app Pemako-aware—drop in two-way AI chat with dynamic Gompa components in just a few lines.
Author: Guilherme da Silveira
Latest version: 0.1.1

# Pemako Client Code Organization

This directory contains the code for the Pemako Client.

## Directory Structure

- `context/`: Contains React context providers
  - `PemakoContext.tsx`: Core context provider for the application

- `hooks/`: Custom React hooks
  - `usePemakoContext.ts`: Hook for accessing the Pemako context
  - `usePemakoSession.ts`: Hook for interacting with a specific Pemako session

- `services/`: Business logic separated into services
  - `websocket/`: WebSocket-related functionality
    - `WebSocketService.ts`: Handles WebSocket connection and message processing
  - `gompa/`: Gompa component management
    - `GompaService.ts`: Manages gompa registration, state, and actions
  - `message/`: Message handling 
    - `MessageService.ts`: Handles sending and receiving messages

- `types/`: TypeScript type definitions (imported by all modules)

## Architecture Overview

The application follows a service-oriented architecture where:

1. The `PemakoContext` provides application-wide state and methods
2. Services handle specific domain logic and are imported by the context
3. Hooks provide React components with access to context functionality


## Usage
Import the hooks for use in components:

```typescript
import { usePemakoContext, usePemakoSession } from './pemako-client';

// Use the global context
const { createSession } = usePemakoContext();

// Or work with a specific session
const { sendMessage, messages, isLoading } = usePemakoSession(sessionId);
```
npm package: @pembajak/react-native-agora-rawdata
Description: The rawdata plugin for react-native-agora
Author: HUI
Latest version: 0.2.1

# react-native-agora-rawdata

The rawdata plugin for [react-native-agora](https://www.npmjs.com/package/react-native-agora).

## Important

The plugin only exports four methods to the javascript layer that can register or unregister the observer.

```ts
type AgoraRawdataType = {
  registerAudioFrameObserver(engineHandle: number): Promise<void>;

  unregisterAudioFrameObserver(): Promise<void>;

  registerVideoFrameObserver(engineHandle: number): Promise<void>;

  unregisterVideoFrameObserver(): Promise<void>;
};
```

The plugin changes the color of the video stream by the default:

* Change local video to green
* Change remote video to pink

You can find the code at:

* Android: [AgoraRawdataModule.kt](android/src/main/java/io/agora/rtc/rawdata/react/AgoraRawdataModule.kt)
  * Local video: `onCaptureVideoFrame`
  * Remote video: `onRenderVideoFrame`
* iOS: [AgoraRawdata.swift](ios/React/AgoraRawdata.swift)
  * Local video: `onCapture`
  * Remote video: `onRenderVideoFrame`

**If you can program with C++, you should process raw data on the C++ layer to improve performance and remove code about
calling Android and iOS.**

You can find the code at:

* Android:
  * Audio: [AudioFrameObserver.cpp](cpp/android/AudioFrameObserver.cpp)
  * Video: [VideoFrameObserver.cpp](cpp/android/VideoFrameObserver.cpp)
* iOS:
  * Audio: [AgoraAudioFrameObserver.mm](ios/Base/AgoraAudioFrameObserver.mm)
  * Video: [AgoraVideoFrameObserver.mm](ios/Base/AgoraVideoFrameObserver.mm)

## Installation

```shell
npm install react-native-agora-rawdata
```

**You should fork this repository, and modify the code to implement your requirement, such as use third-party beauty SDK.**

## Usage

```js
import AgoraRawdata from "react-native-agora-rawdata";
import RtcEngine from 'react-native-agora';

const agora = await RtcEngine.create(appId);
await AgoraRawdata.registerAudioFrameObserver(
  await agora.getNativeHandle()
);
await AgoraRawdata.registerVideoFrameObserver(
  await agora.getNativeHandle()
);
```

## Resources

* [Doc](https://docs.agora.io/en/Interactive%20Broadcast/landing-page?platform=React%20Native) for `react-native-agora`
* [Doc](https://docs.agora.io/en/Interactive%20Broadcast/raw_data_video_android?platform=Android) for Android raw video
  data
* [Doc](https://docs.agora.io/en/Interactive%20Broadcast/raw_data_video_apple?platform=iOS) for iOS raw video data

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @pembajak/react-native-esme-ui-kit
Description: UI Kit for personal use
Author: pembajak
Latest version: 0.6.11

# react-native-esme-ui-kit

UI Kit for personal use

## Installation

```sh
npm install react-native-esme-ui-kit
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @pembajak/react-native-keyboard-avoiding-scroll-view
Description: React Native ScrollView extension that prevents inputs from being covered by the keyboard
Author: Ayan Yenbekbay
Latest version: 0.0.2

# react-native-keyboard-avoiding-scroll-view

[![npm version](https://img.shields.io/npm/v/react-native-keyboard-avoiding-scroll-view.svg)](https://www.npmjs.org/package/react-native-keyboard-avoiding-scroll-view)
[![CircleCI Status](https://img.shields.io/circleci/project/github/alkafinance/react-native-keyboard-avoiding-scroll-view/master.svg)](https://circleci.com/gh/alkafinance/workflows/react-native-keyboard-avoiding-scroll-view/tree/master)
![license: MIT](https://img.shields.io/npm/l/react-native-keyboard-avoiding-scroll-view.svg)
![Supports Android and iOS](https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

React Native ScrollView extension that prevents inputs from being covered by the keyboard.

<img src="./.github/demo.gif" width="auto" height="640">

## Getting started

`$ npm install react-native-keyboard-avoiding-scroll-view --save`

## Usage

Import `KeyboardAvoidingScrollView`, `KeyboardAvoidingFlatList`, or `KeyboardAvoidingSectionList` and use them like the regular `ScrollView`, `FlatList` or `SectionList` components from React Native core. Internally, these components are wrapped in another custom component called `KeyboardAvoidingContainer`, which is also exported for advanced use cases.

```javascript
import {KeyboardAvoidingScrollView} from 'react-native-keyboard-avoiding-scroll-view';

function MyComponent() {
  return (
    <KeyboardAvoidingScrollView stickyFooter={<Button />}>
      <TextInput />
      <TextInput />
      <TextInput />
    </KeyboardAvoidingScrollView>
  )
}
```

## Props

- [Inherited `ScrollView` props...](https://facebook.github.io/react-native/docs/scrollview.html#props)
  - or [inherited `FlatList` props...](https://facebook.github.io/react-native/docs/flatlist#props)
  - or [inherited `SectionList` props...](https://facebook.github.io/react-native/docs/sectionlist#props)

- [`stickyFooter`](#stickyFooter)
- [`containerStyle`](#containerStyle)

---

# Reference

## Props

### `stickyFooter`

Used to display a fixed view under the scrollable content. Sticky footer is always shown above the keyboard, which could, for example, be the desired behaviour for a submit button.

| Type              | Required |
| ----------------- | -------- |
| `React.ReactNode` | No       |

---

### `containerStyle`

Used to style the container component.

| Type                   | Required |
| ---------------------- | -------- |
| `StyleProp<ViewStyle>` | No       |

## License

[MIT License](./LICENSE) © Alka, Inc
npm package: @pembajak/react-native-slideable-calender
Description: Slideable calender for react native
Author: pembajak
Latest version: 0.2.0

# react-native-slideable-calender

Slideable calender for react native

## Installation

```sh
npm install react-native-slideable-calender
```

## Usage

```js
import SlideableCalender from "react-native-slideable-calender";

// ...

const result = await SlideableCalender.multiply(3, 7);
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT
npm package: @pemol/payload-cloudinary
Description: A Cloudinary storage plugin for Payload CMS
Author: Syed Muzamil
Latest version: 1.6.1

# Payload CMS Cloudinary Plugin

A plugin for [Payload CMS](https://payloadcms.com/) that integrates Cloudinary as a storage adapter for media files. This plugin allows you to seamlessly store and manage your media files on Cloudinary while using Payload CMS.

## Features

- 🚀 Seamless integration with Payload CMS
- 📦 Automatic file upload to Cloudinary
- 🗑️ Automatic file deletion from Cloudinary
- 🔗 URL generation for stored files
- 📁 Customizable folder structure
- 🎛️ Static file handling
- 💾 Optional local storage disable

## Installation

```bash
npm i payload-cloudinary
```

## Configuration

Here's how to use the plugin in your Payload CMS configuration:

```typescript
import { cloudinaryStorage } from 'payload-cloudinary'

const config = buildConfig({
  // ... your payload config
  plugins: [
    cloudinaryStorage({
      config: {
        cloud_name: 'your-cloud-name',
        api_key: 'your-api-key',
        api_secret: 'your-api-secret'
      },
      collections: {
        'media': true, // Enable for media collection
        // Add more collections as needed
      },
      folder: 'your-folder-name', // Optional, defaults to 'payload-media'
      disableLocalStorage: true, // Optional, defaults to true
      enabled: true // Optional, defaults to true
    })
  ]
})
```

## Options

- `config`: Your Cloudinary configuration credentials
  - `cloud_name`: Your Cloudinary cloud name
  - `api_key`: Your Cloudinary API key
  - `api_secret`: Your Cloudinary API secret
- `collections`: Specify which collections should use Cloudinary storage
- `folder`: The folder path in Cloudinary where files will be uploaded (default: 'payload-media')
- `disableLocalStorage`: Whether to disable local storage (default: true)
- `enabled`: Whether to enable the plugin (default: true)

## Development

To run the project in development mode:

```bash
bun run src/index.ts
```

## Requirements

This project uses [Bun](https://bun.sh) as its JavaScript runtime. Make sure you have Bun installed (v1.1.38 or later).

## License

This project is open-source. See the LICENSE file for more details.

## Contact

For any questions or support, please contact me at [Syed Muzamil](https://x.com/syedmuzamilm).
npm package: @pemonter/eslint-config
Description: ESLint configuration.
Author: Pedro Monteiro
Latest version: 2.0.10

# ESLint config

## Whats included?

- Standard config base;
- React plugin;
- React Hooks plugin;
- JSX a11y plugin;
- Prettier;

## Setup

1. Install the dependencies
```
npm i -D eslint @pemonter/eslint-config
```

2. Create a `eslint.config.js` file extending the config:
```
import reactEslintConfig from '@pemonter/eslint-config/react.js';

export default [
  { ignores: ['dist/**', 'node_modules/**'] },
  ...reactEslintConfig,
]
```
npm package: @penalara/custom-flexbox
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.0.
Author: Peñalara Software
Latest version: 1.20.1

# CustomFlexbox

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.0.

## Code scaffolding

Run `ng generate component component-name --project custom-flexbox` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project custom-flexbox`.
> Note: Don't forget to add `--project custom-flexbox` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build custom-flexbox` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build custom-flexbox`, go to the dist folder `cd dist/custom-flexbox` and run `npm publish`.

## Running unit tests

Run `ng test custom-flexbox` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.