@utilitywarehouse/hearth-react-native 0.1.0 → 0.3.0

package/build/utils/hexWithOpacity.js

@@ -0,0 +1,15 @@
+const hexWithOpacity = (hex, opacity) => {
+    'worklet';
+    // Remove # if present
+    const cleanHex = hex.replace('#', '');
+    // Validate hex string format
+    if (cleanHex.length !== 6 || !/^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
+        throw new Error(`Invalid hex color format: ${hex}. Expected format: #RRGGBB or RRGGBB`);
+    }
+    // Convert hex to RGB
+    const r = parseInt(cleanHex.substring(0, 2), 16);
+    const g = parseInt(cleanHex.substring(2, 4), 16);
+    const b = parseInt(cleanHex.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+};
+export default hexWithOpacity;

package/build/utils/index.d.ts

@@ -1,4 +1,6 @@
+export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
+export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
-export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
+export { default as hexWithOpacity } from './hexWithOpacity';
 export * from './styleUtils';

package/build/utils/index.js

@@ -1,4 +1,6 @@
+export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
+export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
-export { default as coloursAsArray, extractLightColorValues } from './coloursAsArray';
+export { default as hexWithOpacity } from './hexWithOpacity';
 export * from './styleUtils';

package/build/utils/styleUtils.js

@@ -218,6 +218,23 @@ export const viewStyleProps = new Set([
     // Z-index
     'zIndex',
 ]);
+/**
+ * Helper function to convert camelCase back to nested object path
+ * e.g., feedbackDangerSurfaceDefault -> ['feedback', 'danger', 'surface', 'default']
+ */
+const camelCaseToPath = (camelCased) => {
+    // Split on uppercase letters but keep them
+    const parts = camelCased.split(/(?=[A-Z])/).map(part => part.toLowerCase());
+    return parts;
+};
+/**
+ * Helper function to get nested value from object using path array
+ */
+const getNestedValue = (obj, path) => {
+    return path.reduce((current, key) => {
+        return current && typeof current === 'object' ? current[key] : undefined;
+    }, obj);
+};
 /**
  * Helper function to resolve a theme value
  */
@@ -225,6 +242,20 @@ export const resolveThemeValue = (value, themeMapping) => {
     if (typeof value !== 'string' || !themeMapping || typeof themeMapping !== 'object') {
         return value;
     }
+    // First, try direct lookup for simple values
+    if (themeMapping[value] !== undefined) {
+        return themeMapping[value];
+    }
+    // Try camelCase to nested path conversion (e.g., feedbackDangerSurfaceDefault)
+    if (/^[a-z][a-zA-Z]*$/.test(value)) {
+        // Only camelCase strings without numbers
+        const path = camelCaseToPath(value);
+        const nestedValue = getNestedValue(themeMapping, path);
+        if (nestedValue !== undefined) {
+            return nestedValue;
+        }
+    }
+    // Then, try the existing numeric suffix pattern (e.g., broadbandBlue100)
     const shadeMatch = value.match(/\d+$/);
     if (shadeMatch) {
         const shade = shadeMatch[0];
@@ -234,5 +265,6 @@ export const resolveThemeValue = (value, themeMapping) => {
             return nested[shade] ?? value;
         }
     }
-    return themeMapping[value] ?? value;
+    // If none of the approaches work, return the original value
+    return value;
 };

package/docs/components/AllComponents.web.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 
+import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import {
   BroadbandMediumIcon,
+  CashbackCardMediumIcon,
   ChevronRightMediumIcon,
   ElectricityMediumIcon,
   InsuranceMediumIcon,
@@ -23,6 +25,9 @@ import {
   Card,
   Center,
   Checkbox,
+  CurrencyInput,
+  DescriptionList,
+  DescriptionListItem,
   DetailText,
   Divider,
   Flex,
@@ -31,27 +36,35 @@ import {
   Heading,
   Icon,
   IconButton,
+  IconContainer,
   InlineLink,
   Input,
   LI,
   Link,
   List,
   ListItem,
+  Modal,
   OL,
   Radio,
   RadioCard,
   RadioCardGroup,
   RadioGroup,
+  SectionHeader,
   Select,
   Skeleton,
   Spinner,
   Switch,
+  Tab,
+  TabPanel,
+  Tabs,
+  TabsList,
   Textarea,
   ToggleButtonCard,
   ToggleButtonCardGroup,
   UL,
   useColorMode,
 } from '../../src';
+import { addReactNativePrefix } from '../heplers';
 
 const ComponentWrapper = ({
   name,
@@ -63,8 +76,15 @@ const ComponentWrapper = ({
   children?: ViewProps['children'];
 }) => {
   const navigate = () => {
+    let target = link;
+    if (
+      typeof window !== 'undefined' &&
+      window.top?.location.href.includes('hearth.prod.uw.systems/?path=')
+    ) {
+      target = addReactNativePrefix(link);
+    }
     if (window.top) {
-      window.top.location.href = link;
+      window.top.location.href = target;
     }
   };
   return (
@@ -86,6 +106,10 @@ const AllComponents: React.FC = () => {
   const handleOpenPress = useCallback(() => {
     bottomSheetRef.current?.expand();
   }, []);
+  const modalRef = useRef<BottomSheetModalMethods>(null);
+  const handleModalOpenPress = useCallback(() => {
+    modalRef.current?.present();
+  }, []);
   useEffect(() => {
     if (bottomSheetRef.current) {
       setTimeout(() => {
@@ -93,6 +117,13 @@ const AllComponents: React.FC = () => {
       }, 300);
     }
   }, [bottomSheetRef]);
+  useEffect(() => {
+    if (modalRef.current) {
+      setTimeout(() => {
+        modalRef.current?.present();
+      }, 400);
+    }
+  }, [modalRef]);
   const [switchEnabled, setSwitchEnabled] = React.useState(false);
   const toggleSwitch = () => setSwitchEnabled(!switchEnabled);
   const [colorMode] = useColorMode();
@@ -124,7 +155,7 @@ const AllComponents: React.FC = () => {
                 <Badge>This is a badge</Badge>
               </View>
               <View>
-                <Badge colorScheme="red">This is a red badge</Badge>
+                <Badge colorScheme="danger">This is a red badge</Badge>
               </View>
             </Center>
           </ComponentWrapper>
@@ -159,7 +190,7 @@ const AllComponents: React.FC = () => {
           </ComponentWrapper>
           <ComponentWrapper name="Button" link="/?path=/docs/components-button--docs">
             <Center flex={1}>
-              <Button colorScheme="yellow" variant="emphasis" onPress={() => null}>
+              <Button colorScheme="highlight" variant="emphasis" onPress={() => null}>
                 Press me
               </Button>
             </Center>
@@ -189,6 +220,22 @@ const AllComponents: React.FC = () => {
               </View>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Currency Input" link="/?path=/docs/forms-currency-input--docs">
+            <Center flex={1} padding="200">
+              <CurrencyInput />
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper
+            name="Description List"
+            link="/?path=/docs/components-description-list--docs"
+          >
+            <Center flex={1} padding="200">
+              <DescriptionList>
+                <DescriptionListItem heading="This is a" description="Description list" />
+                <DescriptionListItem heading="So is this" description="12-34-56" />
+              </DescriptionList>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Detail Text" link="/?path=/docs/typography-detail-text--docs">
             <Center flex={1}>
               <DetailText>This is some Detail Text</DetailText>
@@ -241,11 +288,51 @@ const AllComponents: React.FC = () => {
               <Heading>This is a Heading</Heading>
             </Center>
           </ComponentWrapper>
-          <ComponentWrapper name="Icon Button" link="/?path=/docs/components-iconbutton--docs">
+          <ComponentWrapper name="Icon Button" link="/?path=/docs/components-icon-button--docs">
             <Center flex={1}>
               <IconButton icon={ChevronRightMediumIcon} size="md" onPress={() => null} />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Icon Container"
+            link="/?path=/docs/components-icon-container--docs"
+          >
+            <Center flex={1}>
+              <Flex direction="row" space="sm">
+                <IconContainer
+                  icon={ElectricityMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="energy"
+                />
+                <IconContainer
+                  icon={BroadbandMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="broadband"
+                />
+                <IconContainer
+                  icon={MobileMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="mobile"
+                />
+                <IconContainer
+                  icon={InsuranceMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="insurance"
+                />
+                <IconContainer
+                  icon={CashbackCardMediumIcon}
+                  size="sm"
+                  variant="emphasis"
+                  color="cashback"
+                />
+              </Flex>
+            </Center>
+          </ComponentWrapper>
+
           <ComponentWrapper name="Icons" link="/?path=/docs/components-icons--docs">
             <Center flex={1}>
               <Flex direction="row" space="lg">
@@ -286,6 +373,21 @@ const AllComponents: React.FC = () => {
               </List>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Modal" link="/?path=/docs/components-modal--docs">
+            <Center flex={1}>
+              <Button onPress={handleModalOpenPress}>Open Modal</Button>
+              <BottomSheetModalProvider>
+                <Modal
+                  ref={modalRef}
+                  heading="This is a Modal"
+                  description="This is a modal description"
+                  primaryButtonText="Primary"
+                  secondaryButtonText="Close"
+                  index={0}
+                />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Ordered List"
             link="/?path=/docs/utility-components-ul-ol-lists--docs"
@@ -320,6 +422,14 @@ const AllComponents: React.FC = () => {
               </RadioCardGroup>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper
+            name="Section Header"
+            link="/?path=/docs/components-section-header--docs"
+          >
+            <Center flex={1} p="300">
+              <SectionHeader heading="Heading" helperText="Supporting text" linkText="More" />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Select" link="/?path=/docs/forms-select--docs">
             <Center flex={1}>
               <BottomSheetModalProvider>
@@ -358,7 +468,26 @@ const AllComponents: React.FC = () => {
               <Switch value={switchEnabled} onValueChange={toggleSwitch} />
             </Center>
           </ComponentWrapper>
-
+          <ComponentWrapper name="Tabs" link="/?path=/docs/components-tabs--docs">
+            <Center flex={1}>
+              <Tabs defaultValue="tab-1">
+                <TabsList>
+                  <Tab value="tab-1">Tab 1</Tab>
+                  <Tab value="tab-2">Tab 2</Tab>
+                  <Tab value="tab-3">Tab 3</Tab>
+                </TabsList>
+                <TabPanel value="tab-1">
+                  <BodyText>I'm the first tab's content</BodyText>
+                </TabPanel>
+                <TabPanel value="tab-2">
+                  <BodyText>I'm the second tab's content</BodyText>
+                </TabPanel>
+                <TabPanel value="tab-3">
+                  <BodyText>I'm the third tab's content</BodyText>
+                </TabPanel>
+              </Tabs>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Textarea" link="/?path=/docs/forms-textarea--docs">
             <Center flex={1}>
               <Textarea numberOfLines={3} placeholder="This is a textarea" />
@@ -404,9 +533,7 @@ const AllComponents: React.FC = () => {
 };
 
 const styles = StyleSheet.create(theme => ({
-  container: {
-    gap: theme.space['2'],
-  },
+  container: {},
   component: {
     borderColor: theme.color.warmWhite[300],
     borderWidth: theme.borderWidth['1'],
@@ -420,7 +547,6 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   componentWrap: {
-    padding: theme.space['4'],
     flexGrow: 1,
     flex: 1,
   },

package/docs/components/BadgeList.tsx

@@ -1,17 +1,17 @@
 import {
+  Badge,
+  BadgeText,
+  Box,
+  Flex,
   List,
   ListItem,
+  ListItemContent,
+  ListItemHelperText,
   ListItemIcon,
   ListItemLeadingContent,
-  ListItemHelperText,
   ListItemText,
   ListItemTrailingContent,
   ListItemTrailingIcon,
-  ListItemContent,
-  Badge,
-  BadgeText,
-  Flex,
-  Box,
 } from '../../src';
 
 import {
@@ -31,7 +31,7 @@ const BadgeList = () => {
         </ListItemLeadingContent>
         <ListItemContent>
           <ListItemText>Electricity</ListItemText>
-          <Badge colorScheme="blue">
+          <Badge colorScheme="info">
             <BadgeText>Text</BadgeText>
           </Badge>
           <ListItemHelperText>Last reading 23/03/24</ListItemHelperText>
@@ -49,7 +49,7 @@ const BadgeList = () => {
         <ListItemContent>
           <Flex direction="row" style={{ justifyContent: 'space-between' }}>
             <ListItemText>Gas</ListItemText>
-            <Badge colorScheme="green">
+            <Badge colorScheme="positive">
               <BadgeText>Smart meter</BadgeText>
             </Badge>
           </Flex>

package/docs/components/NextPrevPage.tsx

@@ -1,6 +1,7 @@
-import { View, StyleSheet } from 'react-native';
-import { Card, CardAction, Heading, Link } from '../../src';
 import { ChevronLeftSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { StyleSheet, View } from 'react-native';
+import { Card, CardAction, Heading, Link } from '../../src';
+import { addReactNativePrefix } from '../heplers';
 
 type NextPrevPageProps = {
   nextLink?: string;
@@ -16,8 +17,15 @@ const NextPrevPage: React.FC<NextPrevPageProps> = ({
   prevTitle,
 }) => {
   const openLink = (link: string) => {
+    let target = link;
+    if (
+      typeof window !== 'undefined' &&
+      window.top?.location.href.includes('hearth.prod.uw.systems/?path=')
+    ) {
+      target = addReactNativePrefix(link);
+    }
     if (window.top) {
-      window.top.location.href = link;
+      window.top.location.href = target;
     }
   };
   return (

package/docs/components/UsageWrap.tsx

@@ -8,10 +8,10 @@ const UsageWrap: FC<PropsWithChildren> = ({ children }) => {
       <Box
         mt="300"
         p="200"
-        bg={colorMode === 'dark' ? 'background' : 'white'}
+        bg="backgroundPrimary"
         borderRadius="md"
         borderWidth="1"
-        borderColor="grey1000"
+        borderColor="borderSubtle"
         width="100%"
         position="relative"
       >

package/docs/components/ViewFigmaButton.tsx

@@ -1,8 +1,8 @@
-import { Button, ButtonIcon, ButtonText, createIcon } from '../../src';
 import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { Button, ButtonIcon, ButtonText, createIcon } from '../../src';
 
 import { Platform } from 'react-native';
-import { Svg, Path } from 'react-native-svg';
+import { Path, Svg } from 'react-native-svg';
 
 interface Props {
   url: string;
@@ -20,7 +20,7 @@ const ViewFigmaButton: React.FC<Props> = ({ url }) => (
   <div className="sb-unstyled">
     <Button
       variant="ghost"
-      colorScheme="grey"
+      colorScheme="functional"
       size="sm"
       style={{
         zIndex: 1,

package/docs/heplers/addReactNativePrefix.ts

@@ -0,0 +1,8 @@
+const addReactNativePrefix = (url: string) => {
+  if (!url.startsWith('/?path=/docs/')) return url;
+  return url.replace(/(\/\?path=\/docs\/)([^/]+)/, (full, prefix, slug) => {
+    if (slug.startsWith('react-native_')) return full; // already prefixed
+    return `${prefix}react-native_${slug}`;
+  });
+};
+export default addReactNativePrefix;

package/docs/heplers/index.ts

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

package/docs/introduction.mdx

@@ -39,7 +39,7 @@ npm install @utilitywarehouse/hearth-react-native
 To install the peer dependencies, you can run the following command:
 
 ```console
-npm install react-native-unistyles react-native-edge-to-edge react-native-nitro-modules@0.26.4 react-native-svg react-native-reanimated react-native-gesture-handler
+npm install react-native-unistyles react-native-edge-to-edge react-native-nitro-modules@0.28.1 @gorhom/bottom-sheet react-native-svg react-native-reanimated react-native-worklets react-native-gesture-handler
 ```
 
 For more information on how to install and configure `react-native-svg`, `react-native-gesture-handler` and `react-native-reanimated`,
@@ -139,7 +139,7 @@ module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
   plugins: [
     // other plugins...
-    'react-native-reanimated/plugin',
+    'react-native-worklets/plugin',
     ['react-native-unistyles/plugin', unistylesPluginOptions],
   ],
 };

package/docs/llm-docs/unistyles-llms-full.txt

@@ -6395,7 +6395,7 @@ module.exports = function (api) {
         ['react-native-unistyles/plugin', {
             root: 'app'
         }],
-        ['react-native-reanimated/plugin']
+        ['react-native-worklets/plugin']
     ]
   };
 };