@plusscommunities/pluss-feature-builder-app-c 1.0.1-beta.3

package/src/components/layouts/FeatureImageList.js

@@ -0,0 +1,193 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+	View,
+	Text,
+	StyleSheet,
+	FlatList,
+	TouchableOpacity,
+	Image,
+	Dimensions,
+	Animated,
+} from "react-native";
+import { Icon } from "react-native-elements";
+import { Components, Colours } from "../../core.config";
+import { values } from "../../values.config";
+import { getSummaryFieldValue } from "../../js/helpers";
+
+const { width: screenWidth } = Dimensions.get("window");
+const CARD_WIDTH = screenWidth - 32; // 16px padding on each side
+const IMAGE_HEIGHT = (CARD_WIDTH * 9) / 16; // 16:9 aspect ratio
+
+const getEmptyStateMessage = (title) => {
+	const featureName = title || "Feature";
+	return `${featureName} listings will appear here once they're available.\nCome back soon to see what's new!`;
+};
+
+const FeatureImageList = ({
+	listings,
+	onItemPress,
+	colourBrandingMain,
+	refreshing,
+	onRefresh,
+	featureDefinition,
+	title,
+}) => {
+	const getImageSource = (imageField) => {
+		if (!imageField) return null;
+
+		// Handle different image field formats
+		if (typeof imageField === "string") {
+			return { uri: imageField };
+		}
+
+		if (typeof imageField === "object" && imageField.uri) {
+			return imageField;
+		}
+
+		if (typeof imageField === "object" && imageField.url) {
+			return { uri: imageField.url };
+		}
+
+		return null;
+	};
+
+	const renderListingItem = ({ item: listing }) => {
+		const title = listing.fields?.[values.mandatoryFields.title] || "Untitled";
+		const summary = getSummaryFieldValue(listing, featureDefinition);
+		const imageField = listing.fields?.[values.mandatoryFields.featureImage];
+		const imageSource = getImageSource(imageField);
+
+		return (
+			<TouchableOpacity
+				style={styles.cardContainer}
+				onPress={() => onItemPress && onItemPress(listing)}
+			>
+				<View style={styles.imageContainer}>
+					{imageSource ? (
+						<Image source={imageSource} style={styles.featureImage} />
+					) : (
+						<View style={[styles.featureImage, styles.placeholderImage]}>
+							<Text style={styles.placeholderText}>No Image</Text>
+						</View>
+					)}
+				</View>
+				<View style={styles.contentContainer}>
+					<Text style={styles.cardTitle} numberOfLines={2}>
+						{title}
+					</Text>
+					{summary && (
+						<Text style={styles.cardSummary} numberOfLines={2}>
+							{summary}
+						</Text>
+					)}
+				</View>
+			</TouchableOpacity>
+		);
+	};
+
+	if (!listings || listings.length === 0) {
+		return (
+			<View style={styles.emptyContainer}>
+				<Components.EmptyStateWidget
+					title={getEmptyStateMessage(title)}
+					height={120}
+				/>
+			</View>
+		);
+	}
+
+	if (onRefresh) {
+		return (
+			<View style={styles.container}>
+				<Components.LoadingIndicator visible={refreshing} />
+				<FlatList
+					data={listings}
+					keyExtractor={(item) => item.id}
+					renderItem={renderListingItem}
+					contentContainerStyle={styles.listContainer}
+					showsVerticalScrollIndicator={false}
+				/>
+			</View>
+		);
+	}
+
+	return (
+		<View style={styles.container}>
+			<FlatList
+				data={listings}
+				keyExtractor={(item) => item.id}
+				renderItem={renderListingItem}
+				contentContainerStyle={styles.listContainer}
+				showsVerticalScrollIndicator={false}
+			/>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		backgroundColor: "#f5f5f5",
+	},
+	listContainer: {
+		padding: 16,
+	},
+	cardContainer: {
+		backgroundColor: "#fff",
+		borderRadius: 8,
+		marginBottom: 16,
+		shadowColor: "#000",
+		shadowOffset: {
+			width: 0,
+			height: 2,
+		},
+		shadowOpacity: 0.1,
+		shadowRadius: 4,
+		elevation: 3,
+		overflow: "hidden",
+	},
+	imageContainer: {
+		width: CARD_WIDTH,
+		height: IMAGE_HEIGHT,
+	},
+	featureImage: {
+		width: "100%",
+		height: "100%",
+		backgroundColor: "#f0f0f0",
+	},
+	placeholderImage: {
+		justifyContent: "center",
+		alignItems: "center",
+		backgroundColor: "#e0e0e0",
+	},
+	placeholderText: {
+		fontSize: 16,
+		color: "#999",
+		fontFamily: "sf-medium",
+	},
+	contentContainer: {
+		padding: 16,
+	},
+	cardTitle: {
+		fontSize: 18,
+		fontWeight: "600",
+		fontFamily: "sf-semibold",
+		color: "#333",
+		marginBottom: 8,
+		lineHeight: 24,
+	},
+	cardSummary: {
+		fontSize: 14,
+		fontFamily: "sf-regular",
+		color: "#666",
+		lineHeight: 18,
+	},
+	emptyContainer: {
+		flex: 1,
+		justifyContent: "center",
+		alignItems: "center",
+		paddingVertical: 32,
+	},
+});
+
+export default FeatureImageList;

