open-index/open-npm huggingface dataset:
npm package: @invect/core
Description: Framework-agnostic core package for Invect workflow execution engine
Author: robase
Latest version: 0.1.4

# @invect/core

Framework-agnostic core package for Invect workflow execution engine.

## Overview

This package contains the core business logic for Invect, including:

- Flow management and execution
- Node type implementations (Template String, Language Model, SQL Query, If-Else)
- Database operations using Drizzle ORM
- Framework-agnostic service interfaces

## Installation

```bash
npm install @invect/core @invect/types
```

## Quick Start

```typescript
import { CoreConfigBuilder, InvectCore } from '@invect/core';

// Create configuration
const config = new CoreConfigBuilder()
  .database({
    url: 'postgresql://localhost:5432/invect',
    type: 'postgresql'
  })
  .anthropicApiKey('your-anthropic-key')
  .build();

// Initialize core
const core = new InvectCore(config, logger, databaseAdapter);
await core.initialize();

// Use services
const flow = await core.flowService.createFlow({
  name: 'My Workflow',
  description: 'A sample workflow'
});
```

## Configuration

### Environment Variables

- `FLOW_DB_URL` - Database connection string
- `ANTHROPIC_API_KEY` - Anthropic API key for LLM nodes
- `OPENAI_API_KEY` - OpenAI API key for LLM nodes
- `FLOW_DEFAULT_TIMEOUT` - Default execution timeout (ms)
- `FLOW_MAX_CONCURRENT` - Maximum concurrent executions
- `FLOW_ENABLE_TRACING` - Enable execution tracing
- `FLOW_LOG_LEVEL` - Logging level (debug, info, warn, error)

### Configuration Builder

```typescript
import { createConfigFromEnv } from '@invect/core';

const config = createConfigFromEnv()
  .execution({
    defaultTimeout: 30000,
    maxConcurrentExecutions: 5
  })
  .build();
```

## Supported Databases

- PostgreSQL
- SQLite
- MySQL

## Node Types

- **Template String Node**: Text templating with variable substitution
- **Language Model Node**: AI text generation using Anthropic Claude or OpenAI
- **SQL Query Node**: Database query execution
- **If-Else Node**: Conditional flow control

## Development

```bash
# Build
npm run build

# Development mode
npm run dev

# Type checking
npm run type-check

# Database operations
npm run db:generate  # Generate migrations
npm run db:migrate   # Run migrations
npm run db:studio    # Open Drizzle Studio
```

## License

MIT
npm package: @invect/ui
Description: Complete React components and routes for Invect workflow management
Author: robase
Latest version: 0.0.1

<p align="center">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="../../.github/assets/logo-light.svg">
    <img alt="Invect" src="../../.github/assets/logo-dark.svg" width="50">
  </picture>
</p>

<h1 align="center">@invect/ui</h1>

<p align="center">
  React flow editor and dashboard for Invect.
  <br />
  <a href="https://invect.dev/docs"><strong>Docs</strong></a> · <a href="https://invect.dev/docs/quick-start"><strong>Quick Start</strong></a>
</p>

---

A single React component that gives you a complete workflow editor, execution viewer, credential manager, and AI assistant. Built with React Flow, Tailwind CSS, and Radix UI.

## Install

```bash
npx invect-cli init
```

Or install manually:

```bash
npm install @invect/ui
```

## Usage

```tsx
import { Invect } from '@invect/ui';
import '@invect/ui/styles';

function App() {
  return <Invect apiBaseUrl="http://localhost:3000/invect" />;
}
```

This renders the full Invect UI — flow list, drag-and-drop editor, execution monitoring, and credential management.

## Props

| Prop               | Type                     | Default                        | Description                       |
| ------------------ | ------------------------ | ------------------------------ | --------------------------------- |
| `apiBaseUrl`       | `string`                 | `http://localhost:3000/invect` | Backend API URL                   |
| `basePath`         | `string`                 | `/invect`                      | Base path for routing             |
| `plugins`          | `InvectFrontendPlugin[]` | `[]`                           | Frontend plugins (RBAC, etc.)     |
| `reactQueryClient` | `QueryClient`            | —                              | Bring your own React Query client |

## CSS Scoping

All styles are scoped under a `.invect` CSS class. Invect won't interfere with your app's existing styles.

## InvectShell

For plugin UIs that render outside the main app (e.g. sign-in pages), use `InvectShell` to get just the CSS scope without routing or layout:

