@maebgch/rcs-emulator 0.1.0 → 0.1.1

package/README.md

@@ -10,7 +10,7 @@ Reusable, production-ready emulator UI for RCS Business Messaging (RBM). Ships a
 - Ships typed helpers and guards (`validateConversationFlow`, `useJsonFetch`, RBM schema types)
 - Bundled CSS (`dist/style.css`) generated from Tailwind classes—no Tailwind setup required in consumer apps
 
-## Install
+## Installation
 
 ### From npm (once published)
 
@@ -24,23 +24,25 @@ yarn add @maebgch/rcs-emulator
 
 ### Local install (for development/testing)
 
-1. Build and pack the library:
+If you want to test the package locally before it's published or use a local development version:
 
-```bash
-npm install
-npm run build:lib
-npm pack                 # produces maebgch-rcs-emulator-0.1.0.tgz
-```
+1. **Build and pack the library:**
 
-2. In your consuming project:
+   ```bash
+   npm install
+   npm run build:lib
+   npm pack                 # produces maebgch-rcs-emulator-0.1.0.tgz
+   ```
 
-```bash
-npm install ../path/to/maebgch-rcs-emulator-0.1.0.tgz
-# or
-pnpm add file:../path/to/maebgch-rcs-emulator-0.1.0.tgz
-```
+2. **In your consuming project:**
+
+   ```bash
+   npm install ../path/to/maebgch-rcs-emulator-0.1.0.tgz
+   # or
+   pnpm add file:../path/to/maebgch-rcs-emulator-0.1.0.tgz
+   ```
 
-## Quick start
+## Quick Start
 
 ```tsx
 import {
@@ -106,7 +108,9 @@ export default function App() {
 }
 ```
 
-## Props (public API)
+## API Reference
+
+### Props
 
 - `messages?: RbmConversationFlow` – Inline RBM JSON (provide this OR `jsonUrl`)
 - `jsonUrl?: string` – Remote RBM JSON to fetch
@@ -119,84 +123,72 @@ export default function App() {
 - `showSuggestions?: boolean` – Toggle suggestion chips
 - `showLockScreen?: boolean` – Start on lock screen preview
 
-### Callback payload
+### Callback Payload
 
 `UserReplyPayload` includes `{ type: "reply" | "action", postbackData, displayText, actionData?, timestamp }`. WebView actions surface `actionData: { type: "webview", url, viewMode, description? }`.
 
-## Additional exports
-
-- Helpers: `validateConversationFlow`, `getFirstMessagePreview`
-- Hooks: `useJsonFetch`
-- RBM types & guards: `RbmConversationFlow`, `RbmMessage`, `isSuggestedReply`, `isSuggestedAction`, `isWebViewAction`, `getWebViewConfig`
-- Standalone component: `WebViewRenderer`
-
-## RBM JSON shape
+### Additional Exports
 
-- Use `RbmConversationFlow` (see `src/components/RcsEmulator/types/rbm.types.ts`) as the schema.
-- A ready-made sample lives at `public/test.json`.
-- Each node supports text, rich cards, carousels, suggestions, and optional branching via `nextMessageIds`.
+- **Helpers:** `validateConversationFlow`, `getFirstMessagePreview`
+- **Hooks:** `useJsonFetch`
+- **RBM types & guards:** `RbmConversationFlow`, `RbmMessage`, `isSuggestedReply`, `isSuggestedAction`, `isWebViewAction`, `getWebViewConfig`
+- **Standalone component:** `WebViewRenderer`
 
-## Building the library (for publish/testing)
-
-```bash
-npm install
-npm run build:lib
-```
+## RBM JSON Schema
 
-Outputs to `dist/`:
+- Use `RbmConversationFlow` type as the schema reference
+- Each node supports text, rich cards, carousels, suggestions, and optional branching via `nextMessageIds`
+- See TypeScript types in `src/components/RcsEmulator/types/rbm.types.ts` for full schema
 
-- `rcs-emulator.es.js` (ESM), `rcs-emulator.cjs.js` (CJS)
-- `style.css` (bundled Tailwind output)
-- `types/index.d.ts` (TypeScript declarations)
+## Usage Examples
 
-## Using from another project
+### Basic Usage
 
-1. Install the package (published or packed tarball).
-2. Import component + styles in your app entry or component file:
-   - `import "@maebgch/rcs-emulator/style.css";`
-   - `import { RcsEmulator } from "@maebgch/rcs-emulator";`
-3. Pass an RBM JSON payload or `jsonUrl`, and handle `onUserReply`.
-
-## Developing the demo app locally
-
-- `npm run dev` – run the playground app
-- `npm run build` – build the playground app
-- `npm run lint` – lint the repo
-
-## Publishing to npm
-
-1. **Ensure you're logged in to npm:**
+```tsx
+import { RcsEmulator } from "@maebgch/rcs-emulator";
+import "@maebgch/rcs-emulator/style.css";
 
-   ```bash
-   npm login
-   npm whoami
-   ```
+function App() {
+  return (
+    <RcsEmulator
+      jsonUrl="https://example.com/conversation.json"
+      onUserReply={(payload) => console.log(payload)}
+    />
+  );
+}
+```
 
-2. **Build the library:**
+### With Custom Theme and Device
 
-   ```bash
-   npm run build:lib
-   ```
+```tsx
+<RcsEmulator
+  messages={conversationFlow}
+  onUserReply={handleReply}
+  theme="dark"
+  device="ios"
+  width={414}
+  height={896}
+/>
+```
 
-3. **Test the package locally (optional):**
+### With Business Branding
 
-   ```bash
-   npm pack
-   # This creates a .tgz file you can test in another project
-   ```
+```tsx
+<RcsEmulator
+  messages={conversationFlow}
+  onUserReply={handleReply}
+  businessInfo={{
+    name: "My Business",
+    logo: "https://example.com/logo.png",
+    brandColor: "#FF5733",
+  }}
+/>
+```
 
-4. **Publish to npm:**
+## License
 
-   ```bash
-   npm publish --access public
-   ```
+MIT
 
-   Note: Use `--access public` for scoped packages like `@maebgchdev/rcs-emulator`
+## Contributing
 
-5. **Version management (after publishing):**
-   ```bash
-   npm version patch  # for bug fixes (0.1.0 -> 0.1.1)
-   npm version minor  # for new features (0.1.0 -> 0.2.0)
-   npm version major  # for breaking changes (0.1.0 -> 1.0.0)
-   npm publish --access public
-   ```
+See [DEVELOPMENT.md](./DEVELOPMENT.md) for development setup and contribution guidelines.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maebgch/rcs-emulator",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A production-ready React component library for emulating RCS Business Messaging (RBM) device UI",
   "type": "module",
   "main": "dist/rcs-emulator.cjs.js",