Merge pull request #33 from white-label-loyalty/reafctor/responsive-s…

…tyling-refactor Reafctor/responsive styling refactor
white-label-loyalty · Nov 25, 2024 · adfa0f4 · adfa0f4
2 parents bf62efd + 3ca5a52
commit adfa0f4
Show file tree

Hide file tree

Showing 21 changed files with 355 additions and 166 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 />
+
+              {process.env.NODE_ENV === 'development' && <Indicator />}
             </MockSectionProvider>
           </div>
         </WllSdkProvider>

diff --git a/lib/components/atoms/BaseTile/index.tsx b/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,
         },
       ]}
     >

diff --git a/lib/components/atoms/Button/index.tsx b/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>
   );
 };

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 } = 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',
+    top: 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/TileContainer/index.tsx b/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) => (

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';