@draftbit/core 46.0.0 → 46.0.1-eb73d2.0

package/src/mappings/TextField.js

@@ -0,0 +1,158 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, TEXT_INPUT_PROPS, Triggers, createColorProp, createNumberProp, createFieldNameProp, } from "@draftbit/types";
+const SEED_DATA_PROPS = {
+    ...TEXT_INPUT_PROPS,
+    label: {
+        group: GROUPS.data,
+        label: "Label",
+        description: "The label to be displayed on the text field",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+        editable: true,
+        required: true,
+    },
+    assistiveText: {
+        group: GROUPS.basic,
+        label: "Assistive text",
+        description: "Helper text to display below the input",
+        formType: FORM_TYPES.string,
+        propType: PROP_TYPES.STRING,
+        defaultValue: null,
+        editable: true,
+        required: false,
+    },
+    error: {
+        group: GROUPS.data,
+        label: "Error",
+        description: "Whether the input should display the error state",
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+        defaultValue: null,
+        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: null /* 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,
+        handlerPropName: "onChangeText",
+        defaultValue: "textFieldValue",
+    },
+};
+const SEED_DATA_TRIGGERS = [Triggers.OnChangeText];
+export const SEED_DATA = [
+    {
+        name: "Styled Text Field",
+        tag: "TextField",
+        description: "A text input with a solid border or underline",
+        category: COMPONENT_TYPES.input,
+        preview_image_url: "{CLOUDINARY_URL}/Textfield.png",
+        supports_list_render: false,
+        triggers: SEED_DATA_TRIGGERS,
+        props: {
+            ...SEED_DATA_PROPS,
+            type: {
+                label: "Appearance",
+                description: "Type of Datepicker",
+                formType: FORM_TYPES.flatArray,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "solid",
+                options: ["solid", "underline"],
+                editable: true,
+                required: true,
+                group: GROUPS.basic,
+            },
+            underlineColor: createColorProp({
+                label: "Underline Color",
+                defaultValue: "light",
+            }),
+            secureTextEntry: {
+                group: GROUPS.basic,
+                label: "Password field",
+                description: "If true, this turns the field into a password field, hiding the text",
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+                defaultValue: null,
+                editable: true,
+                required: false,
+            },
+        },
+        layout: {},
+    },
+    {
+        name: "Styled Text Area",
+        tag: "TextField",
+        description: "A text area with a solid border or underline",
+        category: COMPONENT_TYPES.input,
+        preview_image_url: "{CLOUDINARY_URL}/TextArea.png",
+        supports_list_render: false,
+        triggers: SEED_DATA_TRIGGERS,
+        props: {
+            ...SEED_DATA_PROPS,
+            placeholder: {
+                ...TEXT_INPUT_PROPS.placeholder,
+                defaultValue: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
+            },
+            type: {
+                label: "Appearance",
+                description: "Type of Datepicker",
+                formType: FORM_TYPES.flatArray,
+                propType: PROP_TYPES.STRING,
+                defaultValue: "solid",
+                options: ["solid", "underline"],
+                editable: true,
+                required: true,
+                group: GROUPS.basic,
+            },
+            multiline: {
+                label: "Multiline",
+                description: "Multiline",
+                group: GROUPS.uncategorized,
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+                defaultValue: true,
+                editable: false,
+                required: false,
+            },
+            numberOfLines: createNumberProp({
+                label: "Number of Lines",
+                description: "Number of Lines for Multiline Field",
+                defaultValue: 4,
+                group: GROUPS.basic,
+            }),
+            fieldName: createFieldNameProp({
+                defaultValue: "textAreaValue",
+            }),
+        },
+        layout: {},
+    },
+];

package/src/mappings/TextInput.js

@@ -0,0 +1,208 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, TEXT_INPUT_PROPS, NUMBER_INPUT_PROPS, Triggers, createFieldNameProp, } from "@draftbit/types";
+export const SEED_DATA_PROPS = {
+    style: {
+        group: GROUPS.basic,
+        label: "Style",
+        description: "Text Style",
+        editable: false,
+        required: false,
+        formType: FORM_TYPES.typeStyle,
+        propType: PROP_TYPES.THEME,
+        defaultValue: null,
+    },
+    clearButtonMode: {
+        group: GROUPS.basic,
+        label: "Clear Button Mode",
+        description: "Enables a button within the textInput to clear the data entered",
+        editable: true,
+        required: false,
+        options: ["never", "while-editing", "unless-editing", "always"],
+        defaultValue: null,
+        formType: FORM_TYPES.flatArray,
+        propType: PROP_TYPES.STRING,
+    },
+    clearTextOnFocus: {
+        group: GROUPS.basic,
+        label: "Clear Text on Focus",
+        description: "If true, clears the text field automatically when its focused.",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+    },
+    enablesReturnKeyAutomatically: {
+        group: GROUPS.basic,
+        label: "Enables Return Key Automatically",
+        description: "If true, the keyboard disables the return key when there is no text and automatically enables it when there is (Default: false)",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        formType: FORM_TYPES.boolean,
+        propType: PROP_TYPES.BOOLEAN,
+    },
+    underlineColorAndroid: {
+        group: GROUPS.basic,
+        label: "Underline color",
+        description: "(Android Only) The color of the underline(the line underneath the text when finished typing.",
+        editable: true,
+        required: false,
+        defaultValue: null,
+        formType: FORM_TYPES.color,
+        propType: PROP_TYPES.THEME,
+    },
+    fieldName: {
+        ...FIELD_NAME,
+        defaultValue: "textInputValue",
+        handlerPropName: "onChangeText",
+    },
+};
+export const SEED_DATA = [
+    {
+        name: "Text Input",
+        tag: "TextInput",
+        description: "An input field that allows users to type in data.",
+        category: COMPONENT_TYPES.input,
+        preview_image_url: "https://res.cloudinary.com/altos/image/upload/draftbit/Jigsaw/TextInput.png",
+        supports_list_render: false,
+        layout: {
+            borderLeftWidth: 1,
+            borderRightWidth: 1,
+            borderTopWidth: 1,
+            borderBottomWidth: 1,
+            borderColor: "divider",
+            paddingLeft: 8,
+            paddingRight: 8,
+            paddingTop: 8,
+            paddingBottom: 8,
+            borderRadius: 8,
+        },
+        triggers: [Triggers.OnChangeText],
+        props: {
+            ...TEXT_INPUT_PROPS,
+            ...SEED_DATA_PROPS,
+            multiline: {
+                group: GROUPS.basic,
+                label: "Multiple Lines",
+                description: "Allows multiple lines of input, useful for situations where the user may be typing in a lot of data.",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+            },
+            numberOfLines: {
+                group: GROUPS.basic,
+                label: "Number of Lines",
+                description: "Sets the number of lines for the input (Multiple Lines needs to be true)",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                min: 0,
+                step: 1,
+                precision: 0,
+                formType: FORM_TYPES.number,
+                propType: PROP_TYPES.NUMBER,
+            },
+            scrollEnabled: {
+                group: GROUPS.basic,
+                label: "Scroll Enabled",
+                description: "If false, scrolling of the input will be disabled. Only works when Multiple Lines is true",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+            },
+            spellcheck: {
+                group: GROUPS.basic,
+                label: "Disable Spell Check",
+                description: "If false, disables spell-check style (red underlines). Default comes from Auto Correct",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+            },
+            textContentType: {
+                group: GROUPS.advanced,
+                label: "Text Content Type",
+                description: "Give the keyboard and system about what it should do with the input. For example, if its an address, autofill from address book",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                options: [
+                    "none",
+                    "URL",
+                    "addressCity",
+                    "addressCityAndState",
+                    "addressState",
+                    "countryName",
+                    "creditCardNumber",
+                    "emailAddress",
+                    "familyName",
+                    "fullStreetAddress",
+                    "givenName",
+                    "jobTitle",
+                    "location",
+                    "middleName",
+                    "name",
+                    "namePrefix",
+                    "nameSuffix",
+                    "nickname",
+                    "organizationName",
+                    "postalCode",
+                    "streetAddressLine1",
+                    "streetAddressLine2",
+                    "sublocality",
+                    "telephoneNumber",
+                    "username",
+                    "password",
+                ],
+                formType: FORM_TYPES.flatArray,
+                propType: PROP_TYPES.STRING,
+            },
+            textBreakStrategy: {
+                group: GROUPS.advanced,
+                label: "Text Break Strategy",
+                description: "(Android Only) Set the text break strategy. (Default: simple)",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                options: ["simple", "highQuality", "balanced"],
+                formType: FORM_TYPES.flatArray,
+                propType: PROP_TYPES.STRING,
+            },
+        },
+    },
+    {
+        name: "Number Input",
+        tag: "NumberInput",
+        description: "An input field that allows users to type in data.",
+        category: COMPONENT_TYPES.input,
+        preview_image_url: "https://res.cloudinary.com/altos/image/upload/draftbit/Jigsaw/TextInput.png",
+        supports_list_render: false,
+        layout: {
+            borderLeftWidth: 1,
+            borderRightWidth: 1,
+            borderTopWidth: 1,
+            borderBottomWidth: 1,
+            borderColor: "divider",
+            paddingLeft: 8,
+            paddingRight: 8,
+            paddingTop: 8,
+            paddingBottom: 8,
+            borderRadius: 8,
+        },
+        triggers: [Triggers.OnChangeText],
+        props: {
+            ...SEED_DATA_PROPS,
+            ...NUMBER_INPUT_PROPS,
+            fieldName: createFieldNameProp({
+                defaultValue: "numberInputValue",
+                valuePropName: "value",
+                handlerPropName: "onChangeText",
+            }),
+        },
+    },
+];

package/src/mappings/ToggleButton.js

@@ -0,0 +1,45 @@
+import { GROUPS, COMPONENT_TYPES, createIconProp, createBoolProp, createColorProp, createStaticNumberProp, createFieldNameProp, createIconSizeProp, createActionProp, Triggers, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Toggle Button",
+    tag: "ToggleButton",
+    category: COMPONENT_TYPES.deprecated,
+    layout: {},
+    triggers: [Triggers.OnPress],
+    props: {
+        onPress: createActionProp(),
+        icon: createIconProp({
+            required: true,
+        }),
+        iconSize: createIconSizeProp(),
+        fieldName: createFieldNameProp({
+            defaultValue: false,
+            valuePropName: "toggled",
+        }),
+        disabled: createBoolProp({
+            label: "Disabled",
+            description: "Whether the button should be disabled",
+            group: GROUPS.basic,
+        }),
+        color: createColorProp({
+            group: GROUPS.basic,
+        }),
+        colorSecondary: createColorProp({
+            label: "Secondary Color",
+            group: GROUPS.basic,
+        }),
+        borderColor: createColorProp({
+            label: "Border Color",
+            group: GROUPS.basic,
+        }),
+        width: createStaticNumberProp({
+            label: "Width",
+            description: "Width",
+            defaultValue: 50,
+        }),
+        height: createStaticNumberProp({
+            label: "Height",
+            description: "Height",
+            defaultValue: 50,
+        }),
+    },
+};

package/src/mappings/Touchable.js

@@ -0,0 +1,12 @@
+import { COMPONENT_TYPES, createActionProp, Triggers } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Touchable",
+    tag: "Touchable",
+    description: "Simple button with no styles",
+    category: COMPONENT_TYPES.button,
+    layout: {},
+    triggers: [Triggers.OnPress],
+    props: {
+        onPress: createActionProp(),
+    },
+};

package/src/mappings/Video.js

@@ -0,0 +1,74 @@
+import { COMPONENT_TYPES, createStaticBoolProp, createSourceProp, createResizeModeProp, createNumberProp, GROUPS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Video",
+    tag: "Video",
+    description: "Given a URL, display a video",
+    doc_link: "https://docs.expo.io/versions/latest/sdk/video/",
+    code_link: "https://github.com/expo/expo/blob/master/packages/expo-av/src/Video.tsx",
+    category: COMPONENT_TYPES.media,
+    layout: {
+        height: 215,
+    },
+    props: {
+        source: createSourceProp({
+            label: "Source",
+            description: "The source of the video data to display.",
+            defaultValue: "http://static.draftbit.com/videos/intro-to-draftbit.mp4",
+        }),
+        usePoster: createStaticBoolProp({
+            label: "Use Thumbnail",
+            description: "Show a thumbnail before the video starts.",
+            defaultValue: false,
+        }),
+        posterSource: createSourceProp({
+            label: "Thumbnail Source",
+            description: "The optional image to display over the video while it is loading.",
+            defaultValue: null,
+            required: false,
+        }),
+        resizeMode: createResizeModeProp(),
+        isMuted: createStaticBoolProp({
+            label: "Mute Audio",
+            description: "Mute the audio of the video.",
+        }),
+        useNativeControls: createStaticBoolProp({
+            label: "Use Native Controls",
+            description: "Display the playback controls, allowing users to play or pause the video.",
+            defaultValue: true,
+        }),
+        shouldPlay: createStaticBoolProp({
+            label: "Play Automatically",
+            description: "Start playing the video after loading is finished.",
+        }),
+        isLooping: createStaticBoolProp({
+            label: "Loop Video",
+            description: "Automatically replay the video.",
+        }),
+        positionMillis: createNumberProp({
+            label: "Starting Point",
+            description: "Set a certian starting point of the video",
+            min: 0,
+            step: 0.01,
+            precision: 2,
+            group: GROUPS.basic,
+        }),
+        rate: createNumberProp({
+            label: "Playback Rate",
+            description: "The playback rate of the media. This value must be between 0.0 and 32.0 (Default: 1)",
+            min: 0,
+            max: 32,
+            step: 0.25,
+            precision: 2,
+            group: GROUPS.basic,
+        }),
+        volume: createNumberProp({
+            label: "Volume",
+            description: "The volume of the audio for this media. This value must be between 0.0 (silence) and 1.0 (maximum volume). (Default: .5)",
+            min: 0,
+            max: 1,
+            step: 0.1,
+            precision: 1,
+            group: GROUPS.basic,
+        }),
+    },
+};