@utilitywarehouse/hearth-react-native 0.30.4-testid-fix-2 → 0.31.0

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { Textarea } from '.';
 
 const meta = {
@@ -56,6 +56,16 @@ const meta = {
       description: 'Focus the Textarea component',
       defaultValue: false,
     },
+    required: {
+      control: 'boolean',
+      description: 'Whether the Textarea component is required',
+      defaultValue: true,
+    },
+    resizable: {
+      control: 'boolean',
+      description: 'Enables a drag handle to resize the Textarea vertically',
+      defaultValue: false,
+    },
   },
   args: {
     placeholder: 'Textarea placeholder',
@@ -63,6 +73,7 @@ const meta = {
     disabled: false,
     readonly: false,
     focused: false,
+    resizable: false,
   },
 } satisfies Meta<typeof Textarea>;
 
@@ -70,3 +81,12 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {};
+
+export const Resizable: Story = {
+  args: {
+    label: 'Notes',
+    helperText: 'Drag the bottom-right handle to resize',
+    placeholder: 'Add more detail here...',
+    resizable: true,
+  },
+};

package/src/components/Textarea/Textarea.tsx

@@ -1,7 +1,19 @@
 import { createTextarea } from '@gluestack-ui/textarea';
 import type TextareaProps from './Textarea.props';
 
