@draftbit/core 46.10.3-6c7505.2 → 46.10.3-7476ab.2

package/lib/module/mappings/Divider.js

@@ -0,0 +1,25 @@
+import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Divider",
+  tag: "Divider",
+  category: COMPONENT_TYPES.layout,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  description: "A horizontal line used to divide content",
+  preview_image_url: "{CLOUDINARY_URL}/Divider.png",
+  supports_list_render: false,
+  props: {
+    color: {
+      group: GROUPS.basic,
+      label: "Color",
+      description: "The color of the divider",
+      editable: true,
+      required: false,
+      defaultValue: "divider",
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME
+    }
+  },
+  layout: {
+    height: 1
+  }
+}];

package/lib/module/mappings/FAB.js

@@ -0,0 +1,37 @@
+import { COMPONENT_TYPES, createIconProp, createColorProp, GROUPS, createBoolProp, createIconSizeProp, createActionProp, Triggers, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "FAB",
+  tag: "FAB",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  description: "A mini round icon FAB",
+  layout: {},
+  triggers: [Triggers.OnPress],
+  props: {
+    onPress: createActionProp(),
+    disabled: createBoolProp({
+      label: "Disabled",
+      group: GROUPS.basic
+    }),
+    loading: createBoolProp({
+      label: "Loading",
+      group: GROUPS.basic
+    }),
+    iconName: createIconProp({
+      label: "Icon",
+      defaultValue: null,
+      group: GROUPS.basic
+    }),
+    iconColor: createColorProp({
+      label: "Icon color",
+      defaultValue: null,
+      group: GROUPS.basic
+    }),
+    bgColor: createColorProp({
+      label: "Background color",
+      defaultValue: null,
+      group: GROUPS.basic
+    }),
+    size: createIconSizeProp()
+  }
+};

package/lib/module/mappings/Fetch.js

@@ -0,0 +1,13 @@
+import { COMPONENT_TYPES, StylesPanelSections } from "@draftbit/types";
+/* TODO remove, still used inside the builder in a weird way */
+export const SEED_DATA = {
+  name: "Fetch",
+  tag: "Fetch",
+  description: "Rest API Declarative Fetch component. Uses react-request internally",
+  category: COMPONENT_TYPES.data,
+  stylesPanelSections: [StylesPanelSections.NoStyles],
+  layout: {
+    minHeight: 40
+  },
+  props: {}
+};

package/lib/module/mappings/FieldSearchBarFull.js

@@ -0,0 +1,52 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Search Bar",
+  tag: "FieldSearchBarFull",
+  description: "A search bar with accompanying search icon and clear button.",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Field_SearchBar_Full.png",
+  supports_list_render: false,
+  triggers: [Triggers.OnChange],
+  props: {
+    icon: {
+      group: GROUPS.basic,
+      label: "Icon",
+      description: "Left icon to display",
+      formType: FORM_TYPES.icon,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    },
+    placeholder: {
+      group: GROUPS.basic,
+      label: "Placeholder",
+      description: "Input placeholder text",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "Search for...",
+      editable: true,
+      required: false
+    },
+    onSubmit: {
+      group: GROUPS.basic,
+      label: "Submit action",
+      description: "Action to execute on submission",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.action,
+      propType: PROP_TYPES.STRING,
+      defaultValue: null
+    },
+    fieldName: {
+      ...FIELD_NAME,
+      defaultValue: "searchBarValue"
+    }
+  },
+  layout: {}
+}];alue: "searchBarValue"
+    }
+  },
+  layout: {}
+}];

package/lib/module/mappings/FlashList.js

