From ac9af83fabfa6434e88bf1af558b679d4c9884b5 Mon Sep 17 00:00:00 2001 From: David Drazic Date: Fri, 6 Sep 2024 16:58:30 +0200 Subject: [PATCH] Add support for more customizable input (#2699) This PR adds changes to support more customizable input. The primary target for customization are `start` and `end` accessories within the DS Input Component we're using in extension. This PR allows `` as the left or right accessory. Box elements and their children elements are adjacent to the primary Field-compatible child component, just like the support for the ` + , , diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts index 5e04481301..a29941472b 100644 --- a/packages/snaps-sdk/src/jsx/validation.ts +++ b/packages/snaps-sdk/src/jsx/validation.ts @@ -286,13 +286,34 @@ export const FileInputStruct: Describe = element( ); /** - * A subset of JSX elements that represent the tuple Button + Input of the Field children. + * A subset of JSX elements that represent the tuple Box + Input of the Field children. */ -const BUTTON_INPUT = [InputStruct, ButtonStruct] as [ +// eslint-disable-next-line @typescript-eslint/no-use-before-define +const BOX_INPUT_LEFT = [lazy(() => BoxChildStruct), InputStruct] as [ + typeof BoxChildStruct, typeof InputStruct, - typeof ButtonStruct, ]; +/** + * A subset of JSX elements that represent the tuple Input + Box of the Field children. + */ +// eslint-disable-next-line @typescript-eslint/no-use-before-define +const BOX_INPUT_RIGHT = [InputStruct, lazy(() => BoxChildStruct)] as [ + typeof InputStruct, + typeof BoxChildStruct, +]; + +/** + * A subset of JSX elements that represent the tuple Box + Input + Box of the Field children. + */ +const BOX_INPUT_BOTH = [ + // eslint-disable-next-line @typescript-eslint/no-use-before-define + lazy(() => BoxChildStruct), + InputStruct, + // eslint-disable-next-line @typescript-eslint/no-use-before-define + lazy(() => BoxChildStruct), +] as [typeof BoxChildStruct, typeof InputStruct, typeof BoxChildStruct]; + /** * A subset of JSX elements that are allowed as single children of the Field component. */ @@ -316,18 +337,33 @@ const FIELD_CHILDREN_ARRAY = [ * A union of the allowed children of the Field component. * This is mainly used in the simulator for validation purposes. */ -export const FieldChildUnionStruct = typedUnion([ +export const FieldChildUnionStruct = nullUnion([ ...FIELD_CHILDREN_ARRAY, - ...BUTTON_INPUT, + ...BOX_INPUT_LEFT, + ...BOX_INPUT_RIGHT, + ...BOX_INPUT_BOTH, ]); /** * A subset of JSX elements that are allowed as children of the Field component. */ const FieldChildStruct = nullUnion([ - tuple(BUTTON_INPUT), + tuple(BOX_INPUT_LEFT), + tuple(BOX_INPUT_RIGHT), + tuple(BOX_INPUT_BOTH), ...FIELD_CHILDREN_ARRAY, -]); +]) as unknown as Struct< + | [InputElement, GenericSnapElement] + | [GenericSnapElement, InputElement] + | [GenericSnapElement, InputElement, GenericSnapElement] + | DropdownElement + | RadioGroupElement + | FileInputElement + | InputElement + | CheckboxElement + | SelectorElement, + null +>; /** * A struct for the {@link FieldElement} type. diff --git a/packages/snaps-simulator/src/features/builder/utils.test.ts b/packages/snaps-simulator/src/features/builder/utils.test.ts index cbaa3e18ad..ca124f81be 100644 --- a/packages/snaps-simulator/src/features/builder/utils.test.ts +++ b/packages/snaps-simulator/src/features/builder/utils.test.ts @@ -54,7 +54,7 @@ describe('isValidFieldChild', () => { }); it('returns false for invalid field children', () => { - const child = Text({ children: 'foo' }); + const child = Option({ children: 'foo', value: 'foo' }); expect(isValidFieldChild(child)).toBe(false); }); });