@iofferio/dealer-components

Reusable iOffer dealer components for dials, history, and appraisal pages.

Installation

npm install @iofferio/dealer-components

Components

This package provides the following components:

DealerComponents (Master Component)

The master component that contains all dealer components:

• Dials - Dials component for dealer dashboard
• ProDials - ProDials component for dealer dashboard
• Appraise - Appraise component for dealer dashboard
• AppraiseHistory - Appraise History component for dealer dashboard

Individual Components

You can also import and use individual components:

• Dials
• ProDials
• Appraise
• AppraiseHistory

Usage

Using the Master Component

import { DealerComponents } from "@iofferio/dealer-components"

function App() {
  return (
    <DealerComponents
      showDials={true}
      showProDials={true}
      showAppraise={true}
      showAppraiseHistory={true}
    />
  )
}

Using Individual Components

import { Dials, ProDials, Appraise, AppraiseHistory } from "@iofferio/dealer-components"

function App() {
  return (
    <>
      <Dials />
      <ProDials />
      <Appraise />
      <AppraiseHistory dealersId="20255" env="dev" initialPageSize={25} />
    </>
  )
}

Props

DealerComponents Props

| Prop | Type | Default | Description | | --------------------- | ----------------- | ----------- | ------------------------------ | | className | string | undefined | Custom CSS class name | | showDials | boolean | true | Show Dials component | | showProDials | boolean | true | Show ProDials component | | showAppraise | boolean | true | Show Appraise component | | showAppraiseHistory | boolean | true | Show AppraiseHistory component | | children | React.ReactNode | undefined | Custom children to render |

Individual Component Props

AppraiseHistory Props:

• dealersId: string - Dealer ID (required)
• env?: 'dev' | 'staging' | 'prod' - Environment (default: 'prod')
• initialPageSize?: number - Initial page size (default: 25)
• className?: string - Custom CSS class name

Other Components:

• className?: string - Custom CSS class name
• children?: React.ReactNode - Custom children to render

Development

Build

npm run build

Development Mode

npm run dev

Playground (Test Components in Browser)

To test components in a browser environment:

npm run playground

This will start a Vite dev server at http://localhost:3001 where you can:

• Test components with live reload
• Adjust component props dynamically
• Test different environments (dev, staging, prod)
• Test with different dealer IDs and page sizes

Type Check

npm run type-check

Lint

npm run lint

Peer Dependencies

• react: ^18.0.0
• react-dom: ^18.0.0
• next: ^14.0.0
• @tanstack/react-query: ^5.0.0

License

UNLICENSED