@visactor/vbi-component

A shared Web Component library for VBI (VisActor Business Intelligence), built using Stencil.

Since these are standard Web Components, they can be consumed in any major frontend framework (React, Vue, Angular, Svelte) or directly in vanilla HTML/JavaScript.

Installation

Install the package via npm or pnpm:

pnpm add @visactor/vbi-component

Usage

To register and use the Web Components in your project (e.g., React, Vue, or Vanilla JS), import the package directly at your project's entry point file (such as main.ts, index.tsx, or app.tsx):

1. In React / Vue / Angular / Svelte Applications

import '@visactor/vbi-component'

2. Direct Usage in HTML (Script Tag)

If using in static HTML files or applications without a bundler, you can directly embed the script via <script> tags:

<!-- For browsers supporting ES Modules -->
<script type="module" src="node_modules/@visactor/vbi-component/dist/vbi-component/vbi-component.esm.js"></script>

<!-- Fallback for older browsers -->
<script nomodule src="node_modules/@visactor/vbi-component/dist/vbi-component/vbi-component.js"></script>

Once registered, custom elements like <vbi-config-provider> and <vbi-button> will be ready to use in your DOM.

Components

Below is the list of available web components in this library and their detailed documentation:

UI Components

| Component | Documentation | Description | | :---------------------- | :------------------------------------------------------------- | :------------------------------------------------------------------------------- | | <vbi-config-provider> | readme.md | Root configuration provider managing theme and coordinating the VBI store state. | | <vbi-button> | readme.md | Basic button component. | | <vbi-checkbox> | readme.md | Checkbox component. | | <vbi-dropdown> | readme.md | Dropdown component. | | <vbi-icon> | readme.md | Icon component. | | <vbi-input> | readme.md | Input field component. | | <vbi-join> | readme.md | Join layout component. | | <vbi-loading> | readme.md | Loading indicator component. | | <vbi-menu> | readme.md | Menu component. | | <vbi-tooltip> | readme.md | Tooltip component. |

Chart Components

| Component | Documentation | Description | | :-------------------- | :-------------------------------------------------------------------- | :---------------------------- | | <vbi-chart-editor> | readme.md | Chart editor component. | | <vbi-chart-fields> | readme.md | Chart fields component. | | <vbi-chart-toolbar> | readme.md | Toolbar for chart operations. | | <vbi-chart-type> | readme.md | Chart type component. |

Development

Run the following commands from the packages/vbi-component folder:

Storybook

Build and preview components inside Storybook:

pnpm run build

pnpm run storybook

Testing

Run tests:

pnpm run test

Build

Build the component library for production distribution:

pnpm run build