crew-recommendation-ui 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crew-recommendation-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Shared UI library for recommendation listing components - DLS tokens and React components",
   "private": false,
   "publishConfig": {
@@ -44,17 +44,16 @@
   },
   "peerDependencies": {
     "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "react-native": ">=0.70.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19",
+    "@types/react-native": "^0.72.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "react-native": "^0.74.0",
     "typescript": "~5.7.2",
     "vite": "^6.3.1",
     "vite-plugin-dts": "^4.5.0"
   },
-  "dependencies": {
-    "clsx": "^2.1.1"
-  }
+  "dependencies": {}
 }

package/src/recommendation/components/Card.tsx

@@ -1,191 +1,212 @@
-import React from 'react';
-import { clsx } from 'clsx';
-import { colors, spacing, textStyles } from '../../dls/tokens';
-import type { BaseRecommendationItem, RecommendationCardProps } from '../types';
+import {
+  View,
+  Text,
+  Image,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native'
+import { colors, spacing } from '../../dls/tokens'
+import type { BaseRecommendationItem, RecommendationCardProps } from '../types'
 
 /**
- * Base Recommendation Card Component
- * 
+ * Base Recommendation Card Component (React Native Web compatible)
+ *
  * This is a generic card that can display any recommendation item.
- * Specific card types (Hotel, Flight, Cab) will extend this.
+ * Works on both React Native and Web via react-native-web.
  */
 export const Card = <T extends BaseRecommendationItem>({
   item,
   onSelect,
   onExpand,
   isSelected = false,
-  isExpanded = false,
 }: RecommendationCardProps<T>) => {
-  const handleClick = () => {
+  const handlePress = () => {
     if (onExpand) {
-      onExpand(item);
+      onExpand(item)
     }
-  };
+  }
 
-  const handleSelect = (e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleSelect = () => {
     if (onSelect) {
-      onSelect(item);
+      onSelect(item)
     }
-  };
+  }
 
   // Get the first image URL
-  const imageUrl = item.image_signed_urls?.[0] || item.image?.[0]?.data;
+  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}`,
-      }}
+    <TouchableOpacity
+      onPress={handlePress}
+      activeOpacity={0.8}
+      style={[
+        styles.container,
+        isSelected && styles.containerSelected,
+      ]}
     >
       {/* Image Section */}
       {imageUrl && (
-        <div
-          style={{
-            width: '100%',
-            height: 180,
-            overflow: 'hidden',
-          }}
-        >
-          <img
-            src={imageUrl}
-            alt={item.title}
-            style={{
-              width: '100%',
-              height: '100%',
-              objectFit: 'cover',
-            }}
+        <View style={styles.imageContainer}>
+          <Image
+            source={{ uri: imageUrl }}
+            style={styles.image}
+            resizeMode="cover"
           />
-        </div>
+        </View>
       )}
 
       {/* Content Section */}
-      <div
-        style={{
-          padding: spacing[4],
-          display: 'flex',
-          flexDirection: 'column',
-          gap: spacing[2],
-        }}
-      >
+      <View style={styles.content}>
+        {/* Recommended Badge */}
+        {item.recommended && (
+          <View style={styles.recommendedBadge}>
+            <Text style={styles.recommendedText}>★ Recommended</Text>
+          </View>
+        )}
+
         {/* Title */}
-        <h3
-          style={{
-            ...textStyles.cardTitle,
-            color: colors.neutral[0],
-            margin: 0,
-          }}
-        >
+        <Text style={styles.title} numberOfLines={2}>
           {item.title}
-        </h3>
+        </Text>
 
         {/* Subtitle */}
         {item.subtitle && (
-          <p
-            style={{
-              ...textStyles.cardSubtitle,
-              color: colors.neutral[400],
-              margin: 0,
-            }}
-          >
+          <Text style={styles.subtitle} numberOfLines={1}>
             {item.subtitle}
-          </p>
+          </Text>
         )}
 
         {/* 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>
+          <View style={styles.tagsContainer}>
+            {item.tags.slice(0, 3).map((tag, index) => (
+              <View key={index} style={styles.tag}>
+                <Text style={styles.tagText}>{tag}</Text>
+              </View>
             ))}
-          </div>
+          </View>
         )}
 
         {/* 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>
+        <View style={styles.priceContainer}>
+          <Text style={styles.price}>{item.price}</Text>
           {item.originalPrice && (
-            <span
-              style={{
-                ...textStyles.bodySmall,
-                color: colors.neutral[500],
-                textDecoration: 'line-through',
-              }}
-            >
-              {item.originalPrice}
-            </span>
+            <Text style={styles.originalPrice}>{item.originalPrice}</Text>
           )}
-        </div>
+        </View>
 
         {/* 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',
-          }}
+        <TouchableOpacity
+          onPress={handleSelect}
+          style={[
+            styles.selectButton,
+            isSelected && styles.selectButtonSelected,
+          ]}
         >
-          {isSelected ? '✓ Selected' : 'Select'}
-        </button>
-      </div>
-    </div>
-  );
-};
-
-Card.displayName = 'RecommendationCard';
-
-export default Card;
+          <Text style={styles.selectButtonText}>
+            {isSelected ? '✓ Selected' : 'Select'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </TouchableOpacity>
+  )
+}
 
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.card.background.dark,
+    borderRadius: 16,
+    overflow: 'hidden',
+    borderWidth: 1,
+    borderColor: colors.card.border.dark,
+  },
+  containerSelected: {
+    backgroundColor: colors.card.selected.dark,
+    borderColor: colors.primary[500],
+  },
+  imageContainer: {
+    width: '100%',
+    height: 180,
+    overflow: 'hidden',
+  },
+  image: {
+    width: '100%',
+    height: '100%',
+  },
+  content: {
+    padding: spacing[4],
+    gap: spacing[2],
+  },
+  recommendedBadge: {
+    backgroundColor: colors.warning[500],
+    paddingHorizontal: spacing[2],
+    paddingVertical: spacing[1],
+    borderRadius: 4,
+    alignSelf: 'flex-start',
+  },
+  recommendedText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: colors.neutral[900],
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: colors.neutral[0],
+  },
+  subtitle: {
+    fontSize: 14,
+    color: colors.neutral[400],
+  },
+  tagsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing[1],
+  },
+  tag: {
+    backgroundColor: colors.primary[900],
+    paddingHorizontal: spacing[2],
+    paddingVertical: spacing[0.5],
+    borderRadius: 4,
+  },
+  tagText: {
+    fontSize: 12,
+    color: colors.primary[300],
+  },
+  priceContainer: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    gap: spacing[2],
+    marginTop: spacing[2],
+  },
+  price: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: colors.neutral[0],
+  },
+  originalPrice: {
+    fontSize: 14,
+    color: colors.neutral[500],
+    textDecorationLine: 'line-through',
+  },
+  selectButton: {
+    marginTop: spacing[2],
+    paddingVertical: spacing[2],
+    paddingHorizontal: spacing[4],
+    backgroundColor: colors.primary[600],
+    borderRadius: 8,
+    alignItems: 'center',
+  },
+  selectButtonSelected: {
+    backgroundColor: colors.success[600],
+  },
+  selectButtonText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: colors.neutral[0],
+  },
+})
 
+Card.displayName = 'RecommendationCard'
 
+export default Card

package/README.md

@@ -1,156 +0,0 @@
-# @crew-copilot/recommendation-ui
-
-A shared UI library for recommendation listing components that can be used across web, mobile, and dashboard applications.
-
-## Features
-
-- **DLS (Design Language System)**: Consistent design tokens for colors, spacing, typography
-- **Recommendation Cards**: Pre-built components for hotels, flights, cabs, etc.
-- **Platform Agnostic**: Works with React DOM and React Native Web
-
-## Installation
-
-```bash
-# From the monorepo root
-yarn workspace @crew-copilot/recommendation-ui build
-
-# Or install as a dependency in another package
-yarn add @crew-copilot/recommendation-ui
-```
-
-## Usage
-
-### Import DLS Tokens
-
-```tsx
-import { colors, spacing, textStyles, tokens } from '@crew-copilot/recommendation-ui/dls';
-
-// Use tokens in your styles
-const styles = {
-  container: {
-    padding: spacing[4],
-    backgroundColor: colors.neutral[900],
-  },
-  title: {
-    ...textStyles.h2,
-    color: colors.neutral[0],
-  },
-};
-```
-
-### Import Recommendation Components
-
-```tsx
-import { Card, RecommendationCard } from '@crew-copilot/recommendation-ui/recommendation';
-import type { HotelItem } from '@crew-copilot/recommendation-ui/recommendation';
-
-const hotelData: HotelItem = {
-  id: '1',
-  type: 'hotel',
-  title: 'Luxury Resort & Spa',
-  subtitle: 'Beachfront property',
-  price: '₹12,500',
-  originalPrice: '₹15,000',
-  rating: '4.8',
-  location: 'Goa, India',
-  image_signed_urls: ['https://example.com/hotel.jpg'],
-  tags: ['Pool', 'Spa', 'Beach Access'],
-};
-
-function MyComponent() {
-  return (
-    <Card
-      item={hotelData}
-      onSelect={(item) => console.log('Selected:', item)}
-      onExpand={(item) => console.log('Expanded:', item)}
-    />
-  );
-}
-```
-
-### Import Everything
-
-```tsx
-import {
-  // DLS
-  colors,
-  spacing,
-  tokens,
-  
-  // Recommendation
-  Card,
-  RecommendationCard,
-  
-  // Types
-  HotelItem,
-  FlightItem,
-  CabItem,
-} from '@crew-copilot/recommendation-ui';
-```
-
-## Development
-
-```bash
-# Install dependencies
-cd packages/recommendation-ui
-yarn install
-
-# Build the library
-yarn build
-
-# Watch mode for development
-yarn dev
-
-# Type check
-yarn type-check
-```
-
-## Library Structure
-
-```
-src/
-├── index.ts                    # Main entry point
-├── dls/                        # Design Language System
-│   ├── index.ts
-│   └── tokens/
-│       ├── colors.ts
-│       ├── spacing.ts
-│       ├── typography.ts
-│       └── index.ts
-└── recommendation/             # Recommendation components
-    ├── index.ts
-    ├── types.ts
-    └── components/
-        ├── Card.tsx
-        └── index.ts
-```
-
-## Consuming in Other Packages
-
-### In crew-website (Vite)
-
-```tsx
-// Already configured in yarn workspaces
-import { Card } from '@crew-copilot/recommendation-ui';
-```
-
-### In crew-app (React Native / Expo)
-
-```tsx
-// Add to package.json dependencies:
-// "@crew-copilot/recommendation-ui": "workspace:*"
-
-import { tokens, Card } from '@crew-copilot/recommendation-ui';
-```
-
-## Future Additions
-
-- [ ] HotelCard component
-- [ ] FlightCard component
-- [ ] CabCard component
-- [ ] VoteButton component
-- [ ] BottomMsgBar component
-- [ ] React Native Web primitives
-
-
-