open-index/open-npm huggingface dataset:
npm package: @patelvivekdev/ts-npm-template
Description: A template for npm packages with TypeScript
Author: Vivek Patel
Latest version: 1.0.0

# TypeScript NPM Package Template

A modern, efficient template for creating NPM packages using TypeScript.

## Why This Template?

- 🚀 Zero configuration setup
- 📦 Modern module bundling with tsup
- 🔍 Type-safe by default
- ⚡ Ultra-fast development with Bun
- 🧪 Comprehensive testing setup with Vitest
- 🔄 Continuous Integration ready

## Getting Started

1. Clone this template
2. Install dependencies:
   ```sh
   bun install
   ```
3. Start development:
   ```sh
   bun run dev
   ```
4. Build your package:
   ```sh
   bun run build
   ```
5. Publish your package:
   ```sh
   bun run local-release
   ```

## Project Structure

```
├── src/             # Source code with tests
├── dist/            # Built package (generated)
├── .github/         # GitHub workflows
└── .changeset/      # Changeset configs
```

## Important Resources

- [TSConfig Reference](https://www.typescriptlang.org/tsconfig)
- [Bun Documentation](https://bun.sh/docs)
- [Vitest Documentation](https://vitest.dev/)
- [tsup Documentation](https://tsup.egoist.dev/)
- [TypeScript Config Cheat Sheet](https://www.totaltypescript.com/tsconfig-cheat-sheet)

## License

MIT © Vivek Patel
npm package: @paterm/library
Description: Conditional rendering to react
Author: a.a.efimov
Latest version: 1.3.1

# React Library 🍋

## Components

React If Conditions:
```js
<If condition={true}>
  <Then>Awesome text</Then>
  <ElseIf>ElseIf awesome text</ElseIf>
  <Else>Else awesome text</Else>
</If>
```

Switch
```js
<Switch expression='red' >
  <Case value='red'>
    Red
  </Case>
  <Case value='green'>
    Green
  </Case>
  <Case value='gray'>
    Gray
  </Case>
  <Default>
    Default
  </Default>
</Switch>
```

Portal
```js
<Portal container={document.body}>
  {children}
</Portal>
```

## Utils

Plural (declension of words)
```js
Plural(5, ['лимон', 'лимона', 'лимонов']) // => 5 лимонов
```

DownloadBlob (downloading blob as file)
```js
DownloadBlob(Blob, filename)
```

## React Hooks

usePrev
```js
const prevValue = usePrev(value)
```

useDebounce
```js
const debouncedValue = useDebounce(value, delay = 600)
```
npm package: @pateta/storybook-addon-issue-collector
Description: A Storybook addon for collecting issues.
Author: Matias Thomsen
Latest version: 0.2.1

# Storybook Addon Issue Collector

This addon for Storybook adds a tab with controls to create a link used to open a ticket system and prefill an issue form.

## Getting Started

Install the addon and its dependencies.

With NPM:

```sh
npm i --save-dev @goofy-code/storybook-addon-issue-collector
```

### Registering the addon

```js
// .storybook/main.js

module.exports = {
  // ...
  addons: [
    "@goofy-code/storybook-addon-issue-collector",
    // ...
  ],
};
```

### Configuration
```js
// TBD
```
npm package: @path-tree/collection
Description: Provides a hierarchy of directories and files from a one-dimensional array of objects, including.
Latest version: 0.3.2

# [@path-tree/collection](https://github.com/Himenon/path-tree/tree/master/packages/collection)

[![npm version](https://badge.fury.io/js/%40path-tree%2Fcollection.svg)](https://badge.fury.io/js/%40path-tree%2Fcollection)

## Usage

### Install

```bash
yarn add @path-tree/collection
```

### Basic Usage

```ts
import { collect } from "@path-tree/collection";

collect([
  {
    type: "file",
    path: "a/b/index.js",
  },
  {
    type: "file",
    path: "a/b/c/index.js",
  },
]);
```

The results above are as follows.

```json
{
  "nodes": ["dir:a", "dir:a/b", "dir:a/b/c", "file:a/b/c/index.js", "file:a/b/index.js"],
  "edges": {
    "dir:.": ["dir:a"],
    "dir:a": ["dir:a/b"],
    "dir:a/b": ["dir:a/b/c", "file:a/b/index.js"],
    "dir:a/b/c": ["file:a/b/c/index.js"]
  },
  "data": {
    "dir:a": {
      "type": "dir",
      "path": "a"
    },
    "dir:a/b": {
      "type": "dir",
      "path": "a/b"
    },
    "dir:a/b/c": {
      "type": "dir",
      "path": "a/b/c"
    },
    "file:a/b/c/index.js": {
      "type": "file",
      "path": "a/b/c/index.js"
    },
    "file:a/b/index.js": {
      "type": "file",
      "path": "a/b/index.js"
    }
  }
}
```

## LICENSE

`@path-tree/collection` is [MIT licensed](./LICENSE).
npm package: @path-tree/react
Description: Provides components with a hierarchical structure.
Latest version: 0.3.2

# [@path-tree/react](https://github.com/Himenon/path-tree/tree/master/packages/react)

[![npm version](https://badge.fury.io/js/%40path-tree%2Freact.svg)](https://badge.fury.io/js/%40path-tree%2Freact)

## Usage

[DEMO](https://codesandbox.io/s/react-path-tree-demo-khbxc)

### Install

```bash
yarn add @path-tree/react tslib
```

### Basic Usage

```tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as PathTree from "@path-tree/react";

const props: PathTree.Props = {
  pathItems: [
    {
      type: "file",
      path: "a/b/index.js",
    },
    {
      type: "file",
      path: "a/b/c/index.js",
    },
  ],
};

ReactDOM.render(<PathTree.Component {...props} />, document.querySelector("#root"));
```

### Define components

```tsx
import * as PathTree from "@path-tree/react";

const props: PathTree.Props = {
  FileComponent: (fileProps) => {
    return <p>{fileProps.path}</p>;
  },
  DirectoryComponent: (directoryProps) => {
    return <div>{directoryProps.children}</div>;
  },
  pathItems: [
    {
      type: "file",
      path: "a/b/index.js",
    },
    {
      type: "file",
      path: "a/b/c/index.js",
    },
  ],
};
```

## LICENSE

`@path-tree/react` is [MIT licensed](./LICENSE).
npm package: @path-tree/vue
Description: Provides components with a hierarchical structure.
Latest version: 0.3.2

# [@path-tree/vue](https://github.com/Himenon/path-tree/tree/master/packages/vue)

[![npm version](https://badge.fury.io/js/%40path-tree%2Fvue.svg)](https://badge.fury.io/js/%40path-tree%2Fvue)

## Usage

[DEMO](https://codesandbox.io/s/vue-path-tree-demo-72p76)

### Install

```bash
yarn add @path-tree/vue tslib
```

### Basic Usage

```tsx
import Vue from "vue";
import * as PathTree from "@path-tree/vue";

const props: PathTree.Props = {
  pathItems: [
    {
      type: "file",
      path: "a/b/index.js",
    },
    {
      type: "file",
      path: "a/b/c/index.js",
    },
  ],
};

new Vue({
  render: (createElement) =>
    createElement(PathTree.Component, {
      props,
    }),
}).$mount("#root");
```

#### use `.vue`

```vue
<template>
  <PathTree :pathItems="pathItems"></PathTree>
</template>

<script>
import * as PathTree from "@path-tree/vue";

export default {
  name: "Tree",
  components: {
    PathTree: PathTree.Component,
  },
  data() {
    return {
      pathItems: [
        {
          type: "file",
          path: "a/b/index.js",
        },
        {
          type: "file",
          path: "a/b/c/index.js",
        },
      ],
    };
  },
};
</script>
```

### Define components

```tsx
import * as PathTree from "@path-tree/vue";

const props: PathTree.Props = {
  FileComponent: Vue.extend<PathTree.File.Props>({
    name: "File",
    props: {
      path: {
        type: String,
        required: true,
      },
      name: {
        type: String,
        required: true,
      },
      level: {
        type: Number,
        required: true,
      },
    },
    functional: true,
    render: function (createElement, { props }) {
      return createElement("p", { class: "tree-item file-item" }, props.name);
    },
  }),
  DirectoryComponent: Vue.extend<PathTree.Directory.Data, PathTree.Directory.Methods, PathTree.Directory.Computed, PathTree.Directory.Props>({
    name: "File",
    props: {
      path: {
        type: String,
        required: true,
      },
      name: {
        type: String,
        required: true,
      },
      level: {
        type: Number,
        required: true,
      },
    },
    render(createElement) {
      return createElement("ul", { class: "tree-item directory" }, [
        createElement(
          "li",
          {
            class: "directory-item",
            attrs: {
              "data-open": `${this.isActive}`,
            },
          },
          [
            createElement(
              "span",
              {
                class: "directory-item-name",

                on: {
                  click: () => {
                    this.toggle();
                  },
                },
              },
              this.$props.name,
            ),
          ],
        ),
        this.isActive && this.$slots.default,
      ]);
    },
  }),
  pathItems: [
    {
      type: "file",
      path: "a/b/index.js",
    },
    {
      type: "file",
      path: "a/b/c/index.js",
    },
  ],
};
```

## LICENSE

`@path-tree/vue` is [MIT licensed](./LICENSE).