refactor: (tiles) Start using new responsive helper throughout

white-label-loyalty · Nov 24, 2024 · 05790e5 · 05790e5
1 parent 341a473
commit 05790e5
Show file tree

Hide file tree

Showing 9 changed files with 133 additions and 75 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -1,8 +1,10 @@
 import type { Preview } from '@storybook/react';
 import * as React from 'react';
+import { Indicator } from '../lib/components/atoms';
 import { SectionContext } from '../lib/components/organisms/Section';
 import { WllSdkProvider } from '../lib/context/WllSdkContext';
 import { SectionType, TSection } from '../lib/types/section';
+
 import {
   CTALinkTarget,
   ProgressType,
@@ -158,6 +160,8 @@ const preview: Preview = {
           >
             <MockSectionProvider>
               <Story />
+
+              <Indicator />
             </MockSectionProvider>
           </div>
         </WllSdkProvider>

diff --git a/lib/components/atoms/Indicator/index.tsx b/lib/components/atoms/Indicator/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useResponsive } from '../../../hooks/useResponsive';
+
+const Indicator = () => {
+  const { isDesktop, isTablet, isMobile } = useResponsive();
+
+  const getCurrentLayout = () => {
+    if (isDesktop) return 'Desktop Layout';
+    if (isTablet) return 'Tablet Layout';
+    return 'Mobile Layout';
+  };
+
+  return (
+    <View style={styles.indicator}>
+      <Text style={styles.indicatorText}>{getCurrentLayout()}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  indicator: {
+    position: 'absolute',
+    bottom: 10,
+    right: 10,
+    backgroundColor: 'red',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 4,
+  },
+  indicatorText: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+});
+
+export default Indicator;
diff --git a/lib/components/atoms/Text/index.tsx b/lib/components/atoms/Text/index.tsx
@@ -5,8 +5,9 @@ import {
   StyleSheet,
   TextStyle,
 } from 'react-native';
+import { useResponsive } from '../../../context/ResponsiveContext';
 import { useWllSdk } from '../../../context/WllSdkContext';
-import { createResponsiveStyle } from '../../../utils/responsiveHelper';
+import { getResponsiveValue } from '../../../utils/responsiveHelper';
 
 type TextVariant =
   | 'eyebrow'
@@ -31,60 +32,57 @@ export const Text: React.FC<TextProps> = ({
   ...props
 }) => {
   const { theme } = useWllSdk();
+  const { isDesktop, isTablet } = useResponsive();
 
   const getVariantStyle = (variant: TextVariant): TextStyle => {
     const baseStyle = {
       color: theme.surfaceText,
     };
+
     switch (variant) {
       case 'eyebrow':
-        return createResponsiveStyle({
+        return {
           ...baseStyle,
-          fontSize: [12, 12, 14],
-          marginBottom: [4, 4, 8],
-        });
+          fontSize: getResponsiveValue(14, 12, isDesktop, isTablet),
+          marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet),
+        };
       case 'title':
-        return createResponsiveStyle({
+        return {
           ...baseStyle,
-          fontSize: [14, 14, 24],
+          fontSize: getResponsiveValue(24, 14, isDesktop, isTablet),
           fontWeight: 'bold',
-        });
-      case 'description':
-        return createResponsiveStyle({
-          ...baseStyle,
-        });
+        };
       case 'body':
-        return createResponsiveStyle({
+        return {
           color: theme.derivedSurfaceText[20],
-          fontSize: [10, 10, 14],
-        });
+          fontSize: getResponsiveValue(14, 10, isDesktop, isTablet),
+        };
       case 'caption':
-        return createResponsiveStyle({
+        return {
           ...baseStyle,
           fontWeight: 'bold',
-          fontSize: [18, 18, 24],
+          fontSize: getResponsiveValue(24, 18, isDesktop, isTablet),
           color: theme.primary,
-        });
-      case 'label':
-        return createResponsiveStyle({
-          ...baseStyle,
-        });
+        };
       case 'tier-earned':
-        return createResponsiveStyle({
+        return {
           ...baseStyle,
-          fontSize: [14, 14, 20],
+          fontSize: getResponsiveValue(20, 14, isDesktop, isTablet),
           fontWeight: 'bold',
-        });
+        };
       case 'tier-requirement':
-        return createResponsiveStyle({
+        return {
           ...baseStyle,
-          fontSize: [12, 12, 18],
+          fontSize: getResponsiveValue(18, 12, isDesktop, isTablet),
           fontWeight: 'bold',
-        });
+        };
+      case 'description':
+      case 'label':
       default:
-        return createResponsiveStyle({
+        return {
           ...baseStyle,
-        });
+          fontSize: getResponsiveValue(12, 10, isDesktop, isTablet),
+        };
     }
   };
 

diff --git a/lib/components/atoms/index.ts b/lib/components/atoms/index.ts
@@ -9,5 +9,6 @@ export { default as Text } from './Text';
 
 export { default as BaseBanner } from './BaseBanner';
 export { default as BaseTile } from './BaseTile';
+export { default as Indicator } from './Indicator';
 export { default as Skeleton } from './Skeleton';
 export { default as TileContainer } from './TileContainer';
diff --git a/lib/components/molecules/Grid/Grid.stories.tsx b/lib/components/molecules/Grid/Grid.stories.tsx
@@ -12,7 +12,7 @@ export default {
     (Story) => (
       <View
         style={{
-          width: 1080,
+          maxWidth: 1080,
           height: '100%',
           alignContent: 'center',
           justifyContent: 'center',

diff --git a/lib/components/molecules/Grid/index.tsx b/lib/components/molecules/Grid/index.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { GRID_GAP } from '../../../constants/grid';
+import { useResponsive } from '../../../context/ResponsiveContext';
 import { TSection } from '../../../types/section';
 import { Tile, TileHeight, TileType } from '../../../types/tile';
 import { TileContainer } from '../../atoms';
@@ -11,10 +12,8 @@ type GridProps = {
 };
 
 const Grid: React.FC<GridProps> = ({ section }) => {
-  const { width } = useWindowDimensions();
-  const isDesktop = width >= 700;
+  const { isDesktop } = useResponsive();
   const columnsPerRow = isDesktop ? 4 : 2;
-  const gap = GRID_GAP;
 
   const renderGrid = () => {
     const tileContainers: JSX.Element[] = [];
@@ -33,21 +32,23 @@ const Grid: React.FC<GridProps> = ({ section }) => {
       (tile) => tile.tileHeight === TileHeight.Half
     );
 
+    const getTileWidth = (columns: number) => ({
+      width: `calc(${100 / columns}% - ${((columns - 1) * GRID_GAP) / columns}px)`,
+      marginBottom: GRID_GAP,
+      height: 'auto',
+    });
+
     if (isDesktop && allHalfTiles) {
       gridTiles.forEach((tile, index) => {
         const isLastInRow = (index + 1) % columnsPerRow === 0;
         tileContainers.push(
           <View
             key={`container-${index}`}
-            // @ts-ignore
-            style={{
-              width: `calc(${100 / columnsPerRow}% - ${
-                ((columnsPerRow - 1) * gap) / columnsPerRow
-              }px)`,
-              marginRight: isLastInRow ? 0 : gap,
-              marginBottom: gap,
-              height: 'auto',
-            }}
+            style={[
+              // @ts-ignore
+              getTileWidth(columnsPerRow),
+              !isLastInRow && { marginRight: GRID_GAP },
+            ]}
           >
             <TileContainer tiles={[tile]} />
           </View>
@@ -88,14 +89,11 @@ const Grid: React.FC<GridProps> = ({ section }) => {
         tileContainers.push(
           <View
             key={`container-${index}`}
-            // @ts-ignore
-            style={{
-              width: `calc(${100 / columnsPerRow}% - ${
-                ((columnsPerRow - 1) * gap) / columnsPerRow
-              }px)`,
-              marginRight: isLastInRow ? 0 : gap,
-              marginBottom: gap,
-            }}
+            style={[
+              // @ts-ignore
+              getTileWidth(columnsPerRow),
+              !isLastInRow && { marginRight: GRID_GAP },
+            ]}
           >
             <TileContainer tiles={currentTiles} />
           </View>
@@ -119,7 +117,7 @@ const styles = StyleSheet.create({
   grid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    height: 'auto',
+    width: '100%',
   },
 });
 

diff --git a/lib/components/molecules/SectionHeader/index.tsx b/lib/components/molecules/SectionHeader/index.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useWllSdk } from '../../../context/WllSdkContext';
-import { createResponsiveStyle } from '../../../utils/responsiveHelper';
+import { useResponsive } from '../../../hooks/useResponsive';
+import { getResponsiveValue } from '../../../utils/responsiveHelper';
 import Text from '../../atoms/Text';
 
 type SectionHeaderProps = {
@@ -14,17 +15,31 @@ const SectionHeader: React.FC<SectionHeaderProps> = ({
   description,
 }) => {
   const { theme } = useWllSdk();
+  const { isDesktop, isTablet } = useResponsive();
 
   if (!title && !description) {
     return null;
   }
 
+  const dynamicStyles = StyleSheet.create({
+    sectionHeader: {
+      marginBottom: getResponsiveValue(16, 8, isDesktop, isTablet),
+    },
+    sectionTitle: {
+      fontSize: getResponsiveValue(32, 18, isDesktop, isTablet),
+      marginBottom: getResponsiveValue(8, 4, isDesktop, isTablet),
+    },
+    sectionDescription: {
+      fontSize: getResponsiveValue(24, 14, isDesktop, isTablet),
+    },
+  });
+
   return (
-    <View style={styles.sectionHeader}>
+    <View style={dynamicStyles.sectionHeader}>
       {title && (
         <Text
           style={[
-            styles.sectionTitle,
+            dynamicStyles.sectionTitle,
             {
               fontWeight: '700',
               color: theme.text,
@@ -37,7 +52,7 @@ const SectionHeader: React.FC<SectionHeaderProps> = ({
       {description && (
         <Text
           style={[
-            styles.sectionDescription,
+            dynamicStyles.sectionDescription,
             {
               color: theme.alphaDerivedText[80],
             },
@@ -50,17 +65,4 @@ const SectionHeader: React.FC<SectionHeaderProps> = ({
   );
 };
 
-const styles = StyleSheet.create({
-  sectionHeader: createResponsiveStyle({
-    marginBottom: [8, 8, 16],
-  }),
-  sectionTitle: createResponsiveStyle({
-    fontSize: [18, 18, 32],
-    marginBottom: [4, 4, 8],
-  }),
-  sectionDescription: createResponsiveStyle({
-    fontSize: [14, 14, 24],
-  }),
-});
-
 export default SectionHeader;
diff --git a/lib/components/organisms/RewardCategoryTile/index.tsx b/lib/components/organisms/RewardCategoryTile/index.tsx
@@ -1,7 +1,9 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useWllSdk } from '../../../context/WllSdkContext';
+import { useResponsive } from '../../../hooks/useResponsive';
 import { RewardCategoryTileConfig, Tile } from '../../../types/tile';
+import { getResponsiveValue } from '../../../utils/responsiveHelper';
 import { BaseTile, ProgressiveImage, Text } from '../../atoms';
 import { useTileContext } from '../../atoms/BaseTile';
 
@@ -27,13 +29,21 @@ const RewardCategoryHeader: React.FC = () => {
   const { theme } = useWllSdk();
   const { configuration } = useTileContext();
   const { showName, name } = configuration as RewardCategoryTileConfig;
+  const { isDesktop, isTablet } = useResponsive();
 
   if (!showName || !name) return null;
 
+  const dynamicStyles = StyleSheet.create({
+    headerText: {
+      fontSize: getResponsiveValue(16, 12, isDesktop, isTablet),
+      paddingHorizontal: getResponsiveValue(40, 20, isDesktop, isTablet),
+    },
+  });
+
   return (
     <View style={[styles.header, { backgroundColor: theme.primary }]}>
       <Text
-        style={[styles.headerText, { color: theme.primaryText }]}
+        style={[dynamicStyles.headerText, { color: theme.primaryText }]}
         ellipsizeMode="tail"
         numberOfLines={1}
       >
@@ -65,10 +75,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  headerText: {
-    fontSize: 16,
-    paddingHorizontal: 30,
-  },
   background: {
     position: 'absolute',
     width: '100%',

diff --git a/lib/utils/responsiveHelper.ts b/lib/utils/responsiveHelper.ts
@@ -33,3 +33,14 @@ export const createResponsiveStyle = <T extends object>(
 
   return responsiveStyle;
 };
+
+export const getResponsiveValue = (
+  desktopValue: number,
+  mobileValue: number,
+  isDesktop: boolean,
+  isTablet: boolean
+) => {
+  if (isDesktop) return desktopValue;
+  if (isTablet) return Math.round((desktopValue + mobileValue) / 2); // Tablet gets the middle value
+  return mobileValue;
+};