crew-recommendation-ui 0.1.2 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "crew-recommendation-ui",
-    "version": "0.1.2",
+    "version": "0.1.4",
     "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.js",

package/src/dls/components/Card.tsx

@@ -42,3 +42,4 @@ const styles = StyleSheet.create({
   },
 });
 
+

package/src/dls/components/index.ts

@@ -4,3 +4,4 @@
 
 export * from './Card';
 
+

package/src/dls/index.ts

@@ -4,3 +4,4 @@ export * from './tokens';
 // Components
 export * from './components';
 
+

package/src/dls/tokens/colors.ts

@@ -102,3 +102,4 @@ export const createColor = {
   border: (hue: number = 0, opacity: number = 0.2) => createHsla(hue, 16, 80, opacity),
 };
 
+

package/src/dls/tokens/index.ts

@@ -2,3 +2,4 @@ export * from './colors';
 export * from './spacing';
 export * from './typography';
 
+

package/src/dls/tokens/spacing.ts

@@ -52,3 +52,4 @@ export const borderRadius = {
   full: 9999,
 } as const;
 
+

package/src/dls/tokens/typography.ts

@@ -102,3 +102,4 @@ export const textStyles = {
   },
 } as const;
 
+

package/src/index.ts

@@ -13,3 +13,4 @@ export * from './dls';
 // Export everything from recommendation listing
 export * from './recommendation-listing';
 
+

package/src/recommendation-listing/components/BadgeGroup.tsx

@@ -47,3 +47,4 @@ const styles = StyleSheet.create({
   },
 });
 
+

package/src/recommendation-listing/components/RecommendationCard.tsx

