@draftbit/core 46.7.8 → 46.7.9-157e2b.2

package/lib/commonjs/components/DeprecatedFAB.js

@@ -14,7 +14,6 @@ var _theming = require("../theming");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const FAB = _ref => {
   let {
     Icon,
@@ -106,7 +105,8 @@ const FAB = _ref => {
     style: [{
       elevation
     }, style]
-  }, /*#__PURE__*/React.createElement(_reactNative.Pressable, _extends({}, rest, {
+  }, /*#__PURE__*/React.createElement(_reactNative.Pressable, {
+    ...rest,
     onPress: onPress,
     accessibilityState: {
       disabled
@@ -114,7 +114,7 @@ const FAB = _ref => {
     accessibilityRole: "button",
     disabled: disabled || loading,
     style: buttonStyles
-  }), /*#__PURE__*/React.createElement(_reactNative.View, {
+  }, /*#__PURE__*/React.createElement(_reactNative.View, {
     style: styles.content
   }, icon && loading !== true ? /*#__PURE__*/React.createElement(_reactNative.View, {
     style: iconStyle
@@ -154,4 +154,22 @@ const styles = _reactNative.StyleSheet.create({
   }
 });
 var _default = (0, _theming.withTheme)(FAB);
+exports.default = _default;ow",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  icon: {
+    alignItems: "center",
+    justifyContent: "center",
+    width: _Config.default.buttonIconSize
+  },
+  fixed: {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 64,
+    borderRadius: 0
+  }
+});
+var _default = (0, _theming.withTheme)(FAB);
 exports.default = _default;

package/lib/commonjs/components/Divider.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _theming = require("../theming");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Divider = _ref => {
   let {
     style,
@@ -18,20 +19,6 @@ const Divider = _ref => {
     },
     ...rest
   } = _ref;
-  return /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: [{
-      backgroundColor: color || colors.divider,
-      height: _reactNative.StyleSheet.hairlineWidth
-    }, style],
-    ...rest
-  });
-};
-var _default = (0, _theming.withTheme)(Divider);
-exports.default = _default;eme: {
-      colors
-    },
-    ...rest
-  } = _ref;
   return /*#__PURE__*/React.createElement(_reactNative.View, _extends({
     style: [{
       backgroundColor: color || colors.divider,

package/lib/commonjs/components/Elevation.js

@@ -11,6 +11,7 @@ var _theming = require("../theming");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* directly copied from https://github.com/callstack/react-native-paper/blob/main/src/components/Surface.tsx#L62 */
 const Elevation = _ref => {
   let {
@@ -27,24 +28,11 @@ const Elevation = _ref => {
     colors
   } = theme;
   const borderRadius = radius;
-  return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
-    ...rest,
+  return /*#__PURE__*/React.createElement(_reactNative.Animated.View, _extends({}, rest, {
     style: [{
       borderRadius,
       backgroundColor: colors.surface
     }, elevation ? (0, _shadow.default)(elevation) : null, style]
-  }, /*#__PURE__*/React.createElement(_reactNative.View, {
-    style: {
-      overflow: "hidden",
-      borderRadius
-    }
-  }, children));
-};
-var _default = (0, _theming.withTheme)(Elevation);
-exports.default = _default;
-      borderRadius,
-      backgroundColor: colors.surface
-    }, elevation ? (0, _shadow.default)(elevation) : null, style]
   }), /*#__PURE__*/React.createElement(_reactNative.View, {
     style: {
       overflow: "hidden",

package/lib/commonjs/mappings/expo/Image.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = {
+  name: "Expo Image",
+  tag: "Image",
+  packageName: "expo-image",
+  collection: "Expo",
+  prefixCollectionOnImport: true,
+  description: "A responsive Image component",
+  category: _types.COMPONENT_TYPES.media,
+  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Margins, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects, _types.StylesPanelSections.Borders],
+  layout: {
+    width: 100,
+    height: 100
+  },
+  triggers: [_types.Triggers.OnLoad, _types.Triggers.OnError],
+  props: {
+    onLoad: (0, _types.createActionProp)(),
+    onError: (0, _types.createActionProp)(),
+    source: (0, _types.createImageProp)(),
+    placeholder: (0, _types.createImageProp)({
+      label: "Placeholder",
+      description: "An image to display while loading the proper image and no image has been displayed yet or the source is unset.",
+      required: false,
+      defaultValue: null
+    }),
+    contentFit: (0, _types.createTextEnumProp)({
+      label: "Content Fit",
+      description: 'Determines how the image should be resized to fit its container. This property tells the image to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible". It mirrors the CSS object-fit property.',
+      options: ["cover", "contain", "fill", "none", "scale-down"],
+      defaultValue: null
+    }),
+    contentPosition: (0, _types.createTextEnumProp)({
+      label: "Content Position",
+      description: "It is used together with contentFit to specify how the image should be positioned with x/y coordinates inside its own container. An equivalent of the CSS object-position property.",
+      options: ["center", "top", "left", "right", "bottom", "top left", "top center", "top right", "left center", "left top", "left bottom", "right center", "right top", "right bottom", "bottom center", "bottom left", "bottom right"],
+      default: null
+    }),
+    cachePolicy: (0, _types.createTextEnumProp)({
+      label: "Cache Policy",
+      description: "Determines whether to cache the image and where: on the disk, in the memory or both.",
+      options: ["none", "disk", "memory", "memory-disk"],
+      defaultValue: null
+    }),
+    focusable: (0, _types.createStaticBoolProp)({
+      label: "Focusable",
+      description: "Whether this View should be focusable with a non-touch input device and receive focus with a hardware keyboard.",
+      group: _types.GROUPS.android,
+      defaultValue: null
+    }),
+    priority: (0, _types.createTextEnumProp)({
+      label: "Priority",
+      description: "Priorities for completing loads. If more than one load is queued at a time, the load with the higher priority will be started first. Priorities are considered best effort, there are no guarantees about the order in which loads will start or finish.",
+      options: ["normal", "high", "low"],
+      defaultValue: null
+    }),
+    responsivePolicy: (0, _types.createTextEnumProp)({
+      label: "Responsive Policy",
+      description: "Determines whether to choose image source based on container size only on mount or on every resize. Use initial to improve performance.",
+      options: ["initial", "live"],
+      defaultValue: null,
+      group: _types.GROUPS.web
+    }),
+    tintColor: (0, _types.createColorProp)({
+      label: "Tint Color",
+      description: "A color used to tint template images (a bitmap image where only the opacity matters). The color is applied to every non-transparent pixel, causing the image’s shape to adopt that color. This effect is not applied to placeholders."
+    }),
+    accessibilityLabel: (0, _types.createTextProp)({
+      label: "Accessibility Label",
+      description: "The text that's read by the screen reader when the user interacts with the image.",
+      defaultValue: null
+    }),
+    accessible: (0, _types.createStaticBoolProp)({
+      label: "Accessible",
+      description: "When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component.",
+      defaultValue: null
+    }),
+    blurRadius: (0, _types.createStaticNumberProp)({
+      label: "Blur Radius",
+      description: "The radius of the blur in points, 0 means no blur effect. This effect is not applied to placeholders.",
+      defaultValue: null
+    })
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/module/components/CircleImage.js

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import * as React from "react";
 import { Image } from "react-native";
 import Config from "./Config";
@@ -10,6 +9,22 @@ const CircleImage = _ref => {
     ...props
   } = _ref;
   const borderRadius = size / 2;
+  return /*#__PURE__*/React.createElement(Image, {
+    style: [{
+      width: size,
+      height: size,
+      borderRadius
+    }, style],
+    source: typeof source === "string" ? {
+      uri: source
+    } : source,
+    resizeMode: "cover",
+    ...props
+  });
+};
+export default CircleImage;props
+  } = _ref;
+  const borderRadius = size / 2;
   return /*#__PURE__*/React.createElement(Image, _extends({
     style: [{
       width: size,

package/lib/module/mappings/expo/Image.js

@@ -0,0 +1,83 @@
+import { COMPONENT_TYPES, createImageProp, StylesPanelSections, createTextProp, createStaticBoolProp, createTextEnumProp, createStaticNumberProp, Triggers, createActionProp, GROUPS, createColorProp } from "@draftbit/types";
+export const SEED_DATA = {
+  name: "Expo Image",
+  tag: "Image",
+  packageName: "expo-image",
+  collection: "Expo",
+  prefixCollectionOnImport: true,
+  description: "A responsive Image component",
+  category: COMPONENT_TYPES.media,
+  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Margins, StylesPanelSections.Position, StylesPanelSections.Effects, StylesPanelSections.Borders],
+  layout: {
+    width: 100,
+    height: 100
+  },
+  triggers: [Triggers.OnLoad, Triggers.OnError],
+  props: {
+    onLoad: createActionProp(),
+    onError: createActionProp(),
+    source: createImageProp(),
+    placeholder: createImageProp({
+      label: "Placeholder",
+      description: "An image to display while loading the proper image and no image has been displayed yet or the source is unset.",
+      required: false,
+      defaultValue: null
+    }),
+    contentFit: createTextEnumProp({
+      label: "Content Fit",
+      description: 'Determines how the image should be resized to fit its container. This property tells the image to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible". It mirrors the CSS object-fit property.',
+      options: ["cover", "contain", "fill", "none", "scale-down"],
+      defaultValue: null
+    }),
+    contentPosition: createTextEnumProp({
+      label: "Content Position",
+      description: "It is used together with contentFit to specify how the image should be positioned with x/y coordinates inside its own container. An equivalent of the CSS object-position property.",
+      options: ["center", "top", "left", "right", "bottom", "top left", "top center", "top right", "left center", "left top", "left bottom", "right center", "right top", "right bottom", "bottom center", "bottom left", "bottom right"],
+      default: null
+    }),
+    cachePolicy: createTextEnumProp({
+      label: "Cache Policy",
+      description: "Determines whether to cache the image and where: on the disk, in the memory or both.",
+      options: ["none", "disk", "memory", "memory-disk"],
+      defaultValue: null
+    }),
+    focusable: createStaticBoolProp({
+      label: "Focusable",
+      description: "Whether this View should be focusable with a non-touch input device and receive focus with a hardware keyboard.",
+      group: GROUPS.android,
+      defaultValue: null
+    }),
+    priority: createTextEnumProp({
+      label: "Priority",
+      description: "Priorities for completing loads. If more than one load is queued at a time, the load with the higher priority will be started first. Priorities are considered best effort, there are no guarantees about the order in which loads will start or finish.",
+      options: ["normal", "high", "low"],
+      defaultValue: null
+    }),
+    responsivePolicy: createTextEnumProp({
+      label: "Responsive Policy",
+      description: "Determines whether to choose image source based on container size only on mount or on every resize. Use initial to improve performance.",
+      options: ["initial", "live"],
+      defaultValue: null,
+      group: GROUPS.web
+    }),
+    tintColor: createColorProp({
+      label: "Tint Color",
+      description: "A color used to tint template images (a bitmap image where only the opacity matters). The color is applied to every non-transparent pixel, causing the image’s shape to adopt that color. This effect is not applied to placeholders."
+    }),
+    accessibilityLabel: createTextProp({
+      label: "Accessibility Label",
+      description: "The text that's read by the screen reader when the user interacts with the image.",
+      defaultValue: null
+    }),
+    accessible: createStaticBoolProp({
+      label: "Accessible",
+      description: "When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component.",
+      defaultValue: null
+    }),
+    blurRadius: createStaticNumberProp({
+      label: "Blur Radius",
+      description: "The radius of the blur in points, 0 means no blur effect. This effect is not applied to placeholders.",
+      defaultValue: null
+    })
+  }
+};

package/lib/typescript/src/mappings/expo/Image.d.ts

@@ -0,0 +1,155 @@
+export declare const SEED_DATA: {
+    name: string;
+    tag: string;
+    packageName: string;
+    collection: string;
+    prefixCollectionOnImport: boolean;
+    description: string;
+    category: string;
+    stylesPanelSections: string[];
+    layout: {
+        width: number;
+        height: number;
+    };
+    triggers: string[];
+    props: {
+        onLoad: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        onError: {
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            group: string;
+        };
+        source: {
+            label: string;
+            description: string;
+            group: string;
+            formType: string;
+            propType: string;
+            defaultValue: string;
+            editable: boolean;
+            required: boolean;
+        };
+        placeholder: {
+            label: string;
+            description: string;
+            group: string;
+            formType: string;
+            propType: string;
+            defaultValue: string;
+            editable: boolean;
+            required: boolean;
+        };
+        contentFit: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        contentPosition: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        cachePolicy: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        focusable: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        priority: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        responsivePolicy: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: null;
+            options: never[];
+        };
+        tintColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        accessibilityLabel: any;
+        accessible: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            defaultValue: boolean;
+            editable: boolean;
+            required: boolean;
+            group: string;
+        };
+        blurRadius: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+    };
+};
+//# sourceMappingURL=Image.d.ts.map

package/lib/typescript/src/mappings/expo/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../../src/mappings/expo/Image.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHrB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.7.8",
+  "version": "46.7.9-157e2b.2+157e2b1",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -41,7 +41,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@draftbit/react-theme-provider": "^2.1.1",
-    "@draftbit/types": "^46.7.8",
+    "@draftbit/types": "^46.7.9-157e2b.2+157e2b1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -91,5 +91,5 @@
       ]
     ]
   },
-  "gitHead": "3e7e1957fd3bcfd75b854e1e2a0ec688b9d1e330"
+  "gitHead": "157e2b18fb2aca142c8ba3f448f3e6e36232db26"
 }

package/src/mappings/expo/Image.js

@@ -0,0 +1,107 @@
+import { COMPONENT_TYPES, createImageProp, StylesPanelSections, createTextProp, createStaticBoolProp, createTextEnumProp, createStaticNumberProp, Triggers, createActionProp, GROUPS, createColorProp, } from "@draftbit/types";
+export const SEED_DATA = {
+    name: "Expo Image",
+    tag: "Image",
+    packageName: "expo-image",
+    collection: "Expo",
+    prefixCollectionOnImport: true,
+    description: "A responsive Image component",
+    category: COMPONENT_TYPES.media,
+    stylesPanelSections: [
+        StylesPanelSections.Size,
+        StylesPanelSections.Margins,
+        StylesPanelSections.Position,
+        StylesPanelSections.Effects,
+        StylesPanelSections.Borders,
+    ],
+    layout: {
+        width: 100,
+        height: 100,
+    },
+    triggers: [Triggers.OnLoad, Triggers.OnError],
+    props: {
+        onLoad: createActionProp(),
+        onError: createActionProp(),
+        source: createImageProp(),
+        placeholder: createImageProp({
+            label: "Placeholder",
+            description: "An image to display while loading the proper image and no image has been displayed yet or the source is unset.",
+            required: false,
+            defaultValue: null,
+        }),
+        contentFit: createTextEnumProp({
+            label: "Content Fit",
+            description: 'Determines how the image should be resized to fit its container. This property tells the image to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible". It mirrors the CSS object-fit property.',
+            options: ["cover", "contain", "fill", "none", "scale-down"],
+            defaultValue: null,
+        }),
+        contentPosition: createTextEnumProp({
+            label: "Content Position",
+            description: "It is used together with contentFit to specify how the image should be positioned with x/y coordinates inside its own container. An equivalent of the CSS object-position property.",
+            options: [
+                "center",
+                "top",
+                "left",
+                "right",
+                "bottom",
+                "top left",
+                "top center",
+                "top right",
+                "left center",
+                "left top",
+                "left bottom",
+                "right center",
+                "right top",
+                "right bottom",
+                "bottom center",
+                "bottom left",
+                "bottom right",
+            ],
+            default: null,
+        }),
+        cachePolicy: createTextEnumProp({
+            label: "Cache Policy",
+            description: "Determines whether to cache the image and where: on the disk, in the memory or both.",
+            options: ["none", "disk", "memory", "memory-disk"],
+            defaultValue: null,
+        }),
+        focusable: createStaticBoolProp({
+            label: "Focusable",
+            description: "Whether this View should be focusable with a non-touch input device and receive focus with a hardware keyboard.",
+            group: GROUPS.android,
+            defaultValue: null,
+        }),
+        priority: createTextEnumProp({
+            label: "Priority",
+            description: "Priorities for completing loads. If more than one load is queued at a time, the load with the higher priority will be started first. Priorities are considered best effort, there are no guarantees about the order in which loads will start or finish.",
+            options: ["normal", "high", "low"],
+            defaultValue: null,
+        }),
+        responsivePolicy: createTextEnumProp({
+            label: "Responsive Policy",
+            description: "Determines whether to choose image source based on container size only on mount or on every resize. Use initial to improve performance.",
+            options: ["initial", "live"],
+            defaultValue: null,
+            group: GROUPS.web,
+        }),
+        tintColor: createColorProp({
+            label: "Tint Color",
+            description: "A color used to tint template images (a bitmap image where only the opacity matters). The color is applied to every non-transparent pixel, causing the image’s shape to adopt that color. This effect is not applied to placeholders.",
+        }),
+        accessibilityLabel: createTextProp({
+            label: "Accessibility Label",
+            description: "The text that's read by the screen reader when the user interacts with the image.",
+            defaultValue: null,
+        }),
+        accessible: createStaticBoolProp({
+            label: "Accessible",
+            description: "When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component.",
+            defaultValue: null,
+        }),
+        blurRadius: createStaticNumberProp({
+            label: "Blur Radius",
+            description: "The radius of the blur in points, 0 means no blur effect. This effect is not applied to placeholders.",
+            defaultValue: null,
+        }),
+    },
+};

package/src/mappings/expo/Image.ts

@@ -0,0 +1,131 @@
+import {
+  COMPONENT_TYPES,
+  createImageProp,
+  StylesPanelSections,
+  createTextProp,
+  createStaticBoolProp,
+  createTextEnumProp,
+  createStaticNumberProp,
+  Triggers,
+  createActionProp,
+  GROUPS,
+  createColorProp,
+} from "@draftbit/types";
+
+export const SEED_DATA = {
+  name: "Expo Image",
+  tag: "Image",
+  packageName: "expo-image",
+  collection: "Expo",
+  prefixCollectionOnImport: true,
+  description: "A responsive Image component",
+  category: COMPONENT_TYPES.media,
+  stylesPanelSections: [
+    StylesPanelSections.Size,
+    StylesPanelSections.Margins,
+    StylesPanelSections.Position,
+    StylesPanelSections.Effects,
+    StylesPanelSections.Borders,
+  ],
+  layout: {
+    width: 100,
+    height: 100,
+  },
+  triggers: [Triggers.OnLoad, Triggers.OnError],
+  props: {
+    onLoad: createActionProp(),
+    onError: createActionProp(),
+    source: createImageProp(),
+    placeholder: createImageProp({
+      label: "Placeholder",
+      description:
+        "An image to display while loading the proper image and no image has been displayed yet or the source is unset.",
+      required: false,
+      defaultValue: null,
+    }),
+    contentFit: createTextEnumProp({
+      label: "Content Fit",
+      description:
+        'Determines how the image should be resized to fit its container. This property tells the image to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible". It mirrors the CSS object-fit property.',
+      options: ["cover", "contain", "fill", "none", "scale-down"],
+      defaultValue: null,
+    }),
+    contentPosition: createTextEnumProp({
+      label: "Content Position",
+      description:
+        "It is used together with contentFit to specify how the image should be positioned with x/y coordinates inside its own container. An equivalent of the CSS object-position property.",
+      options: [
+        "center",
+        "top",
+        "left",
+        "right",
+        "bottom",
+        "top left",
+        "top center",
+        "top right",
+        "left center",
+        "left top",
+        "left bottom",
+        "right center",
+        "right top",
+        "right bottom",
+        "bottom center",
+        "bottom left",
+        "bottom right",
+      ],
+      default: null,
+    }),
+    cachePolicy: createTextEnumProp({
+      label: "Cache Policy",
+      description:
+        "Determines whether to cache the image and where: on the disk, in the memory or both.",
+      options: ["none", "disk", "memory", "memory-disk"],
+      defaultValue: null,
+    }),
+    focusable: createStaticBoolProp({
+      label: "Focusable",
+      description:
+        "Whether this View should be focusable with a non-touch input device and receive focus with a hardware keyboard.",
+      group: GROUPS.android,
+      defaultValue: null,
+    }),
+    priority: createTextEnumProp({
+      label: "Priority",
+      description:
+        "Priorities for completing loads. If more than one load is queued at a time, the load with the higher priority will be started first. Priorities are considered best effort, there are no guarantees about the order in which loads will start or finish.",
+      options: ["normal", "high", "low"],
+      defaultValue: null,
+    }),
+    responsivePolicy: createTextEnumProp({
+      label: "Responsive Policy",
+      description:
+        "Determines whether to choose image source based on container size only on mount or on every resize. Use initial to improve performance.",
+      options: ["initial", "live"],
+      defaultValue: null,
+      group: GROUPS.web,
+    }),
+    tintColor: createColorProp({
+      label: "Tint Color",
+      description:
+        "A color used to tint template images (a bitmap image where only the opacity matters). The color is applied to every non-transparent pixel, causing the image’s shape to adopt that color. This effect is not applied to placeholders.",
+    }),
+    accessibilityLabel: createTextProp({
+      label: "Accessibility Label",
+      description:
+        "The text that's read by the screen reader when the user interacts with the image.",
+      defaultValue: null,
+    }),
+    accessible: createStaticBoolProp({
+      label: "Accessible",
+      description:
+        "When true, indicates that the view is an accessibility element. When a view is an accessibility element, it groups its children into a single selectable component.",
+      defaultValue: null,
+    }),
+    blurRadius: createStaticNumberProp({
+      label: "Blur Radius",
+      description:
+        "The radius of the blur in points, 0 means no blur effect. This effect is not applied to placeholders.",
+      defaultValue: null,
+    }),
+  },
+};