@draftbit/core 47.0.0-df8093.2 → 47.0.0

package/lib/module/mappings/CardContainerShortImage.js

@@ -0,0 +1,117 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Short Card (Left)",
+  tag: "CardContainerShortImage",
+  description: "An elevated card with a left aligned image and a title and subtitle",
+  category: COMPONENT_TYPES.card,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Card_ContainerShortLeftImage.png",
+  supports_list_render: true,
+  props: {
+    image: {
+      group: GROUPS.data,
+      label: "Image",
+      description: "Image",
+      formType: FORM_TYPES.image,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    },
+    title: {
+      group: GROUPS.data,
+      label: "Title",
+      description: "Title to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "Beautiful West Coast Villa",
+      editable: true,
+      required: false
+    },
+    subtitle: {
+      group: GROUPS.data,
+      label: "Subtitle",
+      description: "Subtitle to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "San Diego",
+      editable: true,
+      required: false
+    },
+    aspectRatio: {
+      group: GROUPS.basic,
+      label: "Aspect ratio",
+      description: "Aspect ratio of the image",
+      formType: FORM_TYPES.aspectRatio,
+      propType: PROP_TYPES.STRING,
+      defaultValue: null,
+      editable: true,
+      required: false
+    },
+    elevation: createElevationType(2),
+    mode: {
+      group: GROUPS.uncategorized,
+      label: "Image Side",
+      description: "The side on which the image is on (left or right)",
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "left",
+      options: ["left", "right"],
+      editable: false,
+      required: false
+    }
+  },
+  layout: {}
+}, {
+  name: "Short Card (Right)",
+  tag: "CardContainerShortImage",
+  description: "An elevated card with a right aligned image and a title and subtitle",
+  category: COMPONENT_TYPES.card,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Card_ContainerShortRightImage.png",
+  supports_list_render: true,
+  props: {
+    image: {
+      group: GROUPS.data,
+      label: "Image",
+      description: "Image",
+      formType: FORM_TYPES.image,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    },
+    title: {
+      group: GROUPS.data,
+      label: "Title",
+      description: "Title to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "Beautiful West Coast Villa",
+      editable: true,
+      required: false
+    },
+    subtitle: {
+      group: GROUPS.data,
+      label: "Subtitle",
+      description: "Subtitle to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "San Diego",
+      editable: true,
+      required: false
+    },
+    elevation: createElevationType(2),
+    mode: {
+      label: "Mode",
+      description: "Mode",
+      group: GROUPS.uncategorized,
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "right",
+      editable: false,
+      required: false
+    }
+  },
+  layout: {}
+}];

package/lib/module/mappings/CardInline.js

@@ -0,0 +1,52 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Inline Card",
+  tag: "CardInline",
+  description: "An elevated card with image and a title and description overlayed, that takes up the full width of its container.",
+  category: COMPONENT_TYPES.card,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  layout: {},
+  props: {
+    image: {
+      group: GROUPS.data,
+      label: "Image",
+      description: "Image",
+      formType: FORM_TYPES.image,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    },
+    title: {
+      group: GROUPS.data,
+      label: "Title",
+      description: "Text to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "Beautiful West Coast Villa",
+      editable: true,
+      required: false
+    },
+    subtitle: {
+      group: GROUPS.data,
+      label: "Subtitle",
+      description: "Subtitle text",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "San Diego",
+      editable: true,
+      required: false
+    },
+    aspectRatio: {
+      group: GROUPS.basic,
+      label: "Aspect ratio",
+      description: "Aspect ratio of the image",
+      formType: FORM_TYPES.aspectRatio,
+      propType: PROP_TYPES.NUMBER,
+      defaultValue: 1.5,
+      editable: true,
+      required: false
+    },
+    elevation: createElevationType(2)
+  }
+};

package/lib/module/mappings/Carousel.js

@@ -0,0 +1,17 @@
+import { COMPONENT_TYPES, createResizeModeProp, createColorProp, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Carousel",
+  tag: "Carousel",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  description: "A horizontal scrolling carousel of images",
+  layout: {
+    height: 250
+  },
+  props: {
+    resizeMode: createResizeModeProp(),
+    dotColor: createColorProp({
+      label: "Dot color"
+    })
+  }
+}];

package/lib/module/mappings/Checkbox.js

@@ -43,5 +43,4 @@ export const SEED_DATA = {
       defaultValue: null
     })
   }
-};
-//# sourceMappingURL=Checkbox.js.map
+};

package/lib/module/mappings/CheckboxGroup.js

@@ -23,5 +23,4 @@ export const SEED_DATA = {
       valuePropName: "value"
     })
   }
-};
-//# sourceMappingURL=CheckboxGroup.js.map
+};

