@mereb/app-feed 0.0.4 → 0.0.5

package/dist/headless.js

@@ -0,0 +1,60 @@
+import { gql } from '@apollo/client';
+export { FeedDocument } from '@mereb/shared-graphql';
+export const CreatePostDocument = gql `
+  mutation CreatePost($body: String!, $mediaKeys: [String!]) {
+    createPost(body: $body, mediaKeys: $mediaKeys) {
+      id
+      body
+      createdAt
+      author {
+        id
+        handle
+      }
+    }
+  }
+`;
+export const FEED_PAGE_SIZE = 20;
+const MINUTE = 60 * 1000;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+export function parseFeedTimestamp(value) {
+    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, now = Date.now()) {
+    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() ? undefined : 'numeric',
+        month: 'short',
+        day: 'numeric'
+    });
+}
+export function selectFeedNodes(data) {
+    if (!data?.feedHome?.edges?.length) {
+        return [];
+    }
+    return data.feedHome.edges.map((edge) => edge.node);
+}

package/dist/{src/index.d.ts → index.d.ts}

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

package/dist/index.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 } from './headless.js';
+function Separator({ style }) {
+    return _jsx(View, { style: style });
+}
+/* Top-level wrapper so FlatList receives a stable component reference */
+function SeparatorWithStyle() {
+    return _jsx(Separator, { style: styles.separator });
+}
+function PostCard({ post, onSelectAuthor }) {
+    const handlePress = useCallback(() => {
+        onSelectAuthor?.(post.author.handle);
+    }, [onSelectAuthor, post.author.handle]);
+    return (_jsxs(View, { style: styles.card, children: [_jsxs(View, { style: styles.metaRow, children: [onSelectAuthor ? (_jsx(TouchableOpacity, { onPress: handlePress, accessibilityRole: "button", children: _jsxs(Text, { style: styles.handleLink, children: ["@", post.author.handle] }) })) : (_jsxs(Text, { style: styles.handle, children: ["@", post.author.handle] })), _jsx(Text, { style: styles.metaSeparator, children: "\u2022" }), _jsx(Text, { style: styles.timestamp, children: formatRelativeFeedTimestamp(post.createdAt) })] }), _jsx(Text, { style: styles.body, children: post.body })] }));
+}
+const FALLBACK_SUGGESTIONS = [
+    { handle: 'mereb-team', hint: 'Product updates' },
+    { handle: 'designers', hint: 'Design drops' },
+    { handle: 'dev-journal', hint: 'Engineering notes' }
+];
+function SuggestionsSection({ suggestions, onSelectAuthor }) {
+    if (suggestions.length === 0)
+        return null;
+    return (_jsxs(View, { style: styles.suggestionsCard, children: [_jsx(Text, { style: styles.suggestionsTitle, children: "Discover people to follow" }), _jsx(Text, { style: styles.suggestionsBody, children: "Follow a few profiles to keep your feed fresh." }), _jsx(View, { style: styles.suggestionsList, children: suggestions.map((sugg) => (_jsxs(TouchableOpacity, { style: styles.suggestionPill, onPress: () => onSelectAuthor?.(sugg.handle), accessibilityRole: "button", children: [_jsxs(Text, { style: styles.suggestionHandle, children: ["@", sugg.handle] }), sugg.hint ? (_jsx(Text, { style: styles.suggestionHint, children: sugg.hint })) : null] }, sugg.handle))) })] }));
+}
+export function FeedScreen({ onSelectAuthor }) {
+    const { data, loading, error, refetch } = useFeedQuery();
+    const posts = useMemo(() => selectFeedNodes(data), [data]);
+    const suggestions = useMemo(() => {
+        const seen = new Set();
+        const derived = [];
+        for (const post of posts) {
+            if (seen.has(post.author.handle))
+                continue;
+            seen.add(post.author.handle);
+            derived.push({ handle: post.author.handle });
+        }
+        const combined = [...derived, ...FALLBACK_SUGGESTIONS].filter((s) => !seen.has(s.handle) // avoid dupes with fallbacks
+        );
+        return combined.slice(0, 5);
+    }, [posts]);
+    const shouldShowSuggestions = !loading && posts.length < 5;
+    const handleRefresh = useCallback(() => {
+        void refetch();
+    }, [refetch]);
+    if (error) {
+        return (_jsx(View, { style: styles.centered, children: _jsx(Text, { style: styles.errorText, children: "Failed to load feed" }) }));
+    }
+    return (_jsx(FlatList, { data: posts, keyExtractor: (item) => item.id, contentContainerStyle: styles.listContent, ItemSeparatorComponent: SeparatorWithStyle, refreshControl: _jsx(RefreshControl, { refreshing: loading, onRefresh: handleRefresh }), ListHeaderComponent: shouldShowSuggestions ? (_jsx(SuggestionsSection, { suggestions: suggestions, onSelectAuthor: onSelectAuthor })) : null, renderItem: ({ item }) => (_jsx(PostCard, { post: item, onSelectAuthor: onSelectAuthor })), ListEmptyComponent: loading ? null : (_jsxs(View, { style: styles.centered, children: [_jsx(Text, { style: styles.emptyTitle, children: "No posts yet" }), _jsx(Text, { style: styles.emptyBody, children: "Pull down to refresh or check back later for new updates." })] })) }));
+}
+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'
+    },
+    suggestionsCard: {
+        backgroundColor: color.surface,
+        borderRadius: radius.lg,
+        padding: spacing.lg,
+        marginBottom: spacing.lg
+    },
+    suggestionsTitle: {
+        fontSize: 18,
+        fontWeight: '700',
+        color: color.text,
+        marginBottom: spacing.xs
+    },
+    suggestionsBody: {
+        color: color.textMuted,
+        marginBottom: spacing.md
+    },
+    suggestionsList: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: spacing.sm
+    },
+    suggestionPill: {
+        paddingVertical: spacing.xs,
+        paddingHorizontal: spacing.md,
+        borderRadius: radius.pill ?? radius.lg,
+        backgroundColor: color.neutralMuted ?? color.surfaceMuted,
+        flexDirection: 'column',
+        gap: spacing.xxs
+    },
+    suggestionHandle: {
+        color: color.text,
+        fontWeight: '600'
+    },
+    suggestionHint: {
+        color: color.textMuted,
+        fontSize: 12
+    }
+});

