open-index/open-npm huggingface dataset:
npm package: @srob/files
Description: Helpers to programmatically edit text files, save, diff, folder-diff, etc.
Author: Simon Robert
Latest version: 0.0.12

# @srobfr/files

Helpers to programmatically edit text files, save, diff, folder-diff, etc.

## Installation

This is a library. You can install it using npm :

```sh
npm install --save @srob/files
```

## Usage

File loading, saving and diff-ing :

```js
// test.mjs
import { load } from "@srob/files";

(async () => {
    // Loads the file content if it exists. If the file does not exist, file.content will be null.
    const file = await load("test.md");

    // Change the content (A)
    file.content = `# Sample file

Initial text
`;

    // Writes the new content in the file
    await file.save();

    // Change the content (B)
    file.content = `# Sample file

This file contains some text.

Last edition date : ${new Date()}
`;

    // Compute and prints the diff between (A) and (B).
    console.log(await file.diff());
})();
```

Running this code with `node test.mjs` will typically print :

```
--- /d/w/bench/test.md	2023-10-29 18:19:44.571108700 +0100
+++ /tmp/diff/test.md	2023-10-29 18:19:44.566022491 +0100
@@ -1,3 +1,5 @@
 # Sample file
 
-Initial text
+This file contains some text.
+
+Last edition date : Sun Oct 29 2023 18:19:44 GMT+0100 (Central European Standard Time)
```

The diff implementation can be changed using the `DIFF` environment variable :

`DIFF="diff" node test.mjs`

```
3c3,5
< Initial text
---
> This file contains some text.
> 
> Last edition date : Sun Oct 29 2023 18:22:47 GMT+0100 (Central European Standard Time)
```

Different `diff` commands are tried, using the first available on your system :

- `$DIFF '<original>' '<modified>'`
- `meld '<original>' '<modified>'`
- `colordiff -u '<original>' '<modified>'`
- `diff -u '<original>' '<modified>'`

## Folder diff

It is possible to get a folder diff when multiple files are loaded :

```js
import { folderDiff, load } from "@srob/files";

(async () => {
    // Load a file in a/b folder
    const file1 = await load("/tmp/a/b/file1.md");
    file1.content = `Last edition date : ${new Date()}
`;
    // Load a file in a/c folder
    const file2 = await load("/tmp/a/c/file2.md");
    file2.content = `Last edition date : ${new Date()}
`;

    // Will print a recursive diff at the common parent folder (a) of all the loaded files
    console.log(await folderDiff());
})();
```

Running this code with `node test.mjs` will typically print :

```
diff -Nru /tmp/a/b/file1.md /tmp/folderDiff/b/file1.md
--- /tmp/a/b/file1.md	1970-01-01 01:00:00.000000000 +0100
+++ /tmp/folderDiff/b/file1.md	2023-10-29 19:00:55.519593897 +0100
@@ -0,0 +1 @@
+Last edition date : Sun Oct 29 2023 19:00:55 GMT+0100 (Central European Standard Time)
diff -Nru /tmp/a/c/file2.md /tmp/folderDiff/c/file2.md
--- /tmp/a/c/file2.md	1970-01-01 01:00:00.000000000 +0100
+++ /tmp/folderDiff/c/file2.md	2023-10-29 19:00:55.519593897 +0100
@@ -0,0 +1 @@
+Last edition date : Sun Oct 29 2023 19:00:55 GMT+0100 (Central European Standard Time)
```
npm package: @sromero1905/bina-ui
Description: Librería de componentes UI para Bina con Tailwind CSS preconfigurado
Author: Bina
Latest version: 1.1.0

# @sromero1905/bina-ui

Librería de componentes UI para Bina con Tailwind CSS preconfigurado.

## 🚀 Instalación

```bash
npm install @sromero1905/bina-ui
# o
yarn add @sromero1905/bina-ui
```

## ⚡ Configuración Rápida

### 1. Configurar Tailwind CSS

En tu `tailwind.config.js`, extiende el preset de Bina:

