open-index/open-npm huggingface dataset:
npm package: @farrrr/laravel-elixir-webpack-official
Description: Laravel Elixir Webpack integration
Author: Jeffrey Way
Latest version: 1.0.10-beta.2

# Laravel Elixir Webpack Integration

This extension brings Webpack support to Laravel Elixir, version 6 and up.

## Step 1: Install

```js
npm install laravel-elixir-webpack-official --save-dev
```

## Step 2: Usage

Similar to Browserify, the `webpack` method may be used to compile and bundle [ECMAScript 2015](https://babeljs.io/docs/learn-es2015/) into plain JavaScript.
This function accepts a file, relative to the `resources/assets/js` directory, and generates a single bundled file in the `public/js` directory:

```javascript
elixir(function(mix) {
    mix.webpack('app.js');
});
```

To choose a different output or base directory, simply specify your desired paths as the second and third arguments, respectively.

```javascript
elixir(function(mix) {
    mix.webpack('app.js', 'public/dist', 'app/assets/js');
});
```

This will compile `app/assets/js/app.js` to `public/dist/app.js`.

If you'd like to leverage more of Webpack's functionality, Elixir will read any `webpack.config.js` file in your project root, and [factor its configuration](https://webpack.github.io/docs/configuration.html) into the build process. Alternatively, you may pass your Webpack-specific configuration as the fourth argument to `mix.webpack()`.

## Step 3: Plugins

If you've created a plugin, and need to hook your own Webpack config into Elixir's defaults, add the following to your script:

```js
Elixir.webpack.mergeConfig({
    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime'],
    },
    module: {
        loaders: [{
            test: /\.vue$/,
            loader: 'vue'
        }]
    }
});
```

`Elixir.webpack.mergeConfig(newConfig)` will recursively merge your provided configuration with ours. It also properly merges any nested  arrays, so as not to override important default configuration. For example, in the code snippet above, the addition of the Vue loader will not overwrite the default loaders that we provide.
npm package: @farrrr/react-avatar-cropper
Description: An avatar cropper meant to be a complete solution to avatar cropping.
Author: Justin Schiff
Latest version: 0.1.3

# react-avatar-cropper

React Avatar Cropper aims to be an out of the box solution to solve the avatar cropping problem for 99% of common use cases. Most of the time you want a modal to pop up, allow the user to crop their uploaded image, and then you want to receive that base64 data to display and send to the server. React Avatar Cropper takes care of this use case.

Taking heavy inspiration from slack's and facebook's user photo cropper, react-avatar-cropper is here to make it easy.


## Demo

There is a demo on http://dropsofserenity.github.io/react-avatar-cropper/

## Installation

In your project

```shell
npm install --save react-avatar-cropper
```
react-avatar-cropper also depends on react obviously :) and react-bootstrap for modal functionality. To install run the following.

```shell
npm install --save react
npm install --save react-bootstrap
```

## Usage

Usage is fairly simple, you can check the /example folder on github for a slightly more complex use case (the use case you see above in the demo). AvatarCropper simple takes a width and a height to determine what size avatar you would like. AvatarCropper then takes an image property where you can pass an external image, a user uploaded data URI or whatever you would like. An onRequestHide function is passed to the underlying modal so you can decide how to dismiss the modal. Lastly onCrop callback function is required, and gives you back the cropped Image, for you to do with as you wish.

```js
// require the component...
var AvatarCropper = require("react-avatar-cropper");

// and in the render function of wherever you please...
render: function() {
  return (
    <AvatarCropper
      onRequestHide={this.handleRequestHide}
      onCrop={this.handleCrop}
      image={this.state.img}
      width={400}
      height={400}
    />
  );
}
```

## Example

There is an example of this common use case on the page for this plugin.
Most importantly we pass the cropped DataURI back through your provided
onCrop function.

Check out http://dropsofserenity.github.io/react-avatar-cropper/ for more examples and info.

## Contributing

Feel free to place issues on the issue tracker or place a pull request
regarding any functionality. I would like to keep this package limited
to providing a great solution for the wide 99% use case that people have
for avatar croppers.

-----------------------

Thanks for looking! <3
npm package: @fars20/random-sources
Description: React hooks for random data sources
Latest version: 0.4.0

# random-sources

random-sources is a JavaScript library that provides various functions to generate random numbers and series of numbers generally useful as test data for various libraries and applications

## Install

`npm install @fars20/random-sources@0.2.0`

`yarn add @fars20/random-sources@0.2.0`


## Usage

```javascript

import { generateTimeSeries } from 'random-sources';

const series = generateTimeSeries({
  from: "2019-09-18T20:00:00Z",
  to: "2019-09-18T22:00:20Z",
  precession: 1000, //optional
  sd: 1 //optional
});

// [['2019-09-18T20:00:00Z',1.5467],....]

series.forEach( dataPoint => {

  const [time,number] = dataPoint;
  console.log(time.toString(),number);
  
});
```
npm package: @fars20/react-random
Description: React hooks for random data sources
Latest version: 1.0.0

# random-sources

random-sources is a JavaScript library that provides various functions to generate random numbers and series of numbers generally useful as test data for various libraries and applications

## Install

`npm install random-sources`

`yarn add random-sources`


## Usage

```
const series = generateTimeSeries({
  from: "2019-09-18T20:00:00Z",
  to: "2019-09-18T22:00:20Z",
  precession: 1000, //optional
  sd: 1 //optonal
});

// [['',1.5467],....]

```
npm package: @farscrl/rumantsch-language-tools
Description: A collection of tools is designed to aid in working with the Rumantsch (Romansh) language
Author: far ScRL
Latest version: 1.0.4

# Rumantsch language tools

Welcome to the Rumantsch Language Tools repository! This collection of tools is designed to aid in working with the Rumantsch (Romansh) language. Currently, it includes:

* Tokenizer: A tool for breaking down text into individual tokens (based on [stdlib-js/nlp-tokenize]( https://github.com/stdlib-js/nlp-tokenize/blob/main/lib/main.js))
* Spellchecking: Utilizing hunspell for accurate and correct spelling. Currently, it supports all idioms and Rumantsch Grischun (except `rm-sursilv`, coming soon). The dictionary files are loaded from an [external host](https://www.spellchecker.pledarigrond.ch).

Feel free to explore and utilize these tools for your Rumantsch language-related projects.
Happy linguistic exploration!

## Usage
### Tokenizer

    import { Tokenizer } from "@farscrl/rumantsch-language-tools";
    Tokenizer.tokenize('In test dal tokenizer.')

### Proofreader

    import { Proofreader } from '@farscrl/rumantsch-language-tools';
    const surmiran = await Proofreader.CreateProofreader('rm-surmiran');
    await surmiran.proofreadText('Text correct'); // returns []
    await surmiran.proofreadText('in'); // returns [{'length': 2, 'offset': 0, 'word': 'in'}]

## Tests
Tests are based on vitest. To execute them, run `npm test`.
npm package: @farscrl/tiptap-extension-spellchecker
Description: A spellchecker extension for the TipTap editor
Author: far ScRL
Latest version: 2.0.0

# Tiptap Spellchecker Extension

This is an extension to integrate a spellchecker into the [tiptap](https://tiptap.dev/) editor.

The extension does not implement a spellchecker itself: you have to pass it a proofreader object implementing the `IProofreaderInterface` interface. That proofreader can work locally in the browser, or it can call an online service, or whatever you want to use as spellchecking service.

## Installation

Install the dependency using npm:

```bash
npm install @farscrl/tiptap-extension-spellchecker
```

Or using pnpm:

```bash
pnpm add @farscrl/tiptap-extension-spellchecker
```

## Usage

Include the extension in your tiptap editor configuration:

```typescript
const myProofreader = new Proofreader(); // implementing IProofreaderInterface
new Editor({
    extensions: [
        StarterKit,
        SpellcheckerExtension.configure({
            proofreader: myProofreader,
            uiStrings: {
                noSuggestions: 'No suggestions found'
            }
        })
    ],
});
```

### Configuration Options

- **proofreader** (required): An object implementing the `IProofreaderInterface` interface
- **uiStrings** (optional): Strings used for the minimal UI of the extension. If not provided, default strings are used.

## Demo

A demo implementation is available in the `demo` folder. To run the demo:

```bash
# Clone the repository
git clone https://github.com/farscrl/tiptap-extension-spellchecker.git
cd tiptap-extension-spellchecker

# Install dependencies
pnpm install

# Build the extension
pnpm run build

# Run the demo
cd demo
pnpm install
pnpm start
```

The demo will open in your browser showing the spellchecker in action.

## Development

### Building

Build the TypeScript source:

```bash
pnpm run build
```

### Testing

Run the test suite:

```bash
pnpm run test
```

### Linting

Check code quality:

```bash
pnpm run lint
```

## Credits

This extension is inspired by the [tiptap-languagetool](https://github.com/sereneinserenade/tiptap-languagetool) extension.

## License

MIT
npm package: @farshadfahimi/adonis-cache
Description: Adonis Cache Package
Author: Solomon Eseme
Latest version: 2.2.0

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

## Table of contents

- [Adonis Cache](#adonis-cache)
  - [Installation](#installation)
  - [Usage](#usage)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# Adonis Cache

> Cache provider for AdonisJS 5

[![typescript-image]][typescript-url] [![npm-image]][npm-url] [![license-image]][license-url]

This packages makes it seamless to implement any Caching strategy in AdonisJS 5 applications.

## Installation

Install the package using either npm or yarn:

```bash
npm i @kaperskyguru/adonis-cache
# or
yarn add @kaperskyguru/adonis-cache
```

Then, configure the package using the `invoke` command:

```bash
node ace invoke @kaperskyguru/adonis-cache
```

This package works exactly the way Laravel Cache package works with ease of use and effortless to set up.

```txt
// .env

CACHE_DRIVER=file // defaults to FILE

```

## Usage

```ts
import Cache from '@ioc:Kaperskyguru/Adonis-cache'

let posts = await Cache.remember('_posts_', 60, async function () {
	return await Post.all()
})
```

## Available Methods

- **_Cache.has(name: string):_** Checks if specified name is already Cached.
- **_Cache.get(name: string):_** Retrieves a Cached content by name.
- **_Cache.set(name: string, data: any, duration: number):_** Cached a particular content with assigned name.
- **_Cache.delete(name: string):_** Deletes a Cache by name.
- **_Cache.update(name: string, data: any, duration: number):_** Updates a Cache by name.
- **_Cache.remember(name: string, duration: number, callback: Function):_** Caches content with duration.
- **_Cache.rememberForever(name: string, callback: Function):_** Caches content without duration.
- **_Cache.many(keys: Array<string>):_** Retrieves all cached content specified into an array.
- **_Cache.setMany(data: object, minutes: number):_** Caches many content mapped by name at once.

Currently adding more, have any contribution? send a PR.

This package is built as a similarity to [`laravel-cache`](https://laravel.com/docs/8.x/cache). You can learn more about the methods available there.

[typescript-image]: https://img.shields.io/badge/Typescript-294E80.svg?style=for-the-badge&logo=typescript
[typescript-url]: "typescript"
[npm-url]: https://www.npmjs.com/package/@kaperskyguru/adonis-cache 'npm'
[license-url]: LICENSE.md 'license'
npm package: @farskid/a11y
Description: Automated Accessibility tests
Author: Farzad YZ
Latest version: 0.3.0

# A11y

[![Build Status](https://travis-ci.com/farskid/a11y.svg?branch=master)](https://travis-ci.com/farskid/a11y)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/farskid/a11y/pulls)
[![license](http://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](https://github.com/farskid/a11y/blob/master/LICENSE)

An experimental attempt to run accessibility insights, using different insight
engines.

## How to install

```
npm install @farskid/a11y --save-dev
```

or

```
yarn add @farskid/a11y -D
```

## How it works

The command line runs two engines, **pa11y** and **axe core**, gathers their
respenctive insights, prints the report to the stdout and stores the results in
`a11y-report-pa11y.json` and `a11y-report-axecore.json` inside a directory that
you can define.

## Example

Running from command line:

```
a11y --url https://localhost:3000 --out ./reports/
```

## API

| Command line option | Descriptopn                                                                                 | Example               | Required | Default |
| :------------------ | :------------------------------------------------------------------------------------------ | :-------------------- | :------: | :-----: |
| `--url`             | Specify the url to look into                                                                | http://localhost:3000 | **Yes**  |    -    |
| `--out`             | Specify the output directoty for stored reports                                             | ./reports/            |  **No**  |   ./    |
| `--standard`        | Specify the standard to test against (Supported Standards: `WCAG2A`,`WCAG2AA`,`Section508`) | Section508            |  **No**  | WCAG2A  |

> Note: `--out` will create all parent directories that do not exist recursively!

> Note: Standards are case sensitive!

## Roadmap

- [ ] Sync stored issue interface of engines
- [ ] Possible integration with Cypress to inspect the issues in action
- [ ] Visualize the stored issues in a generated HTML with reasonable styles

## License

[MIT](./LICENSE)

Made by Farzad YZ [@farzad_yz](https://twitter.com/farzad_yz).
npm package: @farskid/abstract-video-player-react-headless
Description: headless react components for react implementation of abstract video player
Author: Farzad YZ
Latest version: 1.2.4
Deprecated: this package should no longer be used

# `react-headless`

> TODO: description

## Usage

```
const reactHeadless = require('react-headless');

// TODO: DEMONSTRATE API
```
npm package: @farskid/logman
Description: Simple nano logger service for javascript applications.
Author: Farzad YZ
Latest version: 1.2.1

# Logman

Simple nano logger service for javascript applications. Logman leverages usage of `console` object and it's methods to log different your messages into browser's console.

> Note: Logman isn't a crash reporter and it will shut up on production by checking NODE_ENV environment variable. Make sure to set NODE_ENV=production when building your Javscript application.

## Install

`npm install @farskid/logman`

### ES module

```javascript
import Logman from "logman";

const logger = new Logman("my-logger");
logger.log("Log me first"); // [[my-logger]] Log me first
logger.error("Log me as an error"); // [[my-logger]] Log me as an error
```

### CommonJS

```javascript
const Logman = require("logman");

const logger = new Logman("my-logger");
logger.log("Log me first"); // [[my-logger]] Log me first
logger.error("Log me as an error"); // [[my-logger]] Log me as an error
```

## Recipes

```javascript
/*
  You can create multiple instances of Logman for different namespaces
*/

const userLogs = new Logman("user-logs");
const exceptionLogs = new Logman("exceptions");

userLogs.log("user is logged out"); // [user-logs] user is logged out
exceptionLogs.error("Caught some http exceptions"); // [exceptions] Caught some http exceptions

/*
  You can put logger into sleep temporarily. When logger instance is in sleep mode, it reject any action.
*/
userLogs.sleep();
userLogs.log("This won`t be logged");
userLLogs.error("This won`t be logged as well!");

/* You can awaken the logger again by using awake() method */
userLogs.awake();
userLogs.log('ok! I"m back');

/*
  To check whether logger is sleep or not, you can use isSleep prop.
  isSleep is *false* by default
*/
userLog.isSleep; // false
userLog.sleep();
userLog.isSleep; // true
userLog.awake();
userLog.isSleep; // false

/*
  You can destroy a Logman instance too!
  Obviously this is just a soft destory and a one way to make logger inactive forever. If you want the logger to be destroyed permenantly and be garbage collected (memory efficient), you can do one of these:

  let logger = new Logman('temp-logger');
  logger = null;

  Or if you're using multiple loggers, you can store them in a single object:

  const loggers = {
    firstLogger: new Logman('first-logger'),
    secondLogger: new Logman('second-logger')
  };

  delete loggers.firstLogger;
  delete loggers.secondLogger;
*/
userLog.destroy();
```

## Roadmap

* Accept custom adapter (default to window.console)
* Automatic logs on common events
* Log timestamps

## License

Logman is published under MIT license.
npm package: @farsoc/atlas
Description: Abstract Tree-Like Adaptive State
Author: farsoc
Latest version: 1.0.5

<p align="center">
    <img src='https://raw.githubusercontent.com/farsoc/npmPackages/master/atlas/logo.svg?sanitize=true'></img>
</p>

# Documentation

You can find documenation (work is still in progress) in [required part of following wiki](https://github.com/farsoc/npmPackages/wiki). 

# About

ATLAS stands for Abstract Tree-Like Adaptive State. This state management system was designed to give you freedom of organizing your state in required way _in simple manner_. So, ATLAS does __not__ have:

- required boilerplate code
- unnecessary layers of abstraction
- "golden hammer"-like principles in its core

Instead of it Atlas offers:

- compact and intuitive syntax
- opportunity to write easily reusable state logic modules
- simple and scalable design

# Bindings

ATLAS has simple and flexible events system which makes easy to bind it to diffirent systems. You might be interested in [__React bindings for ATLAS__](https://www.npmjs.com/package/@farsoc/atlas-react).

# Main concept

We treat state as collection of nodes in ATLAS. So, every state operation basically becomes an operation with node. ATLAS provides multiple manners of updating data (including mutations, immutable updates and plain rewrites). Let's take a look at simple example:

```typescript
import { readAll, write, mutate } from "@farsoc/atlas";

type Greeter = { name: string };
const greeter: Greeter = { name: "P1" };

write("test", 1);
write("hello.world", greeter);

// {test: 1, hello: { world: { name: "P1" }}}
const currentState = readAll();

/*
 * Let's make this example more complex and 
 * change some existing data!
 */

mutate<Greeter>("hello.world", (x) => (x.name += " mutated"));

// { name: "P1 mutated" }
const worldGreeter = read<Greeter>("hello.world");
```

This approach is flexible, but not very reliable, because we have to duplicate node pathes when we work with same nodes. So, there is a solution for this trouble - we can treat nodes isolated with help of [@farsoc/entity-atlas-nodes](https://www.npmjs.com/package/@farsoc/entity-atlas-nodes) package. It contains very useful node abstractions you can use right out of the box! Let's take a look at this approach:

```typescript
import { MutableObjectNode } from "@farsoc/entity-atlas-nodes";
import { readAll } from "@farsoc/atlas";

type Greeter = { name: string };

const worldGreeter = new MutableObjectNode<Greeter>({
    initialValue: { name: "P1" },
    nodePath: "hello.world"
});

worldGreeter.mutate((x) => (x.name += " mutated"));

// { name: "P1 mutated" }
const greeter = worldGreeter.value;

// { hello: { world: { name: "P1 mutated" }}}
const state = readAll();
```
npm package: @farsoc/atlas-nodes
Description: Entity nodes of diffirent types for Atlas state management system
Author: farsoc
Latest version: 2.1.0

<p align="center">
    <img src='https://raw.githubusercontent.com/farsoc/npmPackages/master/atlas-nodes/logo.svg?sanitize=true'></img>
</p>

# About

This package provides node abstraction for [ATLAS state management system](https://npmjs.com/@farsoc/atlas).

# Exported classes (description will be added soon)

- BaseNode
- ImmutableObjectNode
- MixedObjectNode
- MutableObjectNode
- PrimitiveNode
npm package: @farsoc/atlas-react
Description: React bindings for ATLAS state management system
Author: farsoc
Latest version: 1.1.0

<p align="center">
    <img src='https://raw.githubusercontent.com/farsoc/npmPackages/master/atlas-react/logo.svg?sanitize=true'></img>
</p>

# About

This package is React bindings for [ATLAS state management system](https://github.com/farsoc/npmPackages/wiki/atlas).

# Functional components binding

## Methods

### __useAtlas(...nodes: string[])__

Hook to connect your functional React components to ATLAS state management. Component will rerender after any ATLAS update if no node paths were passed. Otherwise, component will rerender only if given nodes (or their nested nodes) is updated.

There is one unobvious moment about this hook. You are able to update any ATLAS node from any component without bindings. This binding is only used for rerendering component after required nodes were updated (or ATLAS state was updated in generic if no nodes were passed).


## Example

```tsx
import React from "react";
import { PrimitiveNode } from "@farsoc/entity-atlas-nodes";
import { useAtlas } from "@farsoc/atlas-react";

const counter = new PrimitiveNode<number>({ initialValue: 0 });

function App() {
    /**
     * ATLAS binding will rerender App
     * only if counter node is updated
     */
    useAtlas(counter.nodePath);
    return (
        <div>
            <span onClick={(e) => counter.update(x => x + 1)}>
                Increment
            </span>
            <span>
                {counter.value}
            </span>
            <span onClick={(e) => counter.update(x => x - 1)}>
                Decrement
            </span>
        </div>
    );
}
```

# Class components binding

## Methods

### __bindClassComponent(targetComponent: React.Component, ...nodes: string[])__

Use this method in componentDidMount for binding your class components to ATLAS state management system.

## Example

```tsx
import React from "react";
import { PrimitiveNode } from "@farsoc/entity-atlas-nodes";
import { bindClassComponent } from "@farsoc/atlas-react";

const counter = new PrimitiveNode<number>({ initialValue: 0 });

class TestComponent extends React.Component {
    /**
     * ATLAS binding will rerender TestComponent
     * only if counter node is updated
     */
    componentDidMount() {
        bindClassComponent(this, counter.nodePath);
    }

    render() {
        return (
            <div>
                <span onClick={(e) => counter.update(x => x + 1)}>
                    Increment
                </span>
                <span>
                    {counter.value}
                </span>
                <span onClick={(e) => counter.update(x => x - 1)}>
                    Decrement
                </span>
            </div>
        );
    }
}
```