package/dist/native.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/native.js

@@ -0,0 +1 @@
+export * from './index.js';

package/package.json

@@ -1,28 +1,34 @@
 {
   "name": "@mereb/app-feed",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Feed experience building blocks for Mereb apps",
   "type": "module",
-  "main": "src/index.tsx",
-  "types": "src/index.tsx",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./src/index.tsx",
-      "default": "./src/index.tsx"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./native": {
+      "types": "./dist/native.d.ts",
+      "import": "./dist/native.js",
+      "default": "./dist/native.js"
     },
     "./headless": {
-      "types": "./src/headless.ts",
-      "default": "./src/headless.ts"
+      "types": "./dist/headless.d.ts",
+      "import": "./dist/headless.js",
+      "default": "./dist/headless.js"
     }
   },
   "files": [
-    "src",
     "dist",
     "package.json"
   ],
   "dependencies": {
-    "@mereb/shared-graphql": "^0.0.9",
-    "@mereb/ui-shared": "^0.0.1",
+    "@mereb/shared-graphql": "^0.0.11",
+    "@mereb/ui-shared": "^0.0.3",
     "@mereb/tokens": "^0.0.4"
   },
   "peerDependencies": {
@@ -33,10 +39,16 @@
   },
   "devDependencies": {
     "@types/react": "~18.2.79",
-    "typescript": ">=5.3.3"
+    "husky": "^9.1.7",
+    "typescript": ">=5.3.3",
+    "vitest": "^3.2.4"
   },
   "scripts": {
+    "clean": "node -e \"const fs=require('node:fs'); fs.rmSync('dist',{recursive:true,force:true}); fs.rmSync('tsconfig.tsbuildinfo',{force:true});\"",
     "typecheck": "tsc --noEmit --project tsconfig.json",
-    "build": "tsc --project tsconfig.json"
+    "test": "pnpm exec vitest run --config vitest.config.ts",
+    "test:watch": "pnpm exec vitest --config vitest.config.ts",
+    "build": "pnpm run clean && tsc --project tsconfig.json",
+    "version:bump": "node ./scripts/bump-version.mjs"
   }
 }

package/src/headless.ts

@@ -1,86 +0,0 @@
-import { gql } from '@apollo/client';
-import type { FeedQuery } from '@mereb/shared-graphql';
-export { FeedDocument } from '@mereb/shared-graphql';
-
-export type FeedNode = FeedQuery['feedHome']['edges'][number]['node'];
-export type CreatePostResponse = {
-  createPost: {
-    id: string;
-    body: string;
-    createdAt: string;
-    author: {
-      id: string;
-      handle: string;
-    };
-  };
-};
-export type CreatePostVariables = {
-  body: string;
-  mediaKeys?: string[];
-};
-
-export const CreatePostDocument = gql`
-  mutation CreatePost($body: String!, $mediaKeys: [String!]) {
-    createPost(body: $body, mediaKeys: $mediaKeys) {
-      id
-      body
-      createdAt
-      author {
-        id
-        handle
-      }
-    }
-  }
-`;
-
-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() ? undefined : 'numeric',
-    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

