@draftbit/core 47.0.0-eae99e.2 → 47.0.1-54c307.2

package/src/mappings/RowHeadlineImageCaption.ts

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

package/src/mappings/RowHeadlineImageIcon.js

@@ -0,0 +1,99 @@
+import { COMPONENT_TYPES, createIconProp, createTextProp, createImageProp, createStaticBoolProp, } from "@draftbit/types";
+const SEED_DATA_PROPS = {
+    title: createTextProp({
+        label: "Title",
+        description: "Headline text to display",
+    }),
+    icon: createIconProp({
+        defaultValue: null,
+    }),
+};
+const IMAGE_PROP = createImageProp();
+const MULTILINE_PROP = createStaticBoolProp({
+    defaultValue: true,
+    editable: false,
+});
+const SUBTITLE_PROP = createTextProp({
+    label: "Subtitle",
+    description: "Subtitle text to display",
+    defaultValue: "San Diego",
+});
+export const SEED_DATA = [
+    {
+        name: "Row Single Line Headline Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned headline text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+        },
+    },
+    {
+        name: "Row Single Line Headline Icon Image",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned image and headline text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            image: IMAGE_PROP,
+        },
+    },
+    {
+        name: "Row Double Line Headline Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned headline text and subtitle text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            subtitle: SUBTITLE_PROP,
+        },
+    },
+    {
+        name: "Row Double Line Headline Image Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned headline text and subtitle text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            image: IMAGE_PROP,
+            subtitle: SUBTITLE_PROP,
+        },
+    },
+    {
+        name: "Row Multiline Headline Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned headline text and multiline subtitle text and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            multilineSubtitle: MULTILINE_PROP,
+            subtitle: createTextProp({
+                label: "Subtitle",
+                description: "Subtitle text to display",
+                defaultValue: "San Diego is a city on the Pacific coast of California known for its beaches, parks and warm climate",
+            }),
+        },
+    },
+    {
+        name: "Row Multiline Headline Image Icon",
+        tag: "RowHeadlineImageIcon",
+        description: "A row with left aligned image, headline text, and multiline subtitle text, and a right aligned icon",
+        category: COMPONENT_TYPES.row,
+        layout: {},
+        props: {
+            ...SEED_DATA_PROPS,
+            image: IMAGE_PROP,
+            multilineSubtitle: MULTILINE_PROP,
+            subtitle: createTextProp({
+                label: "Subtitle",
+                description: "Subtitle text to display",
+                defaultValue: "San Diego is a city on the Pacific coast of California known for its beaches, parks and warm climate",
+            }),
+        },
+    },
+];

package/src/mappings/RowHeadlineImageIcon.ts

