@draftbit/core 47.0.0-eae99e.2 → 47.0.1-0e56b5.2

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

package/src/mappings/HeaderOverline.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 Overline",
+        tag: "HeaderOverline",
+        description: "A small header with an optional touchable right aligned text and icon.",
+        category: COMPONENT_TYPES.header,
+        stylesPanelSections: BLOCK_STYLES_SECTIONS,
+        preview_image_url: "{CLOUDINARY_URL}/Header_OverlineIconText.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/HeaderOverline.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 Overline",
+    tag: "HeaderOverline",
+    description:
+      "A small header with an optional touchable right aligned text and icon.",
+    category: COMPONENT_TYPES.header,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    preview_image_url: "{CLOUDINARY_URL}/Header_OverlineIconText.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/Pressable.js

@@ -0,0 +1,52 @@
+import { COMPONENT_TYPES, createActionProp, Triggers, createNumberProp, StylesPanelSections, GROUPS, } from "@draftbit/types";
+const SEED_DATA_PROPS = {
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Borders,
+    ],
+    layout: {},
+    triggers: [Triggers.OnPress, Triggers.OnLongPress],
+    props: {
+        onPress: createActionProp(),
+        onLongPress: createActionProp(),
+        activeOpacity: createNumberProp({
+            label: "Active Opacity",
+            description: "The opacity when the button is pressed.",
+            defaultValue: 0.8,
+            group: GROUPS.basic,
+        }),
+        disabledOpacity: createNumberProp({
+            label: "Disabled Opacity",
+            description: "The opacity when the button is disabled.",
+            defaultValue: 0.8,
+            group: GROUPS.basic,
+        }),
+        delayLongPress: createNumberProp({
+            label: "Delay Long Press",
+            description: "Duration (in milliseconds) from onPressIn before onLongPress is called.",
+            group: GROUPS.basic,
+        }),
+        hitSlop: createNumberProp({
+            label: "Hit Slop",
+            description: "Sets additional distance outside of element in which a press can be detected.",
+            group: GROUPS.basic,
+        }),
+    },
+};
+export const SEED_DATA = [
+    {
+        name: "Touchable",
+        tag: "Touchable",
+        description: "An interactive view with no styles",
+        category: COMPONENT_TYPES.button,
+        ...SEED_DATA_PROPS,
+    },
+    {
+        name: "Pressable",
+        tag: "Pressable",
+        description: "An interactive view with no styles",
+        category: COMPONENT_TYPES.deprecated,
+        ...SEED_DATA_PROPS,
+    },
+];

package/src/mappings/Pressable.ts

@@ -0,0 +1,63 @@
+import {
+  COMPONENT_TYPES,
+  createActionProp,
+  Triggers,
+  createNumberProp,
+  StylesPanelSections,
+  GROUPS,
+} from "@draftbit/types";
+
+const SEED_DATA_PROPS = {
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Borders,
+  ],
+  layout: {},
+  triggers: [Triggers.OnPress, Triggers.OnLongPress],
+  props: {
+    onPress: createActionProp(),
+    onLongPress: createActionProp(),
+    activeOpacity: createNumberProp({
+      label: "Active Opacity",
+      description: "The opacity when the button is pressed.",
+      defaultValue: 0.8,
+      group: GROUPS.basic,
+    }),
+    disabledOpacity: createNumberProp({
+      label: "Disabled Opacity",
+      description: "The opacity when the button is disabled.",
+      defaultValue: 0.8,
+      group: GROUPS.basic,
+    }),
+    delayLongPress: createNumberProp({
+      label: "Delay Long Press",
+      description:
+        "Duration (in milliseconds) from onPressIn before onLongPress is called.",
+      group: GROUPS.basic,
+    }),
+    hitSlop: createNumberProp({
+      label: "Hit Slop",
+      description:
+        "Sets additional distance outside of element in which a press can be detected.",
+      group: GROUPS.basic,
+    }),
+  },
+};
+
+export const SEED_DATA = [
+  {
+    name: "Touchable",
+    tag: "Touchable",
+    description: "An interactive view with no styles",
+    category: COMPONENT_TYPES.button,
+    ...SEED_DATA_PROPS,
+  },
+  {
+    name: "Pressable",
+    tag: "Pressable",
+    description: "An interactive view with no styles",
+    category: COMPONENT_TYPES.deprecated,
+    ...SEED_DATA_PROPS,
+  },
+];

package/src/mappings/ProgressBar.js

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