@draftbit/core 46.8.2-fee87c.2 → 46.9.1-1cf4d4.2

package/lib/commonjs/components/Markdown.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeMarkdownDisplay = _interopRequireDefault(require("react-native-markdown-display"));
+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; }
+const Markdown = _ref => {
+  let {
+    children,
+    style
+  } = _ref;
+  return (
+    /*#__PURE__*/
+    //'body' style applies to all markdown components
+    //@ts-ignore TS does not like the type of this named style for some reason
+    React.createElement(_reactNativeMarkdownDisplay.default, {
+      style: {
+        body: _reactNative.StyleSheet.flatten(style)
+      }
+    }, children)
+  );
+};
+var _default = Markdown;
+exports.default = _default;

package/lib/commonjs/components/Shadow.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNativeShadow = require("react-native-shadow-2");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 Shadow = _ref => {
+  let {
+    offsetX = 0,
+    offsetY = 0,
+    showShadowSideStart = true,
+    showShadowSideEnd = true,
+    showShadowSideTop = true,
+    showShadowSideBottom = true,
+    showShadowCornerTopStart = true,
+    showShadowCornerTopEnd = true,
+    showShadowCornerBottomStart = true,
+    showShadowCornerBottomEnd = true,
+    paintInside = false,
+    style,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactNativeShadow.Shadow, _extends({
+    offset: [offsetX, offsetY],
+    sides: {
+      start: showShadowSideStart,
+      end: showShadowSideEnd,
+      top: showShadowSideTop,
+      bottom: showShadowSideBottom
+    },
+    corners: {
+      topStart: showShadowCornerTopStart,
+      topEnd: showShadowCornerTopEnd,
+      bottomStart: showShadowCornerBottomStart,
+      bottomEnd: showShadowCornerBottomEnd
+    },
+    containerStyle: style,
+    paintInside: paintInside
+  }, rest));
+};
+var _default = Shadow;
+exports.default = _default;

package/lib/commonjs/components/TabView/TabView.js

@@ -6,9 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactNativeTabView = require("react-native-tab-view");
-var _TabViewItem = _interopRequireDefault(require("./TabViewItem"));
 var _theming = require("../../theming");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _utilities = require("../../utilities");
 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); }
