open-index/open-npm huggingface dataset:
npm package: @regreso/utils
Description: Utility functions for use by Regreso clients
Latest version: 0.3.0

# 🔧 Regreso Utils

[![npm](https://img.shields.io/badge/npm-CB3837?logo=npm&logoColor=fff)](https://www.npmjs.com/package/@regreso/utils)
![NodeJS](https://img.shields.io/badge/Node.js-6DA55F?logo=node.js&logoColor=white)
![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?logo=typescript&logoColor=fff)

## 🤔 What is this?

Some neat little utilities relied upon by Regreso clients. Right now, these can be used to:

- Get metadata info about websites (for prefilling destination details automatically)
- AI-generate a list of practically-usable, relevant tags to describe a location based on metadata (supports provided, self-hostable AI instance URL)

## 🚀 Usage

Let's say you wanted to use this module in your own regreso client (or something entirely different), here's how:

- **SiteTagger(config)** - A class used to control AI-based website tagging behaviors.

  ```javascript
  import { SiteTagger } from "@regreso/utils";

  async function demo() {
    const tagger = new SiteTagger({
      maxTags: 3,
      aiInstance: "https://ai.hackclub.com",
      maxRetries: 2,
      requestDelay: 1000,
    });

    const demoSites = [
      {
        url: "https://github.com/microsoft/vscode",
        headline: "Visual Studio Code",
        description: "A lightweight but powerful source code editor",
      },
      {
        url: "https://css-tricks.com/snippets/css/a-guide-to-flexbox/",
        headline: "A Complete Guide to Flexbox",
        description: "CSS Flexbox layout guide with examples",
      },
    ];

    const result = await tagger.generateTags(demoSites[0]);

    if (result.success) {
      console.log(
        `tags: ${result.tags.join(", ")} in ${result.metadata?.processingTime} ms.`,
      );
    } else {
      console.log(`error: ${result.error}`);
    }

    const batchResults = await tagger.generateTagsBatch(demoSites);

    console.log(
      batchResults
        .filter((r) => r.result.success)
        .map((r) => `${r.headline}: [${r.result.tags.join(", ")}]`)
        .join("\n"),
    );
  }

  demo();
  ```

- **getWebDetails(url: String)** - Gets the web details scraped from meta tags of specified website's URL. Returns multiple versions if relevant (title, og:title, twitter:title to be specific)

  ```javascript
  import { getWebDetails } from "@regreso/utils";

  async function demo() {
    const webDetailsResult = await getWebDetails("fbi.gov");

    console.log({
      url: webDetailsResult.url, // with protocol appended if missing
      title:
        webDetailsResult.title[0] ??
        webDetailsResult.title[1] ??
        webDetailsResult.title[2],
      description:
        webDetailsResult.description[0] ??
        webDetailsResult.description[1] ??
        webDetailsResult.description[2],
    });
  }

  demo();
  ```

## ☑️ TODOs

- [x] Add site metadata scraping
- [x] Add AI-tagging
- [ ] Document package
  - [x] Basic Usage Demo
- [ ] Support scraping image metadata
npm package: @regrokjs/core
Description: A lightweight state management library for react with a focus on minimal boilerplate.
Author: Marian Ban
Latest version: 0.0.9

# Regrokjs

A lightweight state management library for react with a focus on minimal boilerplate. It uses [immer](https://github.com/immerjs/immer) internally for managing the state in an immutable way.

⚠️ Regrokjs is in an alpha stage at this point. Use with caution.

## Installation

```bash
npm i @regrokjs/core
```

## Get Started

```js
// store.js

import { createSlice, createStore, Slice } from '@regrokjs/core';

class CounterSlice extends Slice {
  // a state must be an object
  state = {
    value: 0,
  }
  // action
  increment() {
    this.setState(state => {
      state.value++;
    });
  }
  // selector
  getComputedValue() {
    return this.state.value * 10;
  }
});

export const store = createStore({
  counter: createSlice(CounterSlice),
});
```

```jsx
// Counter.js

import * as React from 'react';
import { useStore } from '@regrokjs/core';
import { store } from './store';

export const Counter = ({ name }) => {
  const [{ value }, { increment }, { getComputedValue }] = useStore(
    store.counter
  );
  return (
    <div>
      <div>{value}</div>
      <div>{getComputedValue()}</div>
      <button onClick={increment}>Increment</button>
    </div>
  );
};
```

```jsx
// App.js

import * as React from 'react';
import { RegrokProvider } from '@regrokjs/core';
import { store } from './store';
import { Counter } from './Counter';

export const App = () => {
  return (
    <RegrokProvider store={store}>
      <Counter />
    </RegrokProvider>
  );
};
```

## Store

- there can be only **one root store**
  - a root store is created by calling `createStore({})` and passing a dictionary of slices (a POJO containing slices as keys)
- a **slice** is a sub-state of the global state

  - it's defined as a class and must extend from the `Slice` base class
  - the state can be initialized in constructor or by using class property syntax
    - by default it's initialized to an empty object
    - must be an object (primitives or arrays are not supported)
  - each slice has its own state which can be accessed by `this.state`
  - you can update state by calling `this.setState` and passing an updater callback.

  <!-- - **actions**
  - functions which are used for updating your state
  - update state by calling `setState`
  - **selectors**
    - functions for selecting a subset of a slice's state or for returning computed/derived values
    - their name must start with a **get** prefix
    - selector results are automatically memomized for better performance
    - they can't modify state
  - API -->
npm package: @regru/anno.js
Description: Better step-by-step guides for powerful web apps.
Author: @iamdanfox
Latest version: 2.0.0

anno.js [![Build Status](https://travis-ci.org/iamdanfox/anno.js.png?branch=master)](https://travis-ci.org/iamdanfox/anno.js)
=======

Anno.js lets you add powerful step-by-step guides to your web-apps. **[See demo!][1]**

[![Screencast of a single annotation](screencast.gif)](http://iamdanfox.github.io/anno.js/)

**Anno.js is built to be extensible.** The source is about 500 lines of literate coffeescript; you can [read the annotated source][3] in just a few minutes!

Usage
-----

Include the following in your HTML page:

```html
<!-- get jQuery from somewhere; personally, I like the Google CDN: -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
```
```html
<script src="http://iamdanfox.github.io/anno.js/anno.js" type="text/javascript"></script>
<script src="http://iamdanfox.github.io/anno.js/scrollintoview/jquery.scrollintoview.min.js" type="text/javascript"></script>

<link href="http://iamdanfox.github.io/anno.js/anno.css" rel="stylesheet" type="text/css" />
```

After including `anno.js` you can define your annotations ([see examples][1]).

For better performance, you can host the files yourself. Clone the repo or [download the zip][2], then copy `anno.js`, `anno.css` and `scrollintoview/jquery.scrollintoview.min.js` into your project.


[1]: http://iamdanfox.github.io/anno.js/
[2]: https://github.com/iamdanfox/anno.js/archive/gh-pages.zip
[3]: http://iamdanfox.github.io/anno.js/docco/anno.html
npm package: @regru/bem-loader
Description: Webpack loader for BEM projects
Author: Makarychev Andery
Latest version: 1.1.3

Bem-loader
==========

Yet another webpack loader

### Usage

Configure:

Loader required following params:
```javascript
context: 'path/to/modules/root',
bem: {
    /**
     * levels should be string or array of strings
     */
    levels: [
        'path/to/first/level',
        'path/to/second/level',
        ...,
    ],
    extensions: [
        'deps.js',
        'less',
        'js',
    ],
    elemDelim: '__' // optional, default '__'
    modDelim: '_' //optional, default '_',
    strict: false //optional, default false. throws if no files is found
},
```

### Warning
If loader will find duplicate bem block in different folders e.g. `path/to/b-block.js` and `different/path/to/b-block.js`
it will use only the first occurences in order of levels array. Look for source in `./libs/search.js`.
npm package: @regru/blockui
Description: Simulate synchronous ajax by blocking - not locking - the UI. This plugin lets you block user interaction with the page or with a specific element on the page. Also great at displaying modal dialogs.
Author: Mike Alsup
Latest version: 2.7.0

# BlockUI - Page or element overlay

## Getting Started
Download either the [production version][min] or the [development version][max] of BlockUI.

[min]: http://malsup.github.com/min/jquery.blockUI.min.js
[max]: http://malsup.github.com/jquery.blockUI.js

In your web page:

<pre>
&lt;!-- include jQuery -->
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js">&lt;/script>
&lt;!-- include BlockUI -->
&lt;script src="http://path/to/your/copy/of/jquery.blockUI.js">&lt;/script>
&lt;script>
// invoke blockUI as needed -->
$(document).on('click', '#myButton', function() {
   $.blockUI();
});
>&lt;/script>
</pre>

## Documentation, Demos and FAQ
Everything you need to know can be found here: 
[http://jquery.malsup.com/block/](http://jquery.malsup.com/block/)


## Copyright and License
Copyright &copy; 2007-2013 M. Alsup.

The BlockUI plugin is dual licensed under the [MIT](http://malsup.github.com/mit-license.txt) and [GPL](http://malsup.github.com/gpl-license-v2.txt) licenses.

You may use either license.  The MIT license is recommended for most projects because it is simple and easy to understand and it places almost no restrictions on what you can do with the plugin.

If the GPL suits your project better you are also free to use the plugin under that license.

You do not have to do anything special to choose one license or the other and you don't have to notify anyone which license you are using. You are free to use the BlockUI plugin in commercial projects as long as the copyright header is left intact.
npm package: @regru/bootstrap-notify
Description: Bootstrap alert system made better
Author: Niji
Latest version: 0.2.0

bootstrap-notify
================

Bootstrap alert system made better. [See Demo](http://goodybag.github.com/bootstrap-notify)

### Contributors

* Nijiko Yonskai <http://twitter.com/nijikokun>
* Lalit Kapoor <https://github.com/lalitkapoor>


Copyright 2012 Goodybag, Inc.
npm package: @regru/deps-normalize
Description: Dependencies normalization for gulp-bem
Author: Vsevolod Strukchinsky
Latest version: 2.5.0

# deps-normalize

[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][depstat-image]][depstat-url]

This module used to normalize `require` and `expect` properties in BEM object.

## Usage

```js

var normalize = require('deps-normalize');

normalize(undefined);               // []
normalize({ block: 'block' });      // [ { block: 'block' } ]
normalize({ elem: 'elem' });        // [ { elem: 'elem' } ]

// See more examples in tests
```

## API

### normalize(dependencies, [options])

Runs normalization of dependencies. Returns array of normalized dependencies.

#### dependencies
Type: `Object` / `String`

#### options
Type: `Object`

 * `parseString` - contains `Function`, that will parse `dependencies` if they passed as string.

## Normalization

Dependencies should contain [deps objects](http://bem.info/tools/bem/bem-tools/depsjs/) (or `String`). We do not support full specification. Those objects are equivalents of BEM objects, but with additional properties, that reduces boilerplate code. After they are normalized, they can be converted to BEM objects.

 * `elems` - contains `Array` of `String` (if it contains `String` it will be wrapped in array).
 * `mods` - contains `Object` with keys as modificators names and values as modificators values. Values can be `Number`, `Boolean`, `String` or `Array` of `String`.

If deps object contain `elems` or `mods` it will be splitted in multiple BEM objects. It will not take multiplication of `elems` and `mods`, if both are present in deps object. Instead it will be interpretated as two deps objects: one with `elems` and other with `mods`.

```js
normalize({ elems: ['e1', 'e2'], mods: {m1: 1, m2: [2, 3]} });

// [
//     { block: 'b', elem: 'e1' },
//     { block: 'b', elem: 'e2' },
//     { block: 'b', modName: 'm1', modVal: 1 },
//     { block: 'b', modName: 'm2', modVal: 2 },
//     { block: 'b', modName: 'm2', modVal: 3 }
// ]
```

`level`, `block`, `elem`, `mod` and `value` properties will be taken from current processing object.

__Note:__ you can not have `elem` with `elems` in one deps object (same applies to `mod` and `mods`).

## License

MIT (c) 2014 Vsevolod Strukchinsky

[npm-url]: https://npmjs.org/package/deps-normalize
[npm-image]: http://img.shields.io/npm/v/deps-normalize.svg?style=flat

[travis-url]: http://travis-ci.org/floatdrop/deps-normalize
[travis-image]: http://img.shields.io/travis/floatdrop/deps-normalize.svg?branch=master&style=flat

[depstat-url]: https://david-dm.org/floatdrop/deps-normalize
[depstat-image]: http://img.shields.io/david/floatdrop/deps-normalize.svg?style=flat
npm package: @regru/detectizr
Description: Detectizr is a Modernizr extension to detect device, browser, operating system and screen.
Author: Baris Aydinoglu
Latest version: 2.2.0

#Detectizr
[![Build Status](https://secure.travis-ci.org/barisaydinoglu/Detectizr.png?branch=master)](https://travis-ci.org/barisaydinoglu/Detectizr)
[![Stories in Ready](https://badge.waffle.io/barisaydinoglu/detectizr.png?label=ready)](https://waffle.io/barisaydinoglu/detectizr)
[![devDependency Status](https://david-dm.org/barisaydinoglu/detectizr/dev-status.png?theme=shields.io)](https://david-dm.org/barisaydinoglu/detectizr#info=devDependencies)


Detectizr is a Modernizr extension to detect
* device
* device model
* device orientation
* screen size
* operating system
* operating system version
* operating system version full
* browser
* browser version
* browser engine
* browser plugins

Detection of these sets are optional and can be disabled.

Detectable device types are: tv (includes smart tv and game console), mobile, tablet, and desktop.
Device models of tv, mobile and tablet are being detected.

Code quality of Detectizr is validated via [JSLint](http://www.jslint.com "JSLint") & [JSHint](http://www.jshint.com "JSHint").

##Sample Usage

This is a library that uses your trusty little Modernizr to give you the possibility of specifying required features for a certain stylesheet.
Using it is a simple matter, illustrated in the following excerpt:

```html
<html>
  <head>
    <script src="modernizr.js"></script>
    <script src="detectizr.js"></script>
  </head>
  <body>
    <script>
      Detectizr.detect({detectScreen:false});
    </script>
  </body>
</html>
```
Just remember to include Modernizr before Detectizr, and you're good to go!

Licensed under MIT license.

##Other interesting projects

* [Modernizr](https://github.com/Modernizr/Modernizr "Modernizr") is required for Detectizer. Remember to put Modernizr before Detectizr.
* [Categorizr](https://github.com/bjankord/Categorizr "Categorizr") is a server side device and OS detection script wirtten in PHP. Detectizr inspired by its device detection.
* [CSS Browser Selector] (http://rafael.adm.br/css_browser_selector/ "CSS Browser Selector") is a client side browser detection script. Detectizr inspired by its browser detection.
npm package: @regru/eslint-config-regru
Description: eslint config for REGRU projects
Author: Andrey Makarychev
Latest version: 2.5.0

### Конфиг для проектов REGRU

## Использование в проектах

Для включения правил в проект необходимо:
```javascript
extends: ['@regru/regru']
```

В больших проектах для постепенного приведения кода к стандартам можно воспользоваться переходным вариантом:
```javascript
extends: ['@regru/regru/legacy']
```

Разница только в том, что большинство правил показывают предупреждение вместо ошибок

## Зависимости

Все дополнительные плагины перечислены в `peerDependencies` [package.json](./package.json)