@t4h.ds/service-conversation-card 0.0.0-experimental-a8290f4

package/dist/components/ServiceConversationCard/ServiceConversationCard.d.ts

@@ -0,0 +1,5 @@
+import { PressableProps } from '@t4h.ds/pressable';
+import { ServiceConversationCardContainerProps } from './ServiceConversationCardContainer.js';
+export interface ServiceConversationCardProps extends Omit<PressableProps, 'children'>, Omit<ServiceConversationCardContainerProps, 'isHovered' | 'isPressed'> {
+}
+export declare function ServiceConversationCard(props: ServiceConversationCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ServiceConversationCard/ServiceConversationCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Pressable } from '@t4h.ds/pressable';
+import { ServiceConversationCardContainer, } from './ServiceConversationCardContainer.js';
+export function ServiceConversationCard(props) {
+    return (_jsx(Pressable, { ...props, children: ({ isHovered, isPressed }) => (_jsx(ServiceConversationCardContainer, { ...props, isHovered: isHovered, isPressed: isPressed })) }));
+}

package/dist/components/ServiceConversationCard/ServiceConversationCardContainer.d.ts

@@ -0,0 +1,10 @@
+import { ServiceConversationCardLayoutProps } from './ServiceConversationCardLayout.js';
+export interface ServiceConversationCardContainerProps extends Omit<ServiceConversationCardLayoutProps, 'status' | 'animations' | 'remainingTimeText' | 'showRemainingTimeTextAndUnreadMessageCount'> {
+    isHovered?: boolean;
+    isPressed?: boolean;
+    lastMessageAt: Date;
+    timeLimitInSeconds: number;
+    isStandby?: boolean;
+    isSelected?: boolean;
+}
+export declare function ServiceConversationCardContainer({ isHovered, isPressed, isSelected, lastMessageAt, timeLimitInSeconds, isStandby, ...props }: ServiceConversationCardContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ServiceConversationCard/ServiceConversationCardContainer.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ServiceConversationCardLayout, } from './ServiceConversationCardLayout.js';
+import { useServiceConversationCardState } from './useServiceConversationCardState.js';
+import { useServiceConversationCardAnimation } from './useServiceConversationCardAnimation.js';
+import { ServiceConversationCardStatus } from './ServiceConversationCardStatus.js';
+export function ServiceConversationCardContainer({ isHovered = false, isPressed = false, isSelected = false, lastMessageAt, timeLimitInSeconds, isStandby, ...props }) {
+    const { status, remainingTimeText } = useServiceConversationCardState({
+        lastMessageAt,
+        timeLimitInSeconds,
+        isStandby,
+        isSelected,
+    });
+    const animations = useServiceConversationCardAnimation(status, isHovered, isPressed);
+    return (_jsx(ServiceConversationCardLayout, { ...props, remainingTimeText: remainingTimeText, status: status, animations: animations, showRemainingTimeTextAndUnreadMessageCount: status !== ServiceConversationCardStatus.Standby && !isSelected, unreadMessageCount: props.unreadMessageCount }));
+}

package/dist/components/ServiceConversationCard/ServiceConversationCardLayout.d.ts

