@draftbit/core 46.1.4 → 46.2.1-328765.5

package/src/mappings/ProgressIndicator.js

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

@@ -3,6 +3,7 @@ import {
   FORM_TYPES,
   GROUPS,
   PROP_TYPES,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -10,6 +11,7 @@ export const SEED_DATA = {
   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: {},

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.input,
+    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

@@ -7,12 +7,14 @@ import {
   createIconProp,
   createTextProp,
   Triggers,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Radio Button",
   tag: "RadioButton",
   category: COMPONENT_TYPES.input,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
   triggers: [Triggers.OnPress],
   props: {
     value: createTextProp({

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.input,
+    stylesPanelSections: [StylesPanelSections.Margins],
+    layout: {},
+    triggers: [Triggers.OnValueChange],
+    props: {
+        direction: createDirectionProp(),
+        fieldName: createFieldNameProp({
+            handlerPropName: "onValueChange",
+            valuePropName: "value",
+            defaultValue: "radioButtonGroupValue",
+        }),
+    },
+};

package/src/mappings/RadioButtonGroup.ts

@@ -3,12 +3,14 @@ import {
   createFieldNameProp,
   createDirectionProp,
   Triggers,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Radio Button Group",
   tag: "RadioButtonGroup",
   category: COMPONENT_TYPES.input,
+  stylesPanelSections: [StylesPanelSections.Margins],
   layout: {},
   triggers: [Triggers.OnValueChange],
   props: {

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.input,
+    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

@@ -4,12 +4,18 @@ import {
   COMPONENT_TYPES,
   createColorProp,
   GROUPS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
   name: "Radio Button Row",
   tag: "RadioButtonRow",
   category: COMPONENT_TYPES.input,
+  stylesPanelSections: [
+    StylesPanelSections.Typography,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+  ],
   layout: {},
   props: {
     label: createTextProp({

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