CCUBE-1916

package.json

@@ -133,7 +133,7 @@
 		"rollup-plugin-typescript2": "^0.36.0",
 		"storybook": "^8.2.8",
 		"style-loader": "^3.3.1",
-		"styled-components": "^6.1.19",
+		"styled-components": "^6.4.1",
 		"typescript": "^4.8.4"
 	},
 	"lint-staged": {

src/__tests__/components/frontend-engine/custom-component.spec.tsx

@@ -40,10 +40,10 @@ const MyCustomComponent: TCustomComponent<MyCustomSchema> = (props: TCustomCompo
 	const {
 		error,
 		id,
+		onBlur,
 		onChange,
 		schema: { displayTitle, validation },
 		value,
-		...otherProps
 	} = props;
 
 	const {
@@ -81,10 +81,10 @@ const MyCustomComponent: TCustomComponent<MyCustomSchema> = (props: TCustomCompo
 			label={displayTitle}
 			id={id}
 			errorMessage={error?.message}
+			onBlur={onBlur}
 			onChange={handleDispatchEvent}
 			onClick={handleRemoveEvent}
 			value={value || ""}
-			{...otherProps}
 		/>
 	);
 };

src/components/custom/filter/filter-checkbox/filter-checkbox.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from "react";
 import { useFormContext } from "react-hook-form";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import * as Yup from "yup";
-import { TestHelper } from "../../../../utils";
+import { TestHelper, filterSchemaProps } from "../../../../utils";
 import { useValidationConfig } from "../../../../utils/hooks";
 import { Sanitize } from "../../../shared";
 import { IGenericCustomFieldProps } from "../../types";
@@ -14,12 +14,11 @@ export const FilterCheckbox = (props: IGenericCustomFieldProps<IFilterCheckboxSc
 	// =============================================================================
 	// CONST, STATE, REFS
 	// =============================================================================
+	const { schema, id, value, onChange } = props;
 	const {
-		schema: { label, options, expanded, validation, ...otherSchema },
-		id,
-		value,
-		onChange,
-	} = props;
+		commonSchema: { label, validation },
+		customSchema: { clearBehavior: _clearBehavior, options, expanded, ...checkboxProps },
+	} = filterSchemaProps(schema);
 
 	const { setValue } = useFormContext();
 	const [selectedOptions, setSelectedOptions] = useState<IOption[]>(); // Current selected value state
@@ -79,7 +78,7 @@ export const FilterCheckbox = (props: IGenericCustomFieldProps<IFilterCheckboxSc
 	return (
 		<Filter.Checkbox
 			id={id}
-			{...otherSchema}
+			{...checkboxProps}
 			data-testid={TestHelper.generateId(id, "filter-checkbox")}
 			title={title}
 			addon={addon}

src/components/custom/iframe/iframe.tsx

@@ -3,6 +3,7 @@ import { FieldError, useFormContext } from "react-hook-form";
 import styled from "styled-components";
 import * as Yup from "yup";
 import { useFieldEvent, useIframeMessage, useValidationConfig } from "../../../utils/hooks";
+import { filterSchemaProps } from "../../../utils/prop-helper";
 import { IGenericCustomFieldProps } from "../types";
 import { EPostMessageEvent, IIframeSchema } from "./types";
 
@@ -20,12 +21,10 @@ export const Iframe = (props: IGenericCustomFieldProps<IIframeSchema>) => {
 	// =========================================================================
 	// CONST, STATE, REF
 	// =========================================================================
+	const { error, id, schema, value } = props;
 	const {
-		error,
-		id,
-		schema: { "data-testid": testId, src, validationTimeout = 2000, ...otherSchema },
-		value,
-	} = props;
+		customSchema: { "data-testid": testId, src, validationTimeout = 2000, ...iframeProps },
+	} = filterSchemaProps(schema);
 	const formContext = useFormContext();
 	const iframeRef = useRef<HTMLIFrameElement>(null);
 	const deferredRef = useRef<{
@@ -175,7 +174,7 @@ export const Iframe = (props: IGenericCustomFieldProps<IIframeSchema>) => {
 	// =========================================================================
 	return (
 		<FluidIframe
-			{...otherSchema}
+			{...iframeProps}
 			ref={iframeRef}
 			src={src}
 			id={id}

src/components/custom/review/review.tsx

@@ -5,7 +5,7 @@ import isEmpty from "lodash/isEmpty";
 import { useEffect, useState } from "react";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import * as Yup from "yup";
-import { AxiosApiClient } from "../../../utils";
+import { AxiosApiClient, filterSchemaProps } from "../../../utils";
 import { useFieldEvent, useValidationConfig } from "../../../utils/hooks";
 import { Wrapper } from "../../elements/wrapper";
 import { IGenericCustomElementProps } from "../types";
@@ -173,7 +173,10 @@ export const Review = (props: IGenericCustomElementProps<TReviewSchema>) => {
 	// RENDER FUNCTIONS
 	// =========================================================================
 	const renderAccordion = (schema: IReviewSchemaAccordion) => {
-		const { button, bottomSection, expanded = true, label, topSection, ...otherSchema } = schema;
+		const {
+			commonSchema: { label },
+			customSchema: { button, bottomSection, expanded = true, topSection, ...accordionProps },
+		} = filterSchemaProps(schema);
 
 		return (
 			<BoxContainer
@@ -186,7 +189,7 @@ export const Review = (props: IGenericCustomElementProps<TReviewSchema>) => {
 					)
 				}
 				expanded={expanded}
-				{...otherSchema}
+				{...accordionProps}
 			>
 				<CustomUneditableSection
 					background={false}
@@ -203,10 +206,13 @@ export const Review = (props: IGenericCustomElementProps<TReviewSchema>) => {
 	};
 
 	const renderBox = (schema: IReviewSchemaBox) => {
-		const { label, description, topSection, bottomSection, ...otherSchema } = schema;
+		const {
+			commonSchema: { label },
+			customSchema: { description, topSection, bottomSection, ...boxProps },
+		} = filterSchemaProps(schema);
 		return (
 			<UneditableSection
-				{...otherSchema}
+				{...boxProps}
 				id={id}
 				title={label}
 				description={description}

src/components/elements/accordion/accordion.tsx

@@ -1,6 +1,7 @@
 import { BoxContainer } from "@lifesg/react-design-system/box-container";
 import { Button } from "@lifesg/react-design-system/button";
 import { useFieldEvent } from "../../../utils/hooks";
+import { filterSchemaProps } from "../../../utils/prop-helper";
 import { IGenericElementProps } from "../types";
 import { Wrapper } from "../wrapper";
 import { Container } from "./accordion.styles";
@@ -14,15 +15,17 @@ export const Accordion = (props: IGenericElementProps<IAccordionSchema>) => {
 	// CONST, STATE, REF
 	// =============================================================================
 	const { schema, id } = props;
-	const { children, button, title, disableContentInset, ...otherSchema } = schema;
+	const {
+		customSchema: { button, children, title, disableContentInset, ...accordionProps },
+	} = filterSchemaProps(schema);
 
 	const { dispatchFieldEvent } = useFieldEvent();
 
 	return (
 		<BoxContainer
 			id={id}
 			title={typeof title === "string" ? title : <Wrapper>{title}</Wrapper>}
-			{...otherSchema}
+			{...accordionProps}
 			callToActionComponent={
 				button ? (
 					<Button.Default

src/components/elements/divider/divider.tsx

@@ -1,5 +1,5 @@
 import { Divider as DSDivider } from "@lifesg/react-design-system/divider";
-import { TestHelper } from "../../../utils";
+import { TestHelper, filterSchemaProps } from "../../../utils";
 import { IGenericElementProps } from "../types";
 import { IDividerSchema } from "./types";
 import styled from "styled-components";
@@ -8,10 +8,10 @@ export const Divider = (props: IGenericElementProps<IDividerSchema>) => {
 	// =============================================================================
 	// CONST, STATE, REF
 	// =============================================================================
+	const { id, schema } = props;
 	const {
-		id,
-		schema: { verticalMargin, ...otherSchema },
-	} = props;
+		customSchema: { verticalMargin, ...dividerProps },
+	} = filterSchemaProps(schema);
 
 	// =============================================================================
 	// RENDER FUNCTIONS
@@ -21,7 +21,7 @@ export const Divider = (props: IGenericElementProps<IDividerSchema>) => {
 			id={id}
 			data-testid={TestHelper.generateId(id, "divider")}
 			$verticalMargin={verticalMargin}
-			{...otherSchema}
+			{...dividerProps}
 		/>
 	);
 };

src/components/elements/popover/popover.tsx

@@ -1,6 +1,6 @@
 import { PopoverInline } from "@lifesg/react-design-system/popover-v2";
 import * as Icons from "@lifesg/react-icons";
-import { TestHelper } from "../../../utils";
+import { TestHelper, filterSchemaProps } from "../../../utils";
 import { Sanitize } from "../../shared";
 import { IGenericElementProps } from "../types";
 import { Wrapper } from "../wrapper";
@@ -11,16 +11,16 @@ export const Popover = (props: IGenericElementProps<IPopoverSchema>) => {
 	// =============================================================================
 	// CONST, STATE, REF
 	// =============================================================================
+	const { id, schema } = props;
 	const {
-		id,
-		schema: {
+		customSchema: {
 			children,
 			className,
 			icon,
 			hint: { content: hintContent, ...hintProps },
-			...otherSchema
+			...popoverProps
 		},
-	} = props;
+	} = filterSchemaProps(schema);
 
 	// =============================================================================
 	// RENDER FUNCTIONS
@@ -56,7 +56,7 @@ export const Popover = (props: IGenericElementProps<IPopoverSchema>) => {
 			content={children && <Sanitize inline>{children}</Sanitize>}
 			popoverContent={renderPopoverContent()}
 			{...hintProps}
-			{...otherSchema}
+			{...popoverProps}
 		/>
 	);
 };

src/components/elements/tab/tab.tsx

@@ -15,10 +15,8 @@ export const Tab = (props: IGenericElementProps<ITabSchema>) => {
 	// =========================================================================
 	// CONST, STATE, REF
 	// =========================================================================
-	const {
-		id,
-		schema: { currentActiveTabId, children, ...otherTabSchema },
-	} = props;
+	const { id, schema } = props;
+	const { children, currentActiveTabId, fullWidthIndicatorLine } = schema;
 	const [currentTabIndex, setCurrentTabIndex] = useState(getCurrentTabIndex());
 	const { removeFieldValidationConfig } = useValidationConfig();
 	const { unregister } = useFormContext();
@@ -100,21 +98,22 @@ export const Tab = (props: IGenericElementProps<ITabSchema>) => {
 	// =========================================================================
 	return (
 		<DSTab
-			{...otherTabSchema}
 			id={id}
 			data-testid={TestHelper.generateId(id, "tab")}
 			currentActive={currentTabIndex}
+			fullWidthIndicatorLine={fullWidthIndicatorLine}
 			onTabClick={handleTabClick}
 		>
 			{Object.entries(children).map(([childId, childSchema]) => {
-				const { title, children, ...otherTabItemSchema } = childSchema;
+				const { children, title, width } = childSchema;
+
 				return (
 					<DSTab.Item
-						{...otherTabItemSchema}
 						key={childId}
 						id={childId}
 						data-testid={TestHelper.generateId(childId, "tab-item")}
 						title={title}
+						width={width}
 					>
 						<Wrapper>{children}</Wrapper>
 					</DSTab.Item>

src/components/fields/button/button.tsx

@@ -1,29 +1,21 @@
 import { Button } from "@lifesg/react-design-system/button";
+import { Spacing } from "@lifesg/react-design-system/theme";
 import * as Icons from "@lifesg/react-icons";
 import styled from "styled-components";
 import { IGenericFieldProps } from "..";
-import { IButtonSchema } from "./types";
 import { useFieldEvent } from "../../../utils/hooks";
-import { Spacing } from "@lifesg/react-design-system/theme";
+import { filterSchemaProps } from "../../../utils/prop-helper";
+import { IButtonSchema } from "./types";
 
 export const ButtonField = (props: IGenericFieldProps<IButtonSchema>) => {
 	// =============================================================================
 	// CONST, STATE, REF
 	// =============================================================================
+	const { id, schema } = props;
 	const {
-		schema: {
-			label,
-			// eslint-disable-next-line @typescript-eslint/no-unused-vars
-			uiType,
-			startIcon,
-			endIcon,
-			href,
-			target,
-			...otherSchema
-		},
-		id,
-		...otherProps
-	} = props;
+		commonSchema: { label },
+		customSchema: { endIcon, href, startIcon, target, ...buttonProps },
+	} = filterSchemaProps(schema);
 	const { dispatchFieldEvent } = useFieldEvent();
 
 	// =============================================================================
@@ -56,7 +48,7 @@ export const ButtonField = (props: IGenericFieldProps<IButtonSchema>) => {
 	};
 
 	return (
-		<CustomButton type="button" {...otherSchema} {...otherProps} onClick={handleClick}>
+		<CustomButton type="button" {...buttonProps} onClick={handleClick}>
 			{renderIcon(startIcon)}
 			{label}
 			{renderIcon(endIcon)}

src/components/fields/checkbox-group/checkbox-group.tsx

@@ -5,7 +5,7 @@ import { useFormContext } from "react-hook-form";
 import useDeepCompareEffect from "use-deep-compare-effect";
 import * as Yup from "yup";
 import { IGenericFieldProps } from "..";
-import { TestHelper, generateRandomId } from "../../../utils";
+import { TestHelper, filterSchemaProps, generateRandomId } from "../../../utils";
 import { useValidationConfig } from "../../../utils/hooks";
 import { Wrapper } from "../../elements/wrapper";
 import { ERROR_MESSAGES, Sanitize, Warning } from "../../shared";
@@ -16,15 +16,11 @@ export const CheckboxGroup = (props: IGenericFieldProps<TCheckboxGroupSchema>) =
 	// =============================================================================
 	// CONST, STATE, REFS
 	// =============================================================================
+	const { formattedLabel, error, id, onChange, schema, value, warning } = props;
 	const {
-		formattedLabel,
-		error,
-		id,
-		onChange,
-		schema: { className, customOptions, disabled, label: _label, options, validation, ...otherSchema },
-		value,
-		warning,
-	} = props;
+		commonSchema: { customOptions, validation },
+		customSchema: { className, disabled, options, ...checkboxProps },
+	} = filterSchemaProps(schema);
 
 	const { setValue } = useFormContext();
 	const [stateValue, setStateValue] = useState<string[]>(value || []);
@@ -115,7 +111,7 @@ export const CheckboxGroup = (props: IGenericFieldProps<TCheckboxGroupSchema>) =
 						className={className ? `${className}-checkbox-container` : undefined}
 					>
 						<StyledCheckbox
-							{...otherSchema}
+							{...checkboxProps}
 							data-testid={TestHelper.generateId(id, "checkbox")}
 							id={checkboxId}
 							className={className}