crew-recommendation-ui 0.0.4 → 0.1.2

package/BUILD_AND_PUBLISH.md

@@ -0,0 +1,191 @@
+# 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! 🚀
+

package/package.json

@@ -1,41 +1,49 @@
 {
-  "name": "crew-recommendation-ui",
-  "version": "0.0.4",
-  "description": "Simple DLS library with tokens and Card component",
-  "private": false,
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+    "name": "crew-recommendation-ui",
+    "version": "0.1.2",
+    "type": "module",
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        "./package.json": "./package.json",
+        ".": {
+            "development": "./src/index.ts",
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "default": "./dist/index.js"
+        },
+        "./dls": {
+            "development": "./src/dls/index.ts",
+            "types": "./dist/dls/index.d.ts",
+            "import": "./dist/dls/index.js",
+            "default": "./dist/dls/index.js"
+        },
+        "./recommendation-listing": {
+            "development": "./src/recommendation-listing/index.ts",
+            "types": "./dist/recommendation-listing/index.d.ts",
+            "import": "./dist/recommendation-listing/index.js",
+            "default": "./dist/recommendation-listing/index.js"
+        }
+    },
+    "peerDependencies": {
+        "react": ">=17.0.0",
+        "react-native": ">=0.70.0"
+    },
+    "devDependencies": {
+        "@types/react": "^19.0.0",
+        "@types/react-native": "^0.73.0",
+        "@vitejs/plugin-react": "^4.3.4",
+        "typescript": "~5.7.2",
+        "vite": "^6.3.1",
+        "vite-plugin-dts": "^4.5.0"
+    },
+    "dependencies": {
+        "clsx": "^2.1.1"
+    },
+    "scripts": {
+        "build": "npm run clean && vite build",
+        "dev": "vite build --watch",
+        "clean": "rm -rf dist"
     }
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "vite build",
-    "clean": "rm -rf dist"
-  },
-  "peerDependencies": {
-    "react": ">=17.0.0",
-    "react-native": ">=0.70.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.55",
-    "@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"
-  }
 }

package/project.json

@@ -0,0 +1,38 @@
+{
+    "name": "recommendation-ui",
+    "$schema": "../../node_modules/nx/schemas/project-schema.json",
+    "sourceRoot": "libs/recommendation-ui/src",
+    "projectType": "library",
+    "targets": {
+      "build": {
+        "executor": "@nx/vite:build",
+        "outputs": ["{options.outputPath}"],
+        "options": {
+          "outputPath": "libs/recommendation-ui/dist",
+          "configFile": "libs/recommendation-ui/vite.config.ts"
+        }
+      },
+      "lint": {
+        "executor": "@nx/eslint:lint",
+        "outputs": ["{options.outputFile}"],
+        "options": {
+          "lintFilePatterns": ["libs/recommendation-ui/**/*.{ts,tsx}"]
+        }
+      },
+      "version": {
+        "executor": "@jscutlery/semver:version",
+        "options": {
+          "preset": "conventional",
+          "tagPrefix": "crew-recommendation-ui@"
+        }
+      },
+      "publish": {
+        "executor": "ngx-deploy-npm:deploy",
+        "options": {
+          "access": "public"
+        },
+        "dependsOn": ["build"]
+      }
+    },
+    "tags": ["type:lib", "scope:shared"]
+  }

package/src/dls/components/Card.tsx

@@ -0,0 +1,44 @@
+/**
+ * Card Component
+ * 
+ * Basic card component following React Native best practices
+ */
+
+import React from 'react';
+import { View, StyleSheet, ViewStyle } from 'react-native';
+import { colors, spacing, borderRadius } from '../tokens';
+
+export interface CardProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+  elevated?: boolean;
+}
+
+export function Card({ children, style, elevated = false }: CardProps) {
+  return (
+    <View style={[styles.container, elevated && styles.elevated, style]}>
+      {children}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.neutral[900],
+    borderRadius: borderRadius.lg,
+    padding: spacing[4],
+    borderWidth: 1,
+    borderColor: colors.neutral[800],
+  },
+  elevated: {
+    shadowColor: colors.black,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+});
+

