feat(pieces-form): add separator, title, group

docs/developers/piece-reference/properties-styles.mdx

@@ -0,0 +1,53 @@
+---
+title: "Properties Style"
+description: ""
+icon: 'pen-nib'
+---
+
+To improve the user experience, it is possible to add separation properties. These properties are used to separate the properties in the UI.
+
+## Separator
+
+```typescript
+separator: PropertyStyle.Separator()
+```
+![Separator](/resources/screenshots/property-style-separator.png)
+
+## Title
+
+```typescript
+title: PropertyStyle.Title({
+    display: "Title"
+})
+```
+![Title](/resources/screenshots/property-style-title.png)
+
+## Group
+
+```typescript
+group: PropertyStyle.Group({
+    display: "User",
+    props: {
+        name: Property.ShortText({
+            displayName: 'Name',
+            description: 'The name of the member',
+            required: true,
+        }),
+        sep: PropertyStyle.Separator(),
+        email: Property.ShortText({
+            displayName: 'Email',
+            description: 'The email of the member',
+            required: true,
+        }),
+        security: PropertyStyle.Title({
+            displayName: 'Security',
+        }),
+        password: Property.ShortText({
+            displayName: 'Password',
+            description: 'The password of the member',
+            required: true,
+        })
+    }
+})
+```
+![Group](/resources/screenshots/property-style-group.png)

docs/mint.json

@@ -160,6 +160,7 @@
         "developers/piece-reference/files",
         "developers/piece-reference/external-libraries",
         "developers/piece-reference/piece-versioning",
+        "developers/piece-reference/properties-styles",
         "developers/piece-reference/examples"
       ]
     },
@@ -221,4 +222,4 @@
     "github": "https://github.com/activepieces/activepieces",
     "discord": "https://discord.gg/2jUXBKDdP8"
   }
-}
+}

packages/backend/src/app/flows/flow-version/flow-version.service.ts

@@ -410,9 +410,15 @@ function buildSchema(props: PiecePropertyMap): TSchema {
             case PropertyType.DYNAMIC:
                 propsSchema[name] = Type.Record(Type.String(), Type.Any())
                 break
+            case PropertyType.GROUP:
+                propsSchema[name] = Type.Record(Type.String(), buildSchema(property.props))
+                break
+            case PropertyType.SEPARATOR:
+            case PropertyType.TITLE:
+                break
         }
 
-        if (!property.required) {
+        if (!property.required && ![PropertyType.GROUP, PropertyType.SEPARATOR, PropertyType.TITLE].includes(property.type)) {
             propsSchema[name] = Type.Optional(Type.Union([Type.Null(), Type.Undefined(), propsSchema[name]]))
         }
     }

packages/pieces/framework/src/lib/property/base-prop.ts

@@ -1,6 +1,6 @@
 import { ProcessorFn } from "../processors/types";
 import { TypedValidatorFn, ValidationInputType } from "../validators/types";
