open-index/open-npm huggingface dataset:
npm package: @maelfr/node-red-nuki-mqtt
Description: Control your Nuki device through MQTT
Author: Maël Bernero
Latest version: 0.0.2

# Nuki MQTT

A Node-RED node to control your Nuki device through MQTT.

## References

Based on the [MQTT API Specification v1.4](https://developer.nuki.io/uploads/short-url/fcR2ntjSFMz3oHUMrIjYSU3g0O4.pdf), found on the [Nuki Developer forum](https://developer.nuki.io/t/mqtt-api-specification-v1-4/19223).

## Installation

To install this node, run the following command in your Node-RED user directory (typically ~/.node-red):

```bash
npm install @maelfr/node-red-nuki-mqtt
```

## Usage

### Lock Action Node

This node allows you to control your Nuki device through MQTT. You can configure the device and action in the node, or set them dynamically using the `msg.payload` property.

#### Input

| Field   | Description           |
| ------- | --------------------- |
| payload | the action to publish |

#### Details

The action can be configured in the node or, if left blank, can be set by `msg.payload`. The following actions are supported:

- UNLOCK
- LOCK
- UNLATCH
- LOCK_N_GO
- LOCK_N_GO_WITH_UNLATCH
- FULL_LOCK

### Device configuration Node

| Field       | Description                                                                                                                  |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------- |
| Name        | A friendly name for the device                                                                                               |
| ID          | The Nuki ID in hexadecimal format is printed on the device itself and also shown in the device administration. e.g. 2BB28570 |
| MQTT Broker | The MQTT broker to use                                                                                                       |

## License

This node is licensed under the MIT License. See the LICENSE file for more information.

## Credits

This node was created by Maël Bernero.
npm package: @maelstrom-cms/react-mount
Description: Easily mount react components from your HTML with prop support
Author: Owen Melbourne
Latest version: 1.0.15

# react-mount

Easily mount react components from your HTML with simple prop support e.g.

```html
<div data-mount="SomeComponent" data-some-title="Hello World" data-settings='{"enabled": true}'></div>
```

## Table of Contents

* [Install](#install)
* [Usage](#usage)
* [License](#license)


## Install

```sh
npm i @maelstrom-cms/react-mount
```

## Usage

### Mounting Components

First register all of your components e.g.

```js
import Mount from '@maelstrom-cms/react-mount';
import SomeComponent from './src/SomeComponent.js'

Mount({
    SomeComponent,
})

// same as

Mount({
    'SomeComponent': SomeComponent,
})
```

Use the `data-mount` attribute to define which react component to mount on this element.

```html
<div data-mount="SomeComponent" data-some-title="Hello World" data-settings='{"enabled": true}'></div>
```
#### Dynamically importing components

If you want to lazy load components, you can do so by using the `import()` function

```js
Mount({
    StaticComponent,
    LazyComponent: () => import('./components/LazyComponent'),
})
```

> Currently we only support webpacks import method, if you need to dynamically mount components, consider using `Mount()` directly in your lazy loaded files.

### Passing and Parsing Props

By default, any `data-` attribute will be passed to your component as a prop, allowing you to accept data from server-side systems.

You can apply some additional parsing to these, for example objects e.g.

```js
import parseProps from '@maelstrom-cms/react-mount/dist/parseProps';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.settings = parseProps(props, 'settings');
        // this.settings will now be a JSON object.
    }
}
```

### Cloaking and Loading

Whilst the page is loading you might see a flash of un-styled content, you can get around this 2 ways.

#### Provide some default HTML within the document e.g.

```html
<div data-mount="MyComponent">
    <svg class="spinner" ...></svg>
    Loading.....
</div>
```

or you can choose to hide the component completely e.g.

```html
<div class="cloak" data-mount="MyComponent"></div>
```

Add the CSS snippet

```css
.cloak { display: none; }
```

If you want to use an alternative class name (make sure it's unique e.g. do not use "hidden") you can use the `setCloakClass` e.g.

```js
import { setCloakClass } from '@maelstrom-cms/react-mount/src/mount';

setCloakClass('my-cloak-class');

Mount({
    AnotherComponent
});
```

> Make sure you set the cloak class BEFORE mounting the components.


## License

[MIT](LICENSE) © [Maelstrom CMS](https://www.maelstrom-cms.com)
npm package: @maelstrom-cms/toolkit
Description: UI counterpart for Maelstrom CMS Toolkit for Laravel
Author: Owen Melbourne
Latest version: 1.0.46

# Maelstrom CMS Toolkit

A CMS toolkit for intermediate to advanced development teams who love React and Laravel.

Maelstrom is a collection of Laravel and React components to help you flesh out your own control panels using as much of vanilla Laravel as possible.

# [Visit Website](https://www.maelstrom-cms.com/)

![Hero Image](https://www.maelstrom-cms.com/hero.jpg)

## Why use Maelstrom?
Unlike other solutions such as Nova - Maelstrom doesn't impose any ways on doing things, we simply provide you various helpers to either use, or ignore - allowing you to implement things exactly as you need. Utilising the IoC container, waterfall includes, extendable UI components and a controversial god class, everything can be changed to suit your needs with ease.

### The Stack
Maelstrom uses a cutting edge stack to afford you the ability to create the most advanced systems, unlike many other systems we don't use any Bootstrap themes, it's a pure utility class based interface using Tailwind and the UI library from Ant Design to allow you to create what ever you need.

# [Visit Documentation](https://www.maelstrom-cms.com/getting-started/)
The repository for the documentation can been accessed at [maelstrom-cms/documentation](https://github.com/maelstrom-cms/documentation)

# Support

- [Report Bugs](https://github.com/maelstrom-cms/toolkit/issues/new?assignees=OwenMelbz&labels=bug%2C+triage&template=bug_report.md&title=%5BBug%5D+)
- [Ask a Question](https://github.com/maelstrom-cms/toolkit/issues/new?assignees=OwenMelbz&labels=question&template=question.md&title=%5BQuestion%5D+)
- [Email Us](mailto:talk@maelstrom-cms.com)
npm package: @maelstrom-futurism/button
Description: A button (with very cool ripples!) for MF
Author: Dawson Goodell
Latest version: 0.8.2

# Maelstrom-Futurism

> Extremely opinionated framework for super fast webapp development.

[Demo & Documentation Website](https://mf.osmstudios.com/)
[DawsonGoodell.com](https://dawsongoodell.com/)

* **Maelstrom** - for speedy development
* **Futurism** - for sleek, post-modern design

## Should I use this?

Probably **not**.  This is hardly production ready.  MF is a personal project to determine if I still have any web development skills.  It is designed to be used by me and is mostly styled via [emotion](https://emotion.sh).

## Button

HTML <button/> tag with fancy ripple on click effect.

Found in @maelstrom-futurism/button and maelstrom-futurism.

```jsx
<Button variant="primary" scale="large">Primary</Button>
<Button variant="secondary" scale="normal">Secondary</Button>
<Button variant="cancel" scale="small">Cancel</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
```
npm package: @maelstrom-futurism/core
Description: Core package for shared resources in Maelstrom Futurism
Author: Dawson Goodell
Latest version: 0.8.2

# Maelstrom-Futurism

> Extremely opinionated framework for super fast webapp development.

[Demo & Documentation Website](https://mf.osmstudios.com/)

[DawsonGoodell.com](https://dawsongoodell.com/)

* **Maelstrom** - for speedy development
* **Futurism** - for sleek, post-modern design

## Should I use this?

Probably **not**.  This is hardly production ready.  MF is a personal project to determine if I still have any web development skills.  It is designed to be used by me and is mostly styled via [emotion](https://emotion.sh).

## CORE

`@maelstrom-futurism/core` is the root package of the Maelstrom Futurism styling system required by all other packages except "maelstrom-futurism" (which is a superset of other packages) and "universe-css" (which is just stylesheets for plain HTML & JS projects).

This package contains interfaces, utilities, and theme tools.
npm package: @maelstrom-futurism/layout
Description: Basic layout components of MF
Author: Dawson Goodell
Latest version: 0.8.2

# `layout`

> TODO: description

## Components

### Container

Containers are intended only to be the top level component of a page.  They come in two varieties, normal and fluid.  Normal containers have a set size for each screen breakpoint.  Fluid containers are always 100% width.

```
import { Container } from '@maelstrom-futurism/layout';


```

### Grids and Columns

The Grid component accepts any number of equal 

```
import { Grid, Column } from '@maelstrom-futurism/layout';

const ThreeEqualColumnLayout = () => (
    <Grid>
        <Column>
            <h1>Column One</h1>
        </Column>
        <Column>
            <h1>Column Two</h1>
        </Column>
        <Column>
            <h1>Column Three</h1>
        </Column>
    </Grid>
);
```