@agnos-ui/react-headless 0.0.1-alpha.6 → 0.0.1-alpha.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/accordion/index.d.ts +1 -0
- package/components/accordion/index.js +1 -0
- package/components/alert/index.d.ts +1 -0
- package/components/alert/index.js +1 -0
- package/components/modal/index.d.ts +1 -0
- package/components/modal/index.js +1 -0
- package/components/pagination/index.d.ts +1 -0
- package/components/pagination/index.js +1 -0
- package/components/progressbar/index.d.ts +1 -0
- package/components/progressbar/index.js +1 -0
- package/components/rating/index.d.ts +1 -0
- package/components/rating/index.js +1 -0
- package/components/select/index.d.ts +1 -0
- package/components/select/index.js +1 -0
- package/components/slider/index.d.ts +1 -0
- package/components/slider/index.js +1 -0
- package/config.d.ts +8 -0
- package/config.js +11 -1
- package/index.d.ts +8 -8
- package/index.js +8 -8
- package/package.json +3 -3
- package/slot.d.ts +10 -0
- package/slot.js +10 -0
- package/utils/directive.js +18 -0
- package/utils/portal.d.ts +8 -0
- package/utils/portal.js +8 -0
- package/utils/stores.d.ts +12 -0
- package/utils/stores.js +12 -0
- package/utils/widget.d.ts +10 -0
- package/utils/widget.js +10 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './accordion';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './accordion';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './alert';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './alert';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './modal';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './modal';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './pagination';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './pagination';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './progressbar';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './progressbar';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './rating';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './rating';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './select';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './select';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './slider';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './slider';
|
package/config.d.ts
CHANGED
|
@@ -10,6 +10,14 @@ type DefaultConfigInput<Config> = Partial2Levels<Config> & {
|
|
|
10
10
|
adaptParentConfig?: (config: Partial2Levels<Config>) => Partial2Levels<Config>;
|
|
11
11
|
children?: ReactNode | undefined;
|
|
12
12
|
};
|
|
13
|
+
/**
|
|
14
|
+
* A factory to create the use functions and react component to allow widgets to be context-aware.
|
|
15
|
+
*
|
|
16
|
+
* It can be used when extending the core and creating new widgets.
|
|
17
|
+
*
|
|
18
|
+
* @param widgetsConfigContext - the widgets config context
|
|
19
|
+
* @returns the use functions and react component
|
|
20
|
+
*/
|
|
13
21
|
export declare const widgetsConfigFactory: <Config extends {
|
|
14
22
|
[widgetName: string]: object;
|
|
15
23
|
} = WidgetsConfig>(widgetsConfigContext?: import("react").Context<WidgetsConfigStore<Config> | undefined>) => {
|
package/config.js
CHANGED
|
@@ -5,6 +5,14 @@ import { createContext, useContext, useEffect, useMemo } from 'react';
|
|
|
5
5
|
import { useWidget } from './utils/widget';
|
|
6
6
|
import { usePropsAsStore } from './utils/stores';
|
|
7
7
|
export * from '@agnos-ui/core/config';
|
|
8
|
+
/**
|
|
9
|
+
* A factory to create the use functions and react component to allow widgets to be context-aware.
|
|
10
|
+
*
|
|
11
|
+
* It can be used when extending the core and creating new widgets.
|
|
12
|
+
*
|
|
13
|
+
* @param widgetsConfigContext - the widgets config context
|
|
14
|
+
* @returns the use functions and react component
|
|
15
|
+
*/
|
|
8
16
|
export const widgetsConfigFactory = (widgetsConfigContext = createContext(undefined)) => {
|
|
9
17
|
const useWidgetContext = (widgetName, defaultConfig) => {
|
|
10
18
|
const widgetsConfig = useContext(widgetsConfigContext);
|
|
@@ -23,7 +31,9 @@ export const widgetsConfigFactory = (widgetsConfigContext = createContext(undefi
|
|
|
23
31
|
* If adaptParentConfig is not specified, this step is skipped.
|
|
24
32
|
* - second step: the configuration from step 1 is merged (2-levels deep) with the properties of the component.
|
|
25
33
|
*
|
|
26
|
-
* @param
|
|
34
|
+
* @param componentInputs - the react component inputs
|
|
35
|
+
* @param componentInputs.children - the react component children
|
|
36
|
+
* @param componentInputs.adaptParentConfig - optional function that receives a 2-levels copy of the widgets default configuration
|
|
27
37
|
* defined at an upper level in the Svelte context hierarchy (or an empty object if there is none) and returns the widgets
|
|
28
38
|
* default configuration to be used.
|
|
29
39
|
* It is called only if the configuration is needed, and was not yet computed for the current value of the parent configuration.
|
package/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export * from './components/accordion
|
|
2
|
-
export * from './components/alert
|
|
3
|
-
export * from './components/modal
|
|
4
|
-
export * from './components/pagination
|
|
5
|
-
export * from './components/progressbar
|
|
6
|
-
export * from './components/rating
|
|
7
|
-
export * from './components/select
|
|
8
|
-
export * from './components/slider
|
|
1
|
+
export * from './components/accordion';
|
|
2
|
+
export * from './components/alert';
|
|
3
|
+
export * from './components/modal';
|
|
4
|
+
export * from './components/pagination';
|
|
5
|
+
export * from './components/progressbar';
|
|
6
|
+
export * from './components/rating';
|
|
7
|
+
export * from './components/select';
|
|
8
|
+
export * from './components/slider';
|
|
9
9
|
export * from './generated';
|
package/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export * from './components/accordion
|
|
2
|
-
export * from './components/alert
|
|
3
|
-
export * from './components/modal
|
|
4
|
-
export * from './components/pagination
|
|
5
|
-
export * from './components/progressbar
|
|
6
|
-
export * from './components/rating
|
|
7
|
-
export * from './components/select
|
|
8
|
-
export * from './components/slider
|
|
1
|
+
export * from './components/accordion';
|
|
2
|
+
export * from './components/alert';
|
|
3
|
+
export * from './components/modal';
|
|
4
|
+
export * from './components/pagination';
|
|
5
|
+
export * from './components/progressbar';
|
|
6
|
+
export * from './components/rating';
|
|
7
|
+
export * from './components/select';
|
|
8
|
+
export * from './components/slider';
|
|
9
9
|
export * from './generated';
|
package/package.json
CHANGED
|
@@ -39,8 +39,8 @@
|
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@agnos-ui/core": "0.0.1-alpha.
|
|
43
|
-
"@amadeus-it-group/tansu": "0.0
|
|
42
|
+
"@agnos-ui/core": "0.0.1-alpha.8",
|
|
43
|
+
"@amadeus-it-group/tansu": "1.0.0",
|
|
44
44
|
"classnames": "^2.5.1"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"react-dom": "*"
|
|
49
49
|
},
|
|
50
50
|
"sideEffects": false,
|
|
51
|
-
"version": "0.0.1-alpha.
|
|
51
|
+
"version": "0.0.1-alpha.8",
|
|
52
52
|
"homepage": "https://amadeusitgroup.github.io/AgnosUI/latest/",
|
|
53
53
|
"bugs": "https://github.com/AmadeusITGroup/AgnosUI/issues",
|
|
54
54
|
"license": "MIT",
|
package/slot.d.ts
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
1
|
import type { SlotContent } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* The React Slot component, allowing to extensively customize widgets.
|
|
4
|
+
*
|
|
5
|
+
* The input slotContent can be a react component, a function or jsx.
|
|
6
|
+
*
|
|
7
|
+
* @param parameter - the react component parameter
|
|
8
|
+
* @param parameter.slotContent - the slot content
|
|
9
|
+
* @param parameter.props - the react component props
|
|
10
|
+
* @returns the slot component
|
|
11
|
+
*/
|
|
2
12
|
export declare const Slot: <Props extends object>({ slotContent, props }: {
|
|
3
13
|
slotContent: SlotContent<Props>;
|
|
4
14
|
props: Props;
|
package/slot.js
CHANGED
|
@@ -15,6 +15,16 @@ const slotWrapper = (slotContent) => {
|
|
|
15
15
|
};
|
|
16
16
|
/* eslint-disable-next-line @typescript-eslint/ban-types */
|
|
17
17
|
const isReactComponent = (item) => item.prototype instanceof Component;
|
|
18
|
+
/**
|
|
19
|
+
* The React Slot component, allowing to extensively customize widgets.
|
|
20
|
+
*
|
|
21
|
+
* The input slotContent can be a react component, a function or jsx.
|
|
22
|
+
*
|
|
23
|
+
* @param parameter - the react component parameter
|
|
24
|
+
* @param parameter.slotContent - the slot content
|
|
25
|
+
* @param parameter.props - the react component props
|
|
26
|
+
* @returns the slot component
|
|
27
|
+
*/
|
|
18
28
|
export const Slot = ({ slotContent, props }) => {
|
|
19
29
|
const isFunction = typeof slotContent === 'function';
|
|
20
30
|
if (isFunction) {
|
package/utils/directive.js
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
import { mergeDirectives } from '@agnos-ui/core/utils/directive';
|
|
2
2
|
import { useCallback, useMemo, useRef } from 'react';
|
|
3
3
|
export * from '@agnos-ui/core/utils/directive';
|
|
4
|
+
/**
|
|
5
|
+
* The useDirective function.
|
|
6
|
+
*
|
|
7
|
+
* Allows to attach a provided directive to the current react component.
|
|
8
|
+
*
|
|
9
|
+
* @param directive - the directive
|
|
10
|
+
* @param args - the args to pass to the directive
|
|
11
|
+
* @returns the ref callback
|
|
12
|
+
*/
|
|
4
13
|
export function useDirective(directive, args) {
|
|
5
14
|
const instance = useRef();
|
|
6
15
|
const propsRef = useRef();
|
|
@@ -15,6 +24,15 @@ export function useDirective(directive, args) {
|
|
|
15
24
|
instance.current?.update?.(args);
|
|
16
25
|
return ref;
|
|
17
26
|
}
|
|
27
|
+
/**
|
|
28
|
+
* The useDirectives function.
|
|
29
|
+
*
|
|
30
|
+
* Allows to attach multiple directives to the current react component.
|
|
31
|
+
*
|
|
32
|
+
* @param directives - directives
|
|
33
|
+
* @param args - the args to pass to the directives
|
|
34
|
+
* @returns the ref callback
|
|
35
|
+
*/
|
|
18
36
|
export function useDirectives(directives, args) {
|
|
19
37
|
const mergedDirectives = useMemo(() => mergeDirectives(...directives), directives);
|
|
20
38
|
return useDirective(mergedDirectives, args);
|
package/utils/portal.d.ts
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
import type { PropsWithChildren } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* A Portal component, allowing to attach content to an external container.
|
|
4
|
+
*
|
|
5
|
+
* @param param - the react component inputs
|
|
6
|
+
* @param param.children - the react component children
|
|
7
|
+
* @param param.container - the container to attach the portal to
|
|
8
|
+
* @returns the portal component
|
|
9
|
+
*/
|
|
2
10
|
export declare const Portal: ({ children, container }: PropsWithChildren<{
|
|
3
11
|
container: Element | DocumentFragment | null | undefined;
|
|
4
12
|
}>) => import("react/jsx-runtime").JSX.Element;
|
package/utils/portal.js
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
1
|
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
+
/**
|
|
4
|
+
* A Portal component, allowing to attach content to an external container.
|
|
5
|
+
*
|
|
6
|
+
* @param param - the react component inputs
|
|
7
|
+
* @param param.children - the react component children
|
|
8
|
+
* @param param.container - the container to attach the portal to
|
|
9
|
+
* @returns the portal component
|
|
10
|
+
*/
|
|
3
11
|
export const Portal = ({ children, container }) => container ? createPortal(children, container) : _jsx(_Fragment, { children: children });
|
package/utils/stores.d.ts
CHANGED
|
@@ -1,4 +1,16 @@
|
|
|
1
1
|
import type { ReadableSignal } from '@amadeus-it-group/tansu';
|
|
2
2
|
export * from '@agnos-ui/core/utils/stores';
|
|
3
|
+
/**
|
|
4
|
+
* Observe a readable store inside of a react component.
|
|
5
|
+
*
|
|
6
|
+
* @param store$ - the readable store
|
|
7
|
+
* @returns the observed value of the store
|
|
8
|
+
*/
|
|
3
9
|
export declare function useObservable<T>(store$: ReadableSignal<T>): T;
|
|
10
|
+
/**
|
|
11
|
+
* Turn react props into readable stores.
|
|
12
|
+
*
|
|
13
|
+
* @param props - the props
|
|
14
|
+
* @returns the readable stores
|
|
15
|
+
*/
|
|
4
16
|
export declare const usePropsAsStore: <T extends object>(props?: Partial<T> | undefined) => ReadableSignal<Partial<T>>;
|
package/utils/stores.js
CHANGED
|
@@ -2,6 +2,12 @@ import { findChangedProperties } from '@agnos-ui/core/utils/stores';
|
|
|
2
2
|
import { asReadable, writable } from '@amadeus-it-group/tansu';
|
|
3
3
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
4
4
|
export * from '@agnos-ui/core/utils/stores';
|
|
5
|
+
/**
|
|
6
|
+
* Observe a readable store inside of a react component.
|
|
7
|
+
*
|
|
8
|
+
* @param store$ - the readable store
|
|
9
|
+
* @returns the observed value of the store
|
|
10
|
+
*/
|
|
5
11
|
export function useObservable(store$) {
|
|
6
12
|
const [value, setValue] = useState(() => store$());
|
|
7
13
|
useEffect(() => {
|
|
@@ -14,6 +20,12 @@ export function useObservable(store$) {
|
|
|
14
20
|
return value;
|
|
15
21
|
}
|
|
16
22
|
const propsEqual = (a, b) => !findChangedProperties(a, b);
|
|
23
|
+
/**
|
|
24
|
+
* Turn react props into readable stores.
|
|
25
|
+
*
|
|
26
|
+
* @param props - the props
|
|
27
|
+
* @returns the readable stores
|
|
28
|
+
*/
|
|
17
29
|
export const usePropsAsStore = (props) => {
|
|
18
30
|
const storeRef = useRef();
|
|
19
31
|
if (!storeRef.current) {
|
package/utils/widget.d.ts
CHANGED
|
@@ -1,2 +1,12 @@
|
|
|
1
1
|
import type { PropsConfig, Widget, WidgetFactory, WidgetProps, WidgetState } from '@agnos-ui/core/types';
|
|
2
|
+
/**
|
|
3
|
+
* The useWidget function.
|
|
4
|
+
*
|
|
5
|
+
* Allows to create and attach an agnos-ui/core widget to the current react component.
|
|
6
|
+
*
|
|
7
|
+
* @param createWidget - the widget factory
|
|
8
|
+
* @param props - the props
|
|
9
|
+
* @param propsConfig - the props config
|
|
10
|
+
* @returns the state and api to track and interact with the widget
|
|
11
|
+
*/
|
|
2
12
|
export declare function useWidget<W extends Widget>(createWidget: WidgetFactory<W>, props?: Partial<WidgetProps<W>>, propsConfig?: PropsConfig<WidgetProps<W>>): [WidgetState<W>, W];
|
package/utils/widget.js
CHANGED
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import { findChangedProperties } from '@agnos-ui/core/utils/stores';
|
|
2
2
|
import { useEffect, useMemo, useRef } from 'react';
|
|
3
3
|
import { useObservable } from './stores';
|
|
4
|
+
/**
|
|
5
|
+
* The useWidget function.
|
|
6
|
+
*
|
|
7
|
+
* Allows to create and attach an agnos-ui/core widget to the current react component.
|
|
8
|
+
*
|
|
9
|
+
* @param createWidget - the widget factory
|
|
10
|
+
* @param props - the props
|
|
11
|
+
* @param propsConfig - the props config
|
|
12
|
+
* @returns the state and api to track and interact with the widget
|
|
13
|
+
*/
|
|
4
14
|
export function useWidget(createWidget, props = {}, propsConfig) {
|
|
5
15
|
const api = useMemo(() => createWidget({ ...propsConfig, props: { ...propsConfig?.props, ...props } }), []);
|
|
6
16
|
const previousProps = useRef(props);
|