```tsx
import { InvectShell } from '@invect/ui';
import '@invect/ui/styles';

<InvectShell theme="dark">
  <YourCustomUI />
</InvectShell>;
```

## License

[MIT](../../LICENSE)

## License

[MIT](../../LICENSE)
npm package: @invelo/module
Description: Generate a Invelo module
Author: invelo
Latest version: 2.1.0

# generator-commonjs [![Build Status](https://travis-ci.org/yeoman/generator-commonjs.svg?branch=master)](https://travis-ci.org/yeoman/generator-commonjs)

> Generate a CommonJS module


## Install

```
$ npm install --global generator-commonjs
```


## Usage

```
$ yo commonjs
```


## License

MIT © Yeoman team
npm package: @inveniem/eslint-config
Description: Inveniem's reusable ESLint configuration
Author: John Karahalis
Latest version: 1.0.2

# @inveniem/eslint-config

This package provides Inveniem's ESLint configuration as an extensible shared
configuration.

## Usage

1. Run `yarn add --dev @inveniem/eslint-config`
2. Run `npx install-peerdeps --dev @inveniem/eslint-config`
3. Create an _.eslintrc.js_ file with the following contents:

```javascript
module.exports = {
  extends: '@inveniem/eslint-config',
};
```
npm package: @inveniem/prettier-config
Description: Inveniem's reusable Prettier configuration
Author: John Karahalis
Latest version: 1.1.0

# @inveniem/prettier-config

This package provides Inveniem's Prettier configuration as an extensible shared
configuration.

## Usage

1. Run `yarn --dev @inveniem/prettier-config`
2. Run `npx install-peerdeps --dev @inveniem/prettier-config`
3. Create a _.prettierrc.js_ file with the following contents:

```javascript
const inveniemPrettierConfig = require('@inveniem/prettier-config');

module.exports = {
  ...inveniemPrettierConfig,
};
```
npm package: @inveniem/stylelint-config
Description: Inveniem's reusable Stylelint configuration
Author: John Karahalis
Latest version: 1.3.0

# @inveniem/stylelint-config

This package provides Inveniem's Stylelint configuration as an extensible shared
configuration.

## Usage

1. Run `yarn --dev @inveniem/stylelint-config`
2. Run `npx install-peerdeps --dev @inveniem/stylelint-config`
3. Create an _.stylelintrc.js_ file with the following contents:

```javascript
module.exports = {
  extends: "@inveniem/stylelint-config",
};
```
npm package: @inveniosoftware/eslint-config-invenio
Description: ESLint config/preset used by the Invenio team
Author: Invenio Team
Latest version: 1.0.12

# Invenio ESLint config

This is the ESLint config used by the Invenio team.

## Installation

```shell
npm install --save-dev eslint-config-invenio
# if you use prettier
npm install --save-dev prettier eslint-plugin-prettier
# if you use babel
npm install --save-dev eslint-plugin-babel babel-eslint
```

## Presets

### invenio
The base config. You always want this when using this package.
Requires `eslint-plugin-import`

### invenio/prettier
Enables prettier integration.
Requires `prettier`, `eslint-config-prettier` and `eslint-plugin-prettier`
Make sure to load this after all other `invenio/*` presets.

For convenience, we also include a prettier config, that can be loaded by putting `"eslint-config-invenio/prettier-config"` in your `.prettierrc`.

## Example `.eslintrc.yml`

```yaml
extends:
  - '@inveniosoftware/invenio'
  - '@inveniosoftware/invenio/prettier'

parser: '@babel/eslint-parser'
```

## Example `.prettierrc`

```
"@inveniosoftware/eslint-config-invenio/prettier-config"
```
npm package: @inveniosoftware/invenio-records-editor-js
Description: A generic json editor for invenio-records
Author: CERN
Latest version: 0.0.8

# invenio-records-editor-js

