Syncfusion Customizations and Wrappers
This page documents custom components and wrappers built in this repo that extend Syncfusion behavior beyond out-of-the-box controls.
Reusable Wrappers (packages/*)
| Wrapper | Location | Underlying Syncfusion | Customization responsibility | StoryBook |
|---|---|---|---|---|
| FileUploader | packages/ubo-react-components/src/syncfusion-extentions/FileUploader |
UploaderComponent, ProgressBarComponent |
Custom upload UI, file row template, validation helpers, upload lifecycle hooks. | Open |
| useFileUploader | packages/ubo-react-components/src/hooks/syncfusion/useFileUploader.tsx |
Syncfusion file uploader event/types | State and validation utility hook for selected/removed/upload status flows. | Open |
| LoadingSpinner | packages/ubo-react-components/src/syncfusion-extentions/LoadingSpinner |
createSpinner, showSpinner |
Brand-consistent spinner wrapper component. | Open |
| CopyIconComponent | packages/ubo-react-components/src/syncfusion-extentions/CopyIcon/CopyIconComponent.tsx |
TooltipComponent |
Copy-to-clipboard icon with dynamic tooltip feedback. | Open |
| StickyButtonRibbon | packages/ubo-react-components/src/components/StickyButtonRibbon |
ButtonComponent |
Standardized sticky Back/Cancel/Continue actions. | Open |
| syncfusion-toast-utilities | packages/ubo-react-components/src/utils/syncfusion-toast-utilities.ts |
ToastUtility |
Centralized toast variants (success/warning/error) with shared styling and behavior. | Open |
| RightSidebar | packages/ubo-react-right-sidebar/src/components/right-sidebar.component.tsx |
SidebarComponent, ButtonComponent |
App-level right panel shell with controlled open/close lifecycle. | Open |
| Data grid adapters and filters | packages/ubo-react-datagrid-extension/src |
DataManager, ODataV4Adaptor, grid filters |
Auth headers, infinite scroll behavior, reusable filter controls, toolbar templates. | Open |
| UboCurrencyBoxComponent | packages/ubo-react-currency-box-component/src/ubo-currency-box-component.tsx |
NumericTextBoxComponent |
Currency-focused numeric input wrapper with shared formatting behavior. | Open |
Create Bonus Page: Segmented and Toggle Controls
| UI observed | Component | Type | Syncfusion or custom? |
|---|---|---|---|
| Opt-In Yes / No segmented control | RadioField |
Native <input type="radio"> with Tailwind styling |
Custom (not Syncfusion) |
| Rewards toggles (SPORTS / VIRTUALS / GAMES) | ToggleSwitch |
Native <input type="checkbox"> switch styling |
Custom (not Syncfusion) |
| Generic checkbox field support | CheckboxField |
Native <input type="checkbox"> |
Custom (not Syncfusion) |
Source paths:
apps/ubo-engagement/src/components/FormFields/RadioField.tsx,
apps/ubo-engagement/src/components/common/ToggleSwitch.tsx, and
apps/ubo-engagement/src/components/FormFields/CheckboxField.tsx.
App-Level Composite Wrappers (Examples)
apps/ubo-engagement/src/components/promotions/PromotionsTable/index.tsx- custom grid wrapper with server-side paging/filtering and custom templates.apps/ubo-payments/src/common-components/transaction-grid/transaction-grid-odata.component.tsx- OData-backed grid wrapper with custom toolbar/filter/detail handling.apps/ubo-customer/src/manage-customer-odata/Components/customer-grid-odata.tsx- customer grid wrapper integrating dialogs and profile navigation behavior.apps/ubo-user/src/teams/components/team-roles/components/team-roles-grid-content.component.tsx- role-management grid wrapper with command actions and edit dialogs.apps/ubo-agency/src/shop_loans/components/manage-loan.component.tsx- form workflow wrapper combining multiple Syncfusion controls with domain validation.