BookEz Npm-Package

A React component library and utilities for BookEz, including banking data tables, Plaid integration, and custom UI elements.

Features

Banking Data Table: Categorize, review, and manage transactions.
Plaid Integration: Securely connect and sync bank accounts.
Custom UI Components: Dropdowns, dialogs, skeleton loaders, and more.
React Hook Form Integration: Easy form management and validation.
Context Providers: Manage banking and account state globally.

Getting Started

Prerequisites

Node.js: 20.19.0 (see above)
npm: v9+ recommended
React: v18+

Installation

Install Package to your project:

npm install BookEz-Package

Usage

Store token, theme and currencyCode in localStorage

localStorage.setItem("BookezToken", "your-token-here");

Import and use components in your React app in order to use it:

import React from "react";
import {
  UIProvider as BookezUIProvider,
  ThemeProvider as BookezThemeProvider,
} from "bookez_package";
import { BookEZTheme } from "./lib/BookEzTheme";
import App from "./App";

const Root = () => {
  const businessId = "your-business-id";
  const token = "your-token";

  return (
    <BookezUIProvider
      businessId={businessId}
      BookezToken={token}
      theme={"dark" | "light"}
      currencyCode=""
      onError={handleError}
      onSuccess={handleSuccess}
    >
      <BookezThemeProvider theme={BookEZTheme}>
        <App />
      </BookezThemeProvider>
    </BookezUIProvider>
  );
};

Customizing the Theme

The theme for your application is customizable. You can modify the BookEZTheme object to define colors, button styles, and more for both the light and dark themes.

const BookEZTheme = {
  light: {
    btn_filled_bg: "#4CAF50", // Green color for button background in light mode
    btn_filled_color: "#ffffff", // White color for button text in light mode
    // Add more properties as needed
  },
  dark: {
    btn_filled_bg: "#2c3e50", // Dark blue for button background in dark mode
    btn_filled_color: "#ecf0f1", // Light color for button text in dark mode
    // Add more properties as needed
  },
};

Error and Success Handling

const handleError = (error) => {
  console.log("Error: ", error.message);
};

const handleSuccess = (message) => {
  console.log("Success: ", message);
};

Scripts

npm run dev – Start the development server
npm run build – Build the package

Project Structure


src/
components/ # Reusable UI components
pages/Banking/ # Banking-related pages and logic
providers/ # React context providers
axios/ # API utilities
lib/ # Utility functions

License

MIT