@apolitical/component-library 6.3.4 → 6.4.0-beta.0

package/discussion/components/form/form.type.d.ts

@@ -1,6 +1,6 @@
 import type { IEnrichedUrlData } from '../../../navigation';
-import { IDiscussionContent, IMentions } from './../../discussion';
-import { ICategory, IDiscussionFormFunctions } from '../../shared';
+import { DiscussionCreateContentFunction, IDiscussionContent, IListMemberData, IMentions, IDiscussionFormFns } from './../../discussion';
+import { ICategory } from '../../shared';
 export interface IDiscussionFormMeta {
     /** Whether the form data is still loading */
     isLoading?: boolean;
@@ -36,6 +36,24 @@ export interface IDiscussionFormMeta {
     /** Whether the success message should show on a successful submit */
     showSuccessMessage?: boolean;
 }
+interface IDiscussionFormFunctions extends IDiscussionFormFns {
+    onChange?: (args: {
+        [key: string]: string | boolean;
+    }) => void;
+    create: DiscussionCreateContentFunction;
+    handleSaveEdit?: (({ title, body }: {
+        title: string;
+        body: string;
+    }) => Promise<void>) | (() => void);
+    handleCancel?: () => void;
+    callback?: (args: void) => void;
+    onMention?: (value?: IListMemberData) => void;
+    props?: {
+        create: {
+            projectNames: ['questions-answers'];
+        };
+    };
+}
 export interface IDiscussionForm {
     /** A unique ID for the form */
     id?: string;
@@ -89,3 +107,4 @@ export interface IDiscussionFormState {
         link?: false | IEnrichedUrlData;
     };
 }
+export {};

package/discussion/components/form/index.d.ts

@@ -1,2 +1,2 @@
-export type { IDiscussionForm, IDiscussionFormMeta, } from './form.type';
+export type { IDiscussionForm, IDiscussionFormMeta } from './form.type';
 export { default as DiscussionForm } from './form';

package/discussion/feeds/replies-feed/cache/hooks/feed/index.d.ts

@@ -1,2 +1 @@
 export * from './feed.hook';
-export type { IParsedReplies } from './parse-replies';

package/discussion/feeds/replies-feed/mocks/index.d.ts

@@ -1,2 +1 @@
-export * from './parsed-replies-feed.mock';
 export * from './replies-feed.mock';

package/discussion/feeds/replies-feed/{components/nested-replies-feed → nested-replies-feed}/nested-replies-feed.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { IDiscussionFormFns } from '../../../../../discussion/discussion.d';
-import { ILikesFeedQueryFns } from '../../../../../discussion/feeds/likes-feed';
-import { type IQueryFns } from '../../cache';
+import type { IDiscussionFormFns } from '../../../../discussion/discussion.d';
+import { ILikesFeedQueryFns } from '../../../../discussion/feeds/likes-feed';
+import { type IQueryFns } from './../cache';
 interface NestedRepliesFunctions {
     /** Functions for the replies query */
     reactions: IQueryFns;

package/discussion/feeds/replies-feed/replies-feed.d.ts

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { type IProfileFormProps } from '../../../form';
 import { ILikesFeedQueryFns } from '../../../discussion/feeds/likes-feed';
-import type { IDiscussionFormFns } from '../../discussion';
+import type { IDiscussionFormFns } from './../../discussion';
 import { type IQueryFns } from './cache';
 interface RepliesFunctions {
     /** Functions for the replies query */
     reactions: IQueryFns;
-    /** Functions for likes query */
+    /** Functions for the likes query */
     likes: ILikesFeedQueryFns;
     /** Query functions for the mentions */
     form: IDiscussionFormFns;
@@ -30,8 +30,6 @@ interface Props {
     functions: RepliesFunctions;
     /** Props to pass into the profile form */
     profile: IProfileFormProps;
-    /** Whether to show the replies */
-    showReplies: boolean;
 }
 declare const RepliesFeed: React.FC<Props>;
 export default RepliesFeed;

package/discussion/sections/activity-section/mocks/activity-section.mock.d.ts

@@ -1,52 +1,46 @@
 export declare const activitySectionMock: {
-    POST: {
-        actor: {
-            created_at: string;
-            updated_at: string;
-            id: string;
-            data: {
-                jobTitle: string;
-                name: string;
-                organization: string;
-                location: {
-                    en: string;
-                };
-                badges: {
-                    communities: {
-                        'community-slug': string[];
-                    };
+    actor: {
+        created_at: string;
+        updated_at: string;
+        id: string;
+        data: {
+            jobTitle: string;
+            name: string;
+            organization: string;
+            location: {
+                en: string;
+            };
+            badges: {
+                communities: {
+                    'community-slug': string[];
                 };
             };
         };
-        categories: never[];
-        content: string;
-        feed_id: string;
-        foreign_id: string;
-        id: string;
-        latest_reactions: {
-            like: never[];
-            reply: never[];
-        };
-        latest_reactions_extra: {
-            like: never[];
-            reply: never[];
-        };
-        object: string;
-        origin: null;
-        own_reactions: {
-            like: never[];
-            reply: never[];
-        };
-        reaction_counts: {
-            like: number;
-            reply: number;
-        };
-        target: string;
-        time: string;
-        verb: string;
     };
-    POLL: {
-        total_replies: number;
-        verb: string;
+    categories: string[];
+    content: string;
+    feed_id: string;
+    foreign_id: string;
+    id: string;
+    latest_reactions: {
+        like: never[];
+        reply: never[];
+    };
+    latest_reactions_extra: {
+        like: never[];
+        reply: never[];
+    };
+    object: string;
+    origin: null;
+    own_reactions: {
+        like: never[];
+        reply: never[];
+    };
+    reaction_counts: {
+        like: number;
+        reply: number;
     };
+    target: string;
+    time: string;
+    verb: string;
 };

package/discussion/sections/activity-section/mocks/index.d.ts

@@ -1,3 +1,2 @@
 export { repliesFeedMock } from '../../../feeds/replies-feed';
-export * from './activity-functions.mock';
 export * from './activity-section.mock';

package/discussion/shared/interfaces/discussion.interface.d.ts

@@ -1,8 +1,7 @@
 import { MemberProps, MemberDetailsProps } from '../../../user';
 import type { ListMembers, ClickMentionFallback } from '../../../form';
 import type { IEnrichedUrlData } from '../../../navigation';
-import type { ICategory } from './community.category.interface';
-import type { IDiscussionFormFns } from '../../discussion';
+import { ICategory } from './community.category.interface';
 export type IDiscussionContentType = 'answer' | 'post' | 'response' | 'reply' | 'question';
 export interface IDiscussionContent {
     /** The type of content */
@@ -92,21 +91,3 @@ export interface IConversation {
     prepopulateForm?: string;
     mentionData?: IListMemberData;
 }
-export interface IDiscussionFormFunctions extends IDiscussionFormFns {
-    onChange?: (args: {
-        [key: string]: string | boolean;
-    }) => void;
-    create: DiscussionCreateContentFunction;
-    handleSaveEdit?: (({ title, body }: {
-        title: string;
-        body: string;
-    }) => Promise<void>) | (() => void);
-    handleCancel?: () => void;
-    callback?: (args: void) => void;
-    onMention?: (value?: IListMemberData) => void;
-    props?: {
-        create: {
-            projectNames: ['questions-answers'];
-        };
-    };
-}

package/form/components/character-limit/character-limit.helpers.d.ts

@@ -1,5 +1,5 @@
-import { FieldOnChange, IFieldFunctions } from '../../../form/components/form/form.types';
+import { IFieldFunctions } from '../../../form/components/form/form.types';
 export declare const getValueLength: (value: string | number | boolean | null | undefined) => number;
-export declare const getCharacterLimitProps: (limit: number, onChange?: FieldOnChange | null) => {
+export declare const getCharacterLimitProps: (limit: number, functions: IFieldFunctions) => {
     [key: string]: number | IFieldFunctions;
 };

package/form/components/form/components/field-wrapper/field-wrapper.d.ts

@@ -1,3 +1,3 @@
 import { IFieldWrapper } from '../../form.types';
-declare const FieldWrapper: ({ id, intlPath, className, error, functions, limit, showRequiredLabels, type, validation, value, submitOnEnter, ...props }: IFieldWrapper) => import("react/jsx-runtime").JSX.Element;
+declare const FieldWrapper: (fieldWrapperProps: IFieldWrapper) => import("react/jsx-runtime").JSX.Element;
 export default FieldWrapper;

package/form/components/form/components/fields/checkbox/checkbox.d.ts

@@ -27,6 +27,12 @@ export declare const Checkbox: ({ className, disabled, element, functions: allFu
         topbar?: boolean | undefined;
         submitSection?: boolean | undefined;
     } | undefined;
+    multipleInputs?: {
+        showCount?: boolean | undefined;
+        label?: string | undefined;
+        maxInputs: number;
+        hasButton?: false | import("../../../../../..").ButtonPropsType | undefined;
+    } | undefined;
     name?: string | undefined;
     options?: import("../../../form.types").IFieldOption[] | undefined;
     placeholder?: string | undefined;

package/form/components/form/components/fields/index.d.ts

@@ -2,5 +2,6 @@ export * from './input';
 export * from './input-autocomplete';
 export * from './checkbox';
 export * from './dropdown-menu';
+export * from './multiple-inputs';
 export * from './multiple-options';
 export * from './password';

package/form/components/form/components/fields/input/input.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IField, InputTypes, InputValues } from '../../../form.types';
-export declare const Input: ({ className, element, id, inputRef: ref, functions, name, placeholder, type, value, autoFocus, ...props }: IField) => React.DOMElement<{
+export declare const Input: ({ className, element, id, inputRef: ref, functions, name, placeholder, type, value, autoFocus, label, ...props }: IField) => React.DOMElement<{
     onChange: (e: React.FormEvent<HTMLInputElement>) => void;
     onMultiSelectSubmit?: ((arg1: import("../../../form.types").FormValues) => void) | undefined;
     onBlur?: (() => void) | undefined;
@@ -35,13 +35,18 @@ export declare const Input: ({ className, element, id, inputRef: ref, functions,
     } | undefined;
     initialValue?: import("../../../form.types").FormValues;
     intlPath?: string | false | undefined;
-    label?: React.ReactNode;
     limit?: number | undefined;
     multiSelect?: boolean | undefined;
     multiSelectOptions?: {
         topbar?: boolean | undefined;
         submitSection?: boolean | undefined;
     } | undefined;
+    multipleInputs?: {
+        showCount?: boolean | undefined;
+        label?: string | undefined;
+        maxInputs: number;
+        hasButton?: false | import("../../../../../..").ButtonPropsType | undefined;
+    } | undefined;
     options?: import("../../../form.types").IFieldOption[] | undefined;
     props?: {
         [key: string]: string | number | boolean | object | React.RefObject<any> | (() => void);

package/form/components/form/components/fields/multiple-inputs/index.d.ts

@@ -0,0 +1 @@
+export { default as MultipleInputs } from './multiple-inputs';

package/form/components/form/components/fields/multiple-inputs/multiple-inputs.d.ts

@@ -0,0 +1,3 @@
+import type { IFieldWrapper } from '../../../form.types';
+export declare const MultipleInputs: ({ id, label: legend, limit, value, placeholder, functions, error: allFormErrors, multipleInputs, validation, fieldData, type, ...props }: IFieldWrapper) => import("react/jsx-runtime").JSX.Element;
+export default MultipleInputs;

package/form/components/form/form.helpers.d.ts

@@ -0,0 +1,2 @@
+import type { InputValues } from './form.types';
+export declare const showError: (type: string, value: InputValues) => boolean;

package/form/components/form/form.types.d.ts

@@ -5,10 +5,12 @@ import { IntlShape } from 'react-intl';
 export type InputValues = string | number | boolean | null;
 export type MultipleInputValues = InputValues[];
 export type FormValues = InputValues | MultipleInputValues | undefined;
-export type InputTypes = 'text' | 'textarea' | 'email' | 'url' | 'checkbox' | 'select' | 'radio' | 'password' | 'autocomplete' | 'number';
+export type InputTypes = 'text' | 'textarea' | 'email' | 'url' | 'checkbox' | 'checkboxes' | 'select' | 'radio' | 'password' | 'autocomplete' | 'number' | 'multiple-inputs';
 export interface ILabel {
     /** The element to be used, defaulting to `label` */
     element?: string;
+    /** Optional class for the label */
+    className?: string;
     /** The ID of the input to be labelled */
     htmlFor?: string;
 }
@@ -41,13 +43,14 @@ export interface IFormPayload {
     /** Function to call when something fails */
     onFailure?: (arg: IFormValues, arg2?: FormValues) => void;
 }
+interface IFormErrors {
+    [key: string]: (() => void) | FormValues;
+}
 export interface IFormReducerAction extends IReducerAction<IFormPayload> {
 }
 export interface IFormReducerState {
     'custom-validation'?: string | boolean;
-    errors?: {
-        [key: string]: (() => void) | FormValues;
-    };
+    errors?: IFormErrors;
     formSubmitted: boolean;
     isSubmitting: boolean;
     values?: IFormValues;
@@ -132,7 +135,7 @@ export interface IField {
     /** The internationalisation path for the field */
     intlPath?: string | false;
     /** The label for the field */
-    label?: string | React.ReactNode;
+    label?: string | React.ReactNode | false;
     /** An optional character limit, for textareas */
     limit?: number;
     /** Whether the field can have multiple values, for checkboxes */
@@ -144,6 +147,17 @@ export interface IField {
         /** Whether to display the submit button in the dropdown - this allows the user to submit the dropdown only */
         submitSection?: boolean;
     };
+    /** Props for the inputs rendered in a `multiple` field */
+    multipleInputs?: {
+        /** Whether or not to show the number of filled in inputs in the legend */
+        showCount?: boolean;
+        /** The template text for each label */
+        label?: string;
+        /** How many inputs can be added in total */
+        maxInputs: number;
+        /** Whether to add options with a button */
+        hasButton?: false | ButtonPropsType;
+    };
     /** The name of the field */
     name?: string;
     /** The options for the field, for checkboxes and dropdowns */
@@ -161,7 +175,7 @@ export interface IField {
     /** Whether hitting enter on the field should submit the form */
     submitOnEnter?: boolean;
     /** The type of the input */
-    type?: InputTypes | 'checkboxes';
+    type?: InputTypes;
     /** The validation for the field */
     validation?: IFieldValidation[];
     /** The value of the field */
@@ -239,9 +253,16 @@ export interface IFormProps {
 }
 export interface IFieldWrapper extends IField {
     /** The error to show */
-    error: string;
+    error: string | IFormErrors | undefined;
     /** Whether the field wrapper should show required labels */
     showRequiredLabels?: boolean;
     /** The value of the field */
     value?: FormValues;
+    /** The setter to amend the fields to validate; this is needed for multiple inputs, to give each input its own error handling */
+    fieldData?: {
+        fields: IField[];
+        setFields: React.Dispatch<React.SetStateAction<IField[]>>;
+        dispatch: React.Dispatch<IFormReducerAction>;
+    };
 }
+export {};

package/helpers/intl.d.ts

@@ -233,6 +233,9 @@ export declare const checkIntlPathExists: (path: string, language?: {
     form_submitting: string;
     form_submitted: string;
     form_success: string;
+    form_multipleInputs_label: string;
+    form_multipleInputs_filledInCount: string;
+    form_multipleInputs_filledInCount_aria: string;
     inviteForm_email_placeholder: string;
     inviteForm_title: string;
     inviteForm_label: string;
@@ -351,7 +354,6 @@ export declare const checkIntlPathExists: (path: string, language?: {
     poll_num_votes: string;
     poll_remove_vote_button: string;
     poll_aria_votes: string;
-    replies_feed_missing_polls_vote_message: string;
     tableOfContents: string;
     timeToComplete_hours: string;
     timeToComplete_hours_short: string;