@draftbit/core 46.4.3 → 46.4.4-04eaf1.2

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/Elements.js

@@ -0,0 +1,135 @@
+import { BLOCK_STYLES_SECTIONS, COMPONENT_TYPES, createTextProp, FORM_TYPES, GROUPS, Triggers, } from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
+const ELEMENT_PROPS = {
+    category: COMPONENT_TYPES.element,
+    stylesPanelSections: BLOCK_STYLES_SECTIONS,
+    layout: {
+        margin: 0,
+    },
+    triggers: SEED_DATA_TRIGGERS,
+};
+const HEADING_PROPS = {
+    ...ELEMENT_PROPS,
+};
+export const SEED_DATA = [
+    {
+        name: "H1",
+        tag: "H1",
+        ...HEADING_PROPS,
+    },
+    {
+        name: "H2",
+        tag: "H2",
+        ...HEADING_PROPS,
+    },
+    {
+        name: "H3",
+        tag: "H3",
+        ...HEADING_PROPS,
+    },
+    {
+        name: "H4",
+        tag: "H4",
+        ...HEADING_PROPS,
+    },
+    {
+        name: "H5",
+        tag: "H5",
+        ...HEADING_PROPS,
+    },
+    {
+        name: "H6",
+        tag: "H6",
+        ...HEADING_PROPS,
+    },
+    {
+        name: "Anchor",
+        tag: "A",
+        ...ELEMENT_PROPS,
+        props: {
+            href: createTextProp({
+                label: "href",
+                description: "Specify the URL",
+                defaultValue: "",
+            }),
+            target: {
+                group: GROUPS.basic,
+                label: "target",
+                description: "decide where link should open",
+                formType: FORM_TYPES.flatArray,
+                defaultValue: "_blank",
+                options: ["_blank", "_self", "_parent", "_top"],
+            },
+        },
+    },
+    {
+        name: "Paragraph",
+        tag: "P",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "Strong",
+        tag: "Strong",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "Strike",
+        tag: "S",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "Italic",
+        tag: "I",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "Code",
+        tag: "Code",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "Pre",
+        tag: "Pre",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "Mark",
+        tag: "Mark",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "BR",
+        tag: "BR",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "Quote",
+        tag: "Q",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "BlockQuote",
+        tag: "BlockQuote",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "Time",
+        tag: "Time",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "UL",
+        tag: "UL",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "LI",
+        tag: "LI",
+        ...ELEMENT_PROPS,
+    },
+    {
+        name: "HR",
+        tag: "HR",
+        ...ELEMENT_PROPS,
+    },
+];

package/src/mappings/Elements.ts

@@ -0,0 +1,145 @@
+import {
+  BLOCK_STYLES_SECTIONS,
+  COMPONENT_TYPES,
+  createTextProp,
+  FORM_TYPES,
+  GROUPS,
+  Triggers,
+} from "@draftbit/types";
+const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
+
+const ELEMENT_PROPS = {
+  category: COMPONENT_TYPES.element,
+  stylesPanelSections: BLOCK_STYLES_SECTIONS,
+  layout: {
+    margin: 0,
+  },
+  triggers: SEED_DATA_TRIGGERS,
+};
+
+const HEADING_PROPS = {
+  ...ELEMENT_PROPS,
+};
+
+export const SEED_DATA = [
+  {
+    name: "H1",
+    tag: "H1",
+    ...HEADING_PROPS,
+  },
+  {
+    name: "H2",
+    tag: "H2",
+    ...HEADING_PROPS,
+  },
+  {
+    name: "H3",
+    tag: "H3",
+    ...HEADING_PROPS,
+  },
+  {
+    name: "H4",
+    tag: "H4",
+    ...HEADING_PROPS,
+  },
+  {
+    name: "H5",
+    tag: "H5",
+    ...HEADING_PROPS,
+  },
+  {
+    name: "H6",
+    tag: "H6",
+    ...HEADING_PROPS,
+  },
+  {
+    name: "Anchor",
+    tag: "A",
+    ...ELEMENT_PROPS,
+    props: {
+      href: createTextProp({
+        label: "href",
+        description: "Specify the URL",
+        defaultValue: "",
+      }),
+      target: {
+        group: GROUPS.basic,
+        label: "target",
+        description: "decide where link should open",
+        formType: FORM_TYPES.flatArray,
+        defaultValue: "_blank",
+        options: ["_blank", "_self", "_parent", "_top"],
+      },
+    },
+  },
+  {
+    name: "Paragraph",
+    tag: "P",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "Strong",
+    tag: "Strong",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "Strike",
+    tag: "S",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "Italic",
+    tag: "I",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "Code",
+    tag: "Code",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "Pre",
+    tag: "Pre",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "Mark",
+    tag: "Mark",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "BR",
+    tag: "BR",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "Quote",
+    tag: "Q",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "BlockQuote",
+    tag: "BlockQuote",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "Time",
+    tag: "Time",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "UL",
+    tag: "UL",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "LI",
+    tag: "LI",
+    ...ELEMENT_PROPS,
+  },
+  {
+    name: "HR",
+    tag: "HR",
+    ...ELEMENT_PROPS,
+  },
+];

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/Fetch.js

