@draftbit/core 47.0.0-df8093.2 → 47.0.1-9fd6f2.2

package/lib/module/components/Card.js

@@ -0,0 +1,128 @@
+import React from "react";
+import { StyleSheet, View, Pressable } from "react-native";
+import Image from "./Image";
+import Surface from "./Surface";
+import { Title, Subtitle, Caption } from "./Typography";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const ICON_SIZE = Config.cardIconSize;
+const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
+const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
+const ICON_ELEVATION = Config.cardIconElevation;
+export const TopRightCircleIcon = withTheme(_ref => {
+  let {
+    Icon,
+    icon,
+    theme,
+    onPress
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Surface, {
+    style: {
+      justifyContent: "center",
+      alignItems: "center",
+      elevation: ICON_ELEVATION,
+      position: "absolute",
+      top: 12,
+      right: 12,
+      width: ICON_CONTAINER_SIZE,
+      height: ICON_CONTAINER_SIZE,
+      padding: ICON_CONTAINER_PADDING,
+      borderRadius: ICON_CONTAINER_SIZE,
+      backgroundColor: "rgba(0, 0, 0, 0.1)"
+    }
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    disabled: !onPress,
+    onPress: onPress,
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [{
+        opacity: pressed ? 0.8 : 1
+      }];
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: ICON_SIZE,
+    color: theme.colors.surface
+  })));
+});
+const Card = _ref3 => {
+  let {
+    Icon,
+    image = Config.cardImageUrl,
+    title,
+    subtitle,
+    description,
+    textCentered,
+    icon,
+    aspectRatio = 1.5,
+    elevation = 2,
+    style,
+    onPress,
+    onPressIcon,
+    titleStyle,
+    subtitleStyle,
+    descriptionStyle,
+    theme,
+    children
+  } = _ref3;
+  const {
+    backgroundColor: bgColor,
+    padding,
+    ...styles
+  } = StyleSheet.flatten(style || {});
+  const backgroundColor = bgColor ? bgColor : theme.colors.surface;
+  const innerPadding = padding ? padding : 12;
+  return /*#__PURE__*/React.createElement(Surface, {
+    style: [{
+      elevation,
+      backgroundColor
+    }, styles]
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    disabled: !onPress,
+    onPress: onPress,
+    style: _ref4 => {
+      let {
+        pressed
+      } = _ref4;
+      return [{
+        opacity: pressed ? 0.8 : 1
+      }];
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    style: {
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: innerPadding
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      alignItems: textCentered ? "center" : "flex-start"
+    }
+  }, title || title && title !== "" ? /*#__PURE__*/React.createElement(Title, {
+    text: title,
+    style: titleStyle
+  }) : null, subtitle || subtitle && subtitle !== "" ? /*#__PURE__*/React.createElement(Subtitle, {
+    text: subtitle,
+    style: subtitleStyle
+  }) : null, description || description && description !== "" ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      marginTop: 4
+    }
+  }, /*#__PURE__*/React.createElement(Caption, {
+    text: description,
+    style: descriptionStyle
+  })) : null, children)), icon ? /*#__PURE__*/React.createElement(TopRightCircleIcon, {
+    Icon: Icon,
+    icon: icon,
+    onPress: onPressIcon
+  }) : null));
+};
+export default withTheme(Card);

package/lib/module/components/CardBlock.js

@@ -0,0 +1,98 @@
+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 { View, Text } from "react-native";
+import Image from "./Image";
+import Card from "./DeprecatedCardWrapper";
+import Elevation from "./Elevation";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const CardBlock = _ref => {
+  let {
+    image = Config.cardImageUrl,
+    title,
+    leftDescription,
+    rightDescription,
+    titleCentered,
+    aspectRatio = 1.5,
+    elevation = 2,
+    numColumns = 3,
+    theme: {
+      colors,
+      roundness,
+      typography
+    },
+    style,
+    onPress,
+    ...rest
+  } = _ref;
+  let titleJustification;
+  let titleStyle;
+  if (titleCentered && !leftDescription && !rightDescription) {
+    titleJustification = "center";
+  } else {
+    titleJustification = "space-between";
+  }
+  if (numColumns === 1) {
+    titleStyle = typography.button;
+  } else if (numColumns === 2) {
+    titleStyle = typography.headline6;
+  } else {
+    titleStyle = typography.headline5;
+  }
+  const rightDescriptionStyles = [typography.subtitle2, {
+    color: colors.light
+  }];
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    style: style,
+    onPress: onPress,
+    numColumns: numColumns
+  }, rest), /*#__PURE__*/React.createElement(View, {
+    style: {
+      backgroundColor: colors.background
+    }
+  }, /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation,
+      borderRadius: roundness
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    style: {
+      borderRadius: roundness,
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  })), title ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: titleJustification,
+      marginTop: numColumns === 3 ? 16 : 12
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [titleStyle, {
+      color: colors.strong
+    }]
+  }, title), !leftDescription && rightDescription ? /*#__PURE__*/React.createElement(Text, {
+    style: rightDescriptionStyles
+  }, rightDescription) : null) : null, leftDescription ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: numColumns === 3 ? 4 : 4 / 2
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.body2, {
+      color: colors.medium
+    }]
+  }, leftDescription), rightDescription ? /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: rightDescriptionStyles
+  }, rightDescription) : null) : null));
+};
+export default withTheme(CardBlock);