-import { useEffect } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
+import {
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { Path, Svg } from 'react-native-svg';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
 import { FormField, useFormFieldContext } from '../FormField';
 import TextareaFieldComponent from './TextareaField';
 import TextareaRoot from './TextareaRoot';
@@ -13,9 +25,14 @@ export const TextareaComponent = createTextarea({
 
 export const TextareaField = TextareaComponent.Input;
 
+const DEFAULT_TEXTAREA_HEIGHT = 96;
+const RESIZE_HANDLE_TOUCH_SIZE = 28;
+const RESIZE_HANDLE_ICON_SIZE = 9;
+
 const Textarea = ({
   validationStatus = 'initial',
   children,
+  resizable = false,
   disabled,
   focused,
   readonly,
@@ -26,9 +43,11 @@ const Textarea = ({
   invalidText,
   required,
   helperIcon,
+  onLayout,
   ...props
 }: TextareaProps) => {
   const formFieldContext = useFormFieldContext();
+  const hasMeasuredHeight = useRef(false);
   const textareaLabel = label ?? formFieldContext?.label;
   const textareaHelperText = helperText ?? formFieldContext?.helperText;
   const textareaValidText = validText ?? formFieldContext?.validText;
@@ -37,12 +56,15 @@ const Textarea = ({
   const textareaDisabled = disabled ?? formFieldContext?.disabled;
   const textareaReadonly = readonly ?? formFieldContext?.readonly;
   const textareaValidationStatus = formFieldContext?.validationStatus ?? validationStatus;
+  const textareaHeight = useSharedValue(DEFAULT_TEXTAREA_HEIGHT);
+  const resizeStartHeight = useSharedValue(DEFAULT_TEXTAREA_HEIGHT);
+  const theme = useTheme();
 
   useEffect(() => {
     if (formFieldContext?.setShouldHandleAccessibility) {
       formFieldContext.setShouldHandleAccessibility(true);
     }
-  }, []);
+  }, [formFieldContext]);
 
   const getAccessibilityLabel = () => {
     let accessibilityLabel = '';
@@ -75,6 +97,47 @@ const Textarea = ({
     return accessibilityHint || props.accessibilityHint;
   };
 
+  const handleTextareaLayout = (event: LayoutChangeEvent) => {
+    if (!hasMeasuredHeight.current) {
+      textareaHeight.value = event.nativeEvent.layout.height;
+      resizeStartHeight.value = event.nativeEvent.layout.height;
+      hasMeasuredHeight.current = true;
+    }
+
+    if (children) {
+      onLayout?.(event);
+    }
+  };
+
+  const resizeGesture = useMemo(
+    () =>
+      Gesture.Pan()
+        .enabled(resizable && !textareaDisabled)
+        .onBegin(() => {
+          resizeStartHeight.value = textareaHeight.value;
+        })
+        .onUpdate(event => {
+          const nextHeight =
+            resizeStartHeight.value + event.translationY + event.translationX * 0.35;
+
+          textareaHeight.value = Math.max(DEFAULT_TEXTAREA_HEIGHT, nextHeight);
+        }),
+    [resizable, resizeStartHeight, textareaDisabled, textareaHeight]
+  );
+
+  const animatedHeightStyle = useAnimatedStyle(
+    () => ({
+      height: textareaHeight.value,
+    }),
+    [textareaHeight]
+  );
+
+  const rootStyle = (children ? props.style : undefined) as StyleProp<ViewStyle>;
+  const inputStyle = (!children ? props.style : undefined) as StyleProp<TextStyle>;
+  const textareaStyle = (
+    resizable ? [rootStyle, animatedHeightStyle] : rootStyle
+  ) as StyleProp<ViewStyle>;
+
   return (
     <FormField
       label={label}
@@ -91,6 +154,8 @@ const Textarea = ({
     >
       <TextareaComponent
         {...(children ? props : {})}
+        onLayout={handleTextareaLayout}
+        style={textareaStyle}
         validationStatus={textareaValidationStatus}
         isInvalid={textareaValidationStatus === 'invalid'}
         isReadOnly={textareaReadonly}
@@ -104,12 +169,51 @@ const Textarea = ({
           <>{children}</>
         ) : (
           <>
-            <TextareaField {...props} />
+            <TextareaField {...props} onLayout={onLayout} style={[styles.textarea, inputStyle]} />
           </>
         )}
+        {resizable && !textareaDisabled ? (
+          <GestureDetector gesture={resizeGesture}>
+            <View style={styles.resizeHandle}>
+              <Svg
+                width={RESIZE_HANDLE_ICON_SIZE}
+                height={RESIZE_HANDLE_ICON_SIZE}
+                viewBox="0 0 9 9"
+                fill="none"
+              >
+                <Path
+                  d="M0.353516 8.35355L8.35352 0.353546M4.35352 8.35355L8.35352 4.35355"
+                  stroke={theme.color.icon.primary}
+                />
+              </Svg>
+            </View>
+          </GestureDetector>
+        ) : null}
       </TextareaComponent>
     </FormField>
   );
 };
 
+const styles = StyleSheet.create({
+  textarea: {
+    padding: 0,
+    _web: {
+      outlineStyle: 'none',
+      _focusVisible: {
+        outlineStyle: 'none',
+      },
+    },
+  },
+  resizeHandle: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0,
+    width: RESIZE_HANDLE_TOUCH_SIZE,
+    height: RESIZE_HANDLE_TOUCH_SIZE,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 1,
+  },
+});
+
 export default Textarea;

package/src/components/Textarea/TextareaRoot.tsx

@@ -1,9 +1,12 @@
 import { useMemo } from 'react';
 import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { StyleSheet } from 'react-native-unistyles';
 import { TextareaContext } from './Textarea.context';
 import InputProps from './Textarea.props';
 
+const AnimatedView = Animated.createAnimatedComponent(View);
+
 const TextareaRoot = ({
   children,
   style,
@@ -21,9 +24,9 @@ const TextareaRoot = ({
 
   return (
     <TextareaContext.Provider value={value}>
-      <View {...props} style={[styles.container, style]}>
+      <AnimatedView {...props} style={[styles.container, style]}>
         {children}
-      </View>
+      </AnimatedView>
     </TextareaContext.Provider>
   );
 };
@@ -35,6 +38,7 @@ const styles = StyleSheet.create(theme => ({
     borderColor: theme.color.border.strong,
     height: theme.components.input.textArea.height,
     borderRadius: theme.components.input.borderRadius,
+    position: 'relative',
     flexDirection: 'row',
     overflow: 'hidden',
     alignContent: 'center',

package/build/components/DatePicker/TimePicker.d.ts

@@ -1,3 +0,0 @@
-export type Period = 'AM' | 'PM';
-declare const TimePicker: () => import("react/jsx-runtime").JSX.Element;
-export default TimePicker;

package/build/components/DatePicker/TimePicker.js

@@ -1,84 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import dayjs from 'dayjs';
-import { useCallback, useMemo } from 'react';
-import { ScrollView, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { useDatePickerContext } from './DatePicker.context';
-import { CONTAINER_HEIGHT } from './enums';
-import PeriodPicker from './time-picker/period-picker';
-import Wheel from './time-picker/wheel';
-import { formatNumber, getParsedDate } from './utils';
-const createNumberList = (num, numerals, startFrom = 0) => {
-    return Array.from({ length: num }, (_, i) => ({
-        value: i + startFrom,
-        text: i + startFrom < 10
-            ? `${formatNumber(0, numerals)}${formatNumber(i + startFrom, numerals)}`
-            : `${formatNumber(i + startFrom, numerals)}`,
-    }));
-};
-const TimePicker = () => {
-    const { currentDate, date, onSelectDate, timeZone, numerals = 'latn', use12Hours, } = useDatePickerContext();
-    const hours = useMemo(() => createNumberList(use12Hours ? 12 : 24, numerals, use12Hours ? 1 : 0), [numerals, use12Hours]);
-    const minutes = useMemo(() => createNumberList(60, numerals), [numerals]);
-    const { hour, hour12, minute, period } = getParsedDate(date || currentDate);
-    const handleChangeHour = useCallback((value) => {
-        let hour24 = value;
-        if (use12Hours) {
-            if (period === 'AM' && value === 12) {
-                hour24 = 0;
-            }
-            else if (period === 'PM' && value < 12) {
-                hour24 = value + 12;
-            }
-            else {
-                hour24 = value;
-            }
-        }
-        const newDate = dayjs.tz(date, timeZone).hour(hour24).minute(minute);
-        onSelectDate(newDate);
-    }, [date, onSelectDate, timeZone, use12Hours, period, minute]);
-    const handleChangeMinute = useCallback((value) => {
-        const newDate = dayjs.tz(date, timeZone).minute(value);
-        onSelectDate(newDate);
-    }, [date, onSelectDate, timeZone]);
-    const handlePeriodChange = useCallback((newPeriod) => {
-        let newHour = hour12;
-        if (newPeriod === 'PM' && hour12 < 12) {
-            newHour = hour12 + 12;
-        }
-        else if (newPeriod === 'AM' && hour12 === 12) {
-            newHour = 0;
-        }
-        else if (newPeriod === 'AM' && hour >= 12) {
-            newHour = hour12;
-        }
-        const newDate = dayjs.tz(date || currentDate, timeZone).hour(newHour);
-        onSelectDate(newDate);
-    }, [date, currentDate, onSelectDate, timeZone, hour, hour12]);
-    return (_jsxs(ScrollView, { horizontal: true, scrollEnabled: false, contentContainerStyle: styles.container, testID: "time-selector", children: [_jsxs(View, { style: styles.timePickerContainer, children: [_jsx(View, { style: styles.wheelContainer, children: _jsx(Wheel, { value: use12Hours ? hour12 : hour, items: hours, setValue: handleChangeHour }) }), _jsx(BodyText, { style: styles.timeSeparator, children: ":" }), _jsx(View, { style: styles.wheelContainer, children: _jsx(Wheel, { value: minute, items: minutes, setValue: handleChangeMinute }) })] }), use12Hours && period ? (_jsx(View, { style: styles.periodContainer, children: _jsx(PeriodPicker, { value: period, setValue: handlePeriodChange }) })) : null] }));
-};
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    wheelContainer: {
-        flex: 1,
-    },
-    timePickerContainer: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: CONTAINER_HEIGHT / 2,
-        height: CONTAINER_HEIGHT / 2,
-        flexDirection: 'row',
-    },
-    timeSeparator: {
-        marginHorizontal: 5,
-    },
-    periodContainer: {
-        marginLeft: 10,
-    },
-});
-export default TimePicker;

package/build/components/DatePicker/time-picker/animated-math.d.ts

@@ -1,4 +0,0 @@
-import { Animated } from 'react-native';
-declare function sin(animated: Animated.Animated): Animated.AnimatedAddition<string | number>;
-declare function normalize(animated: Animated.Animated): Animated.Animated;
-export { sin, normalize };

package/build/components/DatePicker/time-picker/animated-math.js

@@ -1,19 +0,0 @@
-import { Animated } from 'react-native';
-const FACTORIAL_3 = 3 * 2;
-const FACTORIAL_5 = 5 * 4 * FACTORIAL_3;
-const FACTORIAL_7 = 7 * 6 * FACTORIAL_5;
-function sin(animated) {
-    const normalized = normalize(animated);
-    const square = Animated.multiply(normalized, normalized);
-    const pow3 = Animated.multiply(normalized, square);
-    const pow5 = Animated.multiply(pow3, square);
-    const pow7 = Animated.multiply(pow5, square);
-    return Animated.add(Animated.add(normalized, Animated.multiply(pow3, -1 / FACTORIAL_3)), Animated.add(Animated.multiply(pow5, 1 / FACTORIAL_5), Animated.multiply(pow7, -1 / FACTORIAL_7)));
-}
-function normalize(animated) {
-    return Animated.add(Animated.modulo(Animated.add(animated, Math.PI), Math.PI * 2), -Math.PI).interpolate({
-        inputRange: [-Math.PI, -Math.PI / 2, Math.PI / 2, Math.PI],
-        outputRange: [0, -Math.PI / 2, Math.PI / 2, 0],
-    });
-}
-export { sin, normalize };

package/build/components/DatePicker/time-picker/period-native.d.ts

@@ -1,6 +0,0 @@
-interface PeriodProps {
-    value: string;
-    setValue?: (value: any) => void;
-}
-declare const _default: import("react").MemoExoticComponent<({ value, setValue }: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/build/components/DatePicker/time-picker/period-native.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import WheelPicker from './wheel-picker';
-const options = [
-    { value: 'AM', text: 'AM' },
-    { value: 'PM', text: 'PM' },
-];
-const PeriodNative = ({ value, setValue = () => { } }) => {
-    return (_jsx(WheelPicker, { value: value, options: options, onChange: setValue, 
-        //containerStyle={defaultStyles.container}
-        itemHeight: 44, decelerationRate: "fast" }));
-};
-const customComparator = (prev, next) => {
-    const areEqual = prev.value === next.value && prev.setValue === next.setValue;
-    return areEqual;
-};
-export default memo(PeriodNative, customComparator);

package/build/components/DatePicker/time-picker/period-picker.d.ts

@@ -1,6 +0,0 @@
-type PeriodProps = {
-    value: string;
-    setValue?: (value: any) => void;
-};
-declare const _default: import("react").MemoExoticComponent<(props: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/build/components/DatePicker/time-picker/period-picker.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Platform } from 'react-native';
-import PeriodNative from './period-native';
-import PeriodWeb from './period-web';
-const PeriodPicker = (props) => {
-    const Component = Platform.OS === 'web' ? PeriodWeb : PeriodNative;
-    return _jsx(Component, { ...props });
-};
-export default memo(PeriodPicker);

package/build/components/DatePicker/time-picker/period-web.d.ts

@@ -1,6 +0,0 @@
-interface PeriodProps {
-    value: string;
-    setValue?: (value: any) => void;
-}
-declare const _default: import("react").MemoExoticComponent<({ value, setValue }: PeriodProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/build/components/DatePicker/time-picker/period-web.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Pressable, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../../BodyText';
-const PeriodWeb = ({ value, setValue = () => { } }) => {
-    return (_jsx(Pressable, { onPress: () => setValue(value == 'AM' ? 'PM' : 'AM'), children: _jsx(View, { style: [styles.period], children: _jsx(BodyText, { children: value }) }) }));
-};
-const styles = StyleSheet.create({
-    period: {
-        width: 65,
-        height: 44,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-});
-const customComparator = (prev, next) => {
-    const areEqual = prev.value === next.value && prev.setValue === next.setValue;
-    return areEqual;
-};
-export default memo(PeriodWeb, customComparator);

package/build/components/DatePicker/time-picker/wheel-native.d.ts

@@ -1,8 +0,0 @@
-import { PickerOption } from '../DatePicker.props';
-interface WheelProps {
-    value: number | string;
-    setValue?: (value: any) => void;
-    items: PickerOption[];
-}
-declare const _default: import("react").MemoExoticComponent<({ value, setValue, items }: WheelProps) => import("react/jsx-runtime").JSX.Element>;
-export default _default;

package/build/components/DatePicker/time-picker/wheel-native.js

@@ -1,19 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Platform } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import WheelPicker from './wheel-picker';
-const WheelNative = ({ value, setValue = () => { }, items }) => {
-    return (_jsx(WheelPicker, { value: value, options: items, onChange: setValue, containerStyle: styles.container, itemHeight: 44, decelerationRate: "fast" }));
-};
-const styles = StyleSheet.create({
-    container: {
-        display: 'flex',
-        ...Platform.select({
-            web: {
-                userSelect: 'none',
-            },
-        }),
-    },
-});
-export default memo(WheelNative);

package/build/components/DatePicker/time-picker/wheel-picker/index.d.ts

@@ -1,2 +0,0 @@
-import WheelPicker from './wheel-picker';
-export default WheelPicker;

package/build/components/DatePicker/time-picker/wheel-picker/index.js

@@ -1,2 +0,0 @@
-import WheelPicker from './wheel-picker';
-export default WheelPicker;

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker-item.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Animated, StyleProp, ViewStyle } from 'react-native';
-import { PickerOption } from '../../DatePicker.props';
-interface ItemProps {
-    style: StyleProp<ViewStyle>;
-    option: PickerOption | null;
-    height: number;
-    index: number;
-    currentScrollIndex: Animated.AnimatedAddition<number>;
-    visibleRest: number;
-    rotationFunction: (x: number) => number;
-    opacityFunction: (x: number) => number;
-    scaleFunction: (x: number) => number;
-}
-declare const _default: React.NamedExoticComponent<ItemProps>;
-export default _default;

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker-item.js

@@ -1,97 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { Animated } from 'react-native';
-import { BodyText } from '../../../BodyText';
-import styles from './wheel-picker.style';
-const WheelPickerItem = ({ style, height, option, index, visibleRest, currentScrollIndex, opacityFunction, rotationFunction, scaleFunction, }) => {
-    const relativeScrollIndex = Animated.subtract(index, currentScrollIndex);
-    const translateY = relativeScrollIndex.interpolate({
-        inputRange: (() => {
-            const range = [0];
-            for (let i = 1; i <= visibleRest + 1; i++) {
-                range.unshift(-i);
-                range.push(i);
-            }
-            return range;
-        })(),
-        outputRange: (() => {
-            const range = [0];
-            for (let i = 1; i <= visibleRest + 1; i++) {
-                let y = (height / 2) * (1 - Math.sin(Math.PI / 2 - rotationFunction(i)));
-                for (let j = 1; j < i; j++) {
-                    y += height * (1 - Math.sin(Math.PI / 2 - rotationFunction(j)));
-                }
-                range.unshift(y);
-                range.push(-y);
-            }
-            return range;
-        })(),
-    });
-    const opacity = relativeScrollIndex.interpolate({
-        inputRange: (() => {
-            const range = [0];
-            for (let i = 1; i <= visibleRest + 1; i++) {
-                range.unshift(-i);
-                range.push(i);
-            }
-            return range;
-        })(),
-        outputRange: (() => {
-            const range = [1];
-            for (let x = 1; x <= visibleRest + 1; x++) {
-                const y = opacityFunction(x);
-                range.unshift(y);
-                range.push(y);
-            }
-            return range;
-        })(),
-    });
-    const scale = relativeScrollIndex.interpolate({
-        inputRange: (() => {
-            const range = [0];
-            for (let i = 1; i <= visibleRest + 1; i++) {
-                range.unshift(-i);
-                range.push(i);
-            }
-            return range;
-        })(),
-        outputRange: (() => {
-            const range = [1.0];
-            for (let x = 1; x <= visibleRest + 1; x++) {
-                const y = scaleFunction(x);
-                range.unshift(y);
-                range.push(y);
-            }
-            return range;
-        })(),
-    });
-    const rotateX = relativeScrollIndex.interpolate({
-        inputRange: (() => {
-            const range = [0];
-            for (let i = 1; i <= visibleRest + 1; i++) {
-                range.unshift(-i);
-                range.push(i);
-            }
-            return range;
-        })(),
-        outputRange: (() => {
-            const range = ['0deg'];
-            for (let x = 1; x <= visibleRest + 1; x++) {
-                const y = rotationFunction(x);
-                range.unshift(`${y}deg`);
-                range.push(`${y}deg`);
-            }
-            return range;
-        })(),
-    });
-    return (_jsx(Animated.View, { style: [
-            styles.option,
-            style,
-            {
-                height,
-                opacity,
-                transform: [{ translateY }, { rotateX }, { scale }],
-            },
-        ], children: _jsx(BodyText, { children: option?.text }) }));
-};
-export default React.memo(WheelPickerItem);

package/build/components/DatePicker/time-picker/wheel-picker/wheel-picker.d.ts

@@ -1,21 +0,0 @@
-import React from 'react';
-import { FlatListProps, StyleProp, ViewProps, ViewStyle } from 'react-native';
-import { PickerOption } from '../../DatePicker.props';
-interface Props {
-    value: number | string;
-    options: PickerOption[];
-    onChange: (index: number | string) => void;
-    selectedIndicatorStyle?: StyleProp<ViewStyle>;
-    itemStyle?: ViewStyle;
-    itemHeight?: number;
-    containerStyle?: ViewStyle;
-    containerProps?: Omit<ViewProps, 'style'>;
-    scaleFunction?: (x: number) => number;
-    rotationFunction?: (x: number) => number;
-    opacityFunction?: (x: number) => number;
-    visibleRest?: number;
-    decelerationRate?: 'normal' | 'fast' | number;
-    flatListProps?: Omit<FlatListProps<PickerOption | null>, 'data' | 'renderItem'>;
-}
-declare const _default: React.NamedExoticComponent<Props>;
-export default _default;