@windstream/react-shared-components 0.2.54 → 0.2.56
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/contentful/index.d.ts +200 -2
- package/dist/contentful/index.esm.js +5 -5
- package/dist/contentful/index.esm.js.map +1 -1
- package/dist/contentful/index.js +4 -4
- package/dist/contentful/index.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/contentful/blocks/dynamic-form/DynamicForm.stories.tsx +154 -0
- package/src/contentful/blocks/dynamic-form/conditional-fields.test.tsx +108 -0
- package/src/contentful/blocks/dynamic-form/conditional-fields.tsx +103 -0
- package/src/contentful/blocks/dynamic-form/constants.ts +28 -0
- package/src/contentful/blocks/dynamic-form/context.ts +35 -0
- package/src/contentful/blocks/dynamic-form/field-map.test.tsx +421 -0
- package/src/contentful/blocks/dynamic-form/field-map.tsx +486 -0
- package/src/contentful/blocks/dynamic-form/form-field.test.tsx +319 -0
- package/src/contentful/blocks/dynamic-form/form-field.tsx +224 -0
- package/src/contentful/blocks/dynamic-form/index.test.tsx +355 -0
- package/src/contentful/blocks/dynamic-form/index.tsx +552 -0
- package/src/contentful/blocks/dynamic-form/render.test.tsx +116 -0
- package/src/contentful/blocks/dynamic-form/render.tsx +172 -0
- package/src/contentful/blocks/dynamic-form/types.ts +211 -0
- package/src/contentful/blocks/dynamic-form/utils.test.ts +238 -0
- package/src/contentful/blocks/dynamic-form/utils.ts +255 -0
- package/src/contentful/blocks/primary-hero/index.test.tsx +28 -3
- package/src/contentful/blocks/primary-hero/index.tsx +5 -1
- package/src/contentful/index.ts +20 -0
|
@@ -927,6 +927,204 @@ type IframeEmbedProps = {
|
|
|
927
927
|
*/
|
|
928
928
|
declare const IframeEmbed: React__default.FC<IframeEmbedProps>;
|
|
929
929
|
|
|
930
|
+
/**
|
|
931
|
+
* The set of submit actions the DynamicForm understands. Each maps to an
|
|
932
|
+
* injected async handler provided by the consuming application. The package
|
|
933
|
+
* owns the UI, validation, payload building and orchestration; the app owns
|
|
934
|
+
* the actual transport (HTTP calls, redirects, etc.).
|
|
935
|
+
*/
|
|
936
|
+
type FormAction = "email" | "sftp" | "sms" | "voice" | "post";
|
|
937
|
+
type DynamicFormFieldType = "Text" | "Checkbox" | "Radio" | "Dropdown" | "Datepicker" | "Imageupload";
|
|
938
|
+
interface DynamicFormFieldOption {
|
|
939
|
+
label: string;
|
|
940
|
+
value: string;
|
|
941
|
+
/** When true, selecting this option should trigger the success popup. */
|
|
942
|
+
popup?: boolean;
|
|
943
|
+
[key: string]: any;
|
|
944
|
+
}
|
|
945
|
+
/**
|
|
946
|
+
* A single, Contentful-agnostic form field descriptor. The consuming app is
|
|
947
|
+
* responsible for transforming its CMS entries into this plain shape.
|
|
948
|
+
*/
|
|
949
|
+
interface DynamicFormFieldConfig {
|
|
950
|
+
fieldId: string;
|
|
951
|
+
fieldType: DynamicFormFieldType;
|
|
952
|
+
displayName?: string;
|
|
953
|
+
requiredField?: boolean;
|
|
954
|
+
textInputType?: "phone" | "email" | "multiline" | string;
|
|
955
|
+
errorMessage?: string;
|
|
956
|
+
dataSource?: DynamicFormFieldOption[] | null;
|
|
957
|
+
existingDataSource?: string;
|
|
958
|
+
note?: string;
|
|
959
|
+
noteClassName?: string;
|
|
960
|
+
fieldClassName?: string;
|
|
961
|
+
/** true => full width, false => half width, undefined => full width. */
|
|
962
|
+
fieldWidth?: boolean;
|
|
963
|
+
validationGroupId?: string;
|
|
964
|
+
validationType?: string;
|
|
965
|
+
validationNote?: string;
|
|
966
|
+
formSection?: string;
|
|
967
|
+
sftpFieldId?: string;
|
|
968
|
+
applyRegularExpression?: boolean;
|
|
969
|
+
regexPattern?: string;
|
|
970
|
+
applyPresetValidations?: boolean;
|
|
971
|
+
selectPresetValidationsToApply?: string;
|
|
972
|
+
}
|
|
973
|
+
interface ConditionalFieldConfig {
|
|
974
|
+
fieldId: string;
|
|
975
|
+
displayName?: string;
|
|
976
|
+
requiredField?: boolean;
|
|
977
|
+
dataSource?: DynamicFormFieldOption[] | null;
|
|
978
|
+
note?: string;
|
|
979
|
+
formFieldsToShow: DynamicFormItem[];
|
|
980
|
+
}
|
|
981
|
+
/**
|
|
982
|
+
* A flat list item rendered by the form. Either a form field, a conditional
|
|
983
|
+
* field group, or an arbitrary pre-rendered node (e.g. a nested CMS block that
|
|
984
|
+
* the app rendered itself and passes through).
|
|
985
|
+
*/
|
|
986
|
+
type DynamicFormItem = ({
|
|
987
|
+
itemType: "formField";
|
|
988
|
+
} & DynamicFormFieldConfig) | ({
|
|
989
|
+
itemType: "conditional";
|
|
990
|
+
} & ConditionalFieldConfig) | {
|
|
991
|
+
itemType: "custom";
|
|
992
|
+
fieldId?: string;
|
|
993
|
+
content: React__default.ReactNode;
|
|
994
|
+
};
|
|
995
|
+
interface DynamicFormPayload {
|
|
996
|
+
submissionId: string;
|
|
997
|
+
formName?: string;
|
|
998
|
+
subject?: string;
|
|
999
|
+
emailTemplate?: string;
|
|
1000
|
+
submittedOn: string;
|
|
1001
|
+
formSubmitOptions: FormAction[];
|
|
1002
|
+
/** Grouped form data, keyed by form section. */
|
|
1003
|
+
formData: Record<string, any>;
|
|
1004
|
+
files: File[];
|
|
1005
|
+
toEmail?: string;
|
|
1006
|
+
toPhone?: string;
|
|
1007
|
+
toSms?: string;
|
|
1008
|
+
[key: string]: any;
|
|
1009
|
+
}
|
|
1010
|
+
interface SubmitContext {
|
|
1011
|
+
/** The structured payload (as built by the form, before transport encoding). */
|
|
1012
|
+
payload: DynamicFormPayload;
|
|
1013
|
+
/** The raw flat form values keyed by fieldId. */
|
|
1014
|
+
formValues: Record<string, any>;
|
|
1015
|
+
/** Map of fieldId -> sftpFieldId for SMTP/SFTP payload mapping. */
|
|
1016
|
+
sftpMap: Record<string, string>;
|
|
1017
|
+
formSubmitOptions: FormAction[];
|
|
1018
|
+
files: File[];
|
|
1019
|
+
/** The action currently being executed. */
|
|
1020
|
+
action: FormAction;
|
|
1021
|
+
/** Transport hints (e.g. for FormData uploads). */
|
|
1022
|
+
options: Record<string, any>;
|
|
1023
|
+
}
|
|
1024
|
+
/**
|
|
1025
|
+
* Injected transport for a single action. `body` is the ready-to-send payload
|
|
1026
|
+
* (a plain object with a stringified `formData`, or a `FormData` instance when
|
|
1027
|
+
* files are present). Handlers that need to build their own body (e.g. SMTP)
|
|
1028
|
+
* can use `context.formValues` and `context.sftpMap` instead.
|
|
1029
|
+
*/
|
|
1030
|
+
type SubmitHandler = (body: DynamicFormPayload | FormData, context: SubmitContext) => Promise<any> | any;
|
|
1031
|
+
interface FieldRenderProps {
|
|
1032
|
+
loading?: boolean;
|
|
1033
|
+
displayName?: string;
|
|
1034
|
+
requiredField?: boolean;
|
|
1035
|
+
formData: Record<string, any>;
|
|
1036
|
+
fieldId?: string;
|
|
1037
|
+
textInputType?: string;
|
|
1038
|
+
handleInputChange: (event: any) => void;
|
|
1039
|
+
dataSource?: DynamicFormFieldOption[] | null;
|
|
1040
|
+
error: {
|
|
1041
|
+
fieldId?: string;
|
|
1042
|
+
errorMessage: string;
|
|
1043
|
+
};
|
|
1044
|
+
errorClass: string;
|
|
1045
|
+
hasError: boolean;
|
|
1046
|
+
existingDataSource?: string;
|
|
1047
|
+
isConsentCheckbox?: boolean;
|
|
1048
|
+
[key: string]: any;
|
|
1049
|
+
}
|
|
1050
|
+
/**
|
|
1051
|
+
* Resolves the options for a field that references an app-owned data source
|
|
1052
|
+
* (e.g. "State List" / "City List"). Injected by the app so the package stays
|
|
1053
|
+
* transport-agnostic.
|
|
1054
|
+
*/
|
|
1055
|
+
type ExistingDataSourceResolver = (name: string, ctx: {
|
|
1056
|
+
selectedState?: any;
|
|
1057
|
+
}) => Promise<DynamicFormFieldOption[]>;
|
|
1058
|
+
interface DynamicFormProps {
|
|
1059
|
+
anchorId?: string;
|
|
1060
|
+
title?: string;
|
|
1061
|
+
subTitle?: string;
|
|
1062
|
+
formHeading?: string;
|
|
1063
|
+
/** Pre-rendered rich text supplied by the app. */
|
|
1064
|
+
description?: React__default.ReactNode;
|
|
1065
|
+
disclaimer?: React__default.ReactNode;
|
|
1066
|
+
successMessage?: React__default.ReactNode;
|
|
1067
|
+
errorMessage?: React__default.ReactNode;
|
|
1068
|
+
formClassName?: string;
|
|
1069
|
+
fields: DynamicFormItem[];
|
|
1070
|
+
formSubmitOptions?: FormAction[];
|
|
1071
|
+
/** CTA */
|
|
1072
|
+
submitLabel?: string;
|
|
1073
|
+
ctaClassName?: string;
|
|
1074
|
+
/** Copy overrides */
|
|
1075
|
+
validationErrorText?: string;
|
|
1076
|
+
/** Payload metadata */
|
|
1077
|
+
formName?: string;
|
|
1078
|
+
emailSubject?: string;
|
|
1079
|
+
emailTemplateName?: string;
|
|
1080
|
+
toEmail?: string;
|
|
1081
|
+
segmentEventId?: string;
|
|
1082
|
+
/** Injected per-action async submit handlers. */
|
|
1083
|
+
onEmailSubmit?: SubmitHandler;
|
|
1084
|
+
onSmtpSubmit?: SubmitHandler;
|
|
1085
|
+
onSmsSubmit?: SubmitHandler;
|
|
1086
|
+
/** Optional additional handlers for extra actions (voice/post/custom). */
|
|
1087
|
+
actionHandlers?: Partial<Record<FormAction, SubmitHandler>>;
|
|
1088
|
+
/**
|
|
1089
|
+
* Allows the app to mutate the base payload before actions run
|
|
1090
|
+
* (e.g. custom email routing, non-prod rerouting, adding toPhone/toSms).
|
|
1091
|
+
*/
|
|
1092
|
+
buildPayload?: (basePayload: DynamicFormPayload, formValues: Record<string, any>) => DynamicFormPayload;
|
|
1093
|
+
/** Called after a successful (or partial) submission. */
|
|
1094
|
+
onSubmitSuccess?: (formValues: Record<string, any>, meta: {
|
|
1095
|
+
shouldShowPopup: boolean;
|
|
1096
|
+
}) => void;
|
|
1097
|
+
/** Injected analytics + logging. */
|
|
1098
|
+
onTrack?: (eventId: string | undefined, payload: any) => void;
|
|
1099
|
+
onError?: (info: {
|
|
1100
|
+
type: string;
|
|
1101
|
+
error: unknown;
|
|
1102
|
+
metadata?: Record<string, any>;
|
|
1103
|
+
}) => void;
|
|
1104
|
+
/** Whether the current environment is production (affects nothing in the
|
|
1105
|
+
* base component today but reserved for parity with app behavior). */
|
|
1106
|
+
isProduction?: boolean;
|
|
1107
|
+
/** Field customization + async data. */
|
|
1108
|
+
fieldComponentOverrides?: Partial<Record<DynamicFormFieldType, React__default.FC<FieldRenderProps>>>;
|
|
1109
|
+
resolveExistingDataSource?: ExistingDataSourceResolver;
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
declare const DynamicForm: React__default.FC<DynamicFormProps>;
|
|
1113
|
+
|
|
1114
|
+
declare const constants: {
|
|
1115
|
+
IP_PHONE_NUMBER: string;
|
|
1116
|
+
TARGET_EMAIL: string;
|
|
1117
|
+
REQUIRED_FIELDS_MISSING: string;
|
|
1118
|
+
PROVIDE_AT_LEAST_ONE: string;
|
|
1119
|
+
ONE_REQUIRED_FIELD: string;
|
|
1120
|
+
};
|
|
1121
|
+
declare const Regex: {
|
|
1122
|
+
phone: RegExp;
|
|
1123
|
+
ipv4: RegExp;
|
|
1124
|
+
ipv6: RegExp;
|
|
1125
|
+
email: RegExp;
|
|
1126
|
+
};
|
|
1127
|
+
|
|
930
1128
|
declare const toDocument: (v: unknown | null | undefined) => Document | null;
|
|
931
1129
|
|
|
932
1130
|
/**
|
|
@@ -954,5 +1152,5 @@ interface ProcessedChecklistItem {
|
|
|
954
1152
|
}
|
|
955
1153
|
declare function useProcessedChecklist<T extends boolean = false>(checklistData?: any, titlesOnly?: T, richTextOptions?: Options, richTextClassName?: string): T extends true ? string[] : ProcessedChecklistItem[];
|
|
956
1154
|
|
|
957
|
-
export { Accordion, AddressInputBanner, AnchoredBottomBanner, AwardMarquee, BlogCard, BlogGrid, BlogGridBase, BreadcrumbNavigation, Button, Callout, Cards, Carousel, CartRetentionBanner, ComparisonTable, CookieBanner, CtaCallout, DynamicTabs, EmailInputBlock, FindKinetic, FloatingBanner, Footer, IframeEmbed, ImagePromoBar, Modal, Navigation, OrderedList, PrimaryHero, ProductCard, SearchBlock, ShapeBackgroundWrapper, SimpleCard, TestimonialCard, Text, label1BoldOptions, renderContentfulRichText, renderContentfulRichTextTable, toDocument, useContentfulRichText, useProcessedChecklist };
|
|
958
|
-
export type { AccordionProps, AddressInputBannerProps, AnchoredBottomBannerProps, AwardMarqueeBackground, AwardMarqueeItem, AwardMarqueeProps, AwardMarqueeSpeed, BlogCardProps$2 as BlogCardProps, BlogGridBaseProps, BlogGridProps, BreadcrumbNavigationProps, ButtonProps, CalloutProps, CardsProps, CarouselProps, TypeCartRetentionBannerFields as CartRetentionBannerProps, ComparisonTableProps, TypeComponentRichTextFields as CookieBannerProps, CtaCalloutProps, DynamicTabsT, EmailInputBlockProps, FindKineticProps, FloatingBannerProps, FooterProps, IframeEmbedProps, ImagePromoBarProps, ModalProps, NavigationProps, OrderedListProps, PrimaryHeroProps, ProcessedChecklistItem, ProductCardProps, SearchBlockProps, ShapeBackgroundWrapperProps, SimpleCardProps, TestimonialCardProps, TextProps };
|
|
1155
|
+
export { Accordion, AddressInputBanner, AnchoredBottomBanner, AwardMarquee, BlogCard, BlogGrid, BlogGridBase, BreadcrumbNavigation, Button, Callout, Cards, Carousel, CartRetentionBanner, ComparisonTable, CookieBanner, CtaCallout, DynamicForm, DynamicTabs, EmailInputBlock, FindKinetic, FloatingBanner, Footer, IframeEmbed, ImagePromoBar, Modal, Navigation, OrderedList, PrimaryHero, ProductCard, SearchBlock, ShapeBackgroundWrapper, SimpleCard, TestimonialCard, Text, constants as dynamicFormConstants, Regex as dynamicFormRegex, label1BoldOptions, renderContentfulRichText, renderContentfulRichTextTable, toDocument, useContentfulRichText, useProcessedChecklist };
|
|
1156
|
+
export type { AccordionProps, AddressInputBannerProps, AnchoredBottomBannerProps, AwardMarqueeBackground, AwardMarqueeItem, AwardMarqueeProps, AwardMarqueeSpeed, BlogCardProps$2 as BlogCardProps, BlogGridBaseProps, BlogGridProps, BreadcrumbNavigationProps, ButtonProps, CalloutProps, CardsProps, CarouselProps, TypeCartRetentionBannerFields as CartRetentionBannerProps, ComparisonTableProps, ConditionalFieldConfig, TypeComponentRichTextFields as CookieBannerProps, CtaCalloutProps, DynamicFormFieldConfig, DynamicFormFieldOption, DynamicFormFieldType, DynamicFormItem, DynamicFormPayload, DynamicFormProps, DynamicTabsT, EmailInputBlockProps, ExistingDataSourceResolver, FieldRenderProps, FindKineticProps, FloatingBannerProps, FooterProps, FormAction, IframeEmbedProps, ImagePromoBarProps, ModalProps, NavigationProps, OrderedListProps, PrimaryHeroProps, ProcessedChecklistItem, ProductCardProps, SearchBlockProps, ShapeBackgroundWrapperProps, SimpleCardProps, SubmitContext, SubmitHandler, TestimonialCardProps, TextProps };
|