@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/BottomSheet/BottomSheetFlatList.tsx

@@ -1,65 +0,0 @@
-import { BottomSheetFlatList as FlatList } from '@gorhom/bottom-sheet';
-import { BottomSheetFlatListProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
-import { useBottomSheetContext } from './BottomSheet.context';
-
-const StyledBottomSheetFlatList = withUnistyles(FlatList);
-
-const BottomSheetFlatList = ({
-  style,
-  contentContainerStyle,
-  isModal = true,
-  ...props
-}: BottomSheetFlatListProps<any> & { isModal?: boolean }) => {
-  const { handle, useSafeAreaInsets } = useBottomSheetContext();
-  styles.useVariants({
-    isModal,
-    handle,
-    useSafeAreaInsets,
-  });
-
-  return (
-    <StyledBottomSheetFlatList
-      style={[styles.container, style]}
-      contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
-      {...props}
-    />
-  );
-};
-
-const styles = StyleSheet.create((theme, rt) => ({
-  container: {},
-  contentContainer: {
-    paddingHorizontal: theme.components.bottomSheet.padding,
-    paddingBottom: theme.components.bottomSheet.padding,
-    variants: {
-      isModal: {
-        true: {
-          paddingBottom: theme.components.bottomSheet.padding,
-        },
-      },
-      handle: {
-        false: {
-          paddingTop: theme.components.bottomSheet.padding,
-        },
-      },
-      useSafeAreaInsets: {
-        true: {},
-        false: {},
-      },
-    },
-    compoundVariants: [
-      {
-        isModal: true,
-        useSafeAreaInsets: true,
-        styles: {
-          paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
-        },
-      },
-    ],
-  },
-}));
-
-BottomSheetFlatList.displayName = 'BottomSheetFlatList';
-
-export default BottomSheetFlatList;

package/src/components/BottomSheet/BottomSheetHandle.tsx

@@ -1,48 +0,0 @@
-import { BottomSheetHandle as Handle } from '@gorhom/bottom-sheet';
-import { BottomSheetDefaultHandleProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetHandle/types';
-import { Platform, View } from 'react-native';
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
-
-const StyledBottomSheetHandle = withUnistyles(Handle);
-
-const BottomSheetHandle = ({ style, indicatorStyle, ...props }: BottomSheetDefaultHandleProps) => {
-  if (Platform.OS === 'web') {
-    return (
-      <View style={[styles.handle, style]}>
-        <View style={[styles.indicator, indicatorStyle]} />
-      </View>
-    );
-  }
-  return (
-    <StyledBottomSheetHandle
-      style={[styles.handle, style]}
-      indicatorStyle={[styles.indicator, indicatorStyle]}
-      {...props}
-    />
-  );
-};
-
-const styles = StyleSheet.create(theme => ({
-  handle: {
-    backgroundColor: theme.color.surface.neutral.strong,
-    borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
-    borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
-    paddingTop: theme.components.bottomSheet.padding,
-    paddingHorizontal: theme.components.bottomSheet.padding,
-    paddingBottom: theme.components.bottomSheet.gap,
-    _web: {
-      alignItems: 'center',
-      cursor: 'grab',
-    },
-  },
-  indicator: {
-    width: theme.components.bottomSheet.handle.width,
-    height: theme.components.bottomSheet.handle.height,
-    backgroundColor: theme.components.bottomSheet.handle.backgroundColor,
-    borderRadius: theme.components.bottomSheet.handle.borderRadius,
-  },
-}));
-
-BottomSheetHandle.displayName = 'BottomSheetHandle';
-
-export default BottomSheetHandle;

package/src/components/BottomSheet/BottomSheetModal.figma.tsx

@@ -1,20 +0,0 @@
-import React from "react"
-import BottomSheetModal from "./BottomSheetModal"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  BottomSheetModal,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4084%3A33378",
-  {
-    props: {},
-    example: (props) => <BottomSheetModal />,
-  },
-)

package/src/components/BottomSheet/BottomSheetModal.tsx

@@ -1,70 +0,0 @@
-import { BottomSheetModal as BottomSheetModalCore } from '@gorhom/bottom-sheet';
-import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
-import React, { useMemo } from 'react';
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
-import { BottomSheetContext } from './BottomSheet.context';
-import type BottomSheetProps from './BottomSheet.props';
-import useBottomSheetLogic from './useBottomSheetLogic';
-
-const StyledBottomSheetModalCore = withUnistyles(BottomSheetModalCore);
-
-type BottomSheetModal<T = any> = BottomSheetModalMethods<T>;
-
-const BottomSheetModal = ({
-  children,
-  containerStyle,
-  handleStyle,
-  backdrop = true,
-  showHandle = true,
-  ref,
-  ...rest
-}: BottomSheetProps) => {
-  const bottomSheetRef = React.useRef<BottomSheetModalMethods<any>>(null);
-  const parentContext = React.useContext(BottomSheetContext);
-
-  const { renderBackdrop, renderHandle } = useBottomSheetLogic<BottomSheetModal>({
-    // @ts-expect-error - ref
-    ref,
-    bottomSheetRef,
-    backdrop,
-    showHandle,
-    handleStyle,
-  });
-
-  const value = useMemo(
-    () => ({
-      ...parentContext,
-      handle: showHandle,
-    }),
-    [parentContext, showHandle]
-  );
-
-  return (
-    <StyledBottomSheetModalCore
-      ref={bottomSheetRef}
-      backdropComponent={renderBackdrop}
-      handleComponent={renderHandle}
-      style={[styles.container, containerStyle]}
-      backgroundStyle={styles.background}
-      accessible={false}
-      {...rest}
-    >
-      <BottomSheetContext.Provider value={value}>{children}</BottomSheetContext.Provider>
-    </StyledBottomSheetModalCore>
-  );
-};
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    flex: 1,
-  },
-  background: {
-    borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
-    borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
-    backgroundColor: theme.color.surface.neutral.strong,
-  },
-}));
-
-BottomSheetModal.displayName = 'BottomSheetModal';
-
-export default BottomSheetModal;

