diff --git a/angular/bootstrap/src/config.ts b/angular/bootstrap/src/config.ts index 8466749551..ba4a0f024f 100644 --- a/angular/bootstrap/src/config.ts +++ b/angular/bootstrap/src/config.ts @@ -16,7 +16,7 @@ const widgetFactories: { provideWidgetsConfig: (adaptParentConfig?: AdaptParentConfig) => FactoryProvider; injectWidgetConfig: (widgetName: N) => ReadableSignal | undefined>; injectWidgetsConfig: InjectWidgetsConfig; - callWidgetFactory: >({ + callWidgetFactory: >({ factory, widgetName, defaultConfig, diff --git a/angular/headless/src/utils/widget.spec.ts b/angular/headless/src/utils/widget.spec.ts index c46ef3b1b8..089c4403a9 100644 --- a/angular/headless/src/utils/widget.spec.ts +++ b/angular/headless/src/utils/widget.spec.ts @@ -33,12 +33,11 @@ describe('callWidgetFactoryWithConfig', () => { {onMyAction: () => void; onCounterChange: (value: number) => void; myValue: string}, {derivedValue: string; counter: number}, {myApiFn: () => void; incrementCounter: () => void}, - {myAction: () => void}, {myDirective: Directive} >; const factory: WidgetFactory = createZoneCheckFn('factory', (propsConfig) => { - const [{onMyAction$, onCounterChange$, myValue$}, patch] = writablesForProps( + const [{onCounterChange$, myValue$}, patch] = writablesForProps( { onMyAction: noop, onCounterChange: noop, @@ -65,11 +64,6 @@ describe('callWidgetFactoryWithConfig', () => { onCounterChange$()(value); }), }, - actions: { - myAction: createZoneCheckFn('myAction', () => { - onMyAction$()(); - }), - }, directives: { myDirective: createZoneCheckFn('myDirective', () => ({ update: createZoneCheckFn('myDirectiveUpdate', noop), @@ -103,8 +97,6 @@ describe('callWidgetFactoryWithConfig', () => { onMyAction: () => this.myAction.emit(), }, }); - - onClick = createZoneCheckFn('onClick', () => this._widget.actions.myAction()); } const ngZone = TestBed.inject(NgZone); @@ -175,12 +167,6 @@ describe('callWidgetFactoryWithConfig', () => { 'after ngZone.run', 'before click', 'enter ngZone', - 'begin onClick, ngZone = true', - 'begin myAction, ngZone = false', - 'begin myActionListener, ngZone = true', - 'end myActionListener, ngZone = true', - 'end myAction, ngZone = false', - 'end onClick, ngZone = true', 'leave ngZone', 'after click', 'before incrementCounter', @@ -201,7 +187,7 @@ describe('callWidgetFactoryWithConfig', () => { }); it('calls the core with the correct init values', () => { - type MyWidget = Widget<{myValue: string}, {myValue: string}, Record, Record, Record>; + type MyWidget = Widget<{myValue: string}, {myValue: string}, Record, Record>; const factory: WidgetFactory = (propsConfig) => { const [{myValue$}, patch] = writablesForProps( @@ -219,7 +205,6 @@ describe('callWidgetFactoryWithConfig', () => { myValue$, }), api: {}, - actions: {}, directives: {}, patch, }; diff --git a/angular/headless/src/utils/widget.ts b/angular/headless/src/utils/widget.ts index b76f0eeba5..2045c1366f 100644 --- a/angular/headless/src/utils/widget.ts +++ b/angular/headless/src/utils/widget.ts @@ -86,7 +86,6 @@ export const callWidgetFactoryWithConfig = ({ ...widget, patch: zoneWrapper.outsideNgZone(widget.patch), directives: zoneWrapper.outsideNgZoneWrapDirectivesObject(widget.directives), - actions: zoneWrapper.outsideNgZoneWrapFunctionsObject(widget.actions), api: zoneWrapper.outsideNgZoneWrapFunctionsObject(widget.api), }; Object.assign(res, wrappedWidget, { diff --git a/core-bootstrap/src/components/accordion/accordion.ts b/core-bootstrap/src/components/accordion/accordion.ts index 819c92ca4c..a0769ca939 100644 --- a/core-bootstrap/src/components/accordion/accordion.ts +++ b/core-bootstrap/src/components/accordion/accordion.ts @@ -70,12 +70,12 @@ export interface AccordionProps extends CoreProps, AccordionExtraProps { itemTransition: TransitionFn; } -export type AccordionWidget = Widget; +export type AccordionWidget = Widget; export interface AccordionItemState extends CoreItemState, AccordionItemExtraProps {} export interface AccordionItemProps extends CoreItemProps, AccordionItemExtraProps {} -export type AccordionItemWidget = Widget; +export type AccordionItemWidget = Widget; const defaultConfigExtraProps: AccordionExtraProps = { itemStructure: undefined, diff --git a/core-bootstrap/src/components/alert/alert.ts b/core-bootstrap/src/components/alert/alert.ts index 07b53f906c..3c13634787 100644 --- a/core-bootstrap/src/components/alert/alert.ts +++ b/core-bootstrap/src/components/alert/alert.ts @@ -40,7 +40,7 @@ export interface AlertProps extends CoreProps, AlertExtraProps { transition: TransitionFn; } -export type AlertWidget = Widget; +export type AlertWidget = Widget; const defaultConfigExtraProps: AlertExtraProps = { structure: undefined, diff --git a/core-bootstrap/src/components/collapse/collapse.ts b/core-bootstrap/src/components/collapse/collapse.ts index bcc69aaec0..eaf68adfc9 100644 --- a/core-bootstrap/src/components/collapse/collapse.ts +++ b/core-bootstrap/src/components/collapse/collapse.ts @@ -103,7 +103,7 @@ export interface CollapseDirectives { transitionDirective: Directive; } -export type CollapseWidget = Widget; +export type CollapseWidget = Widget; const defaultCollapseConfig: CollapseProps = { visible: true, @@ -164,6 +164,5 @@ export function createCollapse(config?: PropsConfig): CollapseWid directives: { transitionDirective: bindDirectiveNoArg(transition.directives.directive), }, - actions: {}, }; } diff --git a/core-bootstrap/src/components/modal/modal.ts b/core-bootstrap/src/components/modal/modal.ts index decb78940a..799505ca45 100644 --- a/core-bootstrap/src/components/modal/modal.ts +++ b/core-bootstrap/src/components/modal/modal.ts @@ -72,7 +72,7 @@ export interface ModalApi extends Omit { patch: ModalWidget['patch']; } -export type ModalWidget = Widget, ModalState, ModalApi, object, ModalDirectives>; +export type ModalWidget = Widget, ModalState, ModalApi, ModalDirectives>; const defaultConfigExtraProps: ModalExtraProps = { contentData: undefined, diff --git a/core-bootstrap/src/components/pagination/pagination.ts b/core-bootstrap/src/components/pagination/pagination.ts index ca909259d8..883d2d9f47 100644 --- a/core-bootstrap/src/components/pagination/pagination.ts +++ b/core-bootstrap/src/components/pagination/pagination.ts @@ -104,7 +104,7 @@ interface PaginationExtraProps { export interface PaginationState extends CoreState, PaginationExtraProps {} export interface PaginationProps extends CoreProps, PaginationExtraProps {} -export type PaginationWidget = Widget; +export type PaginationWidget = Widget; const defaultConfigExtraProps: PaginationExtraProps = { structure: undefined, diff --git a/core-bootstrap/src/components/progressbar/progressbar.ts b/core-bootstrap/src/components/progressbar/progressbar.ts index fe3e31b9f5..0efe804aab 100644 --- a/core-bootstrap/src/components/progressbar/progressbar.ts +++ b/core-bootstrap/src/components/progressbar/progressbar.ts @@ -46,7 +46,7 @@ interface ProgressbarExtraProps { export interface ProgressbarState extends CoreState, ProgressbarExtraProps {} export interface ProgressbarProps extends CoreProps, ProgressbarExtraProps {} -export type ProgressbarWidget = Widget; +export type ProgressbarWidget = Widget; const defaultConfigExtraProps: ProgressbarExtraProps = { structure: undefined, diff --git a/core-bootstrap/src/components/rating/rating.ts b/core-bootstrap/src/components/rating/rating.ts index 7b3e52f67b..79d80476eb 100644 --- a/core-bootstrap/src/components/rating/rating.ts +++ b/core-bootstrap/src/components/rating/rating.ts @@ -20,7 +20,7 @@ interface RatingExtraProps { export interface RatingState extends CoreState, RatingExtraProps {} export interface RatingProps extends CoreProps, RatingExtraProps {} -export type RatingWidget = Widget; +export type RatingWidget = Widget; const defaultConfigExtraProps: RatingExtraProps = { star: ({fill}: StarContext) => String.fromCharCode(fill === 100 ? 9733 : 9734), diff --git a/core-bootstrap/src/components/select/select.ts b/core-bootstrap/src/components/select/select.ts index 36f4f42b7c..7d42fd585c 100644 --- a/core-bootstrap/src/components/select/select.ts +++ b/core-bootstrap/src/components/select/select.ts @@ -44,7 +44,7 @@ interface SelectExtraProps { export interface SelectState extends CoreState, SelectExtraProps {} export interface SelectProps extends CoreProps, SelectExtraProps {} -export type SelectWidget = Widget, SelectState, SelectApi, object, SelectDirectives>; +export type SelectWidget = Widget, SelectState, SelectApi, SelectDirectives>; const defaultConfigExtraProps: SelectExtraProps = { badgeLabel: ({itemContext}: SelectItemContext) => itemContext.item, diff --git a/core-bootstrap/src/components/slider/slider.ts b/core-bootstrap/src/components/slider/slider.ts index 006839e492..6832f5eeb6 100644 --- a/core-bootstrap/src/components/slider/slider.ts +++ b/core-bootstrap/src/components/slider/slider.ts @@ -34,7 +34,7 @@ interface SliderExtraProps { export interface SliderState extends CoreState, SliderExtraProps {} export interface SliderProps extends CoreProps, SliderExtraProps {} -export type SliderWidget = Widget; +export type SliderWidget = Widget; const defaultConfigExtraProps: SliderExtraProps = { structure: undefined, diff --git a/core-bootstrap/src/components/toast/toast.ts b/core-bootstrap/src/components/toast/toast.ts index 84c487a818..2341aa88b5 100644 --- a/core-bootstrap/src/components/toast/toast.ts +++ b/core-bootstrap/src/components/toast/toast.ts @@ -36,7 +36,7 @@ export interface ToastProps extends CoreProps, ToastExtraProps { transition: TransitionFn; } -export type ToastWidget = Widget; +export type ToastWidget = Widget; const defaultConfigExtraProps: ToastExtraProps = { structure: undefined, diff --git a/core/src/components/accordion/accordion.ts b/core/src/components/accordion/accordion.ts index 1f20d3b707..7fe0975666 100644 --- a/core/src/components/accordion/accordion.ts +++ b/core/src/components/accordion/accordion.ts @@ -170,7 +170,7 @@ export interface AccordionDirectives { accordionDirective: Directive; } -export type AccordionWidget = Widget; +export type AccordionWidget = Widget; export interface AccordionItemApi { /** @@ -304,7 +304,7 @@ export interface AccordionItemState extends AccordionItemCommonPropsAndState { shouldBeInDOM: boolean; } -export type AccordionItemWidget = Widget; +export type AccordionItemWidget = Widget; const defaultAccordionConfig: AccordionProps = { closeOthers: false, @@ -482,7 +482,6 @@ export function createAccordionItem(config?: PropsConfig): A visible$.update((c: boolean) => !c); }, }, - actions: {}, directives: { toggleDirective, buttonDirective: mergeDirectives( @@ -552,7 +551,6 @@ export function factoryCreateAccordion( return { ...stateStores({itemWidgets$, className$}), patch, - actions: {}, api: { expand: (id: string) => { getItem(itemWidgets$(), id)?.api.expand(); diff --git a/core/src/components/alert/alert.ts b/core/src/components/alert/alert.ts index de7b5b30a2..cdbb5dd9f1 100644 --- a/core/src/components/alert/alert.ts +++ b/core/src/components/alert/alert.ts @@ -6,7 +6,7 @@ export interface AlertState extends CommonAlertState {} export interface AlertProps extends CommonAlertProps {} export interface AlertApi extends CommonAlertApi {} export interface AlertDirectives extends CommonAlertDirectives {} -export type AlertWidget = Widget; +export type AlertWidget = Widget; /** * Retrieve a shallow copy of the default alert config diff --git a/core/src/components/alert/common.ts b/core/src/components/alert/common.ts index bb2fc39445..1dfe7e8cd4 100644 --- a/core/src/components/alert/common.ts +++ b/core/src/components/alert/common.ts @@ -119,7 +119,7 @@ export interface CommonAlertDirectives { transitionDirective: Directive; } -export type CommonAlertWidget = Widget; +export type CommonAlertWidget = Widget; const defaultCommonAlertConfig: CommonAlertProps = { visible: true, @@ -191,6 +191,5 @@ export function createCommonAlert(config?: PropsConfig): Commo directives: { transitionDirective: bindDirectiveNoArg(transition.directives.directive), }, - actions: {}, }; } diff --git a/core/src/components/modal/modal.ts b/core/src/components/modal/modal.ts index ccf9d97d0d..5407a95209 100644 --- a/core/src/components/modal/modal.ts +++ b/core/src/components/modal/modal.ts @@ -274,7 +274,7 @@ export interface ModalDirectives { /** * Modal widget. */ -export type ModalWidget = Widget; +export type ModalWidget = Widget; const defaultConfig: ModalProps = { animated: true, @@ -507,7 +507,6 @@ export function createModal(config$?: PropsConfig): ModalWidget { }, patch, }, - actions: {}, }; return res; diff --git a/core/src/components/pagination/pagination.ts b/core/src/components/pagination/pagination.ts index cda30291b6..f17ccf1537 100644 --- a/core/src/components/pagination/pagination.ts +++ b/core/src/components/pagination/pagination.ts @@ -325,7 +325,7 @@ export interface PaginationDirectives { pageLast: Directive; } -export type PaginationWidget = Widget; +export type PaginationWidget = Widget; const PAGE_LINK_DEFAULT = '#'; @@ -493,7 +493,6 @@ export function createPagination(config?: PropsConfig): Paginat ...stateProps, }), patch, - actions: {}, api: { /** * Set the current page pageNumber (starting from 1) diff --git a/core/src/components/progressbar/progressbar.ts b/core/src/components/progressbar/progressbar.ts index f0beecceae..6ac2081664 100644 --- a/core/src/components/progressbar/progressbar.ts +++ b/core/src/components/progressbar/progressbar.ts @@ -74,7 +74,7 @@ export interface ProgressbarProps extends ProgressbarCommonPropsAndState { ariaValueTextFn: (value: number, minimum: number, maximum: number) => string | undefined; } -export type ProgressbarWidget = Widget; +export type ProgressbarWidget = Widget; const defaultConfig: ProgressbarProps = { min: 0, @@ -163,6 +163,5 @@ export function createProgressbar(config?: PropsConfig): Progr }, })), }, - actions: {}, }; } diff --git a/core/src/components/rating/rating.ts b/core/src/components/rating/rating.ts index 1c0151ed9d..257f80424d 100644 --- a/core/src/components/rating/rating.ts +++ b/core/src/components/rating/rating.ts @@ -184,7 +184,7 @@ export interface RatingApi { leave(): void; } -export type RatingWidget = Widget; +export type RatingWidget = Widget; const defaultConfig: RatingProps = { rating: 0, @@ -285,7 +285,6 @@ export function createRating(config?: PropsConfig): RatingWidget { ...stateProps, }), patch, - actions: {}, directives: { containerDirective: createAttributesDirective(() => ({ events: { diff --git a/core/src/components/select/select.ts b/core/src/components/select/select.ts index c28fc63c46..b1c77049bf 100644 --- a/core/src/components/select/select.ts +++ b/core/src/components/select/select.ts @@ -322,7 +322,7 @@ export interface SelectDirectives { badgeCloseButtonDirective: Directive>; } -export type SelectWidget = Widget, SelectState, SelectApi, object, SelectDirectives>; +export type SelectWidget = Widget, SelectState, SelectApi, SelectDirectives>; const defaultConfig: SelectProps = { id: undefined, @@ -732,7 +732,6 @@ export function createSelect(config?: PropsConfig>): Sel inputDirective, badgeCloseButtonDirective, }, - actions: {}, }; return widget; diff --git a/core/src/components/slider/slider.ts b/core/src/components/slider/slider.ts index b1a5b32269..ab839ebf23 100644 --- a/core/src/components/slider/slider.ts +++ b/core/src/components/slider/slider.ts @@ -276,7 +276,7 @@ export interface SliderDirectives { handleLabelDisplayDirective: Directive<{index: number}>; } -export type SliderWidget = Widget; +export type SliderWidget = Widget; const defaultSliderConfig: SliderProps = { min: 0, @@ -865,7 +865,6 @@ export function createSlider(config?: PropsConfig): SliderWidget { }, })), }, - actions: {}, }; return widget; diff --git a/core/src/components/toast/toast.ts b/core/src/components/toast/toast.ts index f787b3800a..0769e7faf3 100644 --- a/core/src/components/toast/toast.ts +++ b/core/src/components/toast/toast.ts @@ -44,7 +44,7 @@ export interface ToastApi extends CommonAlertApi {} export interface ToastDirectives extends CommonAlertDirectives, ExtraDirectives {} -export type ToastWidget = Widget; +export type ToastWidget = Widget; const toastDefaultConfig: ToastExtraProps = { autoHide: true, diff --git a/core/src/services/extendWidget.spec.ts b/core/src/services/extendWidget.spec.ts index a0da929853..971a0231de 100644 --- a/core/src/services/extendWidget.spec.ts +++ b/core/src/services/extendWidget.spec.ts @@ -39,7 +39,6 @@ describe(`extendWidgetProps`, () => { myOtherNewProp: 'value', }, }); - expect(Object.keys(customWidget.actions)).toEqual(Object.keys(originalWidget.actions)); expect(Object.keys(customWidget.api)).toEqual(Object.keys(originalWidget.api)); expect(Object.keys(customWidget.directives)).toEqual(Object.keys(originalWidget.directives)); expect(Object.keys(customWidget.stores)).toEqual([...Object.keys(originalWidget.stores), 'myNewProp$', 'myOtherNewProp$']); diff --git a/core/src/services/extendWidget.ts b/core/src/services/extendWidget.ts index bc9cc99274..52dd7d75d5 100644 --- a/core/src/services/extendWidget.ts +++ b/core/src/services/extendWidget.ts @@ -19,7 +19,6 @@ export type ExtendWidgetProps, ExtraProps, ExtraDirectives>, ExtendWidgetAdaptSlotWidgetProps, ExtraProps, ExtraDirectives>, W['api'], - W['actions'], ExtendWidgetInterfaces >; diff --git a/core/src/services/floatingUI.ts b/core/src/services/floatingUI.ts index 4436cdafd0..c57422c4bf 100644 --- a/core/src/services/floatingUI.ts +++ b/core/src/services/floatingUI.ts @@ -76,7 +76,7 @@ const defaultConfig: FloatingUIProps = { arrowOptions: {}, }; -export type FloatingUI = Omit, 'api' | 'actions'>; +export type FloatingUI = Omit, 'api'>; /** * Create a floating UI service. diff --git a/core/src/services/transitions/baseTransitions.ts b/core/src/services/transitions/baseTransitions.ts index c5c3ae8e00..bf0f850d51 100644 --- a/core/src/services/transitions/baseTransitions.ts +++ b/core/src/services/transitions/baseTransitions.ts @@ -161,7 +161,7 @@ export interface TransitionDirectives { directive: Directive>; } -export type TransitionWidget = Widget; +export type TransitionWidget = Widget; const neverEndingPromise = new Promise(noop); @@ -361,7 +361,6 @@ export const createTransition = (config?: PropsConfig): Transit directives: { directive, }, - actions: {}, api: { show: toggle.bind(null, true), hide: toggle.bind(null, false), diff --git a/core/src/types.ts b/core/src/types.ts index d2b985cf7e..c19248a76f 100644 --- a/core/src/types.ts +++ b/core/src/types.ts @@ -26,7 +26,6 @@ export interface Widget< Props extends object = object, State extends object = object, Api extends object = object, - Actions extends object = object, Directives extends object = object, > { /** @@ -46,18 +45,13 @@ export interface Widget< * directives to be used on html elements in the template of the widget or in the slots */ directives: Directives; - /** - * all the handlers that should be connected to user interactions i.e. click, keyboard and touch interactions. - * typically, the handlers are event listeners that call api functions to affect the widget state - */ - actions: Actions; /** * all the api functions to interact with the widget */ api: Api; } -export type ContextWidget = Pick; +export type ContextWidget = Pick; export interface WidgetSlotContext { /** @@ -71,13 +65,12 @@ export interface WidgetSlotContext { } /** - * Extract actions, api, directives, state and stores from the widget to be passed to slots as context. + * Extract api, directives, state and stores from the widget to be passed to slots as context. * * @param w - the widget * @returns the slot context */ export const toSlotContextWidget = (w: W): ContextWidget => ({ - actions: w.actions, api: w.api, directives: w.directives, state$: w.state$, diff --git a/docs/01-Headless/00-Introduction.md b/docs/01-Headless/00-Introduction.md index 7be6a737fc..3962ac4927 100644 --- a/docs/01-Headless/00-Introduction.md +++ b/docs/01-Headless/00-Introduction.md @@ -6,7 +6,7 @@ since: 0.1.1 A headless component is a design pattern where the component applies a separation of concerns between the logic (or "head") and the user interface (or "body"). -The “headless” part refers to the logic of the component, which is decoupled from its visual representation. This means that the component doesn’t have a user interface, but it does have functionality and exposes actions (APIs), states, directives but keeps internally their implementation. +The “headless” part refers to the logic of the component, which is decoupled from its visual representation. This means that the component doesn’t have a user interface, but it does have functionality and exposes an api, states, directives but keeps internally their implementation. Leveraging its core, AgnosUI provides headless components across various frameworks. These components not only share the core API but also adhere to the best practices and implementation strategies specific to each framework. This ensures seamless integration and optimal performance. @@ -17,7 +17,7 @@ AgnosUI includes pre-built components for supported frameworks. To use these com Creating a new component with the core typically involves the following base code: ```typescript -const {patch, stores, directives, actions, api} = create[WidgetName](props); +const {patch, stores, directives, api} = create[WidgetName](props); ``` Let's break down the components. @@ -69,10 +69,6 @@ These must be applied to the appropriate elements in the UI to ensure correct be Refer to the [dedicated section](03-Directives.md) for more details. -### actions - -`actions` contain functions designed to be directly plugged into the UI, such as `click` or `hover` in the rating component, connected to specific HTML element events. - ### api `api` includes functions for programmatically changing the component's state. Unlike the previous section, these functions are not specifically designed to be plugged into the UI. diff --git a/react/bootstrap/src/config.ts b/react/bootstrap/src/config.ts index 9eb49fdff3..40acbf73b6 100644 --- a/react/bootstrap/src/config.ts +++ b/react/bootstrap/src/config.ts @@ -21,7 +21,7 @@ const widgetFactories: { widgetName: keyof BootstrapWidgetsConfig | null, defaultConfig?: Partial, ) => import('@amadeus-it-group/tansu').ReadableSignal>; - useWidgetWithConfig: >( + useWidgetWithConfig: >( factory: WidgetFactory, props: Partial> | undefined, widgetName: keyof BootstrapWidgetsConfig | null,