@@ -15,9 +15,11 @@ import type { RecommendationCardProps } from '../types';
 export function RecommendationCard({
   itemData,
   onPress,
+  onSelect,
   isSelected = false,
   showBadge = true,
   showPrice = true,
+  showSelectButton = false,
   imageHeight = 200,
   testID,
 }: RecommendationCardProps) {
@@ -25,6 +27,11 @@ export function RecommendationCard({
     onPress?.(itemData);
   }, [onPress, itemData]);
 
+  const handleSelectPress = useCallback((event: any) => {
+    event.stopPropagation();
+    onSelect?.(itemData);
+  }, [onSelect, itemData]);
+
   const imageUrl = itemData.image_signed_urls?.[0];
 
   return (
@@ -100,14 +107,38 @@ export function RecommendationCard({
           </View>
         )}
 
-        {/* Price */}
-        {showPrice && (
-          <PriceDisplay
-            price={itemData.price}
-            originalPrice={itemData.originalPrice}
-            isPriceExclusive={itemData.isPriceExclusive}
-          />
-        )}
+        {/* Price Section with Select Button */}
+        <View style={styles.priceSection}>
+          {showPrice && (
+            <PriceDisplay
+              price={itemData.price}
+              originalPrice={itemData.originalPrice}
+              isPriceExclusive={itemData.isPriceExclusive}
+            />
+          )}
+
+          {/* Select Button */}
+          {showSelectButton && !isSelected && (
+            <TouchableOpacity
+              style={styles.selectButton}
+              onPress={handleSelectPress}
+              activeOpacity={0.7}
+              accessibilityRole="button"
+              accessibilityLabel="Select this option"
+            >
+              <Text style={styles.selectButtonText}>
+                {isSelected ? "Selected" : "Select"}
+              </Text>
+            </TouchableOpacity>
+          )}
+
+          {/* Selected Checkmark */}
+          {showSelectButton && isSelected && (
+            <View style={styles.selectedBadge}>
+              <Text style={styles.selectedBadgeText}>✓ Selected</Text>
+            </View>
+          )}
+        </View>
       </View>
     </TouchableOpacity>
   );
@@ -173,5 +204,41 @@ const styles = StyleSheet.create({
     ...textStyles.caption,
     color: colors.neutral[300],
   },
+  priceSection: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: spacing[2],
+  },
+  selectButton: {
+    backgroundColor: colors.primary[600],
+    paddingHorizontal: spacing[4],
+    paddingVertical: spacing[2],
+    borderRadius: borderRadius.full,
+    minWidth: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  selectButtonText: {
+    ...textStyles.body,
+    color: colors.white,
+    fontWeight: '600',
+    fontSize: 14,
+  },
+  selectedBadge: {
+    backgroundColor: colors.success[500],
+    paddingHorizontal: spacing[4],
+    paddingVertical: spacing[2],
+    borderRadius: borderRadius.full,
+    minWidth: 80,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  selectedBadgeText: {
+    ...textStyles.body,
+    color: colors.white,
+    fontWeight: '600',
+    fontSize: 14,
+  },
 });
 

package/src/recommendation-listing/components/RecommendationList.tsx

@@ -14,6 +14,9 @@ import type { RecommendationListProps, RecommendationItemData } from '../types';
 export function RecommendationList({
   items,
   onItemPress,
+  onItemSelect,
+  selectedItemId,
+  showSelectButton = false,
   renderItem: customRenderItem,
   ListHeaderComponent,
   ListEmptyComponent,
@@ -35,11 +38,14 @@ export function RecommendationList({
         <RecommendationCard
           itemData={item}
           onPress={onItemPress}
+          onSelect={onItemSelect}
+          isSelected={selectedItemId === item.id}
+          showSelectButton={showSelectButton}
           testID={`recommendation-card-${item.id}`}
         />
       );
     },
-    [customRenderItem, onItemPress],
+    [customRenderItem, onItemPress, onItemSelect, selectedItemId, showSelectButton],
   );
 
   return (

package/src/recommendation-listing/components/index.ts

@@ -8,3 +8,4 @@ export * from './RecommendationHeader';
 export * from './RecommendationCard';
 export * from './RecommendationList';
 
+

package/src/recommendation-listing/index.ts

@@ -7,3 +7,4 @@
 export * from './types';
 export * from './components';
 
+

package/src/recommendation-listing/types.ts

@@ -18,9 +18,11 @@ export interface RecommendationItemData {
 export interface RecommendationCardProps {
   itemData: RecommendationItemData;
   onPress?: (item: RecommendationItemData) => void;
+  onSelect?: (item: RecommendationItemData) => void;
   isSelected?: boolean;
   showBadge?: boolean;
   showPrice?: boolean;
+  showSelectButton?: boolean;
   imageHeight?: number;
   testID?: string;
 }
@@ -28,6 +30,9 @@ export interface RecommendationCardProps {
 export interface RecommendationListProps {
   items: RecommendationItemData[];
   onItemPress?: (item: RecommendationItemData) => void;
+  onItemSelect?: (item: RecommendationItemData) => void;
+  selectedItemId?: string | null;
+  showSelectButton?: boolean;
   onBackPress?: () => void;
   onSharePress?: () => void;
   renderItem?: (item: RecommendationItemData, index: number) => React.ReactElement;
@@ -56,3 +61,4 @@ export interface PriceDisplayProps {
   isPriceExclusive?: boolean;
 }
 
+

package/vite.config.ts

@@ -28,3 +28,4 @@ export default defineConfig({
   },
 });
 
+

package/BUILD_AND_PUBLISH.md

@@ -1,191 +0,0 @@
-# Build & Publish Guide
-
-## 🎯 Option 1: Use as Local Workspace Package (RECOMMENDED)
-
-This is the **best approach for monorepo projects**. No npm publishing needed!
-
-### ✅ Advantages:
-- No npm account or tokens needed
-- Instant changes without publishing
-- Better for development workflow
-- Automatic linking via Yarn workspaces
-
-### 📦 Setup (Already Done!):
-
-1. **Library is already in the monorepo:**
-   ```
-   crew-dashboards/libs/recommendation-ui/
-   ```
-
-2. **crew-website already configured:**
-   ```json
-   "dependencies": {
-     "crew-recommendation-ui": "*"
-   }
-   ```
-
-3. **Build the library:**
-   ```bash
-   cd /Users/gurkawalbir.singh/Downloads/Workspace/crew-dashboards/libs/recommendation-ui
-   yarn build
-   ```
-
-4. **Use in crew-website:**
-   ```tsx
-   // Instead of:
-   import { colors } from 'crew-recommendation-ui/dls';
-   
-   // Use:
-   import { colors } from '@crew-dashboards/recommendation-ui/dls';
-   ```
-
-### 🔄 Development Workflow:
-
-1. **Make changes to the library:**
-   ```bash
-   cd libs/recommendation-ui
-   # Edit files in src/
-   ```
-
-2. **Rebuild the library:**
-   ```bash
-   yarn build
-   # Or use watch mode for auto-rebuild:
-   yarn dev
-   ```
-
-3. **Changes are immediately available in crew-website** (restart dev server if needed)
-
-### 🚀 For Production:
-
-Build the library before deploying crew-website:
-```bash
-# From project root
-cd libs/recommendation-ui && yarn build
-cd ../../apps/crew-website && yarn build
-```
-
----
-
-## 📤 Option 2: Publish to npm (If Needed)
-
-Only use this if you need to share the library **outside** the monorepo (e.g., with crew-frontend-monorepo).
-
-### Prerequisites:
-- npm account
-- Logged in: `npm login`
-- Automation token (to bypass 2FA)
-
-### Steps:
-
-1. **Build the library:**
-   ```bash
-   cd /Users/gurkawalbir.singh/Downloads/Workspace/crew-dashboards/libs/recommendation-ui
-   yarn build
-   ```
-
-2. **Update version in package.json:**
-   ```json
-   {
-     "version": "0.2.0"  // Increment version
-   }
-   ```
-
-3. **Publish to npm:**
-   ```bash
-   npm publish
-   ```
-
-4. **Consume from npm:**
-   ```json
-   // In any package.json
-   {
-     "dependencies": {
-       "@crew-dashboards/recommendation-ui": "^0.2.0"
-     }
-   }
-   ```
-
-### Publishing Script (Optional):
-
-Add to `libs/recommendation-ui/package.json`:
-```json
-{
-  "scripts": {
-    "prepublishOnly": "yarn build",
-    "publish:patch": "npm version patch && npm publish",
-    "publish:minor": "npm version minor && npm publish",
-    "publish:major": "npm version major && npm publish"
-  }
-}
-```
-
-Then use:
-```bash
-yarn publish:patch  # 0.1.0 -> 0.1.1
-yarn publish:minor  # 0.1.0 -> 0.2.0
-yarn publish:major  # 0.1.0 -> 1.0.0
-```
-
----
-
-## 🔍 Verify the Setup
-
-### Check if library is linked:
-```bash
-cd /Users/gurkawalbir.singh/Downloads/Workspace/crew-dashboards/apps/crew-website
-ls -la node_modules/@crew-dashboards/recommendation-ui
-```
-
-Should show a symlink to `../../libs/recommendation-ui`
-
-### Test import:
-```tsx
-// In crew-website/src/test.tsx
-import { colors, spacing } from '@crew-dashboards/recommendation-ui/dls';
-import { RecommendationCard } from '@crew-dashboards/recommendation-ui/recommendation-listing';
-
-console.log(colors.primary[500]); // Should work!
-```
-
----
-
-## 📝 Common Commands
-
-```bash
-# Build library
-cd libs/recommendation-ui && yarn build
-
-# Watch mode (auto-rebuild on changes)
-cd libs/recommendation-ui && yarn dev
-
-# Clean build artifacts
-cd libs/recommendation-ui && yarn clean
-
-# Reinstall dependencies (if needed)
-cd crew-dashboards && yarn install
-
-# Start crew-website with the library
-cd apps/crew-website && yarn dev
-```
-
----
-
-## 🎯 Recommended Approach for Your Project
-
-Since you have everything in the **crew-dashboards monorepo**, use **Option 1 (Local Workspace Package)**:
-
-1. ✅ Library is already set up in `libs/recommendation-ui/`
-2. ✅ crew-website is already configured to use it
-3. ✅ Just build and import!
-
-```bash
-# Build once
-cd libs/recommendation-ui && yarn build
-
-# Use in crew-website
-# Update imports from 'crew-recommendation-ui' to '@crew-dashboards/recommendation-ui'
-```
-
-This gives you the **best developer experience** without the overhead of npm publishing! 🚀
-