@kapaai/support-form-deflector 0.2.2 → 0.3.0

package/dist/answer/answer-box.d.ts

@@ -0,0 +1,3 @@
+import { AnswerBoxProps } from "../config";
+export declare const AnswerBox: ({ style }: AnswerBoxProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=answer-box.d.ts.map

package/dist/answer/answer-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"answer-box.d.ts","sourceRoot":"","sources":["../../src/answer/answer-box.tsx"],"names":[],"mappings":"AAGA,OAAO,EAML,cAAc,EAEf,MAAM,WAAW,CAAC;AAuEnB,eAAO,MAAM,SAAS,cAAe,cAAc,4CAmDlD,CAAC"}

package/dist/answer/error-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-indicator.d.ts","sourceRoot":"","sources":["../../src/answer/error-indicator.tsx"],"names":[],"mappings":"AAGA,QAAA,MAAM,cAAc,+CAsBnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"error-indicator.d.ts","sourceRoot":"","sources":["../../src/answer/error-indicator.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,cAAc,+CAOnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/answer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/answer/index.tsx"],"names":[],"mappings":"AA4BA,QAAA,MAAM,aAAa,+CAiElB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/answer/index.tsx"],"names":[],"mappings":"AA2BA,QAAA,MAAM,aAAa,+CA0BlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/answer/info.d.ts

