35 Commits

Author SHA1 Message Date
Pasquale Vitiello e937becd2d feat: migrate TanStack Table to v9 (#848)
* feat: migrate TanStack Table to v9

* perf: optimize TanStack Table state updates

* fix: restore team members table selection updates

Subscribe only re-renders when its child is a function, so static JSX left checkboxes stale until a sort. Match the members table: subscribe with a render function and toggle rows on click.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-08 11:03:58 +02:00
Pasquale Vitiello 8d19424670 feat(scroll-area): make overscroll contain opt-in (#829)
* feat(scroll-area): make overscroll contain opt-in

Stop applying overscroll-contain by default and expose overscrollContain
so nested surfaces can opt in without forcing it on every ScrollArea.

Co-authored-by: Cursor <cursoragent@cursor.com>

* reg build

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-31 11:35:57 +02:00
Pasquale Vitiello 6422daaca0 feat: upgrade React DayPicker to v10 (#825)
* feat: upgrade React DayPicker to v10

Migrate coss packages, examples, registry output, and documentation to the preferred scoped package while keeping the origin app on v9.

Co-authored-by: Cursor <cursoragent@cursor.com>

* fix: emove redundant transition

* docs: generalize DayPicker version reference

Co-authored-by: Cursor <cursoragent@cursor.com>

* update docs

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-26 22:41:17 +05:30
Pasquale Vitiello bd3777acfb feat: update fonts (#810)
* initial commit

* fix coss logo

* update card + build reg

* mc

* mc

* format

* mc
2026-07-13 17:02:28 +02:00
Pasquale Vitiello a415801f76 chore: grow sidebar on larger breakpoint (#804) 2026-06-22 14:18:33 +02:00
Pasquale Vitiello 4dff57e31b chore: update @base-ui/react to version 1.5.0 (#796) 2026-06-04 14:47:31 +02:00
Pasquale Vitiello c3ee10182b fix(examples): remove scrollarea hack (#794) 2026-05-29 19:06:05 +02:00
Pasquale Vitiello 1e454bac20 feat(scroll-area): add fill prop to stretch content wrapper (#792)
* feat(scroll-area): add fill prop to stretch content wrapper

Adds an opt-out fill prop (default true) that applies size-full to
ScrollArea.Content so flex layouts like sidebar footers can use the full
viewport height. Pass fill={false} for content-sized scroll areas.

Co-authored-by: Cursor <cursoragent@cursor.com>

* refactor(scroll-area): default fill to false and opt in sidebars

fill now defaults to false so content-sized scroll areas keep correct
overflow behavior. SidebarContent passes fill for mt-auto footer layouts.
Adds changelog, docs, and agent skill updates.

Co-authored-by: Cursor <cursoragent@cursor.com>

* chore: sync sidebar registry after pre-push hook

Co-authored-by: Cursor <cursoragent@cursor.com>

* refactor(sidebar): show ScrollArea scrollbars on overflow

Remove forced scrollbar hiding from SidebarContent; rely on the default
hover/scroll-visible scrollbar behavior instead.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-29 14:44:48 +02:00
Pasquale Vitiello e8ec1536b2 feat: prototype bookings (#787)
* add more list items

* several improvements

* mc

* add today / next

* update style

* mc

* remove unneeded badge

* mc

* format booking date

* add timezone popover

* tz popover

* inline badges

* add missing badge

* mc

* mc

* fix inconsistencies

* replace thumb icon

* replace data

* Update apps/examples/calcom/app/(dashboard)/booking/booking-actions.tsx

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

---------

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-05-26 10:32:29 +02:00
Pasquale Vitiello 839aa2275c feat(examples): add members table (#785)
* initial commit

* add col resize

* wip

* mc

* fix scrollarea on col resize

* fix table

* gradient fix

* fix clickable row

* mobile behaviour

* improve checkbox

* fix

* adjust scrollbar pos

* fix truncated buttons

* mc

* mc

* clickable badges

* truncate 2nd col

* ensure that badges are truncated

* fix combobox

* mc

* format
2026-05-21 08:45:48 +01:00
Pasquale Vitiello 2a3b898399 feat(examples): implement the drawer on mobile (#778)
* implement the drawer on obile

* refactor: remove unused media query hook and simplify mobile drawer rendering

* user menu to frawer on moblie

* create an adaptive menu component
2026-05-11 08:53:33 +01:00
Pasquale Vitiello 007dfc48fc chore: patch Next/React, migrate themes provider, fix GitHub link hydration (#773) 2026-05-08 10:09:24 +01:00
Pasquale Vitiello 6e1a97a1a0 style: improve list dnd (#767) 2026-04-30 18:48:07 +02:00
Pasquale Vitiello 0f0bef8bf5 style: improve example sidebar (#766)
* styling improvements

* use drawer + responsive improvements

* mc

* mc

* add overview btn

* mc

* remove the team avatar

* minor improvements

* mc

* new badge

* fix

* mc
2026-04-29 08:48:03 +01:00
Pasquale Vitiello b318f235f5 feat: add roles prototype (#764)
* roles prototype

* format
2026-04-23 13:16:17 +01:00
Pasquale Vitiello ac8cb6b243 feat: add dsync prototype (#758)
* prepare the new page

* page content

* wip

* mc

* mc

* mc

* mc

* implement create team dialog
2026-04-22 08:42:53 +01:00
Pasquale Vitiello 06da51fd0a refactor: Form and Fieldset dropping default layout; explicit className on consumers (#757)
* refactor(form): drop default layout; explicit className on consumers

* fieldset refactoring

* mc

* fix dialogs

* minor tweaks
2026-04-17 09:54:57 +01:00
Pasquale Vitiello 9d17b6d9fe feat: delegation credentials prototype (#755)
* delegation credentials implementation

* mc
2026-04-16 08:53:37 +01:00
Pasquale Vitiello bc5fd5ca22 feat(examples): add attributes page prototype (#754)
* add attributes page prototype

* info tooltip

* mc
2026-04-15 12:26:18 +01:00
Pasquale Vitiello f4ef088cae feat: improve table to support card frame (#741)
* table wip

* build reg

* mc

* build reg

* wip

* build reg

* mc

* mc

* mc

* mc

* col sizing improvements

* make the entire row clickable

* mc

* improvements

* update card

* improve table support

* improve filtering system

* mc

* add calendar filter

* mc

* mc

* fix ts errors

* mc

* split chip components

* more splitting

* mc

* mc

* mc

* mc

* rename table variant to card

* color-mix hover/footer

* update docs

* fix

* mc

* improve table footer padding

* restore popover

* checkbox improvements

* mc

* fix input group

* fix registry

* mc

* build registry
2026-04-14 08:37:13 +01:00
Pasquale Vitiello f285280759 feat(calcom): add settings page prototypes & refactor titles to AppHeader layout (#693)
* create some webhook pages

* mc

* wip

* wip

* add filtering system for webhooks

* feat(calcom): add nativeButton prop to CollapsibleTrigger in new webhook form

* mc

* mc

* card component improvements

* format

* feat(calcom): add push-notifications settings page prototype

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* refactor: use SettingsToggle with Switch instead of Button

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* refactor: use Switch directly inside Card/CardPanel instead of SettingsToggle wrapper

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* refactor

* feat: add toast notifications on push notification toggle

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* refactor: extract client logic into separate component, keep page.tsx as server component

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* update toast position

* feat(calcom): add features settings page prototype

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* fix: use correct ToggleGroup value type (array) and remove invalid toggleMultiple prop

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* mc

* feat(calcom): add billing settings page prototype

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* add billing page

* refactor: update layout of Features and Push Notifications pages for improved styling

* feat(calcom): add organizations profile settings page prototype

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* refactor(calcom): update org profile page to match production Cal.com fields

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* refactor(calcom): match org profile page to production screenshot

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* refactor(calcom): align org profile page with my-account/profile patterns

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* refactor(calcom): extract client logic from page.tsx into separate components

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* refactor(calcom): keep only CardPanel content as client components

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* mc

* refactor(calcom): align org profile layout with my-account/profile pattern

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* feat(calcom): add no-permissions prototype for org profile page

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* add no permission page

* fix(calcom): remove duplicate ListItemTitleLink export

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* refactor(calcom): move org profile to /settings/teams/[id]/profile and add team nav links

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* add conferencing page

* add conferencing page

* add appearance page

* add password page

* format

* add impersonation page

* create 2fa page

* improve empty component spacing

* feat(calcom): add compliance settings page prototype

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* improve compliance docs section

* simplify the structure

* feat(calcom): add calendars settings page with CardFrame structure

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* feat(calcom): add calendars empty state view

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* feat(calcom): add calendars demo page with CardFrame structure

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* feat(calcom): add calendars demo page with fieldset, selects, and footer

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* add calendars page

* add alert dialog + route changes

* create oauth page

* feat(calcom): add OAuth client creation dialog prototype

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* implement new dialog

* refactor(calcom): use detached triggers for OAuth dialog and match webhooks empty pattern

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* refactor(calcom): use avatar component pattern for logo upload in OAuth dialog

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* create 2 step dialog

* feat(calcom): add OAuth clients list with items matching booking/past pattern

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* mc

* feat(calcom): add edit OAuth client dialog with button trigger on list items

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* refactor list item

* mc

* further changes

* fix alert dialog

* mc

* mc

* fix alert dialog

* mc

* mc

* refactor list items

* mc

* feat(calcom): add API keys page with list, create/edit dialogs, and revoke confirmation

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* various changes

* fix(calcom): update API keys list badge to show active/expired status, description shows expiration info

Co-Authored-By: pasquale@cal.com <pasqualevitiello@gmail.com>

* improve settings sidebar

* further improvements

* improve appearance page

* various improvements

* complete appearance page.

* add team billing

* build registry

* feat(calcom): enhance billing page with date range selection and calendar integration

* mc

* mc

* mc

* fix sidebar

* rework page title and descriptions

* refactor: move page titles/descriptions to AppHeader for all remaining settings pages

Co-Authored-By: unknown <>

* refactor: use SettingsToggle for push notifications and impersonation pages

Co-Authored-By: unknown <>

* various adjustments

* refactor: rework webhooks demo to use CardFrame/CardFrameHeader per user with ListItems

Co-Authored-By: unknown <>

* refactor: match webhooks empty state to conferencing pattern with dashed border

Co-Authored-By: unknown <>

* mc

* refactor: remove Card wrapping from OAuth empty state to match conferencing pattern

Co-Authored-By: unknown <>

* refactor: remove Card wrapping from API keys empty state to match conferencing pattern

Co-Authored-By: unknown <>

* mc

* refactor: put calendar selects side-by-side to match team settings pattern

Co-Authored-By: unknown <>

* use list item throughout

* refactor: extract DangerZoneSection reusable component from profile pages

Co-Authored-By: unknown <>

* refactor: rename DangerZoneSection to DangerZone

Co-Authored-By: unknown <>

* refactor: extract FieldGrid reusable component for responsive form layouts

Co-Authored-By: unknown <>

* refactor: use FieldGrid in more settings forms

Co-Authored-By: unknown <>

* feat(calcom): add admin settings sidebar links

Co-Authored-By: unknown <>

* refactor: move admin sidebar section after organization links

Co-Authored-By: unknown <>

* feat(calcom): add admin flags page with expandable frame sections

Co-Authored-By: unknown <>

* fix(calcom): use lowercase admin flag group labels

Co-Authored-By: unknown <>

* mc

* feat(calcom): prototype assign-users sheet for flags

Co-Authored-By: unknown <>

* refactor(calcom): use switches in assign-users sheet

Co-Authored-By: unknown <>

* refactor(calcom): add tooltip to flag switch

Co-Authored-By: unknown <>

* feat(calcom): add load more button to assign-users sheet

Co-Authored-By: unknown <>

* feat(calcom): add admin billing page

Co-Authored-By: unknown <>

* fix(calcom): match admin billing page structure with billing page

Co-Authored-By: unknown <>

* mc

* mc

* feat(calcom): add admin impersonation page

Co-Authored-By: unknown <>

* mc

* mc

* feat(calcom): add admin OAuth clients page with status groups

Co-Authored-By: unknown <>

* fix(calcom): match admin oauth list items with developer/oauth pattern and add empty states

Co-Authored-By: unknown <>

* mc

* refactor(ui): clean up ListItem and remove unused ListItemDescription component

* mc

* mc

* improve admin billing

* implement apps prototype

* mc

* mc

* mc

* remove unused OAuthClientSubmittedDialog component and update ListItem styles for improved layout

* remove unneeded comments

* improve compliance layout

* update the settings toggle to reflect cal changes

* re-format

* re-format

* refactor: align list-item.tsx with cal's coss-ui version

Co-Authored-By: pasquale <pasqualevitiello@gmail.com>

* fix: revert ItemLabel import to relative path and widen SortableListeners type

Co-Authored-By: pasquale <pasqualevitiello@gmail.com>

* fix: widen SortableListeners to accept Function type from dnd-kit

Co-Authored-By: pasquale <pasqualevitiello@gmail.com>

* fix: revert SortableListeners to match cal's exact type signature

Co-Authored-By: pasquale <pasqualevitiello@gmail.com>

* fix: restore SyntheticListenerMap import from dnd-kit (coss has dnd-kit installed)

Co-Authored-By: pasquale <pasqualevitiello@gmail.com>

* build registry

* update toggle

* fix toggles

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-04-01 10:57:54 +02:00
Pasquale Vitiello 1deaeb780e chore: bump next to 16.1.7 (#739) 2026-03-30 09:18:14 +01:00
Pasquale Vitiello 9302c06311 refactor: align biome settings with calcom (#718)
* update biome config + resolve issues

* improve the ui:sync command to run organizeImports on packages

* reformat

* build registry

* exclude base-ui stuff

* fix useExportsLast

* further improvements

* silence errors

* exclude examples app

* update biome + reformat

* format all the other files

* include examples app

* improve copyable-field

* remove unwanted comment

* remove a few unneeded biome comments

* avoid nested ternary

* refactored some shared components

* upgrade base ui to 1.2.0

* fix
2026-03-11 23:09:19 +00:00
Pasquale Vitiello ba807fcacb feat(ui): add Base UI utils re-exports and document usage (#705)
* add base ui utils re-export

* refactor(ui): update base-ui provider files to use .ts extension and remove unused .tsx files

* fix

* rebuild registry
2026-03-02 10:57:14 +01:00
Pasquale Vitiello 7f99f9b408 feat: add useMediaQuery hook (#708)
* feat: add useMediaQuery hook

* improve the docs

* various improvements
2026-03-02 09:45:17 +00:00
Pasquale Vitiello b92691df9c refactor(calcom): update list item component (#680)
* refactor(calcom): update ListItemTitle to use ListItemTitleLink for improved link handlingpplication.

* refactor(list-item): remove unused ListItemTitleLink export
2026-02-13 12:02:28 +00:00
Pasquale Vitiello 11b6a6e10c feat: card component improvements (#682)
* feat: improve card component with lists

* format
2026-02-13 09:56:19 +00:00
Pasquale Vitiello 6849044e7f feat: a select like button (#672)
* feat(ui): introduce SelectButton for a select-like appearance in ComboboxTrigger, MenuTrigger, etc

* mc

* rebuild registry
2026-02-13 09:53:55 +00:00
devin-ai-integration[bot] eca5fddc10 feat(calcom): reorganize app structure for settings layout (#654)
* feat(calcom): reorganize app structure for multiple layouts

- Move root layout to only contain providers (no sidebar)
- Create (dashboard) route group with dashboard layout for main pages
- Move existing pages (event-types, booking, home) into (dashboard) group
- Create settings layout with dedicated SettingsSidebar component
- Add /settings/my-account/general page with draft content
- Add settings navigation data for sidebar items

This reorganization allows for different layouts between the main
dashboard (with AppSidebar) and settings pages (with SettingsSidebar).

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): restructure settings to (settings)/settings for consistency

Move settings layout from settings/(settings-layout) to (settings)/settings
to be consistent with the (dashboard) route group pattern.

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): use Sidebar component for settings sidebar

Update SettingsSidebar to use the same Sidebar component primitives
as the dashboard (SidebarProvider, Sidebar, SidebarHeader, SidebarContent, etc.)
instead of a custom implementation.

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): rebuild settings sidebar with all sections and avatars

- Add all settings sections: user account, security, billing, developer, organization
- Add avatar support for user and organization sections
- Add external link icon for items that open in new tab
- Use same Avatar component as dashboard for consistency

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* sidebar improvements

* fix(calcom): correct avatar URLs for Luke Tracy and Cal.com org

- Luke Tracy uses Unsplash image
- Cal.com org uses Twitter profile image

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* simplify SidebarMenuItem in settings sidebar

* refactor(calcom): use SidebarGroup and SidebarGroupLabel for settings sidebar

Properly structure the settings sidebar using SidebarGroup for each
section and SidebarGroupLabel for section headers with avatar/icon.

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* various improvements

* sidebar improvements

* mc

* mc

* feat(calcom): add content to general settings page with Frame component

- Add header Frame with title and description
- Add form Frame with Language, Timezone, Time format, Start of week selects
- Add Schedule timezone change button
- Add toggle Frames for Dynamic group links, Search engine indexing,
  Monthly digest email, and Prevent impersonation settings
- Use coss UI components: Frame, Select, Switch, Button, Field

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): sort CSS classes for lint compliance

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): remove unsupported placeholder prop from SelectValue

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): use FrameHeader and FrameFooter as direct children of Frame

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* list dividers improvements

* mc

* refactor: card component + new particles + dialog, alert dialog and frame improvements

* chore: rename particles to reflect the new registry order

* chore: improve registry

* improve card usage + command

* chore: improve general settings

* chore: format

* feat(calcom): add responsive sidebar behavior for settings layout

- Add SettingsSheet component with full settings navigation in a Sheet
- Add SettingsMobileHeader for mobile view with menu + back buttons
- Update SettingsSidebar to show only menu + back buttons between md-lg
- Update settings layout to include mobile header with proper padding

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): fix TypeScript type for SettingsSheet children prop

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* style: adjust sidebar padding and alignment

* mc

* mc

* mc

* mc

* mc

* simplify nav main

* mc

* mc

* mc

* mc

* refactor: reorganize components

* refactor(calcom): extract shared components and add profile page

- Extract SettingsNavSection component to reduce duplication between sheet and sidebar
- Extract SettingsToggle to reusable component in components/settings/
- Fix redirect inconsistency: both /settings and /settings/my-account now redirect to /settings/my-account/general
- Make onNavigate prop more explicit by using onClick handler with useCallback
- Add profile settings page with avatar upload, username, email management, and danger zone

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): fix profile page build error by using Label instead of Field

The Field component from Base UI causes SSR pre-rendering errors during build.
Using Label component directly with div wrappers avoids the issue while
maintaining the same visual appearance.

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* refactor: improve ui components + color ajustments + calcom app improvements (wip)

* refactor: replace SingleItem component with ResourceItem + mc

* chore: rename label vars

* refactor(list-item): remove DnD features and add ListItemLabel component

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(list-item): extract ItemLabel to separate file and update AGENTS.md

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(item-label): update hover styles and restructure ListItem component layout

* mc

* mc

* refactor(calcom): use DragOverlay for dndkit sortable implementation

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): add data-overlay attribute to ResourceItem for drag overlay

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): add --translate-y CSS variable for visual reordering during drag

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* refactor(calcom): clean up imports and adjust className formatting in ResourceItem

* refactor(calcom): update drag state styles in ResourceItem for improved visual feedback

* refactor(calcom): streamline className in ResourceItem for consistency and clarity

* refactor(calcom): add dropAnimation sideEffects to prevent handle flash on drop

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): enhance transition effects and drag state handling in ItemLabel and ResourceItem components

* refactor(calcom): add data-dragging attribute to drag overlay item

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): remove data-dragging from overlay item on drop animation start

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* revert: restore d82c6b15 changes, remove data-dragging overlay modifications

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* refactor(calcom): update styles in ResourceItem and remove restrictToParentElement modifier from SortableList for improved drag-and-drop behavior

* refactor(calcom): enhance drag-and-drop styles in ItemLabel and ResourceItem components for improved visual feedback

* style: add backdrop blur effect

* remove custom announcements

* use default announcements

* refactor(calcom): update skeleton structure to match current layout

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): extract reusable BookingsListSkeleton components

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): add CardFrame and CardFrameHeader to skeleton components

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): update skeleton components for improved layout and remove unnecessary separators

* refactor(calcom): adjust Skeleton component classes for consistent styling

* refactor(calcom): consolidate BookingsListSkeleton components

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore: restore mock data

* remove backdrop blur

* fix empty border

* further improvements

* feat(calcom): add dark mode toggle to debug popover

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore(calcom): add next-themes dependency for dark mode toggle

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): fix dark mode toggle hydration issue with mounted state

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): use local state for dark mode toggle to fix controlled switch

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* revert(calcom): remove dark mode toggle from debug popover

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* refactor: event types as list items

* build registry

* refactor(resource-item): simplify className structure for improved readability and maintainability

* refactor(calcom): rename drag data attributes for consistency

- data-drag-ended -> data-drag-release
- data-overlay -> data-drag-overlay
- data-dragging -> data-drag-on
- data-dragged -> data-drag-ghost
- Remove duration and easing from dropAnimation (no longer needed)

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* refactor(calcom): move Card drag classes into ResourceItem

- Move ResourceItem-affecting classes from Card into ResourceItem using in-[:has(...)] selector
- Card now only has its own visual styles (border, bg, shadow, before)
- ResourceItem is now self-contained for drag state styling

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* Revert "refactor(calcom): move Card drag classes into ResourceItem"

This reverts commit 7773cdc2ce.

* mc

* mc

* refactor(calcom): merge resource-item into list-item with sortable prop

- Unified ListItem component with optional sortable prop for drag functionality
- When sortable=true: includes drag classes, data-drag-* attributes, ItemLabel
- When sortable=false: uses simpler static classes
- Updated all data-slot references from resource-item to list-item
- Deleted resource-item.tsx (merged into list-item.tsx)

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): add SortableListItem wrapper component

- Created SortableListItem that wraps ListItem with sortable=true
- Cleaner API: no need to pass sortable prop explicitly
- Updated event-types-list.tsx to use SortableListItem

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): rename list-item to list and add SortableList component

- Renamed list-item.tsx to list.tsx
- Changed export pattern to export all at end of file
- Added SortableList component using useRender from Base UI
- SortableList applies drag-related classes and renders as Card via render prop
- Updated event-types-list.tsx to use new SortableList component

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): export sortable classes instead of SortableList component

- Renamed list.tsx back to list-item.tsx
- Removed SortableList component and useRender/mergeProps imports
- Exported sortableListClasses constant for use on Card
- Updated event-types-list.tsx to use sortableListClasses on Card

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): clean up dnd implementation

- Remove unused _projectedIndex, overId state, and handleDragOver
- Remove unused listeners/attributes props from ListItemDragHandle
- Add restrictToVerticalAxis modifier to restrict dragging to vertical axis

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* fix(calcom): remove starting:rounded-2xl to prevent unwanted transition on page load

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): make starting:rounded-2xl conditional on hasDragged

- Add hasDragged state to sortable.tsx that becomes true on first drag
- Pass hasDragged through context and render props
- Add data-has-dragged attribute to list items
- Make starting:rounded-2xl and border-radius transition conditional on data-has-dragged
- This prevents unwanted radius transition on page load while preserving it for reorder animations

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* fix(calcom): add font-synthesis: none to fix Safari semibold rendering

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* Revert "fix(calcom): add font-synthesis: none to fix Safari semibold rendering"

This reverts commit ad92c32dc9.

* mc

* improve overlay highlights

* mc

* display the hidden badge at the end

* feat(calcom): replace bookings collapsible with single link and tab navigation

- Changed Bookings sidebar item from collapsible submenu to single link to /booking/upcoming
- Added BookingsNav component with tab-style navigation for booking pages
- Updated all booking pages to include the tab navigation
- Unified page titles to 'Bookings' with consistent description across all booking pages

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): fix sidebar active state for all booking pages

- Added matchPath property to NavItem interface
- Set matchPath to /booking for Bookings nav item
- Updated NavItemSimple to use matchPath for active state matching

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* bookings wip

* sidebar fix

* fix card

* fix cal sans issue

* restore white bg

* add options to some components

* various improvements

* test linear-style filters

* format

* booking filters improvements

* mc

* feat(calcom): integrate bookings filter with dynamic Group components

- Add icon property to FilterCategory for menu items
- Add avatar property to FilterOption for member filters
- Add ActiveFilter interface to track selected filters
- Update FilterMenu to accept activeFilters and onFilterChange props
- Add FilterGroup component to render dynamic filter groups
- Connect combobox selections to display Group components
- Add edit functionality to modify existing filters
- Add Clear button to remove all filters
- Show avatars in combobox items and filter groups for member filters

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): add null checks for selectedOptions array access

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): add filtering functionality to bookings list

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* feat(calcom): consolidate filter button and improve filter UI layout

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): simplify filter UI - remove actual filtering functionality

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): prevent button flash when transitioning from menu to combobox

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): simplify filter architecture - menu stays simple, Group shows combobox

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): update PendingFilterGroup to show dynamic selections and fix X button

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): use ref for cancel flag to fix X button race condition

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* clean up