-import { PropertyType } from "./property";
+import {PiecePropertyMap, PropertyType} from "./property";
 
 export type BasePropertySchema = {
     displayName: string;
@@ -27,7 +27,7 @@ export type TPropertyValue<T, U extends PropertyType, VALIDATION_INPUT extends V
     valueSchema: T;
     type: U;
     required: REQUIRED;
-    defaultProcessors?: ProcessorFn[]; 
+    defaultProcessors?: ProcessorFn[];
 	processors?: ProcessorFn[];
 	validators?: TypedValidatorFn<VALIDATION_INPUT>[];
 	defaultValidators?: TypedValidatorFn<VALIDATION_INPUT>[];
@@ -66,6 +66,12 @@ export type JsonProperty<R extends boolean> = BasePropertySchema & TPropertyValu
 
 export type DateTimeProperty<R extends boolean> = BasePropertySchema & TPropertyValue<string, PropertyType.DATE_TIME, ValidationInputType.DATE_TIME, R>;
 
+export type SeparatorProperty<R extends boolean> = BasePropertySchema & TPropertyValue<never, PropertyType.SEPARATOR, ValidationInputType.ANY, R>;
+
+export type TitleProperty<R extends boolean> = BasePropertySchema & TPropertyValue<never, PropertyType.TITLE, ValidationInputType.ANY, R>;
+
+export type GroupProperty<R extends boolean> = BasePropertySchema & TPropertyValue<any, PropertyType.GROUP, ValidationInputType.ANY, R> & {props: PiecePropertyMap};
+
 export class ApFile {
     constructor(public filename: string, public data: Buffer, public extension?: string) {}
 

packages/pieces/framework/src/lib/property/property.ts

@@ -1,16 +1,16 @@
 import {
-    ArrayProperty,
-    CheckboxProperty,
-    DateTimeProperty,
-    FileProperty,
-    JsonProperty,
-    LongTextProperty,
-    MarkDownProperty,
-    MarkDownPropertySchema,
-    NumberProperty,
-    ObjectProperty,
-    SecretTextProperty,
-    ShortTextProperty
+  ArrayProperty,
+  CheckboxProperty,
+  DateTimeProperty,
+  FileProperty, GroupProperty,
+  JsonProperty,
+  LongTextProperty,
+  MarkDownProperty,
+  MarkDownPropertySchema,
+  NumberProperty,
+  ObjectProperty,
+  SecretTextProperty, SeparatorProperty,
+  ShortTextProperty, TitleProperty
 } from "./base-prop";
 import { BasicAuthProperty } from "./basic-auth-prop";
 import { CustomAuthProperty, CustomAuthProps } from "./custom-auth-prop";
@@ -39,7 +39,11 @@ export enum PropertyType {
 	DYNAMIC = "DYNAMIC",
 	CUSTOM_AUTH = "CUSTOM_AUTH",
 	DATE_TIME = "DATE_TIME",
-	FILE = "FILE"
+	FILE = "FILE",
+
+  SEPARATOR = 'SEPARATOR',
+  TITLE = 'TITLE',
+  GROUP = 'GROUP',
 }
 
 export type PieceAuthProperty =
@@ -63,7 +67,11 @@ export type NonAuthPieceProperty = ShortTextProperty<boolean>
 | StaticMultiSelectDropdownProperty<unknown, boolean>
 | DynamicProperties<boolean>
 | DateTimeProperty<boolean>
-| FileProperty<boolean>;
+| FileProperty<boolean>
+| SeparatorProperty<boolean>
+| TitleProperty<boolean>
+| GroupProperty<boolean>
+;
 
 export type PieceProperty = NonAuthPieceProperty | PieceAuthProperty
 
@@ -100,12 +108,12 @@ export const Property = {
 		return {displayName: 'Markdown', required: true, description: request.value, type: PropertyType.MARKDOWN, valueSchema: undefined as never}
 	},
 	Number<R extends boolean>(request: Properties<NumberProperty<R>>): R extends true ? NumberProperty<true> : NumberProperty<false> {
-		return { 
+		return {
 			...request,
 			defaultProcessors: [Processors.number],
 			defaultValidators: [Validators.number],
-			valueSchema: undefined, 
-			type: PropertyType.NUMBER, 
+			valueSchema: undefined,
+			type: PropertyType.NUMBER,
 		} as unknown as R extends true ? NumberProperty<true> : NumberProperty<false>;
 	},
 
@@ -134,22 +142,34 @@ export const Property = {
 		return { ...request, valueSchema: undefined, type: PropertyType.STATIC_MULTI_SELECT_DROPDOWN } as unknown as R extends true ? StaticMultiSelectDropdownProperty<T, true> : StaticMultiSelectDropdownProperty<T, false>;
 	},
 	DateTime<R extends boolean>(request: Properties<DateTimeProperty<R>>): R extends true ? DateTimeProperty<true> : DateTimeProperty<false> {
-		return { 
-			...request, 
+		return {
+			...request,
 			defaultProcessors: [Processors.datetime],
 			defaultValidators: [Validators.datetimeIso],
-			valueSchema: undefined, 
-			type: PropertyType.DATE_TIME, 
+			valueSchema: undefined,
+			type: PropertyType.DATE_TIME,
 		} as unknown as R extends true ? DateTimeProperty<true> : DateTimeProperty<false>;
 	},
 	File<R extends boolean>(request: Properties<FileProperty<R>>): R extends true ? FileProperty<true> : FileProperty<false> {
-		return { ...request, 
+		return { ...request,
 			defaultProcessors: [Processors.file],
 			defaultValidators: [Validators.file],
 			valueSchema: undefined, type: PropertyType.FILE } as unknown as R extends true ? FileProperty<true> : FileProperty<false>
 	},
 };
 
+export const PropertyStyle = {
+  Separator<R extends boolean>(): R extends true ? SeparatorProperty<true> : SeparatorProperty<false> {
+    return { type: PropertyType.SEPARATOR } as unknown as R extends true ? SeparatorProperty<true> : SeparatorProperty<false>;
+  },
+  Title<R extends boolean>(request: { displayName: string }): R extends true ? TitleProperty<true> : TitleProperty<false> {
+    return { ...request, type: PropertyType.TITLE } as unknown as R extends true ? TitleProperty<true> : TitleProperty<false>;
+  },
+  Group<R extends boolean>(request: { displayName: string, isCollapsed?: boolean, props: NonAuthPiecePropertyMap }): R extends true ? GroupProperty<true> : GroupProperty<false> {
+    return { ...request, isCollapsed: request.isCollapsed ?? true, type: PropertyType.GROUP } as unknown as R extends true ? GroupProperty<true> : GroupProperty<false>;
+  }
+}
+
 export const PieceAuth = {
 	SecretText<R extends boolean>(request: Properties<SecretTextProperty<R>>): R extends true ? SecretTextProperty<true> : SecretTextProperty<false> {
 		return { ...request, valueSchema: undefined, type: PropertyType.SECRET_TEXT } as unknown as R extends true ? SecretTextProperty<true> : SecretTextProperty<false>;