fix: types for react

AmadeusITGroup · Dec 20, 2023 · e6d32d8 · e6d32d8
1 parent bef9867
commit e6d32d8
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 52 deletions.
diff --git a/react/demo/src/app/samples/accordion/CustomHeaders.route.tsx b/react/demo/src/app/samples/accordion/CustomHeaders.route.tsx
@@ -6,7 +6,7 @@ import '@agnos-ui/common/samples/accordion/custom.scss';
 import BODY from '@agnos-ui/common/samples/accordion/body.txt?raw';
 
 const AccordionDemo = () => {
-	const refAccordion = useRef<AccordionApi>();
+	const refAccordion = useRef<AccordionApi>(null);
 	const [thirdItemDisabled, setThirdItemDisabled] = useState<boolean>(false);
 
 	const Collapse = (props: {slotContext: AccordionItemContext}) => {

diff --git a/react/demo/src/app/samples/accordion/TogglePanels.route.tsx b/react/demo/src/app/samples/accordion/TogglePanels.route.tsx
@@ -4,8 +4,8 @@ import {useRef} from 'react';
 import BODY from '@agnos-ui/common/samples/accordion/body.txt?raw';
 
 const AccordionDemo = () => {
-	const refAccordion = useRef<AccordionApi>();
-	const refSecondPanel = useRef<AccordionItemApi>();
+	const refAccordion = useRef<AccordionApi>(null);
+	const refSecondPanel = useRef<AccordionItemApi>(null);
 	return (
 		<>
 			<Accordion ref={refAccordion}>

diff --git a/react/demo/src/app/samples/alert/Config.route.tsx b/react/demo/src/app/samples/alert/Config.route.tsx
@@ -14,7 +14,7 @@ export enum AlertStatus {
 }
 
 const DefaultDemo = () => {
-	const alertRef = useRef<AlertApi>();
+	const alertRef = useRef<AlertApi>(null);
 
 	const [animationOnInit, setAnimationOnInit] = useState(true);
 	const [animation, setanimation] = useState(true);

diff --git a/react/headless/src/config.tsx b/react/headless/src/config.tsx
@@ -1,5 +1,5 @@
 import type {Widget, WidgetFactory, WidgetProps, WidgetState} from '@agnos-ui/core/types';
-import {createWidgetsConfig, type Partial2Levels, type WidgetsConfigStore} from '@agnos-ui/core/config';
+import {createWidgetsConfig, type WidgetsConfigStore, type WidgetsConfig as CoreWidgetsConfig, type Partial2Levels} from '@agnos-ui/core/config';
 import {computed} from '@amadeus-it-group/tansu';
 import type {ReactNode} from 'react';
 import {createContext, useContext, useEffect, useMemo} from 'react';
@@ -10,7 +10,11 @@ import {usePropsAsStore} from './utils/stores';
 export * from '@agnos-ui/core/config';
 
 export type WidgetsConfig = {
-	[WidgetName in keyof import('@agnos-ui/core/config').WidgetsConfig]: AdaptPropsSlots<import('@agnos-ui/core/config').WidgetsConfig[WidgetName]>;
+	[WidgetName in keyof CoreWidgetsConfig]: AdaptPropsSlots<CoreWidgetsConfig[WidgetName]>;
+};
+type DefaultConfigInput<Config> = Partial2Levels<Config> & {
+	adaptParentConfig?: (config: Partial2Levels<Config>) => Partial2Levels<Config>;
+	children?: ReactNode | undefined;
 };
 
 export const widgetsConfigFactory = <Config extends {[widgetName: string]: object} = WidgetsConfig>(
@@ -62,14 +66,7 @@ export const widgetsConfigFactory = <Config extends {[widgetName: string]: objec
 	 * />
 	 * ```
 	 */
-	const WidgetsDefaultConfig = ({
-		children,
-		adaptParentConfig,
-		...props
-	}: Partial2Levels<Config> & {
-		adaptParentConfig?: (config: Partial2Levels<Config>) => Partial2Levels<Config>;
-		children?: ReactNode | undefined;
-	}) => {
+	const WidgetsDefaultConfig = ({children, adaptParentConfig, ...props}: DefaultConfigInput<Config>) => {
 		const config$ = useContext(widgetsConfigContext);
 		let storeRecreated = false;
 
@@ -97,5 +94,4 @@ export const widgetsConfigFactory = <Config extends {[widgetName: string]: objec
 		WidgetsDefaultConfig,
 	};
 };
-
-export const {widgetsConfigContext, useWidgetContext, useWidgetWithConfig, WidgetsDefaultConfig} = widgetsConfigFactory();
+export const {widgetsConfigContext, WidgetsDefaultConfig, useWidgetContext, useWidgetWithConfig} = widgetsConfigFactory();
diff --git a/react/lib/src/components/accordion/accordion.tsx b/react/lib/src/components/accordion/accordion.tsx
@@ -1,13 +1,14 @@
 import {createAccordion} from '@agnos-ui/react-headless/components/accordion';
 import type {
 	AccordionApi,
+	AccordionItemApi,
 	AccordionItemContext,
 	AccordionItemProps,
 	AccordionItemWidget,
 	AccordionProps,
 } from '@agnos-ui/react-headless/components/accordion';
 import {Slot} from '@agnos-ui/react-headless/slot';
-import type {PropsWithChildren} from 'react';
+import type {ForwardRefExoticComponent, ForwardedRef, PropsWithChildren, RefAttributes} from 'react';
 import {createContext, forwardRef, useContext, useEffect, useImperativeHandle} from 'react';
 import {useWidgetWithConfig} from '@agnos-ui/react-headless/config';
 import {useDirective} from '@agnos-ui/react-headless/utils/directive';
@@ -56,36 +57,40 @@ const DefaultSlotStructure = (slotContext: AccordionItemContext) => {
 const defaultConfig: Partial<AccordionItemProps> = {
 	slotItemStructure: DefaultSlotStructure,
 };
-export const AccordionItem = forwardRef(function AccordionItem(props: PropsWithChildren<Partial<AccordionItemProps>>, ref) {
-	const {registerItem} = useContext(AccordionDIContext);
-	const [state, widget] = useWidgetWithConfig(registerItem as WidgetFactory<AccordionItemWidget>, props, null, {
-		...defaultConfig,
-	});
-	const slotContext: AccordionItemContext = {
-		state,
-		widget: widget,
-	};
-	const refSetAccordionItem = useDirective(widget.directives.accordionItemDirective);
-	useImperativeHandle(ref, () => widget.api, []);
-	useEffect(() => {
-		widget.api.initDone();
-	}, []);
-	return (
-		<div className={`accordion-item ${state.itemClass}`} id={state.itemId} ref={refSetAccordionItem}>
-			<Slot slotContent={state.slotItemStructure} props={slotContext} />
-		</div>
-	);
-});
-
-export const Accordion = forwardRef(function Accordion(props: PropsWithChildren<Partial<AccordionProps>>, ref) {
-	const [state, widget] = useWidgetWithConfig(createAccordion, props, 'accordion');
-	useImperativeHandle(ref, () => widget.api, []);
-	const refSetAccordion = useDirective(widget.directives.accordionDirective);
-	return (
-		<AccordionDIContext.Provider value={widget.api}>
-			<div className={`accordion ${state.className}`} ref={refSetAccordion}>
-				{props.children}
+export const AccordionItem: ForwardRefExoticComponent<PropsWithChildren<Partial<AccordionItemProps>> & RefAttributes<AccordionItemApi>> = forwardRef(
+	function AccordionItem(props: PropsWithChildren<Partial<AccordionItemProps>>, ref: ForwardedRef<AccordionItemApi>) {
+		const {registerItem} = useContext(AccordionDIContext);
+		const [state, widget] = useWidgetWithConfig(registerItem as WidgetFactory<AccordionItemWidget>, props, null, {
+			...defaultConfig,
+		});
+		const slotContext: AccordionItemContext = {
+			state,
+			widget: widget,
+		};
+		const refSetAccordionItem = useDirective(widget.directives.accordionItemDirective);
+		useImperativeHandle(ref, () => widget.api, []);
+		useEffect(() => {
+			widget.api.initDone();
+		}, []);
+		return (
+			<div className={`accordion-item ${state.itemClass}`} id={state.itemId} ref={refSetAccordionItem}>
+				<Slot slotContent={state.slotItemStructure} props={slotContext} />
 			</div>
-		</AccordionDIContext.Provider>
-	);
-});
+		);
+	},
+);
+
+export const Accordion: ForwardRefExoticComponent<PropsWithChildren<Partial<AccordionProps>> & RefAttributes<AccordionApi>> = forwardRef(
+	function Accordion(props: PropsWithChildren<Partial<AccordionProps>>, ref: ForwardedRef<AccordionApi>) {
+		const [state, widget] = useWidgetWithConfig(createAccordion, props, 'accordion');
+		useImperativeHandle(ref, () => widget.api, []);
+		const refSetAccordion = useDirective(widget.directives.accordionDirective);
+		return (
+			<AccordionDIContext.Provider value={widget.api}>
+				<div className={`accordion ${state.className}`} ref={refSetAccordion}>
+					{props.children}
+				</div>
+			</AccordionDIContext.Provider>
+		);
+	},
+);
diff --git a/react/lib/src/components/alert/alert.tsx b/react/lib/src/components/alert/alert.tsx
@@ -1,9 +1,9 @@
-import type {AlertContext, AlertProps} from '@agnos-ui/react-headless/components/alert';
+import type {AlertApi, AlertContext, AlertProps} from '@agnos-ui/react-headless/components/alert';
 import {createAlert} from '@agnos-ui/react-headless/components/alert';
 import {Slot} from '@agnos-ui/react-headless/slot';
 import {useWidgetWithConfig} from '@agnos-ui/react-headless/config';
 import {useDirective} from '@agnos-ui/react-headless/utils/directive';
-import type {PropsWithChildren} from 'react';
+import type {PropsWithChildren, ForwardedRef, ForwardRefExoticComponent, RefAttributes} from 'react';
 import {forwardRef, useImperativeHandle} from 'react';
 
 export * from '@agnos-ui/react-headless/components/alert';
@@ -23,7 +23,10 @@ const defaultConfig: Partial<AlertProps> = {
 	slotStructure: DefaultSlotStructure,
 };
 
-export const Alert = forwardRef(function Alert(props: PropsWithChildren<Partial<AlertProps>>, ref) {
+export const Alert: ForwardRefExoticComponent<PropsWithChildren<Partial<AlertProps>> & RefAttributes<AlertApi>> = forwardRef(function Alert(
+	props: PropsWithChildren<Partial<AlertProps>>,
+	ref: ForwardedRef<AlertApi>,
+) {
 	const [state, widget] = useWidgetWithConfig(createAlert, props, 'alert', {...defaultConfig, slotDefault: props.children});
 	const refTransition = useDirective(widget.directives.transitionDirective);
 	useImperativeHandle(ref, () => widget.api, []);