@intelligencebank/integration-components

Domain-specific components for IntelligenceBank integrations.

📖 Live Documentation: storybook.connectingib.com

Installation

npm install @intelligencebank/integration-components

Note: This package requires @intelligencebank/ui-primitives as a peer dependency.

Usage

import { AssetCard, FolderCard, AssetBrowser } from '@intelligencebank/integration-components';
import '@intelligencebank/ui-primitives/styles.css';

function App() {
  const asset = {
    id: '123',
    name: 'example.jpg',
    thumbnailUrl: '/thumb.jpg',
    mimeType: 'image/jpeg',
  };

  return (
    <AssetCard 
      asset={asset}
      onSelect={() => console.log('Selected')}
    />
  );
}

Components

| Component | Description | |-----------|-------------| | AssetBrowser | Full asset browsing experience with grid/list views | | AssetCard | Display a single asset with thumbnail and metadata | | FiltersPanel | Slide-down filter panel with multiselect support | | FolderCard | Display a folder with navigation support | | FolderTree | Hierarchical folder navigation | | LoginForm | Authentication form with SSO and custom URL support | | PresetSelector | Preset/format selection dropdown | | SearchForm | Search input with filters |

Note: The Multiselect component is available in @intelligencebank/ui-primitives.

Hooks

import { useAssetSelection, useFolderNavigation } from '@intelligencebank/integration-components/hooks';

function Browser() {
  const { selectedAssets, toggleSelection, clearSelection } = useAssetSelection();
  const { currentFolder, navigateTo, goBack } = useFolderNavigation();
  
  // ...
}

Utils

import { formatFileSize, getFileExtension, isImageFile } from '@intelligencebank/integration-components/utils';

formatFileSize(1024); // "1 KB"
getFileExtension('photo.jpg'); // "jpg"
isImageFile('image/png'); // true

Types

import type { Asset, Folder, Preset, Permission } from '@intelligencebank/integration-components/types';

Development

# Build the package
npm run build

# Run tests
npm run test

# Watch mode
npm run dev

Changelog

See CHANGELOG.md for version history and release notes.

Releases are managed via changesets. Run npx changeset to document changes before submitting a PR.

License

UNLICENSED - IntelligenceBank proprietary