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

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/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/src/mappings/RadioButton.ts

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

@@ -0,0 +1,24 @@
+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/src/mappings/RadioButtonRow.js

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

@@ -0,0 +1,51 @@
+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/src/mappings/RowBodyIcon.js

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

package/src/mappings/RowHeadlineImageCaption.js

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