@quintype/native-components 2.30.5 → 2.30.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.30.5",
+  "version": "2.30.7",
   "description": "",
   "main": "src/index.js",
   "scripts": {
@@ -22,7 +22,6 @@
     "react-native-is-detox": "^1.2.3",
     "react-native-lightbox": "0.8.1",
     "react-native-modal": "^13.0.1",
-    "react-native-render-html": "^4.2.3",
     "react-native-share": "^10.2.0",
     "react-native-star-rating-widget": "^1.7.3",
     "react-native-track-player": "^4.1.1"
@@ -37,6 +36,7 @@
     "react-native-fast-image": ">=8.3.2",
     "react-native-linear-gradient": "^2.8.3",
     "react-native-pdf": ">=6.7.4",
+    "react-native-render-html": ">=4.2.3",
     "react-native-vector-icons": "^10.0.0",
     "react-native-webview": ">=11.0.0"
   },

package/src/components/TwoColLayout/GridStoryCard.js

@@ -0,0 +1,121 @@
+import { get, throttle } from 'lodash';
+import PropTypes from 'prop-types';
+import React, { useContext, memo } from 'react';
+import {
+    StyleSheet,
+    TouchableOpacity,
+    View,
+    useWindowDimensions,
+} from 'react-native';
+import {
+    AppTheme,
+    getImageMetadata,
+    getImageSlug,
+} from '../../utils';
+import { getStoryHeadline } from '../../utils/story';
+import { ResponsiveImage, Text, StoryCardDetailsRow, StoryTemplateIcon } from '../index';
+import { gridStoryStyles } from './gridStyles';
+import {
+    COMP_GENERAL_CONSTANTS,
+} from '../../constants/component-constants';
+import PremiumIcons from '../../Icons/PremiumIcons/index';
+
+const GridStoryCardBase = (props) => {
+    const { story = {} } = props;
+    const { theme } = useContext(AppTheme);
+    const {
+        COLORS,
+        premiumIcon,
+        FONT_SIZE,
+        storyCardOptions = {},
+    } = theme;
+
+    const styles = gridStoryStyles(theme);
+    const containerStyle = StyleSheet.flatten([
+        styles.container,
+        props.style,
+    ]);
+    const hasShareButton = props.iconComponent && storyCardOptions.enableShareButton;
+    const headlineStyle = StyleSheet.flatten([
+        styles.headline,
+        !hasShareButton && styles.headlineWithoutIcon,
+        props.headlineStyle,
+    ]);
+
+    const isPremiumStory = story['access'] === 'subscription';
+    const throttledOnpress = throttle(props.onPress, 1000);
+    const screenWidth = useWindowDimensions().width;
+    const imageWidth = (screenWidth - (props.horizontalPadding || 24) * 2 - 10) / 2; // Rough estimate: screen - outer padding - gap / 2
+    const showDetailsRow = storyCardOptions.enableAuthorName
+        || storyCardOptions.enablePublishedAt
+        || storyCardOptions.enableReadTime;
+
+    return (
+        <TouchableOpacity
+            testID={COMP_GENERAL_CONSTANTS.secondaryStoryCard}
+            onPress={throttledOnpress}
+            activeOpacity={0.8}
+            style={containerStyle}
+        >
+            <View style={styles.imageAndDetails}>
+                <ResponsiveImage
+                    style={styles.image}
+                    metaData={getImageMetadata(story)}
+                    slug={getImageSlug(story) || ''}
+                    cdn={props.cdn || ''}
+                    imageWidth={imageWidth}
+                >
+                    <View style={styles.storyTypeContainer}>
+                        <StoryTemplateIcon storyTemplate={story['story-template']} theme={theme} />
+                    </View>
+                </ResponsiveImage>
+
+                <View style={styles.headlineAndTimestampBlockContainer}>
+                    {storyCardOptions.enableSectionName && <Text numberOfLines={1} ellipsizeMode="tail" style={styles.sectionName}>{get(story, ['sections', 0, 'display-name'], '')}</Text>}
+
+                    <View>
+                        <Text
+                            primary
+                            numberOfLines={storyCardOptions.numberOfLinesForTitle || 3}
+                            ellipsizeMode="tail"
+                            style={headlineStyle}
+                            testID={COMP_GENERAL_CONSTANTS.secondaryStoryHeadline}
+                        >
+                            {isPremiumStory && premiumIcon !== 'none' && <PremiumIcons style={styles.premiumIcon} name={premiumIcon} color={COLORS.primary} size={FONT_SIZE.h4} />}
+                            {isPremiumStory && premiumIcon !== 'none' && ' '}
+                            {getStoryHeadline(story)?.trim()}
+                        </Text>
+                        <View style={styles.shareIconContainer}>
+                            {props.iconComponent}
+                        </View>
+                    </View>
+
+                    {showDetailsRow && (
+                        <StoryCardDetailsRow
+                            authorName={get(story.authors, [0, 'name'])}
+                            publishedAt={story["published-at"]}
+                            readTime={story['read-time']}
+                        />
+                    )}
+                </View>
+            </View>
+        </TouchableOpacity>
+    );
+};
+
+GridStoryCardBase.propTypes = {
+    cdn: PropTypes.string.isRequired,
+    story: PropTypes.any.isRequired,
+    iconComponent: PropTypes.element,
+    horizontalPadding: PropTypes.number,
+    style: PropTypes.object,
+    onPress: PropTypes.func,
+    headlineStyle: PropTypes.object,
+};
+
+GridStoryCardBase.defaultProps = {
+    cdn: '',
+    horizontalPadding: 12,
+};
+
+export const GridStoryCard = memo(GridStoryCardBase);

