open-index/open-npm huggingface dataset:
npm package: @rubakas/fractio-rem
Description: Fractional root element space and size scale
Author: Andriy Tyurnikov
Latest version: 0.2.11

# Fractio Rem (@rubakas/fractio-rem)

> Fractional root element space and size scale for TailwindCSS

Install the plugin from npm:

```
$ npm install @rubakas/fractio-rem
```

Then add the plugin to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    // ...
    require('@rubakas/fractio-rem'),
    // ...
  ],
};
```

This plugin will extend spacing and sizing scale with fractional units:

```css
/* uning fractions of rem in your tailwind styles */
.my-component {
  @apply 
    m-3/4r /* 3/4 = 0.75rem margin */
    p-5/6r /* 5/6 = 0.833333rem padding */
    w-10/1r /* 10/1 = 10rem width */
    h-23/6r /* 23/6 = 3.833333rem height */
    ;
}
```

## License

@rubakas/fractio-rem is licensed under the MIT License.

## Credits

Created with [create-tailwind-plugin](https://github.com/Landish/create-tailwind-plugin).
npm package: @rubakas/media-responsum
Description: Responsive breakpoints per device form-factor
Author: Andriy Tyurnikov
Latest version: 1.0.4

# @rubakas/media-responsum

> Responsive breakpoints per device form-factor

Install the plugin from npm:

```
$ npm install @rubakas/media-responsum
```

Then add the plugin to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  theme: {
    // be sure to not override screens
  },
  
  plugins: [
    // ...
    require('@rubakas/media-responsum'),
    // ...
  ],
};
```

This plugin will generate following responsive breakpoints for TailwindCSS:
`tablet, laptop, desktop, desktop-4k`

## License

@rubakas/media-responsum is licensed under the MIT License.

## Credits

Created with [create-tailwind-plugin](https://github.com/Landish/create-tailwind-plugin).
npm package: @rubakas/metrica-typus
Description: Text capsizing and whitespace trimming
Author: Andriy Tyurnikov
Latest version: 1.0.1

# @rubakas/metrica-typus

> Text capsizing and whitespace trimming

Install the plugin from npm:

```
$ npm install @rubakas/metrica-typus
```

Then add the plugin to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'berkeley-mono': ['Berkeley Mono Variable', 'sans-serif'],
      },
      fontMetrics: {
        //...
        // get font metrics at https://seek-oss.github.io/capsize/
        'berkeley-mono': {
          capHeight: 680,
          ascent: 956,
          descent: -244,
          lineGap: 0,
          unitsPerEm: 1000,
          xHeight: 522,
          xWidthAvg: 600
        },
        //...
      }
    }
  },

  plugins: [
    // ...
    require('@rubakas/metrica-typus'),
    // ...
  ],
};
```

Now you are able to use utility classes:

`metrica-font-berkeley-mono` for `berkeley-mono` font in this example.

Font utility class unlocks features of Metrica Typus:
- Capsizing:
  use REM values
  `metrica-capsize-rem-[2]`
  or REM fractions
  `metrica-capsize-rem-[6/4]`
  or pixel integers
  `metrica-capsize-px-[24]`
  to set the desired capital letter size of your element.
- Same for line-height use
  `metrica-leading-rem-[4]`
  `metrica-leading-rem-[12/4]`
  `metrica-leading-px-[48]`

- Whitespace trimming
  use `metrica-trim` to trim whitespace


## Font metrics

Don't forget to add font-metric data to your tailwind config, using the awesome [Capsize](https://seek-oss.github.io/capsize/) or [FontDrop](https://fontdrop.info/) to extract font metrics data.


## License

@rubakas/metrica-typus is licensed under the MIT License.

## Credits

Based on [capsize](https://github.com/seek-oss/capsize)

Created with [create-tailwind-plugin](https://github.com/Landish/create-tailwind-plugin).
npm package: @rubakas/pro-rata-rem
Description: Responsive Root Element for TailwindCSS
Author: Andriy Tyurnikov
Latest version: 0.1.4

# pro-rata-rem

> Responsive Root Element for TailwindCSS

Install the plugin from npm:

```
$ npm install pro-rata-rem
```

Then add the plugin to your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    // ...
    require('pro-rata-rem'),
    // ...
  ],
};
```

This plugin will generate following CSS classes, apply one to your root element (html):

```css
/* Responsive Root element proportional to 6px */
.pro-rata-rem--kids
{
  ...
}

/* Responsive Root element proportional to 4px */
.pro-rata-rem--inclusive {
  ...
}

/* Responsive Root element proportional to 3px */
.pro-rata-rem--critical {
  ...
}
```

