@wlloyalty/wll-react-sdk 1.0.30 → 1.0.33

package/README.md

@@ -88,6 +88,26 @@ yarn commit
 yarn prepare
 ```
 
+### Creating New Components
+
+We provide an interactive component generator to help maintain consistent structure. To create a new component:
+
+```bash
+yarn create-component
+```
+
+You'll be prompted for:
+1. Component name - The name of your new component
+2. Component type - Choose from:
+   - atoms: Basic building blocks
+   - molecules: Simple combinations of atoms
+   - organisms: Complex combinations of molecules
+   - particles: Smallest UI elements
+   - templates: Page-level components
+3. Base directory - Where to create the component (defaults to ./lib/components)
+
+The script will generate a new component with the proper file structure and boilerplate code.
+
 ## 📄 License
 
 MIT License - See [LICENSE](LICENSE) for more information.

package/dist/index.js

@@ -18870,7 +18870,6 @@ MemoedPressable.displayName = 'Pressable';
 var Pressable$1 = MemoedPressable;
 
 var MAX_WIDTH = 1080;
-var SLIDE_WIDTH = MAX_WIDTH;
 var BUTTON_SIZE = 42;
 
 var useHandleTilePress = function (ctaLink, ctaLinkTarget) {
@@ -19559,7 +19558,8 @@ var useBannerTileStyles = function () {
       position: 'relative',
       overflow: 'hidden',
       marginRight: useResponsiveValue(theme.sizes.xxl, theme.sizes.xxs, isDesktop, isTablet),
-      height: 320
+      maxHeight: useResponsiveValue(253, 120, isDesktop, isTablet),
+      minHeight: 120
     },
     media: {
       position: 'absolute',
@@ -19728,6 +19728,39 @@ 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$1.useState(() => Dimensions.get('window')),
+    dims = _useState[0],
+    setDims = _useState[1];
+  React$1.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,
@@ -19772,7 +19805,7 @@ var SectionHeader = function (_a) {
   }, description));
 };
 
-var useCarouselStyles = function (buttonSize, slideWidth) {
+var useCarouselStyles = function (buttonSize) {
   if (buttonSize === void 0) {
     buttonSize = 42;
   }
@@ -19782,8 +19815,8 @@ var useCarouselStyles = function (buttonSize, slideWidth) {
   var theme = useWllSdk().theme;
   return StyleSheet$1.create({
     container: {
-      flex: 1,
-      maxWidth: MAX_WIDTH
+      width: '100%',
+      flex: 1
     },
     sectionTitle: {
       fontSize: 31,
@@ -19799,13 +19832,18 @@ var useCarouselStyles = function (buttonSize, slideWidth) {
       marginBottom: 20
     },
     carouselContainer: {
+      width: '100%',
       flexDirection: 'row',
       alignItems: 'center',
-      justifyContent: 'center'
+      justifyContent: 'center',
+      position: 'relative'
     },
     carouselContent: {
-      overflow: 'hidden',
-      width: slideWidth
+      width: '100%',
+      overflow: 'hidden'
+    },
+    slideContainer: {
+      width: '100%'
     },
     navButton: {
       position: 'absolute',
@@ -19828,9 +19866,6 @@ var useCarouselStyles = function (buttonSize, slideWidth) {
       right: -buttonSize / 2,
       backgroundColor: theme.surface
     },
-    slideContainer: {
-      width: slideWidth
-    },
     indicators: {
       flexDirection: 'row',
       justifyContent: 'center',
@@ -19851,36 +19886,41 @@ var useCarouselStyles = function (buttonSize, slideWidth) {
 
 var Carousel = function (_a) {
   var section = _a.section;
-  var styles = useCarouselStyles(BUTTON_SIZE, SLIDE_WIDTH);
+  var windowWidth = useWindowDimensions().width;
+  var containerRef = React$1.useRef(null);
+  var _b = React$1.useState(windowWidth),
+    containerWidth = _b[0],
+    setContainerWidth = _b[1];
+  var styles = useCarouselStyles(BUTTON_SIZE);
   var animatedIndex = React$1.useRef(new Animated$1.Value(0)).current;
   var theme = useWllSdk().theme;
-  var _b = useResponsive(),
-    isDesktop = _b.isDesktop,
-    isTablet = _b.isTablet;
+  var _c = useResponsive(),
+    isDesktop = _c.isDesktop,
+    isTablet = _c.isTablet;
   var scrollViewRef = React$1.useRef(null);
-  var _c = React$1.useState(0),
-    currentIndex = _c[0],
-    setCurrentIndex = _c[1];
+  var _d = React$1.useState(0),
+    currentIndex = _d[0],
+    setCurrentIndex = _d[1];
   var bannerTiles = section.tiles.filter(function (tile) {
     return tile.type === exports.TileType.Banner;
   });
   var sortedTiles = sortByPriority(bannerTiles);
   var handleScroll = React$1.useCallback(function (event) {
     var contentOffsetX = event.nativeEvent.contentOffset.x;
-    var newIndex = contentOffsetX / SLIDE_WIDTH;
+    var newIndex = contentOffsetX / containerWidth;
     animatedIndex.setValue(newIndex);
-  }, [SLIDE_WIDTH, animatedIndex]);
+  }, [containerWidth, animatedIndex]);
   var handleScrollEnd = React$1.useCallback(function (event) {
     var contentOffsetX = event.nativeEvent.contentOffset.x;
-    var newIndex = Math.round(contentOffsetX / SLIDE_WIDTH);
+    var newIndex = Math.round(contentOffsetX / containerWidth);
     setCurrentIndex(newIndex);
-  }, [SLIDE_WIDTH]);
+  }, [containerWidth]);
   var handlePrev = function () {
     var _a;
     var newIndex = Math.max(0, currentIndex - 1);
     setCurrentIndex(newIndex);
     (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-      x: newIndex * SLIDE_WIDTH,
+      x: newIndex * containerWidth,
       animated: true
     });
   };
@@ -19889,7 +19929,7 @@ var Carousel = function (_a) {
     var newIndex = Math.min(sortedTiles.length - 1, currentIndex + 1);
     setCurrentIndex(newIndex);
     (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-      x: newIndex * SLIDE_WIDTH,
+      x: newIndex * containerWidth,
       animated: true
     });
   };
@@ -19905,7 +19945,12 @@ var Carousel = function (_a) {
     title: section.title,
     description: section.description
   }), /*#__PURE__*/React$1.createElement(View$2, {
-    style: styles.container
+    ref: containerRef,
+    style: styles.container,
+    onLayout: function (event) {
+      var width = event.nativeEvent.layout.width;
+      setContainerWidth(width);
+    }
   }, /*#__PURE__*/React$1.createElement(View$2, {
     style: styles.carouselContainer
   }, displayControls && /*#__PURE__*/React$1.createElement(TouchableOpacity$1, {
@@ -19925,20 +19970,18 @@ var Carousel = function (_a) {
     onScroll: handleScroll,
     onMomentumScrollEnd: handleScrollEnd,
     scrollEventThrottle: 16,
-    style: [styles.carouselContent, {
-      width: SLIDE_WIDTH
-    }],
+    style: [styles.carouselContent],
     contentContainerStyle: {
-      width: SLIDE_WIDTH * sortedTiles.length
+      width: containerWidth * sortedTiles.length
     },
     decelerationRate: "fast",
-    snapToInterval: SLIDE_WIDTH,
+    snapToInterval: containerWidth,
     snapToAlignment: "start"
   }, sortedTiles.map(function (tile, index) {
     return /*#__PURE__*/React$1.createElement(View$2, {
       key: index,
-      style: [{
-        width: SLIDE_WIDTH
+      style: [styles.slideContainer, {
+        width: containerWidth
       }]
     }, /*#__PURE__*/React$1.createElement(BannerTile, {
       tile: tile