@mereb/app-feed 0.0.1

package/dist/src/headless.d.ts

@@ -0,0 +1,7 @@
+import type { FeedQuery } from '@mereb/shared-graphql';
+export { FeedDocument } from '@mereb/shared-graphql';
+export type FeedNode = FeedQuery['feedHome']['edges'][number]['node'];
+export declare const FEED_PAGE_SIZE = 20;
+export declare function parseFeedTimestamp(value?: string | null): Date | null;
+export declare function formatRelativeFeedTimestamp(value?: string | null, now?: number): string;
+export declare function selectFeedNodes(data?: FeedQuery | null): FeedNode[];

package/dist/src/index.d.ts

@@ -0,0 +1,5 @@
+type FeedScreenProps = {
+    onSelectAuthor?: (handle: string) => void;
+};
+export declare function FeedScreen({ onSelectAuthor }: Readonly<FeedScreenProps>): import("react").JSX.Element;
+export {};

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@mereb/app-feed",
+  "version": "0.0.1",
+  "description": "Feed experience building blocks for Mereb apps",
+  "type": "module",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
+    },
+    "./headless": {
+      "types": "./src/headless.ts",
+      "default": "./src/headless.ts"
+    }
+  },
+  "files": [
+    "src",
+    "dist",
+    "package.json"
+  ],
+  "dependencies": {
+    "@mereb/shared-graphql": "^0.0.6",
+    "@mereb/ui-shared": "^0.0.1",
+    "@mereb/tokens": "^0.0.4"
+  },
+  "peerDependencies": {
+    "@apollo/client": ">=3.8.0",
+    "expo-router": ">=3.0.0",
+    "react": ">=18.2.0",
+    "react-native": ">=0.72.0"
+  },
+  "devDependencies": {
+    "@types/react": "~18.2.79",
+    "typescript": ">=5.3.3"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit --project tsconfig.json",
+    "build": "tsc --project tsconfig.json"
+  }
+}

package/src/headless.ts