package/src/components/BottomSheet/BottomSheetModalProvider.tsx

@@ -1,33 +0,0 @@
-import { BottomSheetModalProvider as GorhomBottomSheetModalProvider } from '@gorhom/bottom-sheet';
-import type { BottomSheetModalProviderProps as GorhomBottomSheetModalProviderProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetModalProvider/types';
-import { useMemo } from 'react';
-import { BottomSheetContext, useBottomSheetContext } from './BottomSheet.context';
-
-export interface BottomSheetModalProviderProps extends GorhomBottomSheetModalProviderProps {
-  useSafeAreaInsets?: boolean;
-}
-
-const BottomSheetModalProvider = ({
-  children,
-  useSafeAreaInsets = true,
-  ...props
-}: BottomSheetModalProviderProps) => {
-  const parentContext = useBottomSheetContext();
-  const value = useMemo(
-    () => ({
-      ...parentContext,
-      useSafeAreaInsets,
-    }),
-    [parentContext, useSafeAreaInsets]
-  );
-
-  return (
-    <GorhomBottomSheetModalProvider {...props}>
-      <BottomSheetContext.Provider value={value}>{children}</BottomSheetContext.Provider>
-    </GorhomBottomSheetModalProvider>
-  );
-};
-
-BottomSheetModalProvider.displayName = 'BottomSheetModalProvider';
-
-export default BottomSheetModalProvider;

package/src/components/BottomSheet/BottomSheetScrollView.tsx

@@ -1,74 +0,0 @@
-import { BottomSheetScrollView as ScrollView } from '@gorhom/bottom-sheet';
-import { BottomSheetScrollViewProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetScrollable/types';
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
-import { useBottomSheetContext } from './BottomSheet.context';
-
-const StyledBottomSheetScrollView = withUnistyles(
-  ScrollView
-) as React.ForwardRefExoticComponent<BottomSheetScrollViewProps>;
-
-const BottomSheetScrollView = ({
-  children,
-  style,
-  contentContainerStyle,
-  isModal = true,
-  ...props
-}: BottomSheetScrollViewProps & { isModal?: boolean }) => {
-  const { handle, useSafeAreaInsets } = useBottomSheetContext();
-  styles.useVariants({
-    isModal,
-    handle,
-    useSafeAreaInsets,
-  });
-
-  return (
-    <StyledBottomSheetScrollView
-      style={[styles.container, style]}
-      contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
-      {...props}
-    >
-      {children}
-    </StyledBottomSheetScrollView>
-  );
-};
-
-const styles = StyleSheet.create((theme, rt) => ({
-  container: {
-    backgroundColor: theme.color.surface.neutral.strong,
-    borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
-    borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
-  },
-  contentContainer: {
-    paddingHorizontal: theme.components.bottomSheet.padding,
-    paddingBottom: theme.components.bottomSheet.padding,
-    variants: {
-      isModal: {
-        true: {
-          paddingBottom: theme.components.bottomSheet.padding,
-        },
-      },
-      handle: {
-        false: {
-          paddingTop: theme.components.bottomSheet.padding,
-        },
-      },
-      useSafeAreaInsets: {
-        true: {},
-        false: {},
-      },
-    },
-    compoundVariants: [
-      {
-        isModal: true,
-        useSafeAreaInsets: true,
-        styles: {
-          paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
-        },
-      },
-    ],
-  },
-}));
-
-BottomSheetScrollView.displayName = 'BottomSheetScrollView';
-
-export default BottomSheetScrollView;

package/src/components/BottomSheet/BottomSheetView.tsx

@@ -1,67 +0,0 @@
-import { BottomSheetView as View } from '@gorhom/bottom-sheet';
-import { BottomSheetViewProps } from '@gorhom/bottom-sheet/lib/typescript/components/bottomSheetView/types';
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
-import { useBottomSheetContext } from './BottomSheet.context';
-
-const StyledBottomSheetView = withUnistyles(View) as React.ForwardRefExoticComponent<
-  BottomSheetViewProps & React.RefAttributes<typeof View>
->;
-
-const BottomSheetView = ({
-  children,
-  style,
-  isModal = true,
-  ...props
-}: BottomSheetViewProps & { isModal?: boolean }) => {
-  const { handle, useSafeAreaInsets } = useBottomSheetContext();
-  styles.useVariants({
-    isModal,
-    handle,
-    useSafeAreaInsets,
-  });
-
-  return (
-    <StyledBottomSheetView style={[styles.contentContainer, style]} {...props}>
-      {children}
-    </StyledBottomSheetView>
-  );
-};
-
-const styles = StyleSheet.create((theme, rt) => ({
-  contentContainer: {
-    borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
-    borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
-    backgroundColor: theme.color.surface.neutral.strong,
-    paddingHorizontal: theme.components.bottomSheet.padding,
-    paddingBottom: theme.components.bottomSheet.padding,
-    variants: {
-      isModal: {
-        true: {
-          paddingBottom: theme.components.bottomSheet.padding,
-        },
-      },
-      handle: {
-        false: {
-          paddingTop: theme.components.bottomSheet.padding,
-        },
-      },
-      useSafeAreaInsets: {
-        true: {},
-        false: {},
-      },
-    },
-    compoundVariants: [
-      {
-        isModal: true,
-        useSafeAreaInsets: true,
-        styles: {
-          paddingBottom: theme.components.bottomSheet.padding + rt.insets.bottom,
-        },
-      },
-    ],
-  },
-}));
-
-BottomSheetView.displayName = 'BottomSheetView';
-
-export default BottomSheetView;

package/src/components/BottomSheet/index.ts

@@ -1,20 +0,0 @@
-export {
-  BottomSheetFlashList,
-  BottomSheetFooter,
-  BottomSheetSectionList,
-  BottomSheetVirtualizedList,
-  useBottomSheet,
-  useBottomSheetModal,
-  type BottomSheetBackdropProps,
-  type BottomSheetBackgroundProps,
-  type BottomSheetHandleProps,
-  type BottomSheetModalProps,
-} from '@gorhom/bottom-sheet';
-export { default as BottomSheet } from './BottomSheet';
-export type { default as BottomSheetProps } from './BottomSheet.props';
-export { default as BottomSheetFlatList } from './BottomSheetFlatList';
-export { default as BottomSheetModal } from './BottomSheetModal';
-export { default as BottomSheetModalProvider } from './BottomSheetModalProvider';
-export type { BottomSheetModalProviderProps } from './BottomSheetModalProvider';
-export { default as BottomSheetScrollView } from './BottomSheetScrollView';
-export { default as BottomSheetView } from './BottomSheetView';

package/src/components/BottomSheet/useBottomSheetLogic.tsx

@@ -1,53 +0,0 @@
- 
-import React, { useCallback, useImperativeHandle, RefObject, FC } from 'react';
-import { BottomSheetBackdropProps, BottomSheetHandleProps } from '@gorhom/bottom-sheet';
-import BottomSheetBackdrop from './BottomSheetBackdrop';
-import BottomSheetHandle from './BottomSheetHandle';
-import { ViewStyle } from 'react-native';
-
-interface UseBottomSheetLogicProps<T = any> {
-  ref?: React.Ref<T> | null;
-  bottomSheetRef: RefObject<T | null>;
-  backdrop: boolean | FC<BottomSheetBackdropProps>;
-  showHandle: boolean;
-  handleStyle?: ViewStyle;
-}
-
-const useBottomSheetLogic = <T = any,>(props: UseBottomSheetLogicProps<T>) => {
-  const { ref, bottomSheetRef, backdrop, showHandle } = props;
-
-  // Backdrop component
-  const renderBackdrop = useCallback(
-    (backDropProps: BottomSheetBackdropProps) => {
-      if (backdrop === false) return null;
-
-      if (backdrop === true) {
-        return <BottomSheetBackdrop {...backDropProps} />;
-      }
-
-      // Custom backdrop component provided by the user
-      return backdrop(backDropProps);
-    },
-    [backdrop]
-  );
-
-  // Handle component
-  const renderHandle = useCallback(
-    (handleProps: BottomSheetHandleProps) => {
-      if (!showHandle) return null;
-
-      return <BottomSheetHandle {...handleProps} />;
-    },
-    [showHandle]
-  );
-
-  // Forward ref methods to parent component
-  useImperativeHandle(ref, () => bottomSheetRef.current as T);
-
-  return {
-    renderBackdrop,
-    renderHandle,
-  };
-};
-
-export default useBottomSheetLogic;

package/src/components/Box/Box.props.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { ViewProps } from 'react-native';
-import type { AllUtilityProps, SpacingValues } from '../../types';
-
-interface CustomBoxProps {
-  // Custom props
-  as?: React.ElementType;
-  spacing?: SpacingValues;
-}
-
-export interface BoxProps extends AllUtilityProps, ViewProps, CustomBoxProps {}
-
-export default BoxProps;

package/src/components/Box/Box.stories.tsx

@@ -1,70 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { primitive } from '@utilitywarehouse/hearth-tokens/js';
-import { InputType } from 'storybook/internal/types';
-import { Box } from '.';
-import { backgroundColorKeys } from '../../utils/coloursAsArray';
-import { BodyText } from '../BodyText';
-
-const backgroundColor: InputType = {
-  options: backgroundColorKeys,
-  control: 'select',
-  description: 'Background color of the box.',
-};
-
-const height: InputType = {
-  control: 'number',
-  description: 'Height of the box.',
-};
-
-const width: InputType = {
-  control: 'number',
-  description: 'Width of the box.',
-};
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Stories / Box',
-  component: Box,
-  parameters: {
-    // Optional parameter to Box the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    children: { control: 'text' },
-    backgroundColor,
-    bg: backgroundColor,
-    bgColor: backgroundColor,
-    padding: {
-      options: Object.keys(primitive.space),
-      control: 'select',
-      description: 'Padding of the box.',
-    },
-    height,
-    h: height,
-    width,
-    w: width,
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: {
-    children: "Hello there, I'm in a box!",
-    backgroundColor: 'orange400',
-    padding: '200',
-    width: 300,
-    height: 200,
-  },
-} satisfies Meta<typeof Box>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ as, ...args }) => {
-    return (
-      <Box {...args}>
-        <BodyText>{args.children}</BodyText>
-      </Box>
-    );
-  },
-};

