@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/Input/Input.tsx

@@ -1,215 +0,0 @@
-import { createInput } from '@gluestack-ui/input';
-import { ComponentType, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { TextInput } from 'react-native';
-import type InputProps from './Input.props';
-
-import {
-  CloseSmallIcon,
-  EyeOffSmallIcon,
-  EyeSmallIcon,
-  SearchMediumIcon,
-} from '@utilitywarehouse/hearth-react-native-icons';
-import { useFormFieldAccessibility, useTheme } from '../../hooks';
-import { BodyText } from '../BodyText';
-import { FormField, useFormFieldContext } from '../FormField';
-import { Spinner } from '../Spinner';
-import { UnstyledIconButton } from '../UnstyledIconButton';
-import { InputWithoutChildrenProps } from './Input.props';
-import InputFieldComponent from './InputField';
-import InputIconComponent from './InputIcon';
-import InputRoot from './InputRoot';
-import InputSlotComponent from './InputSlot';
-
-export const InputComponent = createInput({
-  Icon: InputIconComponent,
-  Slot: InputSlotComponent,
-  Root: InputRoot,
-  Input: InputFieldComponent,
-});
-
-export const InputSlot = InputComponent.Slot;
-export const InputField = InputComponent.Input;
-export const InputIcon = InputComponent.Icon;
-
-const Input = forwardRef<TextInput, InputProps>(
-  (
-    {
-      validationStatus = 'initial',
-      children,
-      disabled,
-      focused,
-      readonly,
-      leadingIcon,
-      trailingIcon,
-      type,
-      showPasswordToggle = true,
-      onClear,
-      loading,
-      clearable = false,
-      required = true,
-      inBottomSheet = false,
-      style,
-      label,
-      labelVariant,
-      helperText,
-      helperIcon,
-      validText,
-      invalidText,
-      prefix,
-      suffix,
-      ...props
-    },
-    ref
-  ) => {
-    const formFieldContext = useFormFieldContext();
-    const inputLabel = label ?? formFieldContext?.label;
-    const inputHelperText = helperText ?? formFieldContext?.helperText;
-    const inputValidText = validText ?? formFieldContext?.validText;
-    const inputInvalidText = invalidText ?? formFieldContext?.invalidText;
-    const inputRequired = required ?? formFieldContext?.required;
-    const inputDisabled = disabled ?? formFieldContext?.disabled;
-    const inputReadonly = readonly ?? formFieldContext?.readonly;
-    const inputValidationStatus = formFieldContext?.validationStatus ?? validationStatus;
-
-    useEffect(() => {
-      if (formFieldContext?.setShouldHandleAccessibility) {
-        formFieldContext.setShouldHandleAccessibility(true);
-      }
-    }, [formFieldContext]);
-
-    const [fieldType, setFieldType] = useState<'password' | 'text'>(
-      type === 'password' ? 'password' : 'text'
-    );
-    const { color } = useTheme();
-    const inputRef = useRef<TextInput>(null);
-
-    // Expose TextInput methods to parent components
-    useImperativeHandle(ref, () => inputRef.current as TextInput, []);
-
-    const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
-    const shouldShowClear = clearable && !!(props as InputWithoutChildrenProps)?.value;
-    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
-      label: inputLabel,
-      helperText: inputHelperText,
-      validText: inputValidText,
-      invalidText: inputInvalidText,
-      required: inputRequired,
-      validationStatus: inputValidationStatus,
-      fallbackLabel: props.accessibilityLabel,
-      fallbackHint: props.accessibilityHint,
-    });
-
-    const toggleFieldType = () => {
-      setFieldType(fieldType === 'password' ? 'text' : 'password');
-    };
-
-    const leadingIconComponent = ((): ComponentType | undefined => {
-      if (type === 'search') {
-        return SearchMediumIcon;
-      }
-      return leadingIcon;
-    })();
-
-    const getInputMode = (() => {
-      if (type === 'search') {
-        return 'search';
-      }
-      return undefined;
-    })();
-
-    return (
-      <FormField
-        label={label}
-        labelVariant={labelVariant}
-        helperText={helperText}
-        helperIcon={helperIcon}
-        validText={validText}
-        invalidText={invalidText}
-        required={required}
-        validationStatus={validationStatus}
-        disabled={disabled}
-        readonly={readonly}
-        accessibilityHandledByChildren
-      >
-        <InputComponent
-          {...(children ? props : {})}
-          validationStatus={inputValidationStatus}
-          isInvalid={inputValidationStatus === 'invalid'}
-          isReadOnly={inputReadonly}
-          isDisabled={inputDisabled}
-          isFocused={focused}
-          type={type as undefined}
-          isRequired={inputRequired}
-          style={style}
-        >
-          {children ? (
-            <>{children}</>
-          ) : (
-            <>
-              {!!leadingIconComponent && (
-                <InputSlot>
-                  <InputIcon as={leadingIconComponent} />
-                </InputSlot>
-              )}
-              {!!prefix && (
-                <InputSlot>
-                  {typeof prefix === 'string' || typeof prefix === 'number' ? (
-                    <BodyText>{prefix}</BodyText>
-                  ) : (
-                    prefix
-                  )}
-                </InputSlot>
-              )}
-              <InputField
-                // @ts-expect-error - ref forwarding issue
-                ref={inputRef}
-                type={fieldType}
-                inputMode={getInputMode}
-                inBottomSheet={inBottomSheet}
-                {...props}
-                aria-label={accessibilityLabel}
-                accessibilityHint={accessibilityHint}
-              />
-              {shouldShowClear && (
-                <InputSlot>
-                  <UnstyledIconButton onPress={onClear} icon={CloseSmallIcon} />
-                </InputSlot>
-              )}
-              {loading && (
-                <InputSlot>
-                  <Spinner size="xs" color={color.icon.primary} />
-                </InputSlot>
-              )}
-              {shouldShowPasswordToggle && (
-                <InputSlot>
-                  <UnstyledIconButton
-                    onPress={toggleFieldType}
-                    icon={fieldType === 'password' ? EyeSmallIcon : EyeOffSmallIcon}
-                  />
-                </InputSlot>
-              )}
-              {!!suffix && (
-                <InputSlot>
-                  {typeof suffix === 'string' || typeof suffix === 'number' ? (
-                    <BodyText>{suffix}</BodyText>
-                  ) : (
-                    suffix
-                  )}
-                </InputSlot>
-              )}
-              {!!trailingIcon && (
-                <InputSlot>
-                  <InputIcon as={trailingIcon} />
-                </InputSlot>
-              )}
-            </>
-          )}
-        </InputComponent>
-      </FormField>
-    );
-  }
-);
-
-Input.displayName = 'Input';
-
-export default Input;

