feat(components/modal): add component, add to example, add to doc, ad…

apps/docs/pages/docs/v2/Components/modal.en-US.mdx

@@ -0,0 +1,63 @@
+---
+searchable: true
+---
+
+import { CodeEditor } from '@components/code-editor';
+import PropsTable from "@components/docs/props-table";
+
+# Modal
+
+Component to render a modal imported from `react-native-modal`
+
+https://github.com/react-native-modal/react-native-modal
+
+## Import
+
+```js
+import { Modal } from "@ficus-ui/native";
+```
+
+## Usage
+
+<CodeEditor code={`const TestModal = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <Box>
+      <Button
+        onPress={() => {
+          onOpen();
+        }}
+      >
+        Show Modal
+      </Button>
+
+      <Modal isOpen={isOpen}>
+        <Button
+          h={35}
+          w={35}
+          position="absolute"
+          top={50}
+          right={15}
+          borderRadius="full"
+          colorScheme="gray"
+          onPress={() => {
+            onClose();
+          }}
+        >
+          <Icon color="white" name="close" />
+        </Button>
+      </Modal>
+    </Box>
+  );
+}
+render(<TestModal />)`} noInline />
+
+## Props
+
+Extends every `Box` and `Modal` from React Native props.
+
+### `visible`
+<PropsTable
+  description="Boolean to indicate if the modal is opened or not."
+  prop={{ type: "boolean", required: true, default: "false" }}
+/>

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

@@ -0,0 +1,46 @@
+import {
+  Modal,
+  SafeAreaBox,
+  Text,
+} from "@ficus-ui/native";
+import ExampleSection from '@/src/ExampleSection';
+import { Button, Icon, useDisclosure } from "react-native-ficus-ui";
+
+const ModalComponent = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <SafeAreaBox>
+      <Text mx="xl" fontSize="4xl">
+        Modal
+      </Text>
+      <ExampleSection name="Simple Modal">
+        <Button
+          onPress={() => {
+            onOpen();
+          }}
+        >
+          Show Modal
+        </Button>
+
+        <Modal visible={isOpen}>
+          <Button
+            h={35}
+            w={35}
+            position="absolute"
+            top={50}
+            right={15}
+            borderRadius="full"
+            colorScheme="gray"
+            onPress={() => {
+              onClose();
+            }}
+          >
+            <Icon color="white" name="close" />
+          </Button>
+        </Modal>
+      </ExampleSection>
+    </SafeAreaBox>
+  );
+};
+
+export default ModalComponent;

apps/examples/app/items-v2.ts

@@ -19,6 +19,7 @@ import IconComponent from '@/app/components-v2/Icon';
 import ListComponent from '@/app/components-v2/List';
 import SectionListComponent from '@/app/components-v2/SectionList';
 import FlashListComponent from '@/app/components-v2/FlashList';
+import ModalComponent from '@/app/components-v2/Modal';
 
 type ExampleComponentType = {
   onScreenName: string;
@@ -47,4 +48,5 @@ export const components: ExampleComponentType[] = [
   { navigationPath: 'List', onScreenName: 'List', component: ListComponent },
   { navigationPath: 'SectionList', onScreenName: 'SectionList', component: SectionListComponent },
   { navigationPath: 'FlashList', onScreenName: 'FlashList', component: FlashListComponent },
+  { navigationPath: 'Modal', onScreenName: 'Modal', component: ModalComponent },
 ];

packages/components/src/index.ts

@@ -16,5 +16,6 @@ export * from './icon';
 export * from './list';
 export * from './section-list';
 export * from './flash-list';
+export * from './modal';
 
 export { ThemeProvider } from '@ficus-ui/theme';

packages/components/src/modal/index.tsx

@@ -0,0 +1,7 @@
+import { ModalProps } from 'react-native';
+
+import { type NativeFicusProps, ficus } from '../system';
+
+export interface ModalProp extends NativeFicusProps<'Modal'>, ModalProps {}
+
+export const Modal = ficus('Modal');

packages/components/src/modal/modal.spec.tsx

@@ -0,0 +1,30 @@
+import { renderWithTheme as render } from '@test-utils';
+
+import { Modal } from '.';
+import { Box } from '../box';
+
+jest.mock('react-native-toast-message', () => 'Toast');
+
+describe('Modal component', () => {
+  it('is visible when the visible prop is true', () => {
+    const { getByTestId } = render(
+      <Modal testID="modal" visible={true}>
+        <Box h={40} w={40} bg="green.500" />
+      </Modal>
+    );
+    const modalComponent = getByTestId('modal');
+
+    expect(modalComponent.props.visible).toBe(true);
+  });
+
+  it('renders children correctly', () => {
+    const { getByTestId } = render(
+      <Modal testID="modal" visible={true}>
+        <Box testID="modal-content" h={40} w={40} bg="green.500" />
+      </Modal>
+    );
+
+    const modalContent = getByTestId('modal-content');
+    expect(modalContent).toBeTruthy();
+  });
+});

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

@@ -4,6 +4,7 @@ import {
   ActivityIndicator as RNActivityIndicator,
   FlatList as RNFlatList,
   Image as RNImage,
+  Modal as RNModal,
   Pressable as RNPressable,
   SafeAreaView as RNSafeAreaView,
   ScrollView as RNScrollView,
@@ -33,6 +34,7 @@ export const baseRNElements = {
   Flatlist: RNFlatList,
   SectionList: RNSectionList,
   FlashList: ShopifyFlashList,
+  Modal: RNModal,
 } as const;
 
 export type BaseRNElements = keyof typeof baseRNElements;