@@ -0,0 +1,104 @@
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, GROUPS, Triggers, createActionProp, createStaticNumberProp, createColorProp, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Masonry List",
+  tag: "MasonryFlashList",
+  description: "Masonry Flashlist by Shopify",
+  packageName: "@shopify/flash-list",
+  category: COMPONENT_TYPES.data,
+  stylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.MarginsAndPaddings],
+  triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
+  props: {
+    onRefresh: createActionProp(),
+    onEndReached: createActionProp(),
+    numColumns: createNumColumnsType({
+      editable: true
+    }),
+    estimatedItemSize: createNumberProp({
+      group: GROUPS.basic,
+      label: "Est. Item Size",
+      description: "Approximate size of the items before rendering.",
+      defaultValue: 50,
+      step: 1,
+      precision: 0
+    }),
+    initialNumToRender: createStaticNumberProp({
+      label: "Initial Num To Render",
+      description: "How many items to render in the initial batch",
+      defaultValue: null
+    }),
+    onEndReachedThreshold: createStaticNumberProp({
+      label: "End Reached Threshold",
+      description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+      defaultValue: 0.5
+    }),
+    refreshColor: createColorProp({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator"
+    }),
+    showsHorizontalScrollIndicator: createStaticBoolProp({
+      label: "Show Horizontal Scroll Indicator",
+      description: "When true, shows a horizontal scroll indicator. The default value is true.",
+      defaultValue: true
+    }),
+    showsVerticalScrollIndicator: createStaticBoolProp({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
+    })
+  }
+}, {
+  name: "FlashList",
+  tag: "FlashList",
+  description: "Flashlist by Shopify",
+  packageName: "@shopify/flash-list",
+  category: COMPONENT_TYPES.data,
+  stylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.MarginsAndPaddings],
+  triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
+  props: {
+    onRefresh: createActionProp(),
+    onEndReached: createActionProp(),
+    estimatedItemSize: createNumberProp({
+      group: GROUPS.basic,
+      label: "Est. Item Size",
+      description: "Approximate size of the items before rendering.",
+      defaultValue: 50,
+      step: 1,
+      precision: 0
+    }),
+    horizontal: createStaticBoolProp({
+      label: "Horizontal",
+      description: "Render list horizontally"
+    }),
+    inverted: createStaticBoolProp({
+      label: "Inverted",
+      description: "If true, reverses the direction."
+    }),
+    numColumns: createNumColumnsType({
+      editable: true
+    }),
+    initialNumToRender: createStaticNumberProp({
+      label: "Initial Num To Render",
+      description: "How many items to render in the initial batch",
+      defaultValue: null
+    }),
+    onEndReachedThreshold: createStaticNumberProp({
+      label: "End Reached Threshold",
+      description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+      defaultValue: 0.5
+    }),
+    refreshColor: createColorProp({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator"
+    }),
+    showsHorizontalScrollIndicator: createStaticBoolProp({
+      label: "Show Horizontal Scroll Indicator",
+      description: "When true, shows a horizontal scroll indicator. The default value is true.",
+      defaultValue: true
+    }),
+    showsVerticalScrollIndicator: createStaticBoolProp({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
+    })
+  }
+}];

package/lib/module/mappings/FlatList.js

@@ -0,0 +1,51 @@
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, Triggers, createActionProp, createStaticNumberProp, createColorProp } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "List",
+  tag: "FlatList",
+  description: "A basic List component",
+  category: COMPONENT_TYPES.data,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    flex: 1
+  },
+  triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
+  props: {
+    onRefresh: createActionProp(),
+    onEndReached: createActionProp(),
+    horizontal: createStaticBoolProp({
+      label: "Horizontal",
+      description: "Render list horizontally"
+    }),
+    inverted: createStaticBoolProp({
+      label: "Inverted",
+      description: "If true, reverses the direction."
+    }),
+    numColumns: createNumColumnsType({
+      editable: true
+    }),
+    initialNumToRender: createStaticNumberProp({
+      label: "Initial Num To Render",
+      description: "How many items to render in the initial batch",
+      defaultValue: null
+    }),
+    onEndReachedThreshold: createStaticNumberProp({
+      label: "End Reached Threshold",
+      description: "How far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback. Thus a value of 0.5 will trigger onEndReached when the end of the content is within half the visible length of the list.",
+      defaultValue: 0.5
+    }),
+    refreshColor: createColorProp({
+      label: "Refreshing Color",
+      description: "Color of the refresh indicator"
+    }),
+    showsHorizontalScrollIndicator: createStaticBoolProp({
+      label: "Show Horizontal Scroll Indicator",
+      description: "When true, shows a horizontal scroll indicator. The default value is true.",
+      defaultValue: true
+    }),
+    showsVerticalScrollIndicator: createStaticBoolProp({
+      label: "Show Vertical Scroll Indicator",
+      description: "When true, shows a vertical scroll indicator. The default value is true.",
+      defaultValue: true
+    })
+  }
+};