@@ -0,0 +1,116 @@
+import {
+  COMPONENT_TYPES,
+  createIconProp,
+  createTextProp,
+  createImageProp,
+  createStaticBoolProp,
+} from "@draftbit/types";
+
+const SEED_DATA_PROPS = {
+  title: createTextProp({
+    label: "Title",
+    description: "Headline text to display",
+  }),
+  icon: createIconProp({
+    defaultValue: null,
+  }),
+};
+
+const IMAGE_PROP = createImageProp();
+const MULTILINE_PROP = createStaticBoolProp({
+  defaultValue: true,
+  editable: false,
+});
+const SUBTITLE_PROP = createTextProp({
+  label: "Subtitle",
+  description: "Subtitle text to display",
+  defaultValue: "San Diego",
+});
+
+export const SEED_DATA = [
+  {
+    name: "Row Single Line Headline Icon",
+    tag: "RowHeadlineImageIcon",
+    description:
+      "A row with left aligned headline text and a right aligned icon",
+    category: COMPONENT_TYPES.row,
+    layout: {},
+    props: {
+      ...SEED_DATA_PROPS,
+    },
+  },
+  {
+    name: "Row Single Line Headline Icon Image",
+    tag: "RowHeadlineImageIcon",
+    description:
+      "A row with left aligned image and headline text and a right aligned icon",
+    category: COMPONENT_TYPES.row,
+    layout: {},
+    props: {
+      ...SEED_DATA_PROPS,
+      image: IMAGE_PROP,
+    },
+  },
+  {
+    name: "Row Double Line Headline Icon",
+    tag: "RowHeadlineImageIcon",
+    description:
+      "A row with left aligned headline text and subtitle text and a right aligned icon",
+    category: COMPONENT_TYPES.row,
+    layout: {},
+    props: {
+      ...SEED_DATA_PROPS,
+      subtitle: SUBTITLE_PROP,
+    },
+  },
+  {
+    name: "Row Double Line Headline Image Icon",
+    tag: "RowHeadlineImageIcon",
+    description:
+      "A row with left aligned headline text and subtitle text and a right aligned icon",
+    category: COMPONENT_TYPES.row,
+    layout: {},
+    props: {
+      ...SEED_DATA_PROPS,
+      image: IMAGE_PROP,
+      subtitle: SUBTITLE_PROP,
+    },
+  },
+  {
+    name: "Row Multiline Headline Icon",
+    tag: "RowHeadlineImageIcon",
+    description:
+      "A row with left aligned headline text and multiline subtitle text and a right aligned icon",
+    category: COMPONENT_TYPES.row,
+    layout: {},
+    props: {
+      ...SEED_DATA_PROPS,
+      multilineSubtitle: MULTILINE_PROP,
+      subtitle: createTextProp({
+        label: "Subtitle",
+        description: "Subtitle text to display",
+        defaultValue:
+          "San Diego is a city on the Pacific coast of California known for its beaches, parks and warm climate",
+      }),
+    },
+  },
+  {
+    name: "Row Multiline Headline Image Icon",
+    tag: "RowHeadlineImageIcon",
+    description:
+      "A row with left aligned image, headline text, and multiline subtitle text, and a right aligned icon",
+    category: COMPONENT_TYPES.row,
+    layout: {},
+    props: {
+      ...SEED_DATA_PROPS,
+      image: IMAGE_PROP,
+      multilineSubtitle: MULTILINE_PROP,
+      subtitle: createTextProp({
+        label: "Subtitle",
+        description: "Subtitle text to display",
+        defaultValue:
+          "San Diego is a city on the Pacific coast of California known for its beaches, parks and warm climate",
+      }),
+    },
+  },
+];

package/src/mappings/Stepper.js

