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

package/lib/module/mappings/Picker.js

@@ -0,0 +1,147 @@
+import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections, createStaticBoolProp } from "@draftbit/types";
+const SEED_DATA_PROPS = {
+  label: {
+    group: GROUPS.data,
+    label: "Label",
+    description: "The label to be displayed on the picker",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: null,
+    editable: true,
+    required: true
+  },
+  placeholder: {
+    group: GROUPS.basic,
+    label: "Placeholder",
+    description: "The placeholder text of the picker",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "Select an option",
+    editable: true,
+    required: false
+  },
+  placeholderTextColor: {
+    group: GROUPS.basic,
+    label: "Placeholder Text Color",
+    description: "The color of the placeholder text.",
+    editable: true,
+    required: false,
+    defaultValue: null,
+    formType: FORM_TYPES.color,
+    propType: PROP_TYPES.STRING
+  },
+  assistiveText: {
+    group: GROUPS.basic,
+    label: "Assistive text",
+    description: "Helper text to display below the picker",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: null,
+    editable: true,
+    required: false
+  },
+  options: {
+    group: GROUPS.data,
+    label: "Options",
+    description: "Array of picker options. An array of objects containing a label and value.",
+    editable: true,
+    required: false,
+    formType: FORM_TYPES.array,
+    propType: PROP_TYPES.OBJECT,
+    options: [],
+    defaultValue: null
+  },
+  disabled: {
+    group: GROUPS.basic,
+    label: "Disabled",
+    description: "Whether the picker should be disabled. Will prevent selection and show a greyed out state.",
+    formType: FORM_TYPES.boolean,
+    propType: PROP_TYPES.BOOLEAN,
+    defaultValue: false,
+    editable: true,
+    required: false
+  },
+  error: {
+    group: GROUPS.data,
+    label: "Error",
+    description: "Whether the picker should display the error state",
+    formType: FORM_TYPES.boolean,
+    propType: PROP_TYPES.BOOLEAN,
+    defaultValue: false,
+    editable: true,
+    required: false
+  },
+  leftIconName: {
+    group: GROUPS.basic,
+    label: "Left icon name",
+    description: "The icon to display on the left",
+    formType: FORM_TYPES.icon,
+    propType: PROP_TYPES.ASSET,
+    defaultValue: null,
+    editable: true,
+    required: false
+  },
+  leftIconMode: {
+    group: GROUPS.basic,
+    label: "Left icon mode",
+    description: "The mode of the icon to display on the left. 'inset' or 'outset'.",
+    formType: FORM_TYPES.flatArray,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "inset",
+    options: ["inset", "outset"],
+    editable: true,
+    required: true
+  },
+  rightIconName: {
+    group: GROUPS.basic,
+    label: "Right icon name",
+    description: "The icon to display on the right",
+    formType: FORM_TYPES.icon,
+    propType: PROP_TYPES.ASSET,
+    defaultValue: null,
+    editable: true,
+    required: false
+  },
+  fieldName: {
+    ...FIELD_NAME,
+    defaultValue: "pickerValue",
+    handlerPropName: "onValueChange"
+  }
+};
+const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
+export const SEED_DATA = [{
+  name: "Picker",
+  tag: "Picker",
+  description: "A component used to pick a value from a set of options",
+  category: COMPONENT_TYPES.input,
+  stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Borders, StylesPanelSections.Effects],
+  preview_image_url: "{CLOUDINARY_URL}/Picker.png",
+  supports_list_render: false,
+  triggers: SEED_DATA_TRIGGERS,
+  props: {
+    ...SEED_DATA_PROPS,
+    type: {
+      label: "Appearance",
+      description: "Type of Picker",
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "solid",
+      options: ["solid", "underline"],
+      editable: true,
+      required: true,
+      group: GROUPS.basic
+    },
+    iconSize: createIconSizeProp({
+      defaultValue: 24
+    }),
+    iconColor: createColorProp({
+      label: "Icon Color"
+    }),
+    autoDismissKeyboard: createStaticBoolProp({
+      label: "Auto dismiss keyboard",
+      description: "Automatically dismiss keyboard when Picker is opened",
+      defaultValue: true
+    })
+  },
+  layout: {}
+}];

package/lib/module/mappings/ProgressBar.js

