feat(components/draggable-modal): add component, add to example, add …

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

@@ -0,0 +1,73 @@
+---
+searchable: true
+---
+
+import { CodeEditor } from '@components/code-editor';
+import PropsTable from "@components/docs/props-table";
+
+# DraggableModal
+
+Component to render a draggable modal, based on `react-native-bottom-sheet`
+
+https://github.com/gorhom/react-native-bottom-sheet
+
+## Import
+
+```js
+import { DraggableModal } from "@ficus-ui/native";
+```
+
+## Usage
+
+<CodeEditor code={`const TestModal = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <ThemeProvider>
+      <Box h={500} bg="gray.50" p="xl">
+        <Button
+          colorScheme={!isOpen ? 'green' : 'red'}
+          onPress={() => {
+            if (!isOpen) {
+              onOpen();
+            } else {
+              onClose();
+            }
+          }}
+        >
+          {!isOpen ? 'Show Modal' : 'Hide Modal'}
+        </Button>
+
+        <DraggableModal
+          isOpen={isOpen}
+          onClose={onClose}
+          snapPoints={['30%', '80%']}
+          p="xl"
+        >
+          <Text fontSize="4xl" fontWeight="bold">
+            Settings
+          </Text>
+
+          <Text mt="xl">Your settings</Text>
+        </DraggableModal>
+      </Box>
+    </ThemeProvider>
+  );
+}
+render(<TestModal />)`} noInline />
+
+## Props
+
+Extends every `Box` props and `BottomSheetModalProps` from `react-native-bottom-sheet`
+
+### `isOpen`
+<PropsTable
+  description="Boolean to indicate if the modal is opened or not."
+  prop={{ type: "boolean", required: false, default: "false" }}
+/>
+
+### `onClose`
+<PropsTable
+  description="Method called when the modal is closed by the user."
+  prop={{ type: "() => void", required: false }}
+/>

apps/examples/app/_layout.tsx

@@ -1,16 +1,13 @@
 
 import { Stack } from 'expo-router';
-import { Box, ThemeProvider as ThemeProviderV2 } from '@ficus-ui/native'
-import { ThemeProvider } from 'react-native-ficus-ui';
+import {  FicusProvider } from '@ficus-ui/native'
 
 export default function RootLayout() {
   return (
-    <ThemeProviderV2>
-      <ThemeProvider>
+    <FicusProvider>
         <Stack screenOptions={{ headerShown: false }}>
           <Stack.Screen name="index" />
         </Stack>
-      </ThemeProvider>
-    </ThemeProviderV2>
+    </FicusProvider>
   );
 }

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

@@ -0,0 +1,47 @@
+import { SafeAreaView } from "react-native";
+import {
+  Button,
+  Text,
+  useDisclosure,
+} from "react-native-ficus-ui";
+import ExampleSection from "@/src/ExampleSection";
+import { DraggableModal } from "@ficus-ui/native";
+const DraggableModalComponent = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  return (
+    <SafeAreaView>
+      <Text mx="xl" fontSize="4xl">
+        DraggableModal
+      </Text>
+      <ExampleSection name="Simple Modal">
+        <Button
+          colorScheme={!isOpen ? "green" : "red"}
+          onPress={() => {
+            if (!isOpen) {
+              onOpen();
+            } else {
+              onClose();
+            }
+          }}
+        >
+          {!isOpen ? "Show Modal" : "Hide Modal"}
+        </Button>
+
+        <DraggableModal 
+          isOpen={isOpen}
+          onClose={onClose}
+          snapPoints={["30%", "80%"]}
+          p='sm'
+        >
+          <Text fontSize="4xl" fontWeight="bold">
+            Settings
+          </Text>
+
+          <Text mt="xl">Your settings</Text>
+        </DraggableModal>
+      </ExampleSection>
+    </SafeAreaView>
+  );
+};
+
+export default DraggableModalComponent;

apps/examples/app/items-v2.ts

