feat: add legendlist evals

evals/lists/13-rn-flashlist-masonry-photo-gallery/app/App.tsx

@@ -12,7 +12,8 @@ const PHOTOS = [
 
 export default function App() {
   return (
-    <View style={styles.screen} />
+    <View style={styles.screen}>
+    </View>
   )
 }
 

evals/lists/14-rn-flatlist-to-legendlist-migration/app/App.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import {
+  FlatList,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+
+const ITEMS = [
+  { id: 'item-1', title: 'Shift overview', subtitle: 'Morning operations' },
+  { id: 'item-2', title: 'Driver queue', subtitle: 'Pending check-ins' },
+  { id: 'item-3', title: 'Returns desk', subtitle: 'Open incidents' },
+  { id: 'item-4', title: 'Stock audit', subtitle: 'Afternoon checklist' },
+]
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <FlatList
+        data={ITEMS}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.row}>
+              <Text style={styles.rowTitle}>{item.title}</Text>
+              <Text style={styles.rowSubtitle}>{item.subtitle}</Text>
+            </View>
+          )
+        }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  row: {
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    marginBottom: 10,
+    padding: 14,
+  },
+  rowSubtitle: {
+    color: '#475569',
+    marginTop: 4,
+  },
+  rowTitle: {
+    color: '#0f172a',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 56,
+  },
+})

evals/lists/14-rn-flatlist-to-legendlist-migration/prompt.md

@@ -0,0 +1 @@
+Migrate the existing `FlatList` feed to `@legendapp/list`.

evals/lists/14-rn-flatlist-to-legendlist-migration/reference/App.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import {
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+import { LegendList } from '@legendapp/list'
+
+const ITEMS = [
+  { id: 'item-1', title: 'Shift overview', subtitle: 'Morning operations' },
+  { id: 'item-2', title: 'Driver queue', subtitle: 'Pending check-ins' },
+  { id: 'item-3', title: 'Returns desk', subtitle: 'Open incidents' },
+  { id: 'item-4', title: 'Stock audit', subtitle: 'Afternoon checklist' },
+]
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <LegendList
+        data={ITEMS}
+        keyExtractor={(item) => item.id}
+        recycleItems
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.row}>
+              <Text style={styles.rowTitle}>{item.title}</Text>
+              <Text style={styles.rowSubtitle}>{item.subtitle}</Text>
+            </View>
+          )
+        }}
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  row: {
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    marginBottom: 10,
+    padding: 14,
+  },
+  rowSubtitle: {
+    color: '#475569',
+    marginTop: 4,
+  },
+  rowTitle: {
+    color: '#0f172a',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 56,
+  },
+})

evals/lists/14-rn-flatlist-to-legendlist-migration/requirements.yaml

@@ -0,0 +1,11 @@
+version: 1
+inputs:
+  files:
+    - app/App.tsx
+requirements:
+  - id: implementation-import-legendlist
+    description: Must import `LegendList` from `@legendapp/list`.
+  - id: feed-rendered-through-legendlist
+    description: Must replace `FlatList` with `LegendList`.
+  - id: recycle-items-enabled
+    description: Must enable `recycleItems` on the `LegendList`.

evals/lists/15-rn-legendlist-sticky-grouped-agenda/app/App.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+
+const EVENTS = [
+  { id: 'event-1', day: 'Monday', title: 'Warehouse review', time: '09:00' },
+  { id: 'event-2', day: 'Monday', title: 'Driver sync', time: '11:30' },
+  { id: 'event-3', day: 'Tuesday', title: 'Returns audit', time: '10:00' },
+  { id: 'event-4', day: 'Tuesday', title: 'Ops planning', time: '14:00' },
+]
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+  },
+})

evals/lists/15-rn-legendlist-sticky-grouped-agenda/prompt.md

@@ -0,0 +1,2 @@
+Build a grouped agenda with `SectionList` from `@legendapp/list`.
+Group the agenda by `day`, and render a sticky section header for each day.

