@draftbit/core 46.10.3-6c7505.2 → 46.10.3-7476ab.2

package/lib/module/mappings/LinearGradient.js

@@ -0,0 +1,81 @@
+import { createColorProp, FORM_TYPES, GROUPS, PROP_TYPES, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Linear Gradient",
+  tag: "LinearGradient",
+  description: "Linear Gradient Component",
+  layout: {
+    width: "100%",
+    height: "100%"
+  },
+  stylesPanelSections: [StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Borders, StylesPanelSections.Effects],
+  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/lib/module/mappings/MapCallout.js

@@ -0,0 +1,22 @@
+import { COMPONENT_TYPES, createActionProp, createBoolProp, GROUPS, Triggers, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Map Callout",
+  tag: "MapCallout",
+  packageName: "@draftbit/maps",
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Effects],
+  description: "An info window to display on top of a marker when it is clicked",
+  category: COMPONENT_TYPES.map,
+  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/lib/module/mappings/MapMarker.js

@@ -0,0 +1,48 @@
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, StylesPanelSections } 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.map,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Effects],
+  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/lib/module/mappings/MapView.js

@@ -0,0 +1,135 @@
+import { COMPONENT_TYPES, createBoolProp, createColorProp, createNumberProp, createTextProp, GROUPS, FORM_TYPES, PROP_TYPES, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Map View",
+  tag: "MapView",
+  packageName: "@draftbit/maps",
+  description: "A map view",
+  category: COMPONENT_TYPES.map,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins],
+  layout: {
+    flex: 1,
+    width: "100%",
+    height: "100%"
+  },
+  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,
+      editable: true,
+      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/lib/module/mappings/Markdown.js

@@ -0,0 +1,20 @@
+import { COMPONENT_TYPES, FORM_TYPES, GROUPS, PROP_TYPES, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Markdown",
+  tag: "Markdown",
+  description: "A component that renders markdown",
+  category: COMPONENT_TYPES.text,
+  stylesPanelSections: [StylesPanelSections.Typography, StylesPanelSections.LayoutSelectedItem, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Effects],
+  props: {
+    children: {
+      group: GROUPS.data,
+      label: "Markdown Text",
+      description: "Markdown text to be rendered ",
+      editable: true,
+      required: true,
+      formType: FORM_TYPES.string,
+      propType: PROP_TYPES.STRING,
+      defaultValue: "### Markdown"
+    }
+  }
+};

package/lib/module/mappings/Modal.js

@@ -0,0 +1,42 @@
+import { GROUPS, COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, createBoolProp, StylesPanelSections } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Modal",
+  tag: "Modal",
+  description: "A basic Modal Component",
+  category: COMPONENT_TYPES.layout,
+  stylesPanelSections: [StylesPanelSections.NoStyles],
+  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/lib/module/mappings/NativeBase/Layout.js

@@ -0,0 +1,101 @@
+import { COMPONENT_TYPES, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createStaticNumberProp, StylesPanelSections, createStaticBoolProp } from "@draftbit/types";
+const SHARED_SEED_DATA = {
+  category: COMPONENT_TYPES.layout,
+  packageName: "native-base",
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS
+};
+const CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX = CONTAINER_COMPONENT_STYLES_SECTIONS.filter(item => item !== StylesPanelSections.LayoutFlexItems && item !== StylesPanelSections.LayoutContent);
+export const SEED_DATA = [{
+  name: "Aspect Ratio",
+  tag: "AspectRatio",
+  description: "Controls the size of the undefined dimension of a node or child component using an aspect ratio",
+  ...SHARED_SEED_DATA,
+  props: {
+    ratio: createStaticNumberProp({
+      label: "Ratio",
+      description: "The aspect ratio of the container in decimal format (ex: 3/4 -> 1.33)",
+      defaultValue: 1.33
+    })
+  },
+  stylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Position, StylesPanelSections.Borders, StylesPanelSections.Effects]
+}, {
+  name: "Box",
+  tag: "Box",
+  description: "This is a generic component for low level layout needs. It is similar to a div in HTML",
+  ...SHARED_SEED_DATA
+}, {
+  name: "Center",
+  tag: "Center",
+  description: "Center aligns its contents to the center within itself",
+  ...SHARED_SEED_DATA,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
+}, {
+  name: "Circle",
+  tag: "Circle",
+  description: "Center aligns its contents to the center within itself with a round border radius",
+  ...SHARED_SEED_DATA,
+  stylesPanelSections: CONTAINER_COMPONENT_STYLES_WITHOUT_FLEX
+}, {
+  name: "Container",
+  tag: "Container",
+  description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
+  props: {
+    centerContent: createStaticBoolProp({
+      label: "Center content",
+      description: "Center child elements based on their content width",
+      defaultValue: true
+    })
+  },
+  ...SHARED_SEED_DATA
+}, {
+  name: "Column",
+  tag: "Column",
+  description: "Column aligns items vertically",
+  layout: {
+    flexDirection: "column"
+  },
+  ...SHARED_SEED_DATA
+}, {
+  name: "Row",
+  tag: "Row",
+  description: "Column aligns items horizontally",
+  layout: {
+    flexDirection: "row"
+  },
+  ...SHARED_SEED_DATA
+}, {
+  name: "Spacer",
+  tag: "Spacer",
+  description: "An adjustable, empty space that can be used to tune the spacing between child elements within Flex",
+  layout: {
+    flex: 1
+  },
+  ...SHARED_SEED_DATA,
+  stylesPanelSections: [StylesPanelSections.LayoutSelectedItem, StylesPanelSections.Background, StylesPanelSections.Margins]
+}, {
+  name: "Stack",
+  tag: "Stack",
+  description: "Stack aligns items vertically or horizontally based on the direction prop",
+  ...SHARED_SEED_DATA,
+  props: {
+    isDisabled: createBoolProp({
+      label: "Disabled",
+      description: "If true, the Stack will be disabled"
+    }),
+    isInvalid: createBoolProp({
+      label: "Invalid",
+      description: "If true, the Stack will be invalid"
+    })
+  }
+}, {
+  name: "ZStack",
+  tag: "ZStack",
+  description: "ZStack aligns items to the z-axis",
+  ...SHARED_SEED_DATA,
+  props: {
+    reversed: createBoolProp({
+      label: "Reversed",
+      description: "Determines whether to reverse the direction of items"
+    })
+  }
+}];

package/lib/module/mappings/NumberInput.js

@@ -0,0 +1,230 @@
+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
+    }
+  }
+}];