open-index/open-npm huggingface dataset:
npm package: @rhi-ui/html
Description: Basic tagged template which will allow us to get code highlights, on VSCode, for our vanilla custom element templates.
Author: RhiTech
Latest version: 1.0.6

## HTML Tagged Template

Basic [Tagged template](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) which will allow us to get code highlights, on VSCode, for our vanilla custom element templates.

### Use
When writting vanilla custom elements, write your template in the following fashion to get html code highlights:

```html
public static getTemplate(): string {
    return html`
    <div>My HTML template code goes here</div>
    `;
}
```
npm package: @rhi-ui/markdown-viewer
Description: Loads a markdown file and displays it.
Author: RhiTech
Latest version: 1.1.0

## rhi-ui-markdown-viewer

### Table example

|          |    Pantone 285C | Neutral Black C |     Cool Grey 7 |      Light Grey |
|----------|----------------:|----------------:|----------------:|----------------:|
| __CMYK__ | 100  45   0  19 |   0   0   0 100 |   0   0   0  50 |   2   2   0  29 |
| __RGB__  |       0 114 206 |       0   0   0 |     127 127 127 |     178 179 182 |
| __HEX__  |         #0072CE |         #000000 |         #7F7F7F |         #B2B3B6 |

### Code snippet example

```html
<rhi-ui-logo></rhi-ui-logo>
<rhi-ui-logo color-palette="grayscale"></rhi-ui-logo>
<rhi-ui-logo color-palette="black"></rhi-ui-logo>
<rhi-ui-logo color-palette="white" style="background-color:#0072CE;"></rhi-ui-logo>
```
npm package: @rhi-ui/tech-project-card
Description: Project card use for reporting internally at RHI.
Author: RhiTech
Latest version: 0.0.2

## &lt;rhi-ui-tech-project-card&gt;

### Install
`npm install --save @rhi-ui/tech-project-card`

### Basic usage

```html
<rhi-ui-tech-project-card
    champion="Patricia Mills"
    class="cliniquick"
    code="rhi-cq"
    description="Mobile data collection platform for the spasticity clinic at GF Strong."
    elevation="1"
    lead="Glenys"
    lead-initials="GM"
    name="CliniQuick for Spasticity"
    resources='[{"name": "Production site", "url": "https://www.isncscialgorithm.com/"},{"name": "Source code repository", "url": "https://rhitech.visualstudio.com/ISNCSCI%20Algorithm%20site"}]'
    status="maintenance">
</rhi-ui-tech-project-card>
```

### Style customization
| CSS variables                                        | Default                                    |
|:-----------------------------------------------------|:-------------------------------------------|
|--rhi-ui-tech-font-common-base-font-family            | 'Roboto', 'Noto', 'Open Sans', sans-serif' |
|--rhi-ui-tech-project-card-lead-icon-background-color | #000                                       |
|--rhi-ui-tech-project-card-lead-icon-color            | #FFF                                       |
|--rhi-ui-tech-project-card-media-background-color     | #CCC                                       |
|--rhi-ui-tech-project-card-media-background-image     | none                                       |

### Property(Attribute)
| Property(Attribute) | Type   | Description                                                              |
|---------------------|:-------|:-------------------------------------------------------------------------|
| champion            | string | Name of the project champion.                                            |
| code                | string | Project code usually used as the prefix for repositories and classes.    |
| description         | string | Project description.                                                     |
| elevation           | number | Value between 1 and 5 to determine the drop shadow of the component.     |
| lead                | string | Name of the IT member leading the project.                               |
| lead-initials       | string | Initials of the project lead.                                            |
| name                | string | The project's name.                                                      |
| resources           | string | List of web resources which provide extra information about the project. |
| status              | string | Current project status   |
npm package: @rhi-ui/thermometer-eq5d
Description: Thermometer element for GRP form EQ5D.
Author: RhiTech
Latest version: 0.0.1

## &lt;rhi-ui-thermometer-eq5d&gt;