package/lib/module/components/CardContainer.js

@@ -0,0 +1,121 @@
+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 { View, Text } from "react-native";
+import color from "color";
+import Image from "./Image";
+import Card from "./DeprecatedCardWrapper";
+import Elevation from "./Elevation";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
+const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
+const CardContainer = _ref => {
+  let {
+    Icon,
+    icon,
+    image = Config.cardImageUrl,
+    title,
+    leftDescription,
+    rightDescription,
+    textCentered,
+    aspectRatio = 1.5,
+    elevation = 2,
+    numColumns = 3,
+    theme: {
+      colors,
+      roundness,
+      typography
+    },
+    style,
+    onPress,
+    ...rest
+  } = _ref;
+  let textJustification;
+  let titleStyle;
+  if (textCentered && !rightDescription) {
+    textJustification = "center";
+  } else {
+    textJustification = "space-between";
+  }
+  switch (numColumns) {
+    case 2:
+      titleStyle = typography.headline6;
+      break;
+    case 3:
+      titleStyle = typography.headline5;
+      break;
+  }
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    style: style,
+    onPress: onPress,
+    numColumns: numColumns
+  }, rest), /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation,
+      borderRadius: roundness
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      borderRadius: roundness,
+      overflow: "hidden",
+      backgroundColor: colors.surface
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    style: {
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: numColumns === 1 ? 8 : 16
+    }
+  }, title ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: textJustification
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [titleStyle, {
+      color: colors.strong
+    }]
+  }, title)) : null, leftDescription ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: textJustification,
+      alignItems: "center",
+      marginTop: numColumns === 3 ? 4 : 4 / 2
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.body2, {
+      color: colors.medium
+    }]
+  }, leftDescription), rightDescription ? /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.subtitle2, {
+      color: colors.light
+    }]
+  }, rightDescription) : null) : null), icon ? /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation: Config.cardIconElevation,
+      position: "absolute",
+      top: 12,
+      right: 12,
+      width: ICON_CONTAINER_SIZE,
+      height: ICON_CONTAINER_SIZE,
+      padding: ICON_CONTAINER_PADDING,
+      borderRadius: ICON_CONTAINER_SIZE,
+      backgroundColor: color(colors.strong).alpha(Config.cardIconBackgroundOpacity).rgb().string()
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: Config.cardIconSize,
+    color: colors.surface
+  })) : null)));
+};
+export default withTheme(CardContainer);

package/lib/module/components/CardContainerRating.js

@@ -0,0 +1,125 @@
+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 { View, Text } from "react-native";
+import color from "color";
+import Image from "./Image";
+import Card from "./DeprecatedCardWrapper";
+import Elevation from "./Elevation";
+import StarRating from "./StarRating";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const ICON_CONTAINER_SIZE = Config.cardIconSize * 2;
+const ICON_CONTAINER_PADDING = Config.cardIconSize / 2 - 1;
+const CardContainerRating = _ref => {
+  let {
+    Icon,
+    icon,
+    image = Config.cardImageUrl,
+    title,
+    leftDescription,
+    rightDescription,
+    rating,
+    aspectRatio = 1.5,
+    elevation = 2,
+    numColumns = 3,
+    theme: {
+      colors,
+      roundness,
+      typography
+    },
+    style,
+    onPress,
+    ...rest
+  } = _ref;
+  let titleStyle, rightDescriptionStyle;
+  switch (numColumns) {
+    case 2:
+      titleStyle = typography.headline6;
+      rightDescriptionStyle = typography.body2;
+      break;
+    case 3:
+      titleStyle = typography.headline5;
+      rightDescriptionStyle = typography.caption;
+      break;
+  }
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    style: style,
+    onPress: onPress,
+    numColumns: numColumns
+  }, rest), /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation,
+      borderRadius: roundness
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      borderRadius: roundness,
+      overflow: "hidden",
+      backgroundColor: colors.background
+      //background color is needed for bug on android 9 - https://github.com/facebook/react-native/issues/25093
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    style: {
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: numColumns === 1 ? 8 : 16
+    }
+  }, title ? /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between"
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [titleStyle, {
+      color: colors.strong
+    }]
+  }, title)) : null, leftDescription ? /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.body2, {
+      color: colors.medium,
+      marginTop: numColumns === 3 ? 4 : 4 / 2
+    }]
+  }, leftDescription) : null, /*#__PURE__*/React.createElement(View, {
+    style: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      marginTop: numColumns === 3 ? 16 : 12
+    }
+  }, /*#__PURE__*/React.createElement(StarRating, {
+    Icon: Icon,
+    starSize: numColumns === 1 ? 10 : 16,
+    rating: rating
+  }), /*#__PURE__*/React.createElement(Text, {
+    style: [rightDescriptionStyle, {
+      color: colors.medium,
+      marginLeft: 8
+    }],
+    numberOfLines: 1
+  }, rightDescription))), icon ? /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation: Config.cardIconElevation,
+      position: "absolute",
+      top: 12,
+      right: 12,
+      width: ICON_CONTAINER_SIZE,
+      height: ICON_CONTAINER_SIZE,
+      padding: ICON_CONTAINER_PADDING,
+      borderRadius: ICON_CONTAINER_SIZE,
+      backgroundColor: color(colors.strong).alpha(Config.cardIconBackgroundOpacity).rgb().string()
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: icon,
+    size: Config.cardIconSize,
+    color: colors.surface
+  })) : null)));
+};
+export default withTheme(CardContainerRating);

