@expedite-commerce/ec-composable-prabu

React-first composable sample package following Expedite Composable UI architecture:

• Contract-first contexts (identity, session, security)
• Pure TypeScript core
• React presentation layer
• Web Component delivery (ec-prabu) for Genesis AI, Genesis DXP, Vue, Angular, and plain HTML

Installation

npm install @expedite-commerce/ec-composable-prabu

Peer dependencies:

npm install react react-dom

Feature

This sample provides a Welcome / Account Summary composable:

• Greets based on identity context
• Shows organization, account, quote, and host origin
• Emits namespaced events for host integrations

Contract

IdentityContext

type IdentityContext = {
    organizationId: string;
    userId?: string;
    accountId?: string;
    contactId?: string;
    pricingSchema?: "Single" | "NRC_MRC";
};

SessionContext

type SessionContext = {
    origin: "DXP_EXTERNAL" | "DXP_INTERNAL" | "GENESIS_CPQ";
    quoteId?: string;
    storefrontId?: string | null;
    chatRoomId?: string;
};

SecurityContext

type SecurityContext = {
    baseUrl: string;
    accessToken?: string;
    apiKey?: string;
};

Events

• ec-prabu:ready
• ec-prabu:action
• ec-prabu:save
• ec-prabu:error

Usage

React consumer

import { PrabuWelcome } from "@expedite-commerce/ec-composable-prabu";

export function Page() {
    return (
        <PrabuWelcome
            identity={{ organizationId: "ORG-1", userId: "U-1", accountId: "A-1" }}
            session={{ origin: "GENESIS_CPQ", quoteId: "Q-1" }}
            security={{ baseUrl: "https://api.example.com" }}
        />
    );
}

Web Component consumer (DXP / Genesis / Vue / Angular / HTML)

import { registerEcPrabu } from "@expedite-commerce/ec-composable-prabu/wc";
registerEcPrabu();

<ec-prabu id="prabu"></ec-prabu>
<script type="module">
    const el = document.getElementById("prabu");
    el.identity = { organizationId: "ORG-1", userId: "U-1" };
    el.session = { origin: "DXP_EXTERNAL", quoteId: "Q-1" };
    el.security = { baseUrl: "https://api.example.com" };
    el.addEventListener("ec-prabu:action", (event) => {
        console.log(event.detail);
    });
</script>

Styling

Import package styles through:

import "@expedite-commerce/ec-composable-prabu/style";

Theming is supported via CSS variables:

• --ec-color-primary
• --ec-color-surface
• --ec-color-title
• --ec-color-text

Development

npm ci
npm run lint
npm run typecheck
npm run test
npm run build:all

Publishing

This package is configured for public publishing:

npm publish --access public --provenance

Do not commit npm tokens to source control.