open-index/open-npm huggingface dataset:
npm package: @open-vanilla/result
Description: A vanilla module implementing the Result pattern to make the error handling more explicit
Author: Ayoub Adib
Latest version: 3.0.0

<br>
<div align="center">
    <h1>@open-vanilla/result</h1>
    <strong>A vanilla module implementing the Result pattern to make the error handling more explicit</strong>
</div>
<br>
<br>

## ✨ Features

TypeScript's implementation for the Result pattern inspired by the [Rust](https://doc.rust-lang.org/std/result/) and [Swift](https://developer.apple.com/documentation/swift/result) primitive.
The Result pattern is an implementation variant of [Either pattern](https://www.thoughtworks.com/insights/blog/either-data-type-alternative-throwing-exceptions) well-known in some functional programming languages.

In contrast to traditional exception handling, the Result pattern:

- Makes the control flow and error handling more explicit (the developer has to handle both scenarios (failure and success)).
- Add less performance overhead as returning a value is generally faster than [throwing an exception](https://dev.to/ephilips/better-error-handling-in-c-with-result-types-4aan).

<br>

## 🚀 Quickstart

1️⃣ Install the library:

```bash
# Npm
npm install @open-vanilla/result
# Pnpm
pnpm add @open-vanilla/result
# Yarn
yarn add @open-vanilla/result
```

2️⃣ Once you're done, you can play with the API:

```ts
import { success, failure } from "@open-vanilla/result";
import type { Result } from "@open-vanilla/result";

const createPassword = (input: string): Result<string> => {
	if (input.length < 12) {
		return failure(
			new Error("The password must be longer than 12 characters"),
		);
	}

	return success(input);
};

const password = createPassword("hello1234");

if (password.type === "failure") {
	// Password failure case logic.
	console.error("Failure case", password.payload);
} else {
	// Password success case logic.
	console.log("Success case", password.payload);
}
```

_You can check the [examples](https://github.com/adbayb/open-vanilla/tree/main/libraries/result/examples) folder for more use cases._

<br>

## ✍️ Contribution

We're open to new contributions, you can find more details [here](https://github.com/adbayb/open-vanilla/blob/main/CONTRIBUTING.md).

<br>

## 📖 License

[MIT](https://github.com/adbayb/open-vanilla/blob/main/LICENSE "License MIT")

<br>
npm package: @open-vue-collection/ui
Description: Open vue collection ui framework
Author: Felix Wochnick
Latest version: 1.0.5

# @open-vue-collection/ui

## Requires

- Vue 3
- Vuex 4

## Installation

```sh
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" $YourProPackageToken

npm install @open-vue-collection/ui 
```

```ts

// src/main.js or src/main.ts

import { createApp } from 'vue';
import App from './App.vue';

import UI from '@open-vue-collection/ui';
import store from './store'; // Vuex 4

const app = createApp(App)
                .use(store) // important: install the Vuex store first!
                .use(UI)
                .mount('#app');

```

```js
// tailwind.config.js

/* eslint-disable @typescript-eslint/no-var-requires */
const colors = require('tailwindcss/colors');

module.exports = {
    purge: { content: ['./public/**/*.html', './src/**/*.vue'] },
    darkMode: 'class', // or 'media' or 'class'
    theme: {
        extend: {
            borderRadius: {
                sm: '4px',
            },
        },
        fontFamily: {
            display: ['Montserrat'],
            header: ['Cubano'],
        },
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            primary: 'rgba(24, 118, 210, var(--tw-bg-opacity))',
            ...colors,
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
};


```

## Darkmode

```ts
// Switch between dark and light mode
this.$store.commit('darkmode/switch');

// active mode
this.$store.getters['darkmode/mode'] // -> 'dark' | 'light'

// if dark mode is active
this.$store.getters['darkmode/dark'] // -> boolean
```

## Components

- ✅ vue-button
- ✅ vue-icon-button

- ✅ vue-card

- ✅ vue-tooltip

- 🕐 vue-nav-bar
- 🕐 vue-nav

- 🕐 vue-simple-card
- 🕐 vue-backdrop

- 🕐 vue-app

- 🕐 vue-modal
npm package: @open-wc/chai-dom-equals
Description: Chai Plugin to compare dom and shadow dom trees. Part of open-wc recommendations
Author: open-wc
Latest version: 0.12.36

# Chai Dom Equals

> Part of [Open Web Components](https://github.com/open-wc/open-wc/)

Open Web Components provides a set of defaults, recommendations and tools to help facilitate your web component project. Our recommendations include: developing, linting, testing, building, tooling, demoing, publishing and automating.

[![CircleCI](https://circleci.com/gh/open-wc/open-wc.svg?style=shield)](https://circleci.com/gh/open-wc/open-wc)
[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)](https://www.browserstack.com/automate/public-build/M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)
[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)

> Note: this package is deprecated, usage `@open-wc/semantic-dom-diff` which exposes a chai plugin now.

<script>
  export default {
    mounted() {
      const editLink = document.querySelector('.edit-link a');
      if (editLink) {
        const url = editLink.href;
        editLink.href = url.substr(0, url.indexOf('/master/')) + '/master/packages/chai-dom-equals/README.md';
      }
    }
  }
</script>
npm package: @open-wc/codelabs
Description: Open-wc codelabs
Author: open-wc
Latest version: 1.2.1

# Open-wc codelabs

## Contributing

Codelabs are written in markdown, h1 (`#`) indicates the codelab title and each h2 (`##`) indicates a codelab step. You can embed links, images and code snippets. See `example-codelabs` for more info.

To display notifications, you can use a aside:

```html
<aside class="notice">...</aside>
```

Possibles classes are: notice, special, warning, callout

You can view the result of a codelab by running the codelab build. This will output the codelab index.html under `/docs/.vuepress/public/codelabs`. You can open it with any browser.

Codelabs are output using the Google Codelab tools. See https://github.com/googlecodelabs/tools for the full documentation.
npm package: @open-wc/demoing-storybook
Description: Storybook configuration following open-wc recommendations
Author: open-wc
Latest version: 2.4.7

# Demoing via storybook

For demoing, documenting and showcasing different states of your Web Component, we recommend using [storybook](https://storybook.js.org/).

See [our website](https://open-wc.org/docs/demoing/storybook/) for full documentation.
npm package: @open-wc/dev-server-wc-hmr
Description: Plugin for HMR with web components
Author: open-wc
Latest version: 0.0.1

# Demoing via storybook

Plugin for "hot module replacement" or "fast refresh" with web components.

See [our website](https://open-wc.org/docs/development/hot-module-replacement/) for full documentation or view the docs [on github](../../docs/docs/development/hot-module-replacement.md)
npm package: @open-wc/eslint-config
Description: Eslint config following open-wc recommendations
Author: open-wc
Latest version: 13.0.0

# Tools >> Linting and Formatting ||40

We recommend using [ESLint](https://eslint.org/) to lint your code and [prettier](https://prettier.io/) to format your code.

This helps catch errors during development, keep a consistent code style, and avoid formatting creating large diffs in pull requests.

## Linting config

We recommend `@open-wc/eslint-config` for a good default configuration for web component projects.

The config includes smart defaults, and installs the following configs and plugins:

- [eslint-config-airbnb-base](https://www.npmjs.com/package/eslint-config-airbnb-base) (with some modifications)
- [eslint-plugin-wc](https://www.npmjs.com/package/eslint-plugin-wc)
- [eslint-plugin-lit](https://www.npmjs.com/package/eslint-plugin-lit)
- [eslint-plugin-html](https://www.npmjs.com/package/eslint-plugin-html)
- [eslint-plugin-mocha-no-only](https://www.npmjs.com/package/eslint-plugin-mocha-no-only)

## Setup

### Automated

For an automated setup, use our [project generator](https://github.com/open-wc/open-wc/blob/5c69689586f8db3595013f690a1747dd57354178/docs/guides/developing-components/getting-started.md) and choose the linting option.

### Manual

To set up our config manually, install the necessary packages:

```bash
npm install --save-dev eslint @open-wc/eslint-config prettier eslint-config-prettier
```

And update your package.json with the commands and config:

```json
{
  "scripts": {
    "lint": "npm run lint:eslint && npm run lint:prettier",
    "format": "npm run format:eslint && npm run format:prettier",
    "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
    "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
    "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
    "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore"
  },
  "eslintConfig": {
    "extends": ["@open-wc/eslint-config"]
  },
  "prettier": {
    "singleQuote": true,
    "arrowParens": "avoid"
  }
}
```

## IDE Support

Most IDEs have plugins or configuration options available to help with code linting and formatting.

For VSCode we recommend the [eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) plugin for highlighting linting errors, and the [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) for formatting on save.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

## Lint on commit

To lint changed files on commit, we recommend [husky](https://www.npmjs.com/package/husky) with [lint-staged](https://www.npmjs.com/package/lint-staged).

Install the necessary packages:

```
npm install --save-dev husky lint-staged
```

And update your package.json:

```json
{
  "lint-staged": {
    "*.js": ["eslint --fix", "prettier --write"]
  }
}
```

Add the lint-staged hook

```bash
npx husky add .husky/pre-commit "npx lint-staged"
```
npm package: @open-wc/prettier-config
Description: Prettier config following open-wc recommendations
Author: open-wc
Latest version: 1.1.0
Deprecated: Please use Prettier 2 directly if you want to reproduce the exact same settings you can use { "printWidth": 100, "singleQuote": true, "arrowParens": "avoid", "trailingComma": "all" } in your prettier config.

# Linting Prettier

Use [Prettier](https://prettier.io) to format your JS, CSS and HTML code.

> :Warning: this package is deprecated. We recommend using prettier v2 with the recommend config instead.

## Setup

```bash
npm init @open-wc
# Upgrade > Linting
```

## Manual

- Install `@open-wc/prettier-config`
  ```bash
  npm add --save-dev @open-wc/prettier-config
  ```
- Adjust your package.json with the following
  ```js
  "scripts": {
    "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
    "format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore"
  },
  "devDependencies": {
    "@open-wc/prettier-config": "^0.1.10"
  },
  "eslintConfig": {
    "extends": [
      "eslint-config-prettier"
    ]
  },
  "prettier": "@open-wc/prettier-config"
  ```

## What you get

- Apply formatting to JS files
- Apply formatting to HTML inside of `html` tagged template literals used by [lit-html](https://github.com/Polymer/lit-html)
- Apply formatting to CSS inside of `css` tagged template literals used by [lit-element](https://lit-element.polymer-project.org/guide/styles#static-styles)
- Integration with ESLint to prevent potentially conflicting rules

## Usage

Run:

- `npm run lint:prettier` to check if your files are correctly formatted
- `npm run format:prettier` to auto format your files

## Linting Error Examples

```bash
$ npm run lint:prettier

test/set-card.test.js
test/set-game.test.js
↑↑ these files are not prettier formatted ↑↑
```

Simply run `npm run format:prettier` to format your files automatically.

<script>
  export default {
    mounted() {
      const editLink = document.querySelector('.edit-link a');
      if (editLink) {
        const url = editLink.href;
        editLink.href = url.substr(0, url.indexOf('/master/')) + '/master/packages/prettier-config/README.md';
      }
    }
  }
</script>
npm package: @open-wc/storybook
Description: Storybook configuration following open-wc recommendations
Author: open-wc
Latest version: 0.2.8

# Demoing via storybook

> Part of [Open Web Components](https://github.com/open-wc/open-wc/)

Open Web Components provides a set of defaults, recommendations and tools to help facilitate your web component project. Our recommendations include: developing, linting, testing, building, tooling, demoing, publishing and automating.

[![CircleCI](https://circleci.com/gh/open-wc/open-wc.svg?style=shield)](https://circleci.com/gh/open-wc/open-wc)
[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)](https://www.browserstack.com/automate/public-build/M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)
[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)

For demoing and showcasing different states of your Web Component, we recommend using [storybook](https://storybook.js.org/).

::: tip
This is part of the default [open-wc](https://open-wc.org/) recommendation
:::

## Setup
```bash
npm i -g yo
npm i -g generator-open-wc

yo open-wc:demoing
```

### Manual
- `yarn add @open-wc/storybook --dev`
- Copy at minimum the [.storybook](https://github.com/open-wc/open-wc/tree/master/packages/generator-open-wc/generators/demoing-storybook/templates/static/.storybook) folder to `.storybook`
- If you want to bring along the examples, you may also copy the `stories` folder.
- Add the following scripts to your package.json
```js
"scripts": {
  "site:build": "npm run storybook:build",
  "storybook:build": "build-storybook -o _site",
  "storybook:start": "start-storybook -p 9001"
},
```

## Usage

Create stories within the `stories` folder.

```bash
npm run storybook:start
```

## Example
The [Set-Game Example](https://github.com/open-wc/example-vanilla-set-game/) has the default publishing via storybook on netlify.
You can see the finished page at: [https://example-set-game-open-wc.netlify.com/](https://example-set-game-open-wc.netlify.com/).

<script>
  export default {
    mounted() {
      const editLink = document.querySelector('.edit-link a');
      if (editLink) {
        const url = editLink.href;
        editLink.href = url.substr(0, url.indexOf('/master/')) + '/master/packages/storybook/README.md';
      }
    }
  }
</script>
npm package: @open-wc/testing
Description: Testing following open-wc recommendations
Author: open-wc
Latest version: 4.0.0

# Testing >> Testing Package ||10

`@open-wc/testing` is an opinionated package that combines and configures testing libraries to minimize the amount of ceremony required when writing tests.

## Setup

```bash
npm i -D @open-wc/testing@next
```

## Testing helpers

Exposes all functions of [@open-wc/testing-helpers](https://github.com/open-wc/open-wc/blob/9767b1ae8a52424e224d238784e04a9710d4e9b3/docs/docs/testing/helpers.md), so that you have a single package to import from:

```javascript
import { fixture, html } from '@open-wc/testing';

describe('my-test', () => {
  it('works', async () => {
    const el = await fixture(html` <my-element></my-element> `);
  });
});
```

## Chai

Exposes chai as an es module with useful plugins pre-configured:

[@open-wc/semantic-dom-diff](https://www.npmjs.com/package/@open-wc/semantic-dom-diff) for dom tree / snapshot testing:

```javascript
import { expect, fixture, html } from '@open-wc/testing';

describe('Plugin - semantic-dom-diff', () => {
  it('can semantically compare full dom trees', async () => {
    const el = await fixture(`<div><!-- comment --><h1>${'Hey'}  </h1>  </div>`);
    expect(el).dom.to.equal('<div><h1>Hey</h1></div>');
  });

  it('can semantically compare lightDom trees', async () => {
    const el = await fixture(`<div><!-- comment --><h1>${'Hey'}  </h1>  </div>`);
    expect(el).lightDom.to.equal('<h1>Hey</h1>');
  });

  it('can compare against a snapshot', async () => {
    const el = await fixture(`<div><!-- comment --><h1>${'Hey'}  </h1>  </div>`);
    expect(el).dom.to.equalSnapshot();
  });
});
```

[@open-wc/chai-a11y-axe](https://www.npmjs.com/package/chai-a11y-axe) for a11y testing:

```javascript
import { expect, fixture, html } from '@open-wc/testing';

describe('my-test', () => {
  it('works', async () => {
    const el = await fixture(html` <my-element></my-element> `);
    await expect(el).to.be.accessible();
  });
});
```

[chai-dom](https://www.npmjs.com/package/chai-dom) for dom testing:

```js
import { fixture, expect } from '@open-wc/testing';

describe('Plugin - chai-dom', () => {
  it('can check for an exiting css class', async () => {
    const el = await fixture(`<div class="foo bar"></div>`);
    expect(el).to.have.class('foo');
  });
});
```
npm package: @open-wc/testing-wallaby
Description: Testing with wallaby following open-wc recommendations
Author: open-wc
Latest version: 0.1.14
Deprecated: This package is unmaintained please use something else if you are using wallaby

# Testing in IDE via Wallaby

> Part of [Open Web Components](https://github.com/open-wc/open-wc/)

Open Web Components provides a set of defaults, recommendations and tools to help facilitate your web component project. Our recommendations include: developing, linting, testing, building, tooling, demoing, publishing and automating.

[![CircleCI](https://circleci.com/gh/open-wc/open-wc.svg?style=shield)](https://circleci.com/gh/open-wc/open-wc)
[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)](https://www.browserstack.com/automate/public-build/M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)
[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)

Wallaby.js is a Plugin for your IDE and runs tests in real time while you are typing.

Using:

- In IDE Testing via [wallaby.js](https://wallabyjs.com/)

## Setup

```bash
npm init @open-wc
```

### Manual

1. Copy the [config](https://github.com/open-wc/open-wc/blob/master/packages/create/src/generators/testing-wallaby/templates/static/wallaby.js) and save it as `wallaby.js` into your project root
2. `npm i -D @open-wc/testing-wallaby`

## Usage

Open your wallaby.js supported IDE and start with the provided config.

## Example

The [Set-Game Example](https://github.com/open-wc/example-vanilla-set-game/) has Wallaby Setup.

<script>
  export default {
    mounted() {
      const editLink = document.querySelector('.edit-link a');
      if (editLink) {
        const url = editLink.href;
        editLink.href = url.substr(0, url.indexOf('/master/')) + '/master/packages/testing-wallaby/README.md';
      }
    }
  }
</script>
npm package: @open-wc/webpack
Description: Webpack configuration following open-wc recommendations
Author: open-wc
Latest version: 0.1.6
Deprecated: @open-wc/webpack has been moved to @open-wc/webpack-import-meta-loader. Please uninstall this package and use the new one instead.

# Webpack Helpers

> Part of [Open Web Components](https://github.com/open-wc/open-wc/)

Open Web Components provides a set of defaults, recommendations and tools to help facilitate your web component project. Our recommendations include: developing, linting, testing, building, tooling, demoing, publishing and automating.

[![CircleCI](https://circleci.com/gh/open-wc/open-wc.svg?style=shield)](https://circleci.com/gh/open-wc/open-wc)
[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)](https://www.browserstack.com/automate/public-build/M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)
[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)

If you need support to use `import.meta.url` within webpack this is a minimal loader to support it.

## Note
This is NOT an optimal solution e.g. it will slow down your build time.
However as currently `import.meta` results in an webpack parse error using a loader is probably the only thing we can do for now.
For details see 
- [https://github.com/webpack/webpack/issues/6719](https://github.com/webpack/webpack/issues/6719)
- [https://github.com/Polymer/tools/issues/518](https://github.com/Polymer/tools/issues/518)

If webpack fixed that parse error import.meta will probably work out of the box.
If not then a babel plugin (that can work with AST) will be a better solution.

## Manual Setup
- `yarn add @open-wc/webpack`
- Add this to your webpack config
```js
module: {
  rules: [
    {
      test: /\.js$/,
      loader: require.resolve('@open-wc/webpack/loaders/import-meta-url-loader.js'),
    },
  ],
},
```
npm package: @open-wc/webpack-import-meta-loader
Description: Webpack configuration following open-wc recommendations
Author: open-wc
Latest version: 0.4.7

# Webpack Helpers

Webpack loader for supporting `import.meta` in webpack.

> Part of [Open Web Components](https://github.com/open-wc/open-wc/): guides, tools and libraries for modern web development and web components

[![CircleCI](https://circleci.com/gh/open-wc/open-wc.svg?style=shield)](https://circleci.com/gh/open-wc/open-wc)
[![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)](https://www.browserstack.com/automate/public-build/M2UrSFVRang2OWNuZXlWSlhVc3FUVlJtTDkxMnp6eGFDb2pNakl4bGxnbz0tLUE5RjhCU0NUT1ZWa0NuQ3MySFFWWnc9PQ==--86f7fac07cdbd01dd2b26ae84dc6c8ca49e45b50)
[![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)

## Note

This is NOT an optimal solution e.g. it may slow down your build a little.
However as currently `import.meta` results in an webpack parse error using a loader is probably the only thing we can do for now.
For details see

- [https://github.com/webpack/webpack/issues/6719](https://github.com/webpack/webpack/issues/6719)
- [https://github.com/Polymer/tools/issues/518](https://github.com/Polymer/tools/issues/518)

If webpack fixed that parse error import.meta will probably work out of the box.
If not then a babel plugin (that can work with AST) will be a better solution.

## Manual Setup

- `yarn add @open-wc/webpack-import-meta-loader`
- Add this to your webpack config

```js
module: {
  rules: [
    {
      test: /\.js$/,
      loader: require.resolve('@open-wc/webpack-import-meta-loader'),
    },
  ],
},
```
npm package: @open-webring/react
Description: This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Latest version: 0.0.2

# Open-WebRing React Component

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm run start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `npm run test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
npm package: @open-website-status/api
Description: TypeScript API client for Open Website Status
Author: Dominik Korsa
Latest version: 1.3.2

# TypeScript API client for Open Website Status
![npm](https://img.shields.io/npm/v/@open-website-status/api)
![npm bundle size](https://img.shields.io/bundlephobia/min/@open-website-status/api)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@open-website-status/api)
npm package: @open-website-status/provider
Description: CLI provider for Open Website Status
Author: Dominik Korsa
Latest version: 1.3.0

# Open Website Status provider
![npm](https://img.shields.io/npm/v/@open-website-status/provider)

This is the CLI provider for Open Website Status

## Usage

Install using:
```shell script
npm i @open-website-status/provider -g
```

After installing, you can use the terminal command:
```shell script
ows-provider
```
The configuration can be provider in the following ways:
 - As a command parameter
```shell script
ows-provider -t MY_TOKEN -s http://example.com:1234
```
 - Set in the config
```shell script
ows-provider config-set token MY_TOKEN
ows-provider config-set server http://example.com:1234
```
 - Passed as an environmental variable
 - Provided in a .env file (using the same key as the Environmental variable)
 ```.dotenv
OWS_TOKEN=MY_TOKEN
OWS_SERVER=http://example.com:1234
```

If you provide the setting in multiple ways (eg. as a command line parameter and as an environmental variable) the priority is the same as the order of the list above

| Command argument  | Config key | Environmental variable | Description          | Required | Default                             |
|-------------------|------------|------------------------|----------------------|----------|-------------------------------------|
| -t, --token TOKEN | token      | OWS_TOKEN              | Provider token       | **YES**  |                                     |
| -s, --server URL  | server     | OWS_SERVER             | Backend server URL   | no       | https://api.open-website-status.com |
| -p, --path PATH   | path       | OWS_PATH               | Provider socket path | no       | /provider-socket                    |

## Running as a service

If you want to run the script as a service you can use a tool such as [pm2](http://pm2.io/).

Install **pm2** using
```shell script
npm i -g pm2
```
You can then start the service using
```shell script
pm2 start ows-provider
```
To stop it just run
```shell script
pm2 stop ows-provider
```
***NOTE:** for some reason this doesn't work on Windows. Check [Unitech/pm2#2037](https://github.com/Unitech/pm2/issues/2037) for more details.*

Check [this pm2 guide](https://pm2.keymetrics.io/docs/usage/startup/) for instructions to start the service on system boot.
npm package: @open-website-status/provider-sdk
Description: TypeScript SDK for Open Website Status
Author: Dominik Korsa
Latest version: 1.2.1

# TypeScript SDK for Open Website Status
![npm](https://img.shields.io/npm/v/@open-website-status/provider-sdk)
![npm bundle size](https://img.shields.io/bundlephobia/min/@open-website-status/provider-sdk)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@open-website-status/provider-sdk)
npm package: @open-xchange/bootstrap
Description: Bootstrap as a module with some a11y fixes
Author: richard.petersen@open-xchange.com
Latest version: 0.3.2

# @open-xchange/bootstrap

- A bundle which provides bootstrap 3.0 including datepicker, typeahead and tokenfield as a module

## Prerequisites

This module has several dependencies (see externals in the vite config), which are usually only there in an open-xchange Appsuite UI environment. In other environments, this module might be useless.

## How to use

### Simple usage

```js
// main.js
import '@open-xchange/bootstrap'
import '@open-xchange/bootstrap/dist/style.css'
```

### Style with less-variables

```js
// main.js
import '@open-xchange/bootstrap'
import './style.less'
```

```less
// style.less
// bootstrap overwrite
@brand-primary: #fff;
// use bootstrap with variables
@import '@open-xchange/bootstrap/less/bootstrap.less';
```