package/src/dls/components/index.ts

@@ -0,0 +1,6 @@
+/**
+ * DLS Components
+ */
+
+export * from './Card';
+

package/src/dls/index.ts

@@ -0,0 +1,6 @@
+// Tokens
+export * from './tokens';
+
+// Components
+export * from './components';
+

package/src/dls/tokens/colors.ts

@@ -0,0 +1,104 @@
+/**
+ * Color System - Simplified version based on crew-app DLS
+ * 
+ * Provides a consistent color palette for recommendation UI components
+ */
+
+// Helper to create HSL color strings
+export const createHsl = (
+  hue: number,
+  saturation: number,
+  lightness: number,
+): string => {
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+};
+
+// Helper to create HSLA color strings with alpha
+export const createHsla = (
+  hue: number,
+  saturation: number,
+  lightness: number,
+  alpha: number = 1,
+): string => {
+  return `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
+};
+
+/**
+ * Static color palette
+ * Used for consistent theming across components
+ */
+export const colors = {
+  // Primary colors
+  primary: {
+    50: '#f0f9ff',
+    100: '#e0f2fe',
+    200: '#bae6fd',
+    300: '#7dd3fc',
+    400: '#38bdf8',
+    500: '#0ea5e9',
+    600: '#0284c7',
+    700: '#0369a1',
+    800: '#075985',
+    900: '#0c4a6e',
+  },
+  
+  // Neutral/Gray scale
+  neutral: {
+    50: '#fafafa',
+    100: '#f5f5f5',
+    200: '#e5e5e5',
+    300: '#d4d4d4',
+    400: '#a3a3a3',
+    500: '#737373',
+    600: '#525252',
+    700: '#404040',
+    800: '#262626',
+    900: '#171717',
+    950: '#0a0a0a',
+  },
+  
+  // Success colors
+  success: {
+    300: '#86efac',
+    400: '#4ade80',
+    500: '#22c55e',
+    600: '#16a34a',
+  },
+  
+  // Error colors
+  error: {
+    300: '#fca5a5',
+    400: '#f87171',
+    500: '#ef4444',
+    600: '#dc2626',
+  },
+  
+  // Warning colors
+  warning: {
+    300: '#fcd34d',
+    400: '#fbbf24',
+    500: '#f59e0b',
+    600: '#d97706',
+  },
+  
+  // Static colors
+  white: '#ffffff',
+  black: '#000000',
+  transparent: 'transparent',
+} as const;
+
+/**
+ * Dynamic color creators
+ * Use these for hue-based theming (optional, for future enhancement)
+ */
+export const createColor = {
+  primary: (hue: number = 200) => createHsl(hue, 90, 56),
+  primaryLight: (hue: number = 200) => createHsl(hue, 90, 80),
+  primaryDark: (hue: number = 200) => createHsl(hue, 90, 32),
+  
+  background: (hue: number = 0) => createHsl(hue, 16, 4),
+  backgroundElevated: (hue: number = 0) => createHsl(hue, 16, 8),
+  
+  border: (hue: number = 0, opacity: number = 0.2) => createHsla(hue, 16, 80, opacity),
+};
+

package/src/dls/tokens/index.ts

@@ -0,0 +1,4 @@
+export * from './colors';
+export * from './spacing';
+export * from './typography';
+

package/src/dls/tokens/spacing.ts

@@ -0,0 +1,54 @@
+/**
+ * Spacing System - Based on crew-app DLS sizes
+ * 
+ * Provides consistent spacing values following a 4px base unit
+ */
+
+const BASE_UNIT = 4;
+
+/**
+ * Spacing scale following the 4px base unit system
+ * Use these for consistent padding, margins, and gaps
+ */
+export const spacing = {
+  0: 0,
+  1: BASE_UNIT * 1,      // 4px
+  2: BASE_UNIT * 2,      // 8px
+  3: BASE_UNIT * 3,      // 12px
+  4: BASE_UNIT * 4,      // 16px
+  5: BASE_UNIT * 5,      // 20px
+  6: BASE_UNIT * 6,      // 24px
+  8: BASE_UNIT * 8,      // 32px
+  10: BASE_UNIT * 10,    // 40px
+  12: BASE_UNIT * 12,    // 48px
+  16: BASE_UNIT * 16,    // 64px
+  20: BASE_UNIT * 20,    // 80px
+  24: BASE_UNIT * 24,    // 96px
+} as const;
+
+/**
+ * Named spacing values for semantic usage
+ * Preferred for specific use cases
+ */
+export const SPACING = {
+  XS: spacing[1],        // 4px
+  SM: spacing[2],        // 8px
+  MD: spacing[4],        // 16px
+  LG: spacing[6],        // 24px
+  XL: spacing[8],        // 32px
+  XXL: spacing[12],      // 48px
+} as const;
+
+/**
+ * Border radius values
+ */
+export const borderRadius = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  '2xl': 24,
+  full: 9999,
+} as const;
+

package/src/dls/tokens/typography.ts

@@ -0,0 +1,104 @@
+/**
+ * Font sizes following a consistent scale
+ */
+export const fontSizes = {
+  '3xs': 12,
+  '2xs': 14,
+  'xs': 16,
+  'sm': 18,
+  'md': 20,
+  'lg': 24,
+  'xl': 28,
+  '2xl': 32,
+  '3xl': 36,
+  '4xl': 40,
+} as const;
+
+/**
+ * Line heights corresponding to font sizes
+ */
+export const lineHeights = {
+  '3xs': 16,
+  '2xs': 20,
+  'xs': 22,
+  'sm': 24,
+  'md': 28,
+  'lg': 32,
+  'xl': 36,
+  '2xl': 40,
+  '3xl': 44,
+  '4xl': 48,
+} as const;
+
+/**
+ * Font weights
+ */
+export const fontWeights = {
+  regular: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+} as const;
+
+/**
+ * Predefined text styles for common use cases
+ * These follow React Native StyleSheet patterns
+ */
+export const textStyles = {
+  // Headings
+  h1: {
+    fontSize: fontSizes['3xl'],
+    lineHeight: lineHeights['3xl'],
+    fontWeight: fontWeights.bold,
+  },
+  h2: {
+    fontSize: fontSizes['2xl'],
+    lineHeight: lineHeights['2xl'],
+    fontWeight: fontWeights.bold,
+  },
+  h3: {
+    fontSize: fontSizes.xl,
+    lineHeight: lineHeights.xl,
+    fontWeight: fontWeights.semibold,
+  },
+  h4: {
+    fontSize: fontSizes.lg,
+    lineHeight: lineHeights.lg,
+    fontWeight: fontWeights.semibold,
+  },
+  
+  // Body text
+  body: {
+    fontSize: fontSizes.xs,
+    lineHeight: lineHeights.xs,
+    fontWeight: fontWeights.regular,
+  },
+  bodyLarge: {
+    fontSize: fontSizes.sm,
+    lineHeight: lineHeights.sm,
+    fontWeight: fontWeights.regular,
+  },
+  bodySmall: {
+    fontSize: fontSizes['2xs'],
+    lineHeight: lineHeights['2xs'],
+    fontWeight: fontWeights.regular,
+  },
+  
+  // Labels and captions
+  label: {
+    fontSize: fontSizes['2xs'],
+    lineHeight: lineHeights['2xs'],
+    fontWeight: fontWeights.medium,
+  },
+  caption: {
+    fontSize: fontSizes['3xs'],
+    lineHeight: lineHeights['3xs'],
+    fontWeight: fontWeights.regular,
+  },
+  small: {
+    fontSize: fontSizes['3xs'],
+    lineHeight: lineHeights['3xs'],
+    fontWeight: fontWeights.regular,
+  },
+} as const;
+

package/src/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Crew Recommendation UI Library
+ * 
+ * Shared UI library for recommendation listing components
+ * Includes Design Language System (DLS) and recommendation components
+ * 
+ * @packageDocumentation
+ */
+
+// Export everything from DLS
+export * from './dls';
+
+// Export everything from recommendation listing
+export * from './recommendation-listing';
+