crew-recommendation-ui 0.0.1

package/src/recommendation/components/Card.tsx

@@ -0,0 +1,191 @@
+import React from 'react';
+import { clsx } from 'clsx';
+import { colors, spacing, textStyles } from '../../dls/tokens';
+import type { BaseRecommendationItem, RecommendationCardProps } from '../types';
+
+/**
+ * Base Recommendation Card Component
+ * 
+ * This is a generic card that can display any recommendation item.
+ * Specific card types (Hotel, Flight, Cab) will extend this.
+ */
+export const Card = <T extends BaseRecommendationItem>({
+  item,
+  onSelect,
+  onExpand,
+  isSelected = false,
+  isExpanded = false,
+}: RecommendationCardProps<T>) => {
+  const handleClick = () => {
+    if (onExpand) {
+      onExpand(item);
+    }
+  };
+
+  const handleSelect = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (onSelect) {
+      onSelect(item);
+    }
+  };
+
+  // Get the first image URL
+  const imageUrl = item.image_signed_urls?.[0] || item.image?.[0]?.data;
+
+  return (
+    <div
+      onClick={handleClick}
+      className={clsx(
+        'recommendation-card',
+        isSelected && 'recommendation-card--selected',
+        isExpanded && 'recommendation-card--expanded'
+      )}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: isSelected ? colors.card.selected.dark : colors.card.background.dark,
+        borderRadius: 16,
+        overflow: 'hidden',
+        cursor: 'pointer',
+        transition: 'all 0.2s ease-in-out',
+        border: `1px solid ${isSelected ? colors.primary[500] : colors.card.border.dark}`,
+      }}
+    >
+      {/* Image Section */}
+      {imageUrl && (
+        <div
+          style={{
+            width: '100%',
+            height: 180,
+            overflow: 'hidden',
+          }}
+        >
+          <img
+            src={imageUrl}
+            alt={item.title}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+            }}
+          />
+        </div>
+      )}
+
+      {/* Content Section */}
+      <div
+        style={{
+          padding: spacing[4],
+          display: 'flex',
+          flexDirection: 'column',
+          gap: spacing[2],
+        }}
+      >
+        {/* Title */}
+        <h3
+          style={{
+            ...textStyles.cardTitle,
+            color: colors.neutral[0],
+            margin: 0,
+          }}
+        >
+          {item.title}
+        </h3>
+
+        {/* Subtitle */}
+        {item.subtitle && (
+          <p
+            style={{
+              ...textStyles.cardSubtitle,
+              color: colors.neutral[400],
+              margin: 0,
+            }}
+          >
+            {item.subtitle}
+          </p>
+        )}
+
+        {/* Tags */}
+        {item.tags && item.tags.length > 0 && (
+          <div
+            style={{
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: spacing[1],
+            }}
+          >
+            {item.tags.map((tag, index) => (
+              <span
+                key={index}
+                style={{
+                  ...textStyles.caption,
+                  backgroundColor: colors.primary[900],
+                  color: colors.primary[300],
+                  padding: `${spacing[0.5]}px ${spacing[2]}px`,
+                  borderRadius: 4,
+                }}
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+
+        {/* Price Section */}
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'baseline',
+            gap: spacing[2],
+            marginTop: spacing[2],
+          }}
+        >
+          <span
+            style={{
+              ...textStyles.cardPrice,
+              color: colors.neutral[0],
+            }}
+          >
+            {item.price}
+          </span>
+          {item.originalPrice && (
+            <span
+              style={{
+                ...textStyles.bodySmall,
+                color: colors.neutral[500],
+                textDecoration: 'line-through',
+              }}
+            >
+              {item.originalPrice}
+            </span>
+          )}
+        </div>
+
+        {/* Select Button */}
+        <button
+          onClick={handleSelect}
+          style={{
+            marginTop: spacing[2],
+            padding: `${spacing[2]}px ${spacing[4]}px`,
+            backgroundColor: isSelected ? colors.success[600] : colors.primary[600],
+            color: colors.neutral[0],
+            border: 'none',
+            borderRadius: 8,
+            cursor: 'pointer',
+            ...textStyles.label,
+            transition: 'background-color 0.2s ease-in-out',
+          }}
+        >
+          {isSelected ? '✓ Selected' : 'Select'}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+Card.displayName = 'RecommendationCard';
+
+export default Card;
+
+
+

package/src/recommendation/components/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Recommendation Components
+ * Export all card components from here
+ */
+
+export { Card, default as RecommendationCard } from './Card';
+
+// Future exports:
+// export { HotelCard } from './HotelCard';
+// export { FlightCard } from './FlightCard';
+// export { CabCard } from './CabCard';
+
+
+

package/src/recommendation/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Recommendation Listing Module
+ * 
+ * Contains all recommendation card components and types
+ * for displaying hotels, flights, cabs, etc.
+ */
+
+// Export types
+export * from './types';
+
+// Export components
+export * from './components';
+
+
+

package/src/recommendation/types.ts

@@ -0,0 +1,87 @@
+/**
+ * Types for recommendation listing components
+ */
+
+export interface ProductImage {
+  data: string;
+  url?: string;
+}
+
+export interface BaseRecommendationItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  description?: string;
+  price: string;
+  originalPrice?: string;
+  image?: ProductImage[];
+  image_signed_urls?: string[];
+  recommended?: boolean;
+  tags?: string[];
+}
+
+// Hotel specific
+export interface HotelItem extends BaseRecommendationItem {
+  type: 'hotel';
+  rating?: string;
+  ratingCount?: string;
+  location?: string;
+  amenities?: string[];
+  checkIn?: string;
+  checkOut?: string;
+}
+
+// Flight specific
+export interface FlightItem extends BaseRecommendationItem {
+  type: 'flight';
+  airlineName?: string;
+  economyType?: string;
+  date?: string;
+  takeoffTime?: string;
+  takeoffLocation?: string;
+  landingTime?: string;
+  landingLocation?: string;
+  duration?: string;
+  layoverText?: string;
+  isRoundTrip?: boolean;
+}
+
+// Cab specific
+export interface CabItem extends BaseRecommendationItem {
+  type: 'cab';
+  providerName?: string;
+  carType?: string;
+  carName?: string;
+  pickupLocation?: string;
+  dropLocation?: string;
+  estimatedTime?: string;
+}
+
+// Union type for all recommendation items
+export type RecommendationItem = HotelItem | FlightItem | CabItem;
+
+// Props for the recommendation card component
+export interface RecommendationCardProps<T extends BaseRecommendationItem = BaseRecommendationItem> {
+  item: T;
+  onSelect?: (item: T) => void;
+  onExpand?: (item: T) => void;
+  isSelected?: boolean;
+  isExpanded?: boolean;
+  showVote?: boolean;
+  voteCount?: number;
+  onVote?: (itemId: string) => void;
+}
+
+// Props for the recommendation listing component
+export interface RecommendationListingProps {
+  items: RecommendationItem[];
+  type: 'hotel' | 'flight' | 'cab' | 'restaurant' | 'gifting';
+  onItemSelect?: (item: RecommendationItem) => void;
+  onItemExpand?: (item: RecommendationItem) => void;
+  selectedItemId?: string;
+  expandedItemId?: string;
+  showVoting?: boolean;
+}
+
+
+