[![Build Status](https://travis-ci.org/inveniosoftware/invenio-records-editor-js.svg?branch=master)](https://travis-ci.org/inveniosoftware/invenio-records-editor-js)

This application is a wrapper for [ng2-json-editor](https://github.com/inveniosoftware-contrib/ng2-json-editor) and serves as a dependency for [invenio-records-editor](https://github.com/inveniosoftware/invenio-records-editor) a generic invenio module which allows users to edit invenio records.

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.4.10.

## Development server

Run `npm start` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `npm run-script build` for production build. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `npm run-script test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `npm run-script e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
npm package: @inveniosoftware/react-invenio-app-ils
Description: Single Page App built with React for InvenioILS
Author: CERN
Latest version: 3.0.0

# react-invenio-app-ils

Single Page App built with React for [InvenioILS](https://inveniosoftware.org/products/ils/)

The official documentation is available at https://invenioils.docs.cern.ch.

## Update dependencies

To update dependencies you need to run `npm install` in the target deployment
environment:

```shell
$ rm -rf package-lock.json node_modules
# Run the container with x86_64 architecture and install packages
$ docker run -it --platform="linux/amd64" --rm -v $(pwd):/app -w /app node:22-alpine sh -c "npm install"
```
npm package: @invenseit/typescript-config
Description: Invenseit TypeScript Configuration
Author: Invenseit AB
Latest version: 1.0.2

# @invenseit/typescript-config

> Invenseit TypeScript Configuration

## Installation

```bash
yarn add typescript
yarn add --dev @invenseit/typescript-config
```

## Usage

## React Project

Enable the configuration by extending your project's `tsconfig.json`.

```json
{
  "extends": "@invenseit/typescript-config/index.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "rootDir": "."
  },
  "include": ["./src/**/*"]
}
```
npm package: @invenso/hello-world
Description: Test package
Latest version: 0.1.24

# @invenso/hello-world

> Test package

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

## Install

```bash
npm install --save @invenso/hello-world
```

## Usage

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

import MyComponent from '@invenso/hello-world'
import '@invenso/hello-world/dist/index.css'

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

## License

MIT © [](https://github.com/)
npm package: @invenso/material-ui-dots
Description: Just some animated dots for pagination.
Author: Wertarbyte
Latest version: 2.1.0

# Material-UI Dots

[![npm Package](https://img.shields.io/npm/v/material-ui-dots.svg)](https://www.npmjs.com/package/material-ui-dots)
[![Build Status](https://travis-ci.org/TeamWertarbyte/material-ui-dots.svg?branch=master)](https://travis-ci.org/TeamWertarbyte/material-ui-dots)
[![Coverage Status](https://coveralls.io/repos/github/TeamWertarbyte/material-ui-dots/badge.svg?branch=master)](https://coveralls.io/github/TeamWertarbyte/material-ui-dots?branch=next)
[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

This component gives you animated pagination dots as seen in the [Material Design specs][material-specs] and in the quick settings menu of Android N. The dots were extracted from our [auto-rotating carousel][material-auto-rotating-carousel] component.

[material-specs]: https://material.io/design/communication/onboarding.html#top-user-benefits-model
[material-auto-rotating-carousel]: https://github.com/TeamWertarbyte/material-auto-rotating-carousel

## Installation
```shell
npm i --save material-ui-dots
```

## Usage

There is only a single `Dots` component which is to be used in controlled mode. The following example component will display five dots and select a dot when clicking on it.

```js
import React from 'react'
import Dots from 'material-ui-dots'

class Demo extends React.Component {
  constructor (props) {
    super(props)
    this.state = { index: 0 }
  }

  render () {
    return (
      <Dots
        index={this.state.index}
        count={5}
        onDotClick={(index) => this.setState({ index })}
      />
    )
  }
}
```

## License

The files included in this repository are licensed under the MIT license.
npm package: @invenso/security-provider
Description: React security component for roles and permissions
Author: Invenso
Latest version: 1.2.0

# 🛡️ @invenso/security-provider

A lightweight React library for managing role- and permission-based access control (RBAC) in your React applications.

It provides two key components:
* SecurityProvider — sets up the security context with available permissions and roles.
* SecureComponent — conditionally renders children based on the user’s permissions or roles.

<br />

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


## 📦 Installation

```bash
npm install @invenso/security-provider
# or
yarn add @invenso/security-provider
```

## ⚙️ Basic Usage

```tsx
import React, { Component } from 'react'
import { SecureComponent, SecurityProvider } from '@invenso/security-provider'

const permissions = ['CREATE_USER', 'DELETE_USER']
const roles = ['ROLE_USER', 'ROLE_ADMIN']

class App extends Component {
  render() {
    return (
      <SecurityProvider permissions={permissions} roles={roles}>
        <Example />
        <ExampleForRole />
      </SecurityProvider>
    )
  }
}

class Example extends Component {
  render() {
    return (
      <SecureComponent permissions={['CREATE_USER']}>
        This is only visible when the user has permission <b>'CREATE_USER'</b>.
      </SecureComponent>
    )
  }
}

class ExampleForRole extends Component {
  render() {
    return (
      <SecureComponent roles={['ROLE_ADMIN']}>
        This is only visible when the user has role <b>'ROLE_ADMIN'</b>.
      </SecureComponent>
    )
  }
}

export default App
```

## License

MIT © [Invenso](https://github.com/Invenso)
npm package: @inventage-web-components/avatar-image
Description: An avatar image based on user initials.
Author: Inventage AG
Latest version: 0.1.2

# @inventage-web-components/avatar-image

An avatar image based on user initials.

[![Published on npm](https://img.shields.io/npm/v/@inventage-web-components/avatar-image.svg?style=flat-square)](https://www.npmjs.com/package/@inventage-web-components/avatar-image)
[![License](https://img.shields.io/npm/l/@inventage-web-components/avatar-image?style=flat-square)](https://github.com/inventage/web-components/blob/main/LICENSE)
[![Release](https://img.shields.io/github/actions/workflow/status/inventage/web-components/release.yml?style=flat-square)](https://github.com/inventage/web-components/actions)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@inventage-web-components/avatar-image/latest?style=flat-square)](https://bundlephobia.com/package/@inventage-web-components/avatar-image@latest)

## Quick Start

Use [unpkg.com](https://unpkg.com/browse/@inventage-web-components/avatar-image/) to get a simple example running in a single HTML file:

```html
<script type="module" src="https://unpkg.com/@inventage-web-components/avatar-image/lib/src/avatar-image.js?module"></script>

<avatar-image input="John Doe"></avatar-image>
```

Here's an [example of this method](https://catkin-bottlenose-beetle.glitch.me/) to get you started.

## Installation

```bash
npm i @inventage-web-components/avatar-image
```

## Usage

```html
<!--
  Adjust path to node_modules and use a dev server that support Node module
  resolution, like Web Dev server: https://www.npmjs.com/package/@web/dev-server
-->
<script
  type="module"
  src="/node_modules/@inventage-web-components/avatar-image/lib/src/avatar-image.js"
</script>

<avatar-image input="John Doe"></avatar-image>
```

## Documentation

The API documentation as well as interactive examples can be found in the [Storybook examples](https://inventage.github.io/web-components/?path=/story/avatar-image--default).
npm package: @inventage-web-components/common
Description: Shared, common functionality for @inventage-web-components packages.
Author: Inventage AG
Latest version: 2.1.0

# @inventage-web-components/common

Shared, common functionality for @inventage-web-components packages.

[![Published on npm](https://img.shields.io/npm/v/@inventage-web-components/common.svg?style=flat-square)](https://www.npmjs.com/package/@inventage-web-components/common)
[![License](https://img.shields.io/npm/l/@inventage-web-components/common?style=flat-square)](https://github.com/inventage/web-components/blob/main/LICENSE)
[![Release](https://img.shields.io/github/actions/workflow/status/inventage/web-components/release.yml?style=flat-square)](https://github.com/inventage/web-components/actions)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@inventage-web-components/common/latest?style=flat-square)](https://bundlephobia.com/package/@inventage-web-components/common@latest)
npm package: @inventage-web-components/hamburger-menu
Description: A simple hamburger menu component.
Author: Inventage AG
Latest version: 1.1.2

# @inventage-web-components/hamburger-menu

A simple hamburger menu component.

[![Published on npm](https://img.shields.io/npm/v/@inventage-web-components/hamburger-menu.svg?style=flat-square)](https://www.npmjs.com/package/@inventage-web-components/hamburger-menu)
[![License](https://img.shields.io/npm/l/@inventage-web-components/common?style=flat-square)](https://github.com/inventage/web-components/blob/main/LICENSE)
[![Release](https://img.shields.io/github/actions/workflow/status/inventage/web-components/release.yml?style=flat-square)](https://github.com/inventage/web-components/actions)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@inventage-web-components/hamburger-menu/latest?style=flat-square)](https://bundlephobia.com/package/@inventage-web-components/hamburger-menu@latest)

## Quick Start

Use [unpkg.com](https://unpkg.com/browse/@inventage-web-components/hamburger-menu/) to get a simple example running in a single HTML file:

```html
<script type="module" src="https://unpkg.com/@inventage-web-components/hamburger-menu/lib/src/hamburger-menu.js?module"></script>

<hamburger-menu></hamburger-menu>
```

Here's an [example of this method](https://hail-lacy-buckthorn.glitch.me/) to get you started.

## Installation

```bash
npm i @inventage-web-components/hamburger-menu
```

## Usage

```html
<!--
  Adjust path to node_modules and use a dev server that support Node module
  resolution, like Web Dev server: https://www.npmjs.com/package/@web/dev-server
-->
<script
  type="module"
  src="/node_modules/@inventage-web-components/hamburger-menu/lib/src/hamburger-menu.js"
</script>

<hamburger-menu></hamburger-menu>
```

## Documentation

The API documentation as well as interactive examples can be found in the [Storybook examples](https://inventage.github.io/web-components/?path=/story/hamburger-menu--default).
npm package: @inventage-web-components/portal-navigation
Description: A component implementing an opinionated (but generic and hence configurable) navigation pattern.
Author: Inventage AG
Latest version: 1.8.0

# @inventage-web-components/portal-navigation

A component implementing an opinionated (but generic and hence configurable) navigation pattern.

[![Published on npm](https://img.shields.io/npm/v/@inventage-web-components/portal-navigation.svg?style=flat-square)](https://www.npmjs.com/package/@inventage-web-components/portal-navigation)
[![License](https://img.shields.io/npm/l/@inventage-web-components/common?style=flat-square)](https://github.com/inventage/web-components/blob/main/LICENSE)
[![Release](https://img.shields.io/github/actions/workflow/status/inventage/web-components/release.yml?style=flat-square)](https://github.com/inventage/web-components/actions)
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@inventage-web-components/portal-navigation/latest?style=flat-square)](https://bundlephobia.com/package/@inventage-web-components/portal-navigation@latest)

## Quick Start

Use [jspm.dev](https://jspm.org/docs/cdn#jspmdev) to get a simple example running in a single HTML file:

```html
<script type="module" src="https://jspm.dev/@inventage-web-components/portal-navigation/portal-navigation.js"></script>
<portal-navigation src="./test-data.json" currentApplication="app1" internalRouting></portal-navigation>
```

Here's an [example of this method](https://tender-glowing-income.glitch.me/) to get you started.

## Installation

```bash
npm i @inventage-web-components/portal-navigation
```

## Usage

```html
<!--
  Adjust path to node_modules and use a dev server that support Node module
  resolution, like Web Dev server: https://www.npmjs.com/package/@web/dev-server
-->
<script
  type="module"
  src="/node_modules/@inventage-web-components/portal-navigation/lib/src/portal-navigation.js"
</script>

<portal-navigation src="/path/to/data.json"></portal-navigation>
```

## Documentation

The API documentation as well as interactive examples can be found in the [Storybook examples](https://inventage.github.io/web-components/?path=/story/portal-navigation).
npm package: @inventage/envsubst
Description: Environment variables substitution for Node
Author: Peter Siska
Latest version: 0.17.0

# envsubst

Bash-like environment variables substitution

&nbsp;[![Main Workflow](https://img.shields.io/github/actions/workflow/status/inventage/envsubst/main.yml?branch=main&style=flat-square)](https://github.com/inventage/envsubst/actions?query=workflow%3A"Main+Workflow")
&nbsp;[![npm version](https://img.shields.io/npm/v/@inventage/envsubst?style=flat-square)](https://www.npmjs.com/package/@inventage/envsubst)

## Example

Let's say you have a file `temp` with the following content:

```
${BAR}
${FOO:-foo}
```

When you run `BAR=baz npx --ignore-existing @inventage/envsubst temp`, you will end up with the following content in `temp`:

```
baz
foo
```

and the following output:

```
Made 2 replacements:

┌──────┬─────────────┬───────┐
│ File │ Variable    │ Value │
├──────┼─────────────┼───────┤
│ temp │ ${BAR}      │ baz   │
├──────┼─────────────┼───────┤
│ temp │ ${FOO:-foo} │ foo   │
└──────┴─────────────┴───────┘
```
npm package: @inventage/lit-i18next
Description: i18next implementation for Lit
Author: Weave B.V.
Latest version: 3.0.3

[![npm version](https://img.shields.io/npm/v/@inventage%2Flit-i18next.svg)](https://www.npmjs.com/package/@inventage/lit-i18next)
[![Downloads](http://img.shields.io/npm/dm/@inventage%2Flit-i18next.svg)](https://www.npmjs.com/package/@inventage/lit-i18next)
[![License](https://img.shields.io/github/license/inventage/lit-i18next.svg)](https://github.com/inventage/lit-i18next/blob/master/LICENSE)

# @inventage/lit-i18next

## Usage

### Install

```bash
npm install --save @inventage/lit-i18next
```

### Initialization

```typescript
import { i18next } from '@inventage/lit-i18next';
import { LitElement } from 'lit';

class MyApp extends LitElment {
  i18nInit = i18next.init({
    ...options,
  });

  protected async performUpdate(): Promise<unknown> {
    await this.i18nInit;

    return super.performUpdate();
  }
}
```

### Implementation

#### TypeScript (Decorator)

```typescript
import { localized, t } from '@inventage/lit-i18next';
import { LitElement, html, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('my-element')
@localized({ ...options })
class MyElement extends LitElement {
  protected render(): TemplateResult {
    return html`<b>${t('path.to.translation_key')}</b>`;
  }
}
```

#### JavaScript

```javascript
import { t, updateWhenLocaleChanges } from '@inventage/lit-i18next';
import { LitElement, html } from 'lit';

class MyElement extends LitElement {
  constructor() {
    super();
    updateWhenLocaleChanges(this, {
      ...options,
    });
  }

  render() {
    return html`<b>${t('path.to.translation_key')}</b>!`;
  }
}
customElements.define('my-element', MyElement);
```

#### Options

Options can be passed optionally to the `localized` decorator or the `updateWhenLocaleChanges` callback.

```ts
type Event = 'added' | 'initialized' | 'languageChanged' | 'loaded';
type LocalizeOptions = {
  event?: Event | Event[]; // Event or events which will trigger a rerender
};
```

## License

This project is released under the [MIT license](LICENSE).
npm package: @inventage/matomo-opt-out
Description: A web component to let visitors opt-out of Matomo tracking
Author: Inventage AG
Latest version: 1.3.0

# \<matomo-opt-out>

A web component to let visitors opt-out of Matomo tracking.

[![made with open-wc](https://img.shields.io/badge/made%20with-open--wc-%23217ff9?style=flat-square)](https://open-wc.org)
[![Build](https://img.shields.io/github/workflow/status/inventage/matomo-opt-out/Node.js%20CI?style=flat-square)](https://github.com/inventage/matomo-opt-out/actions?query=workflow%3A"Node.js%20CI")
[![Published on npm](https://img.shields.io/npm/v/@inventage/matomo-opt-out?style=flat-square)](https://www.npmjs.com/package/@inventage/matomo-opt-out)

## Dependencies

Your Matomo installation will have to have the [Ajax Opt Out] plugin enabled.

## Usage

```js
import '@inventage/matomo-opt-out';
```

```html
<matomo-opt-out matomo-url="https://analytics.your-domain.com"></matomo-opt-out>
```

### Note on browser compatibility & transformation

Currently, the recommended way to publish a web component using [open-wc] is to publish the ES6/7 source code as is. 
Since your application knows best about which browsers to support and how to transform the source code (if at all)
for those browsers, you will have to take care of any transformations yourself.

### Properties

| Property        | Attribute         | Type      | Default                                                  |
| --------------- | ----------------- | --------- | -------------------------------------------------------- |
| `isBusy`        |                   | `boolean` | false                                                    |
| `isTracked`     |                   | `boolean` | false                                                    |
| `matomoUrl`     | `matomo-url`      | `string`  |                                                          |
| `optedInLabel`  | `opted-in-label`  | `string`  | "You are not opted out. Uncheck this box to opt-out."    |
| `optedOutLabel` | `opted-out-label` | `string`  | "You are currently opted out. Check this box to opt-in." |

## Development

- Create a copy of `local.config-example.js` and name it `local.config.js`
- Add the URL to your Matomo installation
- Run `$ npm start`
- Navigate to http://localhost:8000/demo/

[ajax opt out]: https://plugins.matomo.org/AjaxOptOut
[lit-element]: https://lit-element.polymer-project.org/
[lit-html]: https://lit-html.polymer-project.org/
[open-wc]: https://open-wc.org
npm package: @inventage/portal-components
Description: A collection of webcomponents for enterprise portals.
Author: Inventage AG
Latest version: 1.1.1
Deprecated: Package no longer supported, it has been replaced by individual packages in https://github.com/inventage/web-components

# Portal Components

A collection of webcomponents for enterprise portals.

[![made with open-wc](https://img.shields.io/badge/made%20with-open--wc-%23217ff9?style=flat-square)](https://open-wc.org)
&nbsp;[![Main Workflow](https://img.shields.io/github/workflow/status/inventage/portal-components/Main%20Workflow?style=flat-square)](https://github.com/inventage/portal-components/actions?query=workflow%3A"Main+Workflow")
&nbsp;[![npm version](https://img.shields.io/npm/v/@inventage/portal-components?style=flat-square)](https://www.npmjs.com/package/@inventage/portal-components)

```js script
export default {
  title: 'Intro/Portal Components',
};
```

## Quick Start

### unpkg.com

```html
<script type="module" src="https://unpkg.com/@inventage/portal-components/dist/components/portal-card/portal-card.js?module"></script>

<portal-card></portal-card>
```

Here's an [example of this method](https://diamond-cherry-harbor.glitch.me/) to get you started.

### NPM

```bash
npm i @inventage/portal-components
```

## Usage

```html
<!--
  Adjust path to node_modules and use a dev server that support Node module
  resolution, like es-dev-server: https://www.npmjs.com/package/es-dev-server
-->
<script
  type="module"
  src="/node_modules/@inventage/portal-components/dist/components/portal-card/portal-card.js"
</script>

<portal-card></portal-card>
```
npm package: @inventage/wicket-static-server
Description: Resolve Wicket's template hierarchy and render all HTML parts as single static pages.
Author: Gridonic
Latest version: 1.1.6

# Documentation

Resolve [Wicket's](https://wicket.apache.org/) template hierarchy and render all HTML parts as single static pages.

## Usage

- Install Node.js dependencies by `npm install`.
- Start static server by `npm run serve` or by `node ./node_modules/.bin/wicket-static-server --server`.
- Open [localhost:3000](http://localhost:3000) and browse [pages](/pages), [panels](/panels) or [dialogs](/dialogs).

## Parameters

Use CLI parameters for easy configuration.

- Use `-h, --homepage` to show a specific html or markdown file as homepage.
- Use `-e, --expressRoot` to define a path from which additional static files are served.
- Use `-r` or `--reload` to add <script src="//localhost:[opts.reloadPort]/livereload.js"></script> to all page bodies.
- Use `-c` or `--code` to format code wrapped in `<pre><code class="language-js">…</code></pre>`.
- Use `--reloadPort` to define the port in the livereload script tag.
- Use `-s` or `--server` to start an express server.
- Use `--serverPort` to define the port for the express server.
- Use `-e, --templateRootExpansion` to define which templates are used to extend the templates. It must be a superset of --templateScope.
- Use `-t, --templateRoot` to define which templates should be resolved and listed.
- Use `-v` or `--verbose` to print more information during execution.

# Template Tags

Special comments and Wicket tags are used to complete a page.

- `<wicket:child>` is the placeholder to include successors's HTML.
- `<wicket:head>` content is merged and included once per page.
- `<wicket:extend>` is the part of a template which is passed to its ancestors.
- `<!-- extend-page … -->` is used to define a template's ancestor.
- `<!-- include-panel … -->` is used to include panels.

## Caution

- First load takes a moment to resolve and render all templates.

## Acknowledgment

This package was developed together with [Gridonic](https://gridonic.ch/) to decouple backend and frontend development.
npm package: @inventar/react-inventar
Description: Inventar React wrapper.
Latest version: 0.1.2

# **react-inventar**

The official [Inventar](https://www.npmjs.com/package/inventar) React wrapper.

## **What does it do?**

Inventar is a simple but powerful single source of truth for your design stuff.
This components offers a way to work with it in React. Please visit [Inventar’s repo](https://www.npmjs.com/package/inventar) to learn about the what, the why and the how.

This React wrapper accepts an Inventar configuration and (optionally) options, and renders a component with the results:

```jsx
import { ReactInventar } from '@inventar/react-inventar'
import React from 'react'

const MY_INVENTAR_CONFIG = { ... }

export default const MyInventar: React.FC = ({ children }) => {
	// Additional logic here
	return (
		<ReactInventar config={MY_INVENTAR_CONFIG} options={MY_INVENTAR_OPTIONS}>
			{children}
		</ReactInventar>
	)
}
```

Use this if you wish to manage your Inventar configuration from a React component, instead of a dedicated file.

If you’re using JS variables, simply export `jsInventar` from your dedicated Inventar file instead.

If you’re using such a file and would like to use this component as well, you can pass the generated `cssInventar`, you could just use that on any DOM element instead:

```jsx
import { cssInventar } from 'my/inventar/config'

...
<div style={cssInventar}>
	// Rest of your app
</div>
```

## **API**

| Prop    | Type                                                         | Required? | Description                                 |
| ------- | ------------------------------------------------------------ | --------- | ------------------------------------------- |
| config  | [`InventarConfig`]([inventar  -  npm](https://www.npmjs.com/package/inventar#configurations-and-how-to-write-them)) | `true`    | An Inventar Configuration for your project. |
| Options | [`InventarOptions`]([inventar  -  npm](https://www.npmjs.com/package/inventar#options)) | `false`   | Additional options supported by Inventar.   |

## **Contribute**

This is a minimal wrapper, and should follow [Inventar’s](https://www.npmjs.com/package/inventar) API and versioning.
Inventar is in a very early stage, and might be subject to major changes.
I’ll be happy for any feedback and ideas at inventar.feedback(at)foge.us.
The repository will become public soon, and then you could open issues and contribute.
npm package: @inventara/react-native-preferences
Description: Read/write application preferences
Author: Taner Gedikoğlu
Latest version: 0.9.0

# react-native-preferences

Read/write application preferences

## Installation

```sh
npm install react-native-preferences
```

## Usage

```js
import { getPreference } from 'react-native-preferences';

// ...

const result = getPreference('Mendix', 'ThemeColor', '#EB1B2E');
```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @inventare/styles
Description: This package hosts the styles of the design-system.
Author: Eduardo Oliveira
Latest version: 0.0.32

# @inventare/styles

This package hosts the styles of the design-system.

## Development Standards

We have two type of components on this design-system: pure styles (and structured HTML) components and styles and JavaScript components. In the bellow sections we describe the development structure of each type of components.

### Pure Style Components

Some components of the design-system is pure structured HTML and styles. In this case, the `scss/components/ComponentName` folder contains some files that are not scss:

| File Name              | Description                                     |
| ---------------------- | ----------------------------------------------- |
| `_component.scss`      | The component `.scss` styles.                   |
| `Component.ts`         | Used by storybook to create the HTML component. |
| `Component.stories.ts` | The storybook stories for the component.        |
| `Component.mdx`        | The storybook documentation page for component. |

### JavaScript Components

Some other components has a JavaScript part and, in this case, the `scss/components/ComponentName` contains only the scss file:

| File Name              | Description                                     |
| ---------------------- | ----------------------------------------------- |
| `_component.scss`      | The component `.scss` styles.                   |

For the JavaScript components, the storybook parts is stored with the JavaScript (coded in TypeScript and transpiled ot JavaScript) parts on the `@inventare/vanilla` package.
npm package: @inventas/storybook-themed-backgrounds
Description: Adds themed backgrounds to Storybook
Author: Lennart Fischer
Latest version: 0.1.12

# Themed Backgrounds

## Installation

First, install the package.

```sh
npm install --save-dev @inventas/storybook-themed-backgrounds
```

Then, register it as an addon in `.storybook/main.js`.

```js
// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    '@inventas/storybook-themed-backgrounds', // 👈 register the addon here
  ],
};

export default config;
```

## Usage

The primary way to use this addon is to define the `exampleParameter` parameter. You can do this the
component level, as below, to affect all stories in the file, or you can do it for a single story.

```js
// Button.stories.ts

// Replace your-framework with the name of your framework
import type { Meta } from '@storybook/your-framework';

import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  parameters: {
    myAddon: {
      exampleParameter: true,
      // See API section below for available parameters
    }
  }
};

export default meta;
```

Another way to use the addon is...

## API

### Parameters

This addon contributes the following parameters to Storybook, under the `myAddon` namespace:

#### `disable`

Type: `boolean`

Disable this addon's behavior. This parameter is most useful to allow overriding at more specific
levels. For example, if this parameter is set to true at the project level, it could then be
re-enabled by setting it to false at the meta (component) or story level.

### Options

When registering this addon, you can configure it with the following options, which are passed when
registering the addon, like so:

```ts
// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/essentials',
    {
      name: 'my-addon',
      options: {
        // 👈 options for my-addon go here
      },
    },
  ],
};

export default config;
```

#### `useExperimentalBehavior`

Type: `boolean`

Enable experimental behavior to...