package/src/components/Input/InputField.tsx

@@ -1,75 +0,0 @@
-import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
-import { forwardRef } from 'react';
-import { TextInput as RNTextInput, TextInputProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import { useInputContext } from './Input.context';
-
-const InputField = forwardRef<RNTextInput, TextInputProps & { inBottomSheet?: boolean }>(
-  ({ style, inBottomSheet = false, ...props }, ref) => {
-    const { disabled, focused = false, type } = useInputContext();
-    styles.useVariants({ focused, type });
-    const { color } = useTheme();
-
-    if (inBottomSheet) {
-      return (
-        <BottomSheetTextInput
-          ref={ref as any}
-          placeholderTextColor={color.text.secondary}
-          selectionColor={color.surface.brand.default}
-          cursorColor={color.surface.brand.default}
-          verticalAlign="middle"
-          aria-disabled={disabled}
-          {...props}
-          style={[styles.input, style]}
-        />
-      );
-    }
-
-    return (
-      <RNTextInput
-        ref={ref}
-        placeholderTextColor={color.text.secondary}
-        selectionColor={color.surface.brand.default}
-        cursorColor={color.surface.brand.default}
-        verticalAlign="middle"
-        aria-disabled={disabled}
-        {...props}
-        style={[styles.input, style]}
-      />
-    );
-  }
-);
-
-InputField.displayName = 'InputField';
-
-const styles = StyleSheet.create(theme => ({
-  input: {
-    flex: 1,
-    alignSelf: 'stretch',
-    width: 'auto',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: theme.color.text.primary,
-    fontSize: theme.typography.mobile.bodyText.md.fontSize,
-    fontFamily: theme.typography.mobile.bodyText.fontFamily,
-    fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
-    borderWidth: 0,
-    variants: {
-      focused: {
-        true: {},
-      },
-      type: {
-        text: {},
-        password: {},
-        search: {},
-        date: {},
-      },
-    },
-    _web: {
-      width: '100%',
-    },
-  },
-}));
-
-export default InputField;

package/src/components/Input/InputIcon.tsx

@@ -1,30 +0,0 @@
-import { ComponentType } from 'react';
-import { Platform, type StyleProp, type ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { Icon, IconProps } from '../Icon';
-
-const InputIcon = ({ children, ...props }: IconProps & { as?: ComponentType }) => {
-  return (
-    <Icon
-      {...props}
-      style={
-        Platform.OS === 'web'
-          ? // @ts-expect-error - style prop type issue
-            { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
-          : ([styles.icon as StyleProp<ViewStyle>, props.style] as any)
-      }
-    >
-      {children}
-    </Icon>
-  );
-};
-
-InputIcon.displayName = 'InputIcon';
-
-const styles = StyleSheet.create(theme => ({
-  icon: {
-    color: theme.color.icon.primary,
-  },
-}));
-
-export default InputIcon;

package/src/components/Input/InputRoot.tsx

@@ -1,89 +0,0 @@
-import { useMemo } from 'react';
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { InputContext } from './Input.context';
-import InputProps from './Input.props';
-
-const InputRoot = ({
-  children,
-  style,
-  states,
-  validationStatus,
-  type,
-  ...props
-}: InputProps & { states?: { focus?: boolean; disabled?: boolean; readonly?: boolean } }) => {
-  const { focus = false, disabled = false, readonly = false } = states || {};
-  styles.useVariants({ validationStatus, focus, disabled, readonly, type });
-
-  const value = useMemo(
-    () => ({ focused: focus, disabled, readonly, validationStatus, type }),
-    [focus, disabled, readonly, validationStatus, type]
-  );
-
-  return (
-    <InputContext.Provider value={value}>
-      <View {...props} style={[styles.container, style]}>
-        {children}
-      </View>
-    </InputContext.Provider>
-  );
-};
-
-InputRoot.displayName = 'InputRoot';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    borderColor: theme.color.border.strong,
-    height: theme.components.input.height,
-    borderRadius: theme.components.input.borderRadius,
-    flexDirection: 'row',
-    overflow: 'hidden',
-    alignContent: 'center',
-    paddingHorizontal: theme.components.input.paddingHorizontal,
-    backgroundColor: theme.color.surface.neutral.strong,
-    gap: theme.components.input.gap,
-    outlineStyle: 'solid',
-    outlineWidth: theme.components.input.borderWidth,
-    outlineColor: theme.color.border.strong,
-    variants: {
-      focus: {
-        true: {
-          outlineWidth: theme.components.input.borderWidthFocused,
-        },
-      },
-      validationStatus: {
-        invalid: {
-          borderColor: theme.color.feedback.danger.border,
-          outlineColor: theme.color.feedback.danger.border,
-        },
-        valid: {
-          borderColor: theme.color.feedback.positive.border,
-          outlineColor: theme.color.feedback.positive.border,
-        },
-        initial: {},
-      },
-      disabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-        },
-      },
-      readonly: {
-        true: {
-          borderColor: theme.color.border.subtle,
-        },
-      },
-      type: {
-        text: {},
-        password: {},
-        search: {},
-        currency: {
-          height: theme.components.input.currency.height,
-          gap: theme.components.input.currency.gap,
-        },
-        date: {},
-      },
-    },
-  },
-}));
-
-export default InputRoot;

