@inorain_development/hotel-smarters-chat-ui 1.0.0

package/src/features/chat/components/service/service.native.tsx

@@ -0,0 +1,96 @@
+import { Fragment } from 'react';
+import { Image, Pressable, Text, View } from 'react-native';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible.native';
+import { Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { ServiceItem } from './service.model';
+
+export function Service({
+  data,
+  theme = Theme.Dark,
+  language,
+  actionLabel = 'Request',
+  onAction,
+  onSelect,
+}: ChatComponentProps<ServiceItem>) {
+  const c = getThemeClasses(theme);
+  const items = Array.isArray(data) ? data : [data];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(items);
+
+  const renderRow = (item: ServiceItem) => {
+    const name = resolveText(item.name, language);
+    const description = resolveText(item.description, language);
+
+    return (
+      <Pressable className="flex-row items-center gap-3" onPress={() => onSelect?.(item)}>
+        <Image
+          accessibilityLabel={name}
+          source={{ uri: item.image }}
+          className={`h-14 w-14 rounded-lg down-sm:h-12 down-sm:w-12 ${c.iconBg}`}
+        />
+
+        <View className="flex-1 gap-1">
+          <View className="flex-row items-center justify-between gap-2">
+            <Text className={`flex-1 text-base font-bold down-sm:text-sm ${c.title}`} numberOfLines={1}>
+              {name}
+            </Text>
+            <Text className={`text-base font-bold down-sm:text-sm ${c.price}`}>{item.price}</Text>
+          </View>
+
+          <View className="flex-row items-center justify-between gap-2">
+            <Text className={`flex-1 text-sm down-sm:text-xs ${c.subtitle}`} numberOfLines={2}>
+              {description}
+            </Text>
+            <Pressable
+              accessibilityRole="button"
+              onPress={() => onAction?.(item)}
+              className={`rounded-xl border px-3 py-1.5 ${c.actionBorder}`}
+            >
+              <Text className={`text-sm font-medium ${c.actionText}`}>{actionLabel}</Text>
+            </Pressable>
+          </View>
+        </View>
+      </Pressable>
+    );
+  };
+
+  return (
+    <View className="gap-2">
+      <View className={`rounded-2xl border px-3 py-2 ${c.surface} ${c.border}`}>
+        {head.map((item, index) => (
+          <Fragment key={item.id}>
+            {index > 0 ? <View className={`my-2.5 h-px ${c.divider}`} /> : null}
+            {renderRow(item)}
+          </Fragment>
+        ))}
+
+        {hasMore ? (
+          <>
+            <Collapsible expanded={expanded}>
+              {rest.map((item) => (
+                <Fragment key={item.id}>
+                  <View className={`my-2.5 h-px ${c.divider}`} />
+                  {renderRow(item)}
+                </Fragment>
+              ))}
+            </Collapsible>
+
+            <View className="mt-2 items-center">
+              <Pressable
+                onPress={toggle}
+                className={`rounded-xl border px-4 py-1.5 ${c.actionBorder}`}
+              >
+                <Text className={`text-sm font-medium ${c.actionText}`}>
+                  {expanded ? 'Show less' : 'Show more'}
+                </Text>
+              </Pressable>
+            </View>
+          </>
+        ) : null}
+      </View>
+    </View>
+  );
+}

package/src/features/chat/components/service/service.tsx

@@ -0,0 +1,80 @@
+import { Fragment } from 'react';
+import { getThemeClasses } from '../../../../utils/theme.utils';
+import { resolveText } from '../../../../utils/i18n.utils';
+import { useExpandableList } from '../../../../utils/use-expandable-list';
+import { Collapsible } from '../common/collapsible';
+import { Theme } from '../../model/chat.model';
+import type { ChatComponentProps } from '../../model/chat.model';
+import type { ServiceItem } from './service.model';
+
+export function Service({
+  data,
+  theme = Theme.Dark,
+  language,
+  onSelect,
+}: ChatComponentProps<ServiceItem>) {
+  const c = getThemeClasses(theme);
+  const items = Array.isArray(data) ? data : [data];
+  const { head, rest, expanded, hasMore, toggle } = useExpandableList(items);
+
+  const renderRow = (item: ServiceItem) => {
+    const name = resolveText(item.name, language);
+    const description = resolveText(item.description, language);
+
+    return (
+      <div
+        className="flex cursor-pointer items-center gap-3"
+        onClick={() => onSelect?.(item)}
+      >
+        <img
+          src={item.image}
+          alt={name}
+          className={`h-14 w-14 rounded-lg object-cover down-sm:h-12 down-sm:w-12 ${c.iconBg}`}
+        />
+
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <div className="flex items-center justify-between gap-2">
+            <span className={`flex-1 truncate text-base font-bold down-sm:text-sm ${c.title}`}>{name}</span>
+            <span className={`shrink-0 text-base font-bold down-sm:text-sm ${c.price}`}>{item.price}</span>
+          </div>
+
+          <span className={`line-clamp-2 text-sm down-sm:text-xs ${c.subtitle}`}>{description}</span>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={`rounded-2xl border px-3 py-2 ${c.surface} ${c.border}`}>
+      {head.map((item, index) => (
+        <Fragment key={item.id}>
+          {index > 0 ? <div className={`my-2.5 h-px ${c.divider}`} /> : null}
+          {renderRow(item)}
+        </Fragment>
+      ))}
+
+      {hasMore ? (
+        <>
+          <Collapsible expanded={expanded}>
+            {rest.map((item) => (
+              <Fragment key={item.id}>
+                <div className={`my-2.5 h-px ${c.divider}`} />
+                {renderRow(item)}
+              </Fragment>
+            ))}
+          </Collapsible>
+
+          <div className="mt-2 flex justify-center">
+            <button
+              type="button"
+              onClick={toggle}
+              className={`rounded-xl border px-4 py-1.5 text-sm font-medium ${c.actionBorder} ${c.actionText}`}
+            >
+              {expanded ? 'Show less' : 'Show more'}
+            </button>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}

package/src/features/chat/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * `chat` feature barrel.
+ *
+ * Will re-export the feature's public surface (renderer, models, components)
+ * once they are implemented.
+ */
+export {};
+//# sourceMappingURL=index.d.ts.map

package/src/features/chat/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,CAAC"}

package/src/features/chat/index.ts

@@ -0,0 +1,13 @@
+export { Product } from './components/product';
+export { Service } from './components/service';
+export { ChatComponentRenderer } from './renderer';
+export { ComponentType, ItemAction, Theme } from './model/chat.model';
+export type { ProductItem } from './components/product/product.model';
+export type { ServiceItem } from './components/service/service.model';
+export type {
+  ActionHandler,
+  ChatComponentProps,
+  ItemCount,
+  Language,
+  LocalizedText,
+} from './model/chat.model';

package/src/features/chat/model/chat.model.ts

@@ -0,0 +1,36 @@
+export enum Theme {
+  Dark = 'dark',
+  Light = 'light',
+}
+
+export type Language = string;
+export type LocalizedText = Record<string, string>;
+
+export enum ComponentType {
+  Product = 'product',
+  ProductList = 'productList',
+  Service = 'service',
+  ServiceList = 'serviceList',
+}
+
+export enum ItemAction {
+  Add = 'add',
+}
+
+export type ActionHandler<TItem = unknown> = (item: TItem, action?: ItemAction) => void;
+
+export interface ItemCount {
+  id: number;
+  count: number;
+}
+
+export interface ChatComponentProps<TItem = unknown> {
+  type: ComponentType;
+  data: TItem | TItem[];
+  language?: Language;
+  onAction?: ActionHandler<TItem>;
+  onSelect?: ActionHandler<TItem>;
+  actionLabel?: string;
+  counts?: ItemCount[];
+  theme?: Theme;
+}

package/src/features/chat/renderer/index.ts

@@ -0,0 +1 @@
+export { ChatComponentRenderer } from './renderer';

package/src/features/chat/renderer/renderer.native.tsx

@@ -0,0 +1,22 @@
+import { Product } from '../components/product/product.native';
+import { Service } from '../components/service/service.native';
+import type { ProductItem } from '../components/product/product.model';
+import type { ServiceItem } from '../components/service/service.model';
+import { ComponentType } from '../model/chat.model';
+import type { ChatComponentProps } from '../model/chat.model';
+
+export function ChatComponentRenderer({
+  type,
+  ...rest
+}: ChatComponentProps<ProductItem | ServiceItem>) {
+  switch (type) {
+    case ComponentType.Product:
+    case ComponentType.ProductList:
+      return <Product type={type} {...(rest as Omit<ChatComponentProps<ProductItem>, 'type'>)} />;
+    case ComponentType.Service:
+    case ComponentType.ServiceList:
+      return <Service type={type} {...(rest as Omit<ChatComponentProps<ServiceItem>, 'type'>)} />;
+    default:
+      return null;
+  }
+}

package/src/features/chat/renderer/renderer.tsx

@@ -0,0 +1,22 @@
+import { Product } from '../components/product/product';
+import { Service } from '../components/service/service';
+import type { ProductItem } from '../components/product/product.model';
+import type { ServiceItem } from '../components/service/service.model';
+import { ComponentType } from '../model/chat.model';
+import type { ChatComponentProps } from '../model/chat.model';
+
+export function ChatComponentRenderer({
+  type,
+  ...rest
+}: ChatComponentProps<ProductItem | ServiceItem>) {
+  switch (type) {
+    case ComponentType.Product:
+    case ComponentType.ProductList:
+      return <Product type={type} {...(rest as Omit<ChatComponentProps<ProductItem>, 'type'>)} />;
+    case ComponentType.Service:
+    case ComponentType.ServiceList:
+      return <Service type={type} {...(rest as Omit<ChatComponentProps<ServiceItem>, 'type'>)} />;
+    default:
+      return null;
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Root entry (aggregator). Defaults to the web/DOM build.
+ *
+ * Prefer importing the explicit platform entry in apps:
+ *   - `hotel-smarters-chat-ui/native` -> React Native (mobile + web client via react-native-web)
+ *   - `hotel-smarters-chat-ui/web`    -> React DOM (admin)
+ *
+ * Public exports are added here once domain components exist.
+ */
+export * from './web';
+//# sourceMappingURL=index.d.ts.map

package/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,cAAc,OAAO,CAAC"}

package/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Root entry (aggregator). Defaults to the web/DOM build.
+ *
+ * Prefer importing the explicit platform entry in apps:
+ *   - `@inorain_development/hotel-smarters-chat-ui/native` -> React Native (mobile + web client via react-native-web)
+ *   - `@inorain_development/hotel-smarters-chat-ui/web`    -> React DOM (admin)
+ *
+ * Public exports are added here once domain components exist.
+ */
+export * from './web';

package/src/native.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Native entry (mobile + web client via react-native-web).
+ * Re-exports the `*.native.tsx` (React Native) component implementations.
+ *
+ * Placeholder until domain components are added, e.g.:
+ *   export { Event } from './features/chat/components/Event/Event.native';
+ */
+export {};
+//# sourceMappingURL=native.d.ts.map

package/src/native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"native.d.ts","sourceRoot":"","sources":["native.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,CAAC"}

package/src/native.ts

@@ -0,0 +1,13 @@
+export { Product } from './features/chat/components/product/product.native';
+export { Service } from './features/chat/components/service/service.native';
+export { ChatComponentRenderer } from './features/chat/renderer/renderer.native';
+export { ComponentType, ItemAction, Theme } from './features/chat/model/chat.model';
+export type { ProductItem } from './features/chat/components/product/product.model';
+export type { ServiceItem } from './features/chat/components/service/service.model';
+export type {
+  ActionHandler,
+  ChatComponentProps,
+  ItemCount,
+  Language,
+  LocalizedText,
+} from './features/chat/model/chat.model';

package/src/styles/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/utils/i18n.utils.ts

@@ -0,0 +1,7 @@
+import type { Language, LocalizedText } from '../features/chat/model/chat.model';
+
+export function resolveText(text: LocalizedText, language?: Language): string {
+  if (language && text[language] != null) return text[language];
+  const first = Object.values(text)[0];
+  return first ?? '';
+}

package/src/utils/theme.utils.ts

@@ -0,0 +1,47 @@
+import { Theme } from '../features/chat/model/chat.model';
+
+export interface ThemeClasses {
+  surface: string;
+  border: string;
+  title: string;
+  subtitle: string;
+  price: string;
+  actionBorder: string;
+  actionText: string;
+  divider: string;
+  iconBg: string;
+  iconText: string;
+  iconColor: string;
+}
+
+const DARK: ThemeClasses = {
+  surface: 'bg-chat-surface-dark',
+  border: 'border-chat-border-dark',
+  title: 'text-white',
+  subtitle: 'text-chat-subtitle-dark',
+  price: 'text-white',
+  actionBorder: 'border-neutral-700',
+  actionText: 'text-white',
+  divider: 'bg-neutral-800',
+  iconBg: 'bg-indigo-500/20',
+  iconText: 'text-indigo-300',
+  iconColor: '#a5b4fc',
+};
+
+const LIGHT: ThemeClasses = {
+  surface: 'bg-chat-surface-light',
+  border: 'border-chat-border-light',
+  title: 'text-neutral-900',
+  subtitle: 'text-neutral-500',
+  price: 'text-neutral-900',
+  actionBorder: 'border-slate-400',
+  actionText: 'text-neutral-900',
+  divider: 'bg-slate-300',
+  iconBg: 'bg-indigo-500/15',
+  iconText: 'text-indigo-500',
+  iconColor: '#6366f1',
+};
+
+export function getThemeClasses(theme: Theme = Theme.Dark): ThemeClasses {
+  return theme === Theme.Light ? LIGHT : DARK;
+}

package/src/utils/use-expandable-list.ts

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+
+const COLLAPSED_COUNT = 3;
+
+export function useExpandableList<T>(items: T[], limit = COLLAPSED_COUNT) {
+  const [expanded, setExpanded] = useState(false);
+  const hasMore = items.length > limit;
+  const head = hasMore ? items.slice(0, limit) : items;
+  const rest = hasMore ? items.slice(limit) : [];
+  const toggle = () => setExpanded((v) => !v);
+  return { head, rest, expanded, hasMore, toggle };
+}

package/src/web.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Web / DOM entry (admin). Re-exports the `*.tsx` (DOM) component implementations.
+ *
+ * Placeholder until domain components are added, e.g.:
+ *   export { Event } from './features/chat/components/Event/Event';
+ */
+export {};
+//# sourceMappingURL=web.d.ts.map

package/src/web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"web.d.ts","sourceRoot":"","sources":["web.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,CAAC"}

package/src/web.ts

@@ -0,0 +1,13 @@
+export { Product } from './features/chat/components/product/product';
+export { Service } from './features/chat/components/service/service';
+export { ChatComponentRenderer } from './features/chat/renderer/renderer';
+export { ComponentType, ItemAction, Theme } from './features/chat/model/chat.model';
+export type { ProductItem } from './features/chat/components/product/product.model';
+export type { ServiceItem } from './features/chat/components/service/service.model';
+export type {
+  ActionHandler,
+  ChatComponentProps,
+  ItemCount,
+  Language,
+  LocalizedText,
+} from './features/chat/model/chat.model';

package/tailwind.config.js

@@ -0,0 +1,43 @@
+/**
+ * Shared Tailwind config for both web (tailwindcss) and React Native (NativeWind).
+ *
+ * Consumers can extend this via `presets: [require('@inorain_development/hotel-smarters-chat-ui/tailwind.config')]`
+ * so design tokens stay in sync across admin (DOM) and mobile/web-RN (NativeWind).
+ */
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // NativeWind preset enables Tailwind class compilation in React Native.
+  presets: [require('nativewind/preset')],
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        chat: {
+          'surface-dark': 'rgb(26, 28, 40)',
+          'surface-light': '#dfeaf2',
+          'border-dark': 'rgba(255, 255, 255, 0.06)',
+          'border-light': '#b4cbdc',
+          'subtitle-dark': 'rgb(130, 132, 154)',
+        },
+      },
+    },
+    screens: {
+      xs: { min: '0' },
+      xsm: { min: '380px' },
+      sm: { min: '576px' },
+      md: { min: '786px' },
+      lg: { min: '1024px' },
+      xl: { min: '1280px' },
+      xxl: { min: '1366px' },
+      'lg-xl': { min: '1512px' },
+      'down-lg-xl': { max: '1512px' },
+      'down-xxl': { max: '1399px' },
+      'down-xl': { max: '1279px' },
+      'down-lg': { max: '1023px' },
+      'down-md': { max: '785px' },
+      'down-sm': { max: '575px' },
+      'down-xsm': { max: '380px' }
+    }
+  },
+  plugins: [],
+};