```javascript
// tailwind.config.js
import binaPreset from '@sromero1905/bina-ui/tailwind.preset.js';

/** @type {import('tailwindcss').Config} */
export default {
  presets: [binaPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    // Importante: incluir los componentes de la librería
    "./node_modules/@sromero1905/bina-ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      // Tu configuración adicional aquí
    },
  },
  plugins: [],
}
```

### 2. Importar las fuentes

Agrega estas fuentes en tu HTML o CSS:

```css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
```

## 🎯 Uso

```jsx
import { Button, Card, Badge } from '@sromero1905/bina-ui';

function App() {
  return (
    <Card>
      <h1>Hola Mundo</h1>
      <Button variant="solid" size="md">
        Botón de Bina
      </Button>
      <Badge variant="success">Activo</Badge>
    </Card>
  );
}
```

## 📦 Componentes Disponibles

### Atoms
- `Button`, `LoadingButton`, `DangerButton`, `ArrowButton`, `BackButton`
- `Input`, `Switch`, `Checkbox`, `Calendar`
- `Card`, `Badge`, `Alert`, `Spinner`, `SpinnerSuccess`
- `PageHeader`, `SectionTitle`, `DashboardTitle`

### Molecules
- `FormField`, `EmailInput`, `PhoneInput`, `SearchInput`
- `Stepper`, `MobileStepper`, `ProgressBar`
- `StatusMenu`, `StatsMenu`

## 🎨 Sistema de Diseño

La librería incluye:
- **Paleta de colores completa** de Bina
- **Tipografías optimizadas** (Nunito, Nunito Sans, Manrope)
- **Sombras y espaciado** consistente
- **Componentes responsive** y accesibles

## 📖 Documentación

