@draftbit/core 46.10.2-eb07a0.2 → 46.10.2

package/src/components/RowHeadlineImageCaption.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { Text, ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
+import { withTheme } from "../theming";
+import Row from "./Row";
+import theme from "../styles/DefaultTheme";
+
+type Props = {
+  title?: string;
+  subtitle?: string;
+  caption?: string;
+  image: string | ImageSourcePropType;
+  style?: StyleProp<ViewStyle>;
+  theme: typeof theme;
+};
+
+const RowHeadlineImageCaption: React.FC<React.PropsWithChildren<Props>> = ({
+  title,
+  subtitle,
+  caption,
+  image,
+  style,
+  theme: { colors, typography },
+}) => {
+  return (
+    <Row
+      titleTypeStyle={typography.headline6}
+      titleColor={colors.strong}
+      subtitleTypeStyle={typography.body2}
+      subtitleColor={colors.medium}
+      title={title}
+      subtitle={subtitle}
+      image={image}
+      right={() => (
+        <Text
+          style={{
+            ...typography.caption,
+            color: colors.strong,
+            marginLeft: 16,
+          }}
+        >
+          {caption}
+        </Text>
+      )}
+      style={style}
+    />
+  );
+};
+
+export default withTheme(RowHeadlineImageCaption);

package/src/components/RowHeadlineImageIcon.js

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import Row from "./Row";
+import Config from "./Config";
+const RowHeadlineImageIcon = ({ Icon, icon, title, image, subtitle, multilineSubtitle = false, style, theme: { colors, typography }, }) => {
+    return (React.createElement(Row, { titleTypeStyle: typography.headline6, titleColor: colors.strong, subtitleTypeStyle: typography.body2, subtitleColor: colors.medium, title: title, subtitle: subtitle, multilineSubtitle: multilineSubtitle, image: image, right: () => (React.createElement(Icon, { name: icon, size: multilineSubtitle
+                ? Config.rowMultiLineIconSize
+                : Config.rowSingleLineIconSize, color: colors.light, style: {
+                marginLeft: 16,
+                alignSelf: multilineSubtitle ? "flex-start" : "center",
+                marginTop: multilineSubtitle ? 4 : 0,
+            } })), style: style }));
+};
+export default withTheme(RowHeadlineImageIcon);

package/src/components/RowHeadlineImageIcon.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { withTheme } from "../theming";
+import type { Theme } from "../styles/DefaultTheme";
+import type { IconSlot } from "../interfaces/Icon";
+
+import Row from "./Row";
+import Config from "./Config";
+import { ImageSourcePropType, StyleProp, ViewStyle } from "react-native";
+
+type Props = {
+  title?: string;
+  image: string | ImageSourcePropType;
+  subtitle?: string;
+  multilineSubtitle?: boolean;
+  icon: string;
+  style?: StyleProp<ViewStyle>;
+  theme: Theme;
+} & IconSlot;
+
+const RowHeadlineImageIcon: React.FC<React.PropsWithChildren<Props>> = ({
+  Icon,
+  icon,
+  title,
+  image,
+  subtitle,
+  multilineSubtitle = false,
+  style,
+  theme: { colors, typography },
+}) => {
+  return (
+    <Row
+      titleTypeStyle={typography.headline6}
+      titleColor={colors.strong}
+      subtitleTypeStyle={typography.body2}
+      subtitleColor={colors.medium}
+      title={title}
+      subtitle={subtitle}
+      multilineSubtitle={multilineSubtitle}
+      image={image}
+      right={() => (
+        <Icon
+          name={icon}
+          size={
+            multilineSubtitle
+              ? Config.rowMultiLineIconSize
+              : Config.rowSingleLineIconSize
+          }
+          color={colors.light}
+          style={{
+            marginLeft: 16,
+            alignSelf: multilineSubtitle ? "flex-start" : "center",
+            marginTop: multilineSubtitle ? 4 : 0,
+          }}
+        />
+      )}
+      style={style}
+    />
+  );
+};
+
+export default withTheme(RowHeadlineImageIcon);

package/src/components/YoutubePlayer/YoutubePlayer.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { View } from "react-native";
+import { extractStyles } from "../../utilities";
+import YouTube from "react-youtube";
+const YoutubePlayer = ({ videoId, playlist, autoplay = false, style, }) => {
+    const { viewStyles } = extractStyles(style);
+    const defaultVideoId = "nwMUpDESXrI";
+    const options = {
+        width: viewStyles.width,
+        height: viewStyles.height,
+        playerVars: {
+            autoplay: autoplay ? 1 : 0,
+            list: playlist,
+            listType: "playlist",
+        },
+    };
+    return (React.createElement(View, { style: viewStyles },
+        React.createElement(YouTube, { videoId: !videoId && !playlist ? defaultVideoId : videoId, opts: options })));
+};
+export default YoutubePlayer;

package/src/components/YoutubePlayer/YoutubePlayer.native.js

@@ -0,0 +1,9 @@
+import React from "react";
+import YoutubePlayerIFrame from "react-native-youtube-iframe";
+import { extractStyles } from "../../utilities";
+const YoutubePlayer = ({ videoId, playlist, autoplay = false, style, }) => {
+    const { viewStyles } = extractStyles(style);
+    const defaultVideoId = "nwMUpDESXrI";
+    return (React.createElement(YoutubePlayerIFrame, { width: viewStyles.width, height: viewStyles.height, play: autoplay, videoId: !videoId && !playlist ? defaultVideoId : videoId, playList: playlist, webViewStyle: viewStyles }));
+};
+export default YoutubePlayer;

package/src/components/YoutubePlayer/YoutubePlayer.native.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import YoutubePlayerIFrame from "react-native-youtube-iframe";
+import { extractStyles } from "../../utilities";
+import { YoutubePlayerProps } from "./YoutubePlayerProps";
+
+const YoutubePlayer: React.FC<YoutubePlayerProps> = ({
+  videoId,
+  playlist,
+  autoplay = false,
+  style,
+}) => {
+  const { viewStyles } = extractStyles(style);
+  const defaultVideoId = "nwMUpDESXrI";
+
+  return (
+    <YoutubePlayerIFrame
+      width={viewStyles.width}
+      height={viewStyles.height}
+      play={autoplay}
+      videoId={!videoId && !playlist ? defaultVideoId : videoId}
+      playList={playlist}
+      webViewStyle={viewStyles}
+    />
+  );
+};
+
+export default YoutubePlayer;

package/src/components/YoutubePlayer/YoutubePlayer.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { View } from "react-native";
+import { extractStyles } from "../../utilities";
+import { YoutubePlayerProps } from "./YoutubePlayerProps";
+import YouTube, { YouTubeProps } from "react-youtube";
+
+const YoutubePlayer: React.FC<YoutubePlayerProps> = ({
+  videoId,
+  playlist,
+  autoplay = false,
+  style,
+}) => {
+  const { viewStyles } = extractStyles(style);
+  const defaultVideoId = "nwMUpDESXrI";
+
+  const options: YouTubeProps["opts"] = {
+    width: viewStyles.width,
+    height: viewStyles.height,
+    playerVars: {
+      autoplay: autoplay ? 1 : 0,
+      list: playlist,
+      listType: "playlist",
+    },
+  };
+
+  return (
+    <View style={viewStyles}>
+      <YouTube
+        videoId={!videoId && !playlist ? defaultVideoId : videoId}
+        opts={options}
+      />
+    </View>
+  );
+};
+
+export default YoutubePlayer;

package/src/components/YoutubePlayer/YoutubePlayerProps.js

@@ -0,0 +1 @@
+export {};

package/src/components/YoutubePlayer/YoutubePlayerProps.ts

@@ -0,0 +1,8 @@
+import { StyleProp, ViewStyle } from "react-native";
+
+export interface YoutubePlayerProps {
+  videoId?: string;
+  playlist?: string;
+  autoplay?: boolean;
+  style?: StyleProp<ViewStyle>;
+}

package/src/components/YoutubePlayer/index.js

@@ -0,0 +1 @@
+export { default as YoutubePlayer } from "./YoutubePlayer";

package/src/components/YoutubePlayer/index.ts

@@ -0,0 +1 @@
+export { default as YoutubePlayer } from "./YoutubePlayer";

package/src/index.js

@@ -36,12 +36,15 @@ export { DeckSwiper, DeckSwiperCard } from "./components/DeckSwiper";
 export { TabView, TabViewItem } from "./components/TabView";
 export { default as Markdown } from "./components/Markdown";
 export { BottomSheet } from "./components/BottomSheet";
-export { default as YoutubePlayer } from "./components/YotubePlayer";
+export { YoutubePlayer } from "./components/YoutubePlayer";
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";
 export { default as ProgressBar } from "./components/ProgressBar";
 export { default as ProgressCircle } from "./components/ProgressCircle";
+export { default as RowBodyIcon } from "./components/RowBodyIcon";
+export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImageCaption";
+export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
 export { default as Slider } from "./components/Slider";
 export { default as Stepper } from "./components/Stepper";
 export { useAuthState } from "./components/useAuthState";

package/src/index.tsx

@@ -60,13 +60,16 @@ export { default as Markdown } from "./components/Markdown";
 
 export { BottomSheet } from "./components/BottomSheet";
 
-export { default as YoutubePlayer } from "./components/YotubePlayer";
+export { YoutubePlayer } from "./components/YoutubePlayer";
 
 /* Deprecated: Fix or Delete!  */
 export { default as DatePicker } from "./components/DatePicker/DatePicker";
 export { default as Picker } from "./components/Picker/Picker";
 export { default as ProgressBar } from "./components/ProgressBar";
 export { default as ProgressCircle } from "./components/ProgressCircle";
+export { default as RowBodyIcon } from "./components/RowBodyIcon";
+export { default as RowHeadlineImageCaption } from "./components/RowHeadlineImageCaption";
+export { default as RowHeadlineImageIcon } from "./components/RowHeadlineImageIcon";
 export { default as Slider } from "./components/Slider";
 export { default as Stepper } from "./components/Stepper";
 export { useAuthState } from "./components/useAuthState";

package/src/mappings/YoutubePlayer.js

@@ -21,12 +21,6 @@ export const SEED_DATA = {
             description: "Playlist of the Youtube videos.",
             defaultValue: null,
         }),