evals/lists/15-rn-legendlist-sticky-grouped-agenda/reference/App.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { SectionList } from '@legendapp/list/section-list'
+
+const EVENTS = [
+  { id: 'event-1', day: 'Monday', title: 'Warehouse review', time: '09:00' },
+  { id: 'event-2', day: 'Monday', title: 'Driver sync', time: '11:30' },
+  { id: 'event-3', day: 'Tuesday', title: 'Returns audit', time: '10:00' },
+  { id: 'event-4', day: 'Tuesday', title: 'Ops planning', time: '14:00' },
+]
+
+const sections = EVENTS.reduce<
+  Array<{
+    data: typeof EVENTS
+    title: string
+  }>
+>((allSections, event) => {
+  const lastSection = allSections[allSections.length - 1]
+
+  if (!lastSection || lastSection.title !== event.day) {
+    allSections.push({
+      data: [event],
+      title: event.day,
+    })
+  } else {
+    lastSection.data.push(event)
+  }
+
+  return allSections
+}, [])
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <SectionList
+        sections={sections}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.card}>
+              <Text style={styles.time}>{item.time}</Text>
+              <Text style={styles.cardTitle}>{item.title}</Text>
+            </View>
+          )
+        }}
+        renderSectionHeader={({ section }) => {
+          return <Text style={styles.header}>{section.title}</Text>
+        }}
+        stickySectionHeadersEnabled
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    marginBottom: 10,
+    padding: 14,
+  },
+  cardTitle: {
+    color: '#0f172a',
+    fontSize: 16,
+    fontWeight: '700',
+    marginTop: 4,
+  },
+  header: {
+    color: '#0f172a',
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 10,
+    marginTop: 12,
+  },
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 56,
+  },
+  time: {
+    color: '#2563eb',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+})

evals/lists/15-rn-legendlist-sticky-grouped-agenda/requirements.yaml

@@ -0,0 +1,15 @@
+version: 1
+inputs:
+  files:
+    - app/App.tsx
+requirements:
+  - id: implementation-render-legend-sectionlist
+    description: Must import and render `SectionList` from `@legendapp/list/section-list`.
+  - id: implementation-provide-legend-sectionlist-key-extractor
+    description: Must provide `SectionList` `keyExtractor` using stable event ids.
+  - id: sections-derived-from-event-day
+    description: Must derive `sections` from each event's `day`.
+  - id: render-section-header-present
+    description: Must render day headers through `renderSectionHeader`.
+  - id: sticky-section-headers-enabled
+    description: Must enable `stickySectionHeadersEnabled` on the `SectionList`.

evals/lists/16-rn-legendlist-section-scroll-to-location/app/App.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { SectionList } from '@legendapp/list/section-list'
+
+const AGENDA = [
+  {
+    data: [
+      { id: 'event-1', title: 'Warehouse review', time: '09:00' },
+      { id: 'event-2', title: 'Driver sync', time: '11:30' },
+    ],
+    title: 'Monday',
+  },
+  {
+    data: [
+      { id: 'event-3', title: 'Returns audit', time: '10:00' },
+      { id: 'event-4', title: 'Ops planning', time: '14:00' },
+    ],
+    title: 'Tuesday',
+  },
+  {
+    data: [
+      { id: 'event-5', title: 'Carrier sync', time: '08:30' },
+      { id: 'event-6', title: 'Dock walk', time: '15:00' },
+    ],
+    title: 'Wednesday',
+  },
+]
+
+export default function App() {
+  return (
+    <View style={styles.screen}>
+      <SectionList
+        sections={AGENDA}
+        keyExtractor={(item) => item.id}
+        renderItem={({ item }) => {
+          return (
+            <View style={styles.card}>
+              <Text style={styles.time}>{item.time}</Text>
+              <Text style={styles.cardTitle}>{item.title}</Text>
+            </View>
+          )
+        }}
+        renderSectionHeader={({ section }) => {
+          return <Text style={styles.header}>{section.title}</Text>
+        }}
+        stickySectionHeadersEnabled
+      />
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#fff',
+    borderRadius: 14,
+    marginBottom: 10,
+    padding: 14,
+  },
+  cardTitle: {
+    color: '#0f172a',
+    fontSize: 16,
+    fontWeight: '700',
+    marginTop: 4,
+  },
+  header: {
+    color: '#0f172a',
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 10,
+    marginTop: 12,
+  },
+  screen: {
+    backgroundColor: '#f8fafc',
+    flex: 1,
+    paddingHorizontal: 16,
+    paddingTop: 56,
+  },
+  time: {
+    color: '#2563eb',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+})

evals/lists/16-rn-legendlist-section-scroll-to-location/prompt.md

@@ -0,0 +1,2 @@
+Add day buttons above the agenda.
+Pressing a day button should scroll to that day's section.