* remove icons

* refactor(calcom): replace hardcoded filter data with mock bookings data

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): implement URL-based filter state management

- Add activeFilters query param to URL for filter persistence
- Show ActiveFilter component when filter is selected from menu
- Auto-open combobox when filter is added
- Display 'Select' when no selection, name when 1 selected, 'n selected' for multiple
- Use Cal.com-compatible filter IDs (eventTypeId, userIds, etc.)

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): simplify filter state to use local React state

- Remove URL query string management for activeFilters
- Use useState instead of URL-based state
- Keep all filter functionality (add, update, remove, clear)
- Simpler implementation without URL encoding complexity

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): pass items prop to Combobox root for proper option rendering

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): remove ActiveFilter when combobox closes with no selection

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* refactor(ui): extract ComboboxChipsInput from ComboboxInput

- Create new ComboboxChipsInput component for use inside ComboboxChips
- Remove conditional multiple/single mode logic from ComboboxInput
- Update data-slot to 'combobox-chips-input' for the new component
- Add data-slot='combobox-input' to ComboboxInput wrapper div
- Update CSS selectors to target data-slot='input' instead of 'combobox-input'
- Update particles to use ComboboxChipsInput: p-combobox-9, p-combobox-12, p-combobox-14, p-field-9
- Update combobox.mdx documentation with new component API

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore(ui): sync ComboboxChipsInput to packages/ui

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(ui): restore data-slot='combobox-input' on inner input in ComboboxInput

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore(ui): sync ComboboxInput data-slot fix to packages/ui

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(ui): update search-field.tsx to use ComboboxChipsInput

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* docs(ui): move ComboboxChipsInput section after ComboboxChips

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix scrollarea

