@utilitywarehouse/hearth-react-native 0.3.1 → 0.4.1

package/src/components/DatePickerInput/DatePickerInput.tsx

@@ -0,0 +1,265 @@
+import type { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+import { CalendarSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Keyboard, Platform, TextInputFocusEvent } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { DatePicker } from '../DatePicker';
+import type { DateType } from '../DatePicker/DatePicker.props';
+import { useFormFieldContext } from '../FormField';
+import { Input, InputField, InputSlot } from '../Input';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import type DatePickerInputProps from './DatePickerInput.props';
+import DatePickerInputDoneButton from './DatePickerInputDoneButton';
+
+dayjs.extend(customParseFormat);
+
+const DEFAULT_FORMAT = 'DD/MM/YYYY';
+
+const maskDefaultFormat = (value: string) => {
+  const digitsOnly = value.replace(/\D/g, '').slice(0, 8);
+  const day = digitsOnly.slice(0, 2);
+  const month = digitsOnly.slice(2, 4);
+  const year = digitsOnly.slice(4, 8);
+
+  return [day, month, year].filter(Boolean).join('/');
+};
+
+const DatePickerInput = ({
+  validationStatus = 'initial',
+  disabled,
+  focused,
+  readonly,
+  placeholder,
+  inBottomSheet = false,
+  format = DEFAULT_FORMAT,
+  openButtonLabel = 'Open date picker',
+  autoCloseOnSelect = true,
+  onChange,
+  onChangeText,
+  onBlur,
+  onFocus,
+  value,
+  datePickerProps,
+  onClear,
+  ...rest
+}: DatePickerInputProps) => {
+  const formFieldContext = useFormFieldContext();
+  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+  const isDisabled = formFieldContext?.disabled ?? disabled;
+  const isReadonly = formFieldContext?.readonly ?? readonly;
+
+  const pickerRef = useRef<BottomSheetModalMethods | null>(null);
+  const accessoryViewID = useMemo(() => {
+    if (Platform.OS !== 'ios') return undefined;
+    return `datepicker-input-${Math.random().toString(36).slice(2)}`;
+  }, []);
+
+  const formatDate = useCallback(
+    (dateValue?: DateType) => {
+      if (!dateValue) return '';
+      const parsed = dayjs(dateValue);
+      return parsed.isValid() ? parsed.format(format) : '';
+    },
+    [format]
+  );
+
+  const isDefaultFormat = format === DEFAULT_FORMAT;
+
+  const [inputValue, setInputValue] = useState(() => formatDate(value));
+
+  useEffect(() => {
+    setInputValue(formatDate(value));
+  }, [value, formatDate]);
+
+  const handleTextChange = useCallback(
+    (text: string) => {
+      const nextValue = isDefaultFormat ? maskDefaultFormat(text) : text;
+
+      setInputValue(nextValue);
+      onChangeText?.(nextValue);
+
+      if (!nextValue) {
+        onChange?.({ date: undefined });
+        return;
+      }
+
+      const parsed = dayjs(nextValue, format, true);
+
+      if (parsed.isValid()) {
+        onChange?.({ date: parsed.toDate() });
+      } else {
+        onChange?.({ date: undefined });
+      }
+    },
+    [format, isDefaultFormat, onChange, onChangeText]
+  );
+
+  const handleClear = useCallback(() => {
+    setInputValue('');
+    onChange?.({ date: undefined });
+    onClear?.();
+  }, [onChange, onClear]);
+
+  const closeKeyboard = useCallback(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  const openPicker = useCallback(() => {
+    if (isDisabled || isReadonly) return;
+    closeKeyboard();
+    pickerRef.current?.present();
+  }, [closeKeyboard, isDisabled, isReadonly]);
+
+  const selectedDate = useMemo(() => {
+    if (value) {
+      return value;
+    }
+
+    const parsed = dayjs(inputValue, format, true);
+    return parsed.isValid() ? parsed.toDate() : undefined;
+  }, [value, inputValue, format]);
+
+  const handlePickerChange = useCallback(
+    ({ date }: { date: DateType }) => {
+      if (!date) {
+        handleClear();
+        return;
+      }
+
+      const formatted = formatDate(date);
+      setInputValue(formatted);
+      onChange?.({ date });
+
+      if (autoCloseOnSelect) {
+        pickerRef.current?.close?.();
+      }
+    },
+    [autoCloseOnSelect, formatDate, handleClear, onChange]
+  );
+
+  const handleBlur = useCallback(
+    (event: TextInputFocusEvent) => {
+      onBlur?.(event);
+    },
+    [onBlur]
+  );
+
+  const handleFocus = useCallback(
+    (event: TextInputFocusEvent) => {
+      onFocus?.(event);
+    },
+    [onFocus]
+  );
+
+  const { onCancel: pickerOnCancel, ...restDatePickerProps } = datePickerProps ?? {};
+  const {
+    style: inputStyle,
+    keyboardType: keyboardTypeProp,
+    inputMode: inputModeProp,
+    accessibilityHint: accessibilityHintProp,
+    accessibilityLabel: accessibilityLabelProp,
+    accessible: accessibleProp,
+    accessibilityRole: accessibilityRoleProp,
+    importantForAccessibility: importantForAccessibilityProp,
+    ...textInputProps
+  } = rest;
+
+  const resolvedKeyboardType = keyboardTypeProp ?? (isDefaultFormat ? 'number-pad' : undefined);
+  const resolvedInputMode = inputModeProp ?? (isDefaultFormat ? 'numeric' : undefined);
+  const resolvedAccessibilityHint = accessibilityHintProp ?? `Enter the date in ${format} format`;
+  const resolvedAccessibilityLabel = accessibilityLabelProp ?? 'Date input';
+  const resolvedAccessible = accessibleProp ?? true;
+  const resolvedImportantForAccessibility = importantForAccessibilityProp ?? 'yes';
+
+  const handleCancel = useCallback(() => {
+    pickerOnCancel?.();
+    pickerRef.current?.close?.();
+  }, [pickerOnCancel]);
+
+  const placeholderValue = placeholder ?? format;
+
+  return (
+    <>
+      <Input
+        validationStatus={validationStatusFromContext}
+        disabled={isDisabled}
+        readonly={isReadonly}
+        focused={focused}
+        style={styles.wrap}
+        accessible={false}
+      >
+        <InputField
+          editable={!isReadonly && !isDisabled}
+          value={inputValue}
+          placeholder={placeholderValue}
+          onChangeText={handleTextChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+          inBottomSheet={inBottomSheet}
+          keyboardType={resolvedKeyboardType}
+          inputMode={resolvedInputMode}
+          accessibilityHint={resolvedAccessibilityHint}
+          aria-label="Date input"
+          accessibilityLabel={resolvedAccessibilityLabel}
+          accessible={resolvedAccessible}
+          accessibilityState={{
+            disabled: isDisabled || isReadonly,
+          }}
+          importantForAccessibility={resolvedImportantForAccessibility}
+          inputAccessoryViewID={Platform.OS === 'ios' ? accessoryViewID : undefined}
+          {...textInputProps}
+          style={[styles.input, inputStyle]}
+        />
+        {!!inputValue && onClear && !isReadonly && !isDisabled && (
+          <InputSlot accessibilityElementsHidden={false}>
+            <UnstyledIconButton
+              accessibilityLabel="Clear date"
+              accessibilityHint="Removes the current date"
+              icon={CloseSmallIcon}
+              onPress={handleClear}
+            />
+          </InputSlot>
+        )}
+        <InputSlot accessibilityElementsHidden={false}>
+          <UnstyledIconButton
+            accessibilityLabel={openButtonLabel}
+            accessibilityHint="Opens the date picker calendar"
+            icon={CalendarSmallIcon}
+            onPress={openPicker}
+            disabled={isDisabled || isReadonly}
+          />
+        </InputSlot>
+      </Input>
+      <DatePicker
+        ref={pickerRef}
+        mode="single"
+        date={selectedDate}
+        onChange={handlePickerChange}
+        onCancel={handleCancel}
+        {...restDatePickerProps}
+      />
+      {Platform.OS === 'ios' && accessoryViewID && (
+        <DatePickerInputDoneButton
+          accessoryViewID={accessoryViewID}
+          closeKeyboard={closeKeyboard}
+        />
+      )}
+    </>
+  );
+};
+
+DatePickerInput.displayName = 'DatePickerInput';
+
+const styles = StyleSheet.create(theme => ({
+  wrap: {
+    gap: theme.components.input.date.gap,
+  },
+  input: {
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+}));
+
+export default DatePickerInput;

package/src/components/DatePickerInput/DatePickerInputDoneButton.tsx

@@ -0,0 +1,42 @@
+import { InputAccessoryView, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { Button } from '../Button';
+
+const DatePickerInputDoneButton = ({
+  accessoryViewID,
+  closeKeyboard,
+}: {
+  accessoryViewID: string;
+  closeKeyboard: () => void;
+}) => {
+  return (
+    <InputAccessoryView nativeID={accessoryViewID}>
+      <View style={styles.accessory}>
+        <Button
+          accessibilityRole="button"
+          accessibilityLabel="Done"
+          onPress={closeKeyboard}
+          variant="ghost"
+          colorScheme="functional"
+        >
+          Done
+        </Button>
+      </View>
+    </InputAccessoryView>
+  );
+};
+
+const styles = StyleSheet.create(theme => ({
+  accessory: {
+    paddingHorizontal: 16,
+    paddingVertical: 2,
+    alignItems: 'flex-end',
+    backgroundColor: theme.color.surface.neutral.strong,
+    borderTopWidth: theme.borderWidth[1],
+    borderTopColor: theme.color.border.subtle,
+  },
+}));
+
+DatePickerInputDoneButton.DisplayName = 'DatePickerInputDoneButton';
+
+export default DatePickerInputDoneButton;

package/src/components/DatePickerInput/DatePickerInputDoneButton.web.tsx

@@ -0,0 +1,7 @@
+const DatePickerInputDoneButton = () => {
+  return null;
+};
+
+DatePickerInputDoneButton.DisplayName = 'DatePickerInputDoneButton';
+
+export default DatePickerInputDoneButton;

package/src/components/DatePickerInput/index.ts

@@ -0,0 +1,2 @@
+export { default as DatePickerInput } from './DatePickerInput';
+export type { default as DatePickerInputProps } from './DatePickerInput.props';

package/src/components/Icon/Icon.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-import { ComponentType } from 'react';
 import { Icon } from '.';
 import { ColorValue } from '../../types';
 import { coloursAsArray } from '../../utils';
@@ -25,7 +24,8 @@ const meta = {
     },
   },
   args: {
-    as: Object.keys(Icons)[0] as ComponentType,
+    // @ts-expect-error - This is a playground
+    as: Object.keys(Icons)[0],
     color: 'grey1000' as ColorValue,
   },
 } satisfies Meta<typeof Icon>;
@@ -37,7 +37,8 @@ type Story = StoryObj<typeof meta>;
 export const Playground: Story = {
   // @ts-expect-error - This is a playground
   render: ({ as: icon, color }) => {
+    // @ts-expect-error - This is a playground
     const as = icon === 'none' ? undefined : Icons[icon];
-    return <Icon as={as} color={colors[color]} />;
+    return <Icon as={as} color={color} />;
   },
 };

package/src/components/Input/InputField.tsx

@@ -6,8 +6,6 @@ import { useInputContext } from './Input.context';
 
 const InputField = ({
   style,
-  onFocus,
-  onBlur,
   inBottomSheet = false,
   ...props
 }: TextInputProps & { inBottomSheet?: boolean }) => {

package/src/components/Input/InputSlot.tsx

@@ -1,9 +1,20 @@
-import { StyleSheet } from 'react-native-unistyles';
 import { View, ViewProps } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 
-const InputSlot = ({ children, style, ...props }: ViewProps) => {
+const InputSlot = ({
+  children,
+  style,
+  accessible,
+  importantForAccessibility,
+  ...props
+}: ViewProps) => {
   return (
-    <View {...props} style={[styles.container, style]}>
+    <View
+      {...props}
+      accessible={accessible ?? false}
+      importantForAccessibility={importantForAccessibility ?? 'auto'}
+      style={[styles.container, style]}
+    >
       {children}
     </View>
   );

package/src/components/Modal/Modal.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { useRef } from 'react';
-import { Dimensions, ImageSourcePropType, Platform, View, ViewProps } from 'react-native';
-import { UnistylesRuntime } from 'react-native-unistyles';
+import { ImageSourcePropType, Platform, View } from 'react-native';
 import { Modal } from '.';
 import pigs from '../../../docs/assets/pigs.png';
+import { ViewWrap } from '../../../docs/components';
 import { BodyText } from '../BodyText';
 import { BottomSheetModal } from '../BottomSheet';
 import { Box } from '../Box';
@@ -61,34 +61,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-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 const Playground: Story = {
   args: {
     children: [],

package/src/components/UnstyledIconButton/UnstyledIconButton.tsx

@@ -30,17 +30,29 @@ const UnstyledIconButton = ({
   ...props
 }: UnstyledIconButtonProps) => {
   const { disabled: groupDisabled, loading: groupLoading } = useButtonGroupContext();
-  const { loading } = props;
+  const {
+    loading,
+    accessibilityRole = 'button',
+    accessible = true,
+    focusable = true,
+    importantForAccessibility = 'yes',
+    ...restProps
+  } = props;
+
   const isLoading = loading ?? groupLoading;
   const buttonDisabled = isLoading || (disabled ?? groupDisabled);
 
   return (
     <UnstyledIconButtonComponent
-      {...props}
+      {...restProps}
       size={size}
       inverted={inverted}
       isDisabled={buttonDisabled}
       isPressed={pressed}
+      accessibilityRole={accessibilityRole}
+      accessible={accessible}
+      focusable={focusable}
+      importantForAccessibility={importantForAccessibility}
       icon={icon}
     >
       {loading ? (

package/src/components/UnstyledIconButton/UnstyledIconButtonRoot.tsx

@@ -1,8 +1,8 @@
-import React, { useMemo } from 'react';
-import type { UnstyledIconButtonProps } from './UnstyledIconButton.props';
+import { useMemo } from 'react';
 import { Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
 import { UnstyledIconButtonContext } from './UnstyledIconButton.context';
+import type { UnstyledIconButtonProps } from './UnstyledIconButton.props';
 
 const UnstyledIconButtonRoot = ({
   size,
@@ -18,7 +18,11 @@ const UnstyledIconButtonRoot = ({
   );
   return (
     <UnstyledIconButtonContext.Provider value={value}>
-      <Pressable {...props} style={[styles.container, props.style as ViewStyle]} />
+      <Pressable
+        {...props}
+        accessibilityState={{ disabled: !!disabled, ...props.accessibilityState }}
+        style={[styles.container, props.style as ViewStyle]}
+      />
     </UnstyledIconButtonContext.Provider>
   );
 };

package/src/components/index.ts

@@ -10,6 +10,8 @@ export * from './Card';
 export * from './Center';
 export * from './Checkbox';
 export * from './CurrencyInput';
+export * from './DatePicker';
+export * from './DatePickerInput';
 export * from './DescriptionList';
 export * from './DetailText';
 export * from './Divider';

package/src/core/themes.ts

@@ -1,4 +1,5 @@
 import { DimensionValue, Platform } from 'react-native';
+import { colors, colorsCommon, colorsDark } from '../legacyTokens';
 import {
   borderRadius,
   borderWidth,
@@ -280,6 +281,15 @@ export const lightTheme = {
   colorMode: 'light',
   isLight: true,
   isDark: false,
+  /**
+   * @deprecated This will be removed in the next major version. This is kept for backward compatibility
+   */
+  colors: {
+    ...colors,
+    ...colorsCommon,
+    white: '#ffffff',
+    black: '#000000',
+  },
   color: {
     ...restOfColors,
     ...light,
@@ -305,10 +315,31 @@ export const darkTheme = {
   colorMode: 'dark',
   isLight: false,
   isDark: true,
+  /**
+   * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+   */
+  colors: {
+    ...colorsDark,
+    ...colorsCommon,
+    /**
+     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+     */
+    white: '#ffffff',
+    /**
+     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+     */
+    black: '#000000',
+  },
   color: {
     ...restOfColors,
     ...dark,
+    /**
+     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+     */
     white: '#ffffff',
+    /**
+     * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+     */
     black: '#000000',
   },
   components: components.dark,

package/src/hooks/index.ts

@@ -1,6 +1,7 @@
-export { default as useColorMode } from './useColorMode';
 export { default as useBreakpointValue } from './useBreakpointValue';
-export { default as useTheme } from './useTheme';
+export { default as useColorMode } from './useColorMode';
 export { default as useMedia } from './useMedia';
-export { default as useToken } from './useToken';
+export { usePrevious } from './usePrevious';
 export { useStyleProps } from './useStyleProps';
+export { default as useTheme } from './useTheme';
+export { default as useToken } from './useToken';

package/src/hooks/usePrevious.ts

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from 'react';
+
+export const usePrevious = (value: any) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};

package/src/hooks/useTheme.ts

@@ -1,8 +1,9 @@
-import { UnistylesRuntime } from 'react-native-unistyles';
+import { useUnistyles } from 'react-native-unistyles';
+import { AppThemes } from '../types';
 
 const useTheme = () => {
-  const theme = UnistylesRuntime.getTheme();
-  return theme;
+  const { theme } = useUnistyles();
+  return theme as AppThemes['light'] | AppThemes['dark'];
 };
 
 export default useTheme;

package/src/legacyTokens/common/brand.ts

@@ -0,0 +1,18 @@
+// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
+
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const brandMidnight = '#1e0a46';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const brandWhite = '#ffffff';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const brandPink = '#f495f9';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const brandPrimaryPurple = '#550091';

package/src/legacyTokens/common/index.ts

@@ -0,0 +1,10 @@
+// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
+
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export * from './brand';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export * from './service';

package/src/legacyTokens/common/service.ts

@@ -0,0 +1,22 @@
+// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
+
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const serviceGas = '#75A7FD';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const serviceElectricity = '#62DD99';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const serviceInsurance = '#F25192';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const serviceMobile = '#FFD76F';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const serviceLandline = '#A66DE8';

package/src/legacyTokens/dark/apple.ts

@@ -0,0 +1,30 @@
+// HEY, DON'T EDIT THIS FILE DIRECTLY, IT'S BEEN MAGICALLY GENERATED.
+
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple100 = '#03361b';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple200 = '#087a3c';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple300 = '#10b259';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple600 = '#62dd99';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple700 = '#96e6b7';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple800 = '#c1f0d3';
+/**
+ * @deprecated This will be removed in the next major version. This is kept for backward compatibility.
+ */
+export const apple950 = '#e5f9ed';