🐝 Swarmica UI Kit

Reusable UI components for building Swarmica applications.

Swarmica is a platform that automates customer support. It combines a help desk, a knowledge base, and quality control. The platform is based on the KCS methodology and uses AI to provide quick responses to inquiries, collect and reuse knowledge, analyze data, and offer support through multiple channels.

📦 Installation

Install the latest stable version:

npm install @swarmica/ui-kit

--

⚙️ Dependencies

UI Kit is built on top of react-bootstrap, so your application must have Bootstrap properly configured.

Make sure that Bootstrap styles and provider setup (if used) are correctly initialized in your application before using UI Kit components.

🚀 Usage

Step 1: Import styles in the application entry file

import "@swarmica/ui-kit/styles"

Step 2: Wrap your app with UIProvider

import { type UIConfig, UIProvider } from "@swarmica/ui-kit"

// You can override some settings here, but it's optional.

const config: UIConfig = {
  theme: "light",
  media: {
    resolveSrc: src => `http://domain.com/${src}`,
    fallbackImageSrc: "/resource-deleted.svg",
  },
  translations: {
    dropdown: {
      // custom translations,
      lookup: "Search",
    },
  },
}

export const App = () => {
  return (
    <UIProvider config={config}>
      <YourApp />
    </UIProvider>
  )
}

Step 3: Import components

import { MediaGallery } from "@swarmica/ui-kit"

const Example = () => {
  return (
    <MediaGallery
      variant="from-data"
      value={0}
      data={[
        { type: "image", src: "/img-1.jpg", name: "Image 1" },
        { type: "image", src: "/img-2.jpg", name: "Image 2" },
      ]}
      onChange={() => {}}
    />
  )
}