@@ -33,12 +32,22 @@ const TabViewComponent = _ref => {
   const [index, setIndex] = React.useState(0);
   const [routes, setRoutes] = React.useState([]);
   const [tabScenes, setTabScenes] = React.useState({});
+  const {
+    textStyles,
+    viewStyles
+  } = (0, _utilities.extractStyles)(style);
+
+  //Check type of child using props
+  //Regular '.type' cannot work because Draftbit strips the type in Draft view
+  const instanceOfTabViewItemProps = object => {
+    return "title" in object;
+  };
 
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes = [];
     const scenes = {};
-    React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === _TabViewItem.default).forEach((item, idx) => {
+    React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && instanceOfTabViewItemProps(child.props)).forEach((item, idx) => {
       const child = item;
       newRoutes.push({
         key: idx.toString(),
@@ -67,6 +76,7 @@ const TabViewComponent = _ref => {
       indicatorStyle: {
         backgroundColor: indicatorColor || theme.colors.primary
       },
+      labelStyle: textStyles,
       renderIcon: _ref2 => {
         let {
           route,
@@ -75,15 +85,21 @@ const TabViewComponent = _ref => {
         return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
           name: route.icon,
           color: color,
-          size: 36
+          size: 16
         }) : null;
       },
-      style: [{
+      style: {
         backgroundColor: tabsBackgroundColor || theme.colors.background
-      }, style]
+      }
     }));
   };
+
+  //Cannot render TabView without at least one tab
+  if (!routes.length) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
   return /*#__PURE__*/React.createElement(_reactNativeTabView.TabView, {
+    style: [viewStyles],
     navigationState: {
       index,
       routes

package/lib/commonjs/constants.js

@@ -12,4 +12,4 @@ const APPROX_STATUSBAR_HEIGHT = _reactNative.Platform.select({
   android: DEFAULT_STATUSBAR_HEIGHT_EXPO,
   ios: _reactNative.Platform.Version < 11 ? DEFAULT_STATUSBAR_HEIGHT_EXPO : 0
 });
-exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;
+exports.APPROX_STATUSBAR_HEIGHT = APPROX_STATUSBAR_HEIGHT;AR_HEIGHT;

package/lib/commonjs/index.js

@@ -177,6 +177,12 @@ Object.defineProperty(exports, "Link", {
     return _Text.Link;
   }
 });
+Object.defineProperty(exports, "Markdown", {
+  enumerable: true,
+  get: function () {
+    return _Markdown.default;
+  }
+});
 Object.defineProperty(exports, "NumberInput", {
   enumerable: true,
   get: function () {
@@ -273,6 +279,12 @@ Object.defineProperty(exports, "ScreenContainer", {
     return _ScreenContainer.default;
   }
 });
+Object.defineProperty(exports, "Shadow", {
+  enumerable: true,
+  get: function () {
+    return _Shadow.default;
+  }
+});
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function () {
@@ -425,8 +437,10 @@ var _ActionSheet = require("./components/ActionSheet");
 var _Swiper = require("./components/Swiper");
 var _Layout = require("./components/Layout");
 var _index = require("./components/RadioButton/index");
+var _Shadow = _interopRequireDefault(require("./components/Shadow"));
 var _DeckSwiper = require("./components/DeckSwiper");
 var _TabView = require("./components/TabView");
+var _Markdown = _interopRequireDefault(require("./components/Markdown"));
 var _DatePicker = _interopRequireDefault(require("./components/DatePicker/DatePicker"));
 var _Picker = _interopRequireDefault(require("./components/Picker/Picker"));
 var _ProgressBar = _interopRequireDefault(require("./components/ProgressBar"));

package/lib/commonjs/mappings/FlashList.js

@@ -11,10 +11,7 @@ const SEED_DATA = [{
   description: "Masonry Flashlist by Shopify",
   packageName: "@shopify/flash-list",
   category: _types.COMPONENT_TYPES.data,
-  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
-  layout: {
-    flex: 1
-  },
+  stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.MarginsAndPaddings],
   triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
   props: {
     onRefresh: (0, _types.createActionProp)(),
@@ -61,10 +58,7 @@ const SEED_DATA = [{
   description: "Flashlist by Shopify",
   packageName: "@shopify/flash-list",
   category: _types.COMPONENT_TYPES.data,
-  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
-  layout: {
-    flex: 1
-  },
+  stylesPanelSections: [_types.StylesPanelSections.Background, _types.StylesPanelSections.MarginsAndPaddings],
   triggers: [_types.Triggers.OnRefresh, _types.Triggers.OnEndReached],
   props: {
     onRefresh: (0, _types.createActionProp)(),

package/lib/commonjs/mappings/Markdown.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = {
+  name: "Markdown",
+  tag: "Markdown",
+  description: "A component that renders markdown",
+  category: _types.COMPONENT_TYPES.text,
+  stylesPanelSections: [_types.StylesPanelSections.Typography, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Effects],
+  props: {
+    children: {
+      group: _types.GROUPS.data,
+      label: "Markdown Text",
+      description: "Markdown text to be rendered ",
+      editable: true,
+      required: true,
+      formType: _types.FORM_TYPES.string,
+      propType: _types.PROP_TYPES.STRING,
+      defaultValue: "### Markdown"
+    }
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/Shadow.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SEED_DATA = void 0;
+var _types = require("@draftbit/types");
+const SEED_DATA = {
+  name: "Shadow",
+  tag: "Shadow",
+  description: "A cross-platform, universal shadow.",
+  category: _types.COMPONENT_TYPES.view,
+  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS,
+  props: {
+    disabled: (0, _types.createDisabledProp)({
+      description: "Disables the shadow."
+    }),
+    startColor: (0, _types.createColorProp)({
+      label: "Start Color",
+      description: "The initial gradient color of the shadow.",
+      defaultValue: null
+    }),
+    endColor: (0, _types.createColorProp)({
+      label: "End Color",
+      description: "The final gradient color of the shadow.",
+      defaultValue: null
+    }),
+    distance: (0, _types.createStaticNumberProp)({
+      label: "Distance",
+      description: "The distance of the shadow."
+    }),
+    paintInside: (0, _types.createStaticBoolProp)({
+      label: "Paint Inside",
+      description: "Apply the shadow below/inside the content.",
+      defaultValue: false
+    }),
+    stretch: (0, _types.createStaticBoolProp)({
+      label: "Stretch",
+      description: "Force children to occupy all available horizontal space.",
+      defaultValue: null
+    }),
+    offsetX: (0, _types.createStaticNumberProp)({
+      label: "Offset X",
+      description: "Moves the shadow in the x direction",
+      defeaultValue: 0
+    }),
+    offsetY: (0, _types.createStaticNumberProp)({
+      label: "Offset Y",
+      description: "Moves the shadow in the y direction",
+      defeaultValue: 0
+    }),
+    showShadowSideStart: (0, _types.createStaticBoolProp)({
+      label: "Show Shadow Start",
+      description: "Whether to show shadow on the start side or not",
+      defaultValue: true,
+      group: _types.GROUPS.advanced
+    }),
+    showShadowSideEnd: (0, _types.createStaticBoolProp)({
+      label: "Show Shadow End",
+      description: "Whether to show shadow on the end side or not",
+      defaultValue: true,
+      group: _types.GROUPS.advanced
+    }),
+    showShadowSideTop: (0, _types.createStaticBoolProp)({
+      label: "Show Shadow Top",
+      description: "Whether to show shadow on the top side or not",
+      defaultValue: true,
+      group: _types.GROUPS.advanced
+    }),
+    showShadowSideBottom: (0, _types.createStaticBoolProp)({
+      label: "Show Shadow Bottom",
+      description: "Whether to show shadow on the bottom side or not",
+      defaultValue: true,
+      group: _types.GROUPS.advanced
+    }),
+    showShadowCornerTopStart: (0, _types.createStaticBoolProp)({
+      label: "Show Shadow Top Start Corner",
+      description: "Whether to show shadow on the top start corner or not",
+      defaultValue: true,
+      group: _types.GROUPS.advanced
+    }),
+    showShadowCornerTopEnd: (0, _types.createStaticBoolProp)({
+      label: "Show Shadow Top End Corner",
+      description: "Whether to show shadow on the top end corner or not",
+      defaultValue: true,
+      group: _types.GROUPS.advanced
+    }),
+    showShadowCornerBottomStart: (0, _types.createStaticBoolProp)({
+      label: "Show Shadow Bottom Start Corner",
+      description: "Whether to show shadow on the bottom start corner or not",
+      defaultValue: true,
+      group: _types.GROUPS.advanced
+    }),
+    showShadowCornerBottomEnd: (0, _types.createStaticBoolProp)({
+      label: "Show Shadow Bottom End Corner",
+      description: "Whether to show shadow on the bottom end corner or not",
+      defaultValue: true,
+      group: _types.GROUPS.advanced
+    })
+  }
+};
+exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/TabView.js

@@ -10,7 +10,7 @@ const SEED_DATA = {
   tag: "TabView",
   description: "Tab view container",
   category: _types.COMPONENT_TYPES.swiper,
-  stylesPanelSections: [..._types.BLOCK_STYLES_SECTIONS, _types.StylesPanelSections.Background],
+  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.MarginsAndPaddings, _types.StylesPanelSections.Position, _types.StylesPanelSections.Effects, _types.StylesPanelSections.LayoutSelectedItem, _types.StylesPanelSections.Background, _types.StylesPanelSections.Typography],
   triggers: [_types.Triggers.OnIndexChanged, _types.Triggers.OnEndReached],
   props: {
     onIndexChanged: (0, _types.createActionProp)({
@@ -39,9 +39,9 @@ const SEED_DATA = {
       defaultValue: true
     }),
     scrollEnabled: (0, _types.createStaticBoolProp)({
-      label: "Scroll Enabled",
+      label: "Tab Scroll Enabled",
       description: "Whether scrolling of tabs is enabled or not",
-      defaultValue: true
+      defaultValue: false
     }),
     activeColor: (0, _types.createColorProp)({
       label: "Active Color",
@@ -55,8 +55,9 @@ const SEED_DATA = {
     }),
     pressColor: (0, _types.createColorProp)({
       label: "Press Color",
-      description: "Color of ripple when pressed (android only)",
-      defaultValue: "primary"
+      description: "Color of ripple when pressed",
+      defaultValue: "primary",
+      group: _types.GROUPS.android
     }),
     indicatorColor: (0, _types.createColorProp)({
       label: "Indicator Color",

package/lib/commonjs/mappings/TabViewItem.js

@@ -18,8 +18,9 @@ const SEED_DATA = {
     title: (0, _types.createTextProp)({
       label: "Title",
       description: "Title of tab item",
-      defaultValue: null,
-      required: true
+      defaultValue: "Title",
+      required: true,
+      group: _types.GROUPS.basic
     }),
     icon: (0, _types.createIconProp)({
       defaultValue: null,
@@ -28,7 +29,8 @@ const SEED_DATA = {
     accessibilityLabel: (0, _types.createTextProp)({
       label: "Accessibility Label",
       description: "Accessibility Label",
-      defaultValue: null
+      defaultValue: null,
+      group: _types.GROUPS.accessibility
     })
   }
 };

package/lib/module/components/Markdown.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import MarkdownComponent from "react-native-markdown-display";
+const Markdown = _ref => {
+  let {
+    children,
+    style
+  } = _ref;
+  return (
+    /*#__PURE__*/
+    //'body' style applies to all markdown components
+    //@ts-ignore TS does not like the type of this named style for some reason
+    React.createElement(MarkdownComponent, {
+      style: {
+        body: StyleSheet.flatten(style)
+      }
+    }, children)
+  );
+};
+export default Markdown;

package/lib/module/components/Shadow.js

@@ -0,0 +1,38 @@
+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 React from "react";
+import { Shadow as ShadowComponent } from "react-native-shadow-2";
+const Shadow = _ref => {
+  let {
+    offsetX = 0,
+    offsetY = 0,
+    showShadowSideStart = true,
+    showShadowSideEnd = true,
+    showShadowSideTop = true,
+    showShadowSideBottom = true,
+    showShadowCornerTopStart = true,
+    showShadowCornerTopEnd = true,
+    showShadowCornerBottomStart = true,
+    showShadowCornerBottomEnd = true,
+    paintInside = false,
+    style,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement(ShadowComponent, _extends({
+    offset: [offsetX, offsetY],
+    sides: {
+      start: showShadowSideStart,
+      end: showShadowSideEnd,
+      top: showShadowSideTop,
+      bottom: showShadowSideBottom
+    },
+    corners: {
+      topStart: showShadowCornerTopStart,
+      topEnd: showShadowCornerTopEnd,
+      bottomStart: showShadowCornerBottomStart,
+      bottomEnd: showShadowCornerBottomEnd
+    },
+    containerStyle: style,
+    paintInside: paintInside
+  }, rest));
+};
+export default Shadow;

package/lib/module/components/TabView/TabView.js

@@ -1,8 +1,8 @@
 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 { TabView, TabBar, SceneMap } from "react-native-tab-view";
-import TabViewItem from "./TabViewItem";
 import { withTheme } from "../../theming";
+import { extractStyles } from "../../utilities";
 const TabViewComponent = _ref => {
   let {
     Icon,
@@ -24,12 +24,22 @@ const TabViewComponent = _ref => {
   const [index, setIndex] = React.useState(0);
   const [routes, setRoutes] = React.useState([]);
   const [tabScenes, setTabScenes] = React.useState({});
+  const {
+    textStyles,
+    viewStyles
+  } = extractStyles(style);
+
+  //Check type of child using props
+  //Regular '.type' cannot work because Draftbit strips the type in Draft view
+  const instanceOfTabViewItemProps = object => {
+    return "title" in object;
+  };
 
   //Populate routes and scenes based on children
   React.useEffect(() => {
     const newRoutes = [];
     const scenes = {};
-    React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && child.type === TabViewItem).forEach((item, idx) => {
+    React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child) && instanceOfTabViewItemProps(child.props)).forEach((item, idx) => {
       const child = item;
       newRoutes.push({
         key: idx.toString(),
@@ -58,6 +68,7 @@ const TabViewComponent = _ref => {
       indicatorStyle: {
         backgroundColor: indicatorColor || theme.colors.primary
       },
+      labelStyle: textStyles,
       renderIcon: _ref2 => {
         let {
           route,
@@ -66,15 +77,21 @@ const TabViewComponent = _ref => {
         return route !== null && route !== void 0 && route.icon ? /*#__PURE__*/React.createElement(Icon, {
           name: route.icon,
           color: color,
-          size: 36
+          size: 16
         }) : null;
       },
-      style: [{
+      style: {
         backgroundColor: tabsBackgroundColor || theme.colors.background
-      }, style]
+      }
     }));
   };
+
+  //Cannot render TabView without at least one tab
+  if (!routes.length) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null);
+  }
   return /*#__PURE__*/React.createElement(TabView, {
+    style: [viewStyles],
     navigationState: {
       index,
       routes

package/lib/module/index.js

@@ -31,8 +31,10 @@ export { ActionSheet, ActionSheetItem, ActionSheetCancel } from "./components/Ac
 export { Swiper, SwiperItem } from "./components/Swiper";
 export { Center, Circle, Square, Row, Stack, Spacer } from "./components/Layout";
 export { RadioButton, RadioButtonGroup, RadioButtonRow, RadioButtonFieldGroup } from "./components/RadioButton/index";
+export { default as Shadow } from "./components/Shadow";
 export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 export { TabView, TabViewItem } from "./components/TabView";
+export { default as Markdown } from "./components/Markdown";
 
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";

package/lib/module/mappings/FlashList.js

@@ -1,14 +1,11 @@
-import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, CONTAINER_COMPONENT_STYLES_SECTIONS, GROUPS, Triggers, createActionProp, createStaticNumberProp, createColorProp } from "@draftbit/types";
+import { COMPONENT_TYPES, createNumColumnsType, createStaticBoolProp, createNumberProp, GROUPS, Triggers, createActionProp, createStaticNumberProp, createColorProp, StylesPanelSections } from "@draftbit/types";
 export const SEED_DATA = [{
   name: "Masonry List",
   tag: "MasonryFlashList",
   description: "Masonry Flashlist by Shopify",
   packageName: "@shopify/flash-list",
   category: COMPONENT_TYPES.data,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-  layout: {
-    flex: 1
-  },
+  stylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.MarginsAndPaddings],
   triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
   props: {
     onRefresh: createActionProp(),
@@ -55,10 +52,7 @@ export const SEED_DATA = [{
   description: "Flashlist by Shopify",
   packageName: "@shopify/flash-list",
   category: COMPONENT_TYPES.data,
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS,
-  layout: {
-    flex: 1
-  },
+  stylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.MarginsAndPaddings],
   triggers: [Triggers.OnRefresh, Triggers.OnEndReached],
   props: {
     onRefresh: createActionProp(),

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"
+    }
+  }
+};