package/src/components/Input/InputSlot.tsx

@@ -1,32 +0,0 @@
-import { View, ViewProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-
-const InputSlot = ({
-  children,
-  style,
-  accessible,
-  importantForAccessibility,
-  ...props
-}: ViewProps) => {
-  return (
-    <View
-      {...props}
-      accessible={accessible ?? false}
-      importantForAccessibility={importantForAccessibility ?? 'auto'}
-      style={[styles.container, style]}
-    >
-      {children}
-    </View>
-  );
-};
-
-InputSlot.displayName = 'InputSlot';
-
-const styles = StyleSheet.create({
-  container: {
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default InputSlot;

package/src/components/Input/index.ts

@@ -1 +0,0 @@
-export { default as Input, InputField, InputIcon, InputSlot } from './Input';

package/src/components/Label/Label.figma.tsx

@@ -1,24 +0,0 @@
-import React from "react"
-import Label from "./Label"
-import figma from "@figma/code-connect"
-
-/**
- * -- This file was auto-generated by Code Connect --
- * None of your props could be automatically mapped to Figma properties.
- * You should update the `props` object to include a mapping from your
- * code props to Figma properties, and update the `example` function to
- * return the code example you'd like to see in Figma
- */
-
-figma.connect(
-  Label,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=8145%3A617",
-  {
-    props: {
-      // No matching props could be found for these Figma properties:
-      // "label": figma.string('Label'),
-      // "optional": figma.boolean('Optional?')
-    },
-    example: (props) => <Label />,
-  },
-)

package/src/components/Label/Label.props.ts

@@ -1,9 +0,0 @@
-import { BodyTextProps } from '../BodyText';
-
-interface LabelProps extends Omit<BodyTextProps, 'size' | 'weight'> {
-  nested?: boolean;
-  disabled?: boolean;
-  variant?: 'heading' | 'body';
-}
-
-export default LabelProps;

package/src/components/Label/Label.tsx

@@ -1,44 +0,0 @@
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { Heading } from '../Heading';
-import LabelProps from './Label.props';
-
-const Label = ({ children, nested, disabled, style, variant = 'body', ...props }: LabelProps) => {
-  styles.useVariants({ disabled });
-
-  if (variant === 'heading') {
-    return (
-      <Heading size="md" style={[styles.text, style]} {...props}>
-        {children}
-      </Heading>
-    );
-  }
-
-  return (
-    <BodyText
-      size="md"
-      weight={nested ? 'regular' : 'semibold'}
-      style={[styles.text, style]}
-      {...props}
-    >
-      {children}
-    </BodyText>
-  );
-};
-
-Label.displayName = 'Label';
-
-const styles = StyleSheet.create(theme => ({
-  text: {
-    color: theme.color.text.primary,
-    variants: {
-      disabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-        },
-      },
-    },
-  },
-}));
-
-export default Label;

package/src/components/Label/index.ts

@@ -1 +0,0 @@
-export { default as Label } from './Label';

package/src/components/Link/Link.context.ts

@@ -1,10 +0,0 @@
-import { createContext, useContext } from 'react';
-import type { LinkProps } from './Link.props';
-
-export const LinkContext = createContext<{
-  inverted?: LinkProps['inverted'];
-  disabled?: LinkProps['disabled'];
-  active?: boolean;
-}>({});
-
-export const useLinkContext = () => useContext(LinkContext);

package/src/components/Link/Link.figma.tsx

@@ -1,35 +0,0 @@
-import figma from '@figma/code-connect';
-import { Link } from '../';
-
-figma.connect(Link, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=163%3A562', {
-  props: {
-    inverted: figma.boolean('Inverted?'),
-    showIcon: figma.boolean('Icon right?', {
-      false: figma.boolean('Icon left?', {
-        false: false,
-      }),
-    }),
-    iconPosition: figma.boolean('Icon right?', {
-      false: figma.boolean('Icon left?', {
-        true: 'left',
-      }),
-    }),
-    text: figma.string('Text'),
-    icon: figma.boolean('Icon right?', {
-      true: figma.instance('Icon right-20'),
-      false: figma.boolean('Icon left?', {
-        true: figma.instance('Icon left-20'),
-      }),
-    }),
-  },
-  example: props => (
-    <Link
-      icon={props.icon}
-      showIcon={props.showIcon}
-      iconPosition={props.iconPosition}
-      inverted={props.inverted}
-    >
-      {props.text}
-    </Link>
-  ),
-});

package/src/components/Link/Link.props.ts

@@ -1,18 +0,0 @@
-import { ComponentType } from 'react';
-import { PressableProps, TextProps } from 'react-native';
-import { IconProps } from '../Icon';
-
-export interface LinkProps extends Omit<PressableProps, 'children'> {
-  children: TextProps['children'];
-  href?: string;
-  target?: '_blank' | '_self' | '_parent' | '_top';
-  inverted?: boolean;
-  disabled?: boolean;
-  icon?: ComponentType;
-  iconPosition?: 'left' | 'right';
-  showIcon?: boolean;
-  textStyle?: TextProps['style'];
-  iconStyle?: IconProps['style'];
-}
-
-export default LinkProps;

package/src/components/Link/Link.stories.tsx

@@ -1,75 +0,0 @@
-import React, { ComponentType } from 'react';
-import { Link } from '.';
-import { Meta, StoryObj } from '@storybook/react-vite';
-import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
-
-const meta = {
-  title: 'Stories / Link',
-  component: Link,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    children: {
-      type: 'string',
-      control: 'text',
-      description: 'The text of the link.',
-    },
-    href: {
-      type: 'string',
-      control: 'text',
-      description: 'The URL the link will navigate to.',
-    },
-    target: {
-      options: ['_blank', '_self', '_parent', '_top'],
-      control: 'select',
-      description: 'The target of the link.',
-    },
-    disabled: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'To manually set disable to the link.',
-    },
-    inverted: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'To set the link to be inverted. (To only be used on `purple` backgrounds)',
-    },
-    icon: {
-      options: ['none', ...Object.keys(Icons).filter(icon => icon.includes('Small'))],
-      control: 'select',
-      description: 'The icon component for the link.',
-    },
-    iconPosition: {
-      options: ['left', 'right'],
-      control: 'select',
-      description: 'The position of the icon component in the link.',
-    },
-    showIcon: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'To show or hide the icon component in the link.',
-    },
-  },
-  args: {
-    children: 'Link',
-    href: 'https://www.uw.co.uk',
-    target: '_blank',
-    icon: 'ChervonRightSmallIcon' as unknown as ComponentType,
-    iconPosition: 'right',
-    showIcon: true,
-    disabled: false,
-    inverted: false,
-  },
-} satisfies Meta<typeof Link>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: ({ icon: _icon, ...args }) => {
-    // @ts-expect-error - This is a playground
-    const icon = _icon === 'none' ? undefined : Icons[_icon];
-    return <Link {...args} icon={icon} />;
-  },
-};