rnnovaui 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rnnovaui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "",
   "main": "src/index.js",
   "react-native": "src/index.js",

package/src/components/Card/UICard.js

@@ -1,11 +1,13 @@
 import React, { memo, useCallback, useMemo, useRef } from "react";
 
 import {
+  ActivityIndicator,
   Animated,
   Easing,
   Image,
   Pressable,
   StyleSheet,
+  Text,
   View,
 } from "react-native";
 
@@ -19,35 +21,71 @@ const CARD_VARIANTS = {
 };
 
 const CARD_RADIUS = {
-  none: 0,
-  sm: 8,
-  md: 12,
-  lg: 16,
-  xl: 20,
+  none: "none",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+};
+
+const BADGE_POSITIONS = {
+  topLeft: "topLeft",
+  topCenter: "topCenter",
+  topRight: "topRight",
+
+  centerLeft: "centerLeft",
+  center: "center",
+  centerRight: "centerRight",
+
+  bottomLeft: "bottomLeft",
+  bottomCenter: "bottomCenter",
+  bottomRight: "bottomRight",
 };
 
 const FALLBACK_COLORS = {
-  background: "#FFFFFF",
-  surface: "#F8F8F8",
   card: "#FFFFFF",
+  surface: "#F8F8F8",
   border: "#E5E5E5",
-  shadow: "#000000",
+
+  primary: "#FF5A1F",
+  primarySoft: "#FFF0EA",
+
+  success: "#16A34A",
+  danger: "#DC2626",
+  warning: "#D97706",
+  info: "#2563EB",
+
+  white: "#FFFFFF",
+  black: "#111111",
+
+  text: "#111111",
+  textSecondary: "#525252",
 };
 
 function UICardComponent({
   children,
 
   header = null,
-
   content = null,
-
   footer = null,
 
   image = null,
-
   imageSource = null,
 
-  imageHeight = 180,
+  imageHeight = 190,
+  imageResizeMode = "cover",
+
+  imageStyle,
+
+  badges = [],
+
+  badgeGap = 8,
+
+  badgeStyle,
+
+  badgeTextStyle,
+
+  badgeContainerStyle,
 
   variant = "default",
 
@@ -60,25 +98,22 @@ function UICardComponent({
   style,
 
   headerStyle,
+  contentStyle,
+  footerStyle,
 
-  imageStyle,
+  imageOverlay = null,
 
-  contentStyle,
+  imageOverlayStyle,
 
-  footerStyle,
+  pressable = false,
 
   disabled = false,
 
   loading = false,
 
-  pressable = false,
-
   onPress,
-
   onLongPress,
-
   onPressIn,
-
   onPressOut,
 
   pressAnimation = true,
@@ -90,7 +125,6 @@ function UICardComponent({
   testID,
 
   accessibilityLabel,
-
   accessibilityHint,
 
   ...props
@@ -107,7 +141,9 @@ function UICardComponent({
 
   const safeVariant = CARD_VARIANTS[variant] ? variant : CARD_VARIANTS.default;
 
-  const resolvedRadius = CARD_RADIUS[radius] ?? CARD_RADIUS.lg;
+  const resolvedRadius = CARD_RADIUS[radius] ? radius : CARD_RADIUS.lg;
+
+  const radiusValue = getRadiusValue(resolvedRadius, theme);
 
   const cardColors = useMemo(
     () => getCardColors(safeVariant, colors),
@@ -215,14 +251,8 @@ function UICardComponent({
 
         borderWidth: cardColors.borderWidth,
 
-        borderRadius: resolvedRadius,
-
-        padding,
-      },
-
-      cardColors.shadow,
+        borderRadius: radiusValue,
 
-      {
         opacity: isDisabled ? 0.55 : 1,
 
         transform: [
@@ -232,89 +262,128 @@ function UICardComponent({
         ],
       },
 
+      cardColors.shadow,
+
       style,
     ],
-    [cardColors, resolvedRadius, padding, isDisabled, scale, style],
+    [cardColors, radiusValue, isDisabled, scale, style],
   );
 
+  const renderImage = Boolean(image || imageSource);
+
+  const renderBody = Boolean(header || content || children || footer);
+
   const cardContent = (
     <>
-      {image || imageSource ? (
+      {renderImage ? (
         <View
           style={[
-            styles.imageWrapper,
+            styles.imageSection,
+
             {
               height: imageHeight,
 
-              borderTopLeftRadius: resolvedRadius,
+              borderTopLeftRadius: radiusValue,
 
-              borderTopRightRadius: resolvedRadius,
+              borderTopRightRadius: radiusValue,
             },
           ]}
         >
           {image || (
             <Image
               source={imageSource}
-              resizeMode="cover"
+              resizeMode={imageResizeMode}
               style={[styles.image, imageStyle]}
             />
           )}
-        </View>
-      ) : null}
 
-      {header ? (
-        <View
-          style={[
-            styles.header,
-            {
-              marginTop: image || imageSource ? gap : 0,
-            },
-            headerStyle,
-          ]}
-        >
-          {header}
+          {imageOverlay ? (
+            <View
+              pointerEvents="none"
+              style={[styles.imageOverlay, imageOverlayStyle]}
+            >
+              {imageOverlay}
+            </View>
+          ) : null}
+
+          {badges.length > 0 ? (
+            <View pointerEvents="box-none" style={styles.badgeLayer}>
+              {badges.map((badge, index) => (
+                <CardBadge
+                  key={
+                    badge.id ||
+                    badge.key ||
+                    `${badge.position || "topLeft"}-${index}`
+                  }
+                  badge={badge}
+                  index={index}
+                  gap={badgeGap}
+                  defaultStyle={badgeStyle}
+                  defaultTextStyle={badgeTextStyle}
+                  defaultContainerStyle={badgeContainerStyle}
+                  colors={colors}
+                />
+              ))}
+            </View>
+          ) : null}
         </View>
       ) : null}
 
-      {content ? (
+      {renderBody ? (
         <View
           style={[
-            styles.content,
-            {
-              marginTop: header ? gap : 0,
-            },
-            contentStyle,
-          ]}
-        >
-          {content}
-        </View>
-      ) : null}
+            styles.body,
 
-      {children ? (
-        <View
-          style={[
-            styles.content,
             {
-              marginTop: header || content ? gap : 0,
+              padding,
+              gap,
             },
-            contentStyle,
           ]}
         >
-          {children}
+          {header ? (
+            <View style={[styles.header, headerStyle]}>{header}</View>
+          ) : null}
+
+          {content ? (
+            <View style={[styles.content, contentStyle]}>{content}</View>
+          ) : null}
+
+          {children ? (
+            <View
+              style={[
+                styles.content,
+
+                contentStyle,
+
+                {
+                  marginTop: header || content ? 0 : undefined,
+                },
+              ]}
+            >
+              {children}
+            </View>
+          ) : null}
+
+          {footer ? (
+            <View style={[styles.footer, footerStyle]}>{footer}</View>
+          ) : null}
         </View>
       ) : null}
 
-      {footer ? (
+      {loading ? (
         <View
+          pointerEvents="none"
           style={[
-            styles.footer,
+            styles.loadingOverlay,
             {
-              marginTop: header || content || children ? gap : 0,
+              borderRadius: radiusValue,
             },
-            footerStyle,
           ]}
         >
-          {footer}
+          <ActivityIndicator
+            size="small"
+            color={colors.primary || FALLBACK_COLORS.primary}
+          />
         </View>
       ) : null}
     </>
@@ -357,6 +426,90 @@ function UICardComponent({
   );
 }
 
+/*
+ * --------------------------------------------------
+ * CARD BADGE
+ * --------------------------------------------------
+ */
+
+const CardBadge = memo(function CardBadge({
+  badge,
+  index,
+  gap,
+  defaultStyle,
+  defaultTextStyle,
+  defaultContainerStyle,
+  colors,
+}) {
+  const position = BADGE_POSITIONS[badge.position] ? badge.position : "topLeft";
+
+  const badgeColors = getBadgeColors(badge, colors);
+
+  const positionStyle = getBadgePosition(position, index, gap);
+
+  const badgeContent = badge.content ?? badge.label ?? badge.text ?? "";
+
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.badge,
+
+        positionStyle,
+
+        {
+          backgroundColor: badgeColors.background,
+
+          borderColor: badgeColors.border,
+
+          borderWidth: badgeColors.borderWidth,
+        },
+
+        defaultStyle,
+
+        badge.style,
+
+        defaultContainerStyle,
+      ]}
+    >
+      {badge.icon ? <View style={styles.badgeIcon}>{badge.icon}</View> : null}
+
+      {badgeContent ? (
+        <Text
+          numberOfLines={1}
+          style={[
+            styles.badgeText,
+
+            {
+              color: badgeColors.text,
+
+              fontSize: badge.fontSize || 12,
+
+              lineHeight: badge.lineHeight || 16,
+
+              fontWeight: badge.fontWeight || "600",
+            },
+
+            defaultTextStyle,
+
+            badge.textStyle,
+          ]}
+        >
+          {badgeContent}
+        </Text>
+      ) : null}
+    </View>
+  );
+});
+
+CardBadge.displayName = "CardBadge";
+
+/*
+ * --------------------------------------------------
+ * CARD COLORS
+ * --------------------------------------------------
+ */
+
 function getCardColors(variant, colors) {
   const background = colors.card || colors.surface || FALLBACK_COLORS.card;
 
@@ -389,7 +542,7 @@ function getCardColors(variant, colors) {
       return {
         background: colors.surface || FALLBACK_COLORS.surface,
 
-        border,
+        border: "transparent",
 
         borderWidth: 0,
 
@@ -401,7 +554,7 @@ function getCardColors(variant, colors) {
       return {
         background,
 
-        border,
+        border: "transparent",
 
         borderWidth: 0,
 
@@ -410,27 +563,249 @@ function getCardColors(variant, colors) {
   }
 }
 
+/*
+ * --------------------------------------------------
+ * BADGE COLORS
+ * --------------------------------------------------
+ */
+
+function getBadgeColors(badge, colors) {
+  const type = badge.variant || badge.type || "primary";
+
+  switch (type) {
+    case "success":
+      return {
+        background:
+          badge.backgroundColor || colors.success || FALLBACK_COLORS.success,
+
+        border: badge.borderColor || colors.success || FALLBACK_COLORS.success,
+
+        borderWidth: badge.borderWidth ?? 0,
+
+        text: badge.textColor || colors.onSuccess || FALLBACK_COLORS.white,
+      };
+
+    case "danger":
+      return {
+        background:
+          badge.backgroundColor || colors.danger || FALLBACK_COLORS.danger,
+
+        border: badge.borderColor || colors.danger || FALLBACK_COLORS.danger,
+
+        borderWidth: badge.borderWidth ?? 0,
+
+        text: badge.textColor || colors.onDanger || FALLBACK_COLORS.white,
+      };
+
+    case "warning":
+      return {
+        background:
+          badge.backgroundColor || colors.warning || FALLBACK_COLORS.warning,
+
+        border: badge.borderColor || colors.warning || FALLBACK_COLORS.warning,
+
+        borderWidth: badge.borderWidth ?? 0,
+
+        text: badge.textColor || colors.onWarning || FALLBACK_COLORS.white,
+      };
+
+    case "info":
+      return {
+        background:
+          badge.backgroundColor || colors.info || FALLBACK_COLORS.info,
+
+        border: badge.borderColor || colors.info || FALLBACK_COLORS.info,
+
+        borderWidth: badge.borderWidth ?? 0,
+
+        text: badge.textColor || colors.onInfo || FALLBACK_COLORS.white,
+      };
+
+    case "soft":
+      return {
+        background:
+          badge.backgroundColor ||
+          colors.primarySoft ||
+          FALLBACK_COLORS.primarySoft,
+
+        border: badge.borderColor || "transparent",
+
+        borderWidth: badge.borderWidth ?? 0,
+
+        text: badge.textColor || colors.primary || FALLBACK_COLORS.primary,
+      };
+
+    case "custom":
+      return {
+        background: badge.backgroundColor || FALLBACK_COLORS.primary,
+
+        border: badge.borderColor || "transparent",
+
+        borderWidth: badge.borderWidth ?? 0,
+
+        text: badge.textColor || FALLBACK_COLORS.white,
+      };
+
+    case "primary":
+    default:
+      return {
+        background:
+          badge.backgroundColor || colors.primary || FALLBACK_COLORS.primary,
+
+        border: badge.borderColor || colors.primary || FALLBACK_COLORS.primary,
+
+        borderWidth: badge.borderWidth ?? 0,
+
+        text: badge.textColor || colors.onPrimary || FALLBACK_COLORS.white,
+      };
+  }
+}
+
+/*
+ * --------------------------------------------------
+ * BADGE POSITION
+ * --------------------------------------------------
+ */
+
+function getBadgePosition(position, index, gap) {
+  const offset = index * (28 + gap);
+
+  switch (position) {
+    case BADGE_POSITIONS.topCenter:
+      return {
+        top: 12 + offset,
+
+        alignSelf: "center",
+      };
+
+    case BADGE_POSITIONS.topRight:
+      return {
+        top: 12 + offset,
+
+        right: 12,
+      };
+
+    case BADGE_POSITIONS.centerLeft:
+      return {
+        left: 12 + offset,
+
+        top: "50%",
+
+        transform: [
+          {
+            translateY: -12,
+          },
+        ],
+      };
+
+    case BADGE_POSITIONS.center:
+      return {
+        top: "50%",
+
+        left: "50%",
+
+        transform: [
+          {
+            translateX: -50,
+          },
+
+          {
+            translateY: -12,
+          },
+        ],
+      };
+
+    case BADGE_POSITIONS.centerRight:
+      return {
+        right: 12 + offset,
+
+        top: "50%",
+
+        transform: [
+          {
+            translateY: -12,
+          },
+        ],
+      };
+
+    case BADGE_POSITIONS.bottomLeft:
+      return {
+        bottom: 12,
+
+        left: 12 + offset,
+      };
+
+    case BADGE_POSITIONS.bottomCenter:
+      return {
+        bottom: 12 + offset,
+
+        alignSelf: "center",
+      };
+
+    case BADGE_POSITIONS.bottomRight:
+      return {
+        bottom: 12,
+
+        right: 12 + offset,
+      };
+
+    case BADGE_POSITIONS.topLeft:
+    default:
+      return {
+        top: 12 + offset,
+
+        left: 12,
+      };
+  }
+}
+
+/*
+ * --------------------------------------------------
+ * RADIUS
+ * --------------------------------------------------
+ */
+
+function getRadiusValue(radius, theme) {
+  const themeRadius = theme?.radius || {};
+
+  switch (radius) {
+    case CARD_RADIUS.none:
+      return 0;
+
+    case CARD_RADIUS.sm:
+      return themeRadius.sm ?? 8;
+
+    case CARD_RADIUS.md:
+      return themeRadius.md ?? 12;
+
+    case CARD_RADIUS.xl:
+      return themeRadius.xl ?? 20;
+
+    case CARD_RADIUS.lg:
+    default:
+      return themeRadius.lg ?? 16;
+  }
+}
+
 const styles = StyleSheet.create({
   card: {
     width: "100%",
 
     overflow: "hidden",
+
+    position: "relative",
   },
 
   pressable: {
     width: "100%",
   },
 
-  imageWrapper: {
+  imageSection: {
     width: "100%",
 
-    overflow: "hidden",
-
-    marginHorizontal: -16,
+    position: "relative",
 
-    marginTop: -16,
-
-    width: "calc(100% + 32px)",
+    overflow: "hidden",
   },
 
   image: {
@@ -439,6 +814,64 @@ const styles = StyleSheet.create({
     height: "100%",
   },
 
+  imageOverlay: {
+    ...StyleSheet.absoluteFillObject,
+
+    justifyContent: "center",
+
+    alignItems: "center",
+  },
+
+  badgeLayer: {
+    ...StyleSheet.absoluteFillObject,
+
+    pointerEvents: "box-none",
+  },
+
+  badge: {
+    position: "absolute",
+
+    minHeight: 26,
+
+    paddingHorizontal: 10,
+
+    paddingVertical: 5,
+
+    borderRadius: 999,
+
+    flexDirection: "row",
+
+    alignItems: "center",
+
+    justifyContent: "center",
+
+    maxWidth: "80%",
+
+    zIndex: 10,
+
+    elevation: 3,
+  },
+
+  badgeText: {
+    includeFontPadding: false,
+
+    textAlign: "center",
+
+    flexShrink: 1,
+  },
+
+  badgeIcon: {
+    marginRight: 5,
+
+    alignItems: "center",
+
+    justifyContent: "center",
+  },
+
+  body: {
+    width: "100%",
+  },
+
   header: {
     width: "100%",
   },
@@ -451,8 +884,20 @@ const styles = StyleSheet.create({
     width: "100%",
   },
 
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+
+    alignItems: "center",
+
+    justifyContent: "center",
+
+    backgroundColor: "rgba(0,0,0,0.08)",
+
+    zIndex: 100,
+  },
+
   elevated: {
-    shadowColor: FALLBACK_COLORS.shadow,
+    shadowColor: "#000000",
 
     shadowOffset: {
       width: 0,
@@ -477,6 +922,10 @@ export const UICard = memo(UICardComponent);
 
 UICard.displayName = "UICard";
 
-export { CARD_VARIANTS as UICardVariants, CARD_RADIUS as UICardRadius };
+export {
+  CARD_VARIANTS as UICardVariants,
+  CARD_RADIUS as UICardRadius,
+  BADGE_POSITIONS as UICardBadgePositions,
+};
 
 export default UICard;

package/src/components/Card/index.js

@@ -1 +1,6 @@
-export { UICard, UICardVariants, UICardRadius } from "./UICard";
+export {
+  UICard,
+  UICardVariants,
+  UICardRadius,
+  UICardBadgePositions,
+} from "./UICard";

package/src/components/index.js

@@ -6,4 +6,9 @@ export {
   UIIconButtonSizes,
   UIIconButtonShapes,
 } from "./IconButton";
-export { UICard, UICardVariants, UICardRadius } from "./Card";
+export {
+  UICard,
+  UICardVariants,
+  UICardRadius,
+  UICardBadgePositions,
+} from "./Card";

package/src/index.js

@@ -27,4 +27,5 @@ export {
   UICard,
   UICardVariants,
   UICardRadius,
+  UICardBadgePositions,
 } from "./components";