mc

Signed-off-by: Simon Bruneaud <[email protected]>

Author: gamegee

libs/ui-rnative/.storybook/Decorator.tsx

@@ -1,4 +1,6 @@
+import { ThemeProvider } from '@ledgerhq/ldls-ui-rnative';
 import type { Decorator } from '@storybook/react-native-web-vite';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 const createThemeDecorator = (
   globalName: string,
@@ -28,3 +30,13 @@ export const withModeDecorator = createThemeDecorator('mode', [
   'light',
   'dark',
 ]);
+
+export const withProvidersDecorator: Decorator = (Story, context) => {
+  return (
+    <ThemeProvider>
+      <GestureHandlerRootView style={{ flex: 1, width: '100%' }}>
+        <Story />
+      </GestureHandlerRootView>
+    </ThemeProvider>
+  );
+};

libs/ui-rnative/.storybook/lumen.svg renamed to libs/ui-rnative/.storybook/docs/lumen.svg

@@ -17,6 +17,9 @@ const config: StorybookConfig = {
       },
     },
   },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 
   viteFinal: async (config) => {
     config.resolve = config.resolve || {};

libs/ui-rnative/.storybook/main.ts

@@ -1,7 +1,11 @@
 import type { Preview } from '@storybook/react-native-web-vite';
 import '../src/styles.css';
 import './font.css';
-import { withBrandDecorator, withModeDecorator } from './Decorator';
+import {
+  withBrandDecorator,
+  withModeDecorator,
+  withProvidersDecorator,
+} from './Decorator';
 
 const preview: Preview = {
   globalTypes: {
@@ -60,6 +64,7 @@ const preview: Preview = {
         ],
       },
     },
+    tags: ['autodocs'],
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
@@ -69,7 +74,7 @@ const preview: Preview = {
     },
   },
 
-  decorators: [withBrandDecorator, withModeDecorator],
+  decorators: [withBrandDecorator, withModeDecorator, withProvidersDecorator],
 };
 
 export default preview;

libs/ui-rnative/.storybook/preview.ts

@@ -1,6 +1,6 @@
 import { ThemeVars } from 'storybook/theming';
 import { create } from 'storybook/theming/create';
-import logoUrl from './lumen.svg';
+import logoUrl from './docs/lumen.svg';
 
 const theme: ThemeVars = create({
   base: 'light',

libs/ui-rnative/.storybook/theme.ts

@@ -1,13 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Text, View } from 'react-native';
+import { View, Text } from 'react-native';
 import { Button } from '../Button';
 import { BottomSheet } from './BottomSheet';
 import { BottomSheetHeader } from './BottomSheetHeader';
+import { BottomSheetScrollView, BottomSheetView } from './Scrollables';
 import { useBottomSheetRef } from './useBottomSheetRef';
 
 const meta: Meta<typeof BottomSheet> = {
   component: BottomSheet,
-  title: 'Communication/BottomSheet',
+  title: 'Containment/BottomSheet',
   parameters: {
     docs: {
       source: {
@@ -17,28 +18,37 @@ const meta: Meta<typeof BottomSheet> = {
       },
     },
   },
-  argTypes: {},
 };
 
 export default meta;
 type Story = StoryObj<typeof BottomSheet>;
 
 export const Base: Story = {
-  args: {},
+  args: {
+    size: 'sm',
+    enableHandlePanningGesture: true,
+    enablePanDownToClose: true,
+    closeable: false,
+    onBack: () => null,
+    onClose: () => null,
+  },
   render: (args) => {
     const bottomSheetRef = useBottomSheetRef();
 
     return (
-      <View className='m-auto h-screen max-w-md items-center justify-center'>
+      <View className='h-[calc(100vh-40px)] w-full items-center justify-center'>
         <Button size='xs' onPress={() => bottomSheetRef.current?.expand()}>
           Toggle open
         </Button>
         <BottomSheet {...args} ref={bottomSheetRef}>
-          <BottomSheetHeader
-            title='Title'
-            description='Description'
-            onClose={() => bottomSheetRef.current?.close()}
-          />
+          <BottomSheetView>
+            <BottomSheetHeader title='Title' description='Description' />
+          </BottomSheetView>
+          <BottomSheetScrollView>
+            {Array.from({ length: 100 }).map((_, index) => (
+              <Text key={index}>azeazea</Text>
+            ))}
+          </BottomSheetScrollView>
         </BottomSheet>
       </View>
     );

libs/ui-rnative/src/lib/Components/BottomSheet/BottomSheet.stories.tsx

@@ -1,61 +1,90 @@
 import GorghomBottomSheet from '@gorhom/bottom-sheet';
 import { createSafeContext, useMergedRef } from '@ledgerhq/ldls-utils-shared';
-import { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
+import { forwardRef, useMemo, useRef } from 'react';
 import { StyleSheet } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-
 import { BottomSheetProps } from './BottomSheet.types';
+import { BottomSheetHeaderActions } from './BottomSheetActions';
+import { HandleComponent } from './HandleComponent';
 
-const [BottomSheetProvider, useBottomSheetContext] =
-  createSafeContext<BottomSheetProps>('BottomSheet');
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width: '100%',
+  },
+});
+
+const bottomSheetSnapPoints = {
+  full: ['100%'],
+  half: ['50%'],
+  quarter: ['25%'],
+};
+
+const [BottomSheetProvider, useBottomSheetContext] = createSafeContext<{
+  size: BottomSheetProps['size'];
+}>('BottomSheet');
 
-export const BottomSheet = forwardRef<
+const BottomSheet = forwardRef<
   React.ElementRef<typeof GorghomBottomSheet>,
   BottomSheetProps
->(({ children, ...props }, ref) => {
-  // ref
-  const innerRef = useRef<GorghomBottomSheet>(null);
-  const mergedRefs = useMergedRef<GorghomBottomSheet>(ref, innerRef);
-
-  // callbacks
-  const handleSheetChanges = useCallback((index: number) => {
-    console.log('handleSheetChanges', index);
-  }, []);
-
-  useEffect(() => {
-    innerRef.current?.expand();
-  }, []);
-
-  const snapPoints = useMemo(() => ['25%', '50%'], []);
-
-  // renders
-  return (
-    <GestureHandlerRootView style={styles.container}>
-      <BottomSheetProvider value={props}>
+>(
+  (
+    {
+      onClose,
+      onBack,
+      closeable,
+      children,
+      enablePanDownToClose = true,
+      enableHandlePanningGesture = true,
+      detached = false,
+      onChange,
+      snapPoints = 'half',
+      size = 'sm',
+      ...props
+    },
+    ref,
+  ) => {
+    // ref
+    const innerRef = useRef<GorghomBottomSheet>(null);
+    const mergedRefs = useMergedRef<GorghomBottomSheet>(ref, innerRef);
+
+    const computedSnapPoints = useMemo(() => {
+      const isString = typeof snapPoints === 'string';
+
+      return isString
+        ? bottomSheetSnapPoints[
+            snapPoints as keyof typeof bottomSheetSnapPoints
+          ]
+        : snapPoints;
+    }, [snapPoints]);
+
+    // renders
+    return (
+      <BottomSheetProvider value={{ size }}>
         <GorghomBottomSheet
+          {...props}
           ref={mergedRefs}
+          style={styles.container}
           overDragResistanceFactor={2.5}
-          enableHandlePanningGesture
-          enablePanDownToClose
-          snapPoints={snapPoints}
-          onChange={handleSheetChanges}
+          enableDynamicSizing={false}
+          detached={detached}
+          enableHandlePanningGesture={enableHandlePanningGesture}
+          enablePanDownToClose={enablePanDownToClose}
+          snapPoints={computedSnapPoints}
+          onChange={onChange}
+          handleComponent={HandleComponent}
           index={-1}
         >
+          <BottomSheetHeaderActions
+            onBack={onBack}
+            onClose={onClose}
+            closeable={closeable}
+          />
           {children}
         </GorghomBottomSheet>
       </BottomSheetProvider>
-    </GestureHandlerRootView>
-  );
-});
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    width: '100%',
-  },
-  contentContainer: {
-    flex: 1,
-    padding: 36,
-    height: 120,
+    );
   },
-});
+);
+BottomSheet.displayName = 'BottomSheet';
+
+export { BottomSheet, useBottomSheetContext };