@@ -1,11 +1,14 @@
-import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+import { COMPONENT_TYPES, createIconSizeProp, createColorProp, createFieldNameProp, createStaticNumberProp, Triggers, BLOCK_STYLES_SECTIONS, StylesPanelSections, } from "@draftbit/types";
 export const SEED_DATA = [
     {
         name: "Stepper",
         tag: "Stepper",
         description: "A component used to control the quantity of something",
         category: COMPONENT_TYPES.control,
-        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            ...BLOCK_STYLES_SECTIONS,
+        ],
         layout: {},
         triggers: [Triggers.OnChange],
         props: {

package/src/mappings/Stepper.ts

@@ -6,6 +6,7 @@ import {
   createStaticNumberProp,
   Triggers,
   BLOCK_STYLES_SECTIONS,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -14,7 +15,10 @@ export const SEED_DATA = [
     tag: "Stepper",
     description: "A component used to control the quantity of something",
     category: COMPONENT_TYPES.control,
-    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    stylesPanelSections: [
+      StylesPanelSections.Typography,
+      ...BLOCK_STYLES_SECTIONS,
+    ],
     layout: {},
     triggers: [Triggers.OnChange],
     props: {

package/src/mappings/TextArea.js

@@ -1,4 +1,4 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, createDisabledProp, } from "@draftbit/types";
 export const SEED_DATA = {
     name: "Text Area",
     tag: "TextInput",
@@ -59,6 +59,17 @@ export const SEED_DATA = {
             formType: FORM_TYPES.boolean,
             propType: PROP_TYPES.BOOLEAN,
         },
+        blurOnSubmit: {
+            group: GROUPS.advanced,
+            label: "Blur On Submit",
+            description: "If true, the text field will blur when submitted. ",
+            editable: true,
+            required: false,
+            defaultValue: null,
+            formType: FORM_TYPES.boolean,
+            propType: PROP_TYPES.BOOLEAN,
+        },
+        disabled: createDisabledProp(),
         caretHidden: {
             group: GROUPS.advanced,
             label: "Hide Caret",
@@ -80,12 +91,12 @@ export const SEED_DATA = {
             propType: PROP_TYPES.BOOLEAN,
         },
         editable: {
-            group: GROUPS.advanced,
-            label: "Editable",
+            group: GROUPS.data,
+            label: "Editable?",
             description: "If false, the text is not editable",
             editable: true,
             required: false,
-            defaultValue: true,
+            defaultValue: null,
             formType: FORM_TYPES.boolean,
             propType: PROP_TYPES.BOOLEAN,
         },

package/src/mappings/TextArea.ts

@@ -5,6 +5,7 @@ import {
   PROP_TYPES,
   FIELD_NAME,
   Triggers,
+  createDisabledProp,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -69,6 +70,17 @@ export const SEED_DATA = {
       formType: FORM_TYPES.boolean,
       propType: PROP_TYPES.BOOLEAN,
     },
+    blurOnSubmit: {
+      group: GROUPS.advanced,
+      label: "Blur On Submit",
+      description: "If true, the text field will blur when submitted. ",
+      editable: true,
+      required: false,
+      defaultValue: null,
+      formType: FORM_TYPES.boolean,
+      propType: PROP_TYPES.BOOLEAN,
+    },
+    disabled: createDisabledProp(),
     caretHidden: {
       group: GROUPS.advanced,
       label: "Hide Caret",
@@ -91,12 +103,12 @@ export const SEED_DATA = {
       propType: PROP_TYPES.BOOLEAN,
     },
     editable: {
-      group: GROUPS.advanced,
-      label: "Editable",
+      group: GROUPS.data,
+      label: "Editable?",
       description: "If false, the text is not editable",
       editable: true,
       required: false,
-      defaultValue: true,
+      defaultValue: null,
       formType: FORM_TYPES.boolean,
       propType: PROP_TYPES.BOOLEAN,
     },

package/src/mappings/TextField.js

@@ -62,7 +62,7 @@ const SEED_DATA_PROPS = {
         propType: PROP_TYPES.BOOLEAN,
     },
     disabled: {
-        group: GROUPS.basic,
+        group: GROUPS.data,
         label: "Disabled",
         description: "Whether the input should be disabled. Will prevent input and show a greyed out state.",
         formType: FORM_TYPES.boolean,
@@ -72,12 +72,22 @@ const SEED_DATA_PROPS = {
         required: false,
     },
     editable: {
-        group: GROUPS.advanced,
-        label: "Editable",
+        group: GROUPS.data,
+        label: "Editable?",
         description: "If false, the text is not editable",
         editable: true,
         required: false,
-        defaultValue: true,
+        defaultValue: null,
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+    },
+    blurOnSubmit: {
+        group: GROUPS.advanced,
+        label: "Blur On Submit",
+        description: "If true, the text field will blur when submitted. ",
+        editable: true,
+        required: false,
+        defaultValue: null,
         formType: FORM_TYPES.boolean,
         propType: PROP_TYPES.BOOLEAN,
     },

package/src/mappings/TextField.ts

@@ -77,7 +77,7 @@ const SEED_DATA_PROPS = {
     propType: PROP_TYPES.BOOLEAN,
   },
   disabled: {
-    group: GROUPS.basic,
+    group: GROUPS.data,
     label: "Disabled",
     description:
       "Whether the input should be disabled. Will prevent input and show a greyed out state.",
@@ -88,12 +88,22 @@ const SEED_DATA_PROPS = {
     required: false,
   },
   editable: {
-    group: GROUPS.advanced,
-    label: "Editable",
+    group: GROUPS.data,
+    label: "Editable?",
     description: "If false, the text is not editable",
     editable: true,
     required: false,
-    defaultValue: true,
+    defaultValue: null,
+    formType: FORM_TYPES.boolean,
+    propType: PROP_TYPES.BOOLEAN,
+  },
+  blurOnSubmit: {
+    group: GROUPS.advanced,
+    label: "Blur On Submit",
+    description: "If true, the text field will blur when submitted. ",
+    editable: true,
+    required: false,
+    defaultValue: null,
     formType: FORM_TYPES.boolean,
     propType: PROP_TYPES.BOOLEAN,
   },

package/src/mappings/TextInput.js

@@ -1,4 +1,4 @@
-import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, StylesPanelSections, } from "@draftbit/types";
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, StylesPanelSections, createDisabledProp, } from "@draftbit/types";
 export const SEED_DATA_PROPS = {
     style: {
         group: GROUPS.basic,
@@ -150,12 +150,12 @@ export const SEED_DATA = [
                 propType: PROP_TYPES.BOOLEAN,
             },
             editable: {
-                group: GROUPS.advanced,
-                label: "Editable",
+                group: GROUPS.data,
+                label: "Editable?",
                 description: "If false, the text is not editable",
                 editable: true,
                 required: false,
-                defaultValue: true,
+                defaultValue: null,
                 formType: FORM_TYPES.boolean,
                 propType: PROP_TYPES.BOOLEAN,
             },
@@ -238,6 +238,16 @@ export const SEED_DATA = [
                 formType: FORM_TYPES.string,
                 propType: PROP_TYPES.STRING,
             },
+            blurOnSubmit: {
+                group: GROUPS.advanced,
+                label: "Blur On Submit",
+                description: "If true, the text field will blur when submitted. ",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+            },
             returnKeyType: {
                 group: GROUPS.advanced,
                 label: "Return Key Type",
@@ -317,6 +327,7 @@ export const SEED_DATA = [
                 formType: FORM_TYPES.number,
                 propType: PROP_TYPES.NUMBER,
             },
+            disabled: createDisabledProp(),
             scrollEnabled: {
                 group: GROUPS.basic,
                 label: "Scroll Enabled",

package/src/mappings/TextInput.ts

@@ -6,6 +6,7 @@ import {
   FIELD_NAME,
   Triggers,
   StylesPanelSections,
+  createDisabledProp,
 } from "@draftbit/types";
 
 export const SEED_DATA_PROPS = {
@@ -168,12 +169,12 @@ export const SEED_DATA = [
         propType: PROP_TYPES.BOOLEAN,
       },
       editable: {
-        group: GROUPS.advanced,
-        label: "Editable",
+        group: GROUPS.data,
+        label: "Editable?",
         description: "If false, the text is not editable",
         editable: true,
         required: false,
-        defaultValue: true,
+        defaultValue: null,
         formType: FORM_TYPES.boolean,
         propType: PROP_TYPES.BOOLEAN,
       },
@@ -258,6 +259,16 @@ export const SEED_DATA = [
         formType: FORM_TYPES.string,
         propType: PROP_TYPES.STRING,
       },
+      blurOnSubmit: {
+        group: GROUPS.advanced,
+        label: "Blur On Submit",
+        description: "If true, the text field will blur when submitted. ",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+      },
       returnKeyType: {
         group: GROUPS.advanced,
         label: "Return Key Type",
@@ -341,6 +352,7 @@ export const SEED_DATA = [
         formType: FORM_TYPES.number,
         propType: PROP_TYPES.NUMBER,
       },
+      disabled: createDisabledProp(),
       scrollEnabled: {
         group: GROUPS.basic,
         label: "Scroll Enabled",