feat: add modal sample using already defined component

angular/demo/src/app/samples/modal/default.route.ts

@@ -1,6 +1,5 @@
 import type {ModalComponent} from '@agnos-ui/angular';
-import {AgnosUIAngularModule} from '@agnos-ui/angular';
-import {modalCloseButtonClick, modalOutsideClick} from '@agnos-ui/core';
+import {AgnosUIAngularModule, modalCloseButtonClick, modalOutsideClick} from '@agnos-ui/angular';
 import {Component} from '@angular/core';
 
 @Component({

react/demo/app/samples/accordion/CustomHeaders.route.tsx

@@ -1,12 +1,11 @@
 import {Accordion, AccordionItem, useDirective} from '@agnos-ui/react';
-import type {AccordionItemContext} from '@agnos-ui/react';
+import type {AccordionApi, AccordionItemContext} from '@agnos-ui/react';
 import {useRef, useState} from 'react';
-import type {AccordionWidget} from '@agnos-ui/core';
 import '@agnos-ui/common/samples/accordion/custom.scss';
 import BODY from '@agnos-ui/common/samples/accordion/body.txt?raw';
 
 const AccordionDemo = () => {
-	const refAccordion = useRef<AccordionWidget['api']>();
+	const refAccordion = useRef<AccordionApi>();
 	const [thirdItemDisabled, setThirdItemDisabled] = useState<boolean>(false);
 
 	const Collapse = (props: {slotContext: AccordionItemContext}) => {

react/demo/app/samples/accordion/TogglePanels.route.tsx

@@ -1,11 +1,11 @@
+import type {AccordionApi, AccordionItemApi} from '@agnos-ui/react';
 import {Accordion, AccordionItem} from '@agnos-ui/react';
 import {useRef} from 'react';
-import type {AccordionWidget, AccordionItemWidget} from '@agnos-ui/core';
 import BODY from '@agnos-ui/common/samples/accordion/body.txt?raw';
 
 const AccordionDemo = () => {
-	const refAccordion = useRef<AccordionWidget['api']>();
-	const refSecondPanel = useRef<AccordionItemWidget['api']>();
+	const refAccordion = useRef<AccordionApi>();
+	const refSecondPanel = useRef<AccordionItemApi>();
 	return (
 		<>
 			<Accordion ref={refAccordion}>

react/demo/app/samples/alert/Config.route.tsx

@@ -1,4 +1,4 @@
-import type {AlertWidget} from '@agnos-ui/core';
+import type {AlertApi} from '@agnos-ui/react';
 import {Alert} from '@agnos-ui/react';
 import {useRef, useState} from 'react';
 
@@ -14,7 +14,7 @@ export enum AlertStatus {
 }
 
 const DefaultDemo = () => {
-	const alertRef = useRef<AlertWidget['api']>();
+	const alertRef = useRef<AlertApi>();
 
 	const [animationOnInit, setAnimationOnInit] = useState(true);
 	const [animation, setanimation] = useState(true);

react/demo/app/samples/alert/Icon.route.tsx

@@ -1,5 +1,4 @@
-import type {AlertProps} from '@agnos-ui/core';
-import type {AdaptPropsSlots, AlertContext} from '@agnos-ui/react';
+import type {AlertProps, AdaptPropsSlots, AlertContext} from '@agnos-ui/react';
 import {Alert, Slot, WidgetsDefaultConfig} from '@agnos-ui/react';
 import biCheckCircleFill from 'bootstrap-icons/icons/check-circle-fill.svg?raw';
 import biDashCircleFill from 'bootstrap-icons/icons/dash-circle-fill.svg?raw';

react/demo/app/samples/modal/Component.route.tsx

@@ -16,7 +16,7 @@ const ComponentDemo = () => (
 	<button
 		type="button"
 		className="btn btn-primary"
-		onClick={() => openModal<ModalContent>({slotTitle: 'Hi there!', slotDefault: ModalBody, contentData: {name: 'World'}})}
+		onClick={() => openModal({slotTitle: 'Hi there!', slotDefault: ModalBody, contentData: {name: 'World'}})}
 	>
 		Launch demo modal
 	</button>

react/demo/app/samples/modal/Default.route.tsx

@@ -1,10 +1,9 @@
-import {modalCloseButtonClick, modalOutsideClick} from '@agnos-ui/core';
-import type {ModalWidget} from '@agnos-ui/react';
-import {Modal} from '@agnos-ui/react';
+import type {ModalApi} from '@agnos-ui/react';
+import {Modal, modalCloseButtonClick, modalOutsideClick} from '@agnos-ui/react';
 import {useRef, useState} from 'react';
 
 const DefaultDemo = () => {
-	const modal = useRef<ModalWidget<void>['api']>();
+	const modal = useRef<ModalApi<void>>(null);
 	const [message, setMessage] = useState('');
 	return (
 		<>

react/demo/app/samples/pagination/Custom.route.tsx

@@ -1,8 +1,7 @@
 import {Pagination, WidgetsDefaultConfig} from '@agnos-ui/react';
-import type {AdaptSlotContentProps} from '@agnos-ui/react';
+import type {AdaptSlotContentProps, PaginationContext, PaginationNumberContext} from '@agnos-ui/react';
 import {useEffect, useState} from 'react';
 import type {FormEvent, FocusEvent, KeyboardEvent} from 'react';
-import type {PaginationContext, PaginationNumberContext} from '@agnos-ui/core';
 
 const FILTER_PAG_REGEX = /[^0-9]/g;
 

react/demo/app/samples/rating/Config.route.tsx

@@ -1,5 +1,4 @@
-import type {StarContext} from '@agnos-ui/core';
-import type {RatingProps} from '@agnos-ui/react';
+import type {RatingProps, StarContext} from '@agnos-ui/react';
 import {Rating, WidgetsDefaultConfig} from '@agnos-ui/react';
 import {useState} from 'react';
 

react/demo/app/samples/rating/CustomTemplate.route.tsx

@@ -1,6 +1,6 @@
 import '@agnos-ui/common/samples/rating/custom.scss';
 import {Rating} from '@agnos-ui/react';
-import type {StarContext} from '@agnos-ui/core';
+import type {StarContext} from '@agnos-ui/react';
 
 const CustomStar = ({fill, index}: StarContext) => {
 	const starClassname = ['star'];

react/demo/app/samples/rating/Readonly.route.tsx

@@ -1,5 +1,5 @@
 import '@agnos-ui/common/samples/rating/readonly.scss';
-import type {StarContext} from '@agnos-ui/core';
+import type {StarContext} from '@agnos-ui/react';
 import {Rating} from '@agnos-ui/react';
 import heartFill from 'bootstrap-icons/icons/heart-fill.svg?raw';
 

react/lib/modal/Modal.tsx

@@ -1,6 +1,6 @@
-import type {ModalContext, ModalProps, ModalWidget} from '@agnos-ui/react-headless';
+import type {ModalApi, ModalContext, ModalProps} from '@agnos-ui/react-headless';
 import {Portal, Slot, createModal, toSlotContextWidget, useDirective, useWidgetWithConfig} from '@agnos-ui/react-headless';
-import type {PropsWithChildren, Ref} from 'react';
+import type {PropsWithChildren, Ref, RefAttributes} from 'react';
 import {forwardRef, useImperativeHandle} from 'react';
 
 const DefaultSlotHeader = <Data,>(slotContext: ModalContext<Data>) => (
@@ -42,7 +42,7 @@ const defaultConfig: Partial<ModalProps<any>> = {
 	slotStructure: DefaultSlotStructure,
 };
 
-function ModalInner<Data>(props: PropsWithChildren<Partial<ModalProps<Data>>>, ref: Ref<ModalWidget<Data>['api']>) {
+export const Modal = forwardRef(function Modal<Data>(props: PropsWithChildren<Partial<ModalProps<Data>>>, ref: Ref<ModalApi<Data>>) {
 	const [state, widget] = useWidgetWithConfig(createModal<Data>, props, 'modal', {...defaultConfig, slotDefault: props.children});
 	useImperativeHandle(ref, () => widget.api, []);
 	const refSetBackdrop = useDirective(widget.directives.backdropDirective);
@@ -65,8 +65,4 @@ function ModalInner<Data>(props: PropsWithChildren<Partial<ModalProps<Data>>>, r
 			)}
 		</Portal>
 	);
-}
-
-export const Modal = forwardRef(ModalInner) as <Data>(
-	props: PropsWithChildren<Partial<ModalProps<Data>>> & {ref: Ref<ModalWidget<Data>['api']>}
-) => ReturnType<typeof ModalInner>;
+}) as <Data>(props: PropsWithChildren<Partial<ModalProps<Data>>> & RefAttributes<ModalApi<Data>>) => JSX.Element;

react/lib/modal/modalService.tsx

@@ -1,14 +1,14 @@
-import type {ModalProps, ModalWidget} from '@agnos-ui/react-headless';
+import type {ModalApi, ModalProps} from '@agnos-ui/react-headless';
 import ReactDOM from 'react-dom/client';
 import {Modal} from './Modal';
 
 export async function openModal<Data>(options: Partial<ModalProps<Data>>) {
 	const root = ReactDOM.createRoot(document.createElement('div'));
 	try {
-		const api = await new Promise<ModalWidget<Data>['api']>((resolve) => {
+		const api = await new Promise<ModalApi<Data> | null>((resolve) => {
 			root.render(<Modal {...options} ref={resolve} />);
 		});
-		return await api.open();
+		return await api!.open();
 	} finally {
 		root.unmount();
 	}

svelte/demo/samples/modal/Component.route.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
 	import {openModal} from '@agnos-ui/svelte';
 	import ComponentModal from './ComponentModal.svelte';
-	import type {ModalContent} from './modal-content';
-	const launch = () => openModal<ModalContent>({slotTitle: 'Hi there!', slotDefault: ComponentModal, contentData: {name: 'World'}});
+	const launch = () => openModal({slotTitle: 'Hi there!', slotDefault: ComponentModal, contentData: {name: 'World'}});
 </script>
 
 <button type="button" class="btn btn-primary" on:click={() => launch()}>Launch demo modal</button>

svelte/demo/samples/modal/ComponentModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type {ModalSlots} from '@agnos-ui/svelte';
-	import type {ModalContent} from './modal-content';
+	type ModalContent = {name: string};
 	// cf https://github.com/ota-meshi/eslint-plugin-svelte/issues/348
 	type $$Props = ModalSlots<ModalContent>['default']; // eslint-disable-line @typescript-eslint/no-unused-vars
 	// cf https://github.com/ota-meshi/eslint-plugin-svelte/issues/348

svelte/demo/samples/modal/Default.route.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import {modalCloseButtonClick, modalOutsideClick} from '@agnos-ui/core';
-	import {Modal} from '@agnos-ui/svelte';
+	import {Modal, modalCloseButtonClick, modalOutsideClick} from '@agnos-ui/svelte';
 
 	let modal: Modal<unknown>;
 	let message = '';

svelte/demo/samples/rating/CustomStar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type {StarContext} from '@agnos-ui/core';
+	import type {StarContext} from '@agnos-ui/svelte';
 	type $$Props = StarContext; // eslint-disable-line @typescript-eslint/no-unused-vars
 
 	export let fill: number;