@yoyomq/ije-react 0.1.2 → 0.1.4

package/README.md

@@ -4,26 +4,199 @@
 
 <h1 align="center">@yoyomq/ije-react</h1>
 
-<p align="center">React wrappers for the Ije SDK by <strong>Yoyo</strong>.</p>
+<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>
 
 ---
 
-> ⚠️ **Placeholder — not yet implemented.** This package currently exports
-> nothing. First-class, typed React components are planned.
+## Get your API key
+
+1. Sign in at [yoyomq.com](https://yoyomq.com)
+2. Go to **Settings → API Keys**
+3. Create a new key and copy it
+
+## Installation
+
+```bash
+npm install @yoyomq/ije-react
+```
+
+React 16.8+ is required as a peer dependency.
+
+## Quick start
 
-In the meantime, the [`@yoyomq/ije-ui`](../ui) Web Components work inside React
-directly — initialize once and use the tags as JSX:
+Wrap your app (or the relevant subtree) with `IjeProvider`, then drop in any component:
 
 ```tsx
-import { useEffect } from 'react';
-import { Ije } from '@yoyomq/ije-core';
-import '@yoyomq/ije-ui';
+import { IjeProvider, IjeDeviceTrackerView, IjeTelemetryStat } from '@yoyomq/ije-react';
 
-export function Dashboard({ apiKey }: { apiKey: string }) {
-  useEffect(() => { Ije.init({ apiKey }); }, [apiKey]);
-  return <ije-map-tracker device-id="truck-001" title="Vehicle Location" />;
+export default function App() {
+  return (
+    <IjeProvider config={{ apiKey: 'YOUR_YOYO_API_KEY' }}>
+      <IjeDeviceTrackerView deviceId={1001} title="Vehicle Location" />
+      <IjeTelemetryStat deviceId={1001} metric="speed" title="Speed" unit="km/h" />
+    </IjeProvider>
+  );
 }
 ```
 
-📖 **Full documentation:** see the [Ije SDK README](../../README.md), including the
-[Using with React](../../README.md#using-with-react) section.
+## Next.js App Router
+
+All components include `'use client'` — no extra setup needed. Place `IjeProvider` in a client boundary:
+
+```tsx
+// app/dashboard/layout.tsx
+import { IjeProvider, IjeDeviceTrackerView } from '@yoyomq/ije-react';
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <IjeProvider config={{ apiKey: process.env.NEXT_PUBLIC_YOYO_API_KEY! }}>
+      {children}
+    </IjeProvider>
+  );
+}
+```
+
+## Components
+
+### `<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
+<IjeDeviceTrackerView
+  deviceId={1001}
+  title="Vehicle Location"
+  width="100%"
+  height="400px"
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `deviceId` | `number` | **Required.** Numeric device ID |
+| `title` | `string` | Card title |
+| `helpMessage` | `string` | Tooltip shown on hover |
+| `width` | `string` | CSS width (default `100%`) |
+| `height` | `string` | CSS height (default `400px`) |
+| `tripPicker` | `boolean` | Enable historical trip replay mode |
+| `triggerId` | `number` | Trip trigger ID (trip-picker mode) |
+| `triggerName` | `string` | Trip trigger label (trip-picker mode) |
+| `startsAt` | `number` | Trip start Unix timestamp in seconds (trip-picker mode) |
+| `endsAt` | `number` | Trip end Unix timestamp in seconds (trip-picker mode) |
+
+### `<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
+<IjeTelemetryStat deviceId={1001} metric="speed" title="Speed" unit="km/h" />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `deviceId` | `number` | **Required.** Numeric device ID |
+| `metric` | `string` | **Required.** Telemetry field name |
+| `title` | `string` | Card title |
+| `unit` | `string` | Unit label (e.g. `km/h`, `°C`) |
+| `helpMessage` | `string` | Tooltip shown on hover |
+
+### `<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
+<IjeTelemetryChart deviceId={1001} metric="speed" title="Speed over time" height="200px" />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `deviceId` | `number` | **Required.** Numeric device ID |
+| `metric` | `string` | Telemetry field name |
+| `title` | `string` | Card title |
+| `helpMessage` | `string` | Tooltip shown on hover |
+| `width` | `string` | CSS width |
+| `height` | `string` | CSS height |
+
+### `<IjeAggregateStat>`
+
+Displays a set of aggregate metrics (totals, averages, counts) passed in as data.
+
+```tsx
+import type { AggregateData } from '@yoyomq/ije-react';
+
+const data: AggregateData = {
+  metrics: [
+    { label: 'Total distance', value: 1240, unit: 'km' },
+    { label: 'Trips', value: 38 },
+  ],
+};
+
+<IjeAggregateStat data={data} />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `data` | `AggregateData` | Metrics to display |
+| `loading` | `boolean` | Show loading skeleton |
+
+### `<IjeBarChart>`
+
+Horizontal bar chart for comparing values across categories.
+
+```tsx
+import type { BarChartData } from '@yoyomq/ije-react';
+
+const data: BarChartData[] = [
+  { label: 'Mon', value: 120 },
+  { label: 'Tue', value: 95 },
+];
+
+<IjeBarChart data={data} height="200px" />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `data` | `BarChartData[]` | Array of `{ label, value }` entries |
+| `loading` | `boolean` | Show loading skeleton |
+| `height` | `string` | CSS height |
+
+### `<IjeChat>`
+
+AI-powered fleet assistant chat widget.
+
+```tsx
+<IjeChat title="Fleet Assistant" placeholder="Ask about your fleet…" />
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `title` | `string` | Widget title |
+| `placeholder` | `string` | Input placeholder text |
+| `width` | `string` | CSS width |
+| `height` | `string` | CSS height |
+
+## `IjeProvider`
+
+Initializes the SDK once. Place it high in your component tree.
+
+```tsx
+<IjeProvider config={{ apiKey: 'YOUR_YOYO_API_KEY' }}>
+  {children}
+</IjeProvider>
+```
+
+The `config` prop accepts a [`SdkConfig`](https://github.com/Yoyo-MQ/ije) object from `@yoyomq/ije-core`.
+
+---
+
+📖 **Full SDK documentation:** [github.com/Yoyo-MQ/ije](https://github.com/Yoyo-MQ/ije)

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,6 +1,5 @@
-export interface MapTrackerProps {
-    deviceId: string;
-    numericDeviceId?: number;
+export interface IjeDeviceTrackerViewProps {
+    deviceId: number;
     title?: string;
     helpMessage?: string;
     width?: string;
@@ -12,4 +11,4 @@ export interface MapTrackerProps {
     startsAt?: number;
     endsAt?: number;
 }
-export declare function MapTracker({ deviceId, numericDeviceId, 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, numericDeviceId, title, helpMessage, width, height, tripPicker, triggerId, triggerName, startsAt, endsAt, }) {
-    return (_jsx("ije-map-tracker", { "device-id": deviceId, "numeric-device-id": numericDeviceId != null ? String(numericDeviceId) : undefined, title: title, "help-message": helpMessage, width: width, height: height, "trip-picker": tripPicker ? '' : undefined, "trigger-id": triggerId != null ? String(triggerId) : undefined, "trigger-name": triggerName, "starts-at": startsAt != null ? String(startsAt) : undefined, "ends-at": endsAt != null ? String(endsAt) : undefined }));
+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,9 +1,9 @@
-export interface TelemetryChartProps {
-    deviceId: string;
+export interface IjeTelemetryChartProps {
+    deviceId: number;
     metric?: string;
     title?: string;
     helpMessage?: string;
     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 {
-    deviceId: string;
+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.2",
+  "version": "0.1.4",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "source": "src/index.tsx",
@@ -12,8 +12,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@yoyomq/ije-core": "0.1.2",
-    "@yoyomq/ije-ui": "0.1.2"
+    "@yoyomq/ije-ui": "0.1.3",
+    "@yoyomq/ije-core": "0.1.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0",