@wlloyalty/wll-react-sdk 1.0.106 → 1.0.108

package/dist/types/components/atoms/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Skeleton from './index';
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+export declare const Default: Story;
+export declare const FewerTiles: Story;
+export declare const CustomStyle: Story;

package/dist/types/utils/styling.d.ts

@@ -24,3 +24,23 @@ export declare const commonStyles: {
     };
 };
 export declare const defaultTheme: BaseThemeObject;
+/**
+ * Creates appropriate directional margin styles for both web and native platforms.
+ * Handles RTL layouts correctly across platforms by using the I18nManager.
+ *
+ * @param value - The margin value to apply
+ * @returns An object with the appropriate margin style property
+ */
+export declare const getDirectionalMargin: (value: number) => {
+    marginLeft: number;
+    marginRight?: undefined;
+    marginEnd?: undefined;
+} | {
+    marginRight: number;
+    marginLeft?: undefined;
+    marginEnd?: undefined;
+} | {
+    marginEnd: number;
+    marginLeft?: undefined;
+    marginRight?: undefined;
+};

package/dist/web.js

@@ -7986,45 +7986,6 @@ var EventEmitter$1 = /** @class */function () {
  */
 var sdkEventEmitter = new EventEmitter$1();
 
-var sizes = {
-  borderRadiusSm: 15,
-  borderRadiusLg: 20,
-  borderRadiusButton: 9,
-  borderRadiusRounded: 9999,
-  xxxs: 4,
-  xxs: 8,
-  xs: 10,
-  sm: 12,
-  md: 14,
-  lg: 16,
-  xl: 18,
-  xxl: 24,
-  xxxl: 32,
-  xxxxl: 40,
-  xxxxxl: 60
-};
-var commonStyles = StyleSheet$1.create({
-  emptyContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
-var defaultTheme = {
-  fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif',
-  background: '#F0F0F0',
-  text: '#000000',
-  primary: '#392ed7',
-  accent: '#ff6a3d',
-  surface: '#f8f7fc',
-  surfaceText: '#000000',
-  pageButtonBackground: '#392ed7',
-  pageButtonText: '#ffffff',
-  errorPrimary: '#000000',
-  positive: '#008000',
-  negative: '#ff0000'
-};
-
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
  *
@@ -8229,6 +8190,69 @@ var _a$1 = Dimensions.get("window"),
   _a$1.height;
 var SCREEN_WIDTH = width;
 
+var sizes = {
+  borderRadiusSm: 15,
+  borderRadiusLg: 20,
+  borderRadiusButton: 9,
+  borderRadiusRounded: 9999,
+  xxxs: 4,
+  xxs: 8,
+  xs: 10,
+  sm: 12,
+  md: 14,
+  lg: 16,
+  xl: 18,
+  xxl: 24,
+  xxxl: 32,
+  xxxxl: 40,
+  xxxxxl: 60
+};
+var commonStyles = StyleSheet$1.create({
+  emptyContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+var defaultTheme = {
+  fontFamily: '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif',
+  background: '#F0F0F0',
+  text: '#000000',
+  primary: '#392ed7',
+  accent: '#ff6a3d',
+  surface: '#f8f7fc',
+  surfaceText: '#000000',
+  pageButtonBackground: '#392ed7',
+  pageButtonText: '#ffffff',
+  errorPrimary: '#000000',
+  positive: '#008000',
+  negative: '#ff0000'
+};
+/**
+ * Creates appropriate directional margin styles for both web and native platforms.
+ * Handles RTL layouts correctly across platforms by using the I18nManager.
+ *
+ * @param value - The margin value to apply
+ * @returns An object with the appropriate margin style property
+ */
+var getDirectionalMargin = function (value) {
+  if (IS_WEB) {
+    // Check document direction for web
+    // We need to use this because React Native Web does not support I18nManager
+    // and marginStart/marginEnd resolves to margin-left/margin-right and not margin-inline-start/end
+    var isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+    return isRTL ? {
+      marginLeft: value
+    } : {
+      marginRight: value
+    };
+  }
+  // For native platforms, use marginEnd which automatically handles RTL
+  return {
+    marginEnd: value
+  };
+};
+
 var COLOR_CONSTANTS = {
   MINIMUM_CONTRAST_RATIO: 2,
   DEFAULT_LIGHTNESS_ADJUSTMENT: 0.2,
@@ -19014,22 +19038,22 @@ var Text = function (_a) {
   var accessibilityRole;
   switch (variant) {
     case 'title':
-      accessibilityRole = 'header';
+      accessibilityRole = IS_MOBILE ? 'heading' : 'header';
       break;
     case 'caption':
-      accessibilityRole = 'text';
+      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
       break;
     case 'eyebrow':
-      accessibilityRole = 'text';
+      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
       break;
     case 'description':
-      accessibilityRole = 'paragraph';
+      accessibilityRole = IS_MOBILE ? 'article' : 'paragraph';
       break;
     case 'label':
-      accessibilityRole = 'text';
+      accessibilityRole = IS_MOBILE ? 'option' : 'text';
       break;
     default:
-      accessibilityRole = 'text';
+      accessibilityRole = IS_MOBILE ? 'contentinfo' : 'text';
   }
   var combinedStyles = [styles.base, variantStyle, styles.webOverrides, style];
   return /*#__PURE__*/React__namespace.createElement(Text$3, __assign({
@@ -19656,11 +19680,51 @@ var styles$5 = StyleSheet$1.create({
 
 var GRID_GAP = 16;
 
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * 
+ */
+
+function useWindowDimensions() {
+  var _useState = React.useState(() => Dimensions.get('window')),
+    dims = _useState[0],
+    setDims = _useState[1];
+  React.useEffect(() => {
+    function handleChange(_ref) {
+      var window = _ref.window;
+      if (window != null) {
+        setDims(window);
+      }
+    }
+    Dimensions.addEventListener('change', handleChange);
+    // We might have missed an update between calling `get` in render and
+    // `addEventListener` in this handler, so we set it here. If there was
+    // no change, React will filter out this update as a no-op.
+    setDims(Dimensions.get('window'));
+    return () => {
+      Dimensions.removeEventListener('change', handleChange);
+    };
+  }, []);
+  return dims;
+}
+
 /* istanbul ignore file */
 var SkeletonTile = function (_a) {
   var style = _a.style;
   var theme = useWllSdk().theme;
   var animatedValue = React__namespace.useRef(new Animated$1.Value(0)).current;
+  var width = useWindowDimensions().width;
+  var tileWidth = 1000 / 4;
+  var tileHeight = tileWidth;
+  if (IS_MOBILE) {
+    tileWidth = width / 2 - theme.sizes.lg * 2;
+    tileHeight = tileWidth;
+  }
   React__namespace.useEffect(function () {
     var pulseAnimation = Animated$1.loop(Animated$1.sequence([Animated$1.timing(animatedValue, {
       toValue: 1,
@@ -19684,15 +19748,16 @@ var SkeletonTile = function (_a) {
     style: [styles$4.container, {
       opacity: opacity,
       backgroundColor: theme.alphaDerivedText[20],
-      borderRadius: theme.sizes.borderRadiusLg
+      borderRadius: theme.sizes.borderRadiusLg,
+      width: tileWidth,
+      height: tileHeight
     }, style]
   });
 };
 var styles$4 = StyleSheet$1.create({
   container: {
     aspectRatio: 1,
-    overflow: 'hidden',
-    width: 1000 / 4
+    overflow: 'hidden'
   }
 });
 
@@ -20202,14 +20267,14 @@ var useBannerTileStyles = function () {
     slideContent: {
       flex: 1
     },
-    mediaContainer: {
+    mediaContainer: __assign(__assign({
       aspectRatio: 1,
       position: 'relative',
-      overflow: 'hidden',
-      marginEnd: useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet),
+      overflow: 'hidden'
+    }, getDirectionalMargin(useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet))), {
       maxHeight: useResponsiveValue(253, 120, isDesktop, isTablet),
       minHeight: 120
-    },
+    }),
     media: {
       position: 'absolute',
       width: '100%',
@@ -20396,11 +20461,10 @@ var useContentTileStyles = function (hasArtwork) {
       flex: 1
     },
     header: getHeaderStyle(hasArtwork),
-    tileTitle: {
+    tileTitle: __assign({
       maxWidth: '90%',
-      flex: 1,
-      marginEnd: 8
-    }
+      flex: 1
+    }, getDirectionalMargin(8))
   });
 };
 
@@ -20533,39 +20597,6 @@ exports.SectionType = void 0;
   SectionType["Banner"] = "BANNER";
 })(exports.SectionType || (exports.SectionType = {}));
 
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @format
- * 
- */
-
-function useWindowDimensions() {
-  var _useState = React.useState(() => Dimensions.get('window')),
-    dims = _useState[0],
-    setDims = _useState[1];
-  React.useEffect(() => {
-    function handleChange(_ref) {
-      var window = _ref.window;
-      if (window != null) {
-        setDims(window);
-      }
-    }
-    Dimensions.addEventListener('change', handleChange);
-    // We might have missed an update between calling `get` in render and
-    // `addEventListener` in this handler, so we set it here. If there was
-    // no change, React will filter out this update as a no-op.
-    setDims(Dimensions.get('window'));
-    return () => {
-      Dimensions.removeEventListener('change', handleChange);
-    };
-  }, []);
-  return dims;
-}
-
 var useSectionHeaderStyles = function () {
   var _a = useResponsive$1(),
     isDesktop = _a.isDesktop,
@@ -20979,9 +21010,7 @@ var Grid = function (_a) {
           key: "container-".concat(index),
           style: [
           // @ts-ignore Web uses CSS calc strings for responsive layouts, while ViewStyle expects numbers
-          getTileWidth(columnsPerRow), !isLastInRow && {
-            marginEnd: GRID_GAP
-          }]
+          getTileWidth(columnsPerRow), !isLastInRow && getDirectionalMargin(GRID_GAP)]
         }, /*#__PURE__*/React.createElement(TileContainer, {
           tiles: currentTiles
         })));
@@ -21193,7 +21222,7 @@ var Section = function (_a) {
     if (isLoading) {
       return /*#__PURE__*/React.createElement(Skeleton, {
         "aria-label": "Loading section content",
-        numberOfSquares: 4
+        numberOfSquares: IS_WEB ? 4 : 2
       });
     }
     if (error || !sectionData) {
@@ -21457,12 +21486,18 @@ var Group = function (_a) {
     groupData = _b.groupData,
     isLoading = _b.isLoading,
     error = _b.error;
+  var theme = useWllSdk().theme;
   if (isLoading) {
     return /*#__PURE__*/React.createElement(View$2, {
-      style: commonStyles.emptyContainer,
+      style: {
+        flex: 1,
+        padding: theme.sizes.lg
+      },
       accessible: true,
       accessibilityLabel: "Loading group data"
-    }, /*#__PURE__*/React.createElement(Skeleton, null));
+    }, /*#__PURE__*/React.createElement(Skeleton, {
+      numberOfSquares: IS_WEB ? 4 : 2
+    }));
   }
   if (error || !groupData) {
     return /*#__PURE__*/React.createElement(GroupEmptyState, {
@@ -22036,11 +22071,10 @@ var useRewardTileStyles = function () {
       width: '100%',
       marginBottom: useResponsiveValue(theme.sizes.xxs, theme.sizes.xxxs, isDesktop, isTablet)
     },
-    tileTitle: {
+    tileTitle: __assign({
       maxWidth: '90%',
-      flex: 1,
-      marginEnd: 8
-    }
+      flex: 1
+    }, getDirectionalMargin(8))
   });
 };