@@ -0,0 +1,56 @@
+import type { FeedQuery } from '@mereb/shared-graphql';
+export { FeedDocument } from '@mereb/shared-graphql';
+
+export type FeedNode = FeedQuery['feedHome']['edges'][number]['node'];
+
+export const FEED_PAGE_SIZE = 20;
+
+const MINUTE = 60 * 1000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+export function parseFeedTimestamp(value?: string | null): Date | null {
+  if (!value) {
+    return null;
+  }
+  const asNumber = Number(value);
+  if (!Number.isNaN(asNumber) && asNumber > 0) {
+    const date = new Date(asNumber);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+
+export function formatRelativeFeedTimestamp(value?: string | null, now: number = Date.now()): string {
+  const date = parseFeedTimestamp(value);
+  if (!date) {
+    return 'Just now';
+  }
+
+  const diff = now - date.getTime();
+  if (diff < MINUTE) {
+    return 'Just now';
+  }
+  if (diff < HOUR) {
+    const mins = Math.round(diff / MINUTE);
+    return `${mins} min${mins === 1 ? '' : 's'} ago`;
+  }
+  if (diff < DAY) {
+    const hours = Math.round(diff / HOUR);
+    return `${hours} hr${hours === 1 ? '' : 's'} ago`;
+  }
+
+  return date.toLocaleDateString(undefined, {
+    year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined,
+    month: 'short',
+    day: 'numeric'
+  });
+}
+
+export function selectFeedNodes(data?: FeedQuery | null): FeedNode[] {
+  if (!data?.feedHome?.edges?.length) {
+    return [];
+  }
+  return data.feedHome.edges.map((edge) => edge.node);
+}

package/src/index.tsx

@@ -0,0 +1,155 @@
+import { useCallback, useMemo } from 'react';
+import {
+  FlatList,
+  RefreshControl,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View
+} from 'react-native';
+import { useFeedQuery } from '@mereb/shared-graphql';
+import { tokens } from '@mereb/tokens/native';
+import { cardRecipes } from '@mereb/ui-shared';
+import {
+  formatRelativeFeedTimestamp,
+  selectFeedNodes,
+  type FeedNode
+} from './headless.js';
+
+type PostCardProps = {
+  post: FeedNode;
+  onSelectAuthor?: (handle: string) => void;
+};
+
+function PostCard({ post, onSelectAuthor }: Readonly<PostCardProps>) {
+  const handlePress = useCallback(() => {
+    onSelectAuthor?.(post.author.handle);
+  }, [onSelectAuthor, post.author.handle]);
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.metaRow}>
+        {onSelectAuthor ? (
+          <TouchableOpacity onPress={handlePress} accessibilityRole="button">
+            <Text style={styles.handleLink}>@{post.author.handle}</Text>
+          </TouchableOpacity>
+        ) : (
+          <Text style={styles.handle}>@{post.author.handle}</Text>
+        )}
+        <Text style={styles.metaSeparator}>•</Text>
+        <Text style={styles.timestamp}>{formatRelativeFeedTimestamp(post.createdAt)}</Text>
+      </View>
+      <Text style={styles.body}>{post.body}</Text>
+    </View>
+  );
+}
+
+type FeedScreenProps = {
+  onSelectAuthor?: (handle: string) => void;
+};
+
+export function FeedScreen({ onSelectAuthor }: Readonly<FeedScreenProps>) {
+  const { data, loading, error, refetch } = useFeedQuery();
+
+  const posts = useMemo(() => selectFeedNodes(data), [data]);
+
+  const handleRefresh = useCallback(() => {
+    void refetch();
+  }, [refetch]);
+
+  if (error) {
+    return (
+      <View style={styles.centered}>
+        <Text style={styles.errorText}>Failed to load feed</Text>
+      </View>
+    );
+  }
+
+  return (
+    <FlatList
+      data={posts}
+      keyExtractor={(item) => item.id}
+      contentContainerStyle={styles.listContent}
+      ItemSeparatorComponent={() => <View style={styles.separator} />}
+      refreshControl={<RefreshControl refreshing={loading} onRefresh={handleRefresh} />}
+      renderItem={({ item }) => (
+        <PostCard post={item} onSelectAuthor={onSelectAuthor} />
+      )}
+      ListEmptyComponent={
+        !loading ? (
+          <View style={styles.centered}>
+            <Text style={styles.emptyTitle}>No posts yet</Text>
+            <Text style={styles.emptyBody}>
+              Pull down to refresh or check back later for new updates.
+            </Text>
+          </View>
+        ) : null
+      }
+    />
+  );
+}
+
+const { color, spacing, radius, shadow } = tokens;
+const feedCardRecipe = cardRecipes.elevated;
+
+const styles = StyleSheet.create({
+  listContent: {
+    padding: spacing.lg,
+    gap: spacing.md
+  },
+  separator: {
+    height: 0
+  },
+  card: {
+    backgroundColor: color[feedCardRecipe.backgroundColor],
+    borderRadius: radius[feedCardRecipe.radius],
+    padding: spacing[feedCardRecipe.padding],
+    ...shadow[feedCardRecipe.elevation]
+  },
+  metaRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: spacing.sm
+  },
+  handle: {
+    fontWeight: '600',
+    color: color.text
+  },
+  handleLink: {
+    fontWeight: '600',
+    color: color.primary
+  },
+  metaSeparator: {
+    marginHorizontal: spacing.xs,
+    color: color.textMuted
+  },
+  timestamp: {
+    color: color.textMuted
+  },
+  body: {
+    fontSize: 16,
+    lineHeight: 22,
+    color: color.text
+  },
+  centered: {
+    flex: 1,
+    padding: spacing.xxxl,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  errorText: {
+    fontSize: 16,
+    color: '#d22c2c'
+  },
+  emptyTitle: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: color.text,
+    marginBottom: spacing.sm
+  },
+  emptyBody: {
+    fontSize: 14,
+    color: color.textMuted,
+    textAlign: 'center'
+  }
+});