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

package/src/mappings/CircleImage.ts

@@ -0,0 +1,33 @@
+import {
+  GROUPS,
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  PROP_TYPES,
+  createImageProp,
+  BLOCK_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Circle Image",
+  tag: "CircleImage",
+  description: "A circle image",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  props: {
+    source: createImageProp(),
+    size: {
+      group: GROUPS.basic,
+      label: "Size",
+      description: "Size of your circle image",
+      editable: true,
+      required: false,
+      formType: FORM_TYPES.number,
+      propType: PROP_TYPES.NUMBER,
+      min: 0,
+      max: 300,
+      precision: 0,
+      step: 1,
+      defaultValue: 60,
+    },
+  },
+};

package/src/mappings/Container.js

@@ -0,0 +1,30 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createElevationType, createImageProp, createResizeModeProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Container",
+    tag: "Container",
+    description: "A container component with gutter padding",
+    category: COMPONENT_TYPES.deprecated,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        height: 250,
+    },
+    props: {
+        useThemeGutterPadding: {
+            group: GROUPS.basic,
+            label: "Use gutter padding",
+            description: "When true, uses the theme gutter spacing as the container's horizontal padding",
+            formType: FORM_TYPES.boolean,
+            propType: PROP_TYPES.BOOLEAN,
+            defaultValue: false,
+            editable: false,
+            required: true,
+        },
+        backgroundImage: createImageProp({
+            label: "Background Image",
+            description: "Apply a custom background image",
+            defaultValue: null,
+        }),
+        backgroundImageResizeMode: createResizeModeProp(),
+        elevation: createElevationType(0),
+    },
+};

package/src/mappings/Container.ts

@@ -0,0 +1,41 @@
+import {
+  GROUPS,
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  PROP_TYPES,
+  createElevationType,
+  createImageProp,
+  createResizeModeProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Container",
+  tag: "Container",
+  description: "A container component with gutter padding",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+  layout: {
+    height: 250,
+  },
+  props: {
+    useThemeGutterPadding: {
+      group: GROUPS.basic,
+      label: "Use gutter padding",
+      description:
+        "When true, uses the theme gutter spacing as the container's horizontal padding",
+      formType: FORM_TYPES.boolean,
+      propType: PROP_TYPES.BOOLEAN,
+      defaultValue: false,
+      editable: false,
+      required: true,
+    },
+    backgroundImage: createImageProp({
+      label: "Background Image",
+      description: "Apply a custom background image",
+      defaultValue: null,
+    }),
+    backgroundImageResizeMode: createResizeModeProp(),
+    elevation: createElevationType(0),
+  },
+};

package/src/mappings/DatePicker.js

