@a2ui-sdk/react 0.1.1 → 0.2.1
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/dist/0.8/components/ComponentRenderer.d.ts +1 -19
- package/dist/0.8/components/ComponentRenderer.js +21 -63
- package/dist/0.8/components/UnknownComponent.d.ts +3 -3
- package/dist/0.8/components/display/AudioPlayerComponent.d.ts +3 -2
- package/dist/0.8/components/display/DividerComponent.d.ts +3 -2
- package/dist/0.8/components/display/IconComponent.d.ts +3 -2
- package/dist/0.8/components/display/ImageComponent.d.ts +3 -2
- package/dist/0.8/components/display/TextComponent.d.ts +3 -2
- package/dist/0.8/components/display/VideoComponent.d.ts +3 -2
- package/dist/0.8/components/index.d.ts +1 -1
- package/dist/0.8/components/interactive/ButtonComponent.d.ts +3 -2
- package/dist/0.8/components/interactive/CheckBoxComponent.d.ts +3 -2
- package/dist/0.8/components/interactive/DateTimeInputComponent.d.ts +3 -2
- package/dist/0.8/components/interactive/MultipleChoiceComponent.d.ts +3 -2
- package/dist/0.8/components/interactive/SliderComponent.d.ts +3 -2
- package/dist/0.8/components/interactive/TextFieldComponent.d.ts +3 -2
- package/dist/0.8/components/layout/CardComponent.d.ts +3 -2
- package/dist/0.8/components/layout/ColumnComponent.d.ts +3 -2
- package/dist/0.8/components/layout/ListComponent.d.ts +3 -2
- package/dist/0.8/components/layout/ModalComponent.d.ts +3 -2
- package/dist/0.8/components/layout/RowComponent.d.ts +3 -2
- package/dist/0.8/components/layout/TabsComponent.d.ts +3 -2
- package/dist/0.8/components/types.d.ts +8 -0
- package/dist/0.8/contexts/A2UIProvider.d.ts +37 -23
- package/dist/0.8/contexts/A2UIProvider.js +16 -22
- package/dist/0.8/contexts/ActionContext.js +5 -5
- package/dist/0.8/contexts/ComponentsMapContext.d.ts +8 -21
- package/dist/0.8/contexts/ComponentsMapContext.js +12 -16
- package/dist/0.8/contexts/DataModelContext.js +3 -3
- package/dist/0.8/index.d.ts +3 -1
- package/dist/0.8/index.js +11 -9
- package/dist/0.8/standard-catalog/index.d.ts +57 -0
- package/dist/0.8/standard-catalog/index.js +66 -0
- package/dist/0.9/A2UIRenderer.d.ts +9 -29
- package/dist/0.9/A2UIRenderer.js +27 -26
- package/dist/0.9/components/ComponentRenderer.d.ts +5 -19
- package/dist/0.9/components/ComponentRenderer.js +30 -17
- package/dist/0.9/components/UnknownComponent.d.ts +8 -2
- package/dist/0.9/components/UnknownComponent.js +13 -11
- package/dist/0.9/components/display/AudioPlayerComponent.d.ts +3 -2
- package/dist/0.9/components/display/AudioPlayerComponent.js +16 -14
- package/dist/0.9/components/display/DividerComponent.d.ts +3 -2
- package/dist/0.9/components/display/DividerComponent.js +4 -5
- package/dist/0.9/components/display/IconComponent.d.ts +3 -2
- package/dist/0.9/components/display/IconComponent.js +12 -12
- package/dist/0.9/components/display/ImageComponent.d.ts +3 -2
- package/dist/0.9/components/display/ImageComponent.js +18 -15
- package/dist/0.9/components/display/TextComponent.d.ts +3 -2
- package/dist/0.9/components/display/TextComponent.js +10 -8
- package/dist/0.9/components/display/VideoComponent.d.ts +3 -2
- package/dist/0.9/components/display/VideoComponent.js +7 -6
- package/dist/0.9/components/index.d.ts +4 -8
- package/dist/0.9/components/interactive/ButtonComponent.d.ts +3 -2
- package/dist/0.9/components/interactive/ButtonComponent.js +25 -20
- package/dist/0.9/components/interactive/CheckBoxComponent.d.ts +3 -2
- package/dist/0.9/components/interactive/CheckBoxComponent.js +33 -29
- package/dist/0.9/components/interactive/ChoicePickerComponent.d.ts +3 -2
- package/dist/0.9/components/interactive/ChoicePickerComponent.js +59 -53
- package/dist/0.9/components/interactive/DateTimeInputComponent.d.ts +3 -2
- package/dist/0.9/components/interactive/DateTimeInputComponent.js +32 -26
- package/dist/0.9/components/interactive/SliderComponent.d.ts +3 -2
- package/dist/0.9/components/interactive/SliderComponent.js +38 -32
- package/dist/0.9/components/interactive/TextFieldComponent.d.ts +3 -2
- package/dist/0.9/components/interactive/TextFieldComponent.js +41 -40
- package/dist/0.9/components/layout/CardComponent.d.ts +3 -2
- package/dist/0.9/components/layout/CardComponent.js +11 -10
- package/dist/0.9/components/layout/ColumnComponent.d.ts +3 -2
- package/dist/0.9/components/layout/ColumnComponent.js +26 -23
- package/dist/0.9/components/layout/ListComponent.d.ts +3 -2
- package/dist/0.9/components/layout/ListComponent.js +30 -27
- package/dist/0.9/components/layout/ModalComponent.d.ts +3 -2
- package/dist/0.9/components/layout/ModalComponent.js +11 -22
- package/dist/0.9/components/layout/RowComponent.d.ts +3 -2
- package/dist/0.9/components/layout/RowComponent.js +31 -28
- package/dist/0.9/components/layout/TabsComponent.d.ts +3 -2
- package/dist/0.9/components/layout/TabsComponent.js +21 -21
- package/dist/0.9/components/types.d.ts +8 -0
- package/dist/0.9/contexts/A2UIProvider.d.ts +45 -28
- package/dist/0.9/contexts/A2UIProvider.js +18 -26
- package/dist/0.9/contexts/ActionContext.js +5 -5
- package/dist/0.9/contexts/ComponentsMapContext.d.ts +8 -31
- package/dist/0.9/contexts/ComponentsMapContext.js +12 -16
- package/dist/0.9/contexts/ScopeContext.js +3 -3
- package/dist/0.9/contexts/SurfaceContext.d.ts +3 -3
- package/dist/0.9/contexts/SurfaceContext.js +3 -3
- package/dist/0.9/hooks/useComponent.d.ts +2 -2
- package/dist/0.9/hooks/useDataBinding.js +3 -3
- package/dist/0.9/index.d.ts +6 -4
- package/dist/0.9/index.js +12 -10
- package/dist/0.9/standard-catalog/index.d.ts +61 -0
- package/dist/0.9/standard-catalog/index.js +69 -0
- package/dist/components/ui/button.d.ts +1 -1
- package/dist/lib/utils.d.ts +5 -0
- package/dist/lib/utils.js +6 -4
- package/package.json +13 -4
- package/dist/0.9/components/index.js +0 -68
|
@@ -1,17 +1,26 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
export type { ComponentsMap };
|
|
2
|
+
import { A2UIMessage } from '@a2ui-sdk/types/0.9';
|
|
3
|
+
import { Catalog } from '../standard-catalog';
|
|
5
4
|
/**
|
|
6
5
|
* Props for A2UIProvider.
|
|
7
6
|
*/
|
|
8
7
|
export interface A2UIProviderProps {
|
|
9
8
|
/** Array of A2UI messages to render */
|
|
10
9
|
messages: A2UIMessage[];
|
|
11
|
-
/**
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
/**
|
|
11
|
+
* Catalog containing components and functions.
|
|
12
|
+
* Use `standardCatalog` from '@a2ui-sdk/react/0.9/standard-catalog' as base.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* ```tsx
|
|
16
|
+
* // Extend standard catalog
|
|
17
|
+
* const catalog = {
|
|
18
|
+
* ...standardCatalog,
|
|
19
|
+
* components: { ...standardCatalog.components, Custom: MyComponent },
|
|
20
|
+
* }
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
catalog?: Catalog;
|
|
15
24
|
children: ReactNode;
|
|
16
25
|
}
|
|
17
26
|
/**
|
|
@@ -19,40 +28,48 @@ export interface A2UIProviderProps {
|
|
|
19
28
|
*
|
|
20
29
|
* Provides:
|
|
21
30
|
* - SurfaceContext: Multi-surface state management
|
|
22
|
-
* - ActionContext: Action dispatch handling
|
|
23
31
|
* - ComponentsMapContext: Custom component overrides
|
|
24
32
|
*
|
|
25
33
|
* @param props - Component props
|
|
26
34
|
* @param props.messages - Array of A2UI messages to render
|
|
27
|
-
* @param props.
|
|
28
|
-
* @param props.components - Optional custom component overrides
|
|
35
|
+
* @param props.catalog - Catalog containing components and functions
|
|
29
36
|
* @param props.children - Child components (typically A2UIRenderer)
|
|
30
37
|
*
|
|
31
38
|
* @example
|
|
32
39
|
* ```tsx
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
40
|
+
* import { standardCatalog } from '@a2ui-sdk/react/0.9/standard-catalog'
|
|
41
|
+
*
|
|
42
|
+
* // Basic usage (uses standard catalog by default)
|
|
43
|
+
* <A2UIProvider messages={messages}>
|
|
44
|
+
* <A2UIRenderer onAction={handleAction} />
|
|
45
|
+
* </A2UIProvider>
|
|
46
|
+
*
|
|
47
|
+
* // With extended catalog
|
|
48
|
+
* const extendedCatalog = {
|
|
49
|
+
* ...standardCatalog,
|
|
50
|
+
* components: {
|
|
51
|
+
* ...standardCatalog.components,
|
|
52
|
+
* CustomChart: MyChartComponent,
|
|
53
|
+
* },
|
|
54
|
+
* }
|
|
55
|
+
* <A2UIProvider messages={messages} catalog={extendedCatalog}>
|
|
56
|
+
* <A2UIRenderer onAction={handleAction} />
|
|
36
57
|
* </A2UIProvider>
|
|
37
58
|
*
|
|
38
|
-
* // With custom
|
|
39
|
-
* const
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
* <A2UIProvider
|
|
44
|
-
*
|
|
45
|
-
* onAction={handleAction}
|
|
46
|
-
* components={customComponents}
|
|
47
|
-
* >
|
|
48
|
-
* <A2UIRenderer />
|
|
59
|
+
* // With completely custom catalog
|
|
60
|
+
* const customCatalog = {
|
|
61
|
+
* components: { Text: MyTextComponent },
|
|
62
|
+
* functions: {},
|
|
63
|
+
* }
|
|
64
|
+
* <A2UIProvider messages={messages} catalog={customCatalog}>
|
|
65
|
+
* <A2UIRenderer onAction={handleAction} />
|
|
49
66
|
* </A2UIProvider>
|
|
50
67
|
*
|
|
51
68
|
* // Render specific surfaces
|
|
52
|
-
* <A2UIProvider messages={messages}
|
|
53
|
-
* <A2UIRenderer surfaceId="sidebar" />
|
|
54
|
-
* <A2UIRenderer surfaceId="main" />
|
|
69
|
+
* <A2UIProvider messages={messages}>
|
|
70
|
+
* <A2UIRenderer surfaceId="sidebar" onAction={handleAction} />
|
|
71
|
+
* <A2UIRenderer surfaceId="main" onAction={handleAction} />
|
|
55
72
|
* </A2UIProvider>
|
|
56
73
|
* ```
|
|
57
74
|
*/
|
|
58
|
-
export declare function A2UIProvider({ messages,
|
|
75
|
+
export declare function A2UIProvider({ messages, catalog, children, }: A2UIProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,34 +1,26 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useEffect as
|
|
3
|
-
import { SurfaceProvider as
|
|
4
|
-
import { ActionProvider as m } from "./ActionContext.js";
|
|
1
|
+
import { jsx as t, Fragment as s } from "react/jsx-runtime";
|
|
2
|
+
import { useEffect as f } from "react";
|
|
3
|
+
import { SurfaceProvider as a } from "./SurfaceContext.js";
|
|
5
4
|
import { ComponentsMapProvider as c } from "./ComponentsMapContext.js";
|
|
6
|
-
import { useA2UIMessageHandler as
|
|
7
|
-
import {
|
|
8
|
-
function
|
|
9
|
-
messages:
|
|
5
|
+
import { useA2UIMessageHandler as i } from "../hooks/useA2UIMessageHandler.js";
|
|
6
|
+
import { standardCatalog as m } from "../standard-catalog/index.js";
|
|
7
|
+
function p({
|
|
8
|
+
messages: o,
|
|
10
9
|
children: n
|
|
11
10
|
}) {
|
|
12
|
-
const { processMessages:
|
|
13
|
-
return
|
|
14
|
-
|
|
15
|
-
}, [
|
|
11
|
+
const { processMessages: r, clear: e } = i();
|
|
12
|
+
return f(() => {
|
|
13
|
+
e(), o && o.length > 0 && r(o);
|
|
14
|
+
}, [o, r, e]), /* @__PURE__ */ t(s, { children: n });
|
|
16
15
|
}
|
|
17
|
-
function
|
|
18
|
-
messages:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
children: t
|
|
16
|
+
function P({
|
|
17
|
+
messages: o,
|
|
18
|
+
catalog: n,
|
|
19
|
+
children: r
|
|
22
20
|
}) {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
{
|
|
26
|
-
components: o,
|
|
27
|
-
defaultComponents: a,
|
|
28
|
-
children: /* @__PURE__ */ e(d, { messages: r ?? [], children: t })
|
|
29
|
-
}
|
|
30
|
-
) }) });
|
|
21
|
+
const e = o ?? [];
|
|
22
|
+
return /* @__PURE__ */ t(a, { children: /* @__PURE__ */ t(c, { components: (n ?? m).components, children: /* @__PURE__ */ t(p, { messages: e, children: r }) }) });
|
|
31
23
|
}
|
|
32
24
|
export {
|
|
33
|
-
|
|
25
|
+
P as A2UIProvider
|
|
34
26
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as d } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useCallback as x, useMemo as p, createContext as C, useContext as f } from "react";
|
|
3
3
|
import { resolveContext as v } from "@a2ui-sdk/utils/0.9";
|
|
4
|
-
const n =
|
|
4
|
+
const n = C(null);
|
|
5
5
|
function b({ onAction: t, children: r }) {
|
|
6
|
-
const e =
|
|
6
|
+
const e = x(
|
|
7
7
|
(i, c, o, u, a = null) => {
|
|
8
8
|
if (!t) {
|
|
9
9
|
console.warn(
|
|
@@ -25,7 +25,7 @@ function b({ onAction: t, children: r }) {
|
|
|
25
25
|
t(m);
|
|
26
26
|
},
|
|
27
27
|
[t]
|
|
28
|
-
), s =
|
|
28
|
+
), s = p(
|
|
29
29
|
() => ({
|
|
30
30
|
dispatchAction: e,
|
|
31
31
|
onAction: t ?? null
|
|
@@ -35,7 +35,7 @@ function b({ onAction: t, children: r }) {
|
|
|
35
35
|
return /* @__PURE__ */ d(n.Provider, { value: s, children: r });
|
|
36
36
|
}
|
|
37
37
|
function I() {
|
|
38
|
-
const t =
|
|
38
|
+
const t = f(n);
|
|
39
39
|
if (!t)
|
|
40
40
|
throw new Error("useActionContext must be used within an ActionProvider");
|
|
41
41
|
return t;
|
|
@@ -1,30 +1,14 @@
|
|
|
1
1
|
import { ReactNode, ComponentType } from 'react';
|
|
2
|
-
import {
|
|
3
|
-
/**
|
|
4
|
-
* Props passed to A2UI components.
|
|
5
|
-
* Includes the component definition and surfaceId.
|
|
6
|
-
*/
|
|
7
|
-
export interface A2UIComponentProps {
|
|
8
|
-
/** The surface ID this component belongs to */
|
|
9
|
-
surfaceId: string;
|
|
10
|
-
/** The component definition from the protocol */
|
|
11
|
-
component: Component;
|
|
12
|
-
}
|
|
2
|
+
import { A2UIComponentProps } from '../components/types';
|
|
13
3
|
/**
|
|
14
4
|
* Type for a component in the components map.
|
|
15
5
|
*/
|
|
16
|
-
export type A2UIComponent = ComponentType<A2UIComponentProps>;
|
|
17
|
-
/**
|
|
18
|
-
* Map of component type names to React components.
|
|
19
|
-
*/
|
|
20
|
-
export type ComponentsMap = Map<string, A2UIComponent>;
|
|
6
|
+
export type A2UIComponent = ComponentType<A2UIComponentProps & any>;
|
|
21
7
|
/**
|
|
22
8
|
* Context value for ComponentsMapContext.
|
|
23
9
|
*/
|
|
24
10
|
export interface ComponentsMapContextValue {
|
|
25
|
-
/**
|
|
26
|
-
customComponents: ComponentsMap;
|
|
27
|
-
/** Get a component by type name (custom first, then default) */
|
|
11
|
+
/** Get a component by type name */
|
|
28
12
|
getComponent: (type: string) => A2UIComponent | undefined;
|
|
29
13
|
}
|
|
30
14
|
/**
|
|
@@ -35,28 +19,21 @@ export declare const ComponentsMapContext: import('react').Context<ComponentsMap
|
|
|
35
19
|
* Props for ComponentsMapProvider.
|
|
36
20
|
*/
|
|
37
21
|
export interface ComponentsMapProviderProps {
|
|
38
|
-
/**
|
|
39
|
-
components
|
|
40
|
-
/** Default component registry */
|
|
41
|
-
defaultComponents: Record<string, A2UIComponent>;
|
|
22
|
+
/** Component registry */
|
|
23
|
+
components: Record<string, A2UIComponent>;
|
|
42
24
|
children: ReactNode;
|
|
43
25
|
}
|
|
44
26
|
/**
|
|
45
|
-
* Provider for
|
|
27
|
+
* Provider for component registry.
|
|
46
28
|
*
|
|
47
29
|
* @example
|
|
48
30
|
* ```tsx
|
|
49
|
-
*
|
|
50
|
-
* ['Button', CustomButton],
|
|
51
|
-
* ['Switch', CustomSwitch],
|
|
52
|
-
* ])
|
|
53
|
-
*
|
|
54
|
-
* <ComponentsMapProvider components={customComponents} defaultComponents={defaultRegistry}>
|
|
31
|
+
* <ComponentsMapProvider components={catalog.components}>
|
|
55
32
|
* <App />
|
|
56
33
|
* </ComponentsMapProvider>
|
|
57
34
|
* ```
|
|
58
35
|
*/
|
|
59
|
-
export declare function ComponentsMapProvider({ components,
|
|
36
|
+
export declare function ComponentsMapProvider({ components, children, }: ComponentsMapProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
60
37
|
/**
|
|
61
38
|
* Hook to access the ComponentsMap context.
|
|
62
39
|
*
|
|
@@ -1,21 +1,17 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { createContext as
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { createContext as m, useMemo as i } from "react";
|
|
3
|
+
import { hasOwn as p } from "../../lib/utils.js";
|
|
4
|
+
const u = m(null);
|
|
5
|
+
function v({
|
|
6
|
+
components: o,
|
|
7
7
|
children: r
|
|
8
8
|
}) {
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
getComponent: (t) => o.has(t) ? o.get(t) : e[t]
|
|
14
|
-
};
|
|
15
|
-
}, [n, e]);
|
|
16
|
-
return /* @__PURE__ */ s(c.Provider, { value: m, children: r });
|
|
9
|
+
const e = i(() => ({
|
|
10
|
+
getComponent: (t) => p(o, t) ? o[t] : void 0
|
|
11
|
+
}), [o]);
|
|
12
|
+
return /* @__PURE__ */ n(u.Provider, { value: e, children: r });
|
|
17
13
|
}
|
|
18
14
|
export {
|
|
19
|
-
|
|
20
|
-
|
|
15
|
+
u as ComponentsMapContext,
|
|
16
|
+
v as ComponentsMapProvider
|
|
21
17
|
};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useContext as c, createContext as u } from "react";
|
|
3
3
|
const s = {
|
|
4
4
|
basePath: null
|
|
5
|
-
}, t =
|
|
5
|
+
}, t = u(s);
|
|
6
6
|
function f({ basePath: e, children: o }) {
|
|
7
7
|
const n = { basePath: e };
|
|
8
8
|
return /* @__PURE__ */ r(t.Provider, { value: n, children: o });
|
|
9
9
|
}
|
|
10
10
|
function a() {
|
|
11
|
-
return
|
|
11
|
+
return c(t);
|
|
12
12
|
}
|
|
13
13
|
function l() {
|
|
14
14
|
const { basePath: e } = a();
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { ComponentDefinition, DataModel, SurfaceState } from '@a2ui-sdk/types/0.9';
|
|
3
3
|
/**
|
|
4
4
|
* Surface context value interface.
|
|
5
5
|
*/
|
|
@@ -12,7 +12,7 @@ export interface SurfaceContextValue {
|
|
|
12
12
|
*/
|
|
13
13
|
createSurface: (surfaceId: string, catalogId: string) => void;
|
|
14
14
|
/** Updates components in a surface (upsert semantics) */
|
|
15
|
-
updateComponents: (surfaceId: string, components:
|
|
15
|
+
updateComponents: (surfaceId: string, components: ComponentDefinition[]) => void;
|
|
16
16
|
/** Updates the data model at a path */
|
|
17
17
|
updateDataModel: (surfaceId: string, path?: string, value?: unknown) => void;
|
|
18
18
|
/** Deletes a surface */
|
|
@@ -20,7 +20,7 @@ export interface SurfaceContextValue {
|
|
|
20
20
|
/** Gets a surface by ID */
|
|
21
21
|
getSurface: (surfaceId: string) => SurfaceState | undefined;
|
|
22
22
|
/** Gets a component from a surface */
|
|
23
|
-
getComponent: (surfaceId: string, componentId: string) =>
|
|
23
|
+
getComponent: (surfaceId: string, componentId: string) => ComponentDefinition | undefined;
|
|
24
24
|
/** Gets the data model for a surface */
|
|
25
25
|
getDataModel: (surfaceId: string) => DataModel;
|
|
26
26
|
/** Sets a value in the data model (for two-way binding) */
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as P } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { useContext as b, createContext as A, useState as U, useCallback as a, useMemo as $ } from "react";
|
|
3
3
|
import { setValueByPath as y } from "@a2ui-sdk/utils/0.9";
|
|
4
|
-
const C =
|
|
4
|
+
const C = A(null);
|
|
5
5
|
function z({ children: f }) {
|
|
6
6
|
const [r, s] = U(/* @__PURE__ */ new Map()), i = a((e, n) => {
|
|
7
7
|
s((t) => {
|
|
@@ -106,7 +106,7 @@ function z({ children: f }) {
|
|
|
106
106
|
return /* @__PURE__ */ P(C.Provider, { value: h, children: f });
|
|
107
107
|
}
|
|
108
108
|
function B() {
|
|
109
|
-
const f =
|
|
109
|
+
const f = b(C);
|
|
110
110
|
if (!f)
|
|
111
111
|
throw new Error("useSurfaceContext must be used within a SurfaceProvider");
|
|
112
112
|
return f;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ComponentDefinition } from '@a2ui-sdk/types/0.9';
|
|
2
2
|
/**
|
|
3
3
|
* Gets a component from a Surface by its ID.
|
|
4
4
|
*
|
|
@@ -20,4 +20,4 @@ import { Component } from '@a2ui-sdk/types/0.9';
|
|
|
20
20
|
* }
|
|
21
21
|
* ```
|
|
22
22
|
*/
|
|
23
|
-
export declare function useComponent(surfaceId: string, componentId: string):
|
|
23
|
+
export declare function useComponent(surfaceId: string, componentId: string): ComponentDefinition | undefined;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useMemo as r, useCallback as D } from "react";
|
|
2
2
|
import { useSurfaceContext as s } from "../contexts/SurfaceContext.js";
|
|
3
3
|
import { useScope as g } from "../contexts/ScopeContext.js";
|
|
4
|
-
import {
|
|
4
|
+
import { resolveValue as h, isPathBinding as d, resolveString as c } from "@a2ui-sdk/utils/0.9";
|
|
5
5
|
function S(n, t, a) {
|
|
6
6
|
const { getDataModel: e } = s(), { basePath: i } = g();
|
|
7
7
|
return r(() => {
|
|
@@ -13,7 +13,7 @@ function v(n, t, a = "") {
|
|
|
13
13
|
const { getDataModel: e } = s(), { basePath: i } = g();
|
|
14
14
|
return r(() => {
|
|
15
15
|
const o = e(n);
|
|
16
|
-
return
|
|
16
|
+
return c(t, o, i, a);
|
|
17
17
|
}, [e, n, t, i, a]);
|
|
18
18
|
}
|
|
19
19
|
function $(n) {
|
|
@@ -26,7 +26,7 @@ function x(n, t, a) {
|
|
|
26
26
|
return h(t, p, o, a);
|
|
27
27
|
}, [e, n, t, o, a]), m = D(
|
|
28
28
|
(p) => {
|
|
29
|
-
if (
|
|
29
|
+
if (d(t)) {
|
|
30
30
|
const M = t.path.startsWith("/") ? t.path : o ? `${o}/${t.path}` : `/${t.path}`;
|
|
31
31
|
i(n, M, p);
|
|
32
32
|
}
|
package/dist/0.9/index.d.ts
CHANGED
|
@@ -14,19 +14,21 @@
|
|
|
14
14
|
* console.log('Action:', action)
|
|
15
15
|
* }
|
|
16
16
|
* return (
|
|
17
|
-
* <A2UIProvider messages={messages}
|
|
18
|
-
* <A2UIRenderer />
|
|
17
|
+
* <A2UIProvider messages={messages}>
|
|
18
|
+
* <A2UIRenderer onAction={handleAction} />
|
|
19
19
|
* </A2UIProvider>
|
|
20
20
|
* )
|
|
21
21
|
* }
|
|
22
22
|
* ```
|
|
23
23
|
*/
|
|
24
|
-
export type { A2UIMessage, CreateSurfacePayload, UpdateComponentsPayload, UpdateDataModelPayload, DeleteSurfacePayload,
|
|
25
|
-
export type { A2UIProviderProps
|
|
24
|
+
export type { A2UIMessage, CreateSurfacePayload, UpdateComponentsPayload, UpdateDataModelPayload, DeleteSurfacePayload, ComponentDefinition, DynamicValue, DynamicString, DynamicNumber, DynamicBoolean, DynamicStringList, ChildList, TemplateBinding, Action, ActionPayload as A2UIAction, ActionHandler, CheckRule, Checkable, ValidationResult, ScopeValue, DataModel, } from '@a2ui-sdk/types/0.9';
|
|
25
|
+
export type { A2UIProviderProps } from './contexts/A2UIProvider';
|
|
26
26
|
export type { A2UIRendererProps } from './A2UIRenderer';
|
|
27
|
+
export type { Catalog, CatalogComponent, CatalogComponents, } from './standard-catalog';
|
|
27
28
|
export { A2UIProvider } from './contexts/A2UIProvider';
|
|
28
29
|
export { A2UIRenderer } from './A2UIRenderer';
|
|
29
30
|
export { ComponentRenderer } from './components/ComponentRenderer';
|
|
31
|
+
export { standardCatalog } from './standard-catalog';
|
|
30
32
|
export { useDispatchAction } from './hooks/useDispatchAction';
|
|
31
33
|
export { useDataBinding, useFormBinding, useStringBinding, useDataModel, } from './hooks/useDataBinding';
|
|
32
34
|
export { useValidation } from './hooks/useValidation';
|
package/dist/0.9/index.js
CHANGED
|
@@ -1,22 +1,24 @@
|
|
|
1
1
|
import { A2UIProvider as r } from "./contexts/A2UIProvider.js";
|
|
2
2
|
import { A2UIRenderer as n } from "./A2UIRenderer.js";
|
|
3
3
|
import { ComponentRenderer as p } from "./components/ComponentRenderer.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
4
|
+
import { standardCatalog as s } from "./standard-catalog/index.js";
|
|
5
|
+
import { useDispatchAction as d } from "./hooks/useDispatchAction.js";
|
|
6
|
+
import { useDataBinding as u, useDataModel as x, useFormBinding as c, useStringBinding as g } from "./hooks/useDataBinding.js";
|
|
7
|
+
import { useValidation as S } from "./hooks/useValidation.js";
|
|
8
|
+
import { useSurfaceContext as A } from "./contexts/SurfaceContext.js";
|
|
8
9
|
import { useScope as D, useScopeBasePath as h } from "./contexts/ScopeContext.js";
|
|
9
10
|
export {
|
|
10
11
|
r as A2UIProvider,
|
|
11
12
|
n as A2UIRenderer,
|
|
12
13
|
p as ComponentRenderer,
|
|
14
|
+
s as standardCatalog,
|
|
13
15
|
u as useDataBinding,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
16
|
+
x as useDataModel,
|
|
17
|
+
d as useDispatchAction,
|
|
18
|
+
c as useFormBinding,
|
|
17
19
|
D as useScope,
|
|
18
20
|
h as useScopeBasePath,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
g as useStringBinding,
|
|
22
|
+
A as useSurfaceContext,
|
|
23
|
+
S as useValidation
|
|
22
24
|
};
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { ComponentType } from 'react';
|
|
2
|
+
import { TextComponent, ImageComponent, IconComponent, VideoComponent, AudioPlayerComponent, DividerComponent } from '../components/display';
|
|
3
|
+
import { RowComponent, ColumnComponent, ListComponent, CardComponent, TabsComponent, ModalComponent, TemplateRenderer } from '../components/layout';
|
|
4
|
+
import { ButtonComponent, TextFieldComponent, CheckBoxComponent, ChoicePickerComponent, SliderComponent, DateTimeInputComponent } from '../components/interactive';
|
|
5
|
+
/**
|
|
6
|
+
* Type for a component in the catalog.
|
|
7
|
+
* Components receive BaseComponentProps plus their specific props spread.
|
|
8
|
+
* We use a loose type here since props are dynamically spread at runtime.
|
|
9
|
+
*/
|
|
10
|
+
export type CatalogComponent = ComponentType<any>;
|
|
11
|
+
/**
|
|
12
|
+
* Type for the components registry in a catalog.
|
|
13
|
+
*/
|
|
14
|
+
export type CatalogComponents = Record<string, CatalogComponent>;
|
|
15
|
+
/**
|
|
16
|
+
* Type for functions in a catalog (reserved for future use).
|
|
17
|
+
*/
|
|
18
|
+
export type CatalogFunctions = Record<string, unknown>;
|
|
19
|
+
/**
|
|
20
|
+
* Type for a catalog containing components and functions.
|
|
21
|
+
*/
|
|
22
|
+
export interface Catalog {
|
|
23
|
+
/** Component registry mapping type names to React components */
|
|
24
|
+
components: CatalogComponents;
|
|
25
|
+
/** Function registry (reserved for future use) */
|
|
26
|
+
functions: CatalogFunctions;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Standard components included in the default catalog.
|
|
30
|
+
* Type assertions are used because ComponentRenderer spreads props at runtime
|
|
31
|
+
* and the catalog just needs to map component type names to implementations.
|
|
32
|
+
*/
|
|
33
|
+
export declare const standardComponents: CatalogComponents;
|
|
34
|
+
/**
|
|
35
|
+
* Standard functions included in the default catalog (reserved for future use).
|
|
36
|
+
*/
|
|
37
|
+
export declare const standardFunctions: CatalogFunctions;
|
|
38
|
+
/**
|
|
39
|
+
* The standard catalog containing all built-in A2UI v0.9 components and functions.
|
|
40
|
+
*
|
|
41
|
+
* This is the default catalog used when no custom catalog is provided to A2UIProvider.
|
|
42
|
+
*
|
|
43
|
+
* @example
|
|
44
|
+
* ```tsx
|
|
45
|
+
* // Use as-is
|
|
46
|
+
* <A2UIProvider messages={messages} onAction={handleAction}>
|
|
47
|
+
* <A2UIRenderer />
|
|
48
|
+
* </A2UIProvider>
|
|
49
|
+
*
|
|
50
|
+
* // Extend with custom components
|
|
51
|
+
* const myCatalog = {
|
|
52
|
+
* ...standardCatalog,
|
|
53
|
+
* components: {
|
|
54
|
+
* ...standardCatalog.components,
|
|
55
|
+
* MyComponent: MyComponentImpl,
|
|
56
|
+
* },
|
|
57
|
+
* }
|
|
58
|
+
* ```
|
|
59
|
+
*/
|
|
60
|
+
export declare const standardCatalog: Catalog;
|
|
61
|
+
export { TextComponent, ImageComponent, IconComponent, VideoComponent, AudioPlayerComponent, DividerComponent, RowComponent, ColumnComponent, ListComponent, CardComponent, TabsComponent, ModalComponent, TemplateRenderer, ButtonComponent, TextFieldComponent, CheckBoxComponent, ChoicePickerComponent, SliderComponent, DateTimeInputComponent, };
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { DateTimeInputComponent as o } from "../components/interactive/DateTimeInputComponent.js";
|
|
2
|
+
import { SliderComponent as m } from "../components/interactive/SliderComponent.js";
|
|
3
|
+
import { ChoicePickerComponent as t } from "../components/interactive/ChoicePickerComponent.js";
|
|
4
|
+
import { CheckBoxComponent as n } from "../components/interactive/CheckBoxComponent.js";
|
|
5
|
+
import { TextFieldComponent as r } from "../components/interactive/TextFieldComponent.js";
|
|
6
|
+
import { ButtonComponent as e } from "../components/interactive/ButtonComponent.js";
|
|
7
|
+
import { ModalComponent as p } from "../components/layout/ModalComponent.js";
|
|
8
|
+
import { TabsComponent as i } from "../components/layout/TabsComponent.js";
|
|
9
|
+
import { CardComponent as C } from "../components/layout/CardComponent.js";
|
|
10
|
+
import { ListComponent as a } from "../components/layout/ListComponent.js";
|
|
11
|
+
import { ColumnComponent as d } from "../components/layout/ColumnComponent.js";
|
|
12
|
+
import { RowComponent as f } from "../components/layout/RowComponent.js";
|
|
13
|
+
import { DividerComponent as c } from "../components/display/DividerComponent.js";
|
|
14
|
+
import { AudioPlayerComponent as s } from "../components/display/AudioPlayerComponent.js";
|
|
15
|
+
import { VideoComponent as l } from "../components/display/VideoComponent.js";
|
|
16
|
+
import { IconComponent as u } from "../components/display/IconComponent.js";
|
|
17
|
+
import { ImageComponent as T } from "../components/display/ImageComponent.js";
|
|
18
|
+
import { TextComponent as x } from "../components/display/TextComponent.js";
|
|
19
|
+
import { TemplateRenderer as H } from "../components/layout/TemplateRenderer.js";
|
|
20
|
+
const I = {
|
|
21
|
+
// Display components (6)
|
|
22
|
+
Text: x,
|
|
23
|
+
Image: T,
|
|
24
|
+
Icon: u,
|
|
25
|
+
Video: l,
|
|
26
|
+
AudioPlayer: s,
|
|
27
|
+
Divider: c,
|
|
28
|
+
// Layout components (6)
|
|
29
|
+
Row: f,
|
|
30
|
+
Column: d,
|
|
31
|
+
List: a,
|
|
32
|
+
Card: C,
|
|
33
|
+
Tabs: i,
|
|
34
|
+
Modal: p,
|
|
35
|
+
// Interactive components (6)
|
|
36
|
+
Button: e,
|
|
37
|
+
TextField: r,
|
|
38
|
+
CheckBox: n,
|
|
39
|
+
ChoicePicker: t,
|
|
40
|
+
Slider: m,
|
|
41
|
+
DateTimeInput: o
|
|
42
|
+
}, h = {}, z = {
|
|
43
|
+
components: I,
|
|
44
|
+
functions: h
|
|
45
|
+
};
|
|
46
|
+
export {
|
|
47
|
+
s as AudioPlayerComponent,
|
|
48
|
+
e as ButtonComponent,
|
|
49
|
+
C as CardComponent,
|
|
50
|
+
n as CheckBoxComponent,
|
|
51
|
+
t as ChoicePickerComponent,
|
|
52
|
+
d as ColumnComponent,
|
|
53
|
+
o as DateTimeInputComponent,
|
|
54
|
+
c as DividerComponent,
|
|
55
|
+
u as IconComponent,
|
|
56
|
+
T as ImageComponent,
|
|
57
|
+
a as ListComponent,
|
|
58
|
+
p as ModalComponent,
|
|
59
|
+
f as RowComponent,
|
|
60
|
+
m as SliderComponent,
|
|
61
|
+
i as TabsComponent,
|
|
62
|
+
H as TemplateRenderer,
|
|
63
|
+
x as TextComponent,
|
|
64
|
+
r as TextFieldComponent,
|
|
65
|
+
l as VideoComponent,
|
|
66
|
+
z as standardCatalog,
|
|
67
|
+
I as standardComponents,
|
|
68
|
+
h as standardFunctions
|
|
69
|
+
};
|
|
@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
4
|
variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
|
|
5
|
-
size?: "
|
|
5
|
+
size?: "icon" | "default" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
|
|
6
6
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
7
|
declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
|
|
8
8
|
asChild?: boolean;
|
package/dist/lib/utils.d.ts
CHANGED
|
@@ -1,2 +1,7 @@
|
|
|
1
1
|
import { ClassValue } from 'clsx';
|
|
2
2
|
export declare function cn(...inputs: ClassValue[]): string;
|
|
3
|
+
/**
|
|
4
|
+
* A compatible implementation of Object.hasOwn for older browsers.
|
|
5
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwn
|
|
6
|
+
*/
|
|
7
|
+
export declare const hasOwn: (obj: object, key: PropertyKey) => boolean;
|
package/dist/lib/utils.js
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { clsx as o } from "clsx";
|
|
2
|
-
import { twMerge as
|
|
3
|
-
function
|
|
4
|
-
return
|
|
2
|
+
import { twMerge as e } from "tailwind-merge";
|
|
3
|
+
function p(...t) {
|
|
4
|
+
return e(o(t));
|
|
5
5
|
}
|
|
6
|
+
const s = Object.hasOwn ?? ((t, r) => Object.prototype.hasOwnProperty.call(t, r));
|
|
6
7
|
export {
|
|
7
|
-
|
|
8
|
+
p as cn,
|
|
9
|
+
s as hasOwn
|
|
8
10
|
};
|