@utilitywarehouse/hearth-react-native 0.1.0

package/src/components/BodyText/BodyText.tsx

@@ -0,0 +1,129 @@
+import { Text } from 'react-native';
+import type BodyTextProps from './BodyText.props';
+import { StyleSheet } from 'react-native-unistyles';
+
+import { getFlattenedColorValue } from '../../utils';
+
+const BodyText = ({
+  children,
+  color,
+  size = 'md',
+  truncated,
+  weight = 'regular',
+  underline,
+  strikeThrough,
+  italic,
+  textTransform,
+  textAlign,
+  textAlignVertical,
+  textDecorationColor,
+  textDecorationLine,
+  textDecorationStyle,
+  userSelect,
+  inverted,
+  ...props
+}: BodyTextProps) => {
+  styles.useVariants({
+    size,
+    weight,
+    underline,
+    strikeThrough,
+    italic,
+    inverted,
+  });
+
+  return (
+    <Text
+      {...props}
+      {...(truncated
+        ? {
+            numberOfLines: 1,
+            ellipsizeMode: 'tail',
+          }
+        : {})}
+      style={[
+        styles.text,
+        styles.getColours(color, textDecorationColor),
+        {
+          ...(textTransform && { textTransform }),
+          ...(textAlign && { textAlign }),
+
+          ...(textDecorationLine && { textDecorationLine }),
+          ...(textDecorationStyle && { textDecorationStyle }),
+          ...(userSelect && { userSelect }),
+          ...(textAlignVertical && { textAlignVertical }),
+        },
+        props.style,
+      ]}
+    >
+      {children}
+    </Text>
+  );
+};
+
+BodyText.displayName = 'BodyText';
+
+const styles = StyleSheet.create(theme => ({
+  text: {
+    color: theme.components.text.color,
+    fontFamily: theme.typography.mobile.bodyText.fontFamily,
+    fontStyle: 'normal',
+    variants: {
+      size: {
+        lg: {
+          fontSize: theme.typography.mobile.bodyText.lg.fontSize,
+          lineHeight: theme.typography.mobile.bodyText.lg.lineHeight,
+        },
+        md: {
+          fontSize: theme.typography.mobile.bodyText.md.fontSize,
+          lineHeight: theme.typography.mobile.bodyText.md.lineHeight,
+        },
+        sm: {
+          fontSize: theme.typography.mobile.bodyText.sm.fontSize,
+          lineHeight: theme.typography.mobile.bodyText.sm.lineHeight,
+        },
+      },
+      weight: {
+        regular: {
+          fontWeight: theme.fontWeight.regular,
+        },
+        semibold: {
+          fontWeight: theme.fontWeight.semibold,
+        },
+        bold: {
+          fontWeight: theme.fontWeight.bold,
+        },
+      },
+      underline: {
+        true: {
+          textDecorationLine: 'underline',
+        },
+      },
+      strikeThrough: {
+        true: {
+          textDecorationLine: 'line-through',
+        },
+      },
+      italic: {
+        true: {
+          fontStyle: 'italic',
+        },
+      },
+      inverted: {
+        true: {
+          color: theme.components.text.colorInverted,
+        },
+      },
+    },
+  },
+  getColours: (color, textDecorationColor) => ({
+    ...(color ? { color: getFlattenedColorValue(color, theme.color) } : {}),
+    ...(textDecorationColor
+      ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
+      : {}),
+  }),
+}));
+
+BodyText.displayName = 'BodyText';
+
+export default BodyText;

package/src/components/BodyText/index.ts

@@ -0,0 +1 @@
+export { default as BodyText } from './BodyText';

package/src/components/BottomSheet/BottomSheet.context.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+interface BottomSheetContextProps {
+  handle?: boolean;
+}
+
+export const BottomSheetContext = createContext<BottomSheetContextProps>({});
+
+export const useBottomSheetContext = (): BottomSheetContextProps => {
+  const context = useContext(BottomSheetContext);
+  return context;
+};

package/src/components/BottomSheet/BottomSheet.docs.mdx

