@draftbit/core 47.0.0-df8093.2 → 47.0.0

package/src/mappings/HeaderMedium.ts

@@ -0,0 +1,63 @@
+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/src/mappings/HeaderOverline.ts

@@ -0,0 +1,63 @@
+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/src/mappings/ProgressBar.ts

@@ -0,0 +1,110 @@
+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/src/mappings/ProgressCircle.ts

@@ -0,0 +1,117 @@
+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/src/mappings/ProgressIndicator.ts

@@ -0,0 +1,190 @@
+import {
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  GROUPS,
+  PROP_TYPES,
+  BLOCK_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Progress Indicator",
+  tag: "ProgressIndicator",
+  description: "A component used to show current Step in a process",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  preview_image_url: "{CLOUDINARY_URL}/Control_Slider.png",
+  supports_list_render: false,
+  layout: {},
+  props: {
+    numberOfSteps: {
+      group: GROUPS.data,
+      label: "Number of Steps",
+      description: "The border radius for the thumb",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      min: 0,
+      max: 10,
+      step: 1,
+      precision: 0,
+      defaultValue: 5,
+    },
+    currentStep: {
+      group: GROUPS.data,
+      label: "Current Step",
+      description: "The step that the user is on",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      min: 0,
+      max: 10,
+      step: 1,
+      precision: 0,
+      defaultValue: 5,
+    },
+    stepIndicatorSize: {
+      group: GROUPS.basic,
+      label: "Step Size",
+      description: "The size of the step circle",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      min: 10,
+      max: 100,
+      step: 5,
+      precision: 0,
+      defaultValue: 25,
+    },
+    stepIndicatorLabelFontSize: {
+      group: GROUPS.basic,
+      label: "Step Font Size",
+      description: "The font size of the step number",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      min: 6,
+      max: 36,
+      step: 1,
+      precision: 0,
+      defaultValue: 15,
+    },
+    currentStepIndicatorLabelFontSize: {
+      group: GROUPS.basic,
+      label: "Current Step Font Size",
+      description: "The font size of the current step number",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      min: 6,
+      max: 36,
+      step: 1,
+      precision: 0,
+      defaultValue: 15,
+    },
+    unfinishedColor: {
+      group: GROUPS.basic,
+      label: "Unfinished Color",
+      description:
+        "The color of the step and divider when the step is either not the current step or not finished",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      defaultValue: null,
+    },
+    finishedColor: {
+      group: GROUPS.basic,
+      label: "Finished Color",
+      description:
+        "The color of the step and divider when the step is the current step or finished",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      defaultValue: null,
+    },
+    stepNumberUnfinishedColor: {
+      group: GROUPS.basic,
+      label: "Unfinished Number Color",
+      description: "The color of the number within the step when unfinished",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      defaultValue: null,
+    },
+    stepNumberFinishedColor: {
+      group: GROUPS.basic,
+      label: "Finished Number Color",
+      description: "The color of the number within the step when finished",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      defaultValue: null,
+    },
+    stepIndicatorCurrentColor: {
+      group: GROUPS.basic,
+      label: "Current Step Color",
+      description: "The color of current step circle",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      defaultValue: null,
+    },
+    stepIndicatorLabelCurrentColor: {
+      group: GROUPS.basic,
+      label: "Current Step Number Color",
+      description: "The color of current number within the step circle",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      defaultValue: null,
+    },
+    stepStrokeCurrentColor: {
+      group: GROUPS.basic,
+      label: "Current Step Border Color",
+      description: "The color of current border color of the step",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.color,
+      propType: PROP_TYPES.THEME,
+      defaultValue: null,
+    },
+    currentStepStrokeWidth: {
+      group: GROUPS.basic,
+      label: "Current Step Border Width",
+      description: "The width of the border for the current step",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      min: 1,
+      max: 20,
+      step: 1,
+      precision: 0,
+      defaultValue: 0,
+    },
+    currentStepIndicatorSize: {
+      group: GROUPS.basic,
+      label: "Current Step Size",
+      description: "The size of the current step circle",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      min: 10,
+      max: 100,
+      step: 5,
+      precision: 0,
+      defaultValue: null,
+    },
+  },
+};

package/src/mappings/RowBodyIcon.ts

@@ -0,0 +1,82 @@
+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: {},
+  },
+];