@@ -0,0 +1,99 @@
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Progress Bar",
+  tag: "ProgressBar",
+  description: "A horizontal bar used to show completed progress",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Status_Progress.png",
+  supports_list_render: false,
+  props: {
+    progress: {
+      group: GROUPS.data,
+      label: "Progress",
+      description: "The amount of progress to display. A number 0-1.",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      defaultValue: 0.5,
+      min: 0,
+      max: 1,
+      step: 0.01,
+      precision: 2,
+      editable: true,
+      required: true
+    },
+    color: {
+      group: GROUPS.basic,
+      label: "Progress Color",
+      description: "Custom color for the progress shown",
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      defaultValue: null,
+      editable: true,
+      required: true
+    },
+    unfilledColor: {
+      group: GROUPS.basic,
+      label: "Unfilled Color",
+      description: "The color of the unfilled portion of the progress bar(eg. if at 50% then this is the color of the other 50%)",
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      defaultValue: null,
+      editable: true,
+      required: true
+    },
+    borderRadius: {
+      group: GROUPS.basic,
+      label: "Border Radius",
+      description: "The border radius of the bar",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      defaultValue: 10,
+      min: 0,
+      max: 100,
+      step: 1,
+      precision: 1,
+      editable: true,
+      required: true
+    },
+    borderWidth: {
+      group: GROUPS.basic,
+      label: "Border Width",
+      description: "The width of the border that surrounds the bar.",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      defaultValue: 1,
+      min: 0,
+      max: 15,
+      step: 1,
+      precision: 1,
+      editable: true,
+      required: true
+    },
+    borderColor: {
+      group: GROUPS.basic,
+      label: "Border Color",
+      description: "Custom color for border of the entire bar",
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      defaultValue: null,
+      editable: true,
+      required: true
+    },
+    animationType: {
+      group: GROUPS.basic,
+      label: "Animation Type",
+      description: "The type of animation that occurs when the bar is filled(Default is Spring)",
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "spring",
+      options: ["decay", "timing", "spring"],
+      editable: true,
+      required: true
+    }
+  },
+  layout: {
+    width: 200,
+    height: 20
+  }
+}];

package/lib/module/mappings/ProgressCircle.js

@@ -0,0 +1,109 @@
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Progress Circle",
+  tag: "ProgressCircle",
+  description: "A circle used to show completed progress",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Status_Progress.png",
+  supports_list_render: false,
+  props: {
+    progress: {
+      group: GROUPS.data,
+      label: "Progress",
+      description: "The amount of progress to display. A number 0-1.",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      defaultValue: 0.5,
+      min: 0,
+      max: 1,
+      step: 0.01,
+      precision: 2,
+      editable: true,
+      required: true
+    },
+    color: {
+      group: GROUPS.basic,
+      label: "Color",
+      description: "Color for the progress shown",
+      editable: true,
+      defaultValue: "primary",
+      required: true,
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME
+    },
+    unfilledColor: {
+      group: GROUPS.basic,
+      label: "Unfilled Color",
+      description: "The color of the unfilled portion of the progress bar(eg. if at 50% then this is the color of the other 50%)",
+      editable: true,
+      defaultValue: null,
+      required: true,
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME
+    },
+    size: {
+      group: GROUPS.basic,
+      label: "Size",
+      description: "The size of the circle",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      defaultValue: 100,
+      min: 0,
+      max: 300,
+      step: 1,
+      precision: 1,
+      editable: true,
+      required: true
+    },
+    showsText: {
+      group: GROUPS.basic,
+      label: "Show Progress Text",
+      description: "Shows progress in the middle of the circle",
+      formType: FORM_TYPES.boolean,
+      propType: PROP_TYPES.BOOLEAN,
+      defaultValue: true,
+      editable: true,
+      required: true
+    },
+    textStyle: {
+      group: GROUPS.basic,
+      label: "Text Style",
+      description: "Text Style of the inner circle",
+      editable: true,
+      required: true,
+      formType: FORM_TYPES.typeStyle,
+      propType: PROP_TYPES.THEME,
+      defaultValue: null
+    },
+    thickness: {
+      group: GROUPS.basic,
+      label: "Thickness",
+      description: "Thickness of the inner circle",
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      defaultValue: 1,
+      min: 0,
+      max: 15,
+      step: 1,
+      precision: 1,
+      editable: true,
+      required: true
+    },
+    strokeCap: {
+      group: GROUPS.basic,
+      label: "Stroke Cap",
+      description: "The style of the stroke",
+      formType: FORM_TYPES.flatArray,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "butt",
+      options: ["butt", "square", "round"],
+      editable: true,
+      required: true
+    }
+  },
+  layout: {
+    width: 250,
+    height: 250
+  }
+};

