@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/Tabs/TabsList.tsx

@@ -1,194 +0,0 @@
-import {
-  ChevronLeftSmallIcon,
-  ChevronRightSmallIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { LayoutChangeEvent, Platform, View } from 'react-native';
-import Animated, {
-  runOnJS,
-  useAnimatedScrollHandler,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated';
-import { StyleSheet } from 'react-native-unistyles';
-import { UnstyledIconButton } from '../UnstyledIconButton';
-import { useTabsContext } from './Tabs.context';
-import type TabsListProps from './TabsList.props';
-
-const Indicator = Animated.createAnimatedComponent(View);
-
-const SCROLL_STEP_RATIO = 0.6;
-const SCROLL_BUTTON_HITSLOP = { top: 10, bottom: 10, left: 10, right: 10 } as const;
-
-const TabsList = ({ children, style, ...rest }: TabsListProps) => {
-  const { indicatorSizeSV, indicatorXSV } = useTabsContext();
-
-  const scrollRef = useRef<Animated.ScrollView | null>(null);
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
-  const containerWidthRef = useRef(0);
-  const contentWidthRef = useRef(0);
-  const scrollX = useSharedValue(0);
-
-  const indicatorStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: indicatorXSV.value }],
-    width: indicatorSizeSV.value,
-  }));
-
-  const updateScrollState = useCallback(() => {
-    const cw = containerWidthRef.current;
-    const contentW = contentWidthRef.current;
-    const x = scrollX.value;
-    const overflow = contentW > cw + 1;
-    setCanScrollLeft(overflow && x > 0);
-    setCanScrollRight(overflow && x + cw < contentW - 1);
-  }, [scrollX]);
-
-  const onLayoutContainer = (e: LayoutChangeEvent) => {
-    containerWidthRef.current = e.nativeEvent.layout.width;
-    updateScrollState();
-  };
-  const onContentSizeChange = (w: number) => {
-    contentWidthRef.current = w;
-    updateScrollState();
-  };
-  const onScrollHandler = useAnimatedScrollHandler({
-    onScroll: (e: { contentOffset: { x: number } }) => {
-      scrollX.value = e.contentOffset.x;
-      runOnJS(updateScrollState)();
-    },
-  });
-
-  const scrollBy = (direction: 1 | -1) => {
-    const viewW = containerWidthRef.current;
-    const step = viewW * SCROLL_STEP_RATIO;
-    const current = scrollX.value;
-    const max = Math.max(0, contentWidthRef.current - viewW);
-    const target = Math.max(0, Math.min(current + direction * step, max));
-    scrollRef.current?.scrollTo({ x: target, animated: true });
-  };
-
-  useEffect(() => {
-    if (Platform.OS === 'web') {
-      const handler = () => updateScrollState();
-      window.addEventListener('resize', handler);
-      return () => window.removeEventListener('resize', handler);
-    }
-    return;
-  }, [updateScrollState]);
-
-  return (
-    <View style={[styles.wrapper, style]} {...rest} accessibilityRole="tablist">
-      {canScrollLeft && (
-        <View
-          style={[styles.iconButtonWrap, styles.scrollButtonLeft]}
-          accessibilityElementsHidden
-          importantForAccessibility="no-hide-descendants"
-          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : {})}
-        >
-          <UnstyledIconButton
-            accessibilityLabel={undefined}
-            icon={ChevronLeftSmallIcon}
-            onPress={() => scrollBy(-1)}
-            style={styles.iconButton}
-            accessibilityElementsHidden
-            importantForAccessibility="no-hide-descendants"
-            hitSlop={SCROLL_BUTTON_HITSLOP}
-            {...(Platform.OS === 'web' ? ({ 'aria-hidden': true, tabIndex: -1 } as any) : {})}
-          />
-        </View>
-      )}
-      <Animated.ScrollView
-        ref={scrollRef}
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        onLayout={onLayoutContainer}
-        onContentSizeChange={onContentSizeChange}
-        onScroll={onScrollHandler}
-        scrollEventThrottle={16}
-        bounces={false}
-        contentContainerStyle={styles.scrollContent}
-      >
-        <View style={styles.container}>
-          {children}
-          <Indicator
-            accessibilityElementsHidden
-            importantForAccessibility="no-hide-descendants"
-            style={[styles.indicator, indicatorStyle]}
-          />
-        </View>
-      </Animated.ScrollView>
-      {canScrollRight && (
-        <View
-          style={[styles.iconButtonWrap, styles.scrollButtonRight]}
-          accessibilityElementsHidden
-          importantForAccessibility="no-hide-descendants"
-          {...(Platform.OS === 'web' ? ({ 'aria-hidden': true } as any) : {})}
-        >
-          <UnstyledIconButton
-            accessibilityLabel={undefined}
-            icon={ChevronRightSmallIcon}
-            onPress={() => scrollBy(1)}
-            style={styles.iconButton}
-            accessibilityElementsHidden
-            importantForAccessibility="no-hide-descendants"
-            hitSlop={SCROLL_BUTTON_HITSLOP}
-            {...(Platform.OS === 'web' ? ({ 'aria-hidden': true, tabIndex: -1 } as any) : {})}
-          />
-        </View>
-      )}
-    </View>
-  );
-};
-
-TabsList.displayName = 'TabsList';
-
-const styles = StyleSheet.create(theme => ({
-  wrapper: {
-    position: 'relative',
-    width: '100%',
-    borderBottomWidth: theme.components.tabs.divider.borderWidth,
-    borderColor: theme.color.border.strong,
-  },
-  scrollContent: {
-    paddingBottom: 0,
-  },
-  container: {
-    position: 'relative',
-    flexDirection: 'row',
-    gap: theme.components.tabs.gap,
-  },
-  indicator: {
-    position: 'absolute',
-    height: 6,
-    borderTopLeftRadius: theme.components.tabs.item.selected.borderTopRadius,
-    borderTopRightRadius: theme.components.tabs.item.selected.borderTopRadius,
-    borderBottomLeftRadius: theme.components.tabs.item.selected.borderBottomRadius,
-    borderBottomRightRadius: theme.components.tabs.item.selected.borderBottomRadius,
-    backgroundColor: theme.color.surface.brand.default,
-    bottom: 0,
-    left: 0,
-  },
-  scrollButtonLeft: {
-    position: 'absolute',
-    left: 0,
-    top: '50%',
-    transform: [{ translateY: -theme.space[150] }],
-    zIndex: 10,
-  },
-  scrollButtonRight: {
-    position: 'absolute',
-    right: 0,
-    top: '50%',
-    transform: [{ translateY: -theme.space[150] }],
-    zIndex: 10,
-  },
-  iconButtonWrap: {},
-  iconButton: {
-    backgroundColor: theme.color.surface.neutral.subtle,
-    width: theme.space[300],
-    height: theme.space[300],
-  },
-}));
-
-export default TabsList;

