@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/src/components/Badge/Badge.tsx

@@ -1,22 +1,30 @@
 import { useMemo } from 'react';
-import type BadgeProps from './Badge.props';
-import { StyleSheet } from 'react-native-unistyles';
 import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { BadgeContext } from './Badge.context';
-import BadgeText from './BadgeText';
+import type BadgeProps from './Badge.props';
 import BadgeIcon from './BadgeIcon';
+import BadgeText from './BadgeText';
 
 const Badge = ({ children, ...props }: BadgeProps) => {
-  const { variant = 'solid', icon, colorScheme = 'blue', flatBase = false, style, ...rest } = props;
+  const {
+    variant = 'subtle',
+    icon,
+    colorScheme = 'info',
+    flatBase = false,
+    size = 'sm',
+    style,
+    ...rest
+  } = props;
 
   const value = useMemo(
-    () => ({ colorScheme, flatBase, variant }),
-    [colorScheme, flatBase, variant]
+    () => ({ colorScheme, flatBase, variant, size }),
+    [colorScheme, flatBase, variant, size]
   );
 
   const childIsText = typeof children === 'string' || typeof children === 'number';
 
-  styles.useVariants({ colorScheme, flatBase, variant });
+  styles.useVariants({ colorScheme, flatBase, variant, size });
 
   return (
     <BadgeContext.Provider value={value}>
@@ -37,21 +45,38 @@ const styles = StyleSheet.create(theme => ({
     alignSelf: 'flex-start',
     paddingHorizontal: theme.components.badge.paddingHorizontal,
     borderRadius: theme.components.badge.borderRadius,
-    paddingVertical: theme.components.badge.paddingVertical,
     gap: theme.components.badge.gap,
     variants: {
       colorScheme: {
-        blue: {},
-        red: {},
-        green: {},
-        orange: {},
-        grey: {},
+        info: {},
+        danger: {},
+        positive: {},
+        warning: {},
+        functional: {},
+        energy: {},
+        broadband: {},
+        mobile: {},
+        insurance: {},
+        cashback: {},
+        pig: {},
+        highlight: {},
       },
       variant: {
-        solid: {},
+        subtle: {},
+        emphasis: {},
         outline: {
           borderWidth: theme.components.badge.outline.borderWidth,
-          borderColor: theme.components.badge.outline.borderColor,
+          borderColor: theme.color.border.subtle,
+        },
+      },
+      size: {
+        sm: {
+          paddingVertical: theme.components.badge.sm.paddingVertical,
+          height: theme.components.badge.sm.height,
+        },
+        md: {
+          paddingVertical: theme.components.badge.md.paddingVertical,
+          height: theme.components.badge.md.height,
         },
       },
       flatBase: {
@@ -63,71 +88,200 @@ const styles = StyleSheet.create(theme => ({
       },
     },
     compoundVariants: [
+      // Emphasis
+      {
+        colorScheme: 'info',
+        variant: 'emphasis',
+        styles: {
+          backgroundColor: theme.color.feedback.info.surface.default,
+        },
+      },
+      {
+        colorScheme: 'danger',
+        variant: 'emphasis',
+        styles: {
+          backgroundColor: theme.color.feedback.danger.surface.default,
+        },
+      },
+      {
+        colorScheme: 'positive',
+        variant: 'emphasis',
+        styles: {
+          backgroundColor: theme.color.feedback.positive.surface.default,
+        },
+      },
+      {
+        colorScheme: 'warning',
+        variant: 'emphasis',
+        styles: {
+          backgroundColor: theme.color.feedback.warning.surface.default,
+        },
+      },
+      {
+        colorScheme: 'functional',
+        variant: 'emphasis',
+        styles: {
+          backgroundColor: theme.color.feedback.functional.surface.default,
+        },
+      },
+      {
+        colorScheme: 'energy',
+        variant: 'emphasis',
+        styles: {
+          backgroundColor: theme.color.surface.energy.default,
+        },
+      },
+      {
+        colorScheme: 'broadband',
+        variant: 'emphasis',
+        styles: {
+          backgroundColor: theme.color.surface.broadband.default,
+        },
+      },
+      {
+        colorScheme: 'mobile',
+        variant: 'emphasis',
+        styles: {
+          backgroundColor: theme.color.surface.mobile.default,
+        },
+      },
+      {
+        colorScheme: 'insurance',
+        variant: 'emphasis',
+        styles: {
+          backgroundColor: theme.color.surface.insurance.default,
+        },
+      },
+      {
+        colorScheme: 'cashback',
+        variant: 'emphasis',
+        styles: {
+          backgroundColor: theme.color.surface.cashback.default,
+        },
+      },
+      {
+        colorScheme: 'pig',
+        variant: 'emphasis',
+        styles: {
+          backgroundColor: theme.color.surface.pig.default,
+        },
+      },
+      // Subtle
+      {
+        colorScheme: 'info',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.feedback.info.surface.subtle,
+        },
+      },
+      {
+        colorScheme: 'danger',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.feedback.danger.surface.subtle,
+        },
+      },
+      {
+        colorScheme: 'positive',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.feedback.positive.surface.subtle,
+        },
+      },
+      {
+        colorScheme: 'warning',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.feedback.warning.surface.subtle,
+        },
+      },
+      {
+        colorScheme: 'functional',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.feedback.functional.surface.subtle,
+        },
+      },
+      {
+        colorScheme: 'energy',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.surface.energy.subtle,
+        },
+      },
+      {
+        colorScheme: 'broadband',
+        variant: 'subtle',
+        styles: {
+          backgroundColor: theme.color.surface.broadband.subtle,
+        },
+      },
       {
-        colorScheme: 'blue',
-        variant: 'solid',
+        colorScheme: 'mobile',
+        variant: 'subtle',
         styles: {
-          backgroundColor: theme.components.badge.solid.blue.backgroundColor,
+          backgroundColor: theme.color.surface.mobile.subtle,
         },
       },
       {
-        colorScheme: 'red',
-        variant: 'solid',
+        colorScheme: 'insurance',
+        variant: 'subtle',
         styles: {
-          backgroundColor: theme.components.badge.solid.red.backgroundColor,
+          backgroundColor: theme.color.surface.insurance.subtle,
         },
       },
       {
-        colorScheme: 'green',
-        variant: 'solid',
+        colorScheme: 'cashback',
+        variant: 'subtle',
         styles: {
-          backgroundColor: theme.components.badge.solid.green.backgroundColor,
+          backgroundColor: theme.color.surface.cashback.subtle,
         },
       },
       {
-        colorScheme: 'orange',
-        variant: 'solid',
+        colorScheme: 'pig',
+        variant: 'subtle',
         styles: {
-          backgroundColor: theme.components.badge.solid.orange.backgroundColor,
+          backgroundColor: theme.color.surface.pig.subtle,
         },
       },
       {
-        colorScheme: 'grey',
-        variant: 'solid',
+        colorScheme: 'highlight',
+        variant: 'subtle',
         styles: {
-          backgroundColor: theme.components.badge.solid.grey.backgroundColor,
+          backgroundColor: theme.color.surface.highlight.subtle,
         },
       },
+      // Outline
       {
-        colorScheme: 'blue',
+        colorScheme: 'info',
         variant: 'outline',
         styles: {
           backgroundColor: 'transparent',
         },
       },
       {
-        colorScheme: 'red',
+        colorScheme: 'danger',
         variant: 'outline',
         styles: {
           backgroundColor: 'transparent',
         },
       },
       {
-        colorScheme: 'green',
+        colorScheme: 'positive',
         variant: 'outline',
         styles: {
           backgroundColor: 'transparent',
         },
       },
       {
-        colorScheme: 'orange',
+        colorScheme: 'warning',
         variant: 'outline',
         styles: {
           backgroundColor: 'transparent',
         },
       },
       {
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         variant: 'outline',
         styles: {
           backgroundColor: 'transparent',

package/src/components/Badge/BadgeIcon.tsx

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native-unistyles';
-import { useBadgeContext } from './Badge.context';
 import { Icon } from '../Icon';
 import type IconProps from '../Icon/Icon.props';
+import { useBadgeContext } from './Badge.context';
 
 const BadgeIcon = (props: IconProps) => {
   const { colorScheme, variant } = useBadgeContext();
@@ -17,56 +17,66 @@ const styles = StyleSheet.create(theme => ({
     height: 20,
     minWidth: 20,
     minHeight: 20,
-    alignSelf: 'flex-start',
     variants: {
       colorScheme: {
-        blue: {},
-        red: {},
-        green: {},
-        orange: {},
-        grey: {},
+        info: {},
+        danger: {},
+        positive: {},
+        warning: {},
+        functional: {},
+        energy: {},
+        broadband: {},
+        mobile: {},
+        insurance: {},
+        cashback: {},
+        pig: {},
+        highlight: {},
       },
       variant: {
-        solid: {
-          color: theme.components.badge.solid.color,
+        emphasis: {
+          color: theme.color.text.primary,
+        },
+        subtle: {
+          color: theme.color.text.primary,
         },
         outline: {},
       },
     },
     compoundVariants: [
+      // Outline
       {
-        colorScheme: 'blue',
+        colorScheme: 'info',
         variant: 'outline',
         styles: {
-          color: theme.components.badge.outline.blue.color,
+          color: theme.color.feedback.info.foreground.subtle,
         },
       },
       {
-        colorScheme: 'red',
+        colorScheme: 'danger',
         variant: 'outline',
         styles: {
-          color: theme.components.badge.outline.red.color,
+          color: theme.color.feedback.danger.foreground.subtle,
         },
       },
       {
-        colorScheme: 'green',
+        colorScheme: 'positive',
         variant: 'outline',
         styles: {
-          color: theme.components.badge.outline.green.color,
+          color: theme.color.feedback.positive.foreground.subtle,
         },
       },
       {
-        colorScheme: 'orange',
+        colorScheme: 'warning',
         variant: 'outline',
         styles: {
-          color: theme.components.badge.outline.orange.color,
+          color: theme.color.feedback.warning.foreground.subtle,
         },
       },
       {
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         variant: 'outline',
         styles: {
-          color: theme.components.badge.outline.grey.color,
+          color: theme.color.feedback.functional.foreground.subtle,
         },
       },
     ],

package/src/components/Badge/BadgeText.tsx

@@ -4,10 +4,10 @@ import { BodyText } from '../BodyText';
 import { useBadgeContext } from './Badge.context';
 
 const BadgeText = ({ children, style, ...props }: TextProps) => {
-  const { variant, colorScheme } = useBadgeContext();
+  const { variant, colorScheme, size } = useBadgeContext();
   styles.useVariants({ variant, colorScheme });
   return (
-    <BodyText {...props} size="sm" style={[styles.text, style]}>
+    <BodyText {...props} size={size} weight="semibold" style={[styles.text, style]}>
       {children}
     </BodyText>
   );
@@ -19,53 +19,64 @@ const styles = StyleSheet.create(theme => ({
   text: {
     variants: {
       colorScheme: {
-        blue: {},
-        red: {},
-        green: {},
-        orange: {},
-        grey: {},
+        info: {},
+        danger: {},
+        positive: {},
+        warning: {},
+        functional: {},
+        energy: {},
+        broadband: {},
+        mobile: {},
+        insurance: {},
+        cashback: {},
+        pig: {},
+        highlight: {},
       },
       variant: {
-        solid: {
-          color: theme.components.badge.solid.color,
+        emphasis: {
+          color: theme.color.text.primary,
+        },
+        subtle: {
+          color: theme.color.text.primary,
         },
         outline: {},
       },
     },
     compoundVariants: [
+      // Outline
       {
-        colorScheme: 'blue',
+        colorScheme: 'info',
         variant: 'outline',
         styles: {
-          color: theme.components.badge.outline.blue.color,
+          color: theme.color.feedback.info.foreground.subtle,
         },
       },
       {
-        colorScheme: 'red',
+        colorScheme: 'danger',
         variant: 'outline',
         styles: {
-          color: theme.components.badge.outline.red.color,
+          color: theme.color.feedback.danger.foreground.subtle,
         },
       },
       {
-        colorScheme: 'green',
+        colorScheme: 'positive',
         variant: 'outline',
         styles: {
-          color: theme.components.badge.outline.green.color,
+          color: theme.color.feedback.positive.foreground.subtle,
         },
       },
       {
-        colorScheme: 'orange',
+        colorScheme: 'warning',
         variant: 'outline',
         styles: {
-          color: theme.components.badge.outline.orange.color,
+          color: theme.color.feedback.warning.foreground.subtle,
         },
       },
       {
-        colorScheme: 'grey',
+        colorScheme: 'functional',
         variant: 'outline',
         styles: {
-          color: theme.components.badge.outline.grey.color,
+          color: theme.color.feedback.functional.foreground.subtle,
         },
       },
     ],

package/src/components/BodyText/BodyText.tsx

@@ -1,6 +1,6 @@
 import { Text } from 'react-native';
-import type BodyTextProps from './BodyText.props';
 import { StyleSheet } from 'react-native-unistyles';
+import type BodyTextProps from './BodyText.props';
 
 import { getFlattenedColorValue } from '../../utils';
 
@@ -65,7 +65,7 @@ BodyText.displayName = 'BodyText';
 
 const styles = StyleSheet.create(theme => ({
   text: {
-    color: theme.components.text.color,
+    color: theme.color.text.primary,
     fontFamily: theme.typography.mobile.bodyText.fontFamily,
     fontStyle: 'normal',
     variants: {
@@ -111,12 +111,12 @@ const styles = StyleSheet.create(theme => ({
       },
       inverted: {
         true: {
-          color: theme.components.text.colorInverted,
+          color: theme.color.text.inverted,
         },
       },
     },
   },
-  getColours: (color, textDecorationColor) => ({
+  getColours: (color?: string, textDecorationColor?: string) => ({
     ...(color ? { color: getFlattenedColorValue(color, theme.color) } : {}),
     ...(textDecorationColor
       ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }

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

@@ -1,16 +1,16 @@
-import { Meta, Canvas, Story, Controls } from '@storybook/addon-docs/blocks';
-import * as Stories from './BottomSheet.stories';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import {
-  Box,
+  BodyText,
   BottomSheet,
   BottomSheetModal,
   BottomSheetScrollView,
   BottomSheetView,
+  Box,
   Button,
   Center,
-  BodyText,
 } from '../../';
-import { UsageWrap, BackToTopButton, ViewFigmaButton } from '../../../docs/components';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './BottomSheet.stories';
 
 <Meta title="Components / Bottom Sheet" />
 
@@ -31,6 +31,8 @@ The `BottomSheet` component provides a drawer-like interface that slides up from
   - [`BottomSheetModal`](#bottomsheetmodal)
   - [`BottomSheetScrollView`](#bottomsheetscrollview)
   - [`BottomSheetModalProvider`](#bottomsheetmodalprovider)
+  - [`Input` in Bottom Sheets](#input-in-bottom-sheets)
+- [External Resources](#external-resources)
 
 ## Playground
 
@@ -167,6 +169,22 @@ const App = () => {
 };
 ```
 
+### `Input` in Bottom Sheets
+
+When using the `Input` component inside a `BottomSheet` or `BottomSheetModal`, you need to pass the `inBottomSheet` prop to ensure proper behavior with the keyboard and focus management.
+
+```tsx
+import { Input } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  return (
+    <BottomSheetModal>
+      <Input placeholder="Type something..." inBottomSheet />
+    </BottomSheetModal>
+  );
+};
+```
+
 ## 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.stories.tsx

@@ -1,15 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useRef } from 'react';
+import { Dimensions, Platform, View } from 'react-native';
+import { UnistylesRuntime } from 'react-native-unistyles';
 import { BottomSheet, BottomSheetModal, BottomSheetView } from '.';
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { BodyText } from '../BodyText';
 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';
+import { Heading } from '../Heading';
+import { Input } from '../Input';
 
 const meta = {
   title: 'Stories / BottomSheet',
@@ -273,7 +273,7 @@ export const ComplexContent: Story = {
 
               <Box flexDirection="row" justifyContent="space-between">
                 <Button
-                  colorScheme="grey"
+                  colorScheme="functional"
                   variant="outline"
                   onPress={() => bottomSheetRef.current?.close()}
                 >
@@ -311,14 +311,14 @@ export const WithInput: Story = {
               <BodyText>This bottom sheet contains an input field.</BodyText>
 
               <FormField label="Input Field">
-                <Input placeholder="Type something..." />
+                <Input placeholder="Type something..." inBottomSheet />
               </FormField>
 
               <Divider />
 
               <Box flexDirection="row" justifyContent="space-between">
                 <Button
-                  colorScheme="grey"
+                  colorScheme="functional"
                   variant="outline"
                   onPress={() => bottomSheetRef.current?.close()}
                 >

package/src/components/BottomSheet/BottomSheet.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo } from 'react';
 import BottomSheetCore, { BottomSheetProps as RootBottomSheetProps } from '@gorhom/bottom-sheet';
-import type BottomSheetProps from './BottomSheet.props';
-import { StyleSheet, withUnistyles } from 'react-native-unistyles';
-import useBottomSheetLogic from './useBottomSheetLogic';
 import { BottomSheetMethods } 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 StyledBottomSheetCore = withUnistyles(BottomSheetCore) as React.ForwardRefExoticComponent<
   RootBottomSheetProps & React.RefAttributes<BottomSheetMethods>
@@ -55,7 +55,7 @@ const styles = StyleSheet.create(theme => ({
   background: {
     borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
     borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
-    backgroundColor: theme.components.bottomSheet.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
   },
 }));
 

package/src/components/BottomSheet/BottomSheetHandle.tsx

@@ -17,7 +17,7 @@ const BottomSheetHandle = ({ style, indicatorStyle, ...props }: BottomSheetDefau
 
 const styles = StyleSheet.create(theme => ({
   handle: {
-    backgroundColor: theme.components.bottomSheet.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
     borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
     borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
     paddingTop: theme.components.bottomSheet.padding,

package/src/components/BottomSheet/BottomSheetModal.tsx

@@ -53,7 +53,7 @@ const styles = StyleSheet.create(theme => ({
   background: {
     borderTopLeftRadius: theme.components.bottomSheet.borderTopLeftRadius,
     borderTopRightRadius: theme.components.bottomSheet.borderTopRightRadius,
-    backgroundColor: theme.components.bottomSheet.backgroundColor,
+    backgroundColor: theme.color.surface.neutral.strong,
   },
 }));