package/lib/module/mappings/RadioButton.js

@@ -0,0 +1,51 @@
+import { GROUPS, COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createIconProp, createTextProp, Triggers, BLOCK_STYLES_SECTIONS } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Radio Button",
+  tag: "RadioButton",
+  category: COMPONENT_TYPES.control,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  triggers: [Triggers.OnPress],
+  props: {
+    value: createTextProp({
+      label: "Value",
+      description: "Value of the radio button",
+      defaultValue: null,
+      required: true
+    }),
+    color: createColorProp({
+      group: GROUPS.basic,
+      description: "Color for the button",
+      defaultValue: "primary"
+    }),
+    unselectedColor: createColorProp({
+      group: GROUPS.basic,
+      label: "Unselected Color",
+      description: "Unselected Color for the button",
+      defaultValue: "primary"
+    }),
+    disabled: createBoolProp({
+      label: "Disabled",
+      description: "Whether radio button is disabled"
+    }),
+    size: createNumberProp({
+      group: GROUPS.basic,
+      label: "Size",
+      description: "Specifies the size of the button",
+      defaultValue: 24,
+      min: 16,
+      max: 128,
+      step: 1,
+      precision: 0
+    }),
+    selectedIcon: createIconProp({
+      label: "Selected Icon",
+      description: "Icon to show when the radio button is selected",
+      defaultValue: "MaterialIcons/radio-button-checked"
+    }),
+    unselectedIcon: createIconProp({
+      label: "Unselected Icon",
+      description: "Icon to show when the radio button is unselected",
+      defaultValue: "MaterialIcons/radio-button-unchecked"
+    })
+  }
+};

package/lib/module/mappings/RadioButtonGroup.js

@@ -0,0 +1,17 @@
+import { COMPONENT_TYPES, createFieldNameProp, createDirectionProp, Triggers, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Radio Button Group",
+  tag: "RadioButtonGroup",
+  category: COMPONENT_TYPES.control,
+  stylesPanelSections: [StylesPanelSections.Margins],
+  layout: {},
+  triggers: [Triggers.OnValueChange],
+  props: {
+    direction: createDirectionProp(),
+    fieldName: createFieldNameProp({
+      handlerPropName: "onValueChange",
+      valuePropName: "value",
+      defaultValue: "radioButtonGroupValue"
+    })
+  }
+};

package/lib/module/mappings/RadioButtonRow.js

@@ -0,0 +1,38 @@
+import { createTextProp, createTextEnumProp, COMPONENT_TYPES, createColorProp, GROUPS, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Radio Button Row",
+  tag: "RadioButtonRow",
+  category: COMPONENT_TYPES.control,
+  stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.Margins, StylesPanelSections.Effects],
+  layout: {},
+  props: {
+    label: createTextProp({
+      label: "Label",
+      description: "Label to show with the radio button",
+      required: true,
+      defaultValue: "First Option"
+    }),
+    direction: createTextEnumProp({
+      label: "Direction",
+      description: "Whether the checkbox will appear on the left or on the right",
+      options: ["row", "row-reverse"]
+    }),
+    value: createTextProp({
+      label: "Value",
+      description: "Value of the radio button",
+      defaultValue: null,
+      required: true
+    }),
+    color: createColorProp({
+      group: GROUPS.basic,
+      description: "Color for the button",
+      defaultValue: "primary"
+    }),
+    unselectedColor: createColorProp({
+      group: GROUPS.basic,
+      label: "Unselected Color",
+      description: "Unselected Color for the button",
+      defaultValue: "primary"
+    })
+  }
+};

package/lib/module/mappings/RowBodyIcon.js