package/lib/module/mappings/Icon.js

@@ -0,0 +1,26 @@
+import { COMPONENT_TYPES, GROUPS, createNumberProp, createColorProp, createIconProp, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Icon",
+  tag: "Icon",
+  description: "An icon",
+  category: COMPONENT_TYPES.basic,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Background, StylesPanelSections.Position, StylesPanelSections.Effects],
+  layout: {},
+  props: {
+    name: {
+      ...createIconProp(),
+      group: GROUPS.data
+    },
+    color: createColorProp(),
+    size: createNumberProp({
+      group: GROUPS.basic,
+      label: "Size",
+      description: "Width and height of your icon",
+      defaultValue: 24,
+      min: 1,
+      max: 128,
+      step: 1,
+      precision: 0
+    })
+  }
+};

package/lib/module/mappings/IconButton.js

@@ -0,0 +1,29 @@
+import { COMPONENT_TYPES, GROUPS, createIconProp, createColorProp, createNumberProp, createActionProp, Triggers, StylesPanelSections, createDisabledProp } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Icon Button",
+  tag: "IconButton",
+  category: COMPONENT_TYPES.button,
+  layout: {},
+  triggers: [Triggers.OnPress, Triggers.OnLongPress],
+  stylesPanelSections: [StylesPanelSections.Margins, StylesPanelSections.Effects, StylesPanelSections.Position],
+  props: {
+    onPress: createActionProp(),
+    onLongPress: createActionProp(),
+    disabled: createDisabledProp(),
+    icon: createIconProp(),
+    color: createColorProp({
+      label: "Color",
+      group: GROUPS.basic
+    }),
+    size: createNumberProp({
+      group: GROUPS.basic,
+      label: "Size",
+      description: "Width and height of your icon",
+      defaultValue: 32,
+      min: 16,
+      max: 256,
+      step: 1,
+      precision: 0
+    })
+  }
+};

package/lib/module/mappings/Image.js

@@ -0,0 +1,29 @@
+import { COMPONENT_TYPES, createImageProp, createResizeModeProp, StylesPanelSections, FORM_TYPES, PROP_TYPES, GROUPS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Image",
+  tag: "Image",
+  description: "A basic Image Component",
+  category: COMPONENT_TYPES.media,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Position, StylesPanelSections.Effects, StylesPanelSections.Borders],
+  layout: {
+    width: 100,
+    height: 100
+  },
+  props: {
+    source: createImageProp(),
+    resizeMode: createResizeModeProp(),
+    blurRadius: {
+      group: GROUPS.basic,
+      name: "blurRadius",
+      label: "Blur Radius",
+      defaultValue: null,
+      description: "The blur radius of the blur filter added to the image.",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      step: 5,
+      precision: 1
+    }
+  }
+};

package/lib/module/mappings/ImageBackground.js

