Skip to content

feat(companion): component improvements, migrate to path aliases, expo-haptics, expo-image #26226

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
volnei merged 7 commits into from
Dec 28, 2025
Merged

feat(companion): component improvements, migrate to path aliases, expo-haptics, expo-image #26226

volnei merged 7 commits into from
Dec 28, 2025

Conversation

@dhairyashiil
Copy link
Member

@dhairyashiil dhairyashiil commented Dec 27, 2025 •
edited
Loading

What does this PR do?

This PR improves the Cal.com Companion App architecture by introducing path aliases and enhanced component patterns and implementation of expo-haptics, expo-image.

Key changes:

  • TypeScript path aliases for cleaner imports (@/components/*, @/hooks/*, etc.) - fully migrated across all files
  • Enhanced AppPressable with Reanimated animations (opacity + scale) and haptic feedback
  • Extracted shared logic from list item components into reusable hooks and parts
  • Migrated SvgImage component to use expo-image for better performance with caching

Dependencies added:

  • expo-haptics - for tactile feedback on interactions
  • expo-image - for better image performance (now utilized in SvgImage component)

Link to Devin run: https://app.devin.ai/sessions/ed07ff383c604233ab0f6d039524eef9
Requested by: Dhairyashil Shinde (@dhairyashiil)

  • Migrated ALL files to use path aliases (previously just configured, now fully applied)
  • Implemented expo-image in SvgImage.tsx with contentFit="contain" and transition={200} for smooth loading
  • Added path aliases to tsconfig.extension.json to fix extension typecheck errors

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - companion app internal changes only.
  • I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

  1. Path aliases: Verify Metro bundler resolves all @/ imports correctly - app should build and run without module resolution errors
  2. Extension build: Run bun typecheck:all to verify both main app and extension typechecks pass
  3. expo-image: Test image loading in components using SvgImage - should see smooth 200ms transition on load
  4. AppPressable: Test press interactions on any pressable element - should see subtle opacity/scale animation and feel haptic feedback on iOS
  5. Component functionality: Verify all list item actions still work (confirm/reject bookings, copy links, context menus on iOS)

Important notes:

  • Haptic feedback is enabled by default - can be disabled via enableHaptics={false} prop

Checklist

  • I have read the contributing guide
  • My code follows the style guidelines of this project
  • I have commented my code, particularly in hard-to-understand areas
  • I have checked if my changes generate no new warnings

Human Review Checklist

  • Verify path aliases resolve correctly in Metro bundler (all @/ imports)
  • Verify extension build works with path aliases (bun typecheck:extension)
  • Verify expo-image works correctly with contentFit and transition props in SvgImage
  • Test AppPressable animation feels appropriate on device
  • Confirm haptic feedback default is acceptable for all use cases
  • Review iOS-specific components still work with SwiftUI ContextMenu
  • Verify no functionality lost in component extraction

@dhairyashiil
react compiler
65eaf72
@dhairyashiil
remove compilation mode 'all', it will use infer by default
5b37789
@dhairyashiil
feat(companion): add theme tokens, path aliases, and component improv…
662cbde 
…ements

- Extend tailwind.config.js with Cal.com brand color tokens (cal.text, cal.bg, cal.border, cal.accent, cal.brand)
- Create theme/colors.ts for JS usage where Tailwind classes can't be used
- Configure path aliases in tsconfig.json (@/components, @/hooks, @/utils, etc.)
- Add expo-image and expo-haptics dependencies
- Enhance AppPressable with Reanimated animations (opacity + scale) and haptic feedback
- Extract shared logic from BookingListItem into useBookingListItemData hook and BookingListItemParts
- Extract shared logic from EventTypeListItem into useEventTypeListItemData hook and EventTypeListItemParts
- Extract shared logic from AvailabilityListItem into AvailabilityListItemParts
- Update all list item components to use new theme tokens instead of hardcoded hex values
@devin-ai-integration
Copy link
Contributor

devin-ai-integration bot commented Dec 27, 2025

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Base automatically changed from feat/companion-react-compiler to main December 27, 2025 19:06
@vercel
Copy link

vercel bot commented Dec 28, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

3 Skipped Deployments
Project Deployment Review Updated (UTC)
cal Ignored Ignored Dec 28, 2025 8:58am
cal-companion Ignored Ignored Preview Dec 28, 2025 8:58am
cal-eu Ignored Ignored Dec 28, 2025 8:58am

@dhairyashiil
feat(companion): migrate to path aliases and expo-image
36cc0bf 
- Remove theme/colors.ts and theme/index.ts (defer dark mode to future PR)
- Replace colors import with hardcoded hex values in components
- Migrate all files to use path aliases (@/components/*, @/hooks/*, etc.)
- Migrate SvgImage to use expo-image for better performance
- Update tsconfig.json to remove @/theme/* alias
@dhairyashiil
fix(companion): add path aliases to extension tsconfig
d2db259 
Add baseUrl and paths configuration to tsconfig.extension.json to support
path aliases in shared types used by the extension build.
@dhairyashiil dhairyashiil changed the title feat(companion): add theme tokens, path aliases, and component improvements feat(companion): component improvements, migrate to path aliases, expo-haptics, expo-image Dec 28, 2025
@dhairyashiil dhairyashiil marked this pull request as ready for review December 28, 2025 09:07
@dhairyashiil dhairyashiil requested a review from a team as a code owner December 28, 2025 09:07
@graphite-app graphite-app bot added the community Created by Linear-GitHub Sync label Dec 28, 2025
@volnei volnei merged commit 9203cb2 into main Dec 28, 2025
41 checks passed
@volnei volnei deleted the devin/companion-app-improvements-1766861062 branch December 28, 2025 11:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@volnei volnei volnei approved these changes

Assignees

No one assigned

Labels

community Created by Linear-GitHub Sync ready-for-e2e size/XXL

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@dhairyashiil @volnei