@@ -20,6 +20,7 @@ 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';
+import DraggableModalComponent from '@/app/components-v2/DraggableModal';
 
 type ExampleComponentType = {
   onScreenName: string;
@@ -49,4 +50,6 @@ export const components: ExampleComponentType[] = [
   { navigationPath: 'SectionList', onScreenName: 'SectionList', component: SectionListComponent },
   { navigationPath: 'FlashList', onScreenName: 'FlashList', component: FlashListComponent },
   { navigationPath: 'Modal', onScreenName: 'Modal', component: ModalComponent },
+  { navigationPath: 'DraggableModal', onScreenName: 'DraggableModal', component: DraggableModalComponent },
 ];
+

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

@@ -0,0 +1,21 @@
+import { renderWithTheme as render } from '@test-utils';
+
+import { DraggableModal } from '.';
+import { Text } from '../text';
+
+describe('DraggableModal component', () => {
+  it('should render component passed to children', () => {
+    render(
+      <DraggableModal isOpen={true}>
+        <Text>Test</Text>
+      </DraggableModal>
+    );
+    expect(
+      render(
+        <DraggableModal isOpen={true}>
+          <Text>Test</Text>
+        </DraggableModal>
+      )
+    ).toBeTruthy();
+  });
+});

packages/components/src/draggable-modal/index.tsx

@@ -0,0 +1,70 @@
+import { ReactNode, useEffect, useRef } from 'react';
+
+import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import { SafeAreaView } from 'react-native';
+
+import { Box } from '../box';
+import { type NativeFicusProps, ficus, forwardRef } from '../system';
+import { mergeRefs } from '../utils/merge-refs';
+
+interface DraggableModalOptions {
+  isOpen?: boolean;
+  onClose?: () => void;
+}
+
+export interface DraggableModalProps
+  extends NativeFicusProps<'BottomSheetModal'>,
+    DraggableModalOptions {}
+
+export const DraggableModal = forwardRef<
+  DraggableModalProps,
+  'BottomSheetModal'
+>(function DraggableModal(props, ref) {
+  const _ref = useRef<BottomSheetModal>(null);
+
+  const bottomSheetModalRef = mergeRefs(_ref, ref);
+  const { children, isOpen, onClose, h, ...rest } = props;
+
+  useEffect(() => {
+    if (isOpen) {
+      _ref?.current?.present();
+      _ref?.current?.snapToIndex(0);
+    } else {
+      _ref?.current?.close();
+    }
+  }, [isOpen]);
+
+  const bottomSheetStyles = {
+    h: 'full',
+    justifyContent: 'flex-end',
+    borderTopLeftRadius: 12,
+    borderTopRightRadius: 12,
+    bg: 'white',
+  };
+
+  const handleChange = (index: number) => {
+    if (index === -1 && onClose) {
+      onClose();
+    }
+  };
+
+  const safeAreaViewStyle = {
+    flex: 1,
+  };
+  return (
+    <ficus.BottomSheetModal
+      ref={bottomSheetModalRef}
+      onChange={handleChange}
+      {...rest}
+      __styles={bottomSheetStyles}
+    >
+      <ficus.BottomSheetView {...rest}>
+        <Box h={h ?? '100%'}>
+          <SafeAreaView style={safeAreaViewStyle}>
+            {children as ReactNode}
+          </SafeAreaView>
+        </Box>
+      </ficus.BottomSheetView>
+    </ficus.BottomSheetModal>
+  );
+});

packages/components/src/index.ts

@@ -17,5 +17,6 @@ export * from './list';
 export * from './section-list';
 export * from './flash-list';
 export * from './modal';
+export * from './draggable-modal';
 
-export { ThemeProvider } from '@ficus-ui/theme';
+export { FicusProvider, type FicusProviderProps } from './system';

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

@@ -1,3 +1,7 @@
+import {
+  BottomSheetModal as RNBottomSheetModal,
+  BottomSheetView as RNBottomSheetView,
+} from '@gorhom/bottom-sheet';
 import RNSlider from '@react-native-community/slider';
 import { FlashList as ShopifyFlashList } from '@shopify/flash-list';
 import {
@@ -35,6 +39,8 @@ export const baseRNElements = {
   SectionList: RNSectionList,
   FlashList: ShopifyFlashList,
   Modal: RNModal,
+  BottomSheetModal: RNBottomSheetModal,
+  BottomSheetView: RNBottomSheetView,
 } as const;
 
 export type BaseRNElements = keyof typeof baseRNElements;

packages/components/src/system/index.ts

@@ -2,3 +2,5 @@ export * from './system';
 export * from './forward-ref';
 export * from './factory';
 export * from './use-style-config';
+
+export { type FicusProviderProps, FicusProvider } from './provider';

packages/components/src/system/provider.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+
+import { ThemeProvider, ThemeProviderProps } from '@ficus-ui/theme';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+export interface FicusProviderProps extends ThemeProviderProps {}
+
+export const FicusProvider: FC<FicusProviderProps> = (props) => {
+  const { theme, children } = props;
+
+  const gestureHandlerRootViewStyle = { flex: 1 };
+  return (
+    <GestureHandlerRootView style={gestureHandlerRootViewStyle}>
+      <ThemeProvider theme={theme}>
+        <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+      </ThemeProvider>
+    </GestureHandlerRootView>
+  );
+};

packages/components/src/test-utils/render-with-theme.ts

@@ -1,12 +1,13 @@
 import { ReactElement } from 'react';
 
-import { ThemeProvider } from '@ficus-ui/theme';
 import { render } from '@testing-library/react-native';
 
+import { FicusProvider } from '../system';
+
 export function renderWithTheme<
   T extends ReactElement<unknown, React.JSXElementConstructor<any> | string>,
 >(component: T) {
   return render(component, {
-    wrapper: ThemeProvider,
+    wrapper: FicusProvider,
   });
 }

packages/components/src/utils/merge-refs.ts

@@ -0,0 +1,30 @@
+export type ReactRef<T> = React.RefCallback<T> | React.MutableRefObject<T>;
+
+export function assignRef<T = any>(
+  ref: ReactRef<T> | null | undefined,
+  value: T
+) {
+  if (ref == null) return;
+
+  if (typeof ref === 'function') {
+    ref(value);
+    return;
+  }
+
+  try {
+    ref.current = value;
+  } catch (error) {
+    throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
+  }
+}
+
+/**
+ * All credit goes to Chakra UI.
+ */
+export function mergeRefs<T>(...refs: (ReactRef<T> | null | undefined)[]) {
+  return (node: T | null) => {
+    refs.forEach((ref) => {
+      assignRef(ref, node);
+    });
+  };
+}

packages/theme/src/index.ts

@@ -1,4 +1,4 @@
 export { theme, type Theme } from './theme.default';
-export { ThemeProvider } from './provider';
+export { ThemeProvider, type ThemeProviderProps } from './provider';
 export * from './hook';
 export * from './utils';