package/lib/module/mappings/CheckboxRow.js

@@ -54,5 +54,4 @@ export const SEED_DATA = {
       defaultValue: null
     })
   }
-};
-//# sourceMappingURL=CheckboxRow.js.map
+};

package/lib/module/mappings/CircleImage.js

@@ -0,0 +1,25 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createImageProp, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Circle Image",
+  tag: "CircleImage",
+  description: "A circle image",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  props: {
+    source: createImageProp(),
+    size: {
+      group: GROUPS.basic,
+      label: "Size",
+      description: "Size of your circle image",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      min: 0,
+      max: 300,
+      precision: 0,
+      step: 1,
+      defaultValue: 60
+    }
+  }
+};

package/lib/module/mappings/Container.js

@@ -0,0 +1,30 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, createImageProp, createResizeModeProp, CONTAINER_COMPONENT_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Container",
+  tag: "Container",
+  description: "A container component with gutter padding",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    height: 250
+  },
+  props: {
+    useThemeGutterPadding: {
+      group: GROUPS.basic,
+      label: "Use gutter padding",
+      description: "When true, uses the theme gutter spacing as the container's horizontal padding",
+      formType: FORM_TYPES.boolean,
+      propType: PROP_TYPES.BOOLEAN,
+      defaultValue: false,
+      editable: false,
+      required: true
+    },
+    backgroundImage: createImageProp({
+      label: "Background Image",
+      description: "Apply a custom background image",
+      defaultValue: null
+    }),
+    backgroundImageResizeMode: createResizeModeProp(),
+    elevation: createElevationType(0)
+  }
+};

package/lib/module/mappings/CustomCode.js

@@ -5,5 +5,4 @@ export const SEED_DATA = {
   description: "A component that allows usage of custom code",
   category: COMPONENT_TYPES.utility,
   props: {}
-};
-//# sourceMappingURL=CustomCode.js.map
+};

package/lib/module/mappings/DatePicker.js

@@ -1,15 +1,5 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp } from "@draftbit/types";
 const SEED_DATA_PROPS = {
-  label: {
-    label: "Label",
-    description: "The label to be displayed on the picker",
-    formType: FORM_TYPES.string,
-    propType: PROP_TYPES.STRING,
-    defaultValue: "Date",
-    editable: true,
-    required: true,
-    group: GROUPS.data
-  },
   mode: {
     label: "Mode",
     description: "Choose between date, time and datetime",
@@ -21,6 +11,28 @@ const SEED_DATA_PROPS = {
     options: ["date", "time", "datetime"],
     group: GROUPS.basic
   },
+  label: {
+    label: "Label",
+    description: "The label to be displayed on the picker",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "Date",
+    editable: true,
+    required: true,
+    group: GROUPS.data
+  },
+  labelSize: createNumberProp({
+    label: "Label Size"
+  }),
+  labelColor: createColorProp({
+    label: "Label Color"
+  }),
+  borderColor: createColorProp({
+    label: "Border Color"
+  }),
+  borderColorActive: createColorProp({
+    label: "Border Color"
+  }),
   format: {
     label: "Format",
     description: "Create an output format for the date.",
@@ -138,6 +150,7 @@ export const SEED_DATA = [{
   category: COMPONENT_TYPES.input,
   layout: null,
   triggers: [Triggers.OnDateChange],
+  StylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position],
   props: {
     ...SEED_DATA_PROPS,
     type: {
@@ -152,5 +165,4 @@ export const SEED_DATA = [{
       group: GROUPS.basic
     }
   }
-}];
-//# sourceMappingURL=DatePicker.js.map
+}];

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

@@ -10,5 +10,4 @@ export const SEED_DATA = {
     minHeight: 40
   },
   props: {}
-};
-//# sourceMappingURL=Fetch.js.map
+};

package/lib/module/mappings/FieldSearchBarFull.js

@@ -0,0 +1,49 @@
+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],
+  // TODO Triggers.OnSubmit for multiple triggers
+  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: {}
+}];

package/lib/module/mappings/FlashList.js

@@ -30,5 +30,4 @@ export const SEED_DATA = {
       editable: true
     })
   }
-};
-//# sourceMappingURL=FlashList.js.map
+};

package/lib/module/mappings/FlatList.js

@@ -21,5 +21,4 @@ export const SEED_DATA = {
       editable: true
     })
   }
-};
-//# sourceMappingURL=FlatList.js.map
+};

package/lib/module/mappings/HeaderLarge.js