[**EQ-5D**](https://en.wikipedia.org/wiki/EQ-5D) is a standardized instrument for measuring generic health status. It has been widely used in population health surveys, clinical studies, economic evaluation and in routine outcome measurement in the delivery of operational healthcare.  The study `CanProCo` in the [**Global Research Platform**](https://www.rhigrp.net) uses this standard form.  In order to obtain permission to use the form, the EuroQol Research Foundation has told us to add a thermometer component, similar to the one on their printable form, when collecting a patient's health state.  We have created the &lt;`rhi-ui-thermometer-eq5d`&gt; custom element to satisfy the requirement.

### Install
`npm install --save @rhi-ui/thermometer-eq5d`

### Basic usage

```html
<rhi-ui-thermometer-eq5d
    end="100"
    start="0"
    steps="10"
    value="20">
</rhi-ui-thermometer-eq5d>
```

The code above would produce the following result:

![Thermometer EQ5D](documentation/thermometer-eq5d.png "Thermometer EQ5D")

### Property (Attribute)
| Property (Attribute) | Type    | Description |
|----------------------|:--------|:------------|
| end   | number | The maximum value the thermometer is to measure. It is the number to be shown right at the top. |
| start | number  | The minimum value the thermometer is to measure. It is the number to be shown right at the bottom. |
| steps | number | Used to calculate the increments between the start and the end values on the thermometer (the numbers in between). |
| value | number | Controls the size of the 'mercury' line that indicates the value. |

### CSS Variables
| Variable name                        | Default value |
|--------------------------------------|:-------------:|
| --thermometer-bar-color              | #CCC          |
| --thermometer-border-color           | #CCC          |
| --thermometer-box-shadow-color       | #E2E2E2       |
| --thermometer-main-bar-color         | #000          |
| --thermometer-mercury-bar-color      | #F00          |
| --thermometer-mercury-mix-blend-mode | multiply      |
| --thermometer-grade-color            | #666          |
npm package: @rhiaqey/sdk-ts
Description: Rhiaqey SDK for clients
Latest version: 1.0.63

# RhiaqeySDK

![sdk-ts](https://github.com/rhiaqey/sdk-ts/actions/workflows/pr_merge.yml/badge.svg)

## NPM

```
https://www.npmjs.com/package/@rhiaqey/sdk-ts
```

## CDN

```
https://cdn.jsdelivr.net/npm/@rhiaqey/sdk-ts@1.0.45/dist/umd/sdk.js
https://cdn.jsdelivr.net/npm/@rhiaqey/sdk-ts@1.0/dist/umd/sdk.js
https://cdn.jsdelivr.net/npm/@rhiaqey/sdk-ts@1/dist/umd/sdk.js
```

## Example

```js
let connection = new RhiaqeySDK.WebsocketConnection({
    endpoints: [
        'https://hub.demo.prod.cloud.rhiaqey.com'
    ],
    channels: [
        'some_channel'
    ],
    apiKey: 'strong_api_key',
    apiHost: 'localhost:3333',
    snapshot: true  // subscribe to snapshot feed
});

// request snapshot from /snapshot http endpoint
connection.fetchSnapshot().subscribe(data => {
    console.log('>> snapshot arrived', data);
});

// promised version of the snapshot request
connection.fetchSnapshotPromised().then(data => {
    console.log('>> async snapshot arrived', data);
});

// all the messages will land here
connection.dataStream().subscribe((message) => {
    // console.log('>> message arrived', message);
});

// connect explicitly
connection.connect();

```
npm package: @rhiaqey/widgets-ts
Description: Rhiaqey Widgets for node and web
Latest version: 1.0.53

# Rhiaqey Widgets

![widgets-ts](https://github.com/rhiaqey/widgets-ts/actions/workflows/commit.yml/badge.svg)

### CDN

```
https://cdn.jsdelivr.net/npm/@rhiaqey/widgets-ts@1.0.38/dist/umd/widgets-ts.js
https://cdn.jsdelivr.net/npm/@rhiaqey/widgets-ts@1.0/dist/umd/widgets-ts.js
https://cdn.jsdelivr.net/npm/@rhiaqey/widgets-ts@1/dist/umd/widgets-ts.js
```
npm package: @rhidium/core
Description: Quickly and easily create powerful Discord bots using a powerful all-in-one framework.
Author: Richard Hillebrand
Latest version: 2.2.0

<div align="center">
  <a href="https://rhidium.xyz"><img src="https://github.com/rhidium/core/assets/57721238/e6d25fa1-07cb-4284-a02a-f73fe7ef3878" width="100" alt="logo" /></a>

  ![Font_PNG](https://github.com/rhidium/core/assets/57721238/9ccc5763-8336-4d1e-8187-a738bafdc519)

  <p>
    <a href="https://discord.gg/mirasaki"><img src="https://img.shields.io/discord/793894728847720468?color=5865F2&logo=discord&logoColor=white" alt="Discord server" /></a>
    <a href="https://www.npmjs.com/package/@rhidium/core"><img alt="NPM Version" src="https://img.shields.io/npm/v/%40rhidium%2Fcore?logo=npm"></a>
    <a href="https://www.npmjs.com/package/@rhidium/core"><img src="https://img.shields.io/npm/dt/@rhidium/core.svg?maxAge=3600" alt="npm downloads" /></a>
    <!-- <a href="https://www.npmjs.com/package/@rhidium/core"><img alt="NPM License" src="https://img.shields.io/npm/l/%40rhidium%2Fcore?logo=github"></a> -->
  </p>

  [![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
  ![NPM License](https://img.shields.io/npm/l/%40rhidium%2Fcore?logo=github)

  <p align="center">
    <a href="https://github.com/rhidium/core">Core</a>
    •
    <a href="https://github.com/rhidium/template">Template</a>
    •
    <a href="https://github.com/rhidium/json-editor">JSON Editor</a>
    •
    <a href="https://github.com/rhidium/core">Placeholder</a>
  </p>
</div>

# @rhidium/core

Rhidium is built out of love for Discord bot development, and has 1 primary goal: to make your life easier. Whether you're just getting started, or you're a seasoned developer, Rhidium is designed to simplify your workflow and help you create bots you can be proud of.

## 🤝 About

Rhidium is **not** a lightweight framework. It is built on top of the [discord.js](https://discord.js.org/#/) library, and aims to provide most of the core functionality required to bootstrap a powerful, modern Discord bot. Written in TypeScript, it provides the benefits of static type-checking and code completion in modern editors.

## 📚 Documentation

We provide multiple resources to help get you started on your project quickly:

- [Template / Example](https://github.com/rhidium/template) - If you're new here, the best way to determine if Rhidium is a fit for you is by exploring this complete example.
- [API Documentation](https://rhidium.xyz/modules.html) - Once you're convinced, clone the example/template and check out the API docs to learn more about the inner workings and possibilities.

## 🙋 Support

Join our [support server](https://discord.gg/mirasaki) if you have any questions, feature requests or other feedback:

[![banner](https://invidget.switchblade.xyz/mirasaki)](https://discord.gg/mirasaki)