@draftbit/core 46.4.4-6af1ae.2 → 46.4.4-6ea8db.2

package/lib/module/index.js

@@ -50,6 +50,5 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
 export { default as Slider } from "./components/Slider";
 export { default as Stepper } from "./components/Stepper";
 export { useAuthState } from "./components/useAuthState";
-export { default as Youtube } from "./components/Youtube";
 
 // a comment to fix sourcemap comment issue

package/lib/module/mappings/DatePicker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp } from "@draftbit/types";
 const SEED_DATA_PROPS = {
   label: {
     label: "Label",
@@ -10,6 +10,12 @@ const SEED_DATA_PROPS = {
     required: true,
     group: GROUPS.data
   },
+  labelSize: createNumberProp({
+    label: "Label Size"
+  }),
+  labelColor: createColorProp({
+    label: "Label Color"
+  }),
   mode: {
     label: "Mode",
     description: "Choose between date, time and datetime",
@@ -21,6 +27,12 @@ const SEED_DATA_PROPS = {
     options: ["date", "time", "datetime"],
     group: GROUPS.basic
   },
+  borderColor: createColorProp({
+    label: "Border Color"
+  }),
+  borderColorActive: createColorProp({
+    label: "Border Color"
+  }),
   format: {
     label: "Format",
     description: "Create an output format for the date.",
@@ -138,6 +150,7 @@ export const SEED_DATA = [{
   category: COMPONENT_TYPES.input,
   layout: null,
   triggers: [Triggers.OnDateChange],
+  StylesPanelSections: [StylesPanelSections.Background, StylesPanelSections.Borders, StylesPanelSections.MarginsAndPaddings, StylesPanelSections.Position, StylesPanelSections.Size, StylesPanelSections.Typography],
   props: {
     ...SEED_DATA_PROPS,
     type: {

package/lib/typescript/src/components/DatePicker/DatePicker.d.ts

@@ -15,10 +15,14 @@ declare type Props = {
     mode?: "date" | "time" | "datetime";
     type?: "solid" | "underline";
     label?: string;
+    labelSize?: number;
+    labelColor: string;
     placeholder?: string;
     leftIconName?: string;
     leftIconMode?: "outset" | "inset";
     rightIconName?: string;
+    borderColor?: string;
+    borderColorActive?: string;
 } & IconSlot & TextInputProps;
 declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<React.PropsWithChildren<Props>, "theme"> & {
     theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;

package/lib/typescript/src/index.d.ts

@@ -48,4 +48,3 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
 export { default as Slider } from "./components/Slider";
 export { default as Stepper } from "./components/Stepper";
 export { useAuthState } from "./components/useAuthState";
-export { default as Youtube } from "./components/Youtube";

package/lib/typescript/src/mappings/DatePicker.d.ts

@@ -5,6 +5,7 @@ export declare const SEED_DATA: {
     category: string;
     layout: null;
     triggers: string[];
+    StylesPanelSections: string[];
     props: {
         type: {
             label: string;
@@ -27,6 +28,27 @@ export declare const SEED_DATA: {
             required: boolean;
             group: string;
         };
+        labelSize: {
+            label: string;
+            description: string;
+            formType: string;
+            propType: string;
+            group: string;
+            defaultValue: null;
+            editable: boolean;
+            required: boolean;
+            step: number;
+        };
+        labelColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
         mode: {
             label: string;
             description: string;
@@ -38,6 +60,26 @@ export declare const SEED_DATA: {
             options: string[];
             group: string;
         };
+        borderColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
+        borderColorActive: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
         format: {
             label: string;
             description: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "46.4.4-6af1ae.2+6af1aed",
+  "version": "46.4.4-6ea8db.2+6ea8db0",
   "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.4.4-6af1ae.2+6af1aed",
+    "@draftbit/types": "^46.4.4-6ea8db.2+6ea8db0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
     "@react-native-community/slider": "4.2.3",
@@ -56,9 +56,7 @@
     "react-native-modal-datetime-picker": "^13.0.0",
     "react-native-svg": "12.3.0",
     "react-native-typography": "^1.4.1",
-    "react-native-web-swiper": "^2.2.3",
-    "react-native-web-webview": "^1.0.2",
-    "react-native-youtube-iframe": "^2.2.2"
+    "react-native-web-swiper": "^2.2.3"
   },
   "devDependencies": {
     "@types/color": "^3.0.1",
@@ -83,5 +81,5 @@
       ]
     ]
   },
-  "gitHead": "6af1aed228e5e0e5ae2ac88c708ea49ba5b59369"
+  "gitHead": "6ea8db03ed08c1609f3e2ca301aa3ad79b210d3c"
 }

package/src/components/DatePicker/DatePicker.js

@@ -6,6 +6,7 @@ import { withTheme } from "../../theming";
 import Portal from "../Portal/Portal";
 import Touchable from "../Touchable";
 import DateTimePicker from "./DatePickerComponent";
+import { extractStyles } from "../../utilities";
 const AnimatedText = Animated.createAnimatedComponent(Text);
 const FOCUS_ANIMATION_DURATION = 150;
 const BLUR_ANIMATION_DURATION = 180;
@@ -24,7 +25,7 @@ const MONTHS = [
     "November",
     "December",
 ];
-const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, placeholder, ...props }) => {
+const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disabledOpacity }, date, onDateChange = () => { }, defaultValue, disabled = false, mode = "date", format, type = "underline", leftIconName, rightIconName, leftIconMode = "inset", label, labelSize, labelColor, placeholder, borderColor: inputBorderColor, borderColorActive: inputBorderColorActive, ...props }) => {
     const [value, setValue] = React.useState(date || defaultValue);
     React.useEffect(() => {
         if (defaultValue != null) {
@@ -36,6 +37,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     const [placeholder1, setPlaceholder1] = React.useState("");
     const [focused, setFocused] = React.useState(false);
     const [labelLayout, setLabelLayout] = React.useState({ measured: false, width: 0 });
+    const { textStyles } = extractStyles(style);
     const getValidDate = () => {
         if (!value) {
             return new Date();
@@ -125,8 +127,10 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     };
     const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
     const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
-    const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
-    const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
+    const MAXIMIZED_LABEL_FONT_SIZE = (textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontSize) || typography.subtitle1.fontSize;
+    const MINIMIZED_LABEL_FONT_SIZE = labelSize
+        ? labelSize
+        : typography.caption.fontSize;
     const hasActiveOutline = focused;
     let inputTextColor, activeColor, underlineColor, borderColor, placeholderColor, containerStyle, backgroundColor, inputStyle;
     inputTextColor = colors.strong;
@@ -138,9 +142,9 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         backgroundColor = colors.divider;
     }
     else {
-        activeColor = colors.primary;
-        placeholderColor = borderColor = colors.light;
-        underlineColor = colors.light;
+        activeColor = inputBorderColorActive || colors.primary;
+        placeholderColor = borderColor = inputBorderColor || colors.light;
+        underlineColor = inputBorderColor || colors.light;
         backgroundColor = colors.background;
     }
     const { lineHeight, ...subtitle1 } = typography.subtitle1;
@@ -202,6 +206,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
     const labelStyle = {
         ...typography.subtitle1,
         top: type === "solid" ? 16 : 0,
+        fontFamily: textStyles === null || textStyles === void 0 ? void 0 : textStyles.fontFamily,
         left: leftIconName && leftIconMode === "inset"
             ? ICON_SIZE + (type === "solid" ? 16 : 12)
             : 0,
@@ -245,6 +250,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
         styles.input,
         inputStyle,
         type === "solid" ? { marginHorizontal: 12 } : {},
+        textStyles,
     ];
     // const render = (props) => <NativeTextInput {...props} />;
     return (React.createElement(View, { style: [styles.container, style] },
@@ -282,7 +288,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: colors.light,
+                                        color: labelColor || colors.light,
                                         opacity: labeled.interpolate({
                                             inputRange: [0, 1],
                                             outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -294,7 +300,7 @@ const DatePicker = ({ Icon, style, theme: { colors, typography, roundness, disab
                                     type === "solid" ? { paddingHorizontal: 12 } : {},
                                     labelStyle,
                                     {
-                                        color: placeholderColor,
+                                        color: labelColor || placeholder,
                                         opacity: hasActiveOutline ? labeled : 1,
                                     },
                                 ], numberOfLines: 1 }, label))) : null,

package/src/components/DatePicker/DatePicker.tsx

@@ -23,6 +23,7 @@ import DateTimePicker from "./DatePickerComponent";
 
 import type { Theme } from "../../styles/DefaultTheme";
 import type { IconSlot } from "../../interfaces/Icon";
+import { extractStyles } from "../../utilities";
 
 const AnimatedText = Animated.createAnimatedComponent(Text);
 
@@ -47,10 +48,14 @@ type Props = {
   mode?: "date" | "time" | "datetime";
   type?: "solid" | "underline";
   label?: string;
+  labelSize?: number;
+  labelColor: string;
   placeholder?: string;
   leftIconName?: string;
   leftIconMode?: "outset" | "inset";
   rightIconName?: string;
+  borderColor?: string;
+  borderColorActive?: string;
 } & IconSlot &
   TextInputProps;
 
@@ -84,7 +89,11 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   rightIconName,
   leftIconMode = "inset",
   label,
+  labelSize,
+  labelColor,
   placeholder,
+  borderColor: inputBorderColor,
+  borderColorActive: inputBorderColorActive,
   ...props
 }) => {
   const [value, setValue] = React.useState<any>(date || defaultValue);
@@ -106,6 +115,8 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     width: number;
   }>({ measured: false, width: 0 });
 
+  const { textStyles } = extractStyles(style);
+
   const getValidDate = (): Date => {
     if (!value) {
       return new Date();
@@ -211,8 +222,11 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
 
   const MINIMIZED_LABEL_Y_OFFSET = -(typography.caption.lineHeight + 4);
   const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -(16 * 0.5 + 4);
-  const MAXIMIZED_LABEL_FONT_SIZE = typography.subtitle1.fontSize;
-  const MINIMIZED_LABEL_FONT_SIZE = typography.caption.fontSize;
+  const MAXIMIZED_LABEL_FONT_SIZE =
+    textStyles?.fontSize || typography.subtitle1.fontSize;
+  const MINIMIZED_LABEL_FONT_SIZE = labelSize
+    ? labelSize
+    : typography.caption.fontSize;
 
   const hasActiveOutline = focused;
 
@@ -233,9 +247,9 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     underlineColor = "transparent";
     backgroundColor = colors.divider;
   } else {
-    activeColor = colors.primary;
-    placeholderColor = borderColor = colors.light;
-    underlineColor = colors.light;
+    activeColor = inputBorderColorActive || colors.primary;
+    placeholderColor = borderColor = inputBorderColor || colors.light;
+    underlineColor = inputBorderColor || colors.light;
     backgroundColor = colors.background;
   }
 
@@ -306,6 +320,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
   const labelStyle = {
     ...typography.subtitle1,
     top: type === "solid" ? 16 : 0,
+    fontFamily: textStyles?.fontFamily,
     left:
       leftIconName && leftIconMode === "inset"
         ? ICON_SIZE + (type === "solid" ? 16 : 12)
@@ -351,6 +366,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
     styles.input,
     inputStyle,
     type === "solid" ? { marginHorizontal: 12 } : {},
+    textStyles,
   ];
 
   // const render = (props) => <NativeTextInput {...props} />;
@@ -406,7 +422,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: colors.light,
+                        color: labelColor || colors.light,
                         opacity: labeled.interpolate({
                           inputRange: [0, 1],
                           outputRange: [hasActiveOutline ? 1 : 0, 0],
@@ -423,7 +439,7 @@ const DatePicker: React.FC<React.PropsWithChildren<Props>> = ({
                       type === "solid" ? { paddingHorizontal: 12 } : {},
                       labelStyle,
                       {
-                        color: placeholderColor,
+                        color: labelColor || placeholder,
                         opacity: hasActiveOutline ? labeled : 1,
                       },
                     ]}

package/src/components/Stepper.js

@@ -36,4 +36,5 @@ const Stepper = ({ min = -Infinity, max = Infinity, value: valueProp, defaultVal
             ] }, value),
         React.createElement(IconButton, { Icon: Icon, icon: "MaterialIcons/add", onPress: () => handlePlusOrMinus("plus"), size: iconSize, color: iconColor, disabled: value === max, style: { opacity: value === max ? 0.5 : 1 } })));
 };
+//oh hello
 export default withTheme(Stepper);

package/src/components/Stepper.tsx

@@ -97,5 +97,5 @@ const Stepper: FC<Props> = ({
     </View>
   );
 };
-
+//oh hello
 export default withTheme(Stepper);

package/src/index.js

@@ -49,5 +49,4 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
 export { default as Slider } from "./components/Slider";
 export { default as Stepper } from "./components/Stepper";
 export { useAuthState } from "./components/useAuthState";
-export { default as Youtube } from "./components/Youtube";
 // a comment to fix sourcemap comment issue

package/src/index.tsx

@@ -69,6 +69,5 @@ export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIc
 export { default as Slider } from "./components/Slider";
 export { default as Stepper } from "./components/Stepper";
 export { useAuthState } from "./components/useAuthState";
-export { default as Youtube } from "./components/Youtube";
 
 // a comment to fix sourcemap comment issue

package/src/mappings/DatePicker.js

@@ -1,4 +1,4 @@
-import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, } from "@draftbit/types";
+import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, FIELD_NAME, GROUPS, Triggers, StylesPanelSections, createNumberProp, createColorProp, } from "@draftbit/types";
 const SEED_DATA_PROPS = {
     label: {
         label: "Label",
@@ -10,6 +10,12 @@ const SEED_DATA_PROPS = {
         required: true,
         group: GROUPS.data,
     },
+    labelSize: createNumberProp({
+        label: "Label Size",
+    }),
+    labelColor: createColorProp({
+        label: "Label Color",
+    }),
     mode: {
         label: "Mode",
         description: "Choose between date, time and datetime",
@@ -21,6 +27,12 @@ const SEED_DATA_PROPS = {
         options: ["date", "time", "datetime"],
         group: GROUPS.basic,
     },
+    borderColor: createColorProp({
+        label: "Border Color",
+    }),
+    borderColorActive: createColorProp({
+        label: "Border Color",
+    }),
     format: {
         label: "Format",
         description: "Create an output format for the date.",
@@ -139,6 +151,14 @@ export const SEED_DATA = [
         category: COMPONENT_TYPES.input,
         layout: null,
         triggers: [Triggers.OnDateChange],
+        StylesPanelSections: [
+            StylesPanelSections.Background,
+            StylesPanelSections.Borders,
+            StylesPanelSections.MarginsAndPaddings,
+            StylesPanelSections.Position,
+            StylesPanelSections.Size,
+            StylesPanelSections.Typography,
+        ],
         props: {
             ...SEED_DATA_PROPS,
             type: {

package/src/mappings/DatePicker.ts

@@ -5,6 +5,9 @@ import {
   FIELD_NAME,
   GROUPS,
   Triggers,
+  StylesPanelSections,
+  createNumberProp,
+  createColorProp,
 } from "@draftbit/types";
 
 const SEED_DATA_PROPS = {
@@ -18,6 +21,12 @@ const SEED_DATA_PROPS = {
     required: true,
     group: GROUPS.data,
   },
+  labelSize: createNumberProp({
+    label: "Label Size",
+  }),
+  labelColor: createColorProp({
+    label: "Label Color",
+  }),
   mode: {
     label: "Mode",
     description: "Choose between date, time and datetime",
@@ -29,6 +38,12 @@ const SEED_DATA_PROPS = {
     options: ["date", "time", "datetime"],
     group: GROUPS.basic,
   },
+  borderColor: createColorProp({
+    label: "Border Color",
+  }),
+  borderColorActive: createColorProp({
+    label: "Border Color",
+  }),
   format: {
     label: "Format",
     description: "Create an output format for the date.",
@@ -150,6 +165,14 @@ export const SEED_DATA = [
     category: COMPONENT_TYPES.input,
     layout: null,
     triggers: [Triggers.OnDateChange],
+    StylesPanelSections: [
+      StylesPanelSections.Background,
+      StylesPanelSections.Borders,
+      StylesPanelSections.MarginsAndPaddings,
+      StylesPanelSections.Position,
+      StylesPanelSections.Size,
+      StylesPanelSections.Typography,
+    ],
     props: {
       ...SEED_DATA_PROPS,
       type: {

package/lib/commonjs/components/Youtube.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SEED_DATA = void 0;
-var _types = require("@draftbit/types");
-var _react = _interopRequireDefault(require("react"));
-var _reactNativeYoutubeIframe = _interopRequireDefault(require("react-native-youtube-iframe"));
-var _utilities = require("../utilities");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const Youtube = _ref => {
-  let {
-    videoId,
-    playlist,
-    style,
-    mute,
-    autoplay
-  } = _ref;
-  const {
-    viewStyles: {
-      height,
-      width
-    }
-  } = (0, _utilities.extractStyles)(style);
-  return /*#__PURE__*/_react.default.createElement(_reactNativeYoutubeIframe.default, {
-    height: height,
-    width: width,
-    play: autoplay,
-    videoId: videoId,
-    playList: playlist,
-    mute: mute
-  });
-};
-var _default = Youtube;
-exports.default = _default;
-const SEED_DATA = {
-  name: "Youtube",
-  tag: "Youtube",
-  description: "Youtube Component",
-  category: _types.COMPONENT_TYPES.media,
-  layout: {
-    width: "100%"
-  },
-  props: {
-    videoId: (0, _types.createTextProp)({
-      label: "VideoId",
-      description: "Youtube Video ID"
-    }),
-    playlist: (0, _types.createTextProp)({
-      label: "PlayList",
-      description: "Playlist ID"
-    }),
-    mute: (0, _types.createBoolProp)({
-      label: "Mute",
-      description: "Whether to mute video",
-      defaultValue: false
-    }),
-    autoplay: (0, _types.createBoolProp)({
-      label: "Autoplay",
-      description: "Whether to Autoplay video",
-      defaultValue: false
-    })
-  }
-};
-exports.SEED_DATA = SEED_DATA;

package/lib/commonjs/mappings/Youtube.js

@@ -1,40 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SEED_DATA = void 0;
-var _types = require("@draftbit/types");
-const SEED_DATA = {
-  name: "Youtube",
-  tag: "Youtube",
-  description: "Given a VideoId orPlaylist and play Youtube video",
-  doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
-  code_link: "https://github.com/LonelyCpp/react-native-youtube-iframe",
-  category: _types.COMPONENT_TYPES.media,
-  stylesPanelSections: [_types.StylesPanelSections.Size, _types.StylesPanelSections.Position],
-  layout: {
-    height: 250
-  },
-  props: {
-    videoId: (0, _types.createTextProp)({
-      label: "Video ID",
-      description: "VideoId of the Youtube video.",
-      defaultValue: "nwMUpDESXrI"
-    }),
-    playlist: (0, _types.createTextProp)({
-      label: "Playlist",
-      description: "Playlist of the Youtube videos.",
-      defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks"
-    }),
-    mute: (0, _types.createStaticBoolProp)({
-      label: "Mute Audio",
-      description: "Mute the audio of the video."
-    }),
-    autoplay: (0, _types.createStaticBoolProp)({
-      label: "Auto Play",
-      description: "Autoplay the video on load."
-    })
-  }
-};
-exports.SEED_DATA = SEED_DATA;

package/lib/module/components/Youtube.js

@@ -1,57 +0,0 @@
-import { COMPONENT_TYPES, createBoolProp, createTextProp } from "@draftbit/types";
-import React from "react";
-import YoutubePlayer from "react-native-youtube-iframe";
-import { extractStyles } from "../utilities";
-const Youtube = _ref => {
-  let {
-    videoId,
-    playlist,
-    style,
-    mute,
-    autoplay
-  } = _ref;
-  const {
-    viewStyles: {
-      height,
-      width
-    }
-  } = extractStyles(style);
-  return /*#__PURE__*/React.createElement(YoutubePlayer, {
-    height: height,
-    width: width,
-    play: autoplay,
-    videoId: videoId,
-    playList: playlist,
-    mute: mute
-  });
-};
-export default Youtube;
-export const SEED_DATA = {
-  name: "Youtube",
-  tag: "Youtube",
-  description: "Youtube Component",
-  category: COMPONENT_TYPES.media,
-  layout: {
-    width: "100%"
-  },
-  props: {
-    videoId: createTextProp({
-      label: "VideoId",
-      description: "Youtube Video ID"
-    }),
-    playlist: createTextProp({
-      label: "PlayList",
-      description: "Playlist ID"
-    }),
-    mute: createBoolProp({
-      label: "Mute",
-      description: "Whether to mute video",
-      defaultValue: false
-    }),
-    autoplay: createBoolProp({
-      label: "Autoplay",
-      description: "Whether to Autoplay video",
-      defaultValue: false
-    })
-  }
-};

package/lib/module/mappings/Youtube.js

@@ -1,33 +0,0 @@
-import { COMPONENT_TYPES, createStaticBoolProp, createTextProp, StylesPanelSections } from "@draftbit/types";
-export const SEED_DATA = {
-  name: "Youtube",
-  tag: "Youtube",
-  description: "Given a VideoId orPlaylist and play Youtube video",
-  doc_link: "https://lonelycpp.github.io/react-native-youtube-iframe",
-  code_link: "https://github.com/LonelyCpp/react-native-youtube-iframe",
-  category: COMPONENT_TYPES.media,
-  stylesPanelSections: [StylesPanelSections.Size, StylesPanelSections.Position],
-  layout: {
-    height: 250
-  },
-  props: {
-    videoId: createTextProp({
-      label: "Video ID",
-      description: "VideoId of the Youtube video.",
-      defaultValue: "nwMUpDESXrI"
-    }),
-    playlist: createTextProp({
-      label: "Playlist",
-      description: "Playlist of the Youtube videos.",
-      defaultValue: "PLUa6TiXzjIrwowt6P-uGCJm8ovm-9S1Ks"
-    }),
-    mute: createStaticBoolProp({
-      label: "Mute Audio",
-      description: "Mute the audio of the video."
-    }),
-    autoplay: createStaticBoolProp({
-      label: "Auto Play",
-      description: "Autoplay the video on load."
-    })
-  }
-};