package/src/components/Tabs/index.ts

@@ -1,8 +0,0 @@
-export { default as Tab } from './Tab';
-export type { TabProps } from './Tab.props';
-export { default as TabPanel } from './TabPanel';
-export type { TabPanelProps } from './TabPanel.props';
-export { default as Tabs } from './Tabs';
-export type { TabsProps } from './Tabs.props';
-export { default as TabsList } from './TabsList';
-export type { TabsListProps } from './TabsList.props';

package/src/components/Textarea/Textarea.context.ts

@@ -1,6 +0,0 @@
-import { createContext, useContext } from 'react';
-import { TextareaContextValue } from './Textarea.props';
-
-export const TextareaContext = createContext<TextareaContextValue>({});
-
-export const useTextareaContext = () => useContext(TextareaContext);

package/src/components/Textarea/Textarea.figma.tsx

@@ -1,64 +0,0 @@
-import figma from '@figma/code-connect';
-import { Textarea } from '..';
-
-const props = {
-  disabled: figma.enum('State', {
-    Disabled: true,
-  }),
-  readonly: figma.enum('State', {
-    'Read-only': true,
-  }),
-  placeholder: figma.enum('Value type', {
-    Placeholder: figma.string('Value'),
-  }),
-  value: figma.enum('Value type', {
-    Filled: figma.string('Value'),
-  }),
-  label: figma.string('Label'),
-  labelVariant: figma.enum('Label variant', {
-    Body: 'body',
-    Heading: 'heading',
-  }),
-  helperText: figma.boolean('Helper text?', {
-    true: figma.string('Helper text'),
-  }),
-  validationStatus: figma.enum('State', {
-    Invalid: 'invalid',
-    Valid: 'valid',
-  }),
-  invalidText: figma.enum('State', {
-    Invalid: figma.string('Validation'),
-  }),
-  validText: figma.enum('State', {
-    Valid: figma.string('Validation'),
-  }),
-};
-
-figma.connect(
-  Textarea,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2356-5180&m=dev',
-  {
-    props: {
-      ...props,
-      required: figma.boolean('Optional?', {
-        true: false,
-        false: true,
-      }),
-    },
-    example: props => (
-      <Textarea
-        disabled={props.disabled}
-        readonly={props.readonly}
-        placeholder={props.placeholder}
-        value={props.value}
-        label={props.label}
-        labelVariant={props.labelVariant}
-        helperText={props.helperText}
-        required={props.required}
-        validationStatus={props.validationStatus}
-        invalidText={props.invalidText}
-        validText={props.validText}
-      />
-    ),
-  }
-);

