crew-recommendation-ui 0.0.1

package/README.md

@@ -0,0 +1,156 @@
+# @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
+
+
+

package/dist/Card-C6fF0ZrH.js

@@ -0,0 +1,197 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as colors, s as spacing, t as textStyles } from "./typography-zz5GzgjI.js";
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+const Card = ({
+  item,
+  onSelect,
+  onExpand,
+  isSelected = false,
+  isExpanded = false
+}) => {
+  var _a, _b, _c;
+  const handleClick = () => {
+    if (onExpand) {
+      onExpand(item);
+    }
+  };
+  const handleSelect = (e) => {
+    e.stopPropagation();
+    if (onSelect) {
+      onSelect(item);
+    }
+  };
+  const imageUrl = ((_a = item.image_signed_urls) == null ? void 0 : _a[0]) || ((_c = (_b = item.image) == null ? void 0 : _b[0]) == null ? void 0 : _c.data);
+  return /* @__PURE__ */ jsxs(
+    "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}`
+      },
+      children: [
+        imageUrl && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: 180,
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: imageUrl,
+                alt: item.title,
+                style: {
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "cover"
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: spacing[4],
+              display: "flex",
+              flexDirection: "column",
+              gap: spacing[2]
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  style: {
+                    ...textStyles.cardTitle,
+                    color: colors.neutral[0],
+                    margin: 0
+                  },
+                  children: item.title
+                }
+              ),
+              item.subtitle && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  style: {
+                    ...textStyles.cardSubtitle,
+                    color: colors.neutral[400],
+                    margin: 0
+                  },
+                  children: item.subtitle
+                }
+              ),
+              item.tags && item.tags.length > 0 && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: spacing[1]
+                  },
+                  children: item.tags.map((tag, index) => /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        ...textStyles.caption,
+                        backgroundColor: colors.primary[900],
+                        color: colors.primary[300],
+                        padding: `${spacing[0.5]}px ${spacing[2]}px`,
+                        borderRadius: 4
+                      },
+                      children: tag
+                    },
+                    index
+                  ))
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "baseline",
+                    gap: spacing[2],
+                    marginTop: spacing[2]
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          ...textStyles.cardPrice,
+                          color: colors.neutral[0]
+                        },
+                        children: item.price
+                      }
+                    ),
+                    item.originalPrice && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          ...textStyles.bodySmall,
+                          color: colors.neutral[500],
+                          textDecoration: "line-through"
+                        },
+                        children: item.originalPrice
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "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"
+                  },
+                  children: isSelected ? "✓ Selected" : "Select"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+Card.displayName = "RecommendationCard";
+export {
+  Card as C
+};
+//# sourceMappingURL=Card-C6fF0ZrH.js.map

package/dist/Card-C6fF0ZrH.js.map

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

package/dist/dls/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Design Language System (DLS)
+ *
+ * This module exports all design tokens and primitives
+ * for building consistent UI across platforms.
+ */
+export * from './tokens';
+//# sourceMappingURL=index.d.ts.map

package/dist/dls/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/dls/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,UAAU,CAAC"}

package/dist/dls/index.js

@@ -0,0 +1,25 @@
+import { t as textStyles, e as letterSpacing, l as lineHeight, d as fontWeight, b as fontSize, f as fontFamily, a as semanticSpacing, s as spacing, c as colors } from "../typography-zz5GzgjI.js";
+const tokens = {
+  colors,
+  spacing,
+  semanticSpacing,
+  fontFamily,
+  fontSize,
+  fontWeight,
+  lineHeight,
+  letterSpacing,
+  textStyles
+};
+export {
+  colors,
+  fontFamily,
+  fontSize,
+  fontWeight,
+  letterSpacing,
+  lineHeight,
+  semanticSpacing,
+  spacing,
+  textStyles,
+  tokens
+};
+//# sourceMappingURL=index.js.map

package/dist/dls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/dls/tokens/index.ts"],"sourcesContent":["/**\n * Design Language System - Tokens\n * Export all design tokens from a single entry point\n */\n\nexport * from './colors';\nexport * from './spacing';\nexport * from './typography';\n\n// Combined tokens object for convenience\nimport { colors } from './colors';\nimport { spacing, semanticSpacing } from './spacing';\nimport { fontFamily, fontSize, fontWeight, lineHeight, letterSpacing, textStyles } from './typography';\n\nexport const tokens = {\n  colors,\n  spacing,\n  semanticSpacing,\n  fontFamily,\n  fontSize,\n  fontWeight,\n  lineHeight,\n  letterSpacing,\n  textStyles,\n} as const;\n\nexport type Tokens = typeof tokens;\n\n"],"names":[],"mappings":";AAcO,MAAM,SAAS;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}

package/dist/dls/tokens/colors.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Color tokens for the Crew Design Language System
+ * These colors are used across all recommendation cards and UI components
+ */
+export declare const colors: {
+    readonly primary: {
+        readonly 50: "#f0f9ff";
+        readonly 100: "#e0f2fe";
+        readonly 200: "#bae6fd";
+        readonly 300: "#7dd3fc";
+        readonly 400: "#38bdf8";
+        readonly 500: "#0ea5e9";
+        readonly 600: "#0284c7";
+        readonly 700: "#0369a1";
+        readonly 800: "#075985";
+        readonly 900: "#0c4a6e";
+    };
+    readonly neutral: {
+        readonly 0: "#ffffff";
+        readonly 50: "#fafafa";
+        readonly 100: "#f4f4f5";
+        readonly 200: "#e4e4e7";
+        readonly 300: "#d4d4d8";
+        readonly 400: "#a1a1aa";
+        readonly 500: "#71717a";
+        readonly 600: "#52525b";
+        readonly 700: "#3f3f46";
+        readonly 800: "#27272a";
+        readonly 900: "#18181b";
+        readonly 950: "#09090b";
+    };
+    readonly success: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+    };
+    readonly warning: {
+        readonly 50: "#fffbeb";
+        readonly 100: "#fef3c7";
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+        readonly 700: "#b45309";
+    };
+    readonly error: {
+        readonly 50: "#fef2f2";
+        readonly 100: "#fee2e2";
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+        readonly 700: "#b91c1c";
+    };
+    readonly card: {
+        readonly background: {
+            readonly light: "#ffffff";
+            readonly dark: "#1a1a1a";
+        };
+        readonly border: {
+            readonly light: "#e4e4e7";
+            readonly dark: "#3f3f46";
+        };
+        readonly selected: {
+            readonly light: "#e0f2fe";
+            readonly dark: "#0c4a6e";
+        };
+    };
+    readonly categoryHue: {
+        readonly hotel: 220;
+        readonly flight: 200;
+        readonly cab: 35;
+        readonly restaurant: 15;
+        readonly gifting: 280;
+        readonly default: 220;
+    };
+};
+export type Colors = typeof colors;
+//# sourceMappingURL=colors.d.ts.map

package/dist/dls/tokens/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../../src/dls/tokens/colors.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFT,CAAC;AAEX,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC"}