trieve-widgets

Trieve Widgets

A reusable React component library for biller management and search, built with TypeScript, Vite, and Material UI.

Features

• SearchBillersWidget: Easily embed a biller/merchant search UI in your React app.
• Theme: Consistent look and feel with a default MUI theme.
• Storybook: Preview and test widgets in isolation.
• TypeScript: Full type safety and type definitions.
• Vite: Fast development and optimized builds.

Getting Started

1. Install

npm install trieve-widgets
# or
yarn add trieve-widgets

2. Usage

Import the widget and theme in your React app:

import { ThemeProvider } from "@mui/material";
import { theme, SearchBillersWidget } from "trieve-widgets";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <SearchBillersWidget />
    </ThemeProvider>
  );
}

Customization

• onRecordClick: Optional callback when a record is clicked.
• sx: Pass MUI style overrides.

<SearchBillersWidget
  onRecordClick={(record) => alert(record.name)}
  sx={{ my: 4 }}
/>

Development

Run Storybook

npm run storybook

Build the Library

npm run build

Lint

npm run lint

Folder Structure

widgets/
├── src/
│   ├── components/
│   │   └── SearchBiller/
│   │       ├── SearchBiller.tsx
│   │       └── index.ts
│   ├── theme/
│   │   └── defaultTheme/
│   │       └── defaultTheme.ts
│   ├── index.ts
│   └── stories/
│       └── ...
├── package.json
├── tsconfig.json
├── vite.config.ts
├── tsup.config.ts
└── ...

Publishing

This package is built with Vite and bundled for npm using vite build and tsup.
Exports are defined in src/index.ts.

License

MIT