feat(components/section-list): add component, add to example, add to …

apps/docs/pages/docs/v2/Components/Lists/sectionlist.en-US.mdx

@@ -0,0 +1,51 @@
+---
+searchable: true
+---
+
+import { CodeEditor } from '@components/code-editor';
+
+# SectionList
+
+Wrapper around `SectionList` component from `react-native`, it accepts every props from react native `SectionList` component.
+
+## Import
+
+```js
+import { SectionList } from "@ficus-ui/native";
+```
+
+## Usage
+
+<CodeEditor code={`<SectionList
+  bg="gray.200"
+  p="xl"
+  sections={[
+    {
+      title: 'Main dishes',
+      data: ['Pizza', 'Burger', 'Risotto'],
+    },
+    {
+      title: 'Sides',
+      data: ['French Fries', 'Onion Rings', 'Fried Shrimps'],
+    },
+    {
+      title: 'Drinks',
+      data: ['Water', 'Coke', 'Beer'],
+    },
+  ]}
+  keyExtractor={(item, index) => item + index}
+  renderItem={({ item }) => (
+    <Box p="sm">
+      <Text>{item}</Text>
+    </Box>
+  )}
+  renderSectionHeader={({ section: { title } }) => (
+    <Box bg="gray.300" p="sm">
+      <Text>{title}</Text>
+    </Box>
+  )}
+/>`} />
+
+## Props
+
+Extends every `Box` props and props from react native `SectionList` component : https://reactnative.dev/docs/sectionlist#props

apps/examples/app/components-v2/SectionList.tsx

@@ -0,0 +1,46 @@
+import { Box, Flex, SafeAreaBox, SectionList, Text } from '@ficus-ui/native';
+
+
+const SectionListComponent = () => {
+  const DATA = [
+    {
+      title: "Main dishes",
+      data: ["Pizza", "Burger", "Risotto"],
+    },
+    {
+      title: "Sides",
+      data: ["French Fries", "Onion Rings", "Fried Shrimps"],
+    },
+    {
+      title: "Drinks",
+      data: ["Water", "Coke", "Beer"],
+    },
+  ]
+  return (
+    <SafeAreaBox>
+      <Text mx="xl" fontSize="4xl">
+        SectionList component
+      </Text>
+      <Flex mt="xl">
+        <SectionList
+          bg="gray.200"
+          p="xl"
+          sections={DATA}
+          keyExtractor={(item:any, index:number) => `${item.title}-${index}`}
+          renderItem={({ item }:any) => (
+            <Box p="sm">
+              <Text>{item}</Text>
+            </Box>
+          )}
+          renderSectionHeader={({ section: { title } }:any) => (
+            <Box bg="gray.300" p="sm">
+              <Text>{title}</Text>
+            </Box>
+          )}
+        />
+      </Flex>
+    </SafeAreaBox>
+  );
+};
+
+export default SectionListComponent;

apps/examples/app/items-v2.ts

@@ -17,6 +17,7 @@ import SpinnerComponent from '@/app/components-v2/Spinner';
 import SliderComponent from '@/app/components-v2/Slider';
 import IconComponent from '@/app/components-v2/Icon';
 import ListComponent from '@/app/components-v2/List';
+import SectionListComponent from '@/app/components-v2/SectionList';
 
 type ExampleComponentType = {
   onScreenName: string;
@@ -43,4 +44,5 @@ export const components: ExampleComponentType[] = [
   { navigationPath: 'Slider', onScreenName: 'Slider', component: SliderComponent },
   { navigationPath: 'Icon', onScreenName: 'Icon', component: IconComponent },
   { navigationPath: 'List', onScreenName: 'List', component: ListComponent },
+  { navigationPath: 'SectionList', onScreenName: 'SectionList', component: SectionListComponent },
 ];

packages/components/src/index.ts

@@ -14,5 +14,6 @@ export * from './spinner';
 export * from './slider';
 export * from './icon';
 export * from './list';
+export * from './section-list';
 
 export { ThemeProvider } from '@ficus-ui/theme';

packages/components/src/section-list/index.tsx

@@ -0,0 +1,5 @@
+import { type NativeFicusProps, ficus } from '../system';
+
+export interface SectionListProps extends NativeFicusProps<'SectionList'> {}
+
+export const SectionList = ficus('SectionList');

packages/components/src/section-list/section-list.spec.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { render } from '@testing-library/react-native';
+
+import { SectionList } from '.';
+import { Box } from '../box';
+import { Text } from '../text';
+
+const MySectionList = ({ sections }: any) => {
+  return (
+    <SectionList
+      sections={sections}
+      keyExtractor={(item: any, index: any) => (item.title + index).toString()}
+      renderItem={({ item }: any) => (
+        <Box p="sm">
+          <Text>{item.title}</Text> {/* Access item.title here */}
+        </Box>
+      )}
+      renderSectionHeader={({ section: { title } }: any) => (
+        <Box bg="gray.300" p="sm">
+          <Text>{title}</Text>
+        </Box>
+      )}
+    />
+  );
+};
+
+describe('MySectionList component', () => {
+  const sections = [
+    {
+      title: 'Section 1',
+      data: [
+        { id: '1', title: 'Item 1' },
+        { id: '2', title: 'Item 2' },
+      ],
+    },
+    {
+      title: 'Section 2',
+      data: [
+        { id: '3', title: 'Item 3' },
+        { id: '4', title: 'Item 4' },
+      ],
+    },
+  ];
+
+  it('renders section headers and items correctly', () => {
+    const { getByText } = render(<MySectionList sections={sections} />);
+
+    // Check if section headers are rendered
+    expect(getByText('Section 1')).toBeTruthy();
+    expect(getByText('Section 2')).toBeTruthy();
+
+    // Check if items are rendered
+    expect(getByText('Item 1')).toBeTruthy();
+    expect(getByText('Item 2')).toBeTruthy();
+    expect(getByText('Item 3')).toBeTruthy();
+    expect(getByText('Item 4')).toBeTruthy();
+  });
+});

packages/components/src/system/base-elements.ts

@@ -6,6 +6,7 @@ import {
   Pressable as RNPressable,
   SafeAreaView as RNSafeAreaView,
   ScrollView as RNScrollView,
+  SectionList as RNSectionList,
   Text as RNText,
   TouchableHighlight as RNTouchableHighlight,
   TouchableOpacity as RNTouchableOpacity,
@@ -29,6 +30,7 @@ export const baseRNElements = {
   ActivityIndicator: RNActivityIndicator,
   Slider: RNSlider,
   Flatlist: RNFlatList,
+  SectionList: RNSectionList,
 } as const;
 
 export type BaseRNElements = keyof typeof baseRNElements;