package/src/components/Textarea/Textarea.props.ts

@@ -1,74 +0,0 @@
-import type { TextInputProps, ViewProps } from 'react-native';
-
-export interface TextareaBaseProps {
-  /**
-   * Sets the initial height of a resizable textarea in pixels.
-   * Has no effect unless `resizable` is enabled.
-   *
-   * @type number
-   * @example
-   * ```tsx
-   * <Textarea resizable defaultHeight={140} />
-   * ```
-   */
-  defaultHeight?: number;
-  /**
-   * If true, the textarea can be resized vertically using a drag handle.
-   *
-   * @type boolean
-   * @example
-   * ```tsx
-   * <Textarea resizable />
-   * ```
-   */
-  resizable?: boolean;
-  /**
-   * If true, the textarea will be disabled.
-   *
-   * @type boolean
-   * @example
-   * ```tsx
-   * <Textarea disabled={true} />
-   * ```
-   */
-  disabled?: boolean;
-  /**
-   * The validation status of the Textarea component.
-   *
-   * @type 'initial' | 'valid' | 'invalid'
-   * @example
-   * ```tsx
-   * <Textarea validationStatus="valid" />
-   * ```
-   */
-  validationStatus?: 'initial' | 'valid' | 'invalid';
-  readonly?: boolean;
-  focused?: boolean;
-  placeholder?: string;
-  label?: string;
-  labelVariant?: 'heading' | 'body';
-  helperText?: string;
-  helperIcon?: React.ComponentType;
-  validText?: string;
-  invalidText?: string;
-  required?: boolean;
-  isInBottomSheet?: boolean;
-}
-
-export interface TextareaWithChildrenProps extends TextareaBaseProps, ViewProps {}
-
-export interface TextareaWithoutChildrenProps
-  extends TextareaBaseProps, Omit<TextInputProps, 'children'> {
-  children?: never;
-}
-
-type TextareaProps = TextareaWithChildrenProps | TextareaWithoutChildrenProps;
-
-export type TextareaContextValue = {
-  disabled?: TextareaProps['disabled'];
-  focused?: TextareaProps['focused'];
-  readonly?: TextareaProps['readonly'];
-  validationStatus?: TextareaProps['validationStatus'];
-};
-
-export default TextareaProps;

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