* feat(calcom): display avatars for members in filter combobox

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* feat(calcom): add avatar URLs to members and add more bookings with different hosts

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): display grouped avatars in combobox trigger for members

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* Revert "feat(calcom): display grouped avatars in combobox trigger for members"

This reverts commit 0c31fd4a45.

* feat(calcom): show first selected item with +n badge in combobox trigger

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): maintain selection order and show selected items first on open

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* test(calcom): remove avatar from Keith to test fallback initials

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* fix(calcom): adjust AvatarFallback text size for better visibility

* feat(calcom): create MemberAvatar component for improved avatar handling in bookings filters

* feat(calcom): add saved filters combobox with My bookings option

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): add search input to saved filters combobox

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* feat(calcom): add edit menu for selected saved filters

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): add 'All bookings' option to deselect saved filter

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): add separator below 'All bookings' option

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(calcom): use Group with X button for saved filter deselection

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): move edit button outside Group component

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): hide Rename and Delete for default preset instead of disabling

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* add tabbed nav

* mc

* feat(calcom): add consistent filtering system to all bookings pages

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): remove AppHeader from booking pages and adjust layout for Empty states

* mc

* fix(calcom): convert bookings pages to Server Components for build compatibility

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(calcom): extract BookingsEmpty client components for skeleton loading

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(calcom): add loading.tsx files to provide Suspense boundary for useSearchParams

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* mc

