@draftbit/core 46.0.0 → 46.0.1-eb73d2.0

package/src/mappings/LinearGradient.js

@@ -0,0 +1,77 @@
+import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Linear Gradient",
+    tag: "LinearGradient",
+    description: "Linear Gradient Component",
+    layout: { width: "100%", height: "100%" },
+    props: {
+        endY: {
+            group: GROUPS.basic,
+            label: "End Y",
+            description: "End position from Bottom",
+            editable: true,
+            required: false,
+            defaultValue: 100,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+        },
+        endX: {
+            group: GROUPS.basic,
+            label: "End X",
+            description: "End position from Right",
+            editable: true,
+            required: false,
+            defaultValue: 100,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+        },
+        startY: {
+            group: GROUPS.basic,
+            label: "Start Y",
+            description: "Start position from Top",
+            editable: true,
+            required: false,
+            defaultValue: 0,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+        },
+        startX: {
+            group: GROUPS.basic,
+            label: "Start X",
+            description: "Start position from Left",
+            editable: true,
+            required: false,
+            defaultValue: 0,
+            min: 0,
+            max: 100,
+            step: 1,
+            precision: 0,
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+        },
+        color3: createColorProp({
+            label: "Color 3",
+            defaultValue: undefined,
+        }),
+        color2: createColorProp({
+            label: "Color 2",
+            defaultValue: "secondary",
+        }),
+        color1: createColorProp({
+            label: "Color 1",
+            defaultValue: "primary",
+        }),
+    },
+};

package/src/mappings/MapCallout.js

@@ -0,0 +1,21 @@
+import { COMPONENT_TYPES, createActionProp, createBoolProp, GROUPS, Triggers, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Map Callout",
+    tag: "MapCallout",
+    packageName: "@draftbit/maps",
+    description: "An info window to display on top of a marker when it is clicked",
+    category: COMPONENT_TYPES.media,
+    triggers: [Triggers.OnPress],
+    layout: {},
+    props: {
+        onPress: createActionProp({
+            description: "Action to execute when the callout is pressed",
+        }),
+        showTooltip: createBoolProp({
+            label: "Show Tooltip",
+            description: 'If false, a default "tooltip" bubble window will be drawn around this callout\'s children. If true, the child views can fully customize their appearance, including any "bubble"-like styles',
+            group: GROUPS.basic,
+            defaultValue: false,
+        }),
+    },
+};

package/src/mappings/MapMarker.js

@@ -0,0 +1,47 @@
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Map Marker",
+    tag: "MapMarker",
+    packageName: "@draftbit/maps",
+    description: "A marker to show inside map view",
+    category: COMPONENT_TYPES.media,
+    layout: {},
+    props: {
+        latitude: createNumberProp({
+            label: "Latitude",
+            description: "The latitude in which the marker is located",
+            required: true,
+            precision: 6,
+            min: -90,
+            max: 90,
+        }),
+        longitude: createNumberProp({
+            label: "Longitude",
+            description: "The longitude in which the marker is located",
+            required: true,
+            precision: 6,
+            min: -180,
+            max: 180,
+        }),
+        title: createTextProp({
+            label: "Title",
+            description: "Title to show along with the marker",
+            defaultValue: null,
+        }),
+        description: createTextProp({
+            label: "Description",
+            description: "Optional description for the marker",
+            defaultValue: null,
+        }),
+        flat: createBoolProp({
+            label: "Flat",
+            description: "Sets whether this marker should be flat against the map (if true) or a billboard facing the camera (if false)",
+            group: GROUPS.basic,
+            defaultValue: false,
+        }),
+        pinColor: createColorProp({
+            label: "Pin Color",
+            description: "Sets the color of the marker",
+        }),
+    },
+};

package/src/mappings/MapView.js