## License

pro-rata-rem is licensed under the MIT License.

## Credits

Created with [create-tailwind-plugin](https://github.com/Landish/create-tailwind-plugin).
npm package: @rubberduckai/chatbot.js
Description: > #### ⚡ Get a HTTP chatbot server that calls the Open AI API with your custom prompt running in less than 3 minutes. ⚡
Latest version: 0.0.2

# chatbot.js

> #### ⚡ Get a HTTP chatbot server that calls the Open AI API with your custom prompt running in less than 3 minutes. ⚡

## Setup

### Install Chatbot.js

`npm install @rubberduckai/chatbot.js`

### Create Prompt Template

1. `mkdir template`
1. `cd template`
1. `wget https://raw.githubusercontent.com/rubberduck-ai/chatbot.js/main/example/prompt.template`
1. `cd ..`

### Run Chatbot.js Server

`npm chatbot --host 127.0.0.1 --port 3000 --template-folder template --open-ai-api-key YOUR_OPEN_AI_API_KEY`

### Create chat

`curl -X POST http://127.0.0.1:3000/chat`
Response:

```
{"id":"0","messages":[]}%
```

### Add message to chat (will create bot response)

`curl -X POST -H "Content-Type: application/json; charset=utf-8" -d '{ "message": "how can i get the current date in javascript" }' http://127.0.0.1:3000/chat/0/message`

Response:

```
{"id":"0","messages":[{"author":"user","text":"how can i get the current date in javascript"},{"author":"bot","text":" To get the current date in JavaScript, you can use the Date object. The Date object provides methods for working with dates and times. For example, you can use the Date.now() method to get the current timestamp in milliseconds. You can also use the Date.getFullYear() method to get the current year. If you need to format the date in a specific way, you can use the Intl.DateTimeFormat() method. This method allows you to specify the locale and the format of the date."}]}%
```

## Development

Pre-requisites: `brew install pnpm`

- Install dependencies: `pnpm install`
- Start server: `pnpm start`
npm package: @rubblmediagroup/nocobase-plugin-web-viewer
Description: Web Viewer plugin for NocoBase with iframe proxy, whitelist management, and admin UI
Latest version: 1.0.0

# @rubblmediagroup/plugin-web-viewer

A plugin for NocoBase to display external websites in a secure web viewer block using a proxy and dynamic whitelist management via Admin UI.

## Features

- Display any website using a secure iframe proxy
- Bypass X-Frame-Options using backend relay
- Dynamic or static URL mode
- Admin UI for whitelisting domains
- Customizable user controls (Back, Refresh)

## Installation

```bash
npm install @rubblmediagroup/plugin-web-viewer --legacy-peer-deps
```

Or add to NocoBase Plugin Manager by entering:
```
@rubblmediagroup/plugin-web-viewer
```

## Troubleshooting

If you run into dependency issues:
```bash
npm install --legacy-peer-deps
```

This plugin is compatible with all NocoBase `1.x` versions.
npm package: @rubekpkgs/date-picker-svelte
Description: Date and time picker for Svelte
Author: Kasper Henningsen
Latest version: 2.3.0-dev2

# Date Picker Svelte

[![NPM](https://img.shields.io/npm/v/date-picker-svelte.svg)](https://npmjs.com/package/date-picker-svelte)
[![License](https://img.shields.io/npm/l/date-picker-svelte.svg)](LICENSE)
[![NPM Downloads](https://img.shields.io/npm/dm/date-picker-svelte.svg)](https://npmjs.com/package/date-picker-svelte)
[![test](https://github.com/probablykasper/date-picker-svelte/actions/workflows/test.yml/badge.svg)](https://github.com/probablykasper/date-picker-svelte/actions/workflows/test.yml)

Date and time picker for Svelte

Features:
- Theming
- Custom formats
- Internationalization (i18n)
- Autopunctuation (e.g typing "20201111111111" gives you "2020-11-11 11:11:11" with the default format)
- Keyboard shortcuts

[Demo](https://date-picker-svelte.kasper.space/demo) • [Documentation](https://date-picker-svelte.kasper.space/docs) • [REPL](https://svelte.dev/repl/044911429c4b4e659362518d9a5deaae?version=3)

![](Screenshot.png)

## Install

```
npm install date-picker-svelte
```

## Usage

```svelte
<script>
  import { DateInput } from 'date-picker-svelte'
  let date = new Date()
</script>

<DateInput bind:value={date} />
```

Check the [docs](https://date-picker-svelte.kasper.space/docs) to learn more

## Contributing

### Get started

1. Install Node.js (v14 works)
2. Run `npm install`

### Commands

- `npm run dev`: Start site in dev mode
- `npm run build`: Build package and site
- `npm run preview`: Preview production site
- `npm run check`: Run `svelte-check`
- `npm run test`: Run tests
- `npm run format`: Format code

### Publish new version

1. Update `CHANGELOG.md`
2. Check for errors
    ```
    npm run lint
    ```
3. Bump the version number
    ```
    npm version --no-git-tag <version>
    ```
4. Generate the package
    ```
    npm run build:package
    ```
5. Publish the package
    ```
    npm publish ./package
    ```
6. Commit with a tag in format "v#.#.#"
7. Create GitHub release with release notes
npm package: @ruben.bernardes.dev/counter
Description: Made with create-react-library
Author: rubenberna
Latest version: 1.0.2

# @rubenberna/counter

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/@rubenberna/counter.svg)](https://www.npmjs.com/package/@rubenberna/counter) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @rubenberna/counter
```

## Usage

```jsx
import React, { Component } from 'react'

import MyComponent from '@rubenberna/counter'
import '@rubenberna/counter/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [rubenberna](https://github.com/rubenberna)
npm package: @ruben_vigil/reverse-sentence
Description: Reverses a sentence
Author: Ruben Vigil
Latest version: 1.0.0

# reverse-sentence

Reverses the words of a sentence.

## Install

```sh
npm install @npmusername/reverse-sentence
```

## API

```js
require("reverse-sentence") => Function
reverse(sentence) => String
```

## Example

```js
const reverseSentence = require("reverse-sentence");
const sentence = "Hello Beth!";
const reversed = reverseSentence(sentence);
console.log(reversed); // Beth! Hello
```

## License

MIT
npm package: @rubenchoi/react-mqtt
Description: MQTT client for React using mqtt.js and having setting UI
Author: rubenchoi
Latest version: 0.7.6

# React MQTT Library

[![NPM](https://img.shields.io/npm/v/mqtt-client-react.svg)](https://www.npmjs.com/package/@rubenchoi/react-mqtt) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

React library using [mqttjs/MQTT.js](https://github.com/mqttjs/MQTT.js)

### This repository contains:
- React library for MQTT client using mqtt.js with setting GUI
- [Sample server](/example/server)
- [Sample app](/example)



## Install

```bash
npm install --save @rubenchoi/react-mqtt
```


## Usage

```jsx
import React from 'react'
import MqttComponent from '@rubenchoi/react-mqtt'

const App = () => {
  const [data, setData] = React.useState(undefined);
  const [counter, setCounter] = React.useState(1);
  const [connected, setConnected] = React.useState('Connected');

  const publish = () => {
    const date = new Date();
    const time = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
    const s = "TestData-" + (counter) + " ---- " + time;
    setData({ topic: 'TOPIC1', payload: s });
    setCounter(counter + 1);
  }

  return (<>
    <p>State: {connected}</p>
    <button style={{ margin: '2em' }} onClick={publish}>Send Data</button>
    {data && <span>[{data.topic}] {data.payload}</span>}
    <MqttComponent
      subscribeTo={[
        'TOPIC1', 'TOPIC2'
      ]}
      publish={data}
      callbacks={{
        onConnect: (isConnected = true) => setConnected(isConnected ? "Connected" : "Disconnected"),
        onMessage: (topic, payload) => {
          console.log("onMessage: topic=" + topic, payload);
        }
      }}
      settings={true}
      log={true}
    />
  </>)
}
```


## Run Sample MQTT Broker, 
```bash
  example/server$ npm install
  example/server$ node AedesBroker.js

  [aedes]http listening on port 8888
  [aedes]tls listening on port 1883
```


## Tutorial

- [MQTT Broker](https://rubenchoi.tistory.com/22)
- [MQTT Client](https://rubenchoi.tistory.com/24)


## License

MIT © [rubenchoi](https://github.com/rubenchoi)

## Credits

[MQTT.js](https://github.com/mqttjs/MQTT.js) under MIT License, [Ant Design](https://github.com/ant-design/ant-design/) under MIT License, [react-create-library](https://www.npmjs.com/package/create-react-library) under MIT License
npm package: @rubenchoi/react3d
Description: React 3D library using three.js
Author: rubenchoi
Latest version: 0.8.5

# Notice

This project has been deprecated.

Please see [React Metaverse Library](https://www.npmjs.com/package/react-metaverse) instead. 


# React 3D

[![NPM](https://img.shields.io/npm/v/react3d.svg)](https://www.npmjs.com/package/@rubenchoi/react3d) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

React 3D library using three.js

### Feature:
- Setting menu included (to change character and background image).
- Sample app and assets(CC0 public domain) are included.

<img src="https://user-images.githubusercontent.com/49624697/115985163-8311ae80-a5e5-11eb-9a0d-4980026cc72a.png" width="400px">

## Install

```bash
npm install --save @rubenchoi/react3d
```

## Usage

```jsx
import React, { Fragment } from 'react'
import React3DComponent from '@rubenchoi/react3d'

export default const App = () => {
  return (<>
    <div style={{ width: '100vw', height: '100vh', overflow: "hidden" }}>
      <React3DComponent showDetail={true} specs={Specs}/>
    </div>
  </>);
}
```

### About Specs:

Specs defines the specifications of 3D characters. 
Specs should have the following parameters:
- info: used for showing options in DropDown button to select character
- default: default character to be loaded at the beginning

```jsx
Spec.info = [
    { title: 'Meta Woman(GLB)', spec: MetaWoman },
    { title: 'Dummy', spec: Dummy },
]
Spec.default = Spec.MetaWoman;
```

Each spec should have following parameters:

```jsx
export const Dummy = {
    name: 'Dummy',
    filepath: BASE_DIR + 'sample.fbx',
    scale: 0.02,
    animations: []
}
```

where BASE_DIR should refer some folder under public/ such as:
```jsx
const BASE_DIR = window.location.protocol + '//' + window.location.hostname + ':' + window.location.port + '/character/';
```

Please see the example codes for more details.

## Sample App

Sample app and 3D assets are located in [example](/example) folder.

```bash
~$ npm install 
~/example$ npm install && npm start
```

## Assets

- [example/public/character/](/3d) : self-created 3D models under CC0 public domain license
- [example/public/hdri](/example/public/hdri) : CC0 HDRI images from [HDRIHaven](https://hdrihaven.com/)
npm package: @rubenchoi/webcam
Description: React library selecting webcam
Author: rubenchoi
Latest version: 1.1.1

# React library selecting webcam

[![NPM](https://img.shields.io/npm/v/@rubenchoi/webcam.svg)](https://www.npmjs.com/package/@rubenchoi/webcam) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

React library for Webcam Selection. 
Please see [document](https://rubenchoi.tistory.com/entry/React-%EC%9B%B9%EC%BA%A0-4-Select-webcam?category=467530) for further information. 
This project is created using [create-react-library](https://www.npmjs.com/package/create-react-library).

## Install

```bash
npm install --save @rubenchoi/webcam
```

## Usage

```jsx
import React from 'react'
import { WebcamComponent } from '@rubenchoi/webcam';
import '@rubenchoi/webcam/dist/index.css'

const App = () => {
  const onStream = (stream) => console.log(stream);

  const onMute = (muted) => console.log(muted ? 'muted' : 'unmuted')

  return (
    <div>
      <h2>React App Webcam Test</h2>
      <div style={{ width: '40vw', margin: '1em' }}>
        <WebcamComponent onStream={onStream} onMute={onMute} audioTest={true} />
      </div>
    </div >
  )
}

export default App
```

## License

MIT © [rubenchoi](https://github.com/rubenchoi)
npm package: @rubeneschauzier/actor-rdf-resolve-hypermedia-links-queue-wrapper-limit-depth
Description: A wrapper-limit-depth rdf-resolve-hypermedia-links-queue actor
Latest version: 0.7.1

# Comunica Wrapper Limit Depth RDF Resolve Hypermedia Links Queue Actor

[![npm version](https://badge.fury.io/js/%40comunica%2Factor-rdf-resolve-hypermedia-links-queue-wrapper-limit-depth.svg)](https://www.npmjs.com/package/@comunica/actor-rdf-resolve-hypermedia-links-queue-wrapper-limit-depth)

A comunica Wrapper Limit Depth RDF Resolve Hypermedia Links Queue Actor.

This module is part of the [Comunica framework](https://github.com/comunica/comunica),
and should only be used by [developers that want to build their own query engine](https://comunica.dev/docs/modify/).

[Click here if you just want to query with Comunica](https://comunica.dev/docs/query/).

## Install

```bash
$ yarn add @comunica/actor-rdf-resolve-hypermedia-links-queue-wrapper-limit-depth
```

## Configure

After installing, this package can be added to your engine's configuration as follows:
```text
{
  "@context": [
    ...
    "https://linkedsoftwaredependencies.org/bundles/npm/@comunica/actor-rdf-resolve-hypermedia-links-queue-wrapper-limit-depth/^1.0.0/components/context.jsonld"
  ],
  "actors": [
    ...
    {
      "@id": "config-setsslt:link-queue-limit.json#myActorRdfResolveHypermediaLinksQueueWrapperLimitDepth",
      "@type": "ActorRdfResolveHypermediaLinksQueueWrapperLimitDepth"
    }
  ]
}
```

### Config Parameters

* `carrhlqwld:Actor/RdfResolveHypermediaLinksQueue/WrapperLimitDepth#limit`: The maximum depth of links can can be followed per source.
* `carrhlqwld:Actor/RdfResolveHypermediaLinksQueue/WrapperLimitDepth#mediatorRdfResolveHypermediaLinksQueue`: A mediator over the [RDF Resolve Hypermedia Links Queue bus](https://github.com/comunica/comunica/tree/master/packages/bus-rdf-resolve-hypermedia-links-queue).
npm package: @rubeneschauzier/rdf-store-stream
Description: Create an RDF store from an RDF stream
Author: Ruben Taelman
Latest version: 3.0.0-beta.0.1

# RDF Store Stream

[![Build status](https://github.com/rubensworks/rdf-store-stream.js/workflows/CI/badge.svg)](https://github.com/rubensworks/rdf-store-stream.js/actions?query=workflow%3ACI)
[![Coverage Status](https://coveralls.io/repos/github/rubensworks/rdf-store-stream.js/badge.svg?branch=master)](https://coveralls.io/github/rubensworks/rdf-store-stream.js?branch=master)
[![npm version](https://badge.fury.io/js/rdf-store-stream.svg)](https://www.npmjs.com/package/rdf-store-stream)

This package exposes a convenience function that allows [RDF(JS) streams](http://rdf.js.org/stream-spec/#stream-interface)
to be encapsulated into an [RDF(JS) store](http://rdf.js.org/stream-spec/#store-interface).

The Store that will be returned is the default store from [`rdf-stores`](https://www.npmjs.com/package/rdf-stores).

This library accepts [RDFJS](http://rdf.js.org/)-compliant quads.

## Installation

```bash
$ yarn install rdf-store-stream
```

This package also works out-of-the-box in browsers via tools such as [webpack](https://webpack.js.org/) and [browserify](http://browserify.org/).

## Require

```javascript
import {storeStream} from "rdf-store-stream";
```

_or_

```javascript
const storeStream = require("rdf-store-stream").storeStream;
```

## Usage

Short example:

```javascript
const store = await storeStream(quadStream);
```

Full example:

```javascript
// Create an RDF stream
import rdfParser from "rdf-parse";
const quadStream = rdfParser.parse(fs.createReadStream('cartoons.ttl'), { contentType: 'text/turtle' });

// Import the stream into a store
const store = await storeStream(quadStream);

// Use the store
const resultStream = store.match(namedNode('http://example.org/subject'));
```

## License
This software is written by [Ruben Taelman](http://rubensworks.net/).

This code is released under the [MIT license](http://opensource.org/licenses/MIT).
npm package: @rubeneschauzier/statistic-traversal-topology
Description: Comunica package that defines the statistic tracking traversed topology during link traversal
Latest version: 0.7.0

# Comunica Statistic Link Dereference

[![npm version](https://badge.fury.io/js/%40comunica%2Fstatistic-link-dereference.svg)](https://www.npmjs.com/package/@comunica/statistic-link-dereference)

A statistics tracker package for tracking link dereferences during query execution in Comunica. This class must be added to the context with the key defined in the class.

This module is part of the [Comunica framework](https://github.com/comunica/comunica),

[Click here if you just want to query with Comunica](https://comunica.dev/docs/query/).

## Install

```bash
$ yarn add @comunica/statistic-link-dereference
```

## Using the tracker

```javascript
    const QueryEngine = require('@comunica/query-sparql').QueryEngine;
    const myEngine = new QueryEngine();
    const statisticTracker = new StatisticLinkDereference();

    // Print any data emitted by the tracker
    statisticTracker.on((data) => console.log(data));

    // Add the tracker to the context
    let context = {sources: ['https://fragments.dbpedia.org/2015/en']};
    context[statisticTracker.key.name] = statisticTracker;

    // Execute the query
    const bindingsStream = await myEngine.queryBindings(`
    SELECT ?s ?p ?o WHERE {
        ?s ?p ?o
    } LIMIT 10`, context);
    bindingsStream.on('data', (binding) => {
        console.log(binding.toString());
    });
```