@@ -0,0 +1,13 @@
+import { COMPONENT_TYPES, StylesPanelSections } from "@draftbit/types";
+/* TODO remove, still used inside the builder in a weird way */
+export const SEED_DATA = {
+    name: "Fetch",
+    tag: "Fetch",
+    description: "Rest API Declarative Fetch component. Uses react-request internally",
+    category: COMPONENT_TYPES.data,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
+    layout: {
+        minHeight: 40,
+    },
+    props: {},
+};

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/FlashList.js

@@ -0,0 +1,33 @@
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "FlashList",
+    tag: "FlashList",
+    description: "Flashlist by Shopify",
+    packageName: "@shopify/flash-list",
+    category: COMPONENT_TYPES.data,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        flex: 1,
+    },
+    props: {
+        estimatedItemSize: createNumberProp({
+            group: GROUPS.basic,
+            label: "Est. Item Size",
+            description: "Approximate size of the items before rendering.",
+            defaultValue: 50,
+            step: 1,
+            precision: 0,
+        }),
+        horizontal: createStaticBoolProp({
+            label: "Horizontal",
+            description: "Render list horizontally",
+        }),
+        inverted: createStaticBoolProp({
+            label: "Inverted",
+            description: "If true, reverses the direction.",
+        }),
+        numColumns: createNumColumnsType({
+            editable: true,
+        }),
+    },
+};

package/src/mappings/FlatList.js

@@ -0,0 +1,24 @@
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "List",
+    tag: "FlatList",
+    description: "A basic List component",
+    category: COMPONENT_TYPES.data,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        flex: 1,
+    },
+    props: {
+        horizontal: createStaticBoolProp({
+            label: "Horizontal",
+            description: "Render list horizontally",
+        }),
+        inverted: createStaticBoolProp({
+            label: "Inverted",
+            description: "If true, reverses the direction.",
+        }),
+        numColumns: createNumColumnsType({
+            editable: true,
+        }),
+    },
+};

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/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/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/Icon.js

@@ -0,0 +1,32 @@
+import { COMPONENT_TYPES, GROUPS, createNumberProp, createColorProp, createIconProp, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Icon",
+    tag: "Icon",
+    description: "An icon",
+    category: COMPONENT_TYPES.basic,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Background,
+        StylesPanelSections.Position,
+        StylesPanelSections.Effects,
+    ],
+    layout: {},
+    props: {
+        name: {
+            ...createIconProp(),
+            group: GROUPS.data,
+        },
+        color: createColorProp(),
+        size: createNumberProp({
+            group: GROUPS.basic,
+            label: "Size",
+            description: "Width and height of your icon",
+            defaultValue: 24,
+            min: 1,
+            max: 128,
+            step: 1,
+            precision: 0,
+        }),
+    },
+};

package/src/mappings/IconButton.js

@@ -0,0 +1,35 @@
+import { COMPONENT_TYPES, GROUPS, createIconProp, createColorProp, createNumberProp, createBoolProp, createActionProp, Triggers, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Icon Button",
+    tag: "IconButton",
+    category: COMPONENT_TYPES.button,
+    layout: {},
+    triggers: [Triggers.OnPress],
+    stylesPanelSections: [
+        StylesPanelSections.Margins,
+        StylesPanelSections.Effects,
+        StylesPanelSections.Position,
+    ],
+    props: {
+        onPress: createActionProp(),
+        icon: createIconProp(),
+        color: createColorProp({
+            label: "Color",
+            group: GROUPS.basic,
+        }),
+        disabled: createBoolProp({
+            label: "Disabled",
+            group: GROUPS.basic,
+        }),
+        size: createNumberProp({
+            group: GROUPS.basic,
+            label: "Size",
+            description: "Width and height of your icon",
+            defaultValue: 32,
+            min: 16,
+            max: 128,
+            step: 1,
+            precision: 0,
+        }),
+    },
+};