@draftbit/core 46.4.4-c5d4b3.2 → 46.4.4-caab07.0

package/src/mappings/Picker.js

@@ -1,148 +1,161 @@
-import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections, } from "@draftbit/types";
+import {
+  COMPONENT_TYPES,
+  Triggers,
+  GROUPS,
+  FORM_TYPES,
+  PROP_TYPES,
+  FIELD_NAME,
+  createIconSizeProp,
+  createColorProp,
+  StylesPanelSections,
+} 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'.",
+  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: "inset",
-        options: ["inset", "outset"],
+        defaultValue: "solid",
+        options: ["solid", "underline"],
         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" }),
-        },
-        layout: {},
+      },
+      iconSize: createIconSizeProp({ defaultValue: 24 }),
+      iconColor: createColorProp({ label: "Icon Color" }),
     },
+    layout: {},
+  },
 ];

package/src/mappings/ProgressBar.js

@@ -1,101 +1,109 @@
-import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+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,
-        },
+  {
+    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,
+    },
+  },
 ];