package/src/components/layouts/RoundImageList.js

@@ -0,0 +1,219 @@
+import React from "react";
+import {
+	View,
+	Text,
+	Image,
+	StyleSheet,
+	TouchableOpacity,
+	FlatList,
+} from "react-native";
+import { Icon } from "react-native-elements";
+import { Components } from "../../core.config";
+import { values } from "../../values.config";
+import { SPACING } from "../../js/spacing";
+import { getSummaryFieldValue } from "../../js/helpers";
+
+const getEmptyStateMessage = (title) => {
+	const featureName = title || "Feature";
+	return `${featureName} listings will appear here once they're available.\nCome back soon to see what's new!`;
+};
+
+const RoundImageList = ({
+	listings,
+	onItemPress,
+	colourBrandingMain,
+	refreshing,
+	onRefresh,
+	title,
+	featureDefinition,
+}) => {
+	const getImageSource = (imageField) => {
+		if (!imageField) {
+			return null;
+		}
+
+		// Handle different image field formats
+		if (typeof imageField === "string") {
+			return { uri: imageField };
+		}
+
+		if (typeof imageField === "object" && imageField.uri) {
+			return imageField;
+		}
+
+		if (typeof imageField === "object" && imageField.url) {
+			return { uri: imageField.url };
+		}
+
+		return null;
+	};
+
+	const renderListingItem = ({ item: listing }) => {
+		const title = listing.fields?.[values.mandatoryFields.title] || "Untitled";
+		const summary = getSummaryFieldValue(listing, featureDefinition);
+		const imageField = listing.fields?.[values.mandatoryFields.featureImage];
+
+		const imageSource = getImageSource(imageField);
+
+		return (
+			<TouchableOpacity
+				style={styles.cardContainer}
+				onPress={() => onItemPress && onItemPress(listing)}
+			>
+				<View style={styles.borderContainer}>
+					{imageSource ? (
+						<Image source={imageSource} style={styles.roundImage} />
+					) : (
+						<View style={[styles.roundImage, styles.placeholderImage]}></View>
+					)}
+					<View style={styles.contentContainer}>
+						<View style={styles.textContainer}>
+							<Text style={styles.titleText} numberOfLines={1}>
+								{title}
+							</Text>
+							<Text style={styles.descriptionText} numberOfLines={2}>
+								{summary}
+							</Text>
+						</View>
+						<View style={styles.chevronContainer}>
+							<Icon
+								type="font-awesome"
+								name="chevron-right"
+								size={16}
+								color="#ccc"
+								style={styles.chevron}
+							/>
+						</View>
+					</View>
+				</View>
+			</TouchableOpacity>
+		);
+	};
+
+	if (!listings || listings.length === 0) {
+		return (
+			<View style={styles.emptyContainer}>
+				<Components.EmptyStateWidget
+					title={getEmptyStateMessage(title)}
+					height={120}
+				/>
+			</View>
+		);
+	}
+
+	if (onRefresh) {
+		return (
+			<View style={styles.container}>
+				<Components.LoadingIndicator visible={refreshing} />
+				<FlatList
+					data={listings}
+					keyExtractor={(item) => item.id}
+					renderItem={renderListingItem}
+					contentContainerStyle={styles.scrollContainer}
+					showsVerticalScrollIndicator={false}
+				/>
+			</View>
+		);
+	}
+
+	return (
+		<FlatList
+			data={listings}
+			keyExtractor={(item) => item.id}
+			renderItem={renderListingItem}
+			contentContainerStyle={styles.scrollContainer}
+			showsVerticalScrollIndicator={false}
+		/>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	scrollContainer: {
+		paddingLeft: SPACING.XL + 16,
+		paddingRight: SPACING.MD,
+		paddingVertical: SPACING.SM,
+	},
+	cardContainer: {
+		paddingHorizontal: SPACING.SM + 2,
+		paddingVertical: SPACING.SM,
+	},
+	borderContainer: {
+		borderRadius: SPACING.SM * 1,
+		backgroundColor: "#ffffff",
+		shadowColor: "#000",
+		shadowOffset: {
+			width: 0,
+			height: 2,
+		},
+		shadowOpacity: 0.1,
+		shadowRadius: 3.84,
+		elevation: 5,
+		position: "relative",
+		minHeight: 100,
+		justifyContent: "center",
+		paddingLeft: SPACING.XL + 8,
+		paddingRight: SPACING.SM,
+	},
+	roundImage: {
+		width: 88,
+		height: 88,
+		borderRadius: 44,
+		backgroundColor: "#f0f0f0",
+		position: "absolute",
+		borderWidth: 2,
+		borderColor: "#fff",
+		left: -44,
+		top: "50%",
+		marginTop: -44,
+		shadowColor: "#000",
+		shadowOffset: {
+			width: 0,
+			height: 2,
+		},
+		shadowOpacity: 0.1,
+		shadowRadius: 3.84,
+		elevation: 6,
+	},
+	placeholderImage: {
+		backgroundColor: "#808080",
+		justifyContent: "center",
+		alignItems: "center",
+	},
+	contentContainer: {
+		flex: 1,
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	textContainer: {
+		flex: 1,
+		paddingLeft: SPACING.MD,
+		paddingVertical: SPACING.SM + 4,
+	},
+	titleText: {
+		fontSize: 20,
+		fontFamily: "sf-medium",
+		color: "#333",
+		marginBottom: SPACING.XS,
+	},
+	descriptionText: {
+		fontFamily: "sf-regular",
+		fontSize: 14,
+		color: "#666",
+		lineHeight: 18,
+	},
+	emptyContainer: {
+		paddingVertical: SPACING.MD,
+	},
+	chevronContainer: {
+		justifyContent: "center",
+		paddingHorizontal: SPACING.SM,
+	},
+	chevron: {
+		opacity: 0.6,
+	},
+});
+
+export default RoundImageList;

package/src/components/layouts/SquareImageList.js

@@ -0,0 +1,205 @@
+import React from "react";
+import {
+	View,
+	Text,
+	Image,
+	StyleSheet,
+	TouchableOpacity,
+	FlatList,
+} from "react-native";
+import { Icon } from "react-native-elements";
+import { Components } from "../../core.config";
+import { values } from "../../values.config";
+import { SPACING } from "../../js/spacing";
+import { getSummaryFieldValue } from "../../js/helpers";
+
+const getEmptyStateMessage = (title) => {
+	const featureName = title || "Feature";
+	return `${featureName} listings will appear here once they're available.\nCome back soon to see what's new!`;
+};
+
+const SquareImageList = ({
+	listings,
+	onItemPress,
+	colourBrandingMain,
+	refreshing,
+	onRefresh,
+	title,
+	featureDefinition,
+}) => {
+	const getImageSource = (imageField) => {
+		if (!imageField) return null;
+
+		// Handle different image field formats
+		if (typeof imageField === "string") {
+			return { uri: imageField };
+		}
+
+		if (typeof imageField === "object" && imageField.uri) {
+			return imageField;
+		}
+
+		if (typeof imageField === "object" && imageField.url) {
+			return { uri: imageField.url };
+		}
+
+		return null;
+	};
+
+	const renderListingItem = ({ item: listing }) => {
+		const title = listing.fields?.[values.mandatoryFields.title] || "Untitled";
+		const summary = getSummaryFieldValue(listing, featureDefinition);
+		const imageField = listing.fields?.[values.mandatoryFields.featureImage];
+		const imageSource = getImageSource(imageField);
+
+		return (
+			<TouchableOpacity
+				style={styles.cardContainer}
+				onPress={() => onItemPress && onItemPress(listing)}
+			>
+				<View style={styles.borderContainer}>
+					{imageSource ? (
+						<Image source={imageSource} style={styles.squareImage} />
+					) : (
+						<View style={[styles.squareImage, styles.placeholderImage]}></View>
+					)}
+					<View style={styles.contentContainer}>
+						<View style={styles.textContainer}>
+							<Text style={styles.titleText} numberOfLines={1}>
+								{title}
+							</Text>
+							<Text style={styles.descriptionText} numberOfLines={2}>
+								{summary}
+							</Text>
+						</View>
+						<View style={styles.chevronContainer}>
+							<Icon
+								type="font-awesome"
+								name="chevron-right"
+								size={16}
+								color="#ccc"
+								style={styles.chevron}
+							/>
+						</View>
+					</View>
+				</View>
+			</TouchableOpacity>
+		);
+	};
+
+	if (!listings || listings.length === 0) {
+		return (
+			<View style={styles.emptyContainer}>
+				<Components.EmptyStateWidget
+					title={getEmptyStateMessage(title)}
+					height={120}
+				/>
+			</View>
+		);
+	}
+
+	if (onRefresh) {
+		return (
+			<View style={styles.container}>
+				<Components.LoadingIndicator visible={refreshing} />
+				<FlatList
+					data={listings}
+					keyExtractor={(item) => item.id}
+					renderItem={renderListingItem}
+					contentContainerStyle={styles.scrollContainer}
+					showsVerticalScrollIndicator={false}
+				/>
+			</View>
+		);
+	}
+
+	return (
+		<FlatList
+			data={listings}
+			keyExtractor={(item) => item.id}
+			renderItem={renderListingItem}
+			contentContainerStyle={styles.scrollContainer}
+			showsVerticalScrollIndicator={false}
+		/>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+	},
+	scrollContainer: {
+		paddingHorizontal: SPACING.MD,
+		paddingVertical: SPACING.MD,
+	},
+	cardContainer: {
+		marginBottom: SPACING.MD,
+		backgroundColor: "#ffffff",
+		shadowColor: "#000",
+		shadowOffset: {
+			width: 0,
+			height: 2,
+		},
+		shadowOpacity: 0.1,
+		shadowRadius: 3.84,
+	},
+	borderContainer: {
+		borderRadius: SPACING.XS,
+		backgroundColor: "#ffffff",
+		shadowColor: "#000",
+		shadowOffset: {
+			width: 0,
+			height: 4,
+		},
+		shadowOpacity: 0.15,
+		shadowRadius: 8,
+		elevation: 4,
+		flexDirection: "row",
+		alignItems: "center",
+		overflow: "hidden",
+		minHeight: 100,
+		paddingRight: SPACING.SM,
+	},
+	squareImage: {
+		height: 100,
+		aspectRatio: 1,
+		backgroundColor: "#f0f0f0",
+		marginRight: SPACING.MD,
+	},
+	placeholderImage: {
+		backgroundColor: "#808080",
+		justifyContent: "center",
+	},
+	contentContainer: {
+		flex: 1,
+		flexDirection: "row",
+		alignItems: "center",
+	},
+	textContainer: {
+		flex: 1,
+	},
+	titleText: {
+		fontSize: 18,
+		fontFamily: "sf-medium",
+		color: "#333",
+		marginBottom: SPACING.XS,
+	},
+	descriptionText: {
+		fontFamily: "sf-regular",
+		fontSize: 14,
+		color: "#666",
+		lineHeight: 18,
+	},
+	emptyContainer: {
+		paddingVertical: SPACING.MD,
+	},
+	chevronContainer: {
+		justifyContent: "center",
+		paddingHorizontal: SPACING.SM,
+	},
+	chevron: {
+		opacity: 0.6,
+	},
+});
+
+export default SquareImageList;

package/src/config/index.js

@@ -0,0 +1,10 @@
+import { Config } from "../core.config";
+
+export const CONST_STRINGS = {
+	EMPTY_GROUPS: "You aren't in any Circles",
+	EMPTY_PEOPLE: "Contacts will show here",
+};
+export const getTinyChatDefault = () => Config.env.tinyChatDefault;
+export const getNewEventDefaults = () => Config.env.newEventDefaults;
+
+// TODO: Add configurations as required

package/src/core.config.js

@@ -0,0 +1,29 @@
+// import * as PlussCore from '../../pluss-core/src';
+import * as PlussCore from "@plusscommunities/pluss-core-app";
+
+const {
+	Apis,
+	Fonts,
+	Actions,
+	ActionTypes,
+	Config,
+	Components,
+	Styles,
+	Session,
+	Helper,
+	Constants,
+	Colours,
+} = PlussCore;
+export {
+	Apis,
+	Fonts,
+	Actions,
+	ActionTypes,
+	Config,
+	Components,
+	Styles,
+	Session,
+	Helper,
+	Constants,
+	Colours,
+};