@draftbit/core 46.1.4 → 46.2.1-39f6d9.3

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

@@ -3,6 +3,7 @@ import {
   COMPONENT_TYPES,
   FORM_TYPES,
   PROP_TYPES,
+  BLOCK_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -12,6 +13,7 @@ export const SEED_DATA = [
     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: {

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

@@ -4,6 +4,7 @@ import {
   createNumberProp,
   createColorProp,
   createIconProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -11,6 +12,13 @@ export const SEED_DATA = {
   tag: "Icon",
   description: "An icon",
   category: COMPONENT_TYPES.basic,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Background,
+    StylesPanelSections.Position,
+    StylesPanelSections.Effects,
+  ],
   layout: {},
   props: {
     name: {

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,
+        }),
+    },
+};

package/src/mappings/IconButton.ts

@@ -7,6 +7,7 @@ import {
   createBoolProp,
   createActionProp,
   Triggers,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -15,6 +16,11 @@ export const SEED_DATA = {
   category: COMPONENT_TYPES.button,
   layout: {},
   triggers: [Triggers.OnPress],
+  stylesPanelSections: [
+    StylesPanelSections.Margins,
+    StylesPanelSections.Effects,
+    StylesPanelSections.Position,
+  ],
   props: {
     onPress: createActionProp(),
     icon: createIconProp(),

package/src/mappings/Image.js

@@ -0,0 +1,21 @@
+import { COMPONENT_TYPES, createImageProp, createResizeModeProp, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Image",
+    tag: "Image",
+    description: "A basic Image Component",
+    category: COMPONENT_TYPES.media,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Position,
+        StylesPanelSections.Effects,
+    ],
+    layout: {
+        width: 250,
+        height: 250,
+    },
+    props: {
+        source: createImageProp(),
+        resizeMode: createResizeModeProp(),
+    },
+};

package/src/mappings/Image.ts

@@ -2,6 +2,7 @@ import {
   COMPONENT_TYPES,
   createImageProp,
   createResizeModeProp,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -9,6 +10,12 @@ export const SEED_DATA = {
   tag: "Image",
   description: "A basic Image Component",
   category: COMPONENT_TYPES.media,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Position,
+    StylesPanelSections.Effects,
+  ],
   layout: {
     width: 250,
     height: 250,

package/src/mappings/ImageBackground.js

@@ -0,0 +1,29 @@
+import { COMPONENT_TYPES, createImageProp, createResizeModeProp, createTextEnumProp, createColorProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Image Background",
+    tag: "ImageBackground",
+    doc_link: "https://docs.expo.io/versions/latest/react-native/imagebackground/",
+    code_link: "https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js",
+    description: "A very simple drop-in replacement for Image that allows you to use an Image as a background.",
+    category: COMPONENT_TYPES.media,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {
+        width: "100%",
+        height: "100%",
+    },
+    props: {
+        source: createImageProp({
+            defaultValue: "https://static.draftbit.com/images/placeholder-image-background.png",
+        }),
+        resizeMode: createResizeModeProp(),
+        backgroundColor: createColorProp({
+            label: "Background Color",
+            description: "If no image is chosen render a colored background.",
+        }),
+        backfaceVisibility: createTextEnumProp({
+            label: "Backface Visibility",
+            description: "When animating a card, show the back face of it",
+            options: ["visible", "hidden"],
+        }),
+    },
+};

package/src/mappings/ImageBackground.ts

@@ -4,6 +4,7 @@ import {
   createResizeModeProp,
   createTextEnumProp,
   createColorProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -16,6 +17,7 @@ export const SEED_DATA = {
   description:
     "A very simple drop-in replacement for Image that allows you to use an Image as a background.",
   category: COMPONENT_TYPES.media,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {
     width: "100%",
     height: "100%",

package/src/mappings/KeyboardAvoidingView.js

@@ -0,0 +1,41 @@
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Keyboard Avoiding View",
+    tag: "KeyboardAvoidingView",
+    description: "View that moves out of the way of the virtual keyboard. ",
+    category: COMPONENT_TYPES.layout,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    props: {
+        enabled: {
+            label: "Enabled",
+            description: "Enable the keyboard avoiding view",
+            editable: true,
+            required: true,
+            defaultValue: true,
+            formType: FORM_TYPES.boolean,
+            propType: PROP_TYPES.BOOLEAN,
+            group: GROUPS.basic,
+        },
+        behavior: {
+            label: "Resizing Behavior",
+            description: "The behavior for how the keyboard resizing interacts with the rest of the screen. (Default: padding).",
+            editable: true,
+            required: true,
+            defaultValue: "padding",
+            options: ["padding", "position", "height"],
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            group: GROUPS.basic,
+        },
+        keyboardVerticalOffset: {
+            label: "Keyboard Vertical Offset",
+            description: "The distance between the bottom of the view and the keyboard",
+            editable: true,
+            required: false,
+            defaultValue: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            group: GROUPS.basic,
+        },
+    },
+};

package/src/mappings/KeyboardAvoidingView.ts

@@ -3,6 +3,7 @@ import {
   FORM_TYPES,
   PROP_TYPES,
   GROUPS,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -10,6 +11,7 @@ export const SEED_DATA = {
   tag: "KeyboardAvoidingView",
   description: "View that moves out of the way of the virtual keyboard. ",
   category: COMPONENT_TYPES.layout,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   props: {
     enabled: {
       label: "Enabled",

package/src/mappings/KeyboardAwareScrollView.js

@@ -0,0 +1,50 @@
+import { COMPONENT_TYPES, createStaticBoolProp, createStaticNumberProp, createTextEnumProp, CONTAINER_COMPONENT_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Keyboard Aware Scroll View",
+    tag: "KeyboardAwareScrollView",
+    description: "View that moves pushes the content when virtual keyboard is open.",
+    category: COMPONENT_TYPES.layout,
+    stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
+    layout: {},
+    props: {
+        viewIsInsideTabBar: createStaticBoolProp({
+            label: "View Is Inside TabBar",
+            description: "Adds an extra offset that represents the TabBarIOS height.",
+        }),
+        enableAutomaticScroll: createStaticBoolProp({
+            label: "Enable Automatic Scroll",
+            description: "When focus in TextInput will scroll the position, default is enabled",
+        }),
+        extraHeight: createStaticNumberProp({
+            label: "Extra Height",
+            description: "Adds an extra offset when focusing the TextInputs",
+        }),
+        extraScrollHeight: createStaticNumberProp({
+            label: "Extra Scroll Height",
+            description: "Adds an extra offset to the keyboard. Useful if you want to stick elements above the keyboard",
+        }),
+        enableResetScrollToCoords: createStaticBoolProp({
+            label: "Enable Reset Scroll To Coordinates",
+            description: "Lets the user enable or disable automatic resetScrollToCoords",
+        }),
+        keyboardOpeningTime: createStaticNumberProp({
+            label: "Opening Time",
+            description: "Sets the delay time before scrolling to new position after keyboard opening, default is 250",
+        }),
+        enableOnAndroid: createStaticBoolProp({
+            label: "Enable On Android",
+            description: "Enable Android Support",
+        }),
+        showsVerticalScrollIndicator: createStaticBoolProp({
+            label: "Shows Vertical Scroll Indicator",
+            description: "Show or hide the vertical scroll indicator",
+            defaultValue: true,
+        }),
+        keyboardShouldPersistTaps: createTextEnumProp({
+            label: "Allow Touch Events",
+            description: "Allows touch events on visible components to be processed while the keyboard is open",
+            defaultValue: "never",
+            options: ["never", "always"],
+        }),
+    },
+};

package/src/mappings/KeyboardAwareScrollView.ts

@@ -3,6 +3,7 @@ import {
   createStaticBoolProp,
   createStaticNumberProp,
   createTextEnumProp,
+  CONTAINER_COMPONENT_STYLES_SECTIONS,
 } from "@draftbit/types";
 
 export const SEED_DATA = {
@@ -11,6 +12,7 @@ export const SEED_DATA = {
   description:
     "View that moves pushes the content when virtual keyboard is open.",
   category: COMPONENT_TYPES.layout,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
   layout: {},
   props: {
     viewIsInsideTabBar: createStaticBoolProp({

package/src/mappings/Layout.js

@@ -0,0 +1,200 @@
+import { GROUPS, FORM_TYPES, PROP_TYPES, COMPONENT_TYPES, StylesPanelSections, } from "@draftbit/types";
+export const SEED_DATA = [
+    {
+        name: "Row",
+        tag: "Row",
+        category: COMPONENT_TYPES.layout,
+        stylesPanelSections: [StylesPanelSections.NoStyles],
+        props: {
+            justifyContent: {
+                label: "Align Horizontally",
+                group: GROUPS.style,
+                description: "Align Items Horizontally (on the X Axis)",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "flex-start",
+                editable: true,
+                required: false,
+            },
+            alignItems: {
+                label: "Align Vertically",
+                group: GROUPS.style,
+                description: "Align Items Vertically (on the Y Axis)",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "flex-start",
+                editable: true,
+                required: false,
+            },
+        },
+    },
+    {
+        name: "Spacer",
+        tag: "Spacer",
+        category: COMPONENT_TYPES.layout,
+        props: {
+            top: {
+                label: "Top",
+                description: "Top",
+                formType: FORM_TYPES.number,
+                propType: PROP_TYPES.NUMBER,
+                group: GROUPS.style,
+                defaultValue: 8,
+                editable: true,
+                required: false,
+            },
+            right: {
+                label: "Right",
+                description: "Right",
+                formType: FORM_TYPES.number,
+                propType: PROP_TYPES.NUMBER,
+                group: GROUPS.style,
+                defaultValue: 8,
+                editable: true,
+                required: false,
+            },
+            bottom: {
+                label: "Bottom",
+                description: "Bottom",
+                formType: FORM_TYPES.number,
+                propType: PROP_TYPES.NUMBER,
+                group: GROUPS.style,
+                defaultValue: 8,
+                editable: true,
+                required: false,
+            },
+            left: {
+                label: "Left",
+                description: "Left",
+                formType: FORM_TYPES.number,
+                propType: PROP_TYPES.NUMBER,
+                group: GROUPS.style,
+                defaultValue: 8,
+                editable: true,
+                required: false,
+            },
+        },
+    },
+    {
+        name: "Stack",
+        tag: "Stack",
+        category: COMPONENT_TYPES.layout,
+        stylesPanelSections: [StylesPanelSections.NoStyles],
+        props: {
+            justifyContent: {
+                group: GROUPS.style,
+                label: "Justify",
+                description: "Justify horizontally",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "flex-start",
+                editable: true,
+                required: false,
+            },
+            alignItems: {
+                group: GROUPS.style,
+                label: "Align",
+                description: "Vertical align",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "flex-start",
+                editable: true,
+                required: false,
+            },
+        },
+    },
+    {
+        name: "Center",
+        tag: "Center",
+        category: COMPONENT_TYPES.layout,
+        stylesPanelSections: [StylesPanelSections.NoStyles],
+        props: {
+            width: {
+                label: "Width",
+                description: "Width",
+                formType: FORM_TYPES.number,
+                propType: PROP_TYPES.NUMBER,
+                group: GROUPS.style,
+                defaultValue: 240,
+                editable: true,
+                required: false,
+            },
+            height: {
+                label: "Height",
+                description: "Height",
+                formType: FORM_TYPES.number,
+                propType: PROP_TYPES.NUMBER,
+                group: GROUPS.style,
+                defaultValue: 200,
+                editable: true,
+                required: false,
+            },
+            bgColor: {
+                label: "Background Color",
+                description: "Background color",
+                formType: FORM_TYPES.color,
+                propType: PROP_TYPES.THEME,
+                editable: true,
+                required: false,
+                defaultValue: "light",
+                group: GROUPS.style,
+            },
+        },
+    },
+    {
+        name: "Circle",
+        tag: "Circle",
+        category: COMPONENT_TYPES.layout,
+        stylesPanelSections: [StylesPanelSections.NoStyles],
+        props: {
+            size: {
+                label: "Size",
+                description: "Size",
+                formType: FORM_TYPES.number,
+                propType: PROP_TYPES.NUMBER,
+                group: GROUPS.style,
+                defaultValue: 50,
+                editable: true,
+                required: false,
+            },
+            bgColor: {
+                label: "Background Color",
+                description: "Background color",
+                formType: FORM_TYPES.color,
+                propType: PROP_TYPES.THEME,
+                editable: true,
+                required: false,
+                defaultValue: "light",
+                group: GROUPS.style,
+            },
+        },
+    },
+    {
+        name: "Square",
+        tag: "Square",
+        category: COMPONENT_TYPES.layout,
+        stylesPanelSections: [StylesPanelSections.NoStyles],
+        props: {
+            size: {
+                label: "Size",
+                description: "Size",
+                formType: FORM_TYPES.number,
+                propType: PROP_TYPES.NUMBER,
+                group: GROUPS.style,
+                defaultValue: 50,
+                editable: true,
+                required: false,
+            },
+            bgColor: {
+                label: "Background Color",
+                description: "Background color",
+                formType: FORM_TYPES.color,
+                propType: PROP_TYPES.THEME,
+                editable: true,
+                required: false,
+                defaultValue: "light",
+                group: GROUPS.style,
+            },
+        },
+    },
+];

package/src/mappings/Layout.ts

@@ -3,6 +3,7 @@ import {
   FORM_TYPES,
   PROP_TYPES,
   COMPONENT_TYPES,
+  StylesPanelSections,
 } from "@draftbit/types";
 
 export const SEED_DATA = [
@@ -10,6 +11,7 @@ export const SEED_DATA = [
     name: "Row",
     tag: "Row",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       justifyContent: {
         label: "Align Horizontally",
@@ -84,6 +86,7 @@ export const SEED_DATA = [
     name: "Stack",
     tag: "Stack",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       justifyContent: {
         group: GROUPS.style,
@@ -111,6 +114,7 @@ export const SEED_DATA = [
     name: "Center",
     tag: "Center",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       width: {
         label: "Width",
@@ -148,6 +152,7 @@ export const SEED_DATA = [
     name: "Circle",
     tag: "Circle",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       size: {
         label: "Size",
@@ -175,6 +180,7 @@ export const SEED_DATA = [
     name: "Square",
     tag: "Square",
     category: COMPONENT_TYPES.layout,
+    stylesPanelSections: [StylesPanelSections.NoStyles],
     props: {
       size: {
         label: "Size",