@yoyomq/ije-react 0.1.3 → 0.1.4

package/README.md

@@ -6,6 +6,10 @@
 
 <p align="center">First-class React components for the Ije SDK by <strong>Yoyo</strong>.</p>
 
+<p align="center">
+  <img src="https://raw.githubusercontent.com/Yoyo-MQ/ije/main/assets/screenshots/tracker.gif" alt="Live device tracking" width="100%" />
+</p>
+
 ---
 
 ## Get your API key
@@ -27,13 +31,13 @@ React 16.8+ is required as a peer dependency.
 Wrap your app (or the relevant subtree) with `IjeProvider`, then drop in any component:
 
 ```tsx
-import { IjeProvider, MapTracker, TelemetryStat } from '@yoyomq/ije-react';
+import { IjeProvider, IjeDeviceTrackerView, IjeTelemetryStat } from '@yoyomq/ije-react';
 
 export default function App() {
   return (
     <IjeProvider config={{ apiKey: 'YOUR_YOYO_API_KEY' }}>
-      <MapTracker deviceId={1001} title="Vehicle Location" />
-      <TelemetryStat deviceId={1001} metric="speed" title="Speed" unit="km/h" />
+      <IjeDeviceTrackerView deviceId={1001} title="Vehicle Location" />
+      <IjeTelemetryStat deviceId={1001} metric="speed" title="Speed" unit="km/h" />
     </IjeProvider>
   );
 }
@@ -45,7 +49,7 @@ All components include `'use client'` — no extra setup needed. Place `IjeProvi
 
 ```tsx
 // app/dashboard/layout.tsx
-import { IjeProvider } from '@yoyomq/ije-react';
+import { IjeProvider, IjeDeviceTrackerView } from '@yoyomq/ije-react';
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
@@ -58,12 +62,14 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
 
 ## Components
 
-### `<MapTracker>`
+### `<IjeDeviceTrackerView>`
 
 Live map showing a device's current position and movement trail. Click the position marker to open an info bubble with speed, heading, altitude, coordinates, and timestamp. Optionally enables historical trip replay mode.
 
+<img src="https://raw.githubusercontent.com/Yoyo-MQ/ije/main/assets/screenshots/tracker.png" alt="IjeDeviceTrackerView" width="100%" />
+
 ```tsx
-<MapTracker
+<IjeDeviceTrackerView
   deviceId={1001}
   title="Vehicle Location"
   width="100%"
@@ -84,12 +90,14 @@ Live map showing a device's current position and movement trail. Click the posit
 | `startsAt` | `number` | Trip start Unix timestamp in seconds (trip-picker mode) |
 | `endsAt` | `number` | Trip end Unix timestamp in seconds (trip-picker mode) |
 
-### `<TelemetryStat>`
+### `<IjeTelemetryStat>`
 
 Single live telemetry value (speed, fuel, temperature, etc.).
 
+<img src="https://raw.githubusercontent.com/Yoyo-MQ/ije/main/assets/screenshots/stats.png" alt="IjeTelemetryStat" width="100%" />
+
 ```tsx
-<TelemetryStat deviceId={1001} metric="speed" title="Speed" unit="km/h" />
+<IjeTelemetryStat deviceId={1001} metric="speed" title="Speed" unit="km/h" />
 ```
 
 | Prop | Type | Description |
@@ -100,12 +108,14 @@ Single live telemetry value (speed, fuel, temperature, etc.).
 | `unit` | `string` | Unit label (e.g. `km/h`, `°C`) |
 | `helpMessage` | `string` | Tooltip shown on hover |
 
-### `<TelemetryChart>`
+### `<IjeTelemetryChart>`
 
 Live time-series chart for a telemetry metric.
 
+<img src="https://raw.githubusercontent.com/Yoyo-MQ/ije/main/assets/screenshots/chart.png" alt="IjeTelemetryChart" width="100%" />
+
 ```tsx
-<TelemetryChart deviceId={1001} metric="speed" title="Speed over time" height="200px" />
+<IjeTelemetryChart deviceId={1001} metric="speed" title="Speed over time" height="200px" />
 ```
 
 | Prop | Type | Description |
@@ -117,7 +127,7 @@ Live time-series chart for a telemetry metric.
 | `width` | `string` | CSS width |
 | `height` | `string` | CSS height |
 
-### `<AggregateStat>`
+### `<IjeAggregateStat>`
 
 Displays a set of aggregate metrics (totals, averages, counts) passed in as data.
 
@@ -131,7 +141,7 @@ const data: AggregateData = {
   ],
 };
 
-<AggregateStat data={data} />
+<IjeAggregateStat data={data} />
 ```
 
 | Prop | Type | Description |
@@ -139,7 +149,7 @@ const data: AggregateData = {
 | `data` | `AggregateData` | Metrics to display |
 | `loading` | `boolean` | Show loading skeleton |
 
-### `<BarChart>`
+### `<IjeBarChart>`
 
 Horizontal bar chart for comparing values across categories.
 
@@ -151,7 +161,7 @@ const data: BarChartData[] = [
   { label: 'Tue', value: 95 },
 ];
 
-<BarChart data={data} height="200px" />
+<IjeBarChart data={data} height="200px" />
 ```
 
 | Prop | Type | Description |
