@guillermo/moneymaker-ui

React component library for MoneyMaker dashboard with built-in SDK integration

Installation

npm install @guillermo/moneymaker-ui @guillermo/moneymaker-sdk @tanstack/react-query

Quick Start

import { MM, SDKProvider } from "@guillermo/moneymaker-ui";
import { MoneyMakerSDK } from "@guillermo/moneymaker-sdk";
import "@guillermo/moneymaker-ui/styles.css";

const sdk = new MoneyMakerSDK({
  baseURL: "http://localhost:3000",
  apiKey: "your-api-key",
});

function App() {
  return (
    <SDKProvider sdk={sdk}>
      <ProductsPage />
    </SDKProvider>
  );
}

function ProductsPage() {
  const products = MM.useProducts();

  return (
    <MM.DataTable
      data={products.data}
      loading={products.loading}
      config={productTableConfig}
      onCreate={products.create}
      onUpdate={products.update}
      onDelete={products.delete}
    />
  );
}

Components

MM.DataTable

Powerful data table with multiple views (table, grid, list), sorting, filtering, and pagination.

MM.DynamicForm

Dynamic form builder with validation and multiple field types.

MM.SDKProvider

Context provider for SDK integration.

Hooks

MM.useProducts()

Hook for managing products with CRUD operations.

MM.useClients()

Hook for managing clients with CRUD operations.

MM.useCRUDModal()

Generic hook for CRUD modal management.

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build library
npm run build

# Type check
npm run type-check

License

MIT © Guillermo