package/src/components/TwoColLayout/gridStyles.js

@@ -0,0 +1,59 @@
+import { StyleSheet } from 'react-native';
+
+export const gridStoryStyles = ({ COLORS, FONT_SIZE, FONT_FAMILY, lineHeightMultiplier, storyCardOptions = {} }) => StyleSheet.create({
+    container: {
+        flexDirection: 'column',
+        backgroundColor: COLORS.BRAND_WHITE,
+        marginBottom: 14,
+        alignItems: 'flex-start',
+        gap: 10,
+        width: '48%',
+    },
+    imageAndDetails: {
+        flexDirection: 'column',
+        width: '100%',
+        alignItems: 'flex-start',
+        gap: 10,
+    },
+    image: {
+        marginTop: 4,
+        width: '100%',
+        aspectRatio: 16 / 9,
+    },
+    headlineAndTimestampBlockContainer: {
+        flexShrink: 1,
+        flexGrow: 1,
+        width: '100%',
+    },
+    sectionName: {
+        color: COLORS.BRAND_1,
+        fontSize: FONT_SIZE.h4,
+        lineHeight: FONT_SIZE.h4 * lineHeightMultiplier,
+    },
+    headline: {
+        color: COLORS.BRAND_BLACK,
+        flexWrap: 'wrap',
+        fontSize: FONT_SIZE.h3,
+        fontFamily: FONT_FAMILY.primaryBold,
+        lineHeight: FONT_SIZE.h3 * lineHeightMultiplier,
+        marginBottom: 4,
+        paddingRight: 25,
+    },
+    headlineWithoutIcon: {
+        paddingRight: 0,
+    },
+    storyTypeContainer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+    },
+    premiumIcon: {
+        marginTop: FONT_SIZE.h3 * 0.45,
+        marginRight: 3,
+    },
+    shareIconContainer: {
+        position: 'absolute',
+        right: 0,
+        top: 0,
+    }
+});

package/src/components/TwoColLayout/index.js