@@ -0,0 +1,13 @@
+import { UseServiceConversationCardAnimation } from './useServiceConversationCardAnimation.js';
+import { ServiceConversationCardStatus } from './ServiceConversationCardStatus.js';
+import './tokens.js';
+export interface ServiceConversationCardLayoutProps {
+    title: string;
+    message: string;
+    remainingTimeText: string;
+    status: ServiceConversationCardStatus;
+    animations: UseServiceConversationCardAnimation;
+    unreadMessageCount: number;
+    showRemainingTimeTextAndUnreadMessageCount: boolean;
+}
+export declare function ServiceConversationCardLayout({ title, message, remainingTimeText, unreadMessageCount, showRemainingTimeTextAndUnreadMessageCount, status, animations, }: ServiceConversationCardLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ServiceConversationCard/ServiceConversationCardLayout.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '@t4h.ds/core';
+import { Animated, useAnimatedStyle } from '@t4h.ds/reanimated';
+import { ServiceConversationCardStatus } from './ServiceConversationCardStatus.js';
+import './tokens.js';
+import { Avatar } from '@t4h.ds/avatar';
+const colors = {
+    [ServiceConversationCardStatus.Normal]: 'green',
+    [ServiceConversationCardStatus.NearBreach]: 'yellow',
+    [ServiceConversationCardStatus.Breached]: 'red',
+    [ServiceConversationCardStatus.Standby]: 'grey',
+    [ServiceConversationCardStatus.Selected]: 'blue',
+};
+export function ServiceConversationCardLayout({ title, message, remainingTimeText, unreadMessageCount, showRemainingTimeTextAndUnreadMessageCount, status, animations, }) {
+    return (_jsxs(Box, { as: Animated.View, row: true, rounded: true, overflow: true, p: 'space.150', gap: 'space.150', borderWidth: 1, style: useAnimatedStyle(() => ({
+            backgroundColor: animations.backgroundColor.value,
+            borderColor: animations.borderColor.value,
+        }), [animations.backgroundColor, animations.borderColor]), children: [_jsx(Avatar, { name: title ?? '?', color: colors[status] }), _jsxs(Box, { flex: 1, gap: 'space.050', children: [_jsx(Text, { bold: true, numberOfLines: 1, lineBreakMode: 'tail', color: `service-conversation-card.${status}.color.title`, children: title }), _jsx(Text, { numberOfLines: 1, lineBreakMode: 'tail', color: `service-conversation-card.${status}.color.message`, children: message })] }), showRemainingTimeTextAndUnreadMessageCount && (_jsxs(Box, { children: [_jsx(Box, { children: _jsx(Text, { color: `service-conversation-card.${status}.color.icon`, children: remainingTimeText }) }), !!unreadMessageCount && (_jsx(Box, { ml: 'auto', rounded: 'full', bg: `service-conversation-card.${status}.color.icon`, p: 'space.050', center: true, height: 20, width: 20, children: _jsx(Text, { bold: true, color: '#FFFFFF', fontSize: 'xs', children: unreadMessageCount }) }))] }))] }));
+}

package/dist/components/ServiceConversationCard/ServiceConversationCardStatus.d.ts

@@ -0,0 +1,7 @@
+export declare enum ServiceConversationCardStatus {
+    Selected = "selected",
+    Normal = "normal",
+    NearBreach = "near-breach",
+    Breached = "breached",
+    Standby = "standby"
+}

package/dist/components/ServiceConversationCard/ServiceConversationCardStatus.js

@@ -0,0 +1,8 @@
+export var ServiceConversationCardStatus;
+(function (ServiceConversationCardStatus) {
+    ServiceConversationCardStatus["Selected"] = "selected";
+    ServiceConversationCardStatus["Normal"] = "normal";
+    ServiceConversationCardStatus["NearBreach"] = "near-breach";
+    ServiceConversationCardStatus["Breached"] = "breached";
+    ServiceConversationCardStatus["Standby"] = "standby";
+})(ServiceConversationCardStatus || (ServiceConversationCardStatus = {}));

package/dist/components/ServiceConversationCard/tokens.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ServiceConversationCard/tokens.js

@@ -0,0 +1,72 @@
+import { Theme } from '@t4h.ds/core';
+Theme.get()
+    .tokens.set({
+    'service-conversation-card.selected.color.icon': '@color.background.brand.bold',
+    'service-conversation-card.selected.color.title': '@color.background.brand.bold',
+    'service-conversation-card.selected.color.message': '#60646C',
+    'service-conversation-card.selected.color.background': '#F7F9FF',
+    'service-conversation-card.selected.hovered.color.background': '#EDF1FF',
+    'service-conversation-card.selected.pressed.color.background': '@service-conversation-card.selected.hovered.color.background',
+    'service-conversation-card.selected.color.icon.background': '#D2DDFF',
+    'service-conversation-card.selected.hovered.color.icon.background': '@service-conversation-card.selected.color.icon.background',
+    'service-conversation-card.selected.pressed.color.icon.background': '@service-conversation-card.selected.hovered.color.icon.background',
+    'service-conversation-card.selected.color.border': '#D2DDFF',
+    'service-conversation-card.selected.hovered.color.border': '@service-conversation-card.selected.color.border',
+    'service-conversation-card.selected.pressed.color.border': '@service-conversation-card.selected.hovered.color.border',
+})
+    .set({
+    'service-conversation-card.normal.color.icon': '#2A7E3B',
+    'service-conversation-card.normal.color.title': '#1C2024',
+    'service-conversation-card.normal.color.message': '#60646C',
+    'service-conversation-card.normal.color.background': '#F5FBF5',
+    'service-conversation-card.normal.color.background.hovered': '#E9F6E9',
+    'service-conversation-card.normal.color.background.pressed': '@service-conversation-card.normal.color.background.hovered',
+    'service-conversation-card.normal.color.icon.background': '#B2DDB5',
+    'service-conversation-card.normal.hovered.color.icon.background': '@service-conversation-card.normal.color.icon.background',
+    'service-conversation-card.normal.pressed.color.icon.background': '@service-conversation-card.normal.hovered.color.icon.background',
+    'service-conversation-card.normal.color.border': '#E8E8EC',
+    'service-conversation-card.normal.hovered.color.border': '@service-conversation-card.normal.color.border',
+    'service-conversation-card.normal.pressed.color.border': '@service-conversation-card.normal.hovered.color.border',
+})
+    .set({
+    'service-conversation-card.near-breach.color.icon': '#AB6400',
+    'service-conversation-card.near-breach.color.title': '#1C2024',
+    'service-conversation-card.near-breach.color.message': '#60646C',
+    'service-conversation-card.near-breach.color.background': '#FEFBE9',
+    'service-conversation-card.near-breach.hovered.color.background': '#FFF7C2',
+    'service-conversation-card.near-breach.pressed.color.background': '@service-conversation-card.near-breach.hovered.color.background',
+    'service-conversation-card.near-breach.color.icon.background': '#F3D673',
+    'service-conversation-card.near-breach.color.icon.background.hovered': '@service-conversation-card.near-breach.color.icon.background',
+    'service-conversation-card.near-breach.color.icon.background.pressed': '@service-conversation-card.near-breach.color.icon.background.hovered',
+    'service-conversation-card.near-breach.color.border': '#E8E8EC',
+    'service-conversation-card.near-breach.hovered.color.border': '@service-conversation-card.near-breach.color.border',
+    'service-conversation-card.near-breach.pressed.color.border': '@service-conversation-card.near-breach.hovered.color.border',
+})
+    .set({
+    'service-conversation-card.breached.color.icon': '#E5484D',
+    'service-conversation-card.breached.color.title': '#1C2024',
+    'service-conversation-card.breached.color.message': '#60646C',
+    'service-conversation-card.breached.color.background': '#FFF7F7',
+    'service-conversation-card.breached.hovered.color.background': '#FEEBEC',
+    'service-conversation-card.breached.pressed.color.background': '@service-conversation-card.breached.hovered.color.background',
+    'service-conversation-card.breached.color.icon.background': '#FDBDBE',
+    'service-conversation-card.breached.hovered.color.icon.background': '@service-conversation-card.breached.color.icon.background',
+    'service-conversation-card.breached.pressed.color.icon.background': '@service-conversation-card.breached.hovered.color.icon.background',
+    'service-conversation-card.breached.color.border': '#E8E8EC',
+    'service-conversation-card.breached.hovered.color.border': '@service-conversation-card.breached.color.border',
+    'service-conversation-card.breached.pressed.color.border': '@service-conversation-card.breached.hovered.color.border',
+})
+    .set({
+    'service-conversation-card.standby.color.icon': '#60646C',
+    'service-conversation-card.standby.color.title': '#1C2024',
+    'service-conversation-card.standby.color.message': '#60646C',
+    'service-conversation-card.standby.color.background': '#F9F9FB',
+    'service-conversation-card.standby.hovered.color.background': '@service-conversation-card.standby.color.background',
+    'service-conversation-card.standby.pressed.color.background': '@service-conversation-card.standby.hovered.color.background',
+    'service-conversation-card.standby.color.icon.background': '#D9D9E0',
+    'service-conversation-card.standby.hovered.color.icon.background': '@service-conversation-card.standby.color.icon.background',
+    'service-conversation-card.standby.pressed.color.icon.background': '@service-conversation-card.standby.hovered.color.icon.background',
+    'service-conversation-card.standby.color.border': '#E8E8EC',
+    'service-conversation-card.standby.hovered.color.border': '@service-conversation-card.standby.color.border',
+    'service-conversation-card.standby.pressed.color.border': '@service-conversation-card.standby.hovered.color.border',
+});

package/dist/components/ServiceConversationCard/useServiceConversationCardAnimation.d.ts

@@ -0,0 +1,8 @@
+import { SharedValue } from '@t4h.ds/reanimated';
+import { ServiceConversationCardStatus } from './ServiceConversationCardStatus.js';
+export interface UseServiceConversationCardAnimation {
+    backgroundColor: SharedValue<string>;
+    borderColor: SharedValue<string>;
+    iconBackgroundColor: SharedValue<string>;
+}
+export declare function useServiceConversationCardAnimation(status: ServiceConversationCardStatus, isHovered: boolean, isPressed: boolean): UseServiceConversationCardAnimation;

package/dist/components/ServiceConversationCard/useServiceConversationCardAnimation.js

@@ -0,0 +1,16 @@
+import { useReanimatedTransitionThemeToken, } from '@t4h.ds/reanimated';
+import { useMemo } from 'react';
+export function useServiceConversationCardAnimation(status, isHovered, isPressed) {
+    const tag = useMemo(() => {
+        const tag = `service-conversation-card.${status}`;
+        if (isPressed)
+            return `${tag}.pressed`;
+        if (isHovered)
+            return `${tag}.hovered`;
+        return tag;
+    }, [status, isPressed, isHovered]);
+    const backgroundColor = useReanimatedTransitionThemeToken(`${tag}.color.background`, { duration: 300 });
+    const borderColor = useReanimatedTransitionThemeToken(`${tag}.color.border`, { duration: 300 });
+    const iconBackgroundColor = useReanimatedTransitionThemeToken(`${tag}.color.icon.background`, { duration: 300 });
+    return { backgroundColor, borderColor, iconBackgroundColor };
+}

package/dist/components/ServiceConversationCard/useServiceConversationCardState.d.ts

@@ -0,0 +1,13 @@
+import { ServiceConversationCardStatus } from './ServiceConversationCardStatus.js';
+export interface UseServiceConversationCardState {
+    remainingTimeText: string;
+    diffInSeconds: number;
+    status: ServiceConversationCardStatus;
+}
+export interface UseServiceConversationCardStateProps {
+    lastMessageAt: Date;
+    timeLimitInSeconds: number;
+    isStandby?: boolean;
+    isSelected?: boolean;
+}
+export declare function useServiceConversationCardState({ lastMessageAt, timeLimitInSeconds, isStandby, isSelected, }: UseServiceConversationCardStateProps): UseServiceConversationCardState;

package/dist/components/ServiceConversationCard/useServiceConversationCardState.js

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { useAnimationFrameState } from '@t4h.ds/animation-frame';
+import { ServiceConversationCardStatus } from './ServiceConversationCardStatus.js';
+export function useServiceConversationCardState({ lastMessageAt, timeLimitInSeconds, isStandby, isSelected, }) {
+    const [remainingTimeText, diffInSeconds] = useAnimationFrameState(() => {
+        const now = new Date();
+        const expireAtTime = lastMessageAt.getTime() + timeLimitInSeconds * 1000;
+        const nowTime = now.getTime();
+        const diffInSeconds = Math.floor((expireAtTime - nowTime) / 1000);
+        const minutes = Math.abs(Math.floor(diffInSeconds / 60))
+            .toString()
+            .padStart(2, '0');
+        const seconds = Math.abs(diffInSeconds % 60)
+            .toString()
+            .padStart(2, '0');
+        const display = diffInSeconds < 0 ? `-${minutes}:${seconds}` : `${minutes}:${seconds}`;
+        return [display, diffInSeconds];
+    }, { maxFps: 3 }, [lastMessageAt, timeLimitInSeconds]);
+    const status = useMemo(() => {
+        if (isSelected)
+            return ServiceConversationCardStatus.Selected;
+        if (isStandby)
+            return ServiceConversationCardStatus.Standby;
+        if (diffInSeconds > timeLimitInSeconds * 0.8)
+            return ServiceConversationCardStatus.Normal;
+        if (diffInSeconds > timeLimitInSeconds * 0.5)
+            return ServiceConversationCardStatus.NearBreach;
+        return ServiceConversationCardStatus.Breached;
+    }, [isStandby, isSelected, diffInSeconds, timeLimitInSeconds]);
+    return useMemo(() => ({ remainingTimeText, status, diffInSeconds }), [remainingTimeText, status, diffInSeconds]);
+}

package/dist/service-conversation-card.d.ts

@@ -0,0 +1 @@
+export * from './components/ServiceConversationCard/ServiceConversationCard.js';

package/dist/service-conversation-card.js

@@ -0,0 +1 @@
+export * from './components/ServiceConversationCard/ServiceConversationCard.js';

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@t4h.ds/service-conversation-card",
+  "version": "0.0.0-experimental-a8290f4",
+  "author": "Tony <tony.js@zoho.eu>",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/service-conversation-card.js",
+  "types": "./dist/service-conversation-card.d.ts",
+  "exports": {
+    "types": "./dist/service-conversation-card.d.ts",
+    "import": "./dist/service-conversation-card.js"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepublish": "yarn run build"
+  },
+  "devDependencies": {
+    "@t4h.ds/animation-frame": "^0.0.0-experimental-a8290f4",
+    "@t4h.ds/avatar": "^0.0.0-experimental-a8290f4",
+    "@t4h.ds/core": "^0.0.0-experimental-a8290f4",
+    "@t4h.ds/pressable": "^0.0.0-experimental-a8290f4",
+    "@t4h.ds/reanimated": "^0.0.0-experimental-a8290f4",
+    "@types/react": "^19",
+    "react": "^19.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  },
+  "peerDependencies": {
+    "@t4h.ds/animation-frame": "^0.0.0-experimental-a8290f4",
+    "@t4h.ds/avatar": "^0.0.0-experimental-a8290f4",
+    "@t4h.ds/core": "^0.0.0-experimental-a8290f4",
+    "@t4h.ds/pressable": "^0.0.0-experimental-a8290f4",
+    "@t4h.ds/reanimated": "^0.0.0-experimental-a8290f4",
+    "react": "*"
+  },
+  "optionalDependencies": {
+    "react-native": "^0.80.1"
+  },
+  "stableVersion": "0.0.0"
+}