@agnos-ui/react-headless 0.0.1-alpha.1

package/Portal.d.ts

@@ -0,0 +1,4 @@
+import type { PropsWithChildren } from 'react';
+export declare const Portal: ({ children, container }: PropsWithChildren<{
+    container: Element | DocumentFragment | null | undefined;
+}>) => import("react/jsx-runtime").JSX.Element;

package/Portal.js

@@ -0,0 +1,3 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+export const Portal = ({ children, container }) => container ? createPortal(children, container) : _jsx(_Fragment, { children: children });

package/README.md

@@ -0,0 +1,15 @@
+# @agnos-ui/react-headless
+
+[![npm](https://img.shields.io/npm/v/@agnos-ui/react-headless)](https://www.npmjs.com/package/@agnos-ui/react-headless)
+
+Headless widget library for [React](https://react.dev/).
+
+## Installation
+
+```sh
+npm install @agnos-ui/react-headless
+```
+
+## Usage
+
+Please check [our demo site](https://amadeusitgroup.github.io/AgnosUI/latest/) to see all the available widgets and how to use them.

package/Slot.d.ts

@@ -0,0 +1,5 @@
+import type { SlotContent } from './utils';
+export declare const Slot: <Props extends object>({ slotContent, props }: {
+    slotContent: SlotContent<Props>;
+    props: Props;
+}) => import("react/jsx-runtime").JSX.Element;

package/Slot.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Component } from 'react';
+const slotWrapperCache = new WeakMap();
+const slotWrapperFactory = (slotContent) => {
+    const SlotWrapper = (props) => _jsx(_Fragment, { children: slotContent(props) });
+    return SlotWrapper;
+};
+const slotWrapper = (slotContent) => {
+    let res = slotWrapperCache.get(slotContent);
+    if (!res) {
+        res = slotWrapperFactory(slotContent);
+        slotWrapperCache.set(slotContent, res);
+    }
+    return res;
+};
+/* eslint-disable-next-line @typescript-eslint/ban-types */
+const isReactComponent = (item) => item.prototype instanceof Component;
+export const Slot = ({ slotContent, props }) => {
+    const isFunction = typeof slotContent === 'function';
+    if (isFunction) {
+        const SlotComponent = isReactComponent(slotContent) ? slotContent : slotWrapper(slotContent);
+        return _jsx(SlotComponent, { ...props });
+    }
+    return _jsx(_Fragment, { children: slotContent });
+};

package/WidgetsDefaultConfig.d.ts

@@ -0,0 +1,48 @@
+import type { Partial2Levels } from '@agnos-ui/core';
+import type { PropsWithChildren } from 'react';
+import type { WidgetsConfig } from './utils';
+/**
+ * React component that provides in the React context (for all AgnosUI descendant widgets) a new widgets default configuration
+ * store that inherits from any widgets default configuration store already defined at an upper level in the React context hierarchy.
+ * It contains its own set of widgets configuration properties that override the same properties form the parent configuration.
+ *
+ * @remarks
+ * The configuration is computed from the parent configuration in two steps:
+ * - first step: the parent configuration is transformed by the adaptParentConfig function (if specified).
+ * If adaptParentConfig is not specified, this step is skipped.
+ * - second step: the configuration from step 1 is merged (2-levels deep) with the properties of the component.
+ *
+ * @param adaptParentConfig - optional function that receives a 2-levels copy of the widgets default configuration
+ * defined at an upper level in the Svelte context hierarchy (or an empty object if there is none) and returns the widgets
+ * default configuration to be used.
+ * It is called only if the configuration is needed, and was not yet computed for the current value of the parent configuration.
+ * It is called in a tansu reactive context, so it can use any tansu store and will be called again if those stores change.
+ *
+ * @returns the resulting widgets default configuration store, which contains 3 additional properties that are stores:
+ * parent$, adaptedParent$ (containing the value computed after the first step), and own$ (that contains only overridding properties).
+ * The resulting store is writable, its set function is actually the set function of the own$ store.
+ *
+ * @example
+ * ```tsx
+ * <WidgetsDefaultConfig
+ *   adaptParentConfig={(parentConfig) => {
+ *     parentConfig.rating = parentConfig.rating ?? {};
+ *     parentConfig.rating.className = `${parentConfig.rating.className ?? ''} my-rating-extra-class`
+ *     return parentConfig;
+ *   }}
+ *   rating={{slotStar: MyCustomSlotStar}}
+ * />
+ * ```
+ */
+export declare const WidgetsDefaultConfig: ({ children, adaptParentConfig, ...props }: Partial<{
+    pagination: Partial<import("./utils").AdaptPropsSlots<import("@agnos-ui/core").PaginationProps>>;
+    rating: Partial<import("./utils").AdaptPropsSlots<import("@agnos-ui/core").RatingProps>>;
+    select: Partial<import("./utils").AdaptPropsSlots<import("@agnos-ui/core").SelectProps<any>>>;
+    modal: Partial<import("./utils").AdaptPropsSlots<import("@agnos-ui/core").ModalProps>>;
+    alert: Partial<import("./utils").AdaptPropsSlots<import("@agnos-ui/core").AlertProps>>;
+    accordion: Partial<import("./utils").AdaptPropsSlots<import("@agnos-ui/core").AccordionProps>>;
+}> & {
+    children?: import("react").ReactNode;
+} & {
+    adaptParentConfig?: ((config: Partial2Levels<WidgetsConfig>) => Partial2Levels<WidgetsConfig>) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/WidgetsDefaultConfig.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createWidgetsConfig } from '@agnos-ui/core';
+import { useContext, useEffect, useMemo } from 'react';
+import { widgetsConfigContext } from './utils';
+/**
+ * React component that provides in the React context (for all AgnosUI descendant widgets) a new widgets default configuration
+ * store that inherits from any widgets default configuration store already defined at an upper level in the React context hierarchy.
+ * It contains its own set of widgets configuration properties that override the same properties form the parent configuration.
+ *
+ * @remarks
+ * The configuration is computed from the parent configuration in two steps:
+ * - first step: the parent configuration is transformed by the adaptParentConfig function (if specified).
+ * If adaptParentConfig is not specified, this step is skipped.
+ * - second step: the configuration from step 1 is merged (2-levels deep) with the properties of the component.
+ *
+ * @param adaptParentConfig - optional function that receives a 2-levels copy of the widgets default configuration
+ * defined at an upper level in the Svelte context hierarchy (or an empty object if there is none) and returns the widgets
+ * default configuration to be used.
+ * It is called only if the configuration is needed, and was not yet computed for the current value of the parent configuration.
+ * It is called in a tansu reactive context, so it can use any tansu store and will be called again if those stores change.
+ *
+ * @returns the resulting widgets default configuration store, which contains 3 additional properties that are stores:
+ * parent$, adaptedParent$ (containing the value computed after the first step), and own$ (that contains only overridding properties).
+ * The resulting store is writable, its set function is actually the set function of the own$ store.
+ *
+ * @example
+ * ```tsx
+ * <WidgetsDefaultConfig
+ *   adaptParentConfig={(parentConfig) => {
+ *     parentConfig.rating = parentConfig.rating ?? {};
+ *     parentConfig.rating.className = `${parentConfig.rating.className ?? ''} my-rating-extra-class`
+ *     return parentConfig;
+ *   }}
+ *   rating={{slotStar: MyCustomSlotStar}}
+ * />
+ * ```
+ */
+export const WidgetsDefaultConfig = ({ children, adaptParentConfig, ...props }) => {
+    const config$ = useContext(widgetsConfigContext);
+    let storeRecreated = false;
+    const store$ = useMemo(() => {
+        const store = createWidgetsConfig(config$, adaptParentConfig);
+        store.set(props);
+        storeRecreated = true;
+        return store;
+    }, [config$, adaptParentConfig]);
+    useEffect(() => {
+        if (!storeRecreated) {
+            store$.set(props);
+        }
+    }, [props]);
+    return _jsx(widgetsConfigContext.Provider, { value: store$, children: children });
+};

package/index.d.ts

@@ -0,0 +1,34 @@
+export * from '@agnos-ui/core';
+export * from './Portal';
+export * from './Slot';
+export * from './WidgetsDefaultConfig';
+export * from './utils';
+import type { WidgetProps, WidgetState } from '@agnos-ui/core';
+import type { AdaptSlotContentProps, AdaptWidgetSlots } from './utils';
+export type { SlotContent, WidgetsConfig } from './utils';
+export type AccordionWidget = AdaptWidgetSlots<import('@agnos-ui/core').AccordionWidget>;
+export type AccordionProps = WidgetProps<AccordionWidget>;
+export type AccordionState = WidgetState<AccordionWidget>;
+export type AccordionItemWidget = AdaptWidgetSlots<import('@agnos-ui/core').AccordionItemWidget>;
+export type AccordionItemProps = WidgetProps<AccordionItemWidget>;
+export type AccordionItemState = WidgetState<AccordionItemWidget>;
+export type AccordionItemContext = AdaptSlotContentProps<import('@agnos-ui/core').AccordionItemContext>;
+export type AlertWidget = AdaptWidgetSlots<import('@agnos-ui/core').AlertWidget>;
+export type AlertProps = WidgetProps<AlertWidget>;
+export type AlertState = WidgetState<AlertWidget>;
+export type AlertContext = AdaptSlotContentProps<import('@agnos-ui/core').AlertContext>;
+export type ModalWidget = AdaptWidgetSlots<import('@agnos-ui/core').ModalWidget>;
+export type ModalProps = WidgetProps<ModalWidget>;
+export type ModalState = WidgetState<ModalWidget>;
+export type ModalContext = AdaptSlotContentProps<import('@agnos-ui/core').ModalContext>;
+export type PaginationWidget = AdaptWidgetSlots<import('@agnos-ui/core').PaginationWidget>;
+export type PaginationProps = WidgetProps<PaginationWidget>;
+export type PaginationState = WidgetState<PaginationWidget>;
+export type PaginationContext = AdaptSlotContentProps<import('@agnos-ui/core').PaginationContext>;
+export type PaginationNumberContext = AdaptSlotContentProps<import('@agnos-ui/core').PaginationNumberContext>;
+export type RatingWidget = AdaptWidgetSlots<import('@agnos-ui/core').RatingWidget>;
+export type RatingProps = WidgetProps<RatingWidget>;
+export type RatingState = WidgetState<RatingWidget>;
+export type SelectWidget<Item> = AdaptWidgetSlots<import('@agnos-ui/core').SelectWidget<Item>>;
+export type SelectProps<Item> = WidgetProps<SelectWidget<Item>>;
+export type SelectState<Item> = WidgetState<SelectWidget<Item>>;

package/index.js

@@ -0,0 +1,5 @@
+export * from '@agnos-ui/core';
+export * from './Portal';
+export * from './Slot';
+export * from './WidgetsDefaultConfig';
+export * from './utils';

package/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "@agnos-ui/react-headless",
+	"type": "module",
+	"main": "./index.js",
+	"module": "./index.js",
+	"types": "./index.d.ts",
+	"exports": {
+		".": {
+			"types": "./index.d.ts",
+			"default": "./index.js"
+		}
+	},
+	"dependencies": {
+		"@agnos-ui/core": "0.0.1-alpha.1",
+		"@amadeus-it-group/tansu": "0.0.22",
+		"classnames": "^2.3.2"
+	},
+	"peerDependencies": {
+		"react": "*",
+		"react-dom": "*"
+	},
+	"sideEffects": false,
+	"version": "0.0.1-alpha.1",
+	"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
+	"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/AmadeusITGroup/AgnosUI.git",
+		"directory": "react/headless"
+	},
+	"keywords": [
+		"react",
+		"headless",
+		"components",
+		"widgets",
+		"accordion",
+		"alert",
+		"modal",
+		"pagination",
+		"rating"
+	]
+}

package/utils.d.ts

@@ -0,0 +1,22 @@
+import type { Directive, Widget, WidgetFactory, WidgetProps, WidgetState, WidgetsConfigStore } from '@agnos-ui/core';
+import type { ReadableSignal } from '@amadeus-it-group/tansu';
+import type { RefCallback } from 'react';
+import type { SlotContent as CoreSlotContent, WidgetsConfig as CoreWidgetsConfig, WidgetSlotContext } from '@agnos-ui/core';
+export type SlotContent<Props extends object = object> = CoreSlotContent<Props> | ((props: Props) => React.ReactNode) | React.ComponentType<Props> | React.ReactNode;
+export type AdaptSlotContentProps<Props extends Record<string, any>> = Props extends WidgetSlotContext<infer U> ? WidgetSlotContext<AdaptWidgetSlots<U>> & AdaptPropsSlots<Omit<Props, keyof WidgetSlotContext<any>>> : AdaptPropsSlots<Props>;
+export type AdaptPropsSlots<Props> = Omit<Props, `slot${string}`> & {
+    [K in keyof Props & `slot${string}`]: Props[K] extends CoreSlotContent<infer U> ? SlotContent<AdaptSlotContentProps<U>> : Props[K];
+};
+export type WidgetsConfig = {
+    [WidgetName in keyof CoreWidgetsConfig]: AdaptPropsSlots<CoreWidgetsConfig[WidgetName]>;
+};
+export type AdaptWidgetSlots<W extends Widget> = Widget<AdaptPropsSlots<WidgetProps<W>>, AdaptPropsSlots<WidgetState<W>>, W['api'], W['actions'], W['directives']>;
+export declare function useWidget<Factory extends (...arg: any[]) => Widget>(createWidget: Factory, props?: Partial<WidgetProps<ReturnType<Factory>>>, ...initProps: Parameters<Factory>): [WidgetState<ReturnType<Factory>>, ReturnType<Factory>];
+export declare function useObservable<T>(store$: ReadableSignal<T>): T;
+export declare function useDirective(directive: Directive<void>): RefCallback<HTMLElement>;
+export declare function useDirective<T>(directive: Directive<T>, args: T): RefCallback<HTMLElement>;
+/**
+ * React context which can be used to provide or consume the widgets default configuration store.
+ */
+export declare const widgetsConfigContext: import("react").Context<WidgetsConfigStore<WidgetsConfig> | undefined>;
+export declare const useWidgetWithConfig: <W extends Widget<object, object, object, object, object>>(factory: WidgetFactory<W>, props: Partial<AdaptPropsSlots<WidgetProps<W>>> | undefined, widgetName: keyof WidgetsConfig | null, defaultProps?: Partial<AdaptPropsSlots<WidgetProps<W>>> | undefined) => [AdaptPropsSlots<WidgetState<W>>, AdaptWidgetSlots<W>];

package/utils.js

@@ -0,0 +1,67 @@
+import { findChangedProperties } from '@agnos-ui/core';
+import { asReadable, computed, writable } from '@amadeus-it-group/tansu';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+export function useWidget(createWidget, props = {}, ...initProps) {
+    const apiRef = useRef(undefined);
+    if (!apiRef.current) {
+        apiRef.current = createWidget(...initProps);
+        apiRef.current.patch(props);
+    }
+    const api = apiRef.current;
+    const previousProps = useRef(props);
+    useEffect(() => {
+        const changedProps = findChangedProperties(previousProps.current, props);
+        previousProps.current = props;
+        if (changedProps) {
+            api.patch(changedProps);
+        }
+    }, [props]);
+    const state = useObservable(api.state$);
+    return [state, api];
+}
+export function useObservable(store$) {
+    const [value, setValue] = useState(() => store$());
+    useEffect(() => {
+        return store$.subscribe((arg) => {
+            // We're passing an update function to setValue here instead of just doing setValue(arg) so that
+            // if arg is a function, it is properly used as the value instead of being called as an update function
+            setValue(() => arg);
+        });
+    }, [store$]);
+    return value;
+}
+export function useDirective(directive, args) {
+    const instance = useRef();
+    const propsRef = useRef();
+    const ref = useCallback((element) => {
+        instance.current?.destroy?.();
+        instance.current = undefined;
+        if (element) {
+            instance.current = directive(element, propsRef.current);
+        }
+    }, [directive]);
+    propsRef.current = args;
+    instance.current?.update?.(args);
+    return ref;
+}
+/**
+ * React context which can be used to provide or consume the widgets default configuration store.
+ */
+export const widgetsConfigContext = createContext(undefined);
+const propsEqual = (a, b) => !findChangedProperties(a, b);
+const usePropsAsStore = (props) => {
+    const storeRef = useRef();
+    if (!storeRef.current) {
+        storeRef.current = writable({ ...props }, { equal: propsEqual });
+    }
+    useEffect(() => {
+        storeRef.current.set({ ...props });
+    }, [props]);
+    return useMemo(() => asReadable(storeRef.current), [storeRef.current]);
+};
+const useWidgetContext = (widgetName, defaultConfig) => {
+    const widgetsConfig = useContext(widgetsConfigContext);
+    const defaultConfig$ = usePropsAsStore(defaultConfig);
+    return useMemo(() => computed(() => ({ ...defaultConfig$(), ...(widgetName ? widgetsConfig?.()[widgetName] : undefined) })), [widgetsConfig]);
+};
+export const useWidgetWithConfig = (factory, props, widgetName, defaultProps) => useWidget(factory, props, useWidgetContext(widgetName, defaultProps));