@@ -1,261 +0,0 @@
-import {useCallback, useMemo} from 'react';
-import {FlatList, RefreshControl, StyleSheet, Text, TouchableOpacity, View, type ViewStyle} from 'react-native';
-import {useFeedQuery} from '@mereb/shared-graphql';
-import {tokens} from '@mereb/tokens/native';
-import {cardRecipes} from '@mereb/ui-shared';
-import {type FeedNode, formatRelativeFeedTimestamp, selectFeedNodes} from './headless.js';
-
-type SeparatorProps = {
-    style?: ViewStyle;
-};
-
-function Separator({style}: Readonly<SeparatorProps>) {
-    return <View style={style}/>;
-}
-
-/* Top-level wrapper so FlatList receives a stable component reference */
-function SeparatorWithStyle() {
-    return <Separator style={styles.separator} />;
-}
-
-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;
-};
-
-type Suggestion = {
-    handle: string;
-    hint?: string;
-};
-
-const FALLBACK_SUGGESTIONS: Suggestion[] = [
-    {handle: 'mereb-team', hint: 'Product updates'},
-    {handle: 'designers', hint: 'Design drops'},
-    {handle: 'dev-journal', hint: 'Engineering notes'}
-];
-
-function SuggestionsSection({
-    suggestions,
-    onSelectAuthor
-}: Readonly<{
-    suggestions: Suggestion[];
-    onSelectAuthor?: (handle: string) => void;
-}>) {
-    if (suggestions.length === 0) return null;
-
-    return (
-        <View style={styles.suggestionsCard}>
-            <Text style={styles.suggestionsTitle}>Discover people to follow</Text>
-            <Text style={styles.suggestionsBody}>
-                Follow a few profiles to keep your feed fresh.
-            </Text>
-            <View style={styles.suggestionsList}>
-                {suggestions.map((sugg) => (
-                    <TouchableOpacity
-                        key={sugg.handle}
-                        style={styles.suggestionPill}
-                        onPress={() => onSelectAuthor?.(sugg.handle)}
-                        accessibilityRole="button"
-                    >
-                        <Text style={styles.suggestionHandle}>@{sugg.handle}</Text>
-                        {sugg.hint ? (
-                            <Text style={styles.suggestionHint}>{sugg.hint}</Text>
-                        ) : null}
-                    </TouchableOpacity>
-                ))}
-            </View>
-        </View>
-    );
-}
-
-export function FeedScreen({onSelectAuthor}: Readonly<FeedScreenProps>) {
-    const {data, loading, error, refetch} = useFeedQuery();
-
-    const posts = useMemo(() => selectFeedNodes(data), [data]);
-    const suggestions = useMemo(() => {
-        const seen = new Set<string>();
-        const derived: Suggestion[] = [];
-        for (const post of posts) {
-            if (seen.has(post.author.handle)) continue;
-            seen.add(post.author.handle);
-            derived.push({handle: post.author.handle});
-        }
-        const combined = [...derived, ...FALLBACK_SUGGESTIONS].filter(
-            (s) => !seen.has(s.handle) // avoid dupes with fallbacks
-        );
-        return combined.slice(0, 5);
-    }, [posts]);
-    const shouldShowSuggestions = !loading && posts.length < 5;
-
-    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={SeparatorWithStyle}
-            refreshControl={<RefreshControl refreshing={loading} onRefresh={handleRefresh}/>}
-            ListHeaderComponent={
-                shouldShowSuggestions ? (
-                    <SuggestionsSection
-                        suggestions={suggestions}
-                        onSelectAuthor={onSelectAuthor}
-                    />
-                ) : null
-            }
-            renderItem={({item}) => (
-                <PostCard post={item} onSelectAuthor={onSelectAuthor}/>
-            )}
-            ListEmptyComponent={
-                loading ? null : (
-                    <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>
-                )
-            }
-        />
-    );
-}
-
-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'
-    },
-    suggestionsCard: {
-        backgroundColor: color.surface,
-        borderRadius: radius.lg,
-        padding: spacing.lg,
-        marginBottom: spacing.lg
-    },
-    suggestionsTitle: {
-        fontSize: 18,
-        fontWeight: '700',
-        color: color.text,
-        marginBottom: spacing.xs
-    },
-    suggestionsBody: {
-        color: color.textMuted,
-        marginBottom: spacing.md
-    },
-    suggestionsList: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: spacing.sm
-    },
-    suggestionPill: {
-        paddingVertical: spacing.xs,
-        paddingHorizontal: spacing.md,
-        borderRadius: radius.pill ?? radius.lg,
-        backgroundColor: color.neutralMuted ?? color.surfaceMuted,
-        flexDirection: 'column',
-        gap: spacing.xxs
-    },
-    suggestionHandle: {
-        color: color.text,
-        fontWeight: '600'
-    },
-    suggestionHint: {
-        color: color.textMuted,
-        fontSize: 12
-    }
-});