@oneblink/apps-react 4.1.0-beta.7 → 4.1.0-beta.8

package/dist/hooks/useAuth.d.ts

@@ -1,15 +1,90 @@
 import * as React from 'react';
-import { authService } from '@oneblink/apps';
-type AuthContextValue = {
-    isLoggedIn: ReturnType<typeof authService.isLoggedIn>;
-    userProfile: ReturnType<typeof authService.getUserProfile>;
-    userFriendlyName: ReturnType<typeof authService.getUserFriendlyName>;
+import { UserProfile } from '@oneblink/types/typescript/misc';
+export type AuthContextValue = {
+    /** `true` if the current user is logged in */
+    isLoggedIn: boolean;
+    /**
+     * See
+     * [auth-service.getUserProfile()](https://oneblink.github.io/apps/modules/authService.html#getUserProfile)
+     */
+    userProfile: UserProfile | null;
+    /**
+     * See
+     * [auth-service.getUserFriendlyName()](https://oneblink.github.io/apps/modules/authService.html#getUserFriendlyName)
+     */
+    userFriendlyName: string | undefined;
+    /**
+     * `true` if [`<AuthContextProvider />`](#AuthContextProvider) was passed the
+     * `formsKeyToken` prop
+     */
     isUsingFormsKey: boolean;
 };
+/**
+ * `<AuthContextProvider />` is a React Component that provides the context for
+ * the `useAuth()` hook to be used by components further down your component
+ * tree. **It should only be included in your component tree once and ideally at
+ * the root of the application.**
+ *
+ * #### Example
+ *
+ * ```jsx
+ * import * as React from 'react'
+ * import { AuthContextProvider, useAuth } from '@oneblink/apps-react'
+ *
+ * function Component() {
+ *   const auth = useAuth()
+ *   // use auth here
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <AuthContextProvider>
+ *       <Component />
+ *     </AuthContextProvider>
+ *   )
+ * }
+ *
+ * const root = document.getElementById('root')
+ * if (root) {
+ *   ReactDOM.render(<App />, root)
+ * }
+ * ```
+ *
+ * @param props
+ * @returns
+ * @group Components
+ */
 export declare function AuthContextProvider({ children, formsKeyToken, userToken, }: {
+    /** Your application components */
     children: React.ReactNode;
+    /**
+     * A Forms Key token being used to make requests to the OneBlink API on behalf
+     * of the user
+     */
     formsKeyToken?: string;
+    /**
+     * An encrypted user token that will be used included in the submission on
+     * behalf of the user
+     */
     userToken?: string;
 }): JSX.Element;
+/**
+ * A React hook for containing state associated the current user. **This hook
+ * requires [`<AuthContextProvider />`](./AuthContextProvider.html) to be
+ * present in your component tree.**
+ *
+ * Example
+ *
+ * ```js
+ * import { useAuth } from '@oneblink/apps-react'
+ *
+ * function Component() {
+ *   const { isLoggedIn, userProfile, userFriendlyName, isUsingFormsKey } =
+ *     useAuth()
+ * }
+ * ```
+ *
+ * @returns
+ * @group Hooks
+ */
 export default function useAuth(): AuthContextValue;
-export {};

package/dist/hooks/useAuth.js

@@ -6,6 +6,41 @@ const AuthContext = React.createContext({
     userFriendlyName: undefined,
     isUsingFormsKey: false,
 });
+/**
+ * `<AuthContextProvider />` is a React Component that provides the context for
+ * the `useAuth()` hook to be used by components further down your component
+ * tree. **It should only be included in your component tree once and ideally at
+ * the root of the application.**
+ *
+ * #### Example
+ *
+ * ```jsx
+ * import * as React from 'react'
+ * import { AuthContextProvider, useAuth } from '@oneblink/apps-react'
+ *
+ * function Component() {
+ *   const auth = useAuth()
+ *   // use auth here
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <AuthContextProvider>
+ *       <Component />
+ *     </AuthContextProvider>
+ *   )
+ * }
+ *
+ * const root = document.getElementById('root')
+ * if (root) {
+ *   ReactDOM.render(<App />, root)
+ * }
+ * ```
+ *
+ * @param props
+ * @returns
+ * @group Components
+ */
 export function AuthContextProvider({ children, formsKeyToken, userToken, }) {
     const [value, setValue] = React.useState(() => {
         authService.setFormsKeyToken(formsKeyToken);
@@ -37,6 +72,25 @@ export function AuthContextProvider({ children, formsKeyToken, userToken, }) {
     }, []);
     return React.createElement(AuthContext.Provider, { value: value }, children);
 }
+/**
+ * A React hook for containing state associated the current user. **This hook
+ * requires [`<AuthContextProvider />`](./AuthContextProvider.html) to be
+ * present in your component tree.**
+ *
+ * Example
+ *
+ * ```js
+ * import { useAuth } from '@oneblink/apps-react'
+ *
+ * function Component() {
+ *   const { isLoggedIn, userProfile, userFriendlyName, isUsingFormsKey } =
+ *     useAuth()
+ * }
+ * ```
+ *
+ * @returns
+ * @group Hooks
+ */
 export default function useAuth() {
     return React.useContext(AuthContext);
 }

package/dist/hooks/useAuth.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAuth.js","sourceRoot":"","sources":["../../src/hooks/useAuth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAS5C,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;IACxD,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,IAAI;IACjB,gBAAgB,EAAE,SAAS;IAC3B,eAAe,EAAE,KAAK;CACvB,CAAC,CAAA;AAEF,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,aAAa,EACb,SAAS,GAKV;IACC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QAC5C,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;QAC3C,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;QACnC,OAAO;YACL,UAAU,EAAE,WAAW,CAAC,UAAU,EAAE;YACpC,WAAW,EAAE,WAAW,CAAC,cAAc,EAAE;YACzC,gBAAgB,EAAE,WAAW,CAAC,mBAAmB,EAAE;YACnD,eAAe,EAAE,CAAC,CAAC,aAAa;SACjC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;QAC3C,QAAQ,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC1B,GAAG,YAAY;YACf,eAAe,EAAE,CAAC,CAAC,aAAa;SACjC,CAAC,CAAC,CAAA;IACL,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;IACrC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,WAAW,CAAC,oBAAoB,CAAC,GAAG,EAAE,CAC3C,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACrB,GAAG,OAAO;YACV,UAAU,EAAE,WAAW,CAAC,UAAU,EAAE;YACpC,WAAW,EAAE,WAAW,CAAC,cAAc,EAAE;YACzC,gBAAgB,EAAE,WAAW,CAAC,mBAAmB,EAAE;SACpD,CAAC,CAAC,CACJ,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAwB,CAAA;AAC9E,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAA;AACtC,CAAC","sourcesContent":["import * as React from 'react'\nimport { authService } from '@oneblink/apps'\n\ntype AuthContextValue = {\n  isLoggedIn: ReturnType<typeof authService.isLoggedIn>\n  userProfile: ReturnType<typeof authService.getUserProfile>\n  userFriendlyName: ReturnType<typeof authService.getUserFriendlyName>\n  isUsingFormsKey: boolean\n}\n\nconst AuthContext = React.createContext<AuthContextValue>({\n  isLoggedIn: false,\n  userProfile: null,\n  userFriendlyName: undefined,\n  isUsingFormsKey: false,\n})\n\nexport function AuthContextProvider({\n  children,\n  formsKeyToken,\n  userToken,\n}: {\n  children: React.ReactNode\n  formsKeyToken?: string\n  userToken?: string\n}) {\n  const [value, setValue] = React.useState(() => {\n    authService.setFormsKeyToken(formsKeyToken)\n    authService.setUserToken(userToken)\n    return {\n      isLoggedIn: authService.isLoggedIn(),\n      userProfile: authService.getUserProfile(),\n      userFriendlyName: authService.getUserFriendlyName(),\n      isUsingFormsKey: !!formsKeyToken,\n    }\n  })\n\n  React.useEffect(() => {\n    authService.setFormsKeyToken(formsKeyToken)\n    setValue((currentValue) => ({\n      ...currentValue,\n      isUsingFormsKey: !!formsKeyToken,\n    }))\n  }, [formsKeyToken])\n\n  React.useEffect(() => {\n    authService.setUserToken(userToken)\n  }, [userToken])\n\n  React.useEffect(() => {\n    return authService.registerAuthListener(() =>\n      setValue((current) => ({\n        ...current,\n        isLoggedIn: authService.isLoggedIn(),\n        userProfile: authService.getUserProfile(),\n        userFriendlyName: authService.getUserFriendlyName(),\n      })),\n    )\n  }, [])\n\n  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>\n}\n\nexport default function useAuth() {\n  return React.useContext(AuthContext)\n}\n"]}
+{"version":3,"file":"useAuth.js","sourceRoot":"","sources":["../../src/hooks/useAuth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAuB5C,MAAM,WAAW,GAAG,KAAK,CAAC,aAAa,CAAmB;IACxD,UAAU,EAAE,KAAK;IACjB,WAAW,EAAE,IAAI;IACjB,gBAAgB,EAAE,SAAS;IAC3B,eAAe,EAAE,KAAK;CACvB,CAAC,CAAA;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,aAAa,EACb,SAAS,GAcV;IACC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QAC5C,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;QAC3C,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;QACnC,OAAO;YACL,UAAU,EAAE,WAAW,CAAC,UAAU,EAAE;YACpC,WAAW,EAAE,WAAW,CAAC,cAAc,EAAE;YACzC,gBAAgB,EAAE,WAAW,CAAC,mBAAmB,EAAE;YACnD,eAAe,EAAE,CAAC,CAAC,aAAa;SACjC,CAAA;IACH,CAAC,CAAC,CAAA;IAEF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,gBAAgB,CAAC,aAAa,CAAC,CAAA;QAC3C,QAAQ,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC1B,GAAG,YAAY;YACf,eAAe,EAAE,CAAC,CAAC,aAAa;SACjC,CAAC,CAAC,CAAA;IACL,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAA;IAEnB,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,YAAY,CAAC,SAAS,CAAC,CAAA;IACrC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,OAAO,WAAW,CAAC,oBAAoB,CAAC,GAAG,EAAE,CAC3C,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACrB,GAAG,OAAO;YACV,UAAU,EAAE,WAAW,CAAC,UAAU,EAAE;YACpC,WAAW,EAAE,WAAW,CAAC,cAAc,EAAE;YACzC,gBAAgB,EAAE,WAAW,CAAC,mBAAmB,EAAE;SACpD,CAAC,CAAC,CACJ,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAwB,CAAA;AAC9E,CAAC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO;IAC7B,OAAO,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAA;AACtC,CAAC","sourcesContent":["import * as React from 'react'\nimport { authService } from '@oneblink/apps'\nimport { UserProfile } from '@oneblink/types/typescript/misc'\n\nexport type AuthContextValue = {\n  /** `true` if the current user is logged in */\n  isLoggedIn: boolean\n  /**\n   * See\n   * [auth-service.getUserProfile()](https://oneblink.github.io/apps/modules/authService.html#getUserProfile)\n   */\n  userProfile: UserProfile | null\n  /**\n   * See\n   * [auth-service.getUserFriendlyName()](https://oneblink.github.io/apps/modules/authService.html#getUserFriendlyName)\n   */\n  userFriendlyName: string | undefined\n  /**\n   * `true` if [`<AuthContextProvider />`](#AuthContextProvider) was passed the\n   * `formsKeyToken` prop\n   */\n  isUsingFormsKey: boolean\n}\n\nconst AuthContext = React.createContext<AuthContextValue>({\n  isLoggedIn: false,\n  userProfile: null,\n  userFriendlyName: undefined,\n  isUsingFormsKey: false,\n})\n/**\n * `<AuthContextProvider />` is a React Component that provides the context for\n * the `useAuth()` hook to be used by components further down your component\n * tree. **It should only be included in your component tree once and ideally at\n * the root of the application.**\n *\n * #### Example\n *\n * ```jsx\n * import * as React from 'react'\n * import { AuthContextProvider, useAuth } from '@oneblink/apps-react'\n *\n * function Component() {\n *   const auth = useAuth()\n *   // use auth here\n * }\n *\n * function App() {\n *   return (\n *     <AuthContextProvider>\n *       <Component />\n *     </AuthContextProvider>\n *   )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n *   ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nexport function AuthContextProvider({\n  children,\n  formsKeyToken,\n  userToken,\n}: {\n  /** Your application components */\n  children: React.ReactNode\n  /**\n   * A Forms Key token being used to make requests to the OneBlink API on behalf\n   * of the user\n   */\n  formsKeyToken?: string\n  /**\n   * An encrypted user token that will be used included in the submission on\n   * behalf of the user\n   */\n  userToken?: string\n}) {\n  const [value, setValue] = React.useState(() => {\n    authService.setFormsKeyToken(formsKeyToken)\n    authService.setUserToken(userToken)\n    return {\n      isLoggedIn: authService.isLoggedIn(),\n      userProfile: authService.getUserProfile(),\n      userFriendlyName: authService.getUserFriendlyName(),\n      isUsingFormsKey: !!formsKeyToken,\n    }\n  })\n\n  React.useEffect(() => {\n    authService.setFormsKeyToken(formsKeyToken)\n    setValue((currentValue) => ({\n      ...currentValue,\n      isUsingFormsKey: !!formsKeyToken,\n    }))\n  }, [formsKeyToken])\n\n  React.useEffect(() => {\n    authService.setUserToken(userToken)\n  }, [userToken])\n\n  React.useEffect(() => {\n    return authService.registerAuthListener(() =>\n      setValue((current) => ({\n        ...current,\n        isLoggedIn: authService.isLoggedIn(),\n        userProfile: authService.getUserProfile(),\n        userFriendlyName: authService.getUserFriendlyName(),\n      })),\n    )\n  }, [])\n\n  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>\n}\n\n/**\n * A React hook for containing state associated the current user. **This hook\n * requires [`<AuthContextProvider />`](./AuthContextProvider.html) to be\n * present in your component tree.**\n *\n * Example\n *\n * ```js\n * import { useAuth } from '@oneblink/apps-react'\n *\n * function Component() {\n *   const { isLoggedIn, userProfile, userFriendlyName, isUsingFormsKey } =\n *     useAuth()\n * }\n * ```\n *\n * @returns\n * @group Hooks\n */\nexport default function useAuth() {\n  return React.useContext(AuthContext)\n}\n"]}

package/dist/hooks/useBooleanState.d.ts

@@ -1,5 +1,42 @@
-type setTrue = () => void;
-type setFalse = () => void;
-type toggle = () => void;
-export default function useBooleanState(defaultValue: boolean): [boolean, setTrue, setFalse, toggle];
-export {};
+/**
+ * This function is a react hook for boolean state that comes with
+ * `useCallback`s for 'turning on', 'turning off' and toggling the state.
+ *
+ * ## Return
+ *
+ * The return type of `useBooleanState(true)` is an array where:
+ *
+ * - The first item is a `boolean` (the state).
+ * - The second item is `() => void` (a function that sets the state to true).
+ * - The third item is `() => void` (a function that sets the state to false).
+ * - The fourth item is `() => void` (a function that toggles the state to the
+ *   opposite of what it currently is).
+ *
+ * As such, the items in the array can be destructured and named whatever you
+ * like:
+ *
+ * ```js
+ * import { useBooleanState } from '@oneblink/apps-react'
+ *
+ * const [dialogIsOpen, openDialog, closeDialog, toggleDialog] =
+ *   useBooleanState(true)
+ * ```
+ *
+ * These properties can then be used like:
+ *
+ * ```js
+ * openDialog()
+ * closeDialog()
+ * toggleDialog()
+ * ```
+ *
+ * @param defaultValue
+ * @returns
+ * @group Hooks
+ */
+export default function useBooleanState(defaultValue: boolean): [
+    state: boolean,
+    setTrue: () => void,
+    setFalse: () => void,
+    toggle: () => void
+];

package/dist/hooks/useBooleanState.js

@@ -1,4 +1,40 @@
 import * as React from 'react';
+/**
+ * This function is a react hook for boolean state that comes with
+ * `useCallback`s for 'turning on', 'turning off' and toggling the state.
+ *
+ * ## Return
+ *
+ * The return type of `useBooleanState(true)` is an array where:
+ *
+ * - The first item is a `boolean` (the state).
+ * - The second item is `() => void` (a function that sets the state to true).
+ * - The third item is `() => void` (a function that sets the state to false).
+ * - The fourth item is `() => void` (a function that toggles the state to the
+ *   opposite of what it currently is).
+ *
+ * As such, the items in the array can be destructured and named whatever you
+ * like:
+ *
+ * ```js
+ * import { useBooleanState } from '@oneblink/apps-react'
+ *
+ * const [dialogIsOpen, openDialog, closeDialog, toggleDialog] =
+ *   useBooleanState(true)
+ * ```
+ *
+ * These properties can then be used like:
+ *
+ * ```js
+ * openDialog()
+ * closeDialog()
+ * toggleDialog()
+ * ```
+ *
+ * @param defaultValue
+ * @returns
+ * @group Hooks
+ */
 export default function useBooleanState(defaultValue) {
     const [state, setState] = React.useState(defaultValue);
     const turnOn = React.useCallback(() => setState(true), []);

package/dist/hooks/useBooleanState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBooleanState.js","sourceRoot":"","sources":["../../src/hooks/useBooleanState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAqB;IAErB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAA;IACtD,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAC1D,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;IAC5D,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAA;IAC3E,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;AACzC,CAAC","sourcesContent":["import * as React from 'react'\n\ntype setTrue = () => void\ntype setFalse = () => void\ntype toggle = () => void\n\nexport default function useBooleanState(\n  defaultValue: boolean,\n): [boolean, setTrue, setFalse, toggle] {\n  const [state, setState] = React.useState(defaultValue)\n  const turnOn = React.useCallback(() => setState(true), [])\n  const turnOff = React.useCallback(() => setState(false), [])\n  const toggle = React.useCallback(() => setState((current) => !current), [])\n  return [state, turnOn, turnOff, toggle]\n}\n"]}
+{"version":3,"file":"useBooleanState.js","sourceRoot":"","sources":["../../src/hooks/useBooleanState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,YAAqB;IAOrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAA;IACtD,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC,CAAA;IAC1D,MAAM,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAA;IAC5D,MAAM,MAAM,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,EAAE,CAAC,CAAA;IAC3E,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;AACzC,CAAC","sourcesContent":["import * as React from 'react'\n\n/**\n * This function is a react hook for boolean state that comes with\n * `useCallback`s for 'turning on', 'turning off' and toggling the state.\n *\n * ## Return\n *\n * The return type of `useBooleanState(true)` is an array where:\n *\n * - The first item is a `boolean` (the state).\n * - The second item is `() => void` (a function that sets the state to true).\n * - The third item is `() => void` (a function that sets the state to false).\n * - The fourth item is `() => void` (a function that toggles the state to the\n *   opposite of what it currently is).\n *\n * As such, the items in the array can be destructured and named whatever you\n * like:\n *\n * ```js\n * import { useBooleanState } from '@oneblink/apps-react'\n *\n * const [dialogIsOpen, openDialog, closeDialog, toggleDialog] =\n *   useBooleanState(true)\n * ```\n *\n * These properties can then be used like:\n *\n * ```js\n * openDialog()\n * closeDialog()\n * toggleDialog()\n * ```\n *\n * @param defaultValue\n * @returns\n * @group Hooks\n */\nexport default function useBooleanState(\n  defaultValue: boolean,\n): [\n  state: boolean,\n  setTrue: () => void,\n  setFalse: () => void,\n  toggle: () => void,\n] {\n  const [state, setState] = React.useState(defaultValue)\n  const turnOn = React.useCallback(() => setState(true), [])\n  const turnOff = React.useCallback(() => setState(false), [])\n  const toggle = React.useCallback(() => setState((current) => !current), [])\n  return [state, turnOn, turnOff, toggle]\n}\n"]}

package/dist/hooks/useClickOutsideElement.d.ts

@@ -1,3 +1,43 @@
+/**
+ * This function is a react hook for watching for click events outside of a
+ * particular element. The hook will add and remove its own `eventListener`.
+ *
+ * - For performance reasons, it is important to pass a memoised function as the
+ *   callback argument, eg:
+ *
+ * ```js
+ * React.useCallback(() => {}, [])
+ * ```
+ *
+ * ## Example
+ *
+ * ```js
+ * import * as React from 'react'
+ * import { useClickOutsideElement } from '@oneblink/apps-react'
+ *
+ * const MyComponent = () => {
+ *   const narrowDivRef = React.useRef(null)
+ *   useClickOutsideElement(
+ *     narrowDivRef,
+ *     React.useCallback(() => {
+ *       console.log('Wide Div was clicked outside of narrow div...')
+ *     }, []),
+ *   )
+ *
+ *   return (
+ *     <div className="wide-div">
+ *       <div ref={narrowDivRef} className="narrow-div"></div>
+ *     </div>
+ *   )
+ * }
+ *
+ * export default MyComponent
+ * ```
+ *
+ * @param ref
+ * @param callback
+ * @group Hooks
+ */
 export default function useClickOutsideElement(ref: {
     current: HTMLElement | null;
 }, callback: () => void): void;

package/dist/hooks/useClickOutsideElement.js

@@ -1,4 +1,44 @@
 import * as React from 'react';
+/**
+ * This function is a react hook for watching for click events outside of a
+ * particular element. The hook will add and remove its own `eventListener`.
+ *
+ * - For performance reasons, it is important to pass a memoised function as the
+ *   callback argument, eg:
+ *
+ * ```js
+ * React.useCallback(() => {}, [])
+ * ```
+ *
+ * ## Example
+ *
+ * ```js
+ * import * as React from 'react'
+ * import { useClickOutsideElement } from '@oneblink/apps-react'
+ *
+ * const MyComponent = () => {
+ *   const narrowDivRef = React.useRef(null)
+ *   useClickOutsideElement(
+ *     narrowDivRef,
+ *     React.useCallback(() => {
+ *       console.log('Wide Div was clicked outside of narrow div...')
+ *     }, []),
+ *   )
+ *
+ *   return (
+ *     <div className="wide-div">
+ *       <div ref={narrowDivRef} className="narrow-div"></div>
+ *     </div>
+ *   )
+ * }
+ *
+ * export default MyComponent
+ * ```
+ *
+ * @param ref
+ * @param callback
+ * @group Hooks
+ */
 export default function useClickOutsideElement(ref, callback) {
     const handleClickOutside = React.useCallback((event) => {
         if (ref.current && !ref.current.contains(event.target)) {

package/dist/hooks/useClickOutsideElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClickOutsideElement.js","sourceRoot":"","sources":["../../src/hooks/useClickOutsideElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,GAAoC,EACpC,QAAoB;IAEpB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,CAAC,KAAY,EAAE,EAAE;QACf,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;YAC9D,QAAQ,EAAE,CAAA;SACX;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,GAAG,CAAC,CAChB,CAAA;IACD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;QAC1D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;QAC/D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;AAC1B,CAAC","sourcesContent":["import * as React from 'react'\n\nexport default function useClickOutsideElement(\n  ref: { current: HTMLElement | null },\n  callback: () => void,\n) {\n  const handleClickOutside = React.useCallback(\n    (event: Event) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        callback()\n      }\n    },\n    [callback, ref],\n  )\n  React.useEffect(() => {\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [handleClickOutside])\n}\n"]}
+{"version":3,"file":"useClickOutsideElement.js","sourceRoot":"","sources":["../../src/hooks/useClickOutsideElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,GAAoC,EACpC,QAAoB;IAEpB,MAAM,kBAAkB,GAAG,KAAK,CAAC,WAAW,CAC1C,CAAC,KAAY,EAAE,EAAE;QACf,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE;YAC9D,QAAQ,EAAE,CAAA;SACX;IACH,CAAC,EACD,CAAC,QAAQ,EAAE,GAAG,CAAC,CAChB,CAAA;IACD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;QAC1D,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;QAC/D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAA;AAC1B,CAAC","sourcesContent":["import * as React from 'react'\n\n/**\n * This function is a react hook for watching for click events outside of a\n * particular element. The hook will add and remove its own `eventListener`.\n *\n * - For performance reasons, it is important to pass a memoised function as the\n *   callback argument, eg:\n *\n * ```js\n * React.useCallback(() => {}, [])\n * ```\n *\n * ## Example\n *\n * ```js\n * import * as React from 'react'\n * import { useClickOutsideElement } from '@oneblink/apps-react'\n *\n * const MyComponent = () => {\n *   const narrowDivRef = React.useRef(null)\n *   useClickOutsideElement(\n *     narrowDivRef,\n *     React.useCallback(() => {\n *       console.log('Wide Div was clicked outside of narrow div...')\n *     }, []),\n *   )\n *\n *   return (\n *     <div className=\"wide-div\">\n *       <div ref={narrowDivRef} className=\"narrow-div\"></div>\n *     </div>\n *   )\n * }\n *\n * export default MyComponent\n * ```\n *\n * @param ref\n * @param callback\n * @group Hooks\n */\nexport default function useClickOutsideElement(\n  ref: { current: HTMLElement | null },\n  callback: () => void,\n) {\n  const handleClickOutside = React.useCallback(\n    (event: Event) => {\n      if (ref.current && !ref.current.contains(event.target as Node)) {\n        callback()\n      }\n    },\n    [callback, ref],\n  )\n  React.useEffect(() => {\n    document.addEventListener('mousedown', handleClickOutside)\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside)\n    }\n  }, [handleClickOutside])\n}\n"]}

package/dist/hooks/useConditionalLogic.d.ts

@@ -1,7 +1,6 @@
-import { FormTypes } from '@oneblink/types';
+import { FormTypes, SubmissionTypes } from '@oneblink/types';
 import { conditionalLogicService } from '@oneblink/sdk-core';
-import { FormSubmissionModel } from '../types/form';
-export default function useConditionalLogic(definition: FormTypes.Form, submission: FormSubmissionModel): {
+export default function useConditionalLogic(definition: FormTypes.Form, submission: SubmissionTypes.S3SubmissionData['submission']): {
     conditionalLogicError: Error | undefined;
     formElementsConditionallyShown: conditionalLogicService.FormElementsConditionallyShown;
 };

package/dist/hooks/useConditionalLogic.js.map

@@ -1 +1 @@
-{"version":3,"file":"useConditionalLogic.js","sourceRoot":"","sources":["../../src/hooks/useConditionalLogic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAO5D,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,UAA0B,EAC1B,UAA+B;IAE/B,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAErE,CAAA;IAEH,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QACvD,OAAO,CAAC,IAAI,CAAC,wCAAwC,EAAE,KAAK,CAAC,CAAA;QAC7D,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAA;QAC9B,wBAAwB,CAAC,KAAK,CAAC,CAAA;IACjC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,8BAA8B,GAClC,KAAK,CAAC,OAAO,CAAiC,GAAG,EAAE;QACjD,OAAO,uBAAuB,CAAC,sCAAsC,CAAC;YACpE,YAAY,EAAE,UAAU,CAAC,QAAQ;YACjC,UAAU;YACV,aAAa;SACd,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAA;IAEtD,OAAO;QACL,qBAAqB;QACrB,8BAA8B;KAC/B,CAAA;AACH,CAAC","sourcesContent":["import { Sentry } from '@oneblink/apps'\nimport { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport { conditionalLogicService } from '@oneblink/sdk-core'\n\nimport {\n  FormElementsConditionallyShown,\n  FormSubmissionModel,\n} from '../types/form'\n\nexport default function useConditionalLogic(\n  definition: FormTypes.Form,\n  submission: FormSubmissionModel,\n) {\n  const [conditionalLogicError, setConditionalLogicError] = React.useState<\n    Error | undefined\n  >()\n\n  const errorCallback = React.useCallback((error: Error) => {\n    console.warn('Error while checking conditional logic', error)\n    Sentry.captureException(error)\n    setConditionalLogicError(error)\n  }, [])\n\n  const formElementsConditionallyShown =\n    React.useMemo<FormElementsConditionallyShown>(() => {\n      return conditionalLogicService.generateFormElementsConditionallyShown({\n        formElements: definition.elements,\n        submission,\n        errorCallback,\n      })\n    }, [definition.elements, submission, errorCallback])\n\n  return {\n    conditionalLogicError,\n    formElementsConditionallyShown,\n  }\n}\n"]}
+{"version":3,"file":"useConditionalLogic.js","sourceRoot":"","sources":["../../src/hooks/useConditionalLogic.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAI5D,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,UAA0B,EAC1B,UAA0D;IAE1D,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,KAAK,CAAC,QAAQ,EAErE,CAAA;IAEH,MAAM,aAAa,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAY,EAAE,EAAE;QACvD,OAAO,CAAC,IAAI,CAAC,wCAAwC,EAAE,KAAK,CAAC,CAAA;QAC7D,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAA;QAC9B,wBAAwB,CAAC,KAAK,CAAC,CAAA;IACjC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,8BAA8B,GAClC,KAAK,CAAC,OAAO,CAAiC,GAAG,EAAE;QACjD,OAAO,uBAAuB,CAAC,sCAAsC,CAAC;YACpE,YAAY,EAAE,UAAU,CAAC,QAAQ;YACjC,UAAU;YACV,aAAa;SACd,CAAC,CAAA;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,QAAQ,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAA;IAEtD,OAAO;QACL,qBAAqB;QACrB,8BAA8B;KAC/B,CAAA;AACH,CAAC","sourcesContent":["import { Sentry } from '@oneblink/apps'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\nimport { conditionalLogicService } from '@oneblink/sdk-core'\n\nimport { FormElementsConditionallyShown } from '../types/form'\n\nexport default function useConditionalLogic(\n  definition: FormTypes.Form,\n  submission: SubmissionTypes.S3SubmissionData['submission'],\n) {\n  const [conditionalLogicError, setConditionalLogicError] = React.useState<\n    Error | undefined\n  >()\n\n  const errorCallback = React.useCallback((error: Error) => {\n    console.warn('Error while checking conditional logic', error)\n    Sentry.captureException(error)\n    setConditionalLogicError(error)\n  }, [])\n\n  const formElementsConditionallyShown =\n    React.useMemo<FormElementsConditionallyShown>(() => {\n      return conditionalLogicService.generateFormElementsConditionallyShown({\n        formElements: definition.elements,\n        submission,\n        errorCallback,\n      })\n    }, [definition.elements, submission, errorCallback])\n\n  return {\n    conditionalLogicError,\n    formElementsConditionallyShown,\n  }\n}\n"]}

package/dist/hooks/useDrafts.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { SubmissionTypes } from '@oneblink/types';
+/** The value returned from `useDrafts()` hook */
+export type DraftsContextValue = {
+    /** `true` drafts are currently loading. */
+    isLoading: boolean;
+    /** An Error object if loading drafts fails */
+    loadError: Error | null;
+    /** The incomplete submissions that were saved for later */
+    drafts: SubmissionTypes.FormsAppDraft[];
+    /** A function to trigger loading of the drafts */
+    reloadDrafts: () => unknown;
+    /** A function to clear Error object from loading drafts */
+    clearLoadError: () => void;
+    /** `true` drafts are syncing with other devices */
+    isSyncing: boolean;
+    /** A function to trigger syncing of the drafts */
+    syncDrafts: () => unknown;
+    /** An Error object if syncing drafts fails */
+    syncError: Error | null;
+    /** A function to clear Error object from syncing drafts */
+    clearSyncError: () => void;
+    /** A function to remove a draft */
+    deleteDraft: (draftId: string) => Promise<void>;
+};
+/**
+ * React Component that provides the context for the `useDrafts()` hook to be
+ * used by components further down your component tree. **It should only be
+ * included in your component tree once and ideally at the root of the
+ * application.**
+ *
+ * #### Example
+ *
+ * ```jsx
+ * import * as React from 'react'
+ * import { DraftsContextProvider, useDrafts } from '@oneblink/apps-react'
+ *
+ * function Component() {
+ *   const draftsContext = useDrafts()
+ *   // use drafts here
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DraftsContextProvider>
+ *       <Component />
+ *     </DraftsContextProvider>
+ *   )
+ * }
+ *
+ * const root = document.getElementById('root')
+ * if (root) {
+ *   ReactDOM.render(<App />, root)
+ * }
+ * ```
+ *
+ * @param props
+ * @returns
+ * @group Components
+ */
+export declare function DraftsContextProvider({ 
+/** The identifier for the forms app associated with the user's drafts */
+formsAppId, 
+/**
+ * `true` if drafts are enabled, otherwise `false`. Can be used for account
+ * tier validation.
+ */
+isDraftsEnabled, 
+/** Your application components */
+children, }: {
+    formsAppId: number;
+    isDraftsEnabled: boolean;
+    children: React.ReactNode;
+}): JSX.Element;
+/**
+ * React hook to get the context value for Drafts. Will throw an Error if used
+ * outside of the `<DraftsContextProvider />` component.
+ *
+ * @returns
+ * @group Hooks
+ */
+export default function useDrafts(): DraftsContextValue;