@@ -0,0 +1,172 @@
+import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
+import * as Stories from './BottomSheet.stories';
+import {
+  Box,
+  BottomSheet,
+  BottomSheetModal,
+  BottomSheetScrollView,
+  BottomSheetView,
+  Button,
+  Center,
+  BodyText,
+} from '../../';
+import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
+
+<Meta title="Components / Bottom Sheet" />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4084-33370" />
+
+<BackToTopButton />
+
+# Bottom Sheet
+
+The `BottomSheet` component provides a drawer-like interface that slides up from the bottom of the screen. It's commonly used for displaying additional content or actions without navigating away from the current screen.
+
+> **Important:** For most use cases, we recommend using the `BottomSheetModal` component instead of `BottomSheet`. The modal version appears over the page content, whereas the standard `BottomSheet` is rendered inline with other page content.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Components](#components)
+  - [`BottomSheetModal`](#bottomsheetmodal)
+  - [`BottomSheetScrollView`](#bottomsheetscrollview)
+  - [`BottomSheetModalProvider`](#bottomsheetmodalprovider)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+### Basic Usage
+
+<UsageWrap>
+  <Center>
+    <Button onPress={() => {}}>Open Bottom Sheet</Button>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { useRef, useCallback } from 'react';
+import {
+  BottomSheetModal,
+  BottomSheetView,
+  Button,
+  Box,
+  BodyText,
+} from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const bottomSheetRef = useRef(null);
+
+  const handleOpenPress = useCallback(() => {
+    bottomSheetRef.current?.present();
+  }, []);
+
+  return (
+    <>
+      <Button onPress={handleOpenPress}>Open Bottom Sheet</Button>
+
+      <BottomSheetModal ref={bottomSheetRef} snapPoints={['25%', '50%']}>
+        <BottomSheetView>
+          <Box gap="200" padding="100">
+            <BodyText>This is a bottom sheet modal that appears over your content.</BodyText>
+            <Button onPress={() => bottomSheetRef.current?.close()}>Close Bottom Sheet</Button>
+          </Box>
+        </BottomSheetView>
+      </BottomSheetModal>
+    </>
+  );
+};
+```
+
+## Props
+
+The BottomSheet component is built on top of [react-native-bottom-sheet](https://gorhom.dev/react-native-bottom-sheet/), and accepts all of its props, plus the following additional props:
+
+| Property                    | Type                                            | Description                                                                                                    | Default         |
+| --------------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------- |
+| children                    | `ReactNode`                                     | The content to display within the bottom sheet                                                                 | -               |
+| backdrop                    | `boolean \| React.FC<BottomSheetBackdropProps>` | Whether to show a backdrop overlay when the sheet is open or provide a custom backdrop component               | `true`          |
+| showHandle                  | `boolea`                                        | Whether to show the handle at the top of the sheet                                                             | `true`          |
+| containerStyle              | `ViewStyle`                                     | Style for the bottom sheet container                                                                           | -               |
+| handleStyle                 | `ViewStyle`                                     | Style for the bottom sheet handle                                                                              | -               |
+| contentStyle                | `ViewStyle`                                     | Style for the bottom sheet content container                                                                   | -               |
+| snapPoints                  | `(string \| number)[]`                          | Points for the bottom sheet to snap to, specified as an array of percentages (e.g., ['25%', '50%']) or numbers | `[]`            |
+| index                       | `number`                                        | The initial snap point index                                                                                   | `-1` (closed)   |
+| enablePanDownToClose        | `boolean`                                       | Whether to allow swiping down to close the sheet                                                               | `true`          |
+| onChange                    | `(index: number) => void`                       | Callback when the sheet changes position                                                                       | -               |
+| enableContentPanningGesture | `boolean`                                       | Whether to allow panning gestures on the content                                                               | `true`          |
+| enableHandlePanningGesture  | `boolean`                                       | Whether to allow panning gestures on the handle                                                                | `true`          |
+| keyboardBehavior            | `'interactive' \| 'extend' \| 'fillParent'`     | Defines how the bottom sheet interacts with the keyboard                                                       | `'interactive'` |
+| animateOnMount              | `boolean`                                       | Whether to animate on mounting                                                                                 | `false`         |
+
+For a comprehensive list of props, refer to the [official documentation](https://gorhom.github.io/react-native-bottom-sheet/props).
+
+## Components
+
+### `BottomSheetModal`
+
+The `BottomSheetModal` component is the recommended way to use bottom sheets in most applications. It appears over the current content rather than being rendered inline.
+
+```tsx
+import { BottomSheetModal } from '@utilitywarehouse/hearth-react-native';
+
+// See usage example above
+```
+
+**Important:** When using `BottomSheetModal`, you need to wrap your app with `BottomSheetModalProvider`:
+
+```tsx
+import { BottomSheetModalProvider } from '@utilitywarehouse/hearth-react-native';
+
+const App = () => {
+  return <BottomSheetModalProvider>{/* Your app content */}</BottomSheetModalProvider>;
+};
+```
+
+### `BottomSheetScrollView`
+
+For scrollable content within a bottom sheet, use the `BottomSheetScrollView` component instead of the standard ScrollView:
+
+```tsx
+import {
+  BottomSheetModal,
+  BottomSheetScrollView,
+  Box,
+  BodyText,
+} from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const bottomSheetRef = useRef(null);
+
+  return (
+    <BottomSheetModal ref={bottomSheetRef} snapPoints={['50%', '90%']}>
+      <BottomSheetScrollView>
+        <Box gap="200" padding="100">
+          <BodyText>This is scrollable content inside the bottom sheet.</BodyText>
+          {/* Add more content here */}
+        </Box>
+      </BottomSheetScrollView>
+    </BottomSheetModal>
+  );
+};
+```
+
+### `BottomSheetModalProvider`
+
+As mentioned above, when using `BottomSheetModal`, you need to wrap your app with `BottomSheetModalProvider`:
+
+```tsx
+import { BottomSheetModalProvider } from '@utilitywarehouse/hearth-react-native';
+
+const App = () => {
+  return <BottomSheetModalProvider>{/* Your app content */}</BottomSheetModalProvider>;
+};
+```
+
+## External Resources
+
+This component is built on top of [@gorhom/bottom-sheet](https://gorhom.github.io/react-native-bottom-sheet/) (v5). For more information about advanced usage and additional features, please refer to the [official documentation](https://gorhom.dev/react-native-bottom-sheet/).

package/src/components/BottomSheet/BottomSheet.props.ts

@@ -0,0 +1,49 @@
+ 
+import { ReactNode, Ref } from 'react';
+import { ViewStyle } from 'react-native';
+import {
+  BottomSheetProps as GorhomBottomSheetProps,
+  BottomSheetBackdropProps,
+} from '@gorhom/bottom-sheet';
+import {
+  BottomSheetMethods,
+  BottomSheetModalMethods,
+} from '@gorhom/bottom-sheet/lib/typescript/types';
+
+interface BottomSheetProps extends Omit<GorhomBottomSheetProps, 'handleComponent'> {
+  /**
+   * The content to be displayed within the bottom sheet.
+   */
+  children: ReactNode;
+
+  /**
+   * The backdrop component for the bottom sheet.
+   * When true, default backdrop will be used.
+   * When false, no backdrop will be displayed.
+   * You can also provide a custom backdrop component.
+   * @default true
+   */
+  backdrop?: boolean | React.FC<BottomSheetBackdropProps>;
+
+  /**
+   * Style for the bottom sheet container.
+   */
+  containerStyle?: ViewStyle;
+
+  /**
+   * Style for the bottom sheet handle.
+   */
+  handleStyle?: ViewStyle;
+
+  /**
+   * Whether to show the handle component.
+   * @default true
+   */
+  showHandle?: boolean;
+
+  contentStyle?: ViewStyle;
+
+  ref?: Ref<BottomSheetMethods> | Ref<BottomSheetModalMethods<any>>;
+}
+
+export default BottomSheetProps;

package/src/components/BottomSheet/BottomSheet.stories.tsx

@@ -0,0 +1,335 @@
+import React, { useCallback, useRef } from 'react';
+import { BottomSheet, BottomSheetModal, BottomSheetView } from '.';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Box } from '../Box';
+import { Button } from '../Button';
+import { BodyText } from '../BodyText';
+import { Heading } from '../Heading';
+import { Divider } from '../Divider';
+import { Dimensions, Platform, View } from 'react-native';
+import { UnistylesRuntime } from 'react-native-unistyles';
+import { Input } from '../Input';
+import { FormField } from '../FormField';
+
+const meta = {
+  title: 'Stories / BottomSheet',
+  component: BottomSheet,
+  parameters: {
+    layout: 'centered',
+    noScroll: true,
+  },
+  argTypes: {
+    backdrop: {
+      control: 'boolean',
+      description: 'Whether to show a backdrop overlay when the sheet is open',
+    },
+    showHandle: {
+      control: 'boolean',
+      description: 'Whether to show the handle at the top of the sheet',
+    },
+    enablePanDownToClose: {
+      control: 'boolean',
+      description: 'Whether to allow swiping down to close the sheet',
+    },
+    snapPoints: {
+      control: 'object',
+      description: 'An array of snap points for the bottom sheet',
+    },
+    index: {
+      control: 'number',
+      description: 'The initial index of the bottom sheet',
+    },
+    enableContentPanningGesture: {
+      control: 'boolean',
+      description: 'Whether to allow panning gestures on the content',
+    },
+    enableHandlePanningGesture: {
+      control: 'boolean',
+      description: 'Whether to allow panning gestures on the handle',
+    },
+    enableOverDrag: {
+      control: 'boolean',
+      description: 'Whether to allow over-dragging the bottom sheet',
+    },
+    animateOnMount: {
+      control: 'boolean',
+      description: 'Whether to animate the bottom sheet on mount',
+    },
+  },
+  args: {
+    backdrop: true,
+    showHandle: true,
+    enablePanDownToClose: true,
+    index: -1,
+    enableContentPanningGesture: true,
+    enableHandlePanningGesture: true,
+    enableOverDrag: true,
+    animateOnMount: true,
+  },
+} satisfies Meta<typeof BottomSheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ViewWrap = ({ children }: { children: React.ReactNode }) => (
+  <View
+    style={{
+      width: Platform.OS === 'web' ? '100%' : Dimensions.get('window').width,
+      height:
+        Platform.OS === 'web'
+          ? '100%'
+          : Dimensions.get('window').height -
+            UnistylesRuntime.insets.top -
+            UnistylesRuntime.insets.bottom -
+            33,
+
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      flex: 1,
+      marginVertical: Platform.OS === 'web' ? 0 : -8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: 16,
+    }}
+  >
+    {children}
+  </View>
+);
+
+export const Playground: Story = {
+  args: {
+    children: [],
+  },
+  render: ({ ...args }) => {
+    const bottomSheetRef = useRef<BottomSheet>(null);
+    const handleOpenPress = useCallback(() => {
+      bottomSheetRef.current?.expand();
+    }, []);
+
+    return (
+      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+        <ViewWrap>
+          <Button onPress={handleOpenPress}>Open Bottom Sheet</Button>
+
+          <BottomSheet ref={bottomSheetRef} {...args}>
+            <BottomSheetView>
+              <Box gap="200">
+                <BodyText>This is a bottom sheet with content.</BodyText>
+                <BodyText>You can swipe it up and down to close.</BodyText>
+                <Button onPress={() => bottomSheetRef.current?.close()}>Close Bottom Sheet</Button>
+              </Box>
+            </BottomSheetView>
+          </BottomSheet>
+        </ViewWrap>
+      </View>
+    );
+  },
+};
+
+export const WithSnapPoints: Story = {
+  args: {
+    children: [],
+  },
+  render: () => {
+    const bottomSheetRef = useRef<BottomSheetModal>(null);
+    const handleOpenPress = useCallback(() => {
+      bottomSheetRef.current?.present();
+    }, []);
+
+    return (
+      <ViewWrap>
+        <Button onPress={handleOpenPress}>Open Bottom Sheet</Button>
+
+        <BottomSheetModal ref={bottomSheetRef} snapPoints={['25%', '50%', '75%']}>
+          <BottomSheetView>
+            <Box gap="200">
+              <BodyText>This bottom sheet has multiple snap points.</BodyText>
+              <BodyText>Try swiping to see 25%, 50% and 75% heights.</BodyText>
+              <Button onPress={() => bottomSheetRef.current?.close()}>Close Bottom Sheet</Button>
+            </Box>
+          </BottomSheetView>
+        </BottomSheetModal>
+      </ViewWrap>
+    );
+  },
+};
+
+export const DynamicHeight: Story = {
+  args: {
+    children: [],
+  },
+  render: () => {
+    const bottomSheetRef = useRef<BottomSheetModal>(null);
+    const handleOpenPress = useCallback(() => {
+      bottomSheetRef.current?.present();
+    }, []);
+
+    return (
+      <ViewWrap>
+        <Button onPress={handleOpenPress}>Open Bottom Sheet</Button>
+
+        <BottomSheetModal ref={bottomSheetRef}>
+          <BottomSheetView>
+            <Box gap="200" padding="100">
+              <BodyText>This bottom sheet will resize based on its content height.</BodyText>
+              <Button onPress={() => bottomSheetRef.current?.close()}>Close Bottom Sheet</Button>
+            </Box>
+          </BottomSheetView>
+        </BottomSheetModal>
+      </ViewWrap>
+    );
+  },
+};
+
+export const WithoutHandle: Story = {
+  args: {
+    children: [],
+  },
+  render: () => {
+    const bottomSheetRef = useRef<BottomSheetModal>(null);
+    const handleOpenPress = useCallback(() => {
+      bottomSheetRef.current?.present();
+    }, []);
+
+    return (
+      <ViewWrap>
+        <Button onPress={handleOpenPress}>Open Bottom Sheet</Button>
+
+        <BottomSheetModal ref={bottomSheetRef} showHandle={false} snapPoints={['25%', '50%']}>
+          <BottomSheetView>
+            <Box gap="200">
+              <BodyText>This bottom sheet doesn't show the handle at the top.</BodyText>
+              <Button onPress={() => bottomSheetRef.current?.close()}>Close Bottom Sheet</Button>
+            </Box>
+          </BottomSheetView>
+        </BottomSheetModal>
+      </ViewWrap>
+    );
+  },
+};
+
+export const WithoutBackdrop: Story = {
+  args: {
+    children: [],
+  },
+  render: () => {
+    const bottomSheetRef = useRef<BottomSheetModal>(null);
+    const handleOpenPress = useCallback(() => {
+      bottomSheetRef.current?.present();
+    }, []);
+
+    return (
+      <ViewWrap>
+        <Button onPress={handleOpenPress}>Open Bottom Sheet</Button>
+
+        <BottomSheetModal ref={bottomSheetRef} backdrop={false} snapPoints={['25%', '50%']}>
+          <BottomSheetView>
+            <Box gap="200">
+              <BodyText>This bottom sheet doesn't show a backdrop overlay.</BodyText>
+              <Button onPress={() => bottomSheetRef.current?.close()}>Close Bottom Sheet</Button>
+            </Box>
+          </BottomSheetView>
+        </BottomSheetModal>
+      </ViewWrap>
+    );
+  },
+};
+
+export const ComplexContent: Story = {
+  args: {
+    children: [],
+  },
+  render: () => {
+    const bottomSheetRef = useRef<BottomSheetModal>(null);
+    const handleOpenPress = useCallback(() => {
+      bottomSheetRef.current?.present();
+    }, []);
+
+    return (
+      <ViewWrap>
+        <Button onPress={handleOpenPress}>Open Bottom Sheet</Button>
+
+        <BottomSheetModal ref={bottomSheetRef} snapPoints={['50%', '90%']}>
+          <BottomSheetView>
+            <Box gap="200">
+              <Heading size="lg">Bottom Sheet with Complex Content</Heading>
+              <Divider />
+              <BodyText>
+                This is a more complex bottom sheet with various content sections.
+              </BodyText>
+
+              <Box gap="100">
+                <BodyText weight="semibold">Features:</BodyText>
+                <BodyText>• Multiple snap points</BodyText>
+                <BodyText>• Custom styling</BodyText>
+                <BodyText>• Complex layout</BodyText>
+                <BodyText>• Custom handle and backdrop</BodyText>
+              </Box>
+
+              <Divider />
+
+              <Box flexDirection="row" justifyContent="space-between">
+                <Button
+                  colorScheme="grey"
+                  variant="outline"
+                  onPress={() => bottomSheetRef.current?.close()}
+                >
+                  Cancel
+                </Button>
+                <Button onPress={() => bottomSheetRef.current?.close()}>Confirm</Button>
+              </Box>
+            </Box>
+          </BottomSheetView>
+        </BottomSheetModal>
+      </ViewWrap>
+    );
+  },
+};
+
+export const WithInput: Story = {
+  args: {
+    children: [],
+  },
+  render: () => {
+    const bottomSheetRef = useRef<BottomSheetModal>(null);
+    const handleOpenPress = useCallback(() => {
+      bottomSheetRef.current?.present();
+    }, []);
+
+    return (
+      <ViewWrap>
+        <Button onPress={handleOpenPress}>Open Bottom Sheet</Button>
+
+        <BottomSheetModal ref={bottomSheetRef}>
+          <BottomSheetView>
+            <Box gap="200">
+              <Heading size="lg">Bottom Sheet with Input</Heading>
+              <Divider />
+              <BodyText>This bottom sheet contains an input field.</BodyText>
+
+              <FormField label="Input Field">
+                <Input placeholder="Type something..." />
+              </FormField>
+
+              <Divider />
+
+              <Box flexDirection="row" justifyContent="space-between">
+                <Button
+                  colorScheme="grey"
+                  variant="outline"
+                  onPress={() => bottomSheetRef.current?.close()}
+                >
+                  Cancel
+                </Button>
+                <Button onPress={() => bottomSheetRef.current?.close()}>Submit</Button>
+              </Box>
+            </Box>
+          </BottomSheetView>
+        </BottomSheetModal>
+      </ViewWrap>
+    );
+  },
+};