Files
calendar/companion/package.json
T
Dhairyashil ShindeandGitHub 60a4d3f2b4 feat(companion): Add DropdownMenu and Alert Dialog for Android (#26385)
* feat(companion): add DropdownMenu for Android event types list

Replace Alert.alert with react-native-reusables DropdownMenu component
for Android event type list items, providing a native-feeling menu
experience that matches iOS functionality.

Changes:
- Install react-native-reusables dropdown-menu component and dependencies
  (lucide-react-native, tailwindcss-animate, class-variance-authority,
  clsx, tailwind-merge)
- Create EventTypeListItem.android.tsx with DropdownMenu implementation
  - Single ellipsis button triggers dropdown menu
  - Menu includes: Preview, Copy link, Edit, Duplicate, Delete
  - Delete action marked as destructive variant
  - Proper safe area insets handling
- Add PortalHost to app/_layout.tsx for portal rendering support
- Create lib/utils.ts with cn() helper for className merging
- Update global.css with theme CSS variables (popover, border, accent,
  destructive, etc.) for dropdown menu styling
- Update tailwind.config.js with theme colors and tailwindcss-animate plugin
- Update metro.config.js with inlineRem: 16 for proper rem unit handling
- Remove Android Alert.alert fallback from event types index.tsx
- Fix lint issues in generated dropdown-menu.tsx (remove unnecessary fragments)

The Android experience now matches iOS with a single menu button that
opens a dropdown containing all event type actions, replacing the
previous Alert.alert dialog and separate action buttons.

Refs: https://reactnativereusables.com/docs/components/dropdown-menu

* adjust with of menu

* feat(companion): add DropdownMenu for Android booking and availability list items

- Add BookingListItem.android.tsx with DropdownMenu for booking actions
- Add BookingDetailScreen.android.tsx with DropdownMenu in header
- Add AvailabilityListItem.android.tsx with DropdownMenu for schedule actions

Actions include: Reschedule, Edit Location, Add Guests, View Recordings,
Meeting Session Details, Mark as No-Show, Report Booking, Cancel Event
for bookings; Set as Default, Duplicate, Delete for availability schedules.

* fix lint issues

* feat(android): replace native alerts with AlertDialog and Toast in event types

- Install AlertDialog and Alert components from react-native-reusables
- Create Android-specific event types screen (index.android.tsx)
- Replace native Alert.alert() with AlertDialog for delete confirmation
- Add inline validation errors (red border + error text) in create modal
- Implement Toast snackbar for success/error notifications (no layout shift)
- Auto-dismiss toast after 2.5 seconds
- Fix React Compiler compatibility by removing animated refs

This provides a more consistent and polished UI experience on Android,
matching the design system used in other parts of the app.

* feat(android): add AlertDialog for availability delete and booking cancel

- Add index.android.tsx for availability with AlertDialog for delete confirmation
- Add index.android.tsx for bookings with AlertDialog for cancel (with reason input)
- Both screens include Toast snackbar for success/error notifications
- Follows the same pattern as event types Android implementation

* feat(companion): add DropdownMenu and AlertDialog for Android

- Replace native Alert.alert context menus with DropdownMenu component
  for event types, bookings, and availability lists
- Replace FullScreenModal with AlertDialog for create/delete/cancel flows
- Add toast notifications for success/error feedback on Android
- Set consistent 380px max-width for all AlertDialogs
- Fix layout headers showing "index" text on event-types and availability
- Create Android-specific More screen with AlertDialog logout confirmation

Uses react-native-reusables components for polished Android UI

* better code

* fix cubics comments

* refactor(android): revert delete confirmations to native Alert.alert()

- Logout: reverted to native Alert.alert() (simple yes/no)
- Event Types Delete: reverted to native Alert.alert() (simple yes/no)
- Availability Delete: reverted to native Alert.alert() (simple yes/no)

Keep AlertDialog only where user input is needed:
- Event Types Create (has TextInput for title)
- Availability Create (has TextInput for name)
- Bookings Cancel (has TextInput for cancellation reason)

* refactor(android): remove redundant index.android.tsx files

The main index.tsx files already handle Android via Platform.OS checks.
Android-specific behavior for actions is in the list item components:
- EventTypeListItem.android.tsx
- BookingListItem.android.tsx
- AvailabilityListItem.android.tsx

This consolidates the code and reduces duplication.

* corrected the implementation both native and alert dialog

* address cubics comments

* fix lint issue and address cubic comments
2026-01-02 19:05:26 -03:00

120 lines
5.5 KiB
JSON

{
"name": "cal-companion",
"displayName": "Cal.com Companion",
"version": "1.7.5",
"main": "index.js",
"scripts": {
"start": "expo start",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"typecheck": "tsc -p tsconfig.json --noEmit",
"typecheck:extension": "tsc -p tsconfig.extension.json --noEmit",
"typecheck:all": "npm run typecheck && npm run typecheck:extension",
"export": "expo export",
"export:ios": "expo export --platform ios",
"export:android": "expo export --platform android",
"export:optimized": "EXPO_UNSTABLE_METRO_OPTIMIZE_GRAPH=1 EXPO_UNSTABLE_TREE_SHAKING=1 expo export",
"export:optimized:ios": "EXPO_UNSTABLE_METRO_OPTIMIZE_GRAPH=1 EXPO_UNSTABLE_TREE_SHAKING=1 expo export --platform ios",
"export:optimized:android": "EXPO_UNSTABLE_METRO_OPTIMIZE_GRAPH=1 EXPO_UNSTABLE_TREE_SHAKING=1 expo export --platform android",
"ext": "wxt",
"ext:build": "wxt build",
"ext:build-prod": "BUILD_FOR_STORE=true wxt build",
"ext:zip": "wxt zip",
"ext:zip-prod": "BUILD_FOR_STORE=true wxt zip",
"ext:build-chrome": "BROWSER_TARGET=chrome wxt build -b chrome",
"ext:build-chrome-prod": "BUILD_FOR_STORE=true BROWSER_TARGET=chrome wxt build -b chrome",
"ext:zip-chrome": "BROWSER_TARGET=chrome wxt zip -b chrome",
"ext:zip-chrome-prod": "BUILD_FOR_STORE=true BROWSER_TARGET=chrome wxt zip -b chrome",
"ext:build-firefox": "BROWSER_TARGET=firefox wxt build -b firefox",
"ext:build-firefox-prod": "BUILD_FOR_STORE=true BROWSER_TARGET=firefox wxt build -b firefox",
"ext:zip-firefox": "BROWSER_TARGET=firefox wxt zip -b firefox",
"ext:zip-firefox-prod": "BUILD_FOR_STORE=true BROWSER_TARGET=firefox wxt zip -b firefox",
"ext:build-safari": "BROWSER_TARGET=safari wxt build -b safari",
"ext:build-safari-prod": "BUILD_FOR_STORE=true BROWSER_TARGET=safari wxt build -b safari",
"ext:zip-safari": "BROWSER_TARGET=safari wxt zip -b safari",
"ext:zip-safari-prod": "BUILD_FOR_STORE=true BROWSER_TARGET=safari wxt zip -b safari",
"ext:build-edge": "BROWSER_TARGET=edge wxt build -b edge",
"ext:build-edge-prod": "BUILD_FOR_STORE=true BROWSER_TARGET=edge wxt build -b edge",
"ext:zip-edge": "BROWSER_TARGET=edge wxt zip -b edge",
"ext:zip-edge-prod": "BUILD_FOR_STORE=true BROWSER_TARGET=edge wxt zip -b edge",
"ext:build-all": "npm run ext:build && npm run ext:build-firefox && npm run ext:build-safari && npm run ext:build-edge",
"ext:build-all-prod": "npm run ext:build-prod && npm run ext:build-firefox-prod && npm run ext:build-safari-prod && npm run ext:build-edge-prod",
"lint": "biome lint .",
"lint:react-compiler": "eslint .",
"lint:all": "bun run lint && bun run lint:react-compiler",
"format": "biome format --write .",
"format:check": "biome format .",
"check": "biome check --write .",
"check:ci": "biome ci .",
"prepare": "cd .. && husky companion/.husky"
},
"dependencies": {
"@expo/ui": "0.2.0-canary-20251230-fc48ddc",
"@expo/vector-icons": "15.0.3",
"@react-native-async-storage/async-storage": "2.2.0",
"@react-native-community/netinfo": "11.4.1",
"@react-native-segmented-control/segmented-control": "2.5.7",
"@rn-primitives/alert-dialog": "1.2.0",
"@rn-primitives/dropdown-menu": "1.2.0",
"@rn-primitives/slot": "1.2.0",
"@tanstack/react-query": "5.62.0",
"@tanstack/react-query-persist-client": "5.62.0",
"base64-js": "1.5.1",
"class-variance-authority": "0.7.1",
"clsx": "2.1.1",
"expo": "55.0.0-canary-20251230-fc48ddc",
"expo-auth-session": "7.0.11-canary-20251230-fc48ddc",
"expo-clipboard": "9.0.0-canary-20251230-fc48ddc",
"expo-constants": "18.1.0-canary-20251230-fc48ddc",
"expo-crypto": "15.0.9-canary-20251230-fc48ddc",
"expo-dev-client": "6.1.0-canary-20251230-fc48ddc",
"expo-device": "8.0.11-canary-20251230-fc48ddc",
"expo-glass-effect": "0.2.0-canary-20251230-fc48ddc",
"expo-haptics": "15.0.9-canary-20251230-fc48ddc",
"expo-image": "3.1.0-canary-20251230-fc48ddc",
"expo-linking": "8.0.12-canary-20251230-fc48ddc",
"expo-router": "7.0.0-canary-20251230-fc48ddc",
"expo-secure-store": "15.0.9-canary-20251230-fc48ddc",
"expo-splash-screen": "31.0.14-canary-20251230-fc48ddc",
"expo-status-bar": "3.0.10-canary-20251230-fc48ddc",
"expo-web-browser": "15.0.11-canary-20251230-fc48ddc",
"lucide-react-native": "0.562.0",
"nativewind": "4.2.1",
"react": "19.2.3",
"react-dom": "19.2.3",
"react-native": "0.83.1",
"react-native-gesture-handler": "2.28.0",
"react-native-reanimated": "4.2.0",
"react-native-safe-area-context": "5.6.2",
"react-native-screens": "4.19.0",
"react-native-svg": "15.12.1",
"react-native-web": "0.21.2",
"react-native-worklets": "0.7.1",
"tailwind-merge": "3.4.0",
"tailwindcss-animate": "1.0.7"
},
"private": true,
"devDependencies": {
"@biomejs/biome": "2.3.10",
"@types/chrome": "0.1.31",
"@types/react": "19.2.3",
"@types/react-dom": "19.2.3",
"babel-plugin-react-compiler": "19.0.0-beta-af1b7da-20250417",
"babel-preset-expo": "54.0.7",
"eslint": "9.28.0",
"eslint-plugin-react-compiler": "19.0.0-beta-af1b7da-20250417",
"husky": "9.0.11",
"lint-staged": "15.2.0",
"tailwindcss": "3.4.17",
"typescript": "5.9.3",
"typescript-eslint": "8.50.1",
"wxt": "0.20.11"
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx,json,css,md}": [
"biome format --write"
]
}
}