@@ -0,0 +1,72 @@
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Row Single Line Body Icon",
+  tag: "RowBodyIcon",
+  description: "A row with left aligned body text and a right aligned icon",
+  category: COMPONENT_TYPES.row,
+  preview_image_url: "{CLOUDINARY_URL}/Row_SingleLine_BodyIcon.png",
+  supports_list_render: true,
+  props: {
+    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
+    },
+    icon: {
+      group: GROUPS.basic,
+      label: "Icon",
+      description: "Icon to display",
+      formType: FORM_TYPES.icon,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    }
+  },
+  layout: {}
+}, {
+  name: "Row Double Line Body Icon",
+  tag: "RowBodyIcon",
+  description: "A row with left aligned body text and subtitle text and a right aligned icon",
+  category: COMPONENT_TYPES.row,
+  preview_image_url: "{CLOUDINARY_URL}/Row_DoubleLine_BodyIcon.png",
+  supports_list_render: true,
+  props: {
+    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 to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "San Diego",
+      editable: true,
+      required: false
+    },
+    icon: {
+      group: GROUPS.basic,
+      label: "Icon",
+      description: "Icon to display",
+      formType: FORM_TYPES.icon,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    }
+  },
+  layout: {}
+}];

package/lib/module/mappings/RowHeadlineImageCaption.js

@@ -0,0 +1,162 @@
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS } from "@draftbit/types";
+export const SEED_DATA = [{
+  name: "Row Single Line Headline Caption",
+  tag: "RowHeadlineImageCaption",
+  description: "A row with left aligned headline text and right aligned caption text",
+  category: COMPONENT_TYPES.row,
+  preview_image_url: "{CLOUDINARY_URL}/Row_SingleLine_HeadlineCaption.png",
+  supports_list_render: true,
+  props: {
+    title: {
+      group: GROUPS.data,
+      label: "Title",
+      description: "Headline text to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "Beautiful West Coast Villa",
+      editable: true,
+      required: false
+    },
+    caption: {
+      group: GROUPS.data,
+      label: "Caption",
+      description: "Caption text to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "$100",
+      editable: true,
+      required: false
+    }
+  },
+  layout: {}
+}, {
+  name: "Row Single Line Headline Image Caption",
+  tag: "RowHeadlineImageCaption",
+  description: "A row with left aligned image and headline text and right aligned caption text",
+  category: COMPONENT_TYPES.row,
+  preview_image_url: "{CLOUDINARY_URL}/Row_SingleLine_HeadlineImageCaption.png",
+  supports_list_render: true,
+  props: {
+    title: {
+      group: GROUPS.data,
+      label: "Title",
+      description: "Headline text to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "Beautiful West Coast Villa",
+      editable: true,
+      required: false
+    },
+    caption: {
+      group: GROUPS.data,
+      label: "Caption",
+      description: "Caption text to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "$100",
+      editable: true,
+      required: false
+    },
+    image: {
+      group: GROUPS.data,
+      label: "Image",
+      description: "Image to display",
+      formType: FORM_TYPES.image,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    }
+  },
+  layout: {}
+}, {
+  name: "Row Double Line Headline Caption",
+  tag: "RowHeadlineImageCaption",
+  description: "A row with left aligned headline text and subtitle text and right aligned caption text",
+  category: COMPONENT_TYPES.row,
+  preview_image_url: "{CLOUDINARY_URL}/Row_DoubleLine_HeadlineCaption.png",
+  supports_list_render: true,
+  props: {
+    title: {
+      group: GROUPS.data,
+      label: "Title",
+      description: "Headline 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 to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "San Diego",
+      editable: true,
+      required: false
+    },
+    caption: {
+      group: GROUPS.data,
+      label: "Caption",
+      description: "Caption text to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "$100",
+      editable: true,
+      required: false
+    }
+  },
+  layout: {}
+}, {
+  name: "Row Double Line Headline Image Caption",
+  tag: "RowHeadlineImageCaption",
+  description: "A row with left aligned image, headline text, and subtitle text, and right aligned caption text",
+  category: COMPONENT_TYPES.row,
+  preview_image_url: "{CLOUDINARY_URL}/Row_DoubleLine_HeadlineCaption.png",
+  supports_list_render: true,
+  props: {
+    title: {
+      group: GROUPS.data,
+      label: "Title",
+      description: "Headline 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 to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "San Diego",
+      editable: true,
+      required: false
+    },
+    caption: {
+      group: GROUPS.data,
+      label: "Caption",
+      description: "Caption text to display",
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "$100",
+      editable: true,
+      required: false
+    },
+    image: {
+      group: GROUPS.data,
+      label: "Image",
+      description: "Image to display",
+      formType: FORM_TYPES.image,
+      propType: PROP_TYPES.ASSET,
+      defaultValue: null,
+      editable: true,
+      required: false
+    }
+  },
+  layout: {}
+}];