open-index/open-npm huggingface dataset:
npm package: @kong-ui-public/analytics-utilities
Description: Commonly used types, interfaces and utils used with Kong analytics.
Author: Kong, Inc.
Latest version: 12.13.1

# @kong-ui-public/analytics-utilities

Commonly used types, interfaces and utils used with Kong analytics.

- [Features](#features)
- [Usage](#usage)
  - [Install](#install)
  - [TypeScript interfaces](#typescript-interfaces)

## Features

- Common types, interfaces and utilities for Kong analytics

## Usage

- Install and import/use types and utilities as needed

### Install

```sh
yarn add @kong-ui-public/analytics-utilities
```

### TypeScript interfaces

TypeScript interfaces [are available here](https://github.com/Kong/public-ui-components/blob/main/packages/analytics/analytics-utilities/src/types) and can be directly imported into your host application. The following interfaces are available for import:

```ts
import type { AnalyticsExploreResult, AnalyticsExploreMeta } from '@kong-ui-public/analytics-utilities'
```
npm package: @kong-ui-public/entities-plugins
Description: Plugin entity components.
Author: Kong, Inc.
Latest version: 9.188.1

# @kong-ui-public/entities-plugins

Plugin entity components.

- [Requirements](#requirements)
- [Included components](#included-components)
- [Usage](#usage)
  - [Install](#install)
  - [Registration](#registration)
- [Individual component documentation](#individual-component-documentation)

## Requirements

- `vue` and `vue-router` must be initialized in the host application
- `@kong/kongponents` must be added as a dependency in the host application, globally available via the Vue Plugin installation, and the package's style imports must be added in the app entry file. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents).
- `@kong-ui-public/i18n` must be available as a `dependency` in the host application.
- `axios` must be installed as a dependency in the host application
> [!CAUTION]
> A string of 'undefined' is disallowed in Plugin icon names

## Included components

- `PluginList`

Reference the [individual component docs](#individual-component-documentation) for more info.

## Usage

### Install

Install the component in your host application

```sh
yarn add @kong-ui-public/entities-plugins
```

### Registration

Import the component(s) in your host application as well as the package styles

```ts
import { PluginList, PluginSelect, PluginForm, PluginConfigCard } from '@kong-ui-public/entities-plugins'
import '@kong-ui-public/entities-plugins/dist/style.css'
```

## Individual component documentation

- [`<PluginList.vue />`](docs/plugin-list.md)
- [`<PluginSelect.vue />`](docs/plugin-select.md)
- [`<PluginForm.vue />`](docs/plugin-form.md)
- [`<PluginConfigCard.vue />`](docs/plugin-config-card.md)
npm package: @kong-ui-public/entities-redis-configurations
Description: Redis Configuration components.
Author: Kong, Inc.
Latest version: 1.14.13

# @kong-ui-public/entities-redis-configurations

Redis Configuration components.

- [Requirements](#requirements)
- [Included components](#included-components)
- [Usage](#usage)
  - [Install](#install)
  - [Registration](#registration)

## Requirements

- `vue` and `vue-router` must be initialized in the host application.
- `@kong/kongponents` must be added as a dependency in the host application, globally available via the Vue Plugin installation, and the package's style imports must be added in the app entry file. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents).
- `@kong-ui-public/i18n` must be available as a `dependency` in the host application.
- `@kong-ui-public/entities-shared` must be available as a `dependency` in the host application.
- `@kong-ui-public/entities-vaults` must be available as a `dependency` in the host application.
- `axios` must be installed as a dependency in the host application.

## Included components

- [`RedisConfigurationForm`](docs/redis-configuration-form.md)
- [`RedisConfigurationList`](docs/redis-configuration-list.md)
- [`RedisConfigurationConfigCard`](docs/redis-configuration-config-card.md)

## Usage

### Install

Install the component in your host application

```sh
pnpm add @kong-ui-public/entities-redis-configurations
```

### Registration

Import the component(s) in your host application as well as the package styles

```ts
import {
  RedisConfigurationForm,
  RedisConfigurationList,
  RedisConfigurationConfigCard,
} from '@kong-ui-public/entities-redis-configurations'

import '@kong-ui-public/entities-redis-configurations/dist/style.css'

// `RedisConfigurationForm` only
import '@kong-ui-public/entities-shared/dist/style.css'
import '@kong-ui-public/entities-vaults/dist/style.css'
```
npm package: @kong-ui-public/entities-routes
Description: Route entity components.
Author: Kong, Inc.
Latest version: 3.21.13

# @kong-ui-public/entities-routes

Route entity components.

- [Requirements](#requirements)
- [Included components](#included-components)
- [Usage](#usage)
  - [Install](#install)
  - [Registration](#registration)
- [Expressions features](#expressions-features)
- [Individual component documentation](#individual-component-documentation)

## Requirements

- `vue` and `vue-router` must be initialized in the host application.
- `@kong/kongponents` must be added as a dependency in the host application, globally available via the Vue Plugin installation, and the package's style imports must be added in the app entry file. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents).
- `@kong-ui-public/i18n` must be available as a `dependency` in the host application.
- `axios` must be installed as a dependency in the host application.
- If you want to enable [Kong's Expressions language](https://developer.konghq.com/gateway/routing/expressions/)-related [features](#expressions-features) in your host app, `@kong-ui-public/expressions` and `monaco-editor` must be installed as dependencies in the host application.

## Included components

- `RouteList`
- `RouteForm`
- `RouteConfigCard`

Reference the [individual component docs](#individual-component-documentation) for more info.

## Usage

### Install

Install the component in your host application

```sh
yarn add @kong-ui-public/entities-routes
```

If you want to enable [expressions feature](#expressions-features), you also need to install `devDependencies` in your host application:

```sh
yarn add -D vite-plugin-monaco-editor
```

Enable the `vite-plugin-monaco-editor` plugin. Your Vite config should look like this:

```ts
import monacoEditorPlugin from 'vite-plugin-monaco-editor'

export default defineConfig({
  // ...
  plugins: [
    monacoEditorPlugin({}),
  ],
  // ...
})
```

### Registration

Import the component(s) in your host application as well as the package styles

```ts
import { RouteList, RouteForm, RouteConfigCard } from '@kong-ui-public/entities-routes'
import '@kong-ui-public/entities-routes/dist/style.css'
```

## Expressions features

This package utilizes `@kong-ui-public/expressions` and `monaco-editor` to support [Kong's Expressions language](https://developer.konghq.com/gateway/routing/expressions/)-related features. You will need to ensure these dependencies are installed in your host application to enable these features.

As of now, `<RouteForm.vue />` is the only component with Expressions features(controlled via the `routeFlavor` prop).

## Individual component documentation

- [`<RouteList.vue />`](docs/route-list.md)
- [`<RouteForm.vue />`](docs/route-form.md)
- [`<RouteConfigCard.vue />`](docs/route-config-card.md)
npm package: @kong-ui-public/expressions
Description: Reusable components to support [Kong's expressions language](https://developer.konghq.com/gateway/routing/expressions/).
Author: Kong, Inc.
Latest version: 1.4.12

# @kong-ui-public/expressions

Reusable components to support [Kong's expressions language](https://developer.konghq.com/gateway/routing/expressions/).

- [Features](#features)
- [Requirements](#requirements)
- [Usage](#usage)
  - [Install](#install)
  - [Import and use](#import-and-use)
- [Individual component documentation](#individual-component-documentation)

## Features

- Provides a Monaco-based editor with autocomplete and syntax highlighting support for the expressions language.

## Requirements

- `vue` must be initialized in the host application
- [`monaco-editor`](https://www.npmjs.com/package/monaco-editor) is required as a dependency in the host application
- [`vite-plugin-monaco-editor`](https://www.npmjs.com/package/vite-plugin-monaco-editor) is a required Vite plugin to bundle the Monaco Editor and its web workers
- [`@kong-ui-public/forms`](https://www.npmjs.com/package/@kong-ui-public/forms) is an optional dependency required for the `RouterPlaygroundModal` component

## Usage

### Install

Install required `devDependencies` in your host application:

```sh
yarn add -D vite-plugin-monaco-editor
```

Enable the `vite-plugin-monaco-editor` plugin. Your Vite config should look like this:

```ts
import monacoEditorPlugin from 'vite-plugin-monaco-editor'

export default defineConfig({
  // ...
  plugins: [
    monacoEditorPlugin({}),
  ],
  // ...
}
```

For more information on configuring the `vite-plugin-monaco-editor` plugin, you should refer to their [readme docs](https://github.com/vdesjs/vite-plugin-monaco-editor/blob/master/README.md).

### Import and use

Import the component(s) in your host application as well as the package styles:

```ts
import { asyncInit, ExpressionsEditor } from '@kong-ui-public/expressions'
import '@kong-ui-public/expressions/dist/style.css'
```

This package utilizes [vite-plugin-top-level-await](https://github.com/Menci/vite-plugin-top-level-await) to transform code in order to use top-level await on older browsers. To load the WASM correctly, you must use `await` or `Promise.then` to wait the imported `asyncInit` before using any other imported values.

For example:

```ts
const editorInitialized = ref(false)

asyncInit.then(() => {
  editorInitialized.value = true
  // use the editor and other imported values
})
```

You can also make use of Vue's experimental [Suspense](https://vuejs.org/guide/built-ins/suspense.html) component to load async components that use this package.

## Individual component documentation

- [`<ExpressionsEditor />`](docs/expressions-editor.md)
- [`<RouterPlaygroundModal />`](docs/router-playground-modal.md)
npm package: @kong-ui-public/forms
Description: - `vue` **must** be initialized in the host application - `@kong/kongponents` **must** be available as a `dependency` in the host application and registered globally, along with the Kongponents style import. [See here for instructions on installing Kongpo
Author: Kong, Inc.
Latest version: 4.23.12

# @kong-ui-public/forms

## Requirements

- `vue` **must** be initialized in the host application
- `@kong/kongponents` **must** be available as a `dependency` in the host application and registered globally, along with the Kongponents style import. [See here for instructions on installing Kongponents](https://kongponents.konghq.com/#globally-install-all-kongponents).
- `@kong-ui-public/i18n` must be available as a `dependency` in the host application.

## how to add shared form

Let's say you need introduce shared customization for 'PostFunction' plugin form.
Here are the steps

1. add `PostFunction.vue` into `src/forms/`

2. modify `finalSchema` computable in `PostFunction.vue` the way you like it.

3. add export for this component into `src/forms/index.ts`

4. add mapping for model name -> component name into `getSharedFormName` function defined in `src/index.ts`

That's it - next time the version of @kong-ui-public/forms is used - your `src/forms/PostFunction.vue` will be presented when user selects `Post Function` plugin to install or edit.

## how to add a custom field component
You can define custom field components to be used for specific fields.

For example, the field schema should like this:
```json
{
  type: 'array',
  component: CatFoodField,  // <== the custom Vue component
  model: 'eats',
  id: 'eats',
  label: 'Eats',
}
```

Please take a look at `sandbox/CatFoodField.vue` for an example of a custom field component.

You should have at least the following props, emits and function defined:
```ts
const props = defineProps<{
  disabled?: boolean
  formOptions?: Record<string, any>
  model?: Record<string, any>
  schema: Record<string, any>
  vfg: Record<string, any>
  errors?: Array<any>
  hint?: string
}>()

const emit = defineEmits<{
  (event: 'modelUpdated', value: any, model: Record<string, any>): void
}>()

const { clearValidationErrors } = composables.useAbstractFields({
  model: propsRefs.model,
  schema: props.schema,
  formOptions: props.formOptions,
  emitModelUpdated: (data: { value: any, model: Record<string, any> }): void => {
    emit('modelUpdated', data.value, data.model)
  },
})

defineExpose({
  clearValidationErrors,
})
```

`composables.useAbstractFields` is a useful helper that can be used to simplify the implementation of custom field components.
npm package: @kong-ui-public/portal-analytics-bridge
Description: This package is a Vue plugin that supplies the necessary mechanisms for analytics components to reach Konnect dev portal query APIs to obtain data.  This is the only supported way for analytics dashboards (created using the `DashboardRenderer` component) 
Author: Kong, Inc.
Latest version: 0.4.8

# @kong-ui-public/portal-analytics-bridge

This package is a Vue plugin that supplies the necessary mechanisms for analytics components to reach Konnect dev portal query APIs to obtain data.  This is the only supported way for analytics dashboards (created using the `DashboardRenderer` component) to obtain data.

Behind the scenes, this plugin uses provide / inject (under the key `analytics-query-provider`) to pass an object to all analytics dashboards within the app.  The dashboards will not function without this object.

**Note:** this package is specific to Konnect's dev portal.  Konnect itself uses different APIs and therefore has a different package.

- [Features](#features)
- [Requirements](#requirements)
- [Usage](#usage)

## Features

- Allow analytics components anywhere in the application to query the Explore API.
- Allow analytics components to determine user tier, for cases where it matters to the frontend.

## Requirements

To install the plugin, make the following changes to the `main.ts` file in the application that needs to query analytics:

```typescript
import portalAnalyticsBridge from '@kong-ui-public/portal-analytics-bridge'

// In the `initApp` function, before `app.mount`, add:
app.use(portalAnalyticsBridge, {
  axiosClient: '...'
})
```

`axiosClient` must be a properly configured Axios client:

- It must be configured to refresh auth tokens when necessary
- It must have the base URL set correctly.

## Usage

Once this package is installed and configured as described above, analytics dashboards should Just Work.  If they do not, please reach out to Kong for support.
npm package: @kong-ui-public/spec-details
Description: A Kong UI component for displaying API specs
Author: Kong, Inc.
Latest version: 0.5.2

# @kong-ui-public/spec-details

A Kong UI component for displaying API specs

- [Features](#features)
- [Requirements](#requirements)
- [Usage](#usage)
  - [Install](#install)
  - [Register](#register)
- [Props](#props)
  - [`document`](#document)
  - [`url`](#url)
  - [`hasSidebar`](#hassidebar)
  - [`relativeSidebar`](#relativesidebar)
  - [`essentialsOnly`](#essentialsonly)
  - [`activeOperation`](#activeoperation)

## Features

- Render `.yaml` and `.json` OAS specs
- Customize display of API specs in the UI

## Requirements

- `vue` must be initialized in the host application

## Usage

### Install

Install the component in your host application

```sh
yarn add @kong-ui-public/spec-details
```

### Register

You can register `portal-spec-details` globally or locally.

```typescript
// Global registration
import { createApp } from 'vue'
import SpecDetails from '@kong-ui-public/spec-details'
import '@kong-ui-public/spec-details/dist/style.css'

const app = createApp(App)

app.use(SpecDetails)

```

```html
<!-- Local registration -->
<template>
  <SpecDetails />
</template>

<script setup lang="ts">
import SpecDetails from '@kong-ui-public/spec-details'
import '@kong-ui-public/spec-details/dist/style.css'
</script>
```

## Props

### `document`

- type: `String|Object`
- required: `false`
- default: `null`

Specification object or string. Required if `url` property is not set.

### `url`

- type: `String`
- required: `false`
- default: `''`

URL of the specification file. Required if `document` property is not set.

### `hasSidebar`

- type: `Boolean`
- required: `false`
- default: `true`

Whether or not the SwaggerUI navigation sidebar is enabled.

### `relativeSidebar`

- type: `Boolean`
- required: `false`
- default: `false`

Position the sidebar relatively instead of fixed.
Both `hasSidebar` and `essentialsOnly` must be `true` for the positioning to be correct since we aren't predicting the height of the info block.

### `essentialsOnly`

- type: `Boolean`
- required: `false`
- default: `false`

If enabled, only display the spec `paths` section; general information, schemes, models, actions (Authorize & Try it out), etc. are hidden.

### `activeOperation`

- type: `Object`
- required: `false`
- default: `null`

Allows to expand specification operation details section for given operation and scroll the viewport to it.
npm package: @kong-ui-public/vite-plugin-konnect-loading-template
Description: A Vite plugin that injects a static HTML Konnect loading template in the host application's root `div#app` element that is displayed until the app has finished hydrating. The template is **manually compiled** from the `KonnectAppShell > AppLayout` compone
Author: Kong, Inc.
Latest version: 0.0.2-pr.981.60aa175a.0
npm package: @kong-ui/portal-document-viewer
Description: A Kong UI component for rendering markdown documents
Author: Kong, Inc.
Latest version: 0.1.0

# @kong-ui/portal-document-viewer

A Kong UI component for rendering markdown documents

- [Features](#features)
- [Requirements](#requirements)
- [Usage](#usage)
  - [Install](#install)
  - [Register](#register)
- [Props](#props)
  - [`document`](#document)

## Features

- Render `.md` content
- Customize display of markdown content in the UI

## Requirements

- `vue` must be initialized in the host application

## Usage

### Install

Install the component in your host application

```sh
yarn add @kong-ui/portal-document-viewer
```

### Register

You can register `portal-document-viewer` globally or locally.

```typescript
// Global registration
import { createApp } from 'vue'
import DocumentViewer from '@kong-ui/portal-document-viewer'
import '@kong-ui/portal-document-viewer/dist/style.css'

const app = createApp(App)

app.use(DocumentViewer)

```

```html
<!-- Local registration -->
<template>
  <DocumentViewer />
</template>

<script setup lang="ts">
import DocumentViewer from '@kong-ui/portal-document-viewer'
import '@kong-ui/portal-document-viewer/dist/style.css'
</script>
```

## Props

### `document`

- type: `String|Object`
- required: `true`
- default: `null`

Markdown object or string. Required.
npm package: @kong-ui/portal-spec-renderer
Description: A Kong UI component for displaying API specs
Author: Kong, Inc.
Latest version: 0.1.2

# @kong-ui/portal-spec-renderer

A Kong UI component for displaying API specs

- [Features](#features)
- [Requirements](#requirements)
- [Usage](#usage)
  - [Install](#install)
  - [Register](#register)
- [Props](#props)
  - [`document`](#document)
  - [`url`](#url)
  - [`hasSidebar`](#hassidebar)
  - [`relativeSidebar`](#relativesidebar)
  - [`essentialsOnly`](#essentialsonly)

## Features

- Render `.yaml` and `.json` OAS specs
- Customize display of API specs in the UI

## Requirements

- `vue` must be initialized in the host application

## Usage

### Install

Install the component in your host application

```sh
yarn add @kong-ui/portal-spec-renderer
```

### Register

You can register `portal-spec-renderer` globally or locally.

```typescript
// Global registration
import { createApp } from 'vue'
import SpecRenderer from '@kong-ui/portal-spec-renderer'
import '@kong-ui/portal-spec-renderer/dist/style.css'

const app = createApp(App)

app.use(SpecRenderer)

```

```html
<!-- Local registration -->
<template>
  <SpecRenderer />
</template>

<script setup lang="ts">
import SpecRenderer from '@kong-ui/portal-spec-renderer'
import '@kong-ui/portal-spec-renderer/dist/style.css'
</script>
```

## Props

### `document`

- type: `String|Object`
- required: `false`
- default: `null`

Specification object or string. Required if `url` property is not set.

### `url`

- type: `String`
- required: `false`
- default: `''`

URL of the specification file. Required if `document` property is not set.

### `hasSidebar`

- type: `Boolean`
- required: `false`
- default: `true`

Whether or not the SwaggerUI navigation sidebar is enabled.

### `relativeSidebar`

- type: `Boolean`
- required: `false`
- default: `false`

Position the sidebar relatively instead of fixed.
Both `hasSidebar` and `essentialsOnly` must be `true` for the positioning to be correct since we aren't predicting the height of the info block.

### `essentialsOnly`

- type: `Boolean`
- required: `false`
- default: `false`

If enabled, only display the spec `paths` section; general information, schemes, models, actions (Authorize & Try it out), etc. are hidden.
npm package: @kong-ui/portal-spec-renderer-mini
Description: A Kong UI mini component for displaying API specs
Author: Kong, Inc.
Latest version: 0.1.1

# @kong-ui/portal-spec-renderer-mini

A Kong UI mini component for displaying API specs

- [Features](#features)
- [Requirements](#requirements)
- [Usage](#usage)
  - [Install](#install)
  - [Register](#register)
- [Props](#props)
  - [`spec`](#spec)
  - [`isSummary`](#issummary)
  - [`width`](#width)
- [Slots](#slots)
  - [`empty-state`](#empty-state)
  - [`error-state`](#error-state)
- [Emits](#emits)
  - [`selected`](#selected)

## Features

- Render spec styled object arrays
- Support both table of contents and list summary views

## Requirements

- `vue` must be initialized in the host application

## Usage

### Install

Install the component in your host application

```sh
yarn add @kong-ui/portal-spec-renderer-mini
```

### Register

You can register `portal-spec-renderer-mini` globally or locally.

```typescript
// Global registration
import { createApp } from 'vue'
import SpecRendererMini from '@kong-ui/portal-spec-renderer-mini'
import '@kong-ui/portal-spec-renderer-mini/dist/style.css'

const app = createApp(App)

app.use(SpecRendererMini)

```

```html
<!-- Local registration -->
<template>
  <SpecRendererMini />
</template>

<script setup lang="ts">
import SpecRendererMini from '@kong-ui/portal-spec-renderer-mini'
import '@kong-ui/portal-spec-renderer-mini/dist/style.css'
</script>
```

## Props

### `spec`

- type: `Object[]`
- required: `true`

Specification object array. Required.
The objects should conform to the following interface.

```typescript
{
  path: string
  method: string
  operationId: string | null
  tags: string[]
  summary: string | null
  deprecated: boolean
  selected?: boolean
  key?: string
}
```

### `isSummary`

- type: `Boolean`
- required: `false`
- default: `false`

If enabled, will display list summary view with a few more details instead of table of contents style.

### `width`

- type: `String`
- required: `false`
- default: `210`

Controls the width of the rendered spec. Currently supports numbers (will be converted to px), auto, `vw`, `vh`, and percentages for width.

## Slots

### `empty-state`

Controls the content displayed when the `spec` array is empty.

### `error-state`

Controls the content when `spec` is not provided.

## Emits

### `selected`

- returns: `Object` - the last clicked item data

```json
{
  path: string
  method: string
  operationId: string | null
  tags: string[]
  summary: string | null
  deprecated: boolean
  selected?: boolean
  key?: string
}
```

This is emitted whenever an item in the spec is clicked. Clicking an item will deselect any previously selected items.