@@ -0,0 +1,29 @@
+import { COMPONENT_TYPES, createImageProp, createResizeModeProp, createTextEnumProp, createColorProp, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Image Background",
+  tag: "ImageBackground",
+  doc_link: "https://docs.expo.io/versions/latest/react-native/imagebackground/",
+  code_link: "https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js",
+  description: "A very simple drop-in replacement for Image that allows you to use an Image as a background.",
+  category: COMPONENT_TYPES.media,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    width: "100%",
+    height: "100%"
+  },
+  props: {
+    source: createImageProp({
+      defaultValue: "https://static.draftbit.com/images/placeholder-image-background.png"
+    }),
+    resizeMode: createResizeModeProp(),
+    backgroundColor: createColorProp({
+      label: "Background Color",
+      description: "If no image is chosen render a colored background."
+    }),
+    backfaceVisibility: createTextEnumProp({
+      label: "Backface Visibility",
+      description: "When animating a card, show the back face of it",
+      options: ["visible", "hidden"]
+    })
+  }
+};

package/lib/module/mappings/KeyboardAvoidingView.js

@@ -0,0 +1,41 @@
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Keyboard Avoiding View",
+  tag: "KeyboardAvoidingView",
+  description: "View that moves out of the way of the virtual keyboard. ",
+  category: COMPONENT_TYPES.view,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  props: {
+    enabled: {
+      label: "Enabled",
+      description: "Enable the keyboard avoiding view",
+      editable: true,
+      required: true,
+      defaultValue: true,
+      formType: FORM_TYPES.boolean,
+      propType: PROP_TYPES.BOOLEAN,
+      group: GROUPS.basic
+    },
+    behavior: {
+      label: "Resizing Behavior",
+      description: "The behavior for how the keyboard resizing interacts with the rest of the screen. (Default: padding).",
+      editable: true,
+      required: true,
+      defaultValue: "padding",
+      options: ["padding", "position", "height"],
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      group: GROUPS.basic
+    },
+    keyboardVerticalOffset: {
+      label: "Keyboard Vertical Offset",
+      description: "The distance between the bottom of the view and the keyboard",
+      editable: true,
+      required: false,
+      defaultValue: 0,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      group: GROUPS.basic
+    }
+  }
+};

package/lib/module/mappings/KeyboardAwareScrollView.js

@@ -0,0 +1,50 @@
+import { COMPONENT_TYPES, createStaticBoolProp, createStaticNumberProp, createTextEnumProp, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Keyboard Aware Scroll View",
+  tag: "KeyboardAwareScrollView",
+  description: "View that moves pushes the content when virtual keyboard is open.",
+  category: COMPONENT_TYPES.view,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {},
+  props: {
+    viewIsInsideTabBar: createStaticBoolProp({
+      label: "View Is Inside TabBar",
+      description: "Adds an extra offset that represents the TabBarIOS height."
+    }),
+    enableAutomaticScroll: createStaticBoolProp({
+      label: "Enable Automatic Scroll",
+      description: "When focus in TextInput will scroll the position, default is enabled"
+    }),
+    extraHeight: createStaticNumberProp({
+      label: "Extra Height",
+      description: "Adds an extra offset when focusing the TextInputs"
+    }),
+    extraScrollHeight: createStaticNumberProp({
+      label: "Extra Scroll Height",
+      description: "Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard"
+    }),
+    enableResetScrollToCoords: createStaticBoolProp({
+      label: "Enable Reset Scroll To Coordinates",
+      description: "Lets the user enable or disable automatic resetScrollToCoords"
+    }),
+    keyboardOpeningTime: createStaticNumberProp({
+      label: "Opening Time",
+      description: "Sets the delay time before scrolling to new position after keyboard opening, default is 250"
+    }),
+    enableOnAndroid: createStaticBoolProp({
+      label: "Enable On Android",
+      description: "Enable Android Support"
+    }),
+    showsVerticalScrollIndicator: createStaticBoolProp({
+      label: "Shows Vertical Scroll Indicator",
+      description: "Show or hide the vertical scroll indicator",
+      defaultValue: true
+    }),
+    keyboardShouldPersistTaps: createTextEnumProp({
+      label: "Allow Touch Events",
+      description: "Allows touch events on visible components to be processed while the keyboard is open",
+      defaultValue: "never",
+      options: ["never", "always"]
+    })
+  }
+};