@@ -1,106 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-native';
-import { Textarea } from '.';
-
-const meta = {
-  title: 'Stories / Textarea',
-  component: Textarea,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    placeholder: {
-      control: 'text',
-      description: 'The Textarea field placeholder',
-      defaultValue: '',
-    },
-    label: {
-      control: 'text',
-      description: 'The label for the Textarea component',
-      defaultValue: 'Textarea label',
-    },
-    labelVariant: {
-      control: 'radio',
-      options: ['heading', 'body'],
-      description: 'The label variant for the Textarea component',
-    },
-    helperText: {
-      control: 'text',
-      description: 'The helper text for the Textarea component',
-    },
-    validationStatus: {
-      control: 'select',
-      options: ['initial', 'valid', 'invalid'],
-      description: 'The validation status of the Textarea component',
-      defaultValue: 'initial',
-    },
-    invalidText: {
-      control: 'text',
-      description: 'The invalid text for the Textarea component',
-    },
-    validText: {
-      control: 'text',
-      description: 'The valid text for the Textarea component',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disable the Textarea component',
-      defaultValue: false,
-    },
-    readonly: {
-      control: 'boolean',
-      description: 'Read only the Textarea component',
-      defaultValue: false,
-    },
-    focused: {
-      control: 'boolean',
-      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,
-    },
-    defaultHeight: {
-      control: { type: 'number', min: 64, step: 8 },
-      description: 'Sets the initial height of the Textarea in pixels',
-    },
-  },
-  args: {
-    placeholder: 'Textarea placeholder',
-    validationStatus: 'initial',
-    disabled: false,
-    readonly: false,
-    focused: false,
-    resizable: false,
-  },
-} satisfies Meta<typeof Textarea>;
-
-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,
-  },
-};
-
-export const DefaultHeight: Story = {
-  args: {
-    label: 'Notes',
-    helperText: 'Starts taller by default',
-    placeholder: 'Add more detail here...',
-    resizable: true,
-    defaultHeight: 140,
-  },
-};

package/src/components/Textarea/Textarea.tsx

@@ -1,207 +0,0 @@
-import { createTextarea } from '@gluestack-ui/textarea';
-import type TextareaProps from './Textarea.props';
-
-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 { useFormFieldAccessibility, useTheme } from '../../hooks';
-import { FormField, useFormFieldContext } from '../FormField';
-import TextareaFieldComponent from './TextareaField';
-import TextareaRoot from './TextareaRoot';
-
-export const TextareaComponent = createTextarea({
-  Root: TextareaRoot,
-  Input: TextareaFieldComponent,
-});
-
-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,
-  defaultHeight,
-  disabled,
-  focused,
-  readonly,
-  label,
-  labelVariant,
-  helperText,
-  validText,
-  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;
-  const textareaInvalidText = invalidText ?? formFieldContext?.invalidText;
-  const textareaRequired = required ?? formFieldContext?.required;
-  const textareaDisabled = disabled ?? formFieldContext?.disabled;
-  const textareaReadonly = readonly ?? formFieldContext?.readonly;
-  const textareaValidationStatus = formFieldContext?.validationStatus ?? validationStatus;
-  const textareaDefaultHeight = defaultHeight ?? DEFAULT_TEXTAREA_HEIGHT;
-  const textareaHeight = useSharedValue(textareaDefaultHeight);
-  const resizeStartHeight = useSharedValue(textareaDefaultHeight);
-  const theme = useTheme();
-  const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
-    label: textareaLabel,
-    helperText: textareaHelperText,
-    validText: textareaValidText,
-    invalidText: textareaInvalidText,
-    required: textareaRequired,
-    validationStatus: textareaValidationStatus,
-    fallbackLabel: props.accessibilityLabel,
-    fallbackHint: props.accessibilityHint,
-  });
-
-  useEffect(() => {
-    if (formFieldContext?.setShouldHandleAccessibility) {
-      formFieldContext.setShouldHandleAccessibility(true);
-    }
-  }, [formFieldContext]);
-
-  useEffect(() => {
-    if (!hasMeasuredHeight.current) {
-      textareaHeight.value = textareaDefaultHeight;
-      resizeStartHeight.value = textareaDefaultHeight;
-    }
-  }, [resizeStartHeight, textareaDefaultHeight, textareaHeight]);
-
-  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}
-      labelVariant={labelVariant}
-      helperText={helperText}
-      helperIcon={helperIcon}
-      validText={validText}
-      invalidText={invalidText}
-      required={required}
-      validationStatus={validationStatus}
-      disabled={disabled}
-      readonly={readonly}
-      accessibilityHandledByChildren
-    >
-      <TextareaComponent
-        {...(children ? props : {})}
-        onLayout={handleTextareaLayout}
-        style={textareaStyle}
-        validationStatus={textareaValidationStatus}
-        isInvalid={textareaValidationStatus === 'invalid'}
-        isReadOnly={textareaReadonly}
-        isDisabled={textareaDisabled}
-        isFocused={focused}
-        required={textareaRequired}
-        aria-label={accessibilityLabel}
-        accessibilityHint={accessibilityHint}
-      >
-        {children ? (
-          <>{children}</>
-        ) : (
-          <>
-            <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;