@@ -0,0 +1,138 @@
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Map View",
+    tag: "MapView",
+    packageName: "@draftbit/maps",
+    description: "A map view",
+    category: COMPONENT_TYPES.media,
+    layout: {
+        flex: 1,
+    },
+    props: {
+        provider: {
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            editable: true,
+            group: GROUPS.basic,
+            label: "Provider",
+            description: "The maps provider",
+            required: false,
+            defaultValue: null,
+            options: ["google"],
+        },
+        latitude: createNumberProp({
+            label: "Initial Latitude",
+            description: "The longitude for the map's initial region",
+            required: false,
+            precision: 6,
+            min: -90,
+            max: 90,
+            defaultValue: 37.40241,
+        }),
+        longitude: createNumberProp({
+            label: "Initial Longitude",
+            description: "The longitude for the map's initial region",
+            required: false,
+            precision: 6,
+            min: -180,
+            max: 180,
+            defaultValue: -122.12125,
+        }),
+        zoom: createNumberProp({
+            label: "Initial Zoom",
+            description: "The initial zoom of the map",
+            required: true,
+            precision: 0,
+            step: 1,
+            defaultValue: 8,
+            min: 0,
+            max: 22,
+            group: GROUPS.basic,
+        }),
+        mapType: {
+            label: "Map Type",
+            description: "The type of map to show",
+            group: GROUPS.basic,
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            required: false,
+            defaultValue: null,
+            options: [
+                "standard",
+                "satellite",
+                "hybrid",
+                "terrain",
+                "none",
+                "mutedStandard",
+            ],
+        },
+        zoomEnabled: createBoolProp({
+            label: "Zoom Enabled",
+            description: "Whether zooming is enabled (native only)",
+            group: GROUPS.basic,
+            required: false,
+            defaultValue: true,
+        }),
+        showsCompass: createBoolProp({
+            label: "Shows Compass",
+            description: "Whether compass is shown",
+            group: GROUPS.basic,
+            required: false,
+            defaultValue: false,
+        }),
+        rotateEnabled: createBoolProp({
+            label: "Rotate Enabled",
+            description: "Whether rotating the map is enabled",
+            group: GROUPS.basic,
+            required: false,
+            defaultValue: true,
+        }),
+        scrollEnabled: createBoolProp({
+            label: "Pan Enabled",
+            description: "Whether panning the map view is enabled",
+            group: GROUPS.basic,
+            required: false,
+            defaultValue: true,
+        }),
+        loadingEnabled: createBoolProp({
+            label: "Loading Enabled",
+            description: "If true a loading indicator will show while the map is loading",
+            group: GROUPS.basic,
+            required: false,
+            defaultValue: true,
+        }),
+        loadingIndicatorColor: createColorProp({
+            label: "Loading Indicator Color",
+            description: "Color of the loading indicator",
+        }),
+        loadingBackgroundColor: createColorProp({
+            label: "Loading BG Color",
+            description: "Color of the background to show while the map is loading",
+        }),
+        showsUserLocation: createBoolProp({
+            label: "Shows User Location",
+            description: "Whether to show the user's location on the map",
+            required: false,
+            defaultValue: null,
+            group: GROUPS.basic,
+        }),
+        followsUserLocation: createBoolProp({
+            label: "Follows User Location (iOS only)",
+            description: "Whether to set the map region to follow the user's location",
+            required: false,
+            defaultValue: null,
+            group: GROUPS.basic,
+        }),
+        showsPointsOfInterest: createBoolProp({
+            label: "Shows Points of Interest",
+            description: "Whether to show points of interest on the map.",
+            required: false,
+            defaultValue: true,
+            group: GROUPS.basic,
+        }),
+        apiKey: createTextProp({
+            defaultValue: process.env.GOOGLE_MAPS_API_KEY,
+            editable: false,
+        }),
+    },
+};

package/src/mappings/Modal.js

@@ -0,0 +1,41 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createBoolProp, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Modal",
+    tag: "Modal",
+    description: "A basic Modal Component",
+    category: COMPONENT_TYPES.container,
+    props: {
+        animationType: {
+            group: GROUPS.basic,
+            label: "Animation Type",
+            description: "Animation Type",
+            options: ["slide", "fade", "none"],
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            defaultValue: "none",
+        },
+        transparent: createBoolProp({
+            group: GROUPS.basic,
+            label: "Transparent",
+            description: "Determines whether the modal will fill the entire view. Setting this to true will render the modal over a transparent background",
+        }),
+        visible: createBoolProp({
+            group: GROUPS.data,
+            label: "Visible",
+            description: "Determines whether the modal is visible",
+        }),
+        presentationStyle: {
+            group: GROUPS.basic,
+            label: "Presentation Style",
+            description: "Presentation Style",
+            options: ["fullScreen", "pageSheet", "formSheet", "overFullScreen"],
+            editable: true,
+            required: false,
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            defaultValue: null,
+        },
+    },
+};

package/src/mappings/Picker.js