@@ -0,0 +1,3 @@
+import { InfoProps } from "../config";
+export declare const Info: ({ text, style }: InfoProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=info.d.ts.map

package/dist/answer/info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"info.d.ts","sourceRoot":"","sources":["../../src/answer/info.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,WAAW,CAAC;AAGjD,eAAO,MAAM,IAAI,oBAAqB,SAAS,mDAQ9C,CAAC"}

package/dist/answer/loading-indicator.d.ts

@@ -1,3 +1,4 @@
-declare const LoadingIndicator: () => import("react/jsx-runtime").JSX.Element;
+import { LoadingIndicatorProps } from "../config";
+declare const LoadingIndicator: ({ loadingTexts, style }: LoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element;
 export default LoadingIndicator;
 //# sourceMappingURL=loading-indicator.d.ts.map

package/dist/answer/loading-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"loading-indicator.d.ts","sourceRoot":"","sources":["../../src/answer/loading-indicator.tsx"],"names":[],"mappings":"AA+EA,QAAA,MAAM,gBAAgB,+CAkErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"loading-indicator.d.ts","sourceRoot":"","sources":["../../src/answer/loading-indicator.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AA8DlD,QAAA,MAAM,gBAAgB,4BAA6B,qBAAqB,4CAyCvE,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/config/config-provider.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { DeflectorConfig, DeflectorProps } from "./types";
+export declare const ConfigProvider: React.FC<{
+    children: React.ReactNode;
+    props: DeflectorProps;
+    config: DeflectorConfig;
+}>;
+export declare const useConfig: () => {
+    config: DeflectorConfig;
+    props: DeflectorProps;
+};
+//# sourceMappingURL=config-provider.d.ts.map

package/dist/config/config-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"config-provider.d.ts","sourceRoot":"","sources":["../../src/config/config-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAW1D,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,cAAc,CAAC;IACtB,MAAM,EAAE,eAAe,CAAC;CACzB,CAIA,CAAC;AAEF,eAAO,MAAM,SAAS;YAjBR,eAAe;WAChB,cAAc;CAsB1B,CAAC"}

package/dist/config/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./config-provider";
+//# sourceMappingURL=index.d.ts.map

package/dist/config/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/config/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC"}

package/dist/config/parse-config.d.ts

@@ -0,0 +1,8 @@
+import { Config } from "./types";
+/**
+ * Parses the config options provided to the script tag
+ * @param scriptTag
+ * @returns
+ */
+export declare const parseConfig: (scriptTag: HTMLScriptElement) => Config;
+//# sourceMappingURL=parse-config.d.ts.map

package/dist/config/parse-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parse-config.d.ts","sourceRoot":"","sources":["../../src/config/parse-config.tsx"],"names":[],"mappings":"AAAA,OAAO,EASL,MAAM,EAEP,MAAM,SAAS,CAAC;AAIjB;;;;GAIG;AACH,eAAO,MAAM,WAAW,cAAe,iBAAiB,KAAG,MAkR1D,CAAC"}

package/dist/config/style-parser.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import { Sx } from "@mantine/core";
+import { ThemeConfig } from "./types";
+interface PaddingX {
+    paddingLeft: React.CSSProperties["paddingLeft"];
+    paddingRight: React.CSSProperties["paddingLeft"];
+}
+interface PaddingY {
+    paddingTop: React.CSSProperties["paddingLeft"];
+    paddingBottom: React.CSSProperties["paddingLeft"];
+}
+/**
+ * List of available component attribute names for the script tag
+ */
+type ComponentAttributes = "answer-box" | "answer-box-footer" | "answer-box-footer-text" | "answer-box-header" | "answer-box-header-title" | "answer-box-header-icon" | "info-text" | "pre-submit-info" | "post-submit-info" | "loading-info" | "loading-indicator";
+/**
+ * List of available style attribute names for the script tag
+ * that are extracted if provided
+ */
+type StyleAttributeNames = "background-color" | "color" | "font-size" | "font-weight" | "border" | "border-radius" | "opacity" | "padding-x" | "padding-y";
+/**
+ * Helper class to extract consistent style options for the
+ * components' style configurations. Essentially this helps parsing
+ * the `StyleAttributeNames` that are passed to the script tag
+ * for every one of the components defined in `ComponentAttributes`.
+ * The goal here is to expose the same style configurations for
+ * all components and avoid inconsistencies. So every component (attribute)
+ * that we have defined, e.g. `answer-box`, supports the following
+ * script attributes automatically to configure its styling:
+ * - `data-answer-box-background-color`,
+ * - `data-answer-box-color`,
+ * - `data-answer-font-size`,
+ *   ...
+ */
+export declare class StyleParser {
+    private scriptTag;
+    private theme;
+    constructor(scriptTag: HTMLScriptElement, theme: ThemeConfig);
+    getDefault<T extends Record<string, string>>(obj: T, value: string | null): string | null;
+    /**
+     * Extracts the component attribute from the script tag
+     */
+    getAttribute(componentAttributeName: string, styleAttributeName: StyleAttributeNames): string | null;
+    /**
+     * Extracts the padding left and padding right from the padding-x attribute.
+     * @param attributeName the name of the script attribute. E.g data-answer-box
+     * @param defaultValue
+     * @returns
+     */
+    getPaddingX(componentAttributeName: string): PaddingX | undefined;
+    /**
+     * Extracts the padding top and padding bottom from the padding-y attribute.
+     * @param attributeName the name of the script attribute. E.g data-answer-box
+     * @param defaultValue
+     * @returns
+     */
+    getPaddingY(componentAttributeName: string): PaddingY | undefined;
+    /**
+     * Parses basic CSS parameters that we want to expose for every component
+     * to maintain consistency.
+     * @param componentAttributeName the component attribute name as parsed in the script tag. E.g.: answer-box, info-text...
+     * @param defaults default styles
+     * @returns
+     */
+    getComponentStyles(componentAttributeName: ComponentAttributes, defaults?: Sx): Sx;
+}
+export {};
+//# sourceMappingURL=style-parser.d.ts.map

package/dist/config/style-parser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style-parser.d.ts","sourceRoot":"","sources":["../../src/config/style-parser.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,EAAE,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAEtC,UAAU,QAAQ;IAChB,WAAW,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAChD,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;CAClD;AAED,UAAU,QAAQ;IAChB,UAAU,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC/C,aAAa,EAAE,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;CACnD;AAED;;GAEG;AACH,KAAK,mBAAmB,GACpB,YAAY,GACZ,mBAAmB,GACnB,wBAAwB,GACxB,mBAAmB,GACnB,yBAAyB,GACzB,wBAAwB,GACxB,WAAW,GACX,iBAAiB,GACjB,kBAAkB,GAClB,cAAc,GACd,mBAAmB,CAAC;AAExB;;;GAGG;AACH,KAAK,mBAAmB,GACpB,kBAAkB,GAClB,OAAO,GACP,WAAW,GACX,aAAa,GACb,QAAQ,GACR,eAAe,GACf,SAAS,GACT,WAAW,GACX,WAAW,CAAC;AAEhB;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,SAAS,CAAoB;IACrC,OAAO,CAAC,KAAK,CAAc;gBAEf,SAAS,EAAE,iBAAiB,EAAE,KAAK,EAAE,WAAW;IAK5D,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACzC,GAAG,EAAE,CAAC,EACN,KAAK,EAAE,MAAM,GAAG,IAAI,GACnB,MAAM,GAAG,IAAI;IAOhB;;OAEG;IACH,YAAY,CACV,sBAAsB,EAAE,MAAM,EAC9B,kBAAkB,EAAE,mBAAmB,GACtC,MAAM,GAAG,IAAI;IAOhB;;;;;OAKG;IACH,WAAW,CAAC,sBAAsB,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS;IAejE;;;;;OAKG;IACH,WAAW,CAAC,sBAAsB,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS;IAejE;;;;;;OAMG;IACH,kBAAkB,CAChB,sBAAsB,EAAE,mBAAmB,EAC3C,QAAQ,GAAE,EAAO,GAChB,EAAE;CAiCN"}

package/dist/config/types.d.ts

@@ -0,0 +1,74 @@
+import { type MantineThemeColors, type MantineTheme, type Sx } from "@mantine/core";
+/**
+ * DEFLECTOR COMPONENT PROPS
+ *
+ * This defines the properties of all the components that we want to expose in
+ * the deflector for users to configure them in a modularized way.
+ * All components inherit `style` prop, which is of type Sx that works with Mantine.
+ * More info on the Sx prop is here: https://v5.mantine.dev/styles/sx/.
+ * Generally, it is recommended to modularize components depending on the configuration
+ * needs of the customer and use "inheritance" if possible.
+ * E.g. we may have a general-use `Info` properties that has certain default styles
+ * and other properties like the `text`. We may then also define a `PostSubmit` and `PreSubmit`
+ * component, that inhertit the `Info` component's props and default values (e.g. fontSize: "sm"),
+ * but can be overwritten with more specific values.
+ */
+interface BaseProps {
+    style: Sx;
+}
+export interface AnswerBoxProps extends BaseProps {
+}
+export interface AnswerBoxHeaderProps extends BaseProps {
+}
+export interface AnswerBoxHeaderTitleProps extends BaseProps {
+    text: string;
+}
+export interface AnswerBoxHeaderIconProps extends BaseProps {
+    hidden: boolean;
+}
+export interface AnswerBoxFooterProps extends BaseProps {
+}
+export interface AnswerBoxFooterTextProps extends BaseProps {
+}
+export interface LoadingIndicatorProps extends BaseProps {
+    loadingTexts: string[];
+}
+export interface InfoProps extends BaseProps {
+    text?: string;
+}
+export interface DeflectorProps {
+    AnswerBox: AnswerBoxProps;
+    AnswerBoxHeader: AnswerBoxHeaderProps;
+    AnswerBoxHeaderTitle: AnswerBoxHeaderTitleProps;
+    AnswerBoxHeaderIcon: AnswerBoxHeaderIconProps;
+    AnswerBoxFooter: AnswerBoxFooterProps;
+    AnswerBoxFooterText: AnswerBoxFooterTextProps;
+    LoadingIndicator: LoadingIndicatorProps;
+    Info: InfoProps;
+    PreSubmitInfo: InfoProps;
+    PostSubmitInfo: InfoProps;
+    LoadingInfo: InfoProps;
+}
+export type DeflectorConfig = {
+    mainInputQuerySelector: string;
+    extraInputQuerySelectors: string[];
+    integrationId: string;
+    submitElementQuerySelector: string;
+    submitElementEventType: "onSubmit" | "onClick";
+    runsOriginalEventAutomatically?: boolean;
+    submitButtonTextQuerySelector?: string;
+    submitButtonTextOverride?: string;
+};
+export interface ThemeConfig extends Partial<Omit<MantineTheme, "colors">> {
+    colors: Partial<MantineThemeColors>;
+    other: {
+        textColor: string;
+    };
+}
+export interface Config {
+    config: DeflectorConfig;
+    props: DeflectorProps;
+    theme: ThemeConfig;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/config/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/config/types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,YAAY,EACjB,KAAK,EAAE,EACR,MAAM,eAAe,CAAC;AAEvB;;;;;;;;;;;;;GAaG;AACH,UAAU,SAAS;IACjB,KAAK,EAAE,EAAE,CAAC;CACX;AAED,MAAM,WAAW,cAAe,SAAQ,SAAS;CAAG;AAEpD,MAAM,WAAW,oBAAqB,SAAQ,SAAS;CAAG;AAE1D,MAAM,WAAW,yBAA0B,SAAQ,SAAS;IAC1D,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,wBAAyB,SAAQ,SAAS;IACzD,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;CAAG;AAE1D,MAAM,WAAW,wBAAyB,SAAQ,SAAS;CAAG;AAE9D,MAAM,WAAW,qBAAsB,SAAQ,SAAS;IACtD,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,SAAU,SAAQ,SAAS;IAC1C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,cAAc,CAAC;IAC1B,eAAe,EAAE,oBAAoB,CAAC;IACtC,oBAAoB,EAAE,yBAAyB,CAAC;IAChD,mBAAmB,EAAE,wBAAwB,CAAC;IAC9C,eAAe,EAAE,oBAAoB,CAAC;IACtC,mBAAmB,EAAE,wBAAwB,CAAC;IAC9C,gBAAgB,EAAE,qBAAqB,CAAC;IACxC,IAAI,EAAE,SAAS,CAAC;IAChB,aAAa,EAAE,SAAS,CAAC;IACzB,cAAc,EAAE,SAAS,CAAC;IAC1B,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,wBAAwB,EAAE,MAAM,EAAE,CAAC;IACnC,aAAa,EAAE,MAAM,CAAC;IACtB,0BAA0B,EAAE,MAAM,CAAC;IACnC,sBAAsB,EAAE,UAAU,GAAG,SAAS,CAAC;IAC/C,8BAA8B,CAAC,EAAE,OAAO,CAAC;IACzC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,wBAAwB,CAAC,EAAE,MAAM,CAAC;CACnC,CAAC;AAGF,MAAM,WAAW,WAAY,SAAQ,OAAO,CAAC,IAAI,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;IACxE,MAAM,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACpC,KAAK,EAAE;QASL,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAED,MAAM,WAAW,MAAM;IACrB,MAAM,EAAE,eAAe,CAAC;IACxB,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,WAAW,CAAC;CACpB"}