package/lib/module/components/CardContainerShortImage.js

@@ -0,0 +1,76 @@
+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 { View, Text } from "react-native";
+import Image from "./Image";
+import Card from "./DeprecatedCardWrapper";
+import Elevation from "./Elevation";
+import { withTheme } from "../theming";
+import Config from "./Config";
+const CardContainerShortImage = _ref => {
+  let {
+    image = Config.squareImageUrl,
+    title,
+    subtitle,
+    mode = "left",
+    aspectRatio = 1,
+    elevation = 2,
+    theme: {
+      colors,
+      roundness,
+      typography
+    },
+    style,
+    onPress,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Card, _extends({
+    style: style,
+    onPress: onPress
+  }, rest), /*#__PURE__*/React.createElement(Elevation, {
+    style: {
+      elevation,
+      borderRadius: roundness
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: {
+      overflow: "hidden",
+      flexDirection: "row",
+      justifyContent: mode === "right" ? "space-between" : "flex-start",
+      borderRadius: roundness
+    }
+  }, mode === "left" && /*#__PURE__*/React.createElement(Image, {
+    style: {
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: {
+      padding: 16,
+      backgroundColor: colors.surface,
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.headline5, {
+      color: colors.strong
+    }]
+  }, title), subtitle ? /*#__PURE__*/React.createElement(Text, {
+    numberOfLines: 1,
+    style: [typography.body2, {
+      color: colors.medium,
+      marginTop: 4
+    }]
+  }, subtitle) : null), mode === "right" && /*#__PURE__*/React.createElement(Image, {
+    style: {
+      aspectRatio
+    },
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  }))));
+};
+export default withTheme(CardContainerShortImage);

package/lib/module/components/CardInline.js

@@ -0,0 +1,82 @@
+// @ts-nocheck
+import React from "react";
+import { Pressable, View, StyleSheet } from "react-native";
+import { Title, Subtitle } from "./Typography";
+import Image from "./Image";
+import Surface from "./Surface";
+import Config from "./Config";
+import { withTheme } from "../theming";
+const CardInline = _ref => {
+  let {
+    image = Config.cardImageUrl,
+    title,
+    subtitle,
+    aspectRatio = 1.5,
+    elevation = 2,
+    style,
+    titleStyle,
+    subtitleStyle,
+    onPress
+  } = _ref;
+  const {
+    alignItems,
+    justifyContent,
+    width,
+    height
+  } = StyleSheet.flatten(style || {});
+  const imageStyles = width && height ? {
+    width,
+    height
+  } : {
+    aspectRatio
+  };
+  return /*#__PURE__*/React.createElement(Surface, {
+    style: [{
+      elevation
+    }, style]
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    disabled: !onPress,
+    onPress: onPress,
+    style: _ref2 => {
+      let {
+        pressed
+      } = _ref2;
+      return [{
+        opacity: pressed ? 0.8 : 1
+      }];
+    }
+  }, /*#__PURE__*/React.createElement(Image, {
+    style: imageStyles,
+    source: typeof image === "string" ? {
+      uri: image
+    } : image,
+    resizeMode: "cover"
+  }), /*#__PURE__*/React.createElement(View, {
+    style: [styles.overlay, {
+      justifyContent,
+      alignItems
+    }]
+  }, title ? /*#__PURE__*/React.createElement(Title, {
+    style: [{
+      color: "white"
+    }, titleStyle],
+    text: title
+  }) : null, subtitle ? /*#__PURE__*/React.createElement(Subtitle, {
+    style: [{
+      color: "rgba(255, 255, 255, 0.7)"
+    }, subtitleStyle],
+    text: subtitle
+  }) : null)));
+};
+const styles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    padding: 16,
+    backgroundColor: "rgba(0, 0, 0, 0.2)"
+  }
+});
+export default withTheme(CardInline);