@inorain_development/hotel-smarters-chat-ui

Cross-platform chat UI component library for React (DOM / admin) and React Native (mobile + web via react-native-web), published as an npm module.

The chat AI returns a { type, data } payload, and this library renders the matching component for that type (e.g. products, event, event-list, location, order/reservation status, hotel event, …). One library, three consumers:

| Consumer | Runtime | Imports from | Implementation served | | ----------- | -------------------- | ----------------------------- | --------------------- | | mobile | React Native (Metro) | @inorain_development/hotel-smarters-chat-ui/native | RN (*.native.tsx) | | web client | React Native Web | @inorain_development/hotel-smarters-chat-ui/native | RN (*.native.tsx) | | admin | React DOM | @inorain_development/hotel-smarters-chat-ui/web | DOM (*.tsx) |

Why two entry points instead of just .tsx / .native.tsx extensions: both the web client (react-native-web) and the admin are "web" to a bundler, so both resolve .tsx. They need different implementations, so the RN vs DOM boundary is drawn by explicit subpath exports (/native vs /web), not by file extensions.

Status

Initial setup only — tooling, configuration and the Feature-Based + Component-Based folder structure. No domain components or dynamic renderer yet (added once the data models are ready).

Styling

Tailwind on both platforms:

• Web (admin): tailwindcss.
• React Native (mobile / web client): NativeWind v4 — same className="..." API, compiled to native styles (and to CSS on web).

Both share tailwind.config.js (exported from the package) so design tokens stay in sync.

Project structure

src/
  index.ts                  # root aggregator (defaults to the web/DOM build)
  native.ts                 # entry for mobile + web client (re-exports *.native impls)
  web.ts                    # entry for admin (re-exports DOM impls)
  components/               # shared cross-platform UI primitives (Card, Badge, Row, …)
  features/
    chat/
      components/           # domain chat components (Event, Location, ProductList, …)
      renderer/             # LATER: type -> component registry + ChatComponentRenderer
      model/                # feature types (ChatComponentType enum, base payload)
      index.ts
  utils/
  styles/
    global.css              # @tailwind directives (imported by web consumers)

Component convention

Each domain component is a folder with two .tsx files and one model file:

Event/
  Event.tsx          # DOM implementation (admin): div/span + Tailwind
  Event.native.tsx   # RN implementation (mobile + web client): View/Text + NativeWind
  Event.model.ts     # single model file: prop types + shape of `data` (shared by both)
  Event.logic.ts     # optional: shared platform-agnostic logic/helpers
  index.ts           # re-export

web.ts pulls in Event.tsx; native.ts pulls in Event.native.tsx.

Consumer setup

Mobile / web client (React Native)

Configure NativeWind per its docs (Metro preset, jsxImportSource: "nativewind", a tailwind.config.js, and a global.css with the @tailwind directives), then:

import { /* components */ } from '@inorain_development/hotel-smarters-chat-ui/native';

Admin (React DOM, Vite / webpack)

npm i @inorain_development/hotel-smarters-chat-ui react-native-web nativewind
npm i -D tailwindcss react-native

1. Alias react-native → react-native-web in the bundler; add .web.tsx/.web.js to resolve extensions; define __DEV__.
2. NativeWind for web: tailwind.config.js using nativewind/preset with the package added to content (./node_modules/@inorain_development/hotel-smarters-chat-ui/**/*.{js,jsx}); set babel jsxImportSource: "nativewind"; configure PostCSS + Tailwind; import the global CSS at app entry.

import { /* components */ } from '@inorain_development/hotel-smarters-chat-ui/web';

Development

npm install        # install dependencies
npm run typecheck  # tsc --noEmit
npm run build      # react-native-builder-bob -> lib/{commonjs,module,typescript}

Publishing (later)

npm publish --access public   # scoped org package; runs the bob build via prepack