Generated fwk bootstrap component types

[quentinderoubaix]

Context
This issue is about the exported types for components from the packages @agnos-ui/{framework}-bootstrap.

We have a lot of duplicated code in the component files to export mapped types.
Those mapped types are necessary as the types of the slot props need to be updated for each framework.

However this results in complex types for end-users. Also, it was complex for certain cases, like the Accordion registerItem api or the Modal api patch method...
Finally, this code was almost identical for each combo of framework / component and was unnecessary work to be done for each component. We even have some inconsistencies between frameworks / components.

Proposal
Add a generator to export simple types for each framework / component based on the types specified in core / core-bootstrap.

A concrete example, for the Slider in React, we would replace:

import {createSlider as coreCreateSlider} from '@agnos-ui/core-bootstrap/components/slider';

export * from '@agnos-ui/core-bootstrap/components/slider';

export type SliderWidget = AdaptWidgetSlots<import('@agnos-ui/core-bootstrap/components/slider').SliderWidget>;
export type SliderProps = WidgetProps<SliderWidget>;
export type SliderState = WidgetState<SliderWidget>;
export type SliderContext = AdaptSlotContentProps<import('@agnos-ui/core-bootstrap/components/slider').SliderContext>;
export type SliderSlotLabelContext = AdaptSlotContentProps<import('@agnos-ui/core-bootstrap/components/slider').SliderSlotLabelContext>;
export type SliderSlotHandleContext = AdaptSlotContentProps<import('@agnos-ui/core-bootstrap/components/slider').SliderSlotHandleContext>;
export const createSlider: WidgetFactory<SliderWidget> = coreCreateSlider as any;

to

import {createSlider as coreCreateSlider} from '@agnos-ui/core-bootstrap/components/slider';

export * from './gen-slider.d.ts';
export const createSlider: WidgetFactory<SliderWidget> = coreCreateSlider as any;

with the file gen-slider.d.ts automatically generated containing:

import type {SlotContent} from '../../types';

export interface SliderProps {
  	// all the slider props with their jsdoc, like the following example. maybe even the @defaultValue filled based on the default config ?
  	/**
	 * If `true` the min and max labels are displayed on the slider
	 */
	showMinMaxLabels: boolean;
	// all the slot props with their jsdoc, like the following example.
	/**
	 * Slot to change the default display of the slider
	 */
	slotStructure: SlotContent<SliderContext>;
}

// all the other interfaces / types

Note:
Generator needs to be well tested to avoid any issue like missing a property / api and so on.

Implementation

• create the script and apply to React
• apply it to Angular and Svelte