@@ -0,0 +1,27 @@
+import { COMPONENT_TYPES, createIconProp, createTextProp, createActionProp, Triggers, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Header Large",
+  tag: "HeaderLarge",
+  description: "A large header with an optional touchable right aligned text and icon.",
+  category: COMPONENT_TYPES.header,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  layout: {},
+  triggers: [Triggers.OnPress],
+  props: {
+    onPress: createActionProp(),
+    title: createTextProp({
+      label: "Title",
+      description: "Text to display",
+      defaultValue: "Title"
+    }),
+    buttonText: createTextProp({
+      label: "Button text",
+      description: "Right aligned button text to display",
+      defaultValue: "See All"
+    }),
+    icon: createIconProp({
+      defaultValue: null,
+      required: false
+    })
+  }
+}];

package/lib/module/mappings/HeaderMedium.js

@@ -0,0 +1,53 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Header Medium",
+  tag: "HeaderMedium",
+  description: "A medium header with an optional touchable right aligned text and icon.",
+  category: COMPONENT_TYPES.header,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Header_HeadlineMediumIconText.png",
+  supports_list_render: false,
+  props: {
+    title: {
+      group: GROUPS.data,
+      label: "Title",
+      description: "Text to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "Title",
+      editable: true,
+      required: false
+    },
+    buttonText: {
+      group: GROUPS.data,
+      label: "Button text",
+      description: "Right aligned button text to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "See All",
+      editable: true,
+      required: false
+    },
+    icon: {
+      group: GROUPS.basic,
+      label: "Icon",
+      description: "Name of icon to display",
+      formType: FORM_TYPES.icon,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    },
+    onPress: {
+      group: GROUPS.basic,
+      label: "Action",
+      description: "Action to execute when button pressed",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.action,
+      propType: PROP_TYPES.STRING,
+      defaultValue: null
+    }
+  },
+  layout: {}
+}];

package/lib/module/mappings/HeaderOverline.js

@@ -0,0 +1,53 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Header Overline",
+  tag: "HeaderOverline",
+  description: "A small header with an optional touchable right aligned text and icon.",
+  category: COMPONENT_TYPES.header,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Header_OverlineIconText.png",
+  supports_list_render: false,
+  props: {
+    title: {
+      group: GROUPS.data,
+      label: "Title",
+      description: "Text to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "Title",
+      editable: true,
+      required: false
+    },
+    buttonText: {
+      group: GROUPS.data,
+      label: "Button text",
+      description: "Right aligned button text to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "See All",
+      editable: true,
+      required: false
+    },
+    icon: {
+      group: GROUPS.basic,
+      label: "Icon",
+      description: "Name of icon to display",
+      formType: FORM_TYPES.icon,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    },
+    onPress: {
+      group: GROUPS.basic,
+      label: "Action",
+      description: "Action to execute when button pressed",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.action,
+      propType: PROP_TYPES.STRING,
+      defaultValue: null
+    }
+  },
+  layout: {}
+}];

package/lib/module/mappings/Icon.js

@@ -23,5 +23,4 @@ export const SEED_DATA = {
       precision: 0
     })
   }
-};
-//# sourceMappingURL=Icon.js.map
+};

package/lib/module/mappings/IconButton.js

@@ -28,5 +28,4 @@ export const SEED_DATA = {
       precision: 0
     })
   }
-};
-//# sourceMappingURL=IconButton.js.map
+};

package/lib/module/mappings/Image.js

@@ -26,5 +26,4 @@ export const SEED_DATA = {
       precision: 1
     }
   }
-};
-//# sourceMappingURL=Image.js.map
+};

package/lib/module/mappings/ImageBackground.js

@@ -26,5 +26,4 @@ export const SEED_DATA = {
       options: ["visible", "hidden"]
     })
   }
-};
-//# sourceMappingURL=ImageBackground.js.map
+};

package/lib/module/mappings/KeyboardAvoidingView.js

@@ -38,5 +38,4 @@ export const SEED_DATA = {
       group: GROUPS.basic
     }
   }
-};
-//# sourceMappingURL=KeyboardAvoidingView.js.map
+};

package/lib/module/mappings/KeyboardAwareScrollView.js

@@ -47,5 +47,4 @@ export const SEED_DATA = {
       options: ["never", "always"]
     })
   }
-};
-//# sourceMappingURL=KeyboardAwareScrollView.js.map
+};

package/lib/module/mappings/Layout.js

@@ -190,5 +190,4 @@ export const SEED_DATA = [{
       group: GROUPS.style
     }
   }
-}];
-//# sourceMappingURL=Layout.js.map
+}];

package/lib/module/mappings/LinearGradient.js

@@ -77,5 +77,4 @@ export const SEED_DATA = {
       defaultValue: "primary"
     })
   }
-};
-//# sourceMappingURL=LinearGradient.js.map
+};