@draftbit/core 46.5.1 → 46.5.2-13b65f.2

package/src/mappings/NumberInput.js

@@ -0,0 +1,254 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, Triggers, StylesPanelSections, } 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: "numberInputValue",
+        handlerPropName: "onChangeText",
+    },
+};
+export const SEED_DATA = [
+    {
+        name: "Number Input",
+        tag: "NumberInput",
+        description: "An input field that allows users to type in data.",
+        category: COMPONENT_TYPES.input,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Background,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Effects,
+        ],
+        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,
+            allowFontScaling: {
+                group: GROUPS.advanced,
+                label: "Allow Font Scaling",
+                description: "Whether fonts should scale to respect Text Size in the user's accessibility settings. (Default: true)",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+            },
+            autoFocus: {
+                group: GROUPS.basic,
+                label: "Auto Focus",
+                description: "Focuses the input on load in and brings up the keyboard",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+            },
+            caretHidden: {
+                group: GROUPS.advanced,
+                label: "Hide Caret",
+                description: "Hides the caret(the line small line underneath each showing where you're editing/typing",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+            },
+            contextMenuHidden: {
+                group: GROUPS.advanced,
+                label: "Hide Context Menu",
+                description: "Hides the system context menu (Default: false)",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+            },
+            editable: {
+                group: GROUPS.advanced,
+                label: "Editable",
+                description: "If false, the text is not editable",
+                editable: true,
+                required: false,
+                defaultValue: true,
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+            },
+            keyboardAppearance: {
+                group: GROUPS.advanced,
+                label: "Keyboard Appearance",
+                description: "Determines the color of the keyboard.(iOS Only)",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                options: ["default", "light", "dark"],
+                formType: FORM_TYPES.flatArray,
+                propType: PROP_TYPES.STRING,
+            },
+            keyboardType: {
+                group: GROUPS.advanced,
+                label: "Keyboard Type",
+                description: "Determines what keyboard is given to the user.",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                options: ["numeric", "numbers-and-punctuation", "number-pad"],
+                formType: FORM_TYPES.flatArray,
+                propType: PROP_TYPES.STRING,
+            },
+            maxLength: {
+                group: GROUPS.basic,
+                label: "Max Length",
+                description: "Limits the input to a set number of characters.",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                min: 0,
+                step: 1,
+                precision: 0,
+                formType: FORM_TYPES.number,
+                propType: PROP_TYPES.NUMBER,
+            },
+            placeholder: {
+                group: GROUPS.basic,
+                label: "Placeholder Text",
+                description: "The text that is shown on load when no value is available.",
+                editable: true,
+                required: false,
+                defaultValue: "Enter a number...",
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+            },
+            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,
+            },
+            returnKeyLabel: {
+                group: GROUPS.advanced,
+                label: "Return Key Label",
+                description: "(Android Only) Sets the label on the return key (use this instead of rewturnKeyType)",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                formType: FORM_TYPES.string,
+                propType: PROP_TYPES.STRING,
+            },
+            returnKeyType: {
+                group: GROUPS.advanced,
+                label: "Return Key Type",
+                description: "Determines how the return key should look like",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                options: [
+                    "done",
+                    "go",
+                    "next",
+                    "search",
+                    "send",
+                    "none",
+                    "previous",
+                    "default",
+                    "emergency-call",
+                    "google",
+                    "join",
+                    "route",
+                    "yahoo",
+                ],
+                formType: FORM_TYPES.flatArray,
+                propType: PROP_TYPES.STRING,
+            },
+            selectionColor: {
+                group: GROUPS.advanced,
+                label: "Selection Color",
+                description: "Color of the highlighted portion when selecting.",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                formType: FORM_TYPES.color,
+                propType: PROP_TYPES.STRING,
+            },
+            selectTextOnFocus: {
+                group: GROUPS.advanced,
+                label: "Select Text on Focus",
+                description: "If true, all the text will automatically be selected on focus",
+                editable: true,
+                required: false,
+                defaultValue: null,
+                formType: FORM_TYPES.boolean,
+                propType: PROP_TYPES.BOOLEAN,
+            },
+        },
+    },
+];

package/src/mappings/Picker.js

@@ -0,0 +1,148 @@
+import { COMPONENT_TYPES, Triggers, GROUPS, FORM_TYPES, PROP_TYPES, FIELD_NAME, createIconSizeProp, createColorProp, StylesPanelSections, } 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,
+        stylesPanelSections: [
+            StylesPanelSections.Typography,
+            StylesPanelSections.Background,
+            StylesPanelSections.Size,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Borders,
+            StylesPanelSections.Effects,
+        ],
+        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/Pressable.js

@@ -0,0 +1,34 @@
+import { COMPONENT_TYPES, createActionProp, Triggers, createNumberProp, StylesPanelSections, } 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(),
+        disabledOpacity: createNumberProp(),
+        delayLongPress: createNumberProp(),
+        hitSlop: createNumberProp(),
+    },
+};
+export const SEED_DATA = [
+    {
+        name: "Touchable",
+        tag: "Touchable",
+        description: "An interactive view with no styles",
+        category: COMPONENT_TYPES.deprecated,
+        ...SEED_DATA_PROPS,
+    },
+    {
+        name: "Pressable",
+        tag: "Pressable",
+        description: "An interactive view with no styles",
+        category: COMPONENT_TYPES.button,
+        ...SEED_DATA_PROPS,
+    },
+];

package/src/mappings/Pressable.ts

@@ -0,0 +1,42 @@
+import {
+  COMPONENT_TYPES,
+  createActionProp,
+  Triggers,
+  createNumberProp,
+  StylesPanelSections,
+} 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(),
+    disabledOpacity: createNumberProp(),
+    delayLongPress: createNumberProp(),
+    hitSlop: createNumberProp(),
+  },
+};
+
+export const SEED_DATA = [
+  {
+    name: "Touchable",
+    tag: "Touchable",
+    description: "An interactive view with no styles",
+    category: COMPONENT_TYPES.deprecated,
+    ...SEED_DATA_PROPS,
+  },
+  {
+    name: "Pressable",
+    tag: "Pressable",
+    description: "An interactive view with no styles",
+    category: COMPONENT_TYPES.button,
+    ...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,
+        },
+    },
+];

package/src/mappings/ProgressCircle.js

@@ -0,0 +1,109 @@
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, BLOCK_STYLES_SECTIONS, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Progress Circle",
+    tag: "ProgressCircle",
+    description: "A circle 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: "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,
+    },
+};