-        mute: createStaticBoolProp({
-            label: "Mute Audio",
-            description: "Mute the audio of the video.",
-            defaultValue: false,
-            required: false,
-        }),
         autoplay: createStaticBoolProp({
             label: "Auto Play",
             description: "Autoplay the video on load.",

package/src/mappings/YoutubePlayer.ts

@@ -27,12 +27,6 @@ export const SEED_DATA = {
       description: "Playlist of the Youtube videos.",
       defaultValue: null,
     }),
-    mute: createStaticBoolProp({
-      label: "Mute Audio",
-      description: "Mute the audio of the video.",
-      defaultValue: false,
-      required: false,
-    }),
     autoplay: createStaticBoolProp({
       label: "Auto Play",
       description: "Autoplay the video on load.",

package/lib/commonjs/mappings/NativeBase/Layout.js

@@ -1,98 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SEED_DATA = void 0;
-var _types = require("@draftbit/types");
-const SHARED_SEED_DATA = {
-  category: _types.COMPONENT_TYPES.layout,
-  packageName: "native-base",
-  stylesPanelSections: _types.CONTAINER_COMPONENT_STYLES_SECTIONS
-};
-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 ration",
-  ...SHARED_SEED_DATA,
-  props: {
-    ratio: (0, _types.createTextProp)({
-      label: "Ratio",
-      description: "The aspect ratio of the container",
-      defaultValue: "4/3",
-      group: _types.GROUPS.basic
-    })
-  }
-}, {
-  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
-}, {
-  name: "Circle",
-  tag: "Circle",
-  description: "Center aligns its contents to the center within itself with a round border radius",
-  ...SHARED_SEED_DATA
-}, {
-  name: "Container",
-  tag: "Container",
-  description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
-  ...SHARED_SEED_DATA
-}, {
-  name: "Column",
-  tag: "Column",
-  description: "Column aligns items vertically",
-  ...SHARED_SEED_DATA
-}, {
-  name: "Row",
-  tag: "Row",
-  description: "Column aligns items horizontally",
-  ...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",
-  ...SHARED_SEED_DATA
-}, {
-  name: "Stack",
-  tag: "Stack",
-  description: "Stack aligns items vertically or horizontally based on the direction prop",
-  ...SHARED_SEED_DATA,
-  props: {
-    direction: (0, _types.createTextEnumProp)({
-      label: "Direction",
-      description: "The direction of the Stack",
-      options: ["row", "column"],
-      defaultValue: "column"
-    }),
-    reversed: (0, _types.createBoolProp)({
-      label: "Reversed",
-      description: "Determines whether to reverse the direction of items"
-    }),
-    isDisabled: (0, _types.createBoolProp)({
-      label: "Disabled",
-      description: "If true, the Stack will be disabled"
-    }),
-    isInvalid: (0, _types.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: (0, _types.createBoolProp)({
-      label: "Reversed",
-      description: "Determines whether to reverse the direction of items"
-    })
-  }
-}];
-exports.SEED_DATA = SEED_DATA;

package/lib/module/components/YotubePlayer.js

@@ -1,30 +0,0 @@
-import React from "react";
-import YoutubePlayerComponent from "react-native-youtube-iframe";
-import { extractStyles } from "../utilities";
-const YoutubePlayer = _ref => {
-  let {
-    videoId,
-    playlist,
-    mute = false,
-    autoplay = false,
-    style
-  } = _ref;
-  const {
-    viewStyles
-  } = extractStyles(style);
-  const {
-    height,
-    width
-  } = viewStyles;
-  const defaultVideoId = "nwMUpDESXrI";
-  return /*#__PURE__*/React.createElement(YoutubePlayerComponent, {
-    height: height,
-    width: width,
-    play: autoplay,
-    videoId: !videoId && !playlist ? defaultVideoId : videoId,
-    playList: playlist,
-    mute: mute,
-    webViewStyle: style
-  });
-};
-export default YoutubePlayer;

package/lib/module/mappings/NativeBase/Layout.js

@@ -1,91 +0,0 @@
-import { COMPONENT_TYPES, createTextEnumProp, createBoolProp, CONTAINER_COMPONENT_STYLES_SECTIONS, createTextProp, GROUPS } from "@draftbit/types";
-const SHARED_SEED_DATA = {
-  category: COMPONENT_TYPES.layout,
-  packageName: "native-base",
-  stylesPanelSections: CONTAINER_COMPONENT_STYLES_SECTIONS
-};
-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 ration",
-  ...SHARED_SEED_DATA,
-  props: {
-    ratio: createTextProp({
-      label: "Ratio",
-      description: "The aspect ratio of the container",
-      defaultValue: "4/3",
-      group: GROUPS.basic
-    })
-  }
-}, {
-  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
-}, {
-  name: "Circle",
-  tag: "Circle",
-  description: "Center aligns its contents to the center within itself with a round border radius",
-  ...SHARED_SEED_DATA
-}, {
-  name: "Container",
-  tag: "Container",
-  description: "The Container restricts a content's width according to current breakpoint, while keeping the size fluid",
-  ...SHARED_SEED_DATA
-}, {
-  name: "Column",
-  tag: "Column",
-  description: "Column aligns items vertically",
-  ...SHARED_SEED_DATA
-}, {
-  name: "Row",
-  tag: "Row",
-  description: "Column aligns items horizontally",
-  ...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",
-  ...SHARED_SEED_DATA
-}, {
-  name: "Stack",
-  tag: "Stack",
-  description: "Stack aligns items vertically or horizontally based on the direction prop",
-  ...SHARED_SEED_DATA,
-  props: {
-    direction: createTextEnumProp({
-      label: "Direction",
-      description: "The direction of the Stack",
-      options: ["row", "column"],
-      defaultValue: "column"
-    }),
-    reversed: createBoolProp({
-      label: "Reversed",
-      description: "Determines whether to reverse the direction of items"
-    }),
-    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/typescript/src/components/YotubePlayer.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-import { StyleProp, ViewStyle } from "react-native";
-interface YoutubePlayerProps {
-    videoId?: string;
-    playlist?: string;
-    mute?: boolean;
-    autoplay?: boolean;
-    style?: StyleProp<ViewStyle>;
-}
-declare const YoutubePlayer: React.FC<YoutubePlayerProps>;
-export default YoutubePlayer;
-//# sourceMappingURL=YotubePlayer.d.ts.map

package/lib/typescript/src/components/YotubePlayer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"YotubePlayer.d.ts","sourceRoot":"","sources":["../../../../src/components/YotubePlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIpD,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/typescript/src/mappings/NativeBase/Layout.d.ts

@@ -1,97 +0,0 @@
-export declare const SEED_DATA: ({
-    props: {
-        ratio: any;
-        direction?: undefined;
-        reversed?: undefined;
-        isDisabled?: undefined;
-        isInvalid?: undefined;
-    };
-    category: string;
-    packageName: string;
-    stylesPanelSections: string[];
-    name: string;
-    tag: string;
-    description: string;
-} | {
-    category: string;
-    packageName: string;
-    stylesPanelSections: string[];
-    name: string;
-    tag: string;
-    description: string;
-} | {
-    props: {
-        direction: {
-            group: string;
-            label: string;
-            description: string;
-            editable: boolean;
-            required: boolean;
-            formType: string;
-            propType: string;
-            defaultValue: null;
-            options: never[];
-        };
-        reversed: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: boolean;
-            editable: boolean;
-            required: boolean;
-            group: string;
-        };
-        isDisabled: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: boolean;
-            editable: boolean;
-            required: boolean;
-            group: string;
-        };
-        isInvalid: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: boolean;
-            editable: boolean;
-            required: boolean;
-            group: string;
-        };
-        ratio?: undefined;
-    };
-    category: string;
-    packageName: string;
-    stylesPanelSections: string[];
-    name: string;
-    tag: string;
-    description: string;
-} | {
-    props: {
-        reversed: {
-            label: string;
-            description: string;
-            formType: string;
-            propType: string;
-            defaultValue: boolean;
-            editable: boolean;
-            required: boolean;
-            group: string;
-        };
-        ratio?: undefined;
-        direction?: undefined;
-        isDisabled?: undefined;
-        isInvalid?: undefined;
-    };
-    category: string;
-    packageName: string;
-    stylesPanelSections: string[];
-    name: string;
-    tag: string;
-    description: string;
-})[];
-//# sourceMappingURL=Layout.d.ts.map

package/lib/typescript/src/mappings/NativeBase/Layout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../src/mappings/NativeBase/Layout.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAqGrB,CAAC"}

package/src/components/YotubePlayer.js

@@ -1,10 +0,0 @@
-import React from "react";
-import YoutubePlayerComponent from "react-native-youtube-iframe";
-import { extractStyles } from "../utilities";
-const YoutubePlayer = ({ videoId, playlist, mute = false, autoplay = false, style, }) => {
-    const { viewStyles } = extractStyles(style);
-    const { height, width } = viewStyles;
-    const defaultVideoId = "nwMUpDESXrI";
-    return (React.createElement(YoutubePlayerComponent, { height: height, width: width, play: autoplay, videoId: !videoId && !playlist ? defaultVideoId : videoId, playList: playlist, mute: mute, webViewStyle: style }));
-};
-export default YoutubePlayer;