@channel.io/app-sdk-wam 0.1.0
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/components/WamErrorBoundary.d.ts +54 -0
- package/dist/components/WamErrorBoundary.d.ts.map +1 -0
- package/dist/components/WamErrorBoundary.js +51 -0
- package/dist/components/WamErrorBoundary.js.map +1 -0
- package/dist/components/WamProvider.d.ts +50 -0
- package/dist/components/WamProvider.d.ts.map +1 -0
- package/dist/components/WamProvider.js +51 -0
- package/dist/components/WamProvider.js.map +1 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +3 -0
- package/dist/components/index.js.map +1 -0
- package/dist/hooks/index.d.ts +5 -0
- package/dist/hooks/index.d.ts.map +1 -0
- package/dist/hooks/index.js +5 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/useCallFunction.d.ts +57 -0
- package/dist/hooks/useCallFunction.d.ts.map +1 -0
- package/dist/hooks/useCallFunction.js +72 -0
- package/dist/hooks/useCallFunction.js.map +1 -0
- package/dist/hooks/useNativeFunction.d.ts +53 -0
- package/dist/hooks/useNativeFunction.d.ts.map +1 -0
- package/dist/hooks/useNativeFunction.js +69 -0
- package/dist/hooks/useNativeFunction.js.map +1 -0
- package/dist/hooks/useWamData.d.ts +37 -0
- package/dist/hooks/useWamData.d.ts.map +1 -0
- package/dist/hooks/useWamData.js +35 -0
- package/dist/hooks/useWamData.js.map +1 -0
- package/dist/hooks/useWamSize.d.ts +42 -0
- package/dist/hooks/useWamSize.d.ts.map +1 -0
- package/dist/hooks/useWamSize.js +64 -0
- package/dist/hooks/useWamSize.js.map +1 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +7 -0
- package/dist/index.js.map +1 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/index.js +2 -0
- package/dist/types/index.js.map +1 -0
- package/dist/types/wam.d.ts +53 -0
- package/dist/types/wam.d.ts.map +1 -0
- package/dist/types/wam.js +2 -0
- package/dist/types/wam.js.map +1 -0
- package/package.json +46 -0
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { Component, type ReactNode, type ErrorInfo } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Props for WamErrorBoundary component
|
|
4
|
+
*/
|
|
5
|
+
export interface WamErrorBoundaryProps {
|
|
6
|
+
/** Child components */
|
|
7
|
+
children: ReactNode;
|
|
8
|
+
/** Fallback UI to render when an error occurs */
|
|
9
|
+
fallback?: ReactNode | ((error: Error) => ReactNode);
|
|
10
|
+
/** Callback when an error is caught */
|
|
11
|
+
onError?: (error: Error, errorInfo: ErrorInfo) => void;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* State for WamErrorBoundary component
|
|
15
|
+
*/
|
|
16
|
+
interface WamErrorBoundaryState {
|
|
17
|
+
hasError: boolean;
|
|
18
|
+
error: Error | null;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Error boundary component for WAM widgets
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```typescript
|
|
25
|
+
* function App() {
|
|
26
|
+
* return (
|
|
27
|
+
* <WamErrorBoundary
|
|
28
|
+
* fallback={<div>Something went wrong</div>}
|
|
29
|
+
* onError={(error) => console.error('WAM error:', error)}
|
|
30
|
+
* >
|
|
31
|
+
* <MyWidget />
|
|
32
|
+
* </WamErrorBoundary>
|
|
33
|
+
* );
|
|
34
|
+
* }
|
|
35
|
+
* ```
|
|
36
|
+
*
|
|
37
|
+
* @example
|
|
38
|
+
* ```typescript
|
|
39
|
+
* // With dynamic fallback
|
|
40
|
+
* <WamErrorBoundary
|
|
41
|
+
* fallback={(error) => <div>Error: {error.message}</div>}
|
|
42
|
+
* >
|
|
43
|
+
* <MyWidget />
|
|
44
|
+
* </WamErrorBoundary>
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
export declare class WamErrorBoundary extends Component<WamErrorBoundaryProps, WamErrorBoundaryState> {
|
|
48
|
+
constructor(props: WamErrorBoundaryProps);
|
|
49
|
+
static getDerivedStateFromError(error: Error): WamErrorBoundaryState;
|
|
50
|
+
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
51
|
+
render(): ReactNode;
|
|
52
|
+
}
|
|
53
|
+
export {};
|
|
54
|
+
//# sourceMappingURL=WamErrorBoundary.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WamErrorBoundary.d.ts","sourceRoot":"","sources":["../../src/components/WamErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC;IACrD,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;CACxD;AAED;;GAEG;AACH,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBAAa,gBAAiB,SAAQ,SAAS,CAAC,qBAAqB,EAAE,qBAAqB,CAAC;gBAC/E,KAAK,EAAE,qBAAqB;IAKxC,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,qBAAqB;IAI3D,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAIpD,MAAM;CAahB"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { Component } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Error boundary component for WAM widgets
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```typescript
|
|
7
|
+
* function App() {
|
|
8
|
+
* return (
|
|
9
|
+
* <WamErrorBoundary
|
|
10
|
+
* fallback={<div>Something went wrong</div>}
|
|
11
|
+
* onError={(error) => console.error('WAM error:', error)}
|
|
12
|
+
* >
|
|
13
|
+
* <MyWidget />
|
|
14
|
+
* </WamErrorBoundary>
|
|
15
|
+
* );
|
|
16
|
+
* }
|
|
17
|
+
* ```
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```typescript
|
|
21
|
+
* // With dynamic fallback
|
|
22
|
+
* <WamErrorBoundary
|
|
23
|
+
* fallback={(error) => <div>Error: {error.message}</div>}
|
|
24
|
+
* >
|
|
25
|
+
* <MyWidget />
|
|
26
|
+
* </WamErrorBoundary>
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export class WamErrorBoundary extends Component {
|
|
30
|
+
constructor(props) {
|
|
31
|
+
super(props);
|
|
32
|
+
this.state = { hasError: false, error: null };
|
|
33
|
+
}
|
|
34
|
+
static getDerivedStateFromError(error) {
|
|
35
|
+
return { hasError: true, error };
|
|
36
|
+
}
|
|
37
|
+
componentDidCatch(error, errorInfo) {
|
|
38
|
+
this.props.onError?.(error, errorInfo);
|
|
39
|
+
}
|
|
40
|
+
render() {
|
|
41
|
+
if (this.state.hasError && this.state.error) {
|
|
42
|
+
const { fallback } = this.props;
|
|
43
|
+
if (typeof fallback === "function") {
|
|
44
|
+
return fallback(this.state.error);
|
|
45
|
+
}
|
|
46
|
+
return fallback ?? null;
|
|
47
|
+
}
|
|
48
|
+
return this.props.children;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=WamErrorBoundary.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WamErrorBoundary.js","sourceRoot":"","sources":["../../src/components/WamErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAsBlE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,OAAO,gBAAiB,SAAQ,SAAuD;IAC3F,YAAY,KAA4B;QACtC,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;IAChD,CAAC;IAED,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC1C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IACnC,CAAC;IAEQ,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QAC3D,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACzC,CAAC;IAEQ,MAAM;QACb,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAEhC,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;gBACnC,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACpC,CAAC;YAED,OAAO,QAAQ,IAAI,IAAI,CAAC;QAC1B,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* WAM context value
|
|
4
|
+
*/
|
|
5
|
+
export interface WamContextValue {
|
|
6
|
+
/** Whether WAM APIs are available */
|
|
7
|
+
isAvailable: boolean;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Props for WamProvider component
|
|
11
|
+
*/
|
|
12
|
+
export interface WamProviderProps {
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* Provider component that wraps your WAM app
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```typescript
|
|
20
|
+
* function App() {
|
|
21
|
+
* return (
|
|
22
|
+
* <WamProvider>
|
|
23
|
+
* <MyWidget />
|
|
24
|
+
* </WamProvider>
|
|
25
|
+
* );
|
|
26
|
+
* }
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export declare function WamProvider({ children }: WamProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
/**
|
|
31
|
+
* Hook to access WAM context
|
|
32
|
+
*
|
|
33
|
+
* @returns WAM context value
|
|
34
|
+
* @throws Error if used outside of WamProvider
|
|
35
|
+
*
|
|
36
|
+
* @example
|
|
37
|
+
* ```typescript
|
|
38
|
+
* function MyWidget() {
|
|
39
|
+
* const { isAvailable } = useWamContext();
|
|
40
|
+
*
|
|
41
|
+
* if (!isAvailable) {
|
|
42
|
+
* return <div>WAM not available</div>;
|
|
43
|
+
* }
|
|
44
|
+
*
|
|
45
|
+
* return <div>WAM is ready</div>;
|
|
46
|
+
* }
|
|
47
|
+
* ```
|
|
48
|
+
*/
|
|
49
|
+
export declare function useWamContext(): WamContextValue;
|
|
50
|
+
//# sourceMappingURL=WamProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WamProvider.d.ts","sourceRoot":"","sources":["../../src/components/WamProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,qCAAqC;IACrC,WAAW,EAAE,OAAO,CAAC;CACtB;AAID;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAQzD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,aAAa,IAAI,eAAe,CAQ/C"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext, useMemo } from "react";
|
|
3
|
+
const WamContext = createContext(null);
|
|
4
|
+
/**
|
|
5
|
+
* Provider component that wraps your WAM app
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```typescript
|
|
9
|
+
* function App() {
|
|
10
|
+
* return (
|
|
11
|
+
* <WamProvider>
|
|
12
|
+
* <MyWidget />
|
|
13
|
+
* </WamProvider>
|
|
14
|
+
* );
|
|
15
|
+
* }
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export function WamProvider({ children }) {
|
|
19
|
+
const value = useMemo(() => {
|
|
20
|
+
const isAvailable = typeof window !== "undefined" && window.ChannelIOWam !== undefined;
|
|
21
|
+
return { isAvailable };
|
|
22
|
+
}, []);
|
|
23
|
+
return _jsx(WamContext.Provider, { value: value, children: children });
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Hook to access WAM context
|
|
27
|
+
*
|
|
28
|
+
* @returns WAM context value
|
|
29
|
+
* @throws Error if used outside of WamProvider
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```typescript
|
|
33
|
+
* function MyWidget() {
|
|
34
|
+
* const { isAvailable } = useWamContext();
|
|
35
|
+
*
|
|
36
|
+
* if (!isAvailable) {
|
|
37
|
+
* return <div>WAM not available</div>;
|
|
38
|
+
* }
|
|
39
|
+
*
|
|
40
|
+
* return <div>WAM is ready</div>;
|
|
41
|
+
* }
|
|
42
|
+
* ```
|
|
43
|
+
*/
|
|
44
|
+
export function useWamContext() {
|
|
45
|
+
const context = useContext(WamContext);
|
|
46
|
+
if (!context) {
|
|
47
|
+
throw new Error("useWamContext must be used within a WamProvider");
|
|
48
|
+
}
|
|
49
|
+
return context;
|
|
50
|
+
}
|
|
51
|
+
//# sourceMappingURL=WamProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"WamProvider.js","sourceRoot":"","sources":["../../src/components/WamProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAkB,OAAO,EAAE,MAAM,OAAO,CAAC;AAU3E,MAAM,UAAU,GAAG,aAAa,CAAyB,IAAI,CAAC,CAAC;AAS/D;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAoB;IACxD,MAAM,KAAK,GAAG,OAAO,CAAkB,GAAG,EAAE;QAC1C,MAAM,WAAW,GAAG,OAAO,MAAM,KAAK,WAAW,IAAI,MAAM,CAAC,YAAY,KAAK,SAAS,CAAC;QAEvF,OAAO,EAAE,WAAW,EAAE,CAAC;IACzB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,KAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAuB,CAAC;AAC7E,CAAC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,aAAa;IAC3B,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAEvC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;IACrE,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Options for useCallFunction hook
|
|
3
|
+
*/
|
|
4
|
+
export interface UseCallFunctionOptions {
|
|
5
|
+
/** App ID */
|
|
6
|
+
appId: string;
|
|
7
|
+
/** Function name (e.g., "calendar.booking.createBooking") */
|
|
8
|
+
name: string;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Result of useCallFunction hook
|
|
12
|
+
*/
|
|
13
|
+
export interface UseCallFunctionResult<T> {
|
|
14
|
+
/** Function to call the app function */
|
|
15
|
+
call: (params: Record<string, unknown>) => Promise<T>;
|
|
16
|
+
/** Whether the function is currently being called */
|
|
17
|
+
loading: boolean;
|
|
18
|
+
/** Error from the last call, if any */
|
|
19
|
+
error: Error | null;
|
|
20
|
+
/** Data from the last successful call */
|
|
21
|
+
data: T | null;
|
|
22
|
+
/** Reset the state */
|
|
23
|
+
reset: () => void;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Hook for calling app functions from WAM
|
|
27
|
+
*
|
|
28
|
+
* @param options - Function call options
|
|
29
|
+
* @returns Object with call function and state
|
|
30
|
+
*
|
|
31
|
+
* @example
|
|
32
|
+
* ```typescript
|
|
33
|
+
* function BookingWidget() {
|
|
34
|
+
* const appId = useWamData('appId');
|
|
35
|
+
* const { call, loading, error, data } = useCallFunction<{ bookingId: string }>({
|
|
36
|
+
* appId,
|
|
37
|
+
* name: 'calendar.booking.createBooking',
|
|
38
|
+
* });
|
|
39
|
+
*
|
|
40
|
+
* const handleSubmit = async () => {
|
|
41
|
+
* const result = await call({
|
|
42
|
+
* eventTypeId: '123',
|
|
43
|
+
* startTime: '2024-01-15T10:00:00Z',
|
|
44
|
+
* });
|
|
45
|
+
* console.log('Created booking:', result.bookingId);
|
|
46
|
+
* };
|
|
47
|
+
*
|
|
48
|
+
* return (
|
|
49
|
+
* <button onClick={handleSubmit} disabled={loading}>
|
|
50
|
+
* {loading ? 'Creating...' : 'Create Booking'}
|
|
51
|
+
* </button>
|
|
52
|
+
* );
|
|
53
|
+
* }
|
|
54
|
+
* ```
|
|
55
|
+
*/
|
|
56
|
+
export declare function useCallFunction<T = unknown>(options: UseCallFunctionOptions): UseCallFunctionResult<T>;
|
|
57
|
+
//# sourceMappingURL=useCallFunction.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCallFunction.d.ts","sourceRoot":"","sources":["../../src/hooks/useCallFunction.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,wCAAwC;IACxC,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IACtD,qDAAqD;IACrD,OAAO,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,yCAAyC;IACzC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,sBAAsB;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,eAAe,CAAC,CAAC,GAAG,OAAO,EACzC,OAAO,EAAE,sBAAsB,GAC9B,qBAAqB,CAAC,CAAC,CAAC,CA6C1B"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { useState, useCallback } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Hook for calling app functions from WAM
|
|
4
|
+
*
|
|
5
|
+
* @param options - Function call options
|
|
6
|
+
* @returns Object with call function and state
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```typescript
|
|
10
|
+
* function BookingWidget() {
|
|
11
|
+
* const appId = useWamData('appId');
|
|
12
|
+
* const { call, loading, error, data } = useCallFunction<{ bookingId: string }>({
|
|
13
|
+
* appId,
|
|
14
|
+
* name: 'calendar.booking.createBooking',
|
|
15
|
+
* });
|
|
16
|
+
*
|
|
17
|
+
* const handleSubmit = async () => {
|
|
18
|
+
* const result = await call({
|
|
19
|
+
* eventTypeId: '123',
|
|
20
|
+
* startTime: '2024-01-15T10:00:00Z',
|
|
21
|
+
* });
|
|
22
|
+
* console.log('Created booking:', result.bookingId);
|
|
23
|
+
* };
|
|
24
|
+
*
|
|
25
|
+
* return (
|
|
26
|
+
* <button onClick={handleSubmit} disabled={loading}>
|
|
27
|
+
* {loading ? 'Creating...' : 'Create Booking'}
|
|
28
|
+
* </button>
|
|
29
|
+
* );
|
|
30
|
+
* }
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
export function useCallFunction(options) {
|
|
34
|
+
const [loading, setLoading] = useState(false);
|
|
35
|
+
const [error, setError] = useState(null);
|
|
36
|
+
const [data, setData] = useState(null);
|
|
37
|
+
const call = useCallback(async (params) => {
|
|
38
|
+
if (typeof window === "undefined") {
|
|
39
|
+
throw new Error("Window is not available");
|
|
40
|
+
}
|
|
41
|
+
const wam = window.ChannelIOWam;
|
|
42
|
+
if (!wam || typeof wam.callFunction !== "function") {
|
|
43
|
+
throw new Error("ChannelIOWam.callFunction is not available");
|
|
44
|
+
}
|
|
45
|
+
setLoading(true);
|
|
46
|
+
setError(null);
|
|
47
|
+
try {
|
|
48
|
+
const result = await wam.callFunction({
|
|
49
|
+
appId: options.appId,
|
|
50
|
+
name: options.name,
|
|
51
|
+
params,
|
|
52
|
+
});
|
|
53
|
+
setData(result);
|
|
54
|
+
return result;
|
|
55
|
+
}
|
|
56
|
+
catch (err) {
|
|
57
|
+
const error = err instanceof Error ? err : new Error(String(err));
|
|
58
|
+
setError(error);
|
|
59
|
+
throw error;
|
|
60
|
+
}
|
|
61
|
+
finally {
|
|
62
|
+
setLoading(false);
|
|
63
|
+
}
|
|
64
|
+
}, [options.appId, options.name]);
|
|
65
|
+
const reset = useCallback(() => {
|
|
66
|
+
setLoading(false);
|
|
67
|
+
setError(null);
|
|
68
|
+
setData(null);
|
|
69
|
+
}, []);
|
|
70
|
+
return { call, loading, error, data, reset };
|
|
71
|
+
}
|
|
72
|
+
//# sourceMappingURL=useCallFunction.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCallFunction.js","sourceRoot":"","sources":["../../src/hooks/useCallFunction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AA4B9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,eAAe,CAC7B,OAA+B;IAE/B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAW,IAAI,CAAC,CAAC;IAEjD,MAAM,IAAI,GAAG,WAAW,CACtB,KAAK,EAAE,MAA+B,EAAc,EAAE;QACpD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;QAED,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC;QAChC,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,CAAC,YAAY,KAAK,UAAU,EAAE,CAAC;YACnD,MAAM,IAAI,KAAK,CAAC,4CAA4C,CAAC,CAAC;QAChE,CAAC;QAED,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEf,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,GAAG,CAAC,YAAY,CAAI;gBACvC,KAAK,EAAE,OAAO,CAAC,KAAK;gBACpB,IAAI,EAAE,OAAO,CAAC,IAAI;gBAClB,MAAM;aACP,CAAC,CAAC;YACH,OAAO,CAAC,MAAM,CAAC,CAAC;YAChB,OAAO,MAAM,CAAC;QAChB,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,MAAM,KAAK,GAAG,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;YAClE,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,MAAM,KAAK,CAAC;QACd,CAAC;gBAAS,CAAC;YACT,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EACD,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAC9B,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAC/C,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Options for useNativeFunction hook
|
|
3
|
+
*/
|
|
4
|
+
export interface UseNativeFunctionOptions {
|
|
5
|
+
/** Native function name */
|
|
6
|
+
name: string;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Result of useNativeFunction hook
|
|
10
|
+
*/
|
|
11
|
+
export interface UseNativeFunctionResult<T> {
|
|
12
|
+
/** Function to call the native function */
|
|
13
|
+
call: (params: Record<string, unknown>) => Promise<T>;
|
|
14
|
+
/** Whether the function is currently being called */
|
|
15
|
+
loading: boolean;
|
|
16
|
+
/** Error from the last call, if any */
|
|
17
|
+
error: Error | null;
|
|
18
|
+
/** Data from the last successful call */
|
|
19
|
+
data: T | null;
|
|
20
|
+
/** Reset the state */
|
|
21
|
+
reset: () => void;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* Hook for calling Channel.io native functions from WAM
|
|
25
|
+
*
|
|
26
|
+
* @param options - Native function call options
|
|
27
|
+
* @returns Object with call function and state
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* ```typescript
|
|
31
|
+
* function MessageWidget() {
|
|
32
|
+
* const { call, loading } = useNativeFunction<void>({
|
|
33
|
+
* name: 'sendMessage',
|
|
34
|
+
* });
|
|
35
|
+
*
|
|
36
|
+
* const handleSend = async () => {
|
|
37
|
+
* await call({
|
|
38
|
+
* channelId: '...',
|
|
39
|
+
* groupId: '...',
|
|
40
|
+
* content: 'Hello from WAM!',
|
|
41
|
+
* });
|
|
42
|
+
* };
|
|
43
|
+
*
|
|
44
|
+
* return (
|
|
45
|
+
* <button onClick={handleSend} disabled={loading}>
|
|
46
|
+
* Send Message
|
|
47
|
+
* </button>
|
|
48
|
+
* );
|
|
49
|
+
* }
|
|
50
|
+
* ```
|
|
51
|
+
*/
|
|
52
|
+
export declare function useNativeFunction<T = unknown>(options: UseNativeFunctionOptions): UseNativeFunctionResult<T>;
|
|
53
|
+
//# sourceMappingURL=useNativeFunction.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useNativeFunction.d.ts","sourceRoot":"","sources":["../../src/hooks/useNativeFunction.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB,CAAC,CAAC;IACxC,2CAA2C;IAC3C,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IACtD,qDAAqD;IACrD,OAAO,EAAE,OAAO,CAAC;IACjB,uCAAuC;IACvC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,yCAAyC;IACzC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,sBAAsB;IACtB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,OAAO,EAC3C,OAAO,EAAE,wBAAwB,GAChC,uBAAuB,CAAC,CAAC,CAAC,CA4C5B"}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { useState, useCallback } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Hook for calling Channel.io native functions from WAM
|
|
4
|
+
*
|
|
5
|
+
* @param options - Native function call options
|
|
6
|
+
* @returns Object with call function and state
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```typescript
|
|
10
|
+
* function MessageWidget() {
|
|
11
|
+
* const { call, loading } = useNativeFunction<void>({
|
|
12
|
+
* name: 'sendMessage',
|
|
13
|
+
* });
|
|
14
|
+
*
|
|
15
|
+
* const handleSend = async () => {
|
|
16
|
+
* await call({
|
|
17
|
+
* channelId: '...',
|
|
18
|
+
* groupId: '...',
|
|
19
|
+
* content: 'Hello from WAM!',
|
|
20
|
+
* });
|
|
21
|
+
* };
|
|
22
|
+
*
|
|
23
|
+
* return (
|
|
24
|
+
* <button onClick={handleSend} disabled={loading}>
|
|
25
|
+
* Send Message
|
|
26
|
+
* </button>
|
|
27
|
+
* );
|
|
28
|
+
* }
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
export function useNativeFunction(options) {
|
|
32
|
+
const [loading, setLoading] = useState(false);
|
|
33
|
+
const [error, setError] = useState(null);
|
|
34
|
+
const [data, setData] = useState(null);
|
|
35
|
+
const call = useCallback(async (params) => {
|
|
36
|
+
if (typeof window === "undefined") {
|
|
37
|
+
throw new Error("Window is not available");
|
|
38
|
+
}
|
|
39
|
+
const wam = window.ChannelIOWam;
|
|
40
|
+
if (!wam || typeof wam.callNativeFunction !== "function") {
|
|
41
|
+
throw new Error("ChannelIOWam.callNativeFunction is not available");
|
|
42
|
+
}
|
|
43
|
+
setLoading(true);
|
|
44
|
+
setError(null);
|
|
45
|
+
try {
|
|
46
|
+
const result = await wam.callNativeFunction({
|
|
47
|
+
name: options.name,
|
|
48
|
+
params,
|
|
49
|
+
});
|
|
50
|
+
setData(result);
|
|
51
|
+
return result;
|
|
52
|
+
}
|
|
53
|
+
catch (err) {
|
|
54
|
+
const error = err instanceof Error ? err : new Error(String(err));
|
|
55
|
+
setError(error);
|
|
56
|
+
throw error;
|
|
57
|
+
}
|
|
58
|
+
finally {
|
|
59
|
+
setLoading(false);
|
|
60
|
+
}
|
|
61
|
+
}, [options.name]);
|
|
62
|
+
const reset = useCallback(() => {
|
|
63
|
+
setLoading(false);
|
|
64
|
+
setError(null);
|
|
65
|
+
setData(null);
|
|
66
|
+
}, []);
|
|
67
|
+
return { call, loading, error, data, reset };
|
|
68
|
+
}
|
|
69
|
+
//# sourceMappingURL=useNativeFunction.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useNativeFunction.js","sourceRoot":"","sources":["../../src/hooks/useNativeFunction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AA0B9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,iBAAiB,CAC/B,OAAiC;IAEjC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,IAAI,CAAC,CAAC;IACvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAW,IAAI,CAAC,CAAC;IAEjD,MAAM,IAAI,GAAG,WAAW,CACtB,KAAK,EAAE,MAA+B,EAAc,EAAE;QACpD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;QAC7C,CAAC;QAED,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC;QAChC,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,CAAC,kBAAkB,KAAK,UAAU,EAAE,CAAC;YACzD,MAAM,IAAI,KAAK,CAAC,kDAAkD,CAAC,CAAC;QACtE,CAAC;QAED,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,QAAQ,CAAC,IAAI,CAAC,CAAC;QAEf,IAAI,CAAC;YACH,MAAM,MAAM,GAAG,MAAM,GAAG,CAAC,kBAAkB,CAAI;gBAC7C,IAAI,EAAE,OAAO,CAAC,IAAI;gBAClB,MAAM;aACP,CAAC,CAAC;YACH,OAAO,CAAC,MAAM,CAAC,CAAC;YAChB,OAAO,MAAM,CAAC;QAChB,CAAC;QAAC,OAAO,GAAG,EAAE,CAAC;YACb,MAAM,KAAK,GAAG,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC;YAClE,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,MAAM,KAAK,CAAC;QACd,CAAC;gBAAS,CAAC;YACT,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EACD,CAAC,OAAO,CAAC,IAAI,CAAC,CACf,CAAC;IAEF,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACf,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;AAC/C,CAAC"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Get WAM data by key
|
|
3
|
+
*
|
|
4
|
+
* @param key - The key to retrieve from WAM data
|
|
5
|
+
* @returns The value associated with the key, or undefined if not found
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```typescript
|
|
9
|
+
* function MyWidget() {
|
|
10
|
+
* const appId = useWamData('appId');
|
|
11
|
+
* const channelId = useWamData('channelId');
|
|
12
|
+
* const customData = useWamData('myCustomKey');
|
|
13
|
+
*
|
|
14
|
+
* return <div>App: {appId}</div>;
|
|
15
|
+
* }
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare function useWamData(key: string): unknown;
|
|
19
|
+
/**
|
|
20
|
+
* Common WAM data keys
|
|
21
|
+
*/
|
|
22
|
+
export type WamDataKey = "appId" | "channelId" | "managerId" | "chatId" | "chatType" | "chatTitle" | "rootMessageId" | "broadcast" | "isPrivate" | (string & {});
|
|
23
|
+
/**
|
|
24
|
+
* Get typed WAM data for common keys
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* ```typescript
|
|
28
|
+
* function MyWidget() {
|
|
29
|
+
* const appId = useTypedWamData('appId'); // string | undefined
|
|
30
|
+
* const channelId = useTypedWamData('channelId'); // string | undefined
|
|
31
|
+
* }
|
|
32
|
+
* ```
|
|
33
|
+
*/
|
|
34
|
+
export declare function useTypedWamData(key: "appId" | "channelId" | "managerId" | "chatId" | "chatType" | "chatTitle" | "rootMessageId"): string | undefined;
|
|
35
|
+
export declare function useTypedWamData(key: "broadcast" | "isPrivate"): boolean | undefined;
|
|
36
|
+
export declare function useTypedWamData(key: string): unknown;
|
|
37
|
+
//# sourceMappingURL=useWamData.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useWamData.d.ts","sourceRoot":"","sources":["../../src/hooks/useWamData.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAc/C;AAED;;GAEG;AACH,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,WAAW,GACX,WAAW,GACX,QAAQ,GACR,UAAU,GACV,WAAW,GACX,eAAe,GACf,WAAW,GACX,WAAW,GACX,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAElB;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,OAAO,GAAG,WAAW,GAAG,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,GAAG,eAAe,GAC/F,MAAM,GAAG,SAAS,CAAC;AACtB,wBAAgB,eAAe,CAAC,GAAG,EAAE,WAAW,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;AACrF,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Get WAM data by key
|
|
4
|
+
*
|
|
5
|
+
* @param key - The key to retrieve from WAM data
|
|
6
|
+
* @returns The value associated with the key, or undefined if not found
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```typescript
|
|
10
|
+
* function MyWidget() {
|
|
11
|
+
* const appId = useWamData('appId');
|
|
12
|
+
* const channelId = useWamData('channelId');
|
|
13
|
+
* const customData = useWamData('myCustomKey');
|
|
14
|
+
*
|
|
15
|
+
* return <div>App: {appId}</div>;
|
|
16
|
+
* }
|
|
17
|
+
* ```
|
|
18
|
+
*/
|
|
19
|
+
export function useWamData(key) {
|
|
20
|
+
return useMemo(() => {
|
|
21
|
+
if (typeof window === "undefined") {
|
|
22
|
+
return undefined;
|
|
23
|
+
}
|
|
24
|
+
const wam = window.ChannelIOWam;
|
|
25
|
+
if (!wam || typeof wam.getWamData !== "function") {
|
|
26
|
+
console.warn("ChannelIOWam.getWamData is not available");
|
|
27
|
+
return undefined;
|
|
28
|
+
}
|
|
29
|
+
return wam.getWamData(key);
|
|
30
|
+
}, [key]);
|
|
31
|
+
}
|
|
32
|
+
export function useTypedWamData(key) {
|
|
33
|
+
return useWamData(key);
|
|
34
|
+
}
|
|
35
|
+
//# sourceMappingURL=useWamData.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useWamData.js","sourceRoot":"","sources":["../../src/hooks/useWamData.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,UAAU,CAAC,GAAW;IACpC,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC;QAChC,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,CAAC,UAAU,KAAK,UAAU,EAAE,CAAC;YACjD,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;YACzD,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,OAAO,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;AACZ,CAAC;AAiCD,MAAM,UAAU,eAAe,CAAC,GAAe;IAC7C,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC;AACzB,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import type { WamSize } from "../types/wam.js";
|
|
2
|
+
/**
|
|
3
|
+
* Hook for controlling WAM window size
|
|
4
|
+
*
|
|
5
|
+
* @returns Object with setSize function
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```typescript
|
|
9
|
+
* function MyWidget() {
|
|
10
|
+
* const { setSize } = useWamSize();
|
|
11
|
+
*
|
|
12
|
+
* useEffect(() => {
|
|
13
|
+
* setSize({ height: 400 });
|
|
14
|
+
* }, [setSize]);
|
|
15
|
+
*
|
|
16
|
+
* const expand = () => setSize({ height: 600, width: 500 });
|
|
17
|
+
*
|
|
18
|
+
* return <button onClick={expand}>Expand</button>;
|
|
19
|
+
* }
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
export declare function useWamSize(): {
|
|
23
|
+
setSize: (size: WamSize) => void;
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Hook for closing WAM window
|
|
27
|
+
*
|
|
28
|
+
* @returns Object with close function
|
|
29
|
+
*
|
|
30
|
+
* @example
|
|
31
|
+
* ```typescript
|
|
32
|
+
* function MyWidget() {
|
|
33
|
+
* const { close } = useWamClose();
|
|
34
|
+
*
|
|
35
|
+
* return <button onClick={close}>Close</button>;
|
|
36
|
+
* }
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
39
|
+
export declare function useWamClose(): {
|
|
40
|
+
close: () => void;
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=useWamSize.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useWamSize.d.ts","sourceRoot":"","sources":["../../src/hooks/useWamSize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,UAAU;oBACW,OAAO;EAe3C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW;;EAgB1B"}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { useCallback } from "react";
|
|
2
|
+
/**
|
|
3
|
+
* Hook for controlling WAM window size
|
|
4
|
+
*
|
|
5
|
+
* @returns Object with setSize function
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```typescript
|
|
9
|
+
* function MyWidget() {
|
|
10
|
+
* const { setSize } = useWamSize();
|
|
11
|
+
*
|
|
12
|
+
* useEffect(() => {
|
|
13
|
+
* setSize({ height: 400 });
|
|
14
|
+
* }, [setSize]);
|
|
15
|
+
*
|
|
16
|
+
* const expand = () => setSize({ height: 600, width: 500 });
|
|
17
|
+
*
|
|
18
|
+
* return <button onClick={expand}>Expand</button>;
|
|
19
|
+
* }
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
export function useWamSize() {
|
|
23
|
+
const setSize = useCallback((size) => {
|
|
24
|
+
if (typeof window === "undefined") {
|
|
25
|
+
return;
|
|
26
|
+
}
|
|
27
|
+
const wam = window.ChannelIOWam;
|
|
28
|
+
if (!wam || typeof wam.setSize !== "function") {
|
|
29
|
+
console.warn("ChannelIOWam.setSize is not available");
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
wam.setSize(size);
|
|
33
|
+
}, []);
|
|
34
|
+
return { setSize };
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Hook for closing WAM window
|
|
38
|
+
*
|
|
39
|
+
* @returns Object with close function
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```typescript
|
|
43
|
+
* function MyWidget() {
|
|
44
|
+
* const { close } = useWamClose();
|
|
45
|
+
*
|
|
46
|
+
* return <button onClick={close}>Close</button>;
|
|
47
|
+
* }
|
|
48
|
+
* ```
|
|
49
|
+
*/
|
|
50
|
+
export function useWamClose() {
|
|
51
|
+
const close = useCallback(() => {
|
|
52
|
+
if (typeof window === "undefined") {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
const wam = window.ChannelIOWam;
|
|
56
|
+
if (!wam || typeof wam.close !== "function") {
|
|
57
|
+
console.warn("ChannelIOWam.close is not available");
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
wam.close();
|
|
61
|
+
}, []);
|
|
62
|
+
return { close };
|
|
63
|
+
}
|
|
64
|
+
//# sourceMappingURL=useWamSize.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useWamSize.js","sourceRoot":"","sources":["../../src/hooks/useWamSize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAGpC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,UAAU;IACxB,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,IAAa,EAAE,EAAE;QAC5C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,OAAO;QACT,CAAC;QAED,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC;QAChC,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;YAC9C,OAAO,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC;YACtD,OAAO;QACT,CAAC;QAED,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,OAAO,EAAE,CAAC;AACrB,CAAC;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,WAAW;IACzB,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;YAClC,OAAO;QACT,CAAC;QAED,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC;QAChC,IAAI,CAAC,GAAG,IAAI,OAAO,GAAG,CAAC,KAAK,KAAK,UAAU,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,qCAAqC,CAAC,CAAC;YACpD,OAAO;QACT,CAAC;QAED,GAAG,CAAC,KAAK,EAAE,CAAC;IACd,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,EAAE,KAAK,EAAE,CAAC;AACnB,CAAC"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAC;AAGjC,cAAc,kBAAkB,CAAC;AAGjC,cAAc,uBAAuB,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,QAAQ;AACR,cAAc,kBAAkB,CAAC;AAEjC,QAAQ;AACR,cAAc,kBAAkB,CAAC;AAEjC,aAAa;AACb,cAAc,uBAAuB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Size configuration for WAM window
|
|
3
|
+
*/
|
|
4
|
+
export interface WamSize {
|
|
5
|
+
/** Width in pixels (optional) */
|
|
6
|
+
width?: number;
|
|
7
|
+
/** Height in pixels (required) */
|
|
8
|
+
height: number;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Arguments for calling an app function
|
|
12
|
+
*/
|
|
13
|
+
export interface CallFunctionArgs {
|
|
14
|
+
/** App ID */
|
|
15
|
+
appId: string;
|
|
16
|
+
/** Function name (e.g., "calendar.booking.createBooking") */
|
|
17
|
+
name: string;
|
|
18
|
+
/** Function parameters */
|
|
19
|
+
params: Record<string, unknown>;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Arguments for calling a native function
|
|
23
|
+
*/
|
|
24
|
+
export interface CallNativeFunctionArgs {
|
|
25
|
+
/** Native function name */
|
|
26
|
+
name: string;
|
|
27
|
+
/** Function parameters */
|
|
28
|
+
params: Record<string, unknown>;
|
|
29
|
+
}
|
|
30
|
+
/**
|
|
31
|
+
* Channel.io WAM API interface
|
|
32
|
+
*/
|
|
33
|
+
export interface ChannelIOWam {
|
|
34
|
+
/** Get WAM data by key */
|
|
35
|
+
getWamData: (key: string) => unknown;
|
|
36
|
+
/** Set WAM window size */
|
|
37
|
+
setSize: (size: WamSize) => void;
|
|
38
|
+
/** Call an app function */
|
|
39
|
+
callFunction: <T>(args: CallFunctionArgs) => Promise<T>;
|
|
40
|
+
/** Call a native function */
|
|
41
|
+
callNativeFunction: <T>(args: CallNativeFunctionArgs) => Promise<T>;
|
|
42
|
+
/** Close the WAM window */
|
|
43
|
+
close: () => void;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Extend the global Window interface
|
|
47
|
+
*/
|
|
48
|
+
declare global {
|
|
49
|
+
interface Window {
|
|
50
|
+
ChannelIOWam?: ChannelIOWam;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
//# sourceMappingURL=wam.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"wam.d.ts","sourceRoot":"","sources":["../../src/types/wam.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,OAAO;IACtB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,0BAA0B;IAC1B,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACrC,0BAA0B;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACjC,2BAA2B;IAC3B,YAAY,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IACxD,6BAA6B;IAC7B,kBAAkB,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,sBAAsB,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IACpE,2BAA2B;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"wam.js","sourceRoot":"","sources":["../../src/types/wam.ts"],"names":[],"mappings":""}
|
package/package.json
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@channel.io/app-sdk-wam",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "React SDK for Channel.io WAM (Web App Module)",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/index.js"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist"
|
|
16
|
+
],
|
|
17
|
+
"dependencies": {},
|
|
18
|
+
"peerDependencies": {
|
|
19
|
+
"react": ">=17.0.0"
|
|
20
|
+
},
|
|
21
|
+
"devDependencies": {
|
|
22
|
+
"@types/react": "^18.3.18",
|
|
23
|
+
"react": "^18.3.1",
|
|
24
|
+
"typescript": "^5.7.2",
|
|
25
|
+
"vitest": "^2.1.8"
|
|
26
|
+
},
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "https://github.com/channel-io/app-sdk.git",
|
|
30
|
+
"directory": "packages/wam"
|
|
31
|
+
},
|
|
32
|
+
"license": "MIT",
|
|
33
|
+
"publishConfig": {
|
|
34
|
+
"access": "public"
|
|
35
|
+
},
|
|
36
|
+
"scripts": {
|
|
37
|
+
"build": "tsc",
|
|
38
|
+
"dev": "tsc --watch",
|
|
39
|
+
"lint": "eslint src/",
|
|
40
|
+
"lint:fix": "eslint src/ --fix",
|
|
41
|
+
"typecheck": "tsc --noEmit",
|
|
42
|
+
"test": "vitest run",
|
|
43
|
+
"test:watch": "vitest",
|
|
44
|
+
"clean": "rm -rf dist"
|
|
45
|
+
}
|
|
46
|
+
}
|