@@ -1,15 +1,5 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
-    label: {
-        label: "Label",
-        description: "The label to be displayed on the picker",
-        formType: FORM_TYPES.string,
-        propType: PROP_TYPES.STRING,
-        defaultValue: "Date",
-        editable: true,
-        required: true,
-        group: GROUPS.data,
-    },
     mode: {
         label: "Mode",
         description: "Choose between date, time and datetime",
@@ -21,6 +11,28 @@ const SEED_DATA_PROPS = {
         options: ["date", "time", "datetime"],
         group: GROUPS.basic,
     },
+    label: {
+        label: "Label",
+        description: "The label to be displayed on the picker",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "Date",
+        editable: true,
+        required: true,
+        group: GROUPS.data,
+    },
+    labelSize: createNumberProp({
+        label: "Label Size",
+    }),
+    labelColor: createColorProp({
+        label: "Label Color",
+    }),
+    borderColor: createColorProp({
+        label: "Border Color",
+    }),
+    borderColorActive: createColorProp({
+        label: "Border Color",
+    }),
     format: {
         label: "Format",
         description: "Create an output format for the date.",
@@ -139,6 +151,13 @@ export const SEED_DATA = [
         category: COMPONENT_TYPES.input,
         layout: null,
         triggers: [Triggers.OnDateChange],
+        StylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Background,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+        ],
         props: {
             ...SEED_DATA_PROPS,
             type: {

package/src/mappings/DatePicker.ts

@@ -5,19 +5,12 @@ import {
   FIELD_NAME,
   GROUPS,
   Triggers,
+  StylesPanelSections,
+  createNumberProp,
+  createColorProp,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
-  label: {
-    label: "Label",
-    description: "The label to be displayed on the picker",
-    formType: FORM_TYPES.string,
-    propType: PROP_TYPES.STRING,
-    defaultValue: "Date",
-    editable: true,
-    required: true,
-    group: GROUPS.data,
-  },
   mode: {
     label: "Mode",
     description: "Choose between date, time and datetime",
@@ -29,6 +22,28 @@ const SEED_DATA_PROPS = {
     options: ["date", "time", "datetime"],
     group: GROUPS.basic,
   },
+  label: {
+    label: "Label",
+    description: "The label to be displayed on the picker",
+    formType: FORM_TYPES.string,
+    propType: PROP_TYPES.STRING,
+    defaultValue: "Date",
+    editable: true,
+    required: true,
+    group: GROUPS.data,
+  },
+  labelSize: createNumberProp({
+    label: "Label Size",
+  }),
+  labelColor: createColorProp({
+    label: "Label Color",
+  }),
+  borderColor: createColorProp({
+    label: "Border Color",
+  }),
+  borderColorActive: createColorProp({
+    label: "Border Color",
+  }),
   format: {
     label: "Format",
     description: "Create an output format for the date.",
@@ -150,6 +165,13 @@ export const SEED_DATA = [
     category: COMPONENT_TYPES.input,
     layout: null,
     triggers: [Triggers.OnDateChange],
+    StylesPanelSections: [
+      StylesPanelSections.Typography,
+      StylesPanelSections.Background,
+      StylesPanelSections.Size,
+      StylesPanelSections.MarginsAndPaddings,
+      StylesPanelSections.Position,
+    ],
     props: {
       ...SEED_DATA_PROPS,
       type: {

package/src/mappings/Divider.js

@@ -0,0 +1,27 @@
+import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "Divider",
+        tag: "Divider",
+        category: COMPONENT_TYPES.layout,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        description: "A horizontal line used to divide content",
+        preview_image_url: "{CLOUDINARY_URL}/Divider.png",
+        supports_list_render: false,
+        props: {
+            color: {
+                group: GROUPS.basic,
+                label: "Color",
+                description: "The color of the divider",
+                editable: true,
+                required: false,
+                defaultValue: "divider",
+                formType: FORM_TYPES.color,
+                propType: PROP_TYPES.THEME,
+            },
+        },
+        layout: {
+            height: 1,
+        },
+    },
+];

package/src/mappings/Divider.ts

@@ -0,0 +1,34 @@
+import {
+  GROUPS,
+  FORM_TYPES,
+  PROP_TYPES,
+  COMPONENT_TYPES,
+  BLOCK_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+export const SEED_DATA = [
+  {
+    name: "Divider",
+    tag: "Divider",
+    category: COMPONENT_TYPES.layout,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    description: "A horizontal line used to divide content",
+    preview_image_url: "{CLOUDINARY_URL}/Divider.png",
+    supports_list_render: false,
+    props: {
+      color: {
+        group: GROUPS.basic,
+        label: "Color",
+        description: "The color of the divider",
+        editable: true,
+        required: false,
+        defaultValue: "divider",
+        formType: FORM_TYPES.color,
+        propType: PROP_TYPES.THEME,
+      },
+    },
+    layout: {
+      height: 1,
+    },
+  },
+];

package/src/mappings/FAB.js

@@ -0,0 +1,37 @@
+import { COMPONENT_TYPES, createIconProp, createColorProp, GROUPS, createBoolProp, createIconSizeProp, createActionProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "FAB",
+    tag: "FAB",
+    category: COMPONENT_TYPES.deprecated,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    description: "A mini round icon FAB",
+    layout: {},
+    triggers: [Triggers.OnPress],
+    props: {
+        onPress: createActionProp(),
+        disabled: createBoolProp({
+            label: "Disabled",
+            group: GROUPS.basic,
+        }),
+        loading: createBoolProp({
+            label: "Loading",
+            group: GROUPS.basic,
+        }),
+        iconName: createIconProp({
+            label: "Icon",
+            defaultValue: null,
+            group: GROUPS.basic,
+        }),
+        iconColor: createColorProp({
+            label: "Icon color",
+            defaultValue: null,
+            group: GROUPS.basic,
+        }),
+        bgColor: createColorProp({
+            label: "Background color",
+            defaultValue: null,
+            group: GROUPS.basic,
+        }),
+        size: createIconSizeProp(),
+    },
+};

package/src/mappings/FAB.ts

@@ -0,0 +1,48 @@
+import {
+  COMPONENT_TYPES,
+  createIconProp,
+  createColorProp,
+  GROUPS,
+  createBoolProp,
+  createIconSizeProp,
+  createActionProp,
+  Triggers,
+  BLOCK_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "FAB",
+  tag: "FAB",
+  category: COMPONENT_TYPES.deprecated,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  description: "A mini round icon FAB",
+  layout: {},
+  triggers: [Triggers.OnPress],
+  props: {
+    onPress: createActionProp(),
+    disabled: createBoolProp({
+      label: "Disabled",
+      group: GROUPS.basic,
+    }),
+    loading: createBoolProp({
+      label: "Loading",
+      group: GROUPS.basic,
+    }),
+    iconName: createIconProp({
+      label: "Icon",
+      defaultValue: null,
+      group: GROUPS.basic,
+    }),
+    iconColor: createColorProp({
+      label: "Icon color",
+      defaultValue: null,
+      group: GROUPS.basic,
+    }),
+    bgColor: createColorProp({
+      label: "Background color",
+      defaultValue: null,
+      group: GROUPS.basic,
+    }),
+    size: createIconSizeProp(),
+  },
+};

package/src/mappings/FieldSearchBarFull.js

@@ -0,0 +1,50 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "Search Bar",
+        tag: "FieldSearchBarFull",
+        description: "A search bar with accompanying search icon and clear button.",
+        category: COMPONENT_TYPES.deprecated,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        preview_image_url: "{CLOUDINARY_URL}/Field_SearchBar_Full.png",
+        supports_list_render: false,
+        triggers: [Triggers.OnChange],
+        props: {
+            icon: {
+                group: GROUPS.basic,
+                label: "Icon",
+                description: "Left icon to display",
+                formType: FORM_TYPES.icon,
+                propType: PROP_TYPES.ASSET,
+                defaultValue: null,
+                editable: true,
+                required: false,
+            },
+            placeholder: {
+                group: GROUPS.basic,
+                label: "Placeholder",
+                description: "Input placeholder text",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "Search for...",
+                editable: true,
+                required: false,
+            },
+            onSubmit: {
+                group: GROUPS.basic,
+                label: "Submit action",
+                description: "Action to execute on submission",
+                editable: true,
+                required: false,
+                formType: FORM_TYPES.action,
+                propType: PROP_TYPES.STRING,
+                defaultValue: null,
+            },
+            fieldName: {
+                ...FIELD_NAME,
+                defaultValue: "searchBarValue",
+            },
+        },
+        layout: {},
+    },
+];

package/src/mappings/FieldSearchBarFull.ts

@@ -0,0 +1,59 @@
+import {
+  GROUPS,
+  COMPONENT_TYPES,
+  FORM_TYPES,
+  PROP_TYPES,
+  FIELD_NAME,
+  Triggers,
+  BLOCK_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+export const SEED_DATA = [
+  {
+    name: "Search Bar",
+    tag: "FieldSearchBarFull",
+    description: "A search bar with accompanying search icon and clear button.",
+    category: COMPONENT_TYPES.deprecated,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    preview_image_url: "{CLOUDINARY_URL}/Field_SearchBar_Full.png",
+    supports_list_render: false,
+    triggers: [Triggers.OnChange], // TODO Triggers.OnSubmit for multiple triggers
+    props: {
+      icon: {
+        group: GROUPS.basic,
+        label: "Icon",
+        description: "Left icon to display",
+        formType: FORM_TYPES.icon,
+        propType: PROP_TYPES.ASSET,
+        defaultValue: null,
+        editable: true,
+        required: false,
+      },
+      placeholder: {
+        group: GROUPS.basic,
+        label: "Placeholder",
+        description: "Input placeholder text",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "Search for...",
+        editable: true,
+        required: false,
+      },
+      onSubmit: {
+        group: GROUPS.basic,
+        label: "Submit action",
+        description: "Action to execute on submission",
+        editable: true,
+        required: false,
+        formType: FORM_TYPES.action,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+      },
+      fieldName: {
+        ...FIELD_NAME,
+        defaultValue: "searchBarValue",
+      },
+    },
+    layout: {},
+  },
+];

package/src/mappings/HeaderLarge.js

@@ -0,0 +1,29 @@
+import { COMPONENT_TYPES, createIconProp, createTextProp, createActionProp, Triggers, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "Header Large",
+        tag: "HeaderLarge",
+        description: "A large header with an optional touchable right aligned text and icon.",
+        category: COMPONENT_TYPES.header,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        layout: {},
+        triggers: [Triggers.OnPress],
+        props: {
+            onPress: createActionProp(),
+            title: createTextProp({
+                label: "Title",
+                description: "Text to display",
+                defaultValue: "Title",
+            }),
+            buttonText: createTextProp({
+                label: "Button text",
+                description: "Right aligned button text to display",
+                defaultValue: "See All",
+            }),
+            icon: createIconProp({
+                defaultValue: null,
+                required: false,
+            }),
+        },
+    },
+];

package/src/mappings/HeaderLarge.ts

@@ -0,0 +1,38 @@
+import {
+  COMPONENT_TYPES,
+  createIconProp,
+  createTextProp,
+  createActionProp,
+  Triggers,
+  BLOCK_STYLES_SECTIONS,
+} from "@draftbit/types";
+
+export const SEED_DATA = [
+  {
+    name: "Header Large",
+    tag: "HeaderLarge",
+    description:
+      "A large header with an optional touchable right aligned text and icon.",
+    category: COMPONENT_TYPES.header,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    layout: {},
+    triggers: [Triggers.OnPress],
+    props: {
+      onPress: createActionProp(),
+      title: createTextProp({
+        label: "Title",
+        description: "Text to display",
+        defaultValue: "Title",
+      }),
+      buttonText: createTextProp({
+        label: "Button text",
+        description: "Right aligned button text to display",
+        defaultValue: "See All",
+      }),
+      icon: createIconProp({
+        defaultValue: null,
+        required: false,
+      }),
+    },
+  },
+];

package/src/mappings/HeaderMedium.js

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