package/src/components/Box/Box.tsx

@@ -1,107 +0,0 @@
-import React, { useMemo } from 'react';
-import { View, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import {
-  propStyleMapping,
-  resolveThemeKey,
-  resolveThemeValueWithFallback,
-  semanticPropMapping,
-  themeStyleFallbackMapping,
-  themeStyleMapping,
-  viewStyleProps,
-} from '../../utils';
-import type BoxProps from './Box.props';
-
-// --- Box component definition ---
-const BoxComponent = ({ as, style, children, ...props }: BoxProps) => {
-  const { computedProps } = useMemo(() => {
-    const computedProps: Record<string, any> = {};
-
-    Object.entries(props).forEach(([propName, propValue]) => {
-      if (propValue === undefined) return;
-
-      if (semanticPropMapping[propName]) return;
-      if (propStyleMapping[propName] || viewStyleProps.has(propName)) {
-        return;
-      }
-
-      computedProps[propName] = propValue;
-    });
-
-    return { computedProps };
-  }, [props]);
-
-  const Component: React.ComponentType<any> = (as as React.ComponentType<any>) || View;
-
-  return (
-    <Component style={[styles.computedStyles(props), style]} {...computedProps}>
-      {children}
-    </Component>
-  );
-};
-
-const styles = StyleSheet.create(theme => ({
-  computedStyles: (props: Record<string, any>) => {
-    const computedStyles: Record<string, any> = {};
-
-    Object.entries(props).forEach(([propName, propValue]) => {
-      if (propValue === undefined) return;
-
-      // Check for semantic prop mappings first (e.g., iconColor, color)
-      const semanticMapping = semanticPropMapping[propName];
-      if (semanticMapping) {
-        const { styleProp, themeKey } = semanticMapping;
-        const themeMapping = resolveThemeKey(theme, themeKey);
-        const fallbackKey = themeStyleFallbackMapping[themeKey];
-        const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
-
-        computedStyles[styleProp] = resolveThemeValueWithFallback(
-          propValue,
-          themeMapping,
-          fallbackMapping
-        );
-        return;
-      }
-
-      let stylePropName: keyof ViewStyle | undefined;
-
-      // Handle shorthand props
-      if (propStyleMapping[propName]) {
-        stylePropName = propStyleMapping[propName];
-      }
-      // Handle direct style props
-      else if (viewStyleProps.has(propName)) {
-        stylePropName = propName as keyof ViewStyle;
-      }
-
-      if (!stylePropName) return;
-
-      // Resolve theme value if needed
-      const themeKey = themeStyleMapping[stylePropName as string];
-
-      if (themeKey) {
-        const themeObj = resolveThemeKey(theme, themeKey);
-        const fallbackKey = themeStyleFallbackMapping[themeKey];
-        const fallbackMapping = fallbackKey ? resolveThemeKey(theme, fallbackKey) : undefined;
-
-        if (themeObj) {
-          computedStyles[stylePropName] = resolveThemeValueWithFallback(
-            propValue,
-            themeObj,
-            fallbackMapping
-          );
-        } else {
-          computedStyles[stylePropName] = propValue;
-        }
-      } else {
-        computedStyles[stylePropName] = propValue;
-      }
-    });
-
-    return computedStyles;
-  },
-}));
-
-BoxComponent.displayName = 'Box';
-
-export default BoxComponent;

package/src/components/Box/index.ts

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

package/src/components/Button/Button.context.ts

@@ -1,13 +0,0 @@
-import { createContext, useContext } from 'react';
-import type { ButtonProps } from './Button.props';
-
-export const ButtonContext = createContext<{
-  colorScheme?: ButtonProps['colorScheme'];
-  variant?: ButtonProps['variant'];
-  size?: ButtonProps['size'];
-  inverted?: ButtonProps['inverted'];
-  disabled?: ButtonProps['disabled'];
-  active?: boolean;
-}>({});
-
-export const useButtonContext = () => useContext(ButtonContext);