@@ -160,12 +170,12 @@ const data: BarChartData[] = [
 | `loading` | `boolean` | Show loading skeleton |
 | `height` | `string` | CSS height |
 
-### `<Chat>`
+### `<IjeChat>`
 
 AI-powered fleet assistant chat widget.
 
 ```tsx
-<Chat title="Fleet Assistant" placeholder="Ask about your fleet…" />
+<IjeChat title="Fleet Assistant" placeholder="Ask about your fleet…" />
 ```
 
 | Prop | Type | Description |

package/dist/AggregateStat.d.ts

@@ -1,6 +1,6 @@
 import type { AggregateData } from '@yoyomq/ije-ui';
-export interface AggregateStatProps {
+export interface IjeAggregateStatProps {
     data?: AggregateData;
     loading?: boolean;
 }
-export declare function AggregateStat({ data, loading }: AggregateStatProps): import("react").JSX.Element;
+export declare function IjeAggregateStat({ data, loading }: IjeAggregateStatProps): import("react").JSX.Element;

package/dist/AggregateStat.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-export function AggregateStat({ data, loading }) {
+export function IjeAggregateStat({ data, loading }) {
     const ref = useRef(null);
     useEffect(() => {
         if (ref.current && data !== undefined) {

package/dist/BarChart.d.ts

@@ -1,7 +1,7 @@
 import type { BarChartData } from '@yoyomq/ije-ui';
-export interface BarChartProps {
+export interface IjeBarChartProps {
     data?: BarChartData[];
     loading?: boolean;
     height?: string;
 }
-export declare function BarChart({ data, loading, height }: BarChartProps): import("react").JSX.Element;
+export declare function IjeBarChart({ data, loading, height }: IjeBarChartProps): import("react").JSX.Element;

package/dist/BarChart.js

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
-export function BarChart({ data, loading, height }) {
+export function IjeBarChart({ data, loading, height }) {
     const ref = useRef(null);
     useEffect(() => {
         if (ref.current && data !== undefined) {

package/dist/Chat.d.ts

@@ -1,7 +1,7 @@
-export interface ChatProps {
+export interface IjeChatProps {
     title?: string;
     placeholder?: string;
     width?: string;
     height?: string;
 }
-export declare function Chat({ title, placeholder, width, height }: ChatProps): import("react").JSX.Element;
+export declare function IjeChat({ title, placeholder, width, height }: IjeChatProps): import("react").JSX.Element;

package/dist/Chat.js

@@ -1,5 +1,5 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function Chat({ title, placeholder, width, height }) {
+export function IjeChat({ title, placeholder, width, height }) {
     return (_jsx("ije-chat", { title: title, placeholder: placeholder, width: width, height: height }));
 }

package/dist/DeviceTrackerView.d.ts

@@ -0,0 +1,14 @@
+export interface IjeDeviceTrackerViewProps {
+    deviceId: number;
+    title?: string;
+    helpMessage?: string;
+    width?: string;
+    height?: string;
+    /** Trip-picker mode: pass trigger-id + optional trigger-name to enable historical trip replay. */
+    tripPicker?: boolean;
+    triggerId?: number;
+    triggerName?: string;
+    startsAt?: number;
+    endsAt?: number;
+}
+export declare function IjeDeviceTrackerView({ deviceId, title, helpMessage, width, height, tripPicker, triggerId, triggerName, startsAt, endsAt, }: IjeDeviceTrackerViewProps): import("react").JSX.Element;

package/dist/DeviceTrackerView.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function IjeDeviceTrackerView({ deviceId, title, helpMessage, width, height, tripPicker, triggerId, triggerName, startsAt, endsAt, }) {
+    return (_jsx("ije-map-tracker", { "device-id": deviceId, title: title, "help-message": helpMessage, width: width, height: height, "trip-picker": tripPicker ? '' : undefined, "trigger-id": triggerId, "trigger-name": triggerName, "starts-at": startsAt, "ends-at": endsAt }));
+}

package/dist/MapTracker.d.ts

@@ -1,4 +1,4 @@
-export interface MapTrackerProps {
+export interface IjeDeviceTrackerViewProps {
     deviceId: number;
     title?: string;
     helpMessage?: string;
@@ -11,4 +11,4 @@ export interface MapTrackerProps {
     startsAt?: number;
     endsAt?: number;
 }
-export declare function MapTracker({ deviceId, title, helpMessage, width, height, tripPicker, triggerId, triggerName, startsAt, endsAt, }: MapTrackerProps): import("react").JSX.Element;
+export declare function IjeDeviceTrackerView({ deviceId, title, helpMessage, width, height, tripPicker, triggerId, triggerName, startsAt, endsAt, }: IjeDeviceTrackerViewProps): import("react").JSX.Element;

package/dist/MapTracker.js

@@ -1,5 +1,5 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function MapTracker({ deviceId, title, helpMessage, width, height, tripPicker, triggerId, triggerName, startsAt, endsAt, }) {
+export function IjeDeviceTrackerView({ deviceId, title, helpMessage, width, height, tripPicker, triggerId, triggerName, startsAt, endsAt, }) {
     return (_jsx("ije-map-tracker", { "device-id": deviceId, title: title, "help-message": helpMessage, width: width, height: height, "trip-picker": tripPicker ? '' : undefined, "trigger-id": triggerId, "trigger-name": triggerName, "starts-at": startsAt, "ends-at": endsAt }));
 }

package/dist/TelemetryChart.d.ts

@@ -1,4 +1,4 @@
-export interface TelemetryChartProps {
+export interface IjeTelemetryChartProps {
     deviceId: number;
     metric?: string;
     title?: string;
@@ -6,4 +6,4 @@ export interface TelemetryChartProps {
     width?: string;
     height?: string;
 }
-export declare function TelemetryChart({ deviceId, metric, title, helpMessage, width, height }: TelemetryChartProps): import("react").JSX.Element;
+export declare function IjeTelemetryChart({ deviceId, metric, title, helpMessage, width, height }: IjeTelemetryChartProps): import("react").JSX.Element;

package/dist/TelemetryChart.js

@@ -1,5 +1,5 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function TelemetryChart({ deviceId, metric, title, helpMessage, width, height }) {
+export function IjeTelemetryChart({ deviceId, metric, title, helpMessage, width, height }) {
     return (_jsx("ije-telemetry-chart", { "device-id": deviceId, metric: metric, title: title, "help-message": helpMessage, width: width, height: height }));
 }

package/dist/TelemetryStat.d.ts

@@ -1,8 +1,8 @@
-export interface TelemetryStatProps {
+export interface IjeTelemetryStatProps {
     deviceId: number;
     metric: string;
     title?: string;
     unit?: string;
     helpMessage?: string;
 }
-export declare function TelemetryStat({ deviceId, metric, title, unit, helpMessage }: TelemetryStatProps): import("react").JSX.Element;
+export declare function IjeTelemetryStat({ deviceId, metric, title, unit, helpMessage }: IjeTelemetryStatProps): import("react").JSX.Element;

package/dist/TelemetryStat.js

@@ -1,5 +1,5 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-export function TelemetryStat({ deviceId, metric, title, unit, helpMessage }) {
+export function IjeTelemetryStat({ deviceId, metric, title, unit, helpMessage }) {
     return (_jsx("ije-telemetry-stat", { "device-id": deviceId, metric: metric, title: title, unit: unit, "help-message": helpMessage }));
 }

package/dist/index.d.ts

@@ -1,16 +1,16 @@
 export { IjeProvider } from './Provider';
 export type { IjeProviderProps } from './Provider';
-export { MapTracker } from './MapTracker';
-export type { MapTrackerProps } from './MapTracker';
-export { TelemetryStat } from './TelemetryStat';
-export type { TelemetryStatProps } from './TelemetryStat';
-export { TelemetryChart } from './TelemetryChart';
-export type { TelemetryChartProps } from './TelemetryChart';
-export { Chat } from './Chat';
-export type { ChatProps } from './Chat';
-export { AggregateStat } from './AggregateStat';
-export type { AggregateStatProps } from './AggregateStat';
-export { BarChart } from './BarChart';
-export type { BarChartProps } from './BarChart';
+export { IjeDeviceTrackerView } from './DeviceTrackerView';
+export type { IjeDeviceTrackerViewProps } from './DeviceTrackerView';
+export { IjeTelemetryStat } from './TelemetryStat';
+export type { IjeTelemetryStatProps } from './TelemetryStat';
+export { IjeTelemetryChart } from './TelemetryChart';
+export type { IjeTelemetryChartProps } from './TelemetryChart';
+export { IjeChat } from './Chat';
+export type { IjeChatProps } from './Chat';
+export { IjeAggregateStat } from './AggregateStat';
+export type { IjeAggregateStatProps } from './AggregateStat';
+export { IjeBarChart } from './BarChart';
+export type { IjeBarChartProps } from './BarChart';
 export type { SdkConfig } from '@yoyomq/ije-core';
 export type { AggregateData, AggregateMetric, BarChartData } from '@yoyomq/ije-ui';

package/dist/index.js

@@ -1,7 +1,7 @@
 export { IjeProvider } from './Provider';
-export { MapTracker } from './MapTracker';
-export { TelemetryStat } from './TelemetryStat';
-export { TelemetryChart } from './TelemetryChart';
-export { Chat } from './Chat';
-export { AggregateStat } from './AggregateStat';
-export { BarChart } from './BarChart';
+export { IjeDeviceTrackerView } from './DeviceTrackerView';
+export { IjeTelemetryStat } from './TelemetryStat';
+export { IjeTelemetryChart } from './TelemetryChart';
+export { IjeChat } from './Chat';
+export { IjeAggregateStat } from './AggregateStat';
+export { IjeBarChart } from './BarChart';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoyomq/ije-react",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",