open-index/open-npm huggingface dataset:
npm package: @harshsrv/react-local-storage
Description: This module helps you to access Local Storage easily
Author: github.com/harsh-sri
Latest version: 1.0.0

# local-storage
This module helps you to access Local Storage easily: ReactJS

## Install

```bash
npm install localstorage
```

## Example

```javascript
import { localStorage } from 'localStorage';
//save Object into local storage
localStorage.setObj('user', {'foo':'bar'});
// get object from local storage
localStorage.getObj('user');
// save string/number into local storage
localStorage.set('name', 'harsh');
//get value from local storage by key name
localStorage.get('name');
// remove item from local storage
localStorage.remove('keyname');
// clear local storage 
localStorage.clear();
```

## License

MIT
npm package: @harshtalks/image-tiptap
Description: A Tiptap extension for React.js to add image resize and alignment options to the image extension.
Author: Harsh Pareek
Latest version: 1.5.0

# Image Extension with Resize and Alignment for React.js

It extends tiptap image extension to support image resizing and alignment in React.js.
Existing third party/unofficial plugins are not flexible.
This package contains -
1. UI headless components to render alignment menu in a bubble menu.
2. Image extension extended from tiptap-extension-image to support resizing and alignment out of the box

It supports both useEditor hook and EditorProvider from tiptap.


## Installation

Installing the package using pnpm

```bash
  pnpm add @harshtalks/image-tiptap
```

 You can use npm, bun, or yarn etc.

## Usage

 ```tsx
import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import { ImageExtension, ImageAligner } from "@harshtalks/image-tiptap";
import "./globals.css";
import { useCallback } from "react";

export default function Home() {
  const editor = useEditor({
    extensions: [StarterKit, ImageExtension],
    content:
      "<p>This is a basic example of implementing images. Drag to re-order.</p>",
  });

  const addImage = useCallback(() => {
    const url = window.prompt("URL");

    if (url) {
      editor?.chain().focus().setImage({ src: url }).run();
    }
  }, [editor]);

  if (!editor) {
    return null;
  }

  return (
    <div className="p-12">
      <button type="button" onClick={addImage}>
        Add Image
      </button>

      <div>
        <ImageAligner.Root editor={editor}>
          <ImageAligner.AlignMenu>
            <ImageAligner.Items className="bg-white flex items-center border text-white rounded p-4">
              <ImageAligner.Item alignment="left">Left Align</ImageAligner.Item>
              <ImageAligner.Item alignment="center">
                Center Align
              </ImageAligner.Item>
              <ImageAligner.Item alignment="right">
                Right Align
              </ImageAligner.Item>
            </ImageAligner.Items>
          </ImageAligner.AlignMenu>
        </ImageAligner.Root>
      </div>

      <EditorContent className="p-8 border rounded-md" editor={editor} />
    </div>
  );
}

```
npm package: @harshtalks/pnpmt
Description: command-line tool for running commands directly in nested packages from the root of a pnpm workspace. It helps streamline development across multi-package monorepos
Author: Harsh Pareek
Latest version: 0.6.0

# PNPMT

PNPMT is a command-line tool for running commands directly in nested packages from the root of a pnpm workspace. It helps streamline development across multi-package monorepos.

## 🚀 Features

- Execute scripts in nested workspace packages from the root.
- List and group packages easily.
- Supports shell completions.
- Configurable log levels and wizard mode.

## 📦 Installation

```bash
pnpm install -g @harshtalks/pnpmt
```

## 🧭 Usage

```bash
$ pnpmt
```

You will see:

```bash
PNPMT v1.0.0

USAGE
  $ pnpmt

DESCRIPTION
  A CLI application for running commands in nested packages directly from the root — works for pnpm workspaces.
```

## 🧩 Commands

```
| Command | Description |
| --- | --- |
| `list` | List all packages in the pnpm workspace. |
| `group [<scriptName> (optional)]` | Group packages by their dependencies. |
| `add <packageName>` | Install a package on multiple apps concurrently. |
```

## Example

```bash
pnpmt list
pnpmt group build
pnpmt add typescript
```
npm package: @harshzalavadiya/expo-document-picker
Description: Provides access to the system's UI for selecting documents from the available providers on the user's device.
Author: 650 Industries, Inc.
Latest version: 9.1.8

# expo-document-picker

Provides access to the system's UI for selecting documents from the available providers on the user's device.

# API documentation

- [Documentation for the master branch](https://github.com/expo/expo/blob/master/docs/pages/versions/unversioned/sdk/document-picker.md)
- [Documentation for the latest stable release](https://docs.expo.io/versions/latest/sdk/document-picker/)

# Installation in managed Expo projects

For managed [managed](https://docs.expo.io/versions/latest/introduction/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](https://docs.expo.io/versions/latest/sdk/document-picker/).

# Installation in bare React Native projects

For bare React Native projects, you must ensure that you have [installed and configured the `react-native-unimodules` package](https://github.com/expo/expo/tree/master/packages/react-native-unimodules) before continuing.

### Add the package to your npm dependencies

```
expo install expo-document-picker
```

### Configure for iOS

Run `npx pod-install` after installing the npm package.

### Configure for Android

No additional set up necessary.

### Plugin

In order to enable Apple iCloud storage in managed EAS builds, you'll need to define the `appleTeamId` property in the config plugin:

`app.json`

```json
{
  "ios": {
    "usesIcloudStorage": true,
    "bundleIdentifier": "com.yourname.yourapp"
  },
  "plugins": [
    [
      "expo-document-picker",
      {
        "appleTeamId": "YOUR_TEAM_ID"
      }
    ]
  ]
}
```

> Running `expo eject` will generate a the native project locally with the applied changes in your iOS Entitlements file.

# Contributing

Contributions are very welcome! Please refer to guidelines described in the [contributing guide](https://github.com/expo/expo#contributing).
npm package: @harshzalavadiya/transition
Description: Common transition components for Chakra UI
Author: Segun Adebayo
Latest version: 1.0.2

# @chakra-ui/transition

## Installation

```sh
yarn add @chakra-ui/transition
# or
npm i @chakra-ui/transition
```

## Collapse

The Collapse component is used to create regions of content that can
expand/collapse with a simple animation. It helps to hide content that's not
immediately relevant to the user.

## Import component

```jsx
import { Collapse } from "@chakra-ui/transition"
```

## Usage

```jsx
function SampleSpring() {
  const { isOpen, onToggle } = useDisclosure()
  return (
    <>
      <Button onClick={onToggle}>Click</Button>
      <Collapse isOpen={isOpen}>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
        labore wes anderson cred nesciunt sapiente ea proident.
      </Collapse>
    </>
  )
}
```

## Changing the starting height

```jsx
function Example() {
  const [show, setShow] = React.useState(false)

  const handleToggle = () => setShow(!show)

  return (
    <>
      <Collapse startingHeight={20} isOpen={show}>
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
        labore wes anderson cred nesciunt sapiente ea proident.
      </Collapse>
      <Button size="sm" onClick={handleToggle} mt="1rem">
        Show {show ? "Less" : "More"}
      </Button>
    </>
  )
}
```

// TODO: Explain the `framer-motion` part and how to customize the motion
variants