refactor: (tiles) cleanup and refactor to use new responsive system

lib/components/atoms/BaseTile/index.tsx

@@ -114,8 +114,9 @@ const BaseTileContent: FC<{ children: ReactNode }> = ({ children }) => {
     <View
       style={[
         styles.content,
-        isHalfSize && {
+        {
           justifyContent: 'center',
+          height: !artworkUrl ? '100%' : undefined,
         },
       ]}
     >

lib/components/atoms/Button/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity } from 'react-native';
 import { useWllSdk } from '../../../context/WllSdkContext';
+import { useResponsive } from '../../../hooks/useResponsive';
 import { Variant } from '../../../types/theme';
-import { createResponsiveStyle } from '../../../utils/responsiveHelper';
+import { getResponsiveValue } from '../../../utils/responsiveHelper';
 import { createVariantSystem } from '../../../utils/variant';
 
 type ButtonProps = {
@@ -11,23 +12,7 @@ type ButtonProps = {
   variant: Variant;
 };
 
-const styles = StyleSheet.create({
-  button: createResponsiveStyle({
-    justifyContent: 'center',
-    alignItems: 'center',
-    paddingHorizontal: [12, 12, 24],
-    paddingVertical: [12, 12, 12],
-    alignSelf: 'flex-start',
-  }),
-  // @ts-ignore
-  text: createResponsiveStyle({
-    textAlign: 'center',
-    textTransform: 'uppercase',
-    fontSize: [12, 12, 18],
-  }),
-});
-
-const useButtonStyles = createVariantSystem(styles.button, (theme) => ({
+const useButtonStyles = createVariantSystem({}, (theme) => ({
   primary: {
     backgroundColor: theme.primary,
   },
@@ -42,7 +27,7 @@ const useButtonStyles = createVariantSystem(styles.button, (theme) => ({
   },
 }));
 
-const useTextStyles = createVariantSystem(styles.text, (theme) => ({
+const useTextStyles = createVariantSystem({}, (theme) => ({
   primary: {
     color: theme.primaryText,
   },
@@ -59,24 +44,36 @@ const useTextStyles = createVariantSystem(styles.text, (theme) => ({
 
 const Button: React.FC<ButtonProps> = ({ title, onPress, variant }) => {
   const { theme } = useWllSdk();
+  const { isDesktop, isTablet } = useResponsive();
   const buttonStyle = useButtonStyles(theme, variant);
   const textStyle = useTextStyles(theme, variant);
 
+  const dynamicStyles = StyleSheet.create({
+    button: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingHorizontal: getResponsiveValue(24, 12, isDesktop, isTablet),
+      paddingVertical: 12,
+      alignSelf: 'flex-start',
+    },
+    text: {
+      textAlign: 'center',
+      textTransform: 'uppercase',
+      fontSize: getResponsiveValue(18, 12, isDesktop, isTablet),
+      fontWeight: '700',
+    },
+  });
+
   return (
     <TouchableOpacity
-      style={[buttonStyle, { borderRadius: theme.sizes.borderRadiusButton }]}
+      style={[
+        dynamicStyles.button,
+        buttonStyle,
+        { borderRadius: theme.sizes.borderRadiusButton },
+      ]}
       onPress={onPress}
     >
-      <Text
-        style={[
-          textStyle,
-          {
-            fontWeight: '700',
-          },
-        ]}
-      >
-        {title}
-      </Text>
+      <Text style={[dynamicStyles.text, textStyle]}>{title}</Text>
     </TouchableOpacity>
   );
 };

lib/components/atoms/Indicator/index.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import { useResponsive } from '../../../hooks/useResponsive';
 
 const Indicator = () => {
-  const { isDesktop, isTablet, isMobile } = useResponsive();
+  const { isDesktop, isTablet } = useResponsive();
 
   const getCurrentLayout = () => {
     if (isDesktop) return 'Desktop Layout';
@@ -21,7 +21,7 @@ const Indicator = () => {
 const styles = StyleSheet.create({
   indicator: {
     position: 'absolute',
-    bottom: 10,
+    top: 10,
     right: 10,
     backgroundColor: 'red',
     paddingHorizontal: 12,

lib/components/atoms/TileContainer/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { GRID_GAP } from '../../../constants/grid';
+import { useResponsive } from '../../../hooks/useResponsive';
 import { Tile, TileHeight, TileType } from '../../../types/tile';
 import {
   BadgeTileUpdated,
@@ -16,6 +17,8 @@ type TileContainerProps = {
 };
 
 const TileContainer: React.FC<TileContainerProps> = ({ tiles }) => {
+  const { isDesktop } = useResponsive();
+
   const renderTile = (tile: Tile) => {
     switch (tile.type) {
       case TileType.Content:
@@ -42,7 +45,7 @@ const TileContainer: React.FC<TileContainerProps> = ({ tiles }) => {
     <View
       style={[
         styles.container,
-        allHalfTiles ? { aspectRatio: 2 } : { aspectRatio: 1 },
+        isDesktop && allHalfTiles ? { aspectRatio: 2 } : { aspectRatio: 1 },
       ]}
     >
       {tiles.map((tile, index) => (

lib/components/molecules/Carousel/index.tsx

@@ -12,6 +12,7 @@ import { useWllSdk } from '../../../context/WllSdkContext';
 import { TSection } from '../../../types/section';
 import { Tile, TileType } from '../../../types/tile';
 import { createResponsiveStyle } from '../../../utils/responsiveHelper';
+import { sortByPriority } from '../../../utils/transforms';
 import { Icon } from '../../atoms';
 import { BannerTile } from '../../organisms';
 import SectionHeader from '../SectionHeader';
@@ -30,6 +31,8 @@ const Carousel: React.FC<CarouselProps> = ({ section }) => {
     (tile: Tile) => tile.type === TileType.Banner
   );
 
+  const sortedTiles = sortByPriority(bannerTiles);
+
   const animatedIndex = useRef(new Animated.Value(0)).current;
 
   const handleScroll = useCallback(
@@ -60,15 +63,15 @@ const Carousel: React.FC<CarouselProps> = ({ section }) => {
   };
 
   const handleNext = () => {
-    const newIndex = Math.min(bannerTiles.length - 1, currentIndex + 1);
+    const newIndex = Math.min(sortedTiles.length - 1, currentIndex + 1);
     setCurrentIndex(newIndex);
     scrollViewRef.current?.scrollTo({
       x: newIndex * slideWidth,
       animated: true,
     });
   };
 
-  const displayControls = bannerTiles.length > 1;
+  const displayControls = sortedTiles.length > 1;
 
   return (
     <>
@@ -97,33 +100,24 @@ const Carousel: React.FC<CarouselProps> = ({ section }) => {
             scrollEventThrottle={16}
             style={[styles.carouselContent, { width: slideWidth }]}
             contentContainerStyle={{
-              width: slideWidth * bannerTiles.length,
+              width: slideWidth * sortedTiles.length,
             }}
             decelerationRate="fast"
             snapToInterval={slideWidth}
             snapToAlignment="start"
           >
-            {bannerTiles
-              .sort((a, b) => {
-                // Sort by priority (higher priority first)
-                if (a.priority !== b.priority) {
-                  return b.priority - a.priority;
-                }
-                // If priorities are equal, maintain original order
-                return bannerTiles.indexOf(a) - bannerTiles.indexOf(b);
-              })
-              .map((tile: Tile, index: number) => (
-                <View
-                  key={index}
-                  style={[
-                    {
-                      width: slideWidth,
-                    },
-                  ]}
-                >
-                  <BannerTile tile={tile} />
-                </View>
-              ))}
+            {sortedTiles.map((tile: Tile, index: number) => (
+              <View
+                key={index}
+                style={[
+                  {
+                    width: slideWidth,
+                  },
+                ]}
+              >
+                <BannerTile tile={tile} />
+              </View>
+            ))}
           </ScrollView>
           {displayControls && (
             <TouchableOpacity
@@ -140,7 +134,7 @@ const Carousel: React.FC<CarouselProps> = ({ section }) => {
         </View>
         {displayControls && (
           <View style={styles.indicators}>
-            {bannerTiles.map((_, index) => {
+            {sortedTiles.map((_, index) => {
               const width = animatedIndex.interpolate({
                 inputRange: [index - 1, index, index + 1],
                 outputRange: [8, 30, 8],
@@ -165,7 +159,7 @@ const Carousel: React.FC<CarouselProps> = ({ section }) => {
     </>
   );
 };
-const buttonSize = 30;
+const buttonSize = 42;
 const styles = StyleSheet.create({
   container: {
     width: '100%',
@@ -194,22 +188,6 @@ const styles = StyleSheet.create({
   carouselContent: {
     overflow: 'hidden',
   },
-  slideContent: {
-    padding: 20,
-    flex: 1,
-  },
-  imageContainer: {
-    width: '20%',
-    aspectRatio: 1,
-    position: 'relative',
-    overflow: 'hidden',
-  },
-  image: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
   navButton: {
     padding: 10,
     alignItems: 'center',

lib/components/molecules/Grid/index.tsx

@@ -4,6 +4,7 @@ import { GRID_GAP } from '../../../constants/grid';
 import { useResponsive } from '../../../context/ResponsiveContext';
 import { TSection } from '../../../types/section';
 import { Tile, TileHeight, TileType } from '../../../types/tile';
+import { sortByPriority } from '../../../utils/transforms';
 import { TileContainer } from '../../atoms';
 import { SectionHeader } from '../../molecules';
 
@@ -57,9 +58,11 @@ const Grid: React.FC<GridProps> = ({ section }) => {
       return tileContainers;
     }
 
-    gridTiles.forEach((tile, index) => {
+    const sortedTiles = sortByPriority(gridTiles);
+
+    sortedTiles.forEach((tile, index) => {
       currentTiles.push(tile);
-      const nextTile = gridTiles[index + 1];
+      const nextTile = sortedTiles[index + 1];
 
       const shouldStartNewContainer = (
         currentTiles: Tile[],

lib/components/organisms/BannerTile/index.tsx

@@ -98,11 +98,12 @@ const styles = StyleSheet.create({
     flex: 1,
   }),
   mediaContainer: createResponsiveStyle({
-    width: '20%',
+    width: '30%',
     aspectRatio: 1,
     position: 'relative',
     overflow: 'hidden',
     marginRight: [8, 8, 24],
+    height: 320,
   }),
   media: {
     position: 'absolute',

lib/components/organisms/Group/index.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { useWllSdk } from '../../../context/WllSdkContext';
 import { TGroup } from '../../../types/group';
+import { sortByPriority } from '../../../utils/transforms';
 import { Skeleton } from '../../atoms';
 import Section from '../Section';
 
@@ -49,20 +50,12 @@ const Group: React.FC<GroupProps> = ({ id }) => {
     );
   }
 
+  const sortedSections = sortByPriority(groupData.sections);
   return (
     <View>
-      {groupData.sections
-        .sort((a, b) => {
-          // Sort by priority (higher priority first)
-          if (a.priority !== b.priority) {
-            return b.priority - a.priority;
-          }
-          // If priorities are equal, maintain original order
-          return groupData.sections.indexOf(a) - groupData.sections.indexOf(b);
-        })
-        .map((section) => (
-          <Section key={section.id} section={section} />
-        ))}
+      {sortedSections.map((section) => (
+        <Section key={section.id} section={section} />
+      ))}
     </View>
   );
 };

lib/utils/transforms.ts

@@ -0,0 +1,19 @@
+import { Tile } from '../types/tile';
+
+/**
+ * Sorts tiles by priority (higher priority first) and maintains original order for equal priorities
+ * @param tiles Array of tiles to sort
+ * @returns Sorted array of tiles
+ */
+export const sortByPriority = <T extends Pick<Tile, 'priority'>>(
+  tiles: T[]
+): T[] => {
+  return [...tiles].sort((a, b) => {
+    // Sort by priority (higher priority first)
+    if (a.priority !== b.priority) {
+      return b.priority - a.priority;
+    }
+    // If priorities are equal, maintain original order
+    return tiles.indexOf(a) - tiles.indexOf(b);
+  });
+};