Visita nuestra [documentación completa](https://github.com/bina/ui) para ver todos los componentes y ejemplos.

## 🤝 Contribuir

1. Fork el proyecto
2. Crea tu feature branch (`git checkout -b feature/nuevo-componente`)
3. Commit tus cambios (`git commit -am 'Agregar nuevo componente'`)
4. Push a la branch (`git push origin feature/nuevo-componente`)
5. Abre un Pull Request

## 📄 Licencia

sromero1905 © Bina
npm package: @sroohani/fs-name-gen
Description: Auto generates random file and folder names that look perfectly natural.
Author: Shahram Roohani
Latest version: 0.0.2

# Natural file and folder name generator

Auto generates random file and folder names that look perfectly natural.

_This is a fork of [natural-filename-generator](https://github.com/ChristianRich/natural-filename-generator/tree/master) by [Christian Rich](https://github.com/ChristianRich)._

### What has changed?

- ES5 to ES6
- JavaScript to TypeScript
- Mocha to Jest
- Dependencies and engines version upgrades

### Installation

```bash
npm install @sroohani/fs-name-gen
```

### Why?

For a recent project I had to auto generate a lot of file and folder names only they could not look auto generated!

Auto generated strings typically look sequential and are easy to spot e.g

file01.jpg  
file01.jpg  
file03.jpg

This module builds strings from:

- 4000 common English words
- 4000 celebrity names (dead and living)
- Names of countries and capitals
- Popular topics
- Random numbers (at random lengths)
- Dates (in various formats)

The generator uses a natural distribution curve following [Zipf's law](https://en.wikipedia.org/wiki/Zipf%27s_law)

### Example

```js
import { NaturalNameGenerator } from "@sroohani/fs-name-gen";

const g = new NaturalNameGenerator();

for (let i = 0; i < 100; i++) {
  let name = g.generate("jpg");
  console.log(name);
}
```
npm package: @srounce/broadcastchannel
Description: send message to other tab in the same origin. use BroadcastChannel as default, use storage event as fallback
Author: legeneek
Latest version: 1.0.2

# tab-channel
send message to other tab in the same origin. use BroadcastChannel default, use storage event as fallback

## Installation
```
npm i --save tab-channel
```

## Usage
As a polyfill for BroadcastChannel:
```javascript
import 'tab-channel/polyfill'
```

Use implementation directly:
```javascript
import { BroadcastChannel as Channel } from 'tab-channel'

// channel name is required
var channel = new Channel('my-channel')

// get channel name
channel.name

// bind message event 
channel.onmessage = function(m) {
  // string msg in data property
  doAnything(m.data)
}

// send message
channel.postMessage('hello world')

// handle error message
channel.onmessageerror = function(e) {
  //e is an Error object
}

// close channel
channel.close()
```
npm package: @sroussey/xyflow-system
Description: xyflow core system that powers React Flow and Svelte Flow.
Latest version: 0.0.20

# @xyflow/system

Core system that powers React Flow and Svelte Flow.

## Installation 

```sh 
npm install @xyflow/system
```

## What is this package about?

The @xyflow/system package was created to have a place for vanilla utils for React Flow and Svelte Flow. The package exports helpers for edge creation, pan and zoom, dragging of nodes, general utils and lots of types. All the helpers are specifically built for React Flow and Svelte Flow so it's probably not too interesting to use them with other libraries. 

### XYPanZoom

Adds zoom and pan for the pane. 

### XYDrag

Adds drag for nodes and selection.

### XYHandle 

Adds connection line drawing.

### XYMinimap 

Adds interactive mini map (zoom and pan).

### Edge utils 

Util function for SVG edge path creating.

### Store utils

Helpers for store functions.

### Dom utils

### Marker utils

### Graph utils

### General utils
npm package: @srph/jqt
Description: A low-level jQuery plugin for node hiding / showing through css transitions.
Author: Kier Borromeo
Latest version: 0.1.3

## jqt
[![npm version](https://img.shields.io/npm/v/@srph/jqt.svg?style=flat-square)](https://www.npmjs.com/package/@srph/jqt)

A *low-level* jQuery plugin for node hiding / showing through css transitions.

Think of it as a low-level version of builtin jQuery animations such as [`$.fadeOut`](http://api.jquery.com/fadeout/), [`$.fadeIn`](http://api.jquery.com/fadein/), [`$.slideUp`](http://api.jquery.com/slideup/), and [`$.slideDown`](http://api.jquery.com/slidedown/) but with css classes. Or maybe something similar to [ng-animate](https://docs.angularjs.org/api/ngAnimate) or [ReactCSSTransitionGroup](https://facebook.github.io/react/docs/animation.html) for single elements in jQuery.

## Use case
I've never found any similar libraries outside frameworks. This library was massively *dogfed* for projects I handle at work, usually for tab transitions, menu animations, etc.
npm package: @srph/jquery-modal
Description: A jQuery plugin to spawn modals with terse API
Author: Kier Borromeo
Latest version: 0.1.1

## jQuery Modal [![npm version](http://img.shields.io/npm/v/@srph/jquery-modal.svg?style=flat)](https://npmjs.org/package/jquery-modal)
[WIP] A jQuery plugin to spawn modals with terse API that also handles Web Accessibility.

[Demo](http://submariner-boar-66106.netlify.com/)

## Why?
- [NIH](https://en.wikipedia.org/wiki/Not_invented_here)
- Most similar plugins out there seem to be feature-complete but complicated

## Goals
- Simple yet customizable
- Terse API
- Transitions
- [Accesible](https://gist.github.com/ryanflorence/fd7e987c832cc4efaa56)

## Unsupported
- Nested modals (will not work)
- Old browsers (may work)

## Usage
```js
<button type="button" data-modal="#my-modal">
  Open Modal
</button>

<div id="my-modal">
  <!-- Modal Markup -->
  <button type="button" data-modal-close="my-modal">
  	Close
  </button>
</div>
```

## API
```js
var $modal = $('#modal')
$modal.modal(opts) // Init
$modal.modal('open') // Progamatically open
$modal.modal('close') // Programatically close
```

### Options
| key | description | type | default |
|-----|-------------|------|---------|
|backdrop|Flag whether to use a backdrop, and attach a modal-close event to the backdrop)|`string` with the selector name or `false` to disable backdrop|The modal itself|
|escapable|Close modal on escape|`boolean`|`true`|

## Events
- `$modal.on('modal:open', cb)` - Triggered when modal is opened
- `$modal.on('modal:close', cb)` - Triggered when modal is closed

## Contributing
```bash
npm run example:build # Build example
npm run example:start # Build example, and watch for changes
open examples/index.html
```