libs/ui-rnative/src/lib/Components/BottomSheet/BottomSheet.tsx

@@ -1,5 +1,59 @@
+import { BottomSheetProps as GorhomBottomSheetProps } from '@gorhom/bottom-sheet';
 import { PropsWithChildren, ReactNode } from 'react';
-import { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
+import { ViewProps } from 'react-native';
+
+export type BottomSheetProps = PropsWithChildren & {
+  /**
+   * The callback function to handle the back event.
+   */
+  onBack?: () => void;
+  /**
+   * If true, the close button will be displayed.
+   * This property should be used when no callback is required for the close action.
+   * @default false
+   */
+  closeable?: boolean;
+  /**
+   * If true, the close button will be displayed
+   * This property should be used when a callback function to handle the close event is required.
+   * @default false
+   */
+  onClose?: () => void;
+  /**
+   * The size variant of the bottom sheet.
+   * @default 'sm'
+   */
+  size?: 'sm' | 'lg';
+  /**
+   * The snap points of the bottom sheet.
+   */
+  snapPoints?: 'full' | 'half' | 'quarter' | string[] | number[];
+  /**
+   * Whether to enable handle panning gesture.
+   * If true, the whole sheet area can be dragged to resize the sheet.
+   * @default false
+   */
+  enableHandlePanningGesture?: boolean;
+  /**
+   * Whether to enable pan down to close.
+   * If true, the sheet can be closed by dragging down.
+   * @default true
+   */
+  enablePanDownToClose?: boolean;
+  /**
+   * Defines whether the bottom sheet is attached to the bottom or no.
+   * @default false
+   */
+  detached?: boolean;
+  /**
+   * The callback function to handle the change event.
+   * @default undefined
+   */
+  onChange?: GorhomBottomSheetProps['onChange'];
+};
+
+export type BottomSheetHeaderActionsProps = ViewProps &
+  Pick<BottomSheetProps, 'closeable' | 'onClose' | 'onBack'>;
 
 export type BottomSheetHeaderProps = ViewProps & {
   /**
@@ -15,9 +69,15 @@ export type BottomSheetHeaderProps = ViewProps & {
    */
   onBack?: () => void;
   /**
-   * The callback function to handle the close event.
+   * If true, the close button will be displayed.
+   * This property should be used when no callback is required for the close action.
+   * @default false
+   */
+  closeable?: boolean;
+  /**
+   * If true, the close button will be displayed
+   * This property should be used when a callback function to handle the close event is required.
+   * @default false
    */
   onClose?: () => void;
 };
-
-export type BottomSheetProps = PropsWithChildren & {};