open-index/open-npm huggingface dataset:
npm package: @miboplatform/uikit
Description: Set of UI components for mibo projects
Latest version: 1.0.0-4

# MIBO UIkit


MIBO UIkit is a set of React components and hooks used to build pages on MIBO's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @miboplatform/uikit`

## Setup

### Theme

Before using MIBO UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@miboplatform/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@miboplatform/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.
npm package: @mibto/meteor-typescript
Description: TypeScript wrapper package for use with Meteor
Author: @mibto
Latest version: 0.9.8

## meteor-typescript [![Build Status](https://travis-ci.org/barbatus/meteor-typescript.svg?branch=master)](https://travis-ci.org/barbatus/meteor-typescript) [![Coverage Status](https://coveralls.io/repos/github/barbatus/meteor-typescript/badge.svg?branch=master)](https://coveralls.io/github/barbatus/meteor-typescript?branch=master)

TypeScript wrapped for Meteor.

Based on TypeScript@2.8.3.
npm package: @mibu/ha-mdi
Description: <h1 align=center>HomeAssistant - Material Design Icons</h1>
Author: Michael Brunner
Latest version: 1.0.5

<h1 align=center>HomeAssistant - Material Design Icons</h1>

Material Design Icons for [Home Assistant](https://www.home-assistant.io/) custom card development.

```
npm install @mibu/ha-mdi
```

The [Home Assistant frontend](https://github.com/home-assistant/frontend) bundles the latest MDI with [older icons](https://github.com/home-assistant/frontend/blob/dev/build-scripts/removedIcons.json) that were removed. Custom cards can use these icons by providing an icon identifier: `<icon-collection>:<icon-name>` (e.g. `mdi:home-assistant`).

This library provides these identifiers and also the SVG paths as an alternative.

## Usage

Javascript:

```ts
import { mdiHomeAssistant } from '@mibu/ha-mdi'; // Icon identifier
import { mdiHomeAutomation } from '@mibu/ha-mdi/path'; // SVG path

console.log(mdiHomeAssistant); // mdi:home-assistant
console.log(mdiHomeAutomation); // M12,3L2,12H5V20H19V12...
```

Svelte:

```svelte
<script>
  import { mdiHomeAssistant } from '@mibu/ha-mdi';
  import { mdiHomeAutomation } from '@mibu/ha-mdi/path';
</script>

<ha-icon icon={mdiHomeAssistant}/>
<ha-svg-icon path={mdiHomeAutomation}/>
```

## Related

- [Home Assistant Frontend](https://github.com/home-assistant/frontend)
- [Material Design Icons - SVG](https://github.com/Templarian/MaterialDesign-SVG)
npm package: @mibu/svelte-inject
Description: Svelte action to inject elements into the DOM
Author: Michael Brunner
Latest version: 1.0.0

# Svelte Inject
Svelte action to inject elements into the DOM

## Why
Useful when injectig Svelte into exising code at runtime, e.g. GreaseMonkey userscripts.<br>
<br>
You can already inject Svelte components, but only with one injection point per component:
```ts
new App({
	target: ..., // Insert into target
	anchor: ... // Insert before child of target
});
```
Consider wanting to modify a webiste by adding toggle to the navbar and some toggleable content to an existing content container:
```html
<nav id="navbar">
	<button id="toggle"/> <!-- toggle we want to inject -->
</nav>
<div id="container">
	<div id="content"/> <!-- content we want to inject -->
</div>
```
You would have to create a component for each and then inject them:
```ts
new Toggle({target: document.getElementById("navbar")});
new Content({target: document.getElementById("container")});
```
But now you are outside the domain of the Svelte compiler and its harder to add reactivity. Lets instead create a `App.svelte` component and use the `inject` action:
```svelte
<script>
	import inject from "@mibu/svelte-inject"
	let showContent = false;
</script>

<button use:inject{"#navbar"} on:click={() => showContent = !showContent}/>
<div use:inject{"#container"} class:hidden={showContent}/>
```
Now everything is inside one Svelte component and its also reactive.


## Usage
Import `inject`:
```svelte
<script>
	import inject from "@mibu/svelte-inject"
</script>
```

The `inject` action takes one argument `{<mode>: <target>}`:
- `<mode>`: Where the element will be injected
- `<target>`: Either an HTMLElement or a query selector string

```svelte
<!-- Inject after target -->
<div use:inject={{after: document.getElementById("example")}}>
	...
</div>

<!-- Inject before target -->
<div use:inject={{before: "#example"}}>
	...
</div>

<!-- Append to target -->
<div use:inject={{append: "li.example"}}>
	...
</div>
```

When you pass just the HTMLElement or a query string, the element will be appended:
```svelte
<!-- Append to target -->
<div use:inject={document.getElementById("example")}>
	...
</div>

<!-- Append to target -->
<div use:inject={"button.active"}>
	...
</div>
```

If you don't pass any arguments, the element will be appended to the `body`:
```svelte
<!-- Append to document.body -->
<div use:inject>
	...
</div>
```
npm package: @mic-tyson/dropdown-menu
Description: A simple, reusable dropdown menu component that you can easily integrate into your web applications. This dropdown menu supports dynamic button creation with customizable labels and callback functions.
Author: mic-tyson
Latest version: 1.0.2

# Dropdown Menu

A simple, reusable dropdown menu component that you can easily integrate into your web applications. This dropdown menu supports dynamic button creation with customizable labels and callback functions.

## Features

- **Reusable**: Can be used to create multiple dropdown menus on a page.
- **Customizable**: You can add as many buttons as you need, each with its own callback function.
- **Minimalist**: The dropdown uses simple CSS for visibility toggling and transitions.
- **Easy Integration**: Works with any JavaScript project using ES6 modules.

## Installation

```js
import { dropdownMenu } from './dropdownMenu.js';
```

## Example usage

```js
const dropdown1 = dropdownMenu(
  "Options 1",
  { label: "Button A", callback: () => console.log("Button A clicked") },
  { label: "Button B", callback: () => console.log("Button B clicked") }
);

const dropdown2 = dropdownMenu(
  "Options 2",
  { label: "Button X", callback: () => console.log("Button X clicked") },
  { label: "Button Y", callback: () => console.log("Button Y clicked") }
);
```
npm package: @mic2100/fuzzy-time
Description: This was inspired from the fuzzy time clock that exists on Ubuntu. It gives you a rough idea what the time is without you knowing the exact minutes.
Latest version: 0.0.4

# Fuzzy Time

This was inspired from the fuzzy time clock that exists on Ubuntu. It gives you a rough idea what the time is without you knowing the exact minutes.

## Installation

`npm install --save @mic2100/fuzzy-time`

## Usage

Once the `./src/fuzzy-time` file has been required a new method will be available on all `Date` objects.

```
require('./src/fuzzy-time');

let date = new Date();

console.log(date.fuzzyTime());
```