@utilitywarehouse/hearth-react-native 0.3.0 → 0.4.0

package/build/tokens/primitive.d.ts

@@ -81,6 +81,25 @@ declare const _default: {
         readonly '1100': 72;
         readonly '1200': 90;
     };
+    readonly motion: {
+        readonly duration: {
+            readonly '100': 130;
+            readonly '200': 160;
+            readonly '300': 190;
+            readonly '400': 220;
+            readonly '500': 250;
+            readonly '600': 300;
+            readonly '700': 350;
+            readonly '800': 400;
+            readonly '900': 450;
+            readonly '1000': 500;
+        };
+        readonly ease: {
+            readonly in: "cubic-bezier(0.42, 0, 1, 1)";
+            readonly inOut: "cubic-bezier(0, 0, 1, 1)";
+            readonly out: "cubic-bezier(0.19, 0.91, 0.38, 1)";
+        };
+    };
     readonly space: {
         readonly '0': 0;
         readonly '25': 2;

package/build/tokens/primitive.js

@@ -81,6 +81,25 @@ export default {
         '1100': 72,
         '1200': 90,
     },
+    motion: {
+        duration: {
+            '100': 130,
+            '200': 160,
+            '300': 190,
+            '400': 220,
+            '500': 250,
+            '600': 300,
+            '700': 350,
+            '800': 400,
+            '900': 450,
+            '1000': 500,
+        },
+        ease: {
+            in: 'cubic-bezier(0.42, 0, 1, 1)',
+            inOut: 'cubic-bezier(0, 0, 1, 1)',
+            out: 'cubic-bezier(0.19, 0.91, 0.38, 1)',
+        },
+    },
     space: {
         '0': 0,
         '25': 2,

package/build/tokens/semantic-dark.d.ts

@@ -3,7 +3,7 @@
  */
 declare const _default: {
     readonly background: {
-        readonly brand: "#996cda";
+        readonly brand: "#7a42c8";
         readonly primary: "#191917";
         readonly secondary: "#232323";
     };
@@ -79,7 +79,7 @@ declare const _default: {
     readonly interactive: {
         readonly affirmative: {
             readonly border: {
-                readonly strong: "#ebebeb";
+                readonly strong: "#101010";
                 readonly subtle: "#58ca93";
             };
             readonly foreground: {
@@ -115,7 +115,7 @@ declare const _default: {
         };
         readonly destructive: {
             readonly border: {
-                readonly strong: "#ebebeb";
+                readonly strong: "#101010";
                 readonly subtle: "#ff7964";
             };
             readonly foreground: {
@@ -163,7 +163,7 @@ declare const _default: {
         };
         readonly highlight: {
             readonly border: {
-                readonly strong: "#f7f7f7";
+                readonly strong: "#101010";
             };
             readonly foreground: {
                 readonly strong: "#101010";
@@ -246,7 +246,7 @@ declare const _default: {
     readonly text: {
         readonly affirmative: "#58ca93";
         readonly brand: "#af90de";
-        readonly inverted: "#191917";
+        readonly inverted: "#fcfbf2";
         readonly primary: "#ebebeb";
         readonly secondary: "#b2afae";
     };

package/build/tokens/semantic-dark.js

@@ -3,7 +3,7 @@
  */
 export default {
     background: {
-        brand: '#996cda',
+        brand: '#7a42c8',
         primary: '#191917',
         secondary: '#232323',
     },
@@ -79,7 +79,7 @@ export default {
     interactive: {
         affirmative: {
             border: {
-                strong: '#ebebeb',
+                strong: '#101010',
                 subtle: '#58ca93',
             },
             foreground: {
@@ -115,7 +115,7 @@ export default {
         },
         destructive: {
             border: {
-                strong: '#ebebeb',
+                strong: '#101010',
                 subtle: '#ff7964',
             },
             foreground: {
@@ -163,7 +163,7 @@ export default {
         },
         highlight: {
             border: {
-                strong: '#f7f7f7',
+                strong: '#101010',
             },
             foreground: {
                 strong: '#101010',
@@ -246,7 +246,7 @@ export default {
     text: {
         affirmative: '#58ca93',
         brand: '#af90de',
-        inverted: '#191917',
+        inverted: '#fcfbf2',
         primary: '#ebebeb',
         secondary: '#b2afae',
     },

package/build/tokens/semantic-light.d.ts

@@ -248,7 +248,7 @@ declare const _default: {
         readonly brand: "#7a42c8";
         readonly inverted: "#fcfbf2";
         readonly primary: "#101010";
-        readonly secondary: "#888888";
+        readonly secondary: "#5b5b5b";
     };
 };
 export default _default;

package/build/tokens/semantic-light.js

@@ -248,6 +248,6 @@ export default {
         brand: '#7a42c8',
         inverted: '#fcfbf2',
         primary: '#101010',
-        secondary: '#888888',
+        secondary: '#5b5b5b',
     },
 };

package/build/utils/index.d.ts

@@ -3,4 +3,5 @@ export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
+export { default as isEqual } from './isEqual';
 export * from './styleUtils';

package/build/utils/index.js

@@ -3,4 +3,5 @@ export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
+export { default as isEqual } from './isEqual';
 export * from './styleUtils';

package/build/utils/isEqual.d.ts

@@ -0,0 +1,2 @@
+declare const isEqual: (a: any, b: any) => boolean;
+export default isEqual;

package/build/utils/isEqual.js

@@ -0,0 +1,29 @@
+const isEqual = (a, b) => {
+    if (a === b)
+        return true;
+    if (typeof a !== typeof b)
+        return false;
+    if (typeof a !== 'object' || a === null || b === null)
+        return false;
+    if (Array.isArray(a) !== Array.isArray(b))
+        return false;
+    if (Array.isArray(a)) {
+        if (a.length !== b.length)
+            return false;
+        for (let i = 0; i < a.length; i++) {
+            if (!isEqual(a[i], b[i]))
+                return false;
+        }
+        return true;
+    }
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length)
+        return false;
+    for (const key of keysA) {
+        if (!keysB.includes(key) || !isEqual(a[key], b[key]))
+            return false;
+    }
+    return true;
+};
+export default isEqual;

package/chromatic.config.json

@@ -0,0 +1,6 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:68e3ad5c6e80b57678cad6c6",
+  "storybookBaseDir": "packages/react-native",
+  "zip": true
+}

package/docs/components/AllComponents.web.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import {
@@ -18,6 +18,7 @@ import {
   Badge,
   BodyText,
   BottomSheet,
+  BottomSheetModal,
   BottomSheetModalProvider,
   BottomSheetView,
   Box,
@@ -26,6 +27,9 @@ import {
   Center,
   Checkbox,
   CurrencyInput,
+  DatePicker,
+  DatePickerInput,
+  DateType,
   DescriptionList,
   DescriptionListItem,
   DetailText,
@@ -110,6 +114,11 @@ const AllComponents: React.FC = () => {
   const handleModalOpenPress = useCallback(() => {
     modalRef.current?.present();
   }, []);
+  const [selected, setSelected] = useState<DateType>();
+  const datePickerRef = useRef<BottomSheetModal>(null);
+  const handleDatePickerOpenPress = useCallback(() => {
+    datePickerRef.current?.present();
+  }, []);
   useEffect(() => {
     if (bottomSheetRef.current) {
       setTimeout(() => {
@@ -124,8 +133,16 @@ const AllComponents: React.FC = () => {
       }, 400);
     }
   }, [modalRef]);
+  useEffect(() => {
+    if (datePickerRef.current) {
+      setTimeout(() => {
+        datePickerRef.current?.present();
+      }, 500);
+    }
+  }, [datePickerRef]);
   const [switchEnabled, setSwitchEnabled] = React.useState(false);
   const toggleSwitch = () => setSwitchEnabled(!switchEnabled);
+
   const [colorMode] = useColorMode();
   const isDark = colorMode === 'dark';
   return (
@@ -225,6 +242,30 @@ const AllComponents: React.FC = () => {
               <CurrencyInput />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Date Picker" link="/?path=/docs/components-date-picker--docs">
+            <Center flex={1}>
+              <Button onPress={handleDatePickerOpenPress}>Open Date Picker</Button>
+              <BottomSheetModalProvider>
+                <DatePicker
+                  ref={datePickerRef}
+                  mode="single"
+                  date={selected}
+                  onChange={({ date }) => setSelected(date)}
+                  onCancel={() => setSelected(undefined)}
+                />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper
+            name="Date Picker Input"
+            link="/?path=/docs/forms-date-picker-input--docs"
+          >
+            <Center flex={1} padding="200">
+              <BottomSheetModalProvider>
+                <DatePickerInput placeholder="DD/MM/YYYY" />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Description List"
             link="/?path=/docs/components-description-list--docs"
@@ -241,6 +282,7 @@ const AllComponents: React.FC = () => {
               <DetailText>This is some Detail Text</DetailText>
             </Center>
           </ComponentWrapper>
+
           <ComponentWrapper name="Divider" link="/?path=/docs/components-divider--docs">
             <Center flex={1} p="300">
               <BodyText>This text is divided</BodyText>

package/docs/components/ViewWrap.tsx

@@ -0,0 +1,32 @@
+import { Dimensions, Platform, View, ViewProps } from 'react-native';
+import { UnistylesRuntime } from '../../src/core';
+
+const ViewWrap = ({ children }: { children: ViewProps['children'] }) => (
+  <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 default ViewWrap;

package/docs/components/index.ts

@@ -1,11 +1,11 @@
-export { default as VariantTitle } from './VariantTitle';
-export { default as UsageWrap } from './UsageWrap';
+export { default as AdvancedInputExample } from './AdvancedInputExample';
 export { default as BackToTopButton } from './BackToTopButton';
-export { default as ViewFigmaButton } from './ViewFigmaButton';
-export { default as DocComponentWrap } from './DocComponentWrap';
 export { default as BadgeList } from './BadgeList';
-export { default as AdvancedInputExample } from './AdvancedInputExample';
+export { default as DocComponentWrap } from './DocComponentWrap';
+export { default as NextPrevPage } from './NextPrevPage';
 export { default as SwitchExample } from './SwitchExample';
 export { default as SwitchList } from './SwitchList';
-export { default as AdvancedRadioExample } from './AdvancedRadioExample';
-export { default as NextPrevPage } from './NextPrevPage';
+export { default as UsageWrap } from './UsageWrap';
+export { default as VariantTitle } from './VariantTitle';
+export { default as ViewFigmaButton } from './ViewFigmaButton';
+export { default as ViewWrap } from './ViewWrap';

package/docs/getting-started.mdx

@@ -9,12 +9,12 @@ import { BackToTopButton, NextPrevPage } from './components';
 You can just start using the components from the `@utilitywarehouse/hearth-react-native` package.
 
 ```tsx
-import { Box, Alert, Text } from '@utilitywarehouse/hearth-react-native';
+import { Box, Alert, BodyText } from '@utilitywarehouse/hearth-react-native';
 
 const App: React.FC = () => (
-  <Box>
+  <Box p="200">
     <Alert variant="info" text="Welcome to Hearth React Native!" />
-    <Text>Start building your app with Hearth React Native components.</Text>
+    <BodyText>Start building your app with Hearth React Native components.</BodyText>
   </Box>
 );
 ```
@@ -25,15 +25,15 @@ By default the light colour mode is enabled. If you want to enable dark mode, yo
 use the `useColorMode` hook to toggle between light and dark modes.
 
 ```tsx
-import { useColorMode, Box, Alert, Text, Button } from '@utilitywarehouse/hearth-react-native';
+import { useColorMode, Box, Alert, BodyText, Button } from '@utilitywarehouse/hearth-react-native';
 
 const App: React.FC = () => {
   const [colorMode, setColorMode] = useColorMode();
 
   return (
-    <Box>
+    <Box p="200">
       <Alert variant="info" text="Welcome to Hearth React Native!" />
-      <Text>Start building your app with Hearth React Native components.</Text>
+      <BodyText>Start building your app with Hearth React Native components.</BodyText>
       <Button onPress={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}>
         Toggle Color Mode
       </Button>

package/docs/introduction.mdx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
+import pig from '../../../shared/storybook/assets/images/react-native-pig.png';
 import { version } from '../package.json';
 import { Box } from '../src';
-import pig from './assets/react-native-pig.png';
 import { BackToTopButton, NextPrevPage } from './components';
 
 <Meta title="Introduction" />
@@ -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.28.1 @gorhom/bottom-sheet react-native-svg react-native-reanimated react-native-worklets 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 @utilitywarehouse/hearth-react-native-icons
 ```
 
 For more information on how to install and configure `react-native-svg`, `react-native-gesture-handler` and `react-native-reanimated`,
@@ -63,7 +63,7 @@ The `@utilitywarehouse/hearth-react-native` library uses a few packages under th
 as well as fonts and icons. Feel free to additionally install these packages if you need to use them in your project.
 
 ```console
-npm install @utilitywarehouse/hearth-tokens @utilitywarehouse/hearth-react-native-icons
+npm install @utilitywarehouse/hearth-tokens
 ```
 
 You will need to include the **Comic Hams**, **DM Mono** and **DM Sans** fonts.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -8,7 +8,6 @@
   "type": "module",
   "sideEffects": false,
   "dependencies": {
-    "@expo/html-elements": "latest",
     "@gluestack-ui/accordion": "1.0.7",
     "@gluestack-ui/alert": "0.1.15",
     "@gluestack-ui/button": "1.0.7",
@@ -21,22 +20,23 @@
     "@gluestack-ui/spinner": "0.1.14",
     "@gluestack-ui/switch": "0.1.22",
     "@gluestack-ui/textarea": "0.1.23",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.1.0"
+    "dayjs": "^1.11.13"
   },
   "devDependencies": {
     "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
     "@chromatic-com/storybook": "^4.1.1",
     "@figma/code-connect": "^1.3.3",
     "@gorhom/bottom-sheet": "5.1.6",
-    "@storybook/addon-a11y": "^9.1.3",
-    "@storybook/addon-docs": "^9.1.3",
-    "@storybook/addon-vitest": "^9.1.3",
-    "@storybook/react-native-web-vite": "^9.1.3",
+    "@storybook/addon-a11y": "^9.1.6",
+    "@storybook/addon-docs": "^9.1.6",
+    "@storybook/addon-vitest": "^9.1.6",
+    "@storybook/react-native-web-vite": "^9.1.6",
     "@types/prismjs": "^1.26.5",
     "@types/react": "^19.1.10",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
-    "eslint-plugin-storybook": "9.1.3",
+    "chromatic": "^13.3.0",
+    "eslint-plugin-storybook": "9.1.6",
     "playwright": "^1.53.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
@@ -49,16 +49,18 @@
     "react-native-unistyles": "3.0.10",
     "react-native-web": "^0.20.0",
     "remark-gfm": "^4.0.1",
-    "storybook": "^9.1.3",
+    "storybook": "^9.1.6",
     "typescript": "^5.7.3",
     "vite": "^7.1.3",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.3",
-    "@utilitywarehouse/hearth-react-icons": "^0.1.1",
-    "@utilitywarehouse/hearth-tokens": "^0.0.8"
+    "@utilitywarehouse/hearth-react-icons": "^0.5.0",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.5.0",
+    "@utilitywarehouse/hearth-tokens": "^0.1.0"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^5.0.0",
+    "@utilitywarehouse/hearth-react-native-icons": "0.4.0",
     "react": ">=17 || ^18.0.0 || ^19.0.0",
     "react-native": ">=0.77",
     "react-native-gesture-handler": "^2.22.0",
@@ -79,6 +81,8 @@
     "figma:publish": "figma connect publish",
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "storybook dev -p 6006",
-    "build:storybook": "storybook build"
+    "build:storybook": "storybook build",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_cce0fb1ebd95d2a --build-script-name build:storybook"
   }
 }

package/src/components/Alert/AlertCloseButton.tsx

@@ -3,22 +3,50 @@ import { ComponentType } from 'react';
 import { ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton, UnstyledIconButtonProps } from '../UnstyledIconButton';
+import { useAlertContext } from './Alert.context';
 
 const AlertCloseButton = ({
   style,
   icon = CloseSmallIcon,
   ...props
-}: Omit<UnstyledIconButtonProps, 'icon'> & { icon?: ComponentType }) => (
-  <UnstyledIconButton {...props} size="sm" style={[styles.icon, style as ViewStyle]} icon={icon} />
-);
+}: Omit<UnstyledIconButtonProps, 'icon'> & { icon?: ComponentType }) => {
+  const { colorScheme } = useAlertContext();
+  styles.useVariants({ colorScheme });
+  return (
+    <UnstyledIconButton
+      {...props}
+      size="sm"
+      style={[styles.button, style as ViewStyle]}
+      icon={icon}
+      iconStyle={styles.icon as ViewStyle}
+    />
+  );
+};
 
 const styles = StyleSheet.create(theme => ({
-  icon: {
+  button: {
     alignSelf: 'flex-start',
-    color: theme.color.icon.primary,
     minWidth: 20,
     minHeight: 20,
   },
+  icon: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
+  },
 }));
 
 AlertCloseButton.displayName = 'AlertCloseButton';

package/src/components/Alert/AlertIcon.tsx

@@ -19,6 +19,7 @@ const AlertIcon = (props: IconProps) => {
     }
     return InfoMediumIcon;
   })();
+  styles.useVariants({ colorScheme });
   return <Icon {...props} as={props.as ?? asProp} style={styles.icon} />;
 };
 
@@ -31,7 +32,22 @@ const styles = StyleSheet.create(theme => ({
     minWidth: 24,
     minHeight: 24,
     alignSelf: 'flex-start',
-    color: theme.color.icon.primary,
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
   },
 }));
 

package/src/components/Alert/AlertIconButton.tsx

@@ -1,15 +1,48 @@
+import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
 import { ComponentType } from 'react';
 import { ViewStyle } from 'react-native';
-import { ChevronRightSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButton, UnstyledIconButtonProps } from '../UnstyledIconButton';
+import { useAlertContext } from './Alert.context';
 
 const AlertIconButton = ({
   style,
   icon = ChevronRightSmallIcon,
   ...props
-}: Omit<UnstyledIconButtonProps, 'icon'> & { icon?: ComponentType }) => (
-  <UnstyledIconButton {...props} size="sm" style={style as ViewStyle} icon={icon} />
-);
+}: Omit<UnstyledIconButtonProps, 'icon'> & { icon?: ComponentType }) => {
+  const { colorScheme } = useAlertContext();
+  styles.useVariants({ colorScheme });
+  return (
+    <UnstyledIconButton
+      {...props}
+      size="sm"
+      style={style as ViewStyle}
+      icon={icon}
+      iconStyle={styles.icon as ViewStyle}
+    />
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  icon: {
+    variants: {
+      colorScheme: {
+        info: {
+          color: theme.color.feedback.info.foreground.default,
+        },
+        positive: {
+          color: theme.color.feedback.positive.foreground.default,
+        },
+        danger: {
+          color: theme.color.feedback.danger.foreground.default,
+        },
+        warning: {
+          color: theme.color.feedback.warning.foreground.default,
+        },
+      },
+    },
+  },
+}));
 
 AlertIconButton.displayName = 'AlertIconButton';