@utilitywarehouse/hearth-react-native 0.3.1 → 0.4.0

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/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/tokens/components/dark/date-picker.ts

@@ -21,6 +21,7 @@ export default {
     item: {
       borderRadius: 8,
       minWidth: 32,
+      rangeBackground: '#191919',
       roundelBackgroundColorInverted: '#fcfbf2',
       roundelHeight: 6,
       roundelWidth: 6,

package/src/tokens/components/dark/illustrations.ts

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  mode: 'dark',
+} as const;

package/src/tokens/components/dark/index.ts

@@ -22,6 +22,7 @@ export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as illustrations } from './illustrations';
 export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';

package/src/tokens/components/dark/segmented-control.ts

@@ -3,10 +3,10 @@
  */
 
 export default {
-  borderRadius: 6,
+  borderRadius: 9999,
   gap: 6,
   group: {
-    borderRadius: 8,
+    borderRadius: 9999,
     borderWidth: 1,
     gap: 4,
     height: 48,

package/src/tokens/components/dark/table.ts

@@ -14,6 +14,9 @@ export default {
   headerCell: {
     borderWidth: 2,
     gap: 8,
+    neutral: {
+      backgroundColor: '#30302c',
+    },
     paddingHorizontal: 12,
     paddingVertical: 16,
   },

package/src/tokens/components/light/date-picker.ts

@@ -21,6 +21,7 @@ export default {
     item: {
       borderRadius: 8,
       minWidth: 32,
+      rangeBackground: '#f7f7f7',
       roundelBackgroundColorInverted: '#fcfbf2',
       roundelHeight: 6,
       roundelWidth: 6,

package/src/tokens/components/light/illustrations.ts

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export default {
+  mode: 'light',
+} as const;

package/src/tokens/components/light/index.ts

@@ -22,6 +22,7 @@ export { default as expandableCard } from './expandable-card';
 export { default as formField } from './form-field';
 export { default as iconButton } from './icon-button';
 export { default as iconContainer } from './icon-container';
+export { default as illustrations } from './illustrations';
 export { default as indicatorIconButton } from './indicator-icon-button';
 export { default as inlineLink } from './inline-link';
 export { default as input } from './input';

package/src/tokens/components/light/segmented-control.ts

@@ -3,10 +3,10 @@
  */
 
 export default {
-  borderRadius: 6,
+  borderRadius: 9999,
   gap: 6,
   group: {
-    borderRadius: 8,
+    borderRadius: 9999,
     borderWidth: 1,
     gap: 4,
     height: 48,

package/src/tokens/components/light/table.ts

@@ -14,6 +14,9 @@ export default {
   headerCell: {
     borderWidth: 2,
     gap: 8,
+    neutral: {
+      backgroundColor: '#f1efe4',
+    },
     paddingHorizontal: 12,
     paddingVertical: 16,
   },

package/src/utils/index.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/src/utils/isEqual.ts

@@ -0,0 +1,30 @@
+const isEqual = (a: any, b: any): boolean => {
+  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;