* mc

* mc

* feat(ui): add p-group-23 particle with filter combobox multi-select

- Group with filter label, combobox multi-select, and remove button
- Based on ActiveFilterComponent structure from bookings-filters.tsx
- Demonstrates avatar, badge, button, combobox, and group components

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* mc

* mc

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: pasquale@cal.com <pasquale@cal.com>
Co-authored-by: pasqualevitiello <pasqualevitiello@gmail.com>
2026-02-05 09:51:12 +00:00
devin-ai-integration[bot] 7be8c63efe feat(examples/calcom): add dndkit drag-and-drop sorting for event types and bookings (#639)
* feat(examples/calcom): add dndkit and drag handle for event types

- Install @dnd-kit/core, @dnd-kit/sortable, and @dnd-kit/utilities
- Add ListItemDragHandle component that appears on hover
- Add drag handle to each event type in the list

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore: improve handle appearance

* feat(examples/calcom): implement dnd sorting for event types

- Add DndContext and SortableContext wrappers for drag-and-drop
- Create SortableEventTypeItem component with useSortable hook
- Update ListItemDragHandle to accept dndkit listeners and attributes
- Handle drag end event to reorder items using arrayMove
- Follow dndkit best practices with sensors and collision detection

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix: sort JSX attributes in event-type-actions

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix: use DraggableAttributes type for dndkit attributes

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor: extract reusable SortableList and SortableItem components

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(examples/calcom): add sortable functionality to bookings/past page

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(examples/calcom): restrict drag to y-axis only

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(examples/calcom): enable whole-area dragging with activation constraint

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(examples/calcom): fix hydration error and revert to drag handle only

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* revert: restore state from 942dc9de (before whole-area dragging)

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(examples/calcom): eliminate wrapper div in SortableItem

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor(examples/calcom): use CSS variables for sortable styles

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(examples/calcom): add data-dragging=false to non-dragged items

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* styling improvements

* rebuild registry

* separator improvements

* fix hydration error

* feat(examples/calcom): add drag overlay and remove axis constraint

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* Revert "feat(examples/calcom): add drag overlay and remove axis constraint"

This reverts commit 20c8c85ea6.

* feat(examples/calcom): add restrictToParentElement modifier

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(examples/calcom): add data-over-position attribute for first/last detection

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* styling improvements

* feat(examples/calcom): add data-dragging-position attribute with first/middle/last for all items

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(examples/calcom): update data-dragging-position during drag based on projected order

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* revert: restore to styling improvements state (7ec11e29)

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* styling updates

* refactor(examples/calcom): remove sortableOverPosition and data-over-position redundancies

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(examples/calcom): use rectSortingStrategy for varying item heights

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(examples/calcom): add DragOverlay for proper varying heights support

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* revert: restore to f2ad92cb (before DragOverlay and rectSortingStrategy)

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(examples/calcom): enable whole-area dragging with activation constraint

- Add sortableListeners prop to ListItem component
- Apply listeners to ListItem div for whole-area pointer dragging
- Add distance activation constraint (8px) to PointerSensor
- Preserve keyboard accessibility via drag handle with attributes and listeners
- Quick clicks still trigger links, dragging (8px+ movement) initiates drag

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* Revert "feat(examples/calcom): enable whole-area dragging with activation constraint"

This reverts commit 8647a92032.

* wip: remove separators and use borders with negative px margin

* feat(examples/calcom): enable whole-area dragging with activation constraint

- Add sortableListeners prop to ListItem component
- Apply listeners to ListItem div for whole-area pointer dragging
- Add distance activation constraint (8px) to PointerSensor
- Preserve keyboard accessibility via drag handle with attributes and listeners
- Quick clicks still trigger links, dragging (8px+ movement) initiates drag

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* prevent unwanted interaction on drag

* minor improvements

* mc

* mc

* styling improvements

* styling improvements

* mc

* no radius

* chore: remove unneeded const

* refactor: improve overall styling on drag

* style: further improvements

* style: adjust z-index for list item component

* feat(examples/calcom): add accessibility announcements for screen readers

- Add announcements prop to DndContext with position-aware messages
- Screen readers now announce: pick up, move, drop, and cancel events
- Remove unused projectedIds from context (replaced with projectedIndex for announcements)
- Follows dnd-kit accessibility guide recommendations

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(examples/calcom): add toast notifications with undo for reorder actions

- Show success toast when items are reordered
- Add Undo button to revert to previous order
- Implement for both event-types-list and bookings-list
- Uses optimistic UI pattern with ability to undo

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(examples/calcom): add TouchSensor for touch device drag support

- Add TouchSensor with 250ms delay and 5px tolerance for touch devices
- Long-press to drag pattern prevents accidental drags while scrolling
- PointerSensor (distance: 4px) remains for mouse/trackpad for immediate response
- KeyboardSensor unchanged for accessibility

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(examples/calcom): use MouseSensor instead of PointerSensor for touch support

PointerSensor handles both mouse and touch events via unified pointer events,
which was capturing touch before TouchSensor could activate. MouseSensor only
handles mouse events, allowing TouchSensor to properly handle touch with its
delay-based activation.

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix: toast

* fix(examples/calcom): close previous toast on new reorder, add undo confirmation

- Close existing reorder toast when a new reorder happens (only last action can be undone)
- Show 'Order reverted' info toast when undo is clicked
- Prevents state confusion from multiple undo actions

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(examples/calcom): also close info toast when new reorder toast appears

- Store info toast ID in currentToastIdRef so it gets closed on next reorder
- Ensures clean toast state when user performs multiple reorders

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* revert: restore multiple toasts behavior (remove auto-close logic)

- Remove auto-close of previous toasts on new reorder
- Keep undo confirmation toast ('Order reverted')
- User will handle disabling undo buttons on toasts behind

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(examples/calcom): implement LIFO undo for reorder toasts

- Only the most recent reorder action can be undone (sequential undo)
- Clicking undo on older toasts does nothing (enforces LIFO order)
- Uses a stack to track undo history
- Passes isReorderToast in toast data for potential visual styling

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat(ui/toast): disable action buttons on older reorder toasts

- Find the most recent reorder toast (with data.isReorderToast)
- Disable action buttons on all other reorder toasts
- Provides visual feedback that only the most recent action can be undone

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix(ui/toast): add disabled button logic to source file

The previous commit modified packages/ui/src/components/toast.tsx which
gets overwritten by sync-ui script. This adds the same changes to the
source file at apps/ui/registry/default/ui/toast.tsx

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* revert: restore auto-close toast behavior without confirmation

- Revert UI primitive changes (toast.tsx)
- Auto-close previous toast when new reorder happens
- Remove confirmation toast on undo
- Only one undo toast visible at a time

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore: rebuild registry

* minor improvements

* fix: separator test

* chore: improve as per cubic suggestions

* fix(sortable): optimize dependency array in useEffect for better performance

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: pasquale@cal.com <pasquale@cal.com>
Co-authored-by: pasqualevitiello <pasqualevitiello@gmail.com>
2026-01-19 12:02:07 +01:00
devin-ai-integration[bot] 1dac47b16c feat: use CalSans-SemiBold.woff2 for font-heading and add font-semibold class (#643)
* feat: use CalSans-SemiBold.woff2 for font-heading and add font-semibold class

- Replace CalSans-Regular.woff2 with CalSans-SemiBold.woff2 for font-heading
- Add font-semibold class to all components using font-heading in apps/examples, apps/ui, and apps/www
- Run registry:build and ui:sync to update packages

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* delete unneeded font

* feat: add weight: 600 to fontHeading configuration

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: pasquale@cal.com <pasquale@cal.com>
Co-authored-by: pasqualevitiello <pasqualevitiello@gmail.com>
2026-01-18 17:41:47 +01:00
devin-ai-integration[bot] 6c7dcfa923 refactor: restructure examples folder to support multiple apps (#636)
* refactor: restructure examples folder to support multiple apps

- Move current examples app to examples/calcom
- Update workspace configuration to include apps/examples/*
- Rename package from 'examples' to '@examples/calcom'

This allows the examples folder to contain multiple different example apps.

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: pasquale@cal.com <pasquale@cal.com>
Co-authored-by: pasqualevitiello <pasqualevitiello@gmail.com>
2026-01-15 13:43:19 +01:00
devin-ai-integration[bot] b36785d078 feat(examples): add Cal.com-compatible mock data for event types and bookings (#629)
* feat(examples): add Cal.com-compatible mock data for event types

- Create event-types-mock-data.ts with comprehensive mock data matching Cal.com's EventType structure
- Create event-types-types.ts with TypeScript type definitions
- Update event-types.tsx to use the new mock data structure
- Add various event type scenarios for UI stress testing:
  - Different durations (15, 30, 45, 60 min)
  - Hidden and visible events
  - Personal and team events
  - Recurring events
  - Paid events
  - Events with private links
  - Events with multiple hosts (round robin, collective)
  - Managed event types with children
  - Events with custom colors
  - Seated events (webinars)

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix: resolve TypeScript errors in mock data

- Use named user constants instead of array index access for type safety
- Add nullish coalescing for mockEventTypeGroups[0].profile access
- Remove unnecessary comments

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor: move mock event types data to lib directory

- Move event-types-mock-data.ts to lib/mock-event-types-data.ts
- Move event-types-types.ts to lib/event-types-types.ts
- Update imports in event-types.tsx to use @/lib path

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* mc

* mc

* feat: show all event types (personal + team) in the list

- Changed from getPersonalEventTypes() to mockEventTypes to display all event types
- This provides more content scenarios for UI stress testing

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat: add all Cal.com eventTypeSelect fields to mock data

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat: add visual indicators for Cal.com event type fields

- Add event type color indicator (colored left border)
- Add description text display
- Add scheduling type badge (Round Robin / Collective / Managed)
- Add requires confirmation badge
- Add seats badge
- Import new icons (ArmchairIcon, ClipboardCheckIcon, ShuffleIcon)

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat: improve event types page

* add group

* mc

* style: label tags

* style: restore labels as vertical lines

* style: use the default switch size

* styles: move event types search on the right side

* style: adjust Frame component margin in past bookings list

* feat: add Cal.com-compatible mock data for bookings page

- Create mock-bookings-data.ts with comprehensive booking data structure
- Match Cal.com's Booking model from get.handler.ts
- Include various booking scenarios: rescheduled, cancelled, paid, recurring, team events, no-shows, recorded sessions
- Update past bookings page to use new mock data
- Add visual indicators: status badges, scheduling type, payment, recurring

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* style: apply biome formatting fixes

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* style: make bookings page consistent with event-types

- Update menu trigger to outline variant with tooltip
- Make colored labels consistent (absolute positioning with bg-current)
- Make participants text bigger (text-sm instead of text-xs)
- Move feature badges under description
- Use outline variant for badges (Round Robin, Collective, Recurring, Paid)
- Add opacity-72 to badge icons for consistency

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore: various improvements

* chore: various improvements

* style: update bookings badges to match Cal.com exactly

- Remove No-show and Recorded badges (these are dropdown actions in Cal.com)
- Add line-through style to cancelled booking titles
- Move all badges below description (matching Cal.com pattern)
- Add Unconfirmed, Rescheduled, Rejected, Team name badges
- Use success variant for Paid badge

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore: prefix unused variables with underscore

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* style: mc

* feat: add stress-test booking with multiple badges

Add booking #13 with multiple simultaneous badges to stress-test UI:
- Unconfirmed (PENDING status)
- Rescheduled
- Team name (Sales Team)
- Paid (99)
- Recurring

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* style: update badge styling with icons and consistent variants

Status badges (warning variant with icons):
- Cancelled: CircleXIcon
- Unconfirmed/Pending: CircleDashedIcon
- Rescheduled: RefreshCcwIcon

Feature badges (outline variant with icons):
- Team name: UsersIcon
- Paid: BanknoteIcon
- Recurring: RepeatIcon (already had)

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* style: mc

* refactor: consolidate date/time sections with mobile-first approach

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor: extract reusable ListItem component and actions

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix: add use client directive back to booking/past page for TooltipProvider

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore: reorganize files

* style: add overflow-hidden to ListItem component for improved layout

* style: update ListItem title

* style: update button variant and adjust visibility for event path

* feat: implement client-side pagination for booking/past page

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor: extract BookingsList client component, make page.tsx a server component

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* refactor: extract EventTypesList client component, make page.tsx a server component

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* style: increase padding for Empty component in booking pages

* fix: add z-index to ListItemActions to ensure menu is clickable above title pseudo-element

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* style: mc

* fix: menu trigger

* chore: improve colors

* chore: add icons to menu items

* feat: enhance AppCommand with EmptyMedia and SearchIcon for no results state

* feat: add skeleton loading state to event types list

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* feat: add debug popover with loading state control

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* fix: prevent popover movement by stabilizing scrollbar gutter

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* Revert "fix: prevent popover movement by stabilizing scrollbar gutter"

This reverts commit 5e482c554b.

* chore: improve skeletons

* feat: add skeleton loading to all booking pages with debug controls

Co-Authored-By: pasquale@cal.com <pasquale@cal.com>

* chore: improve controls

* chore: clean up code

* refactor: move DebugPopover to AppSidebar

* chore: add skeleton

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: pasquale@cal.com <pasquale@cal.com>
Co-authored-by: pasqualevitiello <pasqualevitiello@gmail.com>
2026-01-15 09:07:06 +01:00
Pasquale Vitiello d3371dcc6c style: improve frame and table components (#621)
* styles: improve frame and table components

* chore: format + mc

* update registry
2026-01-09 10:14:48 +00:00
Pasquale Vitiello e7a3a00c5f refactor: UI/UX general improvements (#617)
* feat: 1:1 font replacement

* feat: add examples app

* style: update font sizes and improve component styles for consistency

* update font

* style: restore default font weights

* refactor: move local fonts to packages

* feat: update font weights and refactor font imports in examples app

* fix CommandDialog not closing on ESC

* refactor: command component improvements

* chore: remove console log from command demo

* refactor: update Command and Menu components to use <kbd> for shortcuts and improve styling

* style: fix formatting in globals.css by removing unnecessary whitespace

* fix: refactor group and toggle-group to prevent flickering menu trigger at the end of a group

* refactor: toggle group and group improvements

* refactor: update toggle component styles for consistency and clarity

* refactor: major styling improvements

* fix: dialogs

* refactor: prefer not-dark:

* fix: scrollarea overscroll

* refactor: integrate ScrollArea component throughout

* style: various improvements

* style: mc

* style: update button sizes and improve mobile footer layout

* style: adjust code component font size and refactor particle card container className

* style: improve mobile footer

* refactor: improve carious components

* style: mc

* chore: implement Cal.ai badge

* feat: implement new event type dialog

* refactor: clean up event types and improve page layout

* feat: implement ai-mode in the cmdk component

* chore: format

* fix: remove outline from CommandDialogPopup

* fix: update separator className to use bg-input instead of bg-border

* fix: cubic issues

* style: update font size in code components for consistency

* style: improve shadows

* fix: update badge and toggle components to use bg-background

* chore: update color references

* chore: fix registry

* chore: sync package component + build registry

* fix(accordion): issue 596

* fix: issue 609

* docs: updates

* chore: improve sync script

* feat: add AI-powered command particle

* feat: improve switch and add menu checkbox switch variant

* style: toggle improvements

* fix: docs container

* style: remove css vars from examples

* chore: format

* feat: add more example pages
2026-01-08 09:35:53 +00:00