@@ -0,0 +1,103 @@
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import PropTypes from 'prop-types';
+import React, { memo, useContext } from 'react';
+import { View } from 'react-native';
+import {
+    CollectionTitle,
+    PrimaryStoryCard,
+    ShareButton,
+} from '../index';
+import { GridStoryCard } from './GridStoryCard';
+import { AppTheme } from '../../utils';
+import { collectionStyles } from './styles';
+
+const TwoColLayoutBase = ({
+    cdn,
+    collectionName,
+    stories,
+    onCollectionPress,
+    onStoryPress,
+    collectionTestID,
+    offset,
+    horizontalPadding,
+    initialOffset,
+    hideCollectionTitle,
+}) => {
+    const { theme } = useContext(AppTheme);
+    const styles = collectionStyles(theme);
+
+    const sliceLimit = offset || initialOffset || 5;
+    const primaryStory = !isEmpty(stories) && get(stories, [0, 'story'], stories[0]);
+
+    // Secondary stories start from index 1
+    const secondaryStories = stories.slice(1, sliceLimit);
+
+    return (
+        <>
+            {!hideCollectionTitle && (
+                <CollectionTitle
+                    title={collectionName}
+                    onPress={onCollectionPress}
+                    horizontalPadding={horizontalPadding}
+                />
+            )}
+            <PrimaryStoryCard
+                collectionTestID={collectionTestID}
+                onPress={() => {
+                    !isEmpty(stories) && onStoryPress(primaryStory);
+                }}
+                cdn={cdn}
+                story={!isEmpty(stories) ? primaryStory : {}}
+                iconComponent={<ShareButton story={primaryStory} inListingStoryCard />}
+                horizontalPadding={horizontalPadding}
+            />
+
+            {/* Grid Container for Secondary Stories */}
+            <View style={[styles.gridContainer, { marginHorizontal: horizontalPadding }]}>
+                {secondaryStories.map((currentStory, index) => {
+                    const secondaryStory = get(currentStory, ['story'], currentStory);
+                    return (
+                        <React.Fragment key={secondaryStory?.id}>
+                            <GridStoryCard
+                                collectionTestID={collectionTestID}
+                                onPress={() => onStoryPress(secondaryStory)}
+                                cdn={cdn}
+                                story={secondaryStory}
+                                iconComponent={<ShareButton story={secondaryStory} inListingStoryCard />}
+                                horizontalPadding={0} // Padding handled by parent container margin
+                            />
+                            {((index + 1) % 2 === 0) && index !== secondaryStories.length - 1 && (
+                                <View style={[styles.separator, { marginBottom: 16 }]} />
+                            )}
+                        </React.Fragment>
+                    );
+                })}
+            </View>
+            {!isEmpty(stories) && (
+                <View style={{ paddingHorizontal: horizontalPadding }}>
+                    <View style={styles.separator} />
+                </View>
+            )}
+        </>
+    );
+};
+
+TwoColLayoutBase.propTypes = {
+    offset: PropTypes.number,
+    initialOffset: PropTypes.number,
+    cdn: PropTypes.string.isRequired,
+    collectionName: PropTypes.string,
+    stories: PropTypes.array.isRequired,
+    onCollectionPress: PropTypes.func,
+    onStoryPress: PropTypes.func,
+    collectionTestID: PropTypes.string,
+    horizontalPadding: PropTypes.number,
+    hideCollectionTitle: PropTypes.bool,
+};
+
+TwoColLayoutBase.defaultProps = {
+    horizontalPadding: 12,
+};
+
+export const TwoColLayout = memo(TwoColLayoutBase);

package/src/components/TwoColLayout/styles.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+
+export const collectionStyles = ({ COLORS = {} }) => StyleSheet.create({
+    gridContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+        marginTop: 16,
+    },
+    separator: {
+        width: '100%',
+        height: 0.8,
+        opacity: 0.1,
+        backgroundColor: COLORS.BRAND_BLACK,
+    }
+});

package/src/components/index.js

@@ -44,5 +44,5 @@ export { StoryTemplateIcon } from './StoryTemplateIcon';
 export { StoryCardDetailsRow } from './StoryCardDetailsRow';
 export { TextA } from './TextA';
 export { TextQ } from './TextQ';
-export {Comments} from './Comments';
-
+export { Comments } from './Comments';
+export { TwoColLayout } from './TwoColLayout';