@webority/mobile-ui 0.0.0-stage → 0.0.34

package/lib/module/components/Card/Card.js

@@ -0,0 +1,403 @@
+"use strict";
+
+import React, { forwardRef, useMemo } from 'react';
+import { Animated, Image, Pressable, StyleSheet, View } from 'react-native';
+import { usePressAnimation } from "../../hooks/usePressAnimation.js";
+import { Gradient, useTheme } from "../../theme/index.js";
+import { smoothCorners } from "../../utils/corners.js";
+import { resolveHaptic, triggerHaptic } from "../../utils/hapticUtils.js";
+import { supportsBoxShadow, toBoxShadow } from "../../utils/shadows.js";
+import { squircleHostRadius } from "../../utils/squircle.js";
+import { Skeleton, SkeletonText } from "../Skeleton/index.js";
+import { SquircleFill, useSquircle } from "../SquircleFill/SquircleFill.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const paddingMap = {
+  none: 'none',
+  sm: 'sm',
+  md: 'lg',
+  lg: 'xl',
+  xl: '2xl'
+};
+const Card = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    variant = 'elevated',
+    elevation = 'sm',
+    radius = 'lg',
+    padding = 'md',
+    interactive = false,
+    bg,
+    header,
+    footer,
+    imageSource,
+    imageHeight = 160,
+    imageAspectRatio,
+    imageOverlay,
+    loading = false,
+    gradient,
+    onPress,
+    haptic,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityRole,
+    style,
+    containerStyle,
+    headerStyle,
+    bodyStyle,
+    footerStyle,
+    borderRadius,
+    testID,
+    onLayout,
+    ...rest
+  } = props;
+  const theme = useTheme();
+  const isInteractive = interactive || typeof onPress === 'function';
+  const {
+    scale,
+    pressIn,
+    pressOut
+  } = usePressAnimation({
+    enabled: isInteractive
+  });
+  const styles = useMemo(() => buildStyles(theme), [theme]);
+  const hasImage = Boolean(imageSource);
+  const contentPadding = theme.spacing[paddingMap[padding]];
+  const resolvedGradient = useMemo(() => {
+    if (!gradient) {
+      return null;
+    }
+    if (typeof gradient === 'string') {
+      return theme.gradients[gradient] ?? null;
+    }
+    return gradient;
+  }, [gradient, theme.gradients]);
+  const resolvedBorderRadius = borderRadius ?? theme.radius[radius];
+  const resolvedBg = resolveBackground(theme, bg);
+
+  // Android smooth corners: the fill (and the outlined border) become an SVG
+  // squircle over the card. An image header or a gradient needs the card's
+  // circular `overflow: 'hidden'` clip, which would cut the squircle off at
+  // the diagonal, so those cards keep the native corner on Android.
+  const squircle = useSquircle(!hasImage && !resolvedGradient, resolvedBorderRadius, onLayout);
+
+  // An app colours a card through `bg`, or through `style` / `containerStyle`
+  // for anything older. Under the squircle the SVG path is what the user
+  // sees, so a consumer's background and border colours must reach it, or
+  // the path paints the theme's colour over them. Only the two colours are
+  // read; an inline style object would otherwise re-run every memo below.
+  // React Native types a colour as `ColorValue`, which admits a
+  // `PlatformColor` object; the library's colours are strings, and the
+  // SVG path takes a string or an Animated node, hence the cast.
+  const consumerStyle = StyleSheet.flatten([style, containerStyle]) ?? {};
+  const consumerBackground = consumerStyle.backgroundColor;
+  const consumerBorder = consumerStyle.borderColor;
+  const squircleFill = consumerBackground ?? resolvedBg ?? (variant === 'filled' ? theme.colors.background.secondary : theme.colors.background.elevated);
+  const squircleStroke = variant === 'outlined' ? theme.colors.border.width : 0;
+  const squircleStrokeColor = consumerBorder ?? theme.colors.border.primary;
+  // The elevated card draws its shadow as a `boxShadow` where the platform
+  // can (see `toBoxShadow`): iOS drops the legacy shadow props under the
+  // card's `overflow: 'hidden'`, and Android's `elevation` is a flat grey
+  // that cannot match iOS. Android below API 28 keeps `elevation`.
+  const elevatedBoxShadow = variant === 'elevated' && supportsBoxShadow() ? toBoxShadow(theme.shadows[elevation]) : undefined;
+  // Only an `elevation` shadow needs an opaque host under the squircle: it
+  // is cast from the view's own outline, and a transparent view casts none.
+  // A box shadow draws whatever the host's background.
+  const opaqueSquircleHost = squircle.active && variant === 'elevated' && !elevatedBoxShadow;
+  // Every other host must stay transparent under a consumer colour too, so
+  // this override is applied AFTER the consumer styles. The opaque host
+  // keeps its colour; the path paints the same colour over it, so its
+  // corner stays hidden.
+  const squircleHostOverride = squircle.active && !opaqueSquircleHost ? {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent'
+  } : null;
+  const computedContainerStyle = useMemo(() => {
+    const base = {
+      // Under the overlay an `elevation` card keeps an opaque native
+      // background for its shadow; its native corner must then hide under
+      // the squircle, which sits INSIDE the circle of the same radius, so
+      // the native radius is pushed deeper (see squircleHostRadius). A box
+      // shadow follows this radius, so every other host keeps the nominal
+      // one and the shadow hugs the visible corner.
+      borderRadius: opaqueSquircleHost && squircle.size ? squircleHostRadius(squircle.size.width, squircle.size.height, resolvedBorderRadius) : resolvedBorderRadius,
+      ...smoothCorners,
+      // When an image header is present we move padding to the inner content
+      // wrapper so the image can occupy the card's full top edge.
+      padding: hasImage ? 0 : contentPadding,
+      // The squircle bulges past the circular corner at the diagonal; a
+      // rounded clip would remove exactly the part it draws.
+      overflow: squircle.active ? 'visible' : 'hidden'
+    };
+    switch (variant) {
+      case 'outlined':
+        return {
+          ...base,
+          // Under the squircle the host goes transparent; the width stays so
+          // the layout does not move by a pixel.
+          backgroundColor: squircle.active ? 'transparent' : resolvedBg ?? theme.colors.background.elevated,
+          borderWidth: theme.colors.border.width,
+          borderColor: squircle.active ? 'transparent' : theme.colors.border.primary
+        };
+      case 'filled':
+        return {
+          ...base,
+          backgroundColor: squircle.active ? 'transparent' : resolvedBg ?? theme.colors.background.secondary
+        };
+      case 'elevated':
+      default:
+        // Under the squircle a box-shadow host goes transparent through
+        // `squircleHostOverride`; an `elevation` host stays opaque, its
+        // corner hidden by the deeper radius set in `base` above.
+        return {
+          ...base,
+          backgroundColor: resolvedBg ?? theme.colors.background.elevated,
+          ...(elevatedBoxShadow ? {
+            boxShadow: elevatedBoxShadow
+          } : theme.shadows[elevation])
+        };
+    }
+  }, [theme, variant, elevation, resolvedBorderRadius, hasImage, contentPadding, squircle.active, squircle.size, elevatedBoxShadow, opaqueSquircleHost, resolvedBg]);
+  const imageStyle = useMemo(() => {
+    const topRadius = resolvedBorderRadius;
+    const dimensions = typeof imageAspectRatio === 'number' ? {
+      width: '100%',
+      aspectRatio: imageAspectRatio
+    } : {
+      width: '100%',
+      height: imageHeight
+    };
+    // The image repeats the card's top radius, so it must repeat the curve
+    // too, or a circular image corner sits inside the card's continuous
+    // frame and a sliver of card background shows at the diagonal. React
+    // Native's `ImageStyle` type omits `borderCurve` though the native image
+    // view (a view subclass) honours it, hence the cast.
+    return {
+      ...dimensions,
+      borderTopLeftRadius: topRadius,
+      borderTopRightRadius: topRadius,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      ...smoothCorners
+    };
+  }, [resolvedBorderRadius, imageAspectRatio, imageHeight]);
+  const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [header ? /*#__PURE__*/_jsx(View, {
+      style: [styles.header, headerStyle],
+      children: header
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: [header || footer ? styles.body : null, bodyStyle],
+      children: children
+    }), footer ? /*#__PURE__*/_jsx(View, {
+      style: [styles.footer, footerStyle],
+      children: footer
+    }) : null]
+  });
+  const baseContent = hasImage ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.imageWrapper,
+      children: [/*#__PURE__*/_jsx(Image, {
+        source: imageSource,
+        resizeMode: "cover",
+        style: imageStyle,
+        accessibilityLabel: "",
+        accessible: false
+      }), imageOverlay ? /*#__PURE__*/_jsx(View, {
+        pointerEvents: "box-none",
+        style: styles.imageOverlay,
+        children: imageOverlay
+      }) : null]
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        padding: contentPadding
+      },
+      children: innerContent
+    })]
+  }) : innerContent;
+  const content = resolvedGradient ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Gradient, {
+      gradient: resolvedGradient,
+      style: StyleSheet.absoluteFill
+    }), baseContent]
+  }) : squircle.active && squircle.size ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(SquircleFill, {
+      width: squircle.size.width,
+      height: squircle.size.height,
+      radius: resolvedBorderRadius,
+      fill: squircleFill,
+      stroke: squircleStroke ? squircleStrokeColor : undefined,
+      strokeWidth: squircleStroke,
+      outset: squircleStroke
+    }), baseContent]
+  }) : baseContent;
+  let rendered;
+  if (isInteractive) {
+    const handlePress = event => {
+      const h = resolveHaptic(haptic, 'selection');
+      if (h) {
+        triggerHaptic(h);
+      }
+      onPress?.(event);
+    };
+    rendered = /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        transform: [{
+          scale
+        }]
+      }],
+      children: /*#__PURE__*/_jsx(Pressable, {
+        ref: ref,
+        onPress: handlePress,
+        onPressIn: pressIn,
+        onPressOut: pressOut,
+        android_ripple: {
+          color: theme.colors.surface.pressed,
+          borderless: false
+        },
+        accessibilityRole: accessibilityRole ?? 'button',
+        accessibilityLabel: accessibilityLabel,
+        accessibilityHint: accessibilityHint,
+        testID: testID,
+        onLayout: squircle.onLayout,
+        style: [computedContainerStyle, style, containerStyle, squircleHostOverride],
+        ...rest,
+        children: content
+      })
+    });
+  } else {
+    rendered = /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      accessibilityLabel: accessibilityLabel,
+      accessibilityHint: accessibilityHint,
+      accessibilityRole: accessibilityRole,
+      testID: testID,
+      onLayout: squircle.onLayout,
+      style: [computedContainerStyle, style, containerStyle, squircleHostOverride],
+      children: content
+    });
+  }
+  if (loading) {
+    return /*#__PURE__*/_jsx(CardSkeleton, {
+      ...props
+    });
+  }
+  return rendered;
+});
+Card.displayName = 'Card';
+
+/**
+ * Placeholder shape for `<Card>`. Preserves outer chrome (variant, radius,
+ * padding, image area) and fills the interior with header / body / footer
+ * skeletons proportional to whichever slots the consumer actually uses.
+ */
+const CardSkeleton = ({
+  variant = 'elevated',
+  elevation: _elevation,
+  radius = 'lg',
+  padding = 'md',
+  bg,
+  header,
+  footer,
+  imageSource,
+  imageHeight = 160,
+  imageAspectRatio,
+  borderRadius,
+  containerStyle,
+  headerStyle,
+  bodyStyle,
+  footerStyle,
+  style
+}) => {
+  const theme = useTheme();
+  const padToken = paddingMap[padding];
+  const padValue = theme.spacing[padToken];
+  const cornerRadius = borderRadius ?? theme.radius[radius];
+  // The placeholder keeps the surface colour the card will take, so nothing
+  // shifts when data arrives; it does not read the filled variant's darker
+  // default because the skeleton bars already carry that contrast.
+  const backgroundColor = resolveBackground(theme, bg) ?? theme.colors.background.elevated;
+  const borderWidth = variant === 'outlined' ? 1 : 0;
+  const borderColor = variant === 'outlined' ? theme.colors.border.primary : undefined;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      backgroundColor,
+      borderRadius: cornerRadius,
+      ...smoothCorners,
+      borderWidth,
+      borderColor,
+      overflow: 'hidden'
+    }, containerStyle, style],
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: [imageSource !== undefined ? /*#__PURE__*/_jsx(Skeleton, {
+      width: "100%",
+      height: imageAspectRatio ? undefined : imageHeight,
+      style: imageAspectRatio ? {
+        aspectRatio: imageAspectRatio,
+        width: '100%'
+      } : undefined
+    }) : null, header !== undefined ? /*#__PURE__*/_jsx(View, {
+      style: [{
+        padding: padValue,
+        paddingBottom: theme.spacing.sm
+      }, headerStyle],
+      children: /*#__PURE__*/_jsx(Skeleton, {
+        shape: "text",
+        width: "60%",
+        height: 18
+      })
+    }) : null, /*#__PURE__*/_jsx(View, {
+      style: [{
+        padding: padValue
+      }, bodyStyle],
+      children: /*#__PURE__*/_jsx(SkeletonText, {
+        lines: 3,
+        fontSize: 14,
+        lastLineWidth: "55%"
+      })
+    }), footer !== undefined ? /*#__PURE__*/_jsx(View, {
+      style: [{
+        padding: padValue,
+        paddingTop: theme.spacing.sm,
+        flexDirection: 'row'
+      }, footerStyle],
+      children: /*#__PURE__*/_jsx(Skeleton, {
+        width: 88,
+        height: 32,
+        shape: "rounded"
+      })
+    }) : null]
+  });
+};
+CardSkeleton.displayName = 'CardSkeleton';
+Card.Skeleton = CardSkeleton;
+
+/** A `bg` prop as a colour: a background token by name, anything else as given. */
+const resolveBackground = (theme, bg) => {
+  if (bg == null) {
+    return undefined;
+  }
+  const tokens = theme.colors.background;
+  return tokens[bg] ?? bg;
+};
+const buildStyles = theme => StyleSheet.create({
+  header: {
+    marginBottom: theme.spacing.md
+  },
+  body: {
+    flexShrink: 1
+  },
+  footer: {
+    marginTop: theme.spacing.md
+  },
+  imageWrapper: {
+    position: 'relative'
+  },
+  imageOverlay: {
+    ...StyleSheet.absoluteFill
+  }
+});
+export { Card };
+export default Card;
+//# sourceMappingURL=Card.js.map

package/lib/module/components/Card/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { Card, default } from "./Card.js";
+//# sourceMappingURL=index.js.map