@@ -0,0 +1,139 @@
+import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, } from "@draftbit/types";
+const SEED_DATA_PROPS = {
+    label: {
+        group: GROUPS.data,
+        label: "Label",
+        description: "The label to be displayed on the picker",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+        editable: true,
+        required: true,
+    },
+    placeholder: {
+        group: GROUPS.basic,
+        label: "Placeholder",
+        description: "The placeholder text of the picker",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "Select an option",
+        editable: true,
+        required: false,
+    },
+    placeholderTextColor: {
+        group: GROUPS.basic,
+        label: "Placeholder Text Color",
+        description: "The color of the placeholder text.",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        formType: FORM_TYPES.color,
+        propType: PROP_TYPES.STRING,
+    },
+    assistiveText: {
+        group: GROUPS.basic,
+        label: "Assistive text",
+        description: "Helper text to display below the picker",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+        editable: true,
+        required: false,
+    },
+    options: {
+        group: GROUPS.data,
+        label: "Options",
+        description: "Array of picker options. An array of objects containing a label and value.",
+        editable: true,
+        required: false,
+        formType: FORM_TYPES.array,
+        propType: PROP_TYPES.OBJECT,
+        options: [],
+        defaultValue: null,
+    },
+    disabled: {
+        group: GROUPS.basic,
+        label: "Disabled",
+        description: "Whether the picker should be disabled. Will prevent selection and show a greyed out state.",
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+        defaultValue: false,
+        editable: true,
+        required: false,
+    },
+    error: {
+        group: GROUPS.data,
+        label: "Error",
+        description: "Whether the picker should display the error state",
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+        defaultValue: false,
+        editable: true,
+        required: false,
+    },
+    leftIconName: {
+        group: GROUPS.basic,
+        label: "Left icon name",
+        description: "The icon to display on the left",
+        formType: FORM_TYPES.icon,
+        propType: PROP_TYPES.ASSET,
+        defaultValue: null,
+        editable: true,
+        required: false,
+    },
+    leftIconMode: {
+        group: GROUPS.basic,
+        label: "Left icon mode",
+        description: "The mode of the icon to display on the left. 'inset' or 'outset'.",
+        formType: FORM_TYPES.flatArray,
+        propType: PROP_TYPES.STRING,
+        defaultValue: "inset",
+        options: ["inset", "outset"],
+        editable: true,
+        required: true,
+    },
+    rightIconName: {
+        group: GROUPS.basic,
+        label: "Right icon name",
+        description: "The icon to display on the right",
+        formType: FORM_TYPES.icon,
+        propType: PROP_TYPES.ASSET,
+        defaultValue: null,
+        editable: true,
+        required: false,
+    },
+    fieldName: {
+        ...FIELD_NAME,
+        defaultValue: "pickerValue",
+        handlerPropName: "onValueChange",
+    },
+};
+const SEED_DATA_TRIGGERS = [Triggers.OnValueChange];
+export const SEED_DATA = [
+    {
+        name: "Picker",
+        tag: "Picker",
+        description: "A component used to pick a value from a set of options",
+        category: COMPONENT_TYPES.input,
+        preview_image_url: "{CLOUDINARY_URL}/Picker.png",
+        supports_list_render: false,
+        triggers: SEED_DATA_TRIGGERS,
+        props: {
+            ...SEED_DATA_PROPS,
+            type: {
+                label: "Appearance",
+                description: "Type of Picker",
+                formType: FORM_TYPES.flatArray,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "solid",
+                options: ["solid", "underline"],
+                editable: true,
+                required: true,
+                group: GROUPS.basic,
+            },
+            iconSize: createIconSizeProp({ defaultValue: 24 }),
+            iconColor: createColorProp({ label: "Icon Color" }),
+        },
+        layout: {},
+    },
+];

package/src/mappings/ProgressBar.js

@@ -0,0 +1,100 @@
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, } 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,
+        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,
+        },
+    },
+];

package/src/mappings/ProgressCircle.js

@@ -0,0 +1,108 @@
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Progress Circle",
+    tag: "ProgressCircle",
+    description: "A circle used to show completed progress",
+    category: COMPONENT_TYPES.deprecated,
+    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: "Color",
+            description: "Color for the progress shown",
+            editable: true,
+            defaultValue: "primary",
+            required: true,
+            formType: FORM_TYPES.color,
+            propType: PROP_TYPES.THEME,
+        },
+        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%)",
+            editable: true,
+            defaultValue: null,
+            required: true,
+            formType: FORM_TYPES.color,
+            propType: PROP_TYPES.THEME,
+        },
+        size: {
+            group: GROUPS.basic,
+            label: "Size",
+            description: "The size of the circle",
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            defaultValue: 100,
+            min: 0,
+            max: 300,
+            step: 1,
+            precision: 1,
+            editable: true,
+            required: true,
+        },
+        showsText: {
+            group: GROUPS.basic,
+            label: "Show Progress Text",
+            description: "Shows progress in the middle of the circle",
+            formType: FORM_TYPES.boolean,
+            propType: PROP_TYPES.BOOLEAN,
+            defaultValue: true,
+            editable: true,
+            required: true,
+        },
+        textStyle: {
+            group: GROUPS.basic,
+            label: "Text Style",
+            description: "Text Style of the inner circle",
+            editable: true,
+            required: true,
+            formType: FORM_TYPES.typeStyle,
+            propType: PROP_TYPES.THEME,
+            defaultValue: null,
+        },
+        thickness: {
+            group: GROUPS.basic,
+            label: "Thickness",
+            description: "Thickness of the inner circle",
+            formType: FORM_TYPES.number,
+            propType: PROP_TYPES.NUMBER,
+            defaultValue: 1,
+            min: 0,
+            max: 15,
+            step: 1,
+            precision: 1,
+            editable: true,
+            required: true,
+        },
+        strokeCap: {
+            group: GROUPS.basic,
+            label: "Stroke Cap",
+            description: "The style of the stroke",
+            formType: FORM_TYPES.flatArray,
+            propType: PROP_TYPES.STRING,
+            defaultValue: "butt",
+            options: ["butt", "square", "round"],
+            editable: true,
+            required: true,
+        },
+    },
+    layout: {
+        width: 250,
+        height: 250,
+    },
+};