package/lib/module/mappings/Layout.js

@@ -0,0 +1,193 @@
+import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Row",
+  tag: "Row",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: [StylesPanelSections.NoStyles],
+  props: {
+    justifyContent: {
+      label: "Align Horizontally",
+      group: GROUPS.style,
+      description: "Align Items Horizontally (on the X Axis)",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "flex-start",
+      editable: true,
+      required: false
+    },
+    alignItems: {
+      label: "Align Vertically",
+      group: GROUPS.style,
+      description: "Align Items Vertically (on the Y Axis)",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "flex-start",
+      editable: true,
+      required: false
+    }
+  }
+}, {
+  name: "Spacer",
+  tag: "Spacer",
+  category: COMPONENT_TYPES.layout,
+  props: {
+    top: {
+      label: "Top",
+      description: "Top",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      group: GROUPS.style,
+      defaultValue: 8,
+      editable: true,
+      required: false
+    },
+    right: {
+      label: "Right",
+      description: "Right",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      group: GROUPS.style,
+      defaultValue: 8,
+      editable: true,
+      required: false
+    },
+    bottom: {
+      label: "Bottom",
+      description: "Bottom",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      group: GROUPS.style,
+      defaultValue: 8,
+      editable: true,
+      required: false
+    },
+    left: {
+      label: "Left",
+      description: "Left",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      group: GROUPS.style,
+      defaultValue: 8,
+      editable: true,
+      required: false
+    }
+  }
+}, {
+  name: "Stack",
+  tag: "Stack",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: [StylesPanelSections.NoStyles],
+  props: {
+    justifyContent: {
+      group: GROUPS.style,
+      label: "Justify",
+      description: "Justify horizontally",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "flex-start",
+      editable: true,
+      required: false
+    },
+    alignItems: {
+      group: GROUPS.style,
+      label: "Align",
+      description: "Vertical align",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "flex-start",
+      editable: true,
+      required: false
+    }
+  }
+}, {
+  name: "Center",
+  tag: "Center",
+  category: COMPONENT_TYPES.layout,
+  stylesPanelSections: [StylesPanelSections.NoStyles],
+  props: {
+    width: {
+      label: "Width",
+      description: "Width",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      group: GROUPS.style,
+      defaultValue: 240,
+      editable: true,
+      required: false
+    },
+    height: {
+      label: "Height",
+      description: "Height",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      group: GROUPS.style,
+      defaultValue: 200,
+      editable: true,
+      required: false
+    },
+    bgColor: {
+      label: "Background Color",
+      description: "Background color",
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      editable: true,
+      required: false,
+      defaultValue: "light",
+      group: GROUPS.style
+    }
+  }
+}, {
+  name: "Circle",
+  tag: "Circle",
+  category: COMPONENT_TYPES.layout,
+  stylesPanelSections: [StylesPanelSections.NoStyles],
+  props: {
+    size: {
+      label: "Size",
+      description: "Size",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      group: GROUPS.style,
+      defaultValue: 50,
+      editable: true,
+      required: false
+    },
+    bgColor: {
+      label: "Background Color",
+      description: "Background color",
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      editable: true,
+      required: false,
+      defaultValue: "light",
+      group: GROUPS.style
+    }
+  }
+}, {
+  name: "Square",
+  tag: "Square",
+  category: COMPONENT_TYPES.layout,
+  stylesPanelSections: [StylesPanelSections.NoStyles],
+  props: {
+    size: {
+      label: "Size",
+      description: "Size",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      group: GROUPS.style,
+      defaultValue: 50,
+      editable: true,
+      required: false
+    },
+    bgColor: {
+      label: "Background Color",
+      description: "Background color",
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      editable: true,
+      required: false,
+      defaultValue: "light",
+      group: GROUPS.style
+    }
+  }
+}];