@utilitywarehouse/hearth-react-native 0.11.0 → 0.13.0

package/src/components/Input/Input.figma.tsx

@@ -1,115 +1,57 @@
-// import { Input } from './';
-// import figma from '@figma/code-connect';
-// import { EyeMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import figma from '@figma/code-connect';
+import Input from './Input';
 
 /**
  * -- This file was auto-generated by Code Connect --
- * `props` includes a mapping from Figma properties and variants to
- * suggested values. You should update this to match the props of your
- * code component, and update the `example` function to return the
- * code example you'd like to see in Figma
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
  */
 
-// figma.connect(
-//   Input,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=6990-3022&m=dev',
-//   {
-//     props: {
-//       state: figma.enum('state', {
-//         initial: 'initial',
-//         focus: 'focus',
-//         filled: 'filled',
-//       }),
-//       placeholder: figma.boolean('placeholder', {
-//         true: figma.nestedProps('.Parts/Input value', {
-//           text: figma.string('Text'),
-//         }),
-//         false: { text: undefined },
-//       }),
-//       validationStatus: figma.enum('validationStatus', {
-//         initial: undefined,
-//         invalid: 'invalid',
-//         valid: 'valid',
-//       }),
-//       disabled: figma.boolean('disabled'),
-//       readOnly: figma.boolean('readOnly'),
-//       iconLeft: figma.boolean('Icon Left?', {
-//         true: figma.nestedProps('.Parts/Content Left', {
-//           icon: figma.instance('Icon'),
-//         }),
-//         false: {
-//           icon: undefined,
-//         },
-//       }),
-//       value: figma.nestedProps('.Parts/Input value', {
-//         text: figma.boolean('placeholder', {
-//           true: undefined,
-//           false: figma.string('Text'),
-//         }),
-//       }),
-//     },
-//     example: props => (
-//       <Input
-//         validationStatus={props.validationStatus}
-//         placeholder={props.placeholder.text}
-//         readonly={props.readOnly}
-//         value={props.value.text}
-//         disabled={props.disabled}
-//         leadingIcon={props.iconLeft.icon}
-//       />
-//     ),
-//   }
-// );
-
-// // Password Input
-// figma.connect(
-//   Input,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=7928-5958&m=dev',
-//   {
-//     props: {
-//       state: figma.enum('state', {
-//         initial: 'initial',
-//         focus: 'focus',
-//         filled: 'filled',
-//       }),
-//       placeholder: figma.boolean('placeholder', {
-//         true: figma.nestedProps('.Parts/Input value', {
-//           text: figma.string('Text'),
-//         }),
-//         false: { text: undefined },
-//       }),
-//       validationStatus: figma.enum('validationStatus', {
-//         initial: undefined,
-//         invalid: 'invalid',
-//         valid: 'valid',
-//       }),
-//       disabled: figma.boolean('disabled'),
-//       readOnly: figma.boolean('readOnly'),
-//       iconLeft: figma.boolean('Icon Left?', {
-//         true: figma.nestedProps('.Parts/Content Left', {
-//           icon: figma.instance('Icon'),
-//         }),
-//         false: {
-//           icon: undefined,
-//         },
-//       }),
-//       value: figma.nestedProps('.Parts/Input value', {
-//         text: figma.boolean('placeholder', {
-//           true: undefined,
-//           false: figma.string('Text'),
-//         }),
-//       }),
-//     },
-//     example: props => (
-//       <Input
-//         validationStatus={props.validationStatus}
-//         placeholder={props.placeholder.text}
-//         readonly={props.readOnly}
-//         value={props.value.text}
-//         disabled={props.disabled}
-//         leadingIcon={props.iconLeft.icon}
-//         trailingIcon={EyeMediumIcon}
-//       />
-//     ),
-//   }
-// );
+figma.connect(Input, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2685%3A7021', {
+  props: {
+    // These props were automatically mapped based on your linked code:
+    disabled: figma.enum('State', {
+      Disabled: true,
+    }),
+    readonly: figma.enum('State', {
+      'Read-only': true,
+    }),
+    focused: figma.boolean('Focus?'),
+    placeholder: figma.string('Suffix'),
+    focusable: figma.boolean('Focus?'),
+    hasTVPreferredFocus: figma.boolean('Focus?'),
+    'aria-disabled': figma.enum('State', {
+      Disabled: true,
+    }),
+    // No matching props could be found for these Figma properties:
+    // "helperText": figma.boolean('Helper text?'),
+    // "label": figma.string('Label'),
+    // "validation": figma.string('Validation'),
+    // "helperText": figma.string('Helper text'),
+    // "value": figma.string('Value'),
+    // "suffix": figma.boolean('Suffix?'),
+    // "prefix": figma.boolean('Prefix?'),
+    // "prefix": figma.string('Prefix'),
+    // "suffix": figma.string('Suffix'),
+    // "optional": figma.boolean('Optional?'),
+    // "valueType": figma.enum('Value type', {
+    //   "Empty": "empty",
+    //   "Placeholder": "placeholder",
+    //   "Filled": "filled"
+    // }),
+    // "labelVariant": figma.enum('Label variant', {
+    //   "Body": "body",
+    //   "Heading": "heading"
+    // })
+  },
+  example: props => (
+    <Input
+      disabled={props.disabled}
+      readonly={props.readonly}
+      focused={props.focused}
+      placeholder={props.placeholder}
+      focusable={props.focusable}
+    />
+  ),
+});

package/src/components/Input/Input.stories.tsx

@@ -1,10 +1,13 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import * as Icons from '@utilitywarehouse/hearth-react-native-icons';
 import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useState } from 'react';
-import { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
+import { useRef, useState } from 'react';
+import { NativeSyntheticEvent, TextInput, TextInputChangeEventData, View } from 'react-native';
 import { Input } from '.';
 import { VariantTitle } from '../../../docs/components';
+import { useTheme } from '../../hooks';
+import { BodyText } from '../BodyText';
+import { Button } from '../Button';
 import { Flex } from '../Flex';
 
 const meta = {
@@ -73,6 +76,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
+  // @ts-expect-error - This is a playground
   render: ({ leadingIcon: leading, trailingIcon: trailing, ...args }) => {
     // @ts-expect-error - This is a playground
     const leadingIcon = leading === 'none' ? undefined : Icons[leading];
@@ -152,3 +156,72 @@ export const Variants: Story = {
     );
   },
 };
+
+export const RefTest: Story = {
+  parameters: {
+    controls: { include: [] },
+  },
+  render: () => {
+    const inputRef = useRef<TextInput>(null);
+    const [refStatus, setRefStatus] = useState('Ref not tested yet');
+    const theme = useTheme();
+
+    const handleFocus = () => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+        setRefStatus('✅ Ref works! Input focused programmatically');
+      } else {
+        setRefStatus('❌ Ref is null');
+      }
+    };
+
+    const handleBlur = () => {
+      if (inputRef.current) {
+        inputRef.current.blur();
+        setRefStatus('✅ Ref works! Input blurred programmatically');
+      } else {
+        setRefStatus('❌ Ref is null');
+      }
+    };
+
+    const handleClear = () => {
+      if (inputRef.current) {
+        inputRef.current.clear();
+        setRefStatus('✅ Ref works! Input cleared programmatically');
+      } else {
+        setRefStatus('❌ Ref is null');
+      }
+    };
+
+    return (
+      <Flex direction="column" space="lg">
+        <VariantTitle title="Ref Test">
+          <Input
+            ref={inputRef}
+            placeholder="Test ref functionality"
+            defaultValue="Try the buttons below"
+          />
+        </VariantTitle>
+        <VariantTitle title="Status">
+          <Flex direction="column" space="sm">
+            <Flex direction="row" space="sm">
+              <Button onPress={handleFocus}>Focus Input</Button>
+              <Button onPress={handleBlur}>Blur Input</Button>
+              <Button onPress={handleClear}>Clear Input</Button>
+            </Flex>
+            <View
+              style={{
+                marginTop: 8,
+                padding: 8,
+                backgroundColor: theme.color.background.secondary,
+                borderRadius: 4,
+              }}
+            >
+              <BodyText>{refStatus}</BodyText>
+            </View>
+          </Flex>
+        </VariantTitle>
+      </Flex>
+    );
+  },
+};

package/src/components/Input/Input.tsx

@@ -1,5 +1,6 @@
 import { createInput } from '@gluestack-ui/input';
-import { ComponentType, useState } from 'react';
+import { ComponentType, forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { TextInput } from 'react-native';
 import type InputProps from './Input.props';
 
 import {
@@ -29,108 +30,119 @@ export const InputSlot = InputComponent.Slot;
 export const InputField = InputComponent.Input;
 export const InputIcon = InputComponent.Icon;
 
-const Input = ({
-  validationStatus = 'initial',
-  children,
-  disabled,
-  focused,
-  readonly,
-  leadingIcon,
-  trailingIcon,
-  type,
-  showPasswordToggle = true,
-  onClear,
-  format,
-  loading,
-  clearable = false,
-  required,
-  inBottomSheet = false,
-  ...props
-}: InputProps) => {
-  const formFieldContext = useFormFieldContext();
-  const { disabled: formFieldDisabled } = formFieldContext;
-  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
-  const isRequired = formFieldContext?.required ?? required;
-  const [fieldType, setFieldType] = useState<'password' | 'text'>(
-    type === 'password' ? 'password' : 'text'
-  );
-  const { color } = useTheme();
+const Input = forwardRef<TextInput, InputProps>(
+  (
+    {
+      validationStatus = 'initial',
+      children,
+      disabled,
+      focused,
+      readonly,
+      leadingIcon,
+      trailingIcon,
+      type,
+      showPasswordToggle = true,
+      onClear,
+      format,
+      loading,
+      clearable = false,
+      required,
+      inBottomSheet = false,
+      ...props
+    },
+    ref
+  ) => {
+    const formFieldContext = useFormFieldContext();
+    const { disabled: formFieldDisabled } = formFieldContext;
+    const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+    const isRequired = formFieldContext?.required ?? required;
+    const [fieldType, setFieldType] = useState<'password' | 'text'>(
+      type === 'password' ? 'password' : 'text'
+    );
+    const { color } = useTheme();
+    const inputRef = useRef<TextInput>(null);
 
-  const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
-  const shouldShowClear = clearable && !!(props as InputWithoutChildrenProps)?.value;
+    // Expose TextInput methods to parent components
+    useImperativeHandle(ref, () => inputRef.current as TextInput, []);
 
-  const toggleFieldType = () => {
-    setFieldType(fieldType === 'password' ? 'text' : 'password');
-  };
+    const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
+    const shouldShowClear = clearable && !!(props as InputWithoutChildrenProps)?.value;
 
-  const leadingIconComponent = ((): ComponentType | undefined => {
-    if (type === 'search') {
-      return SearchMediumIcon;
-    }
-    return leadingIcon;
-  })();
+    const toggleFieldType = () => {
+      setFieldType(fieldType === 'password' ? 'text' : 'password');
+    };
 
-  const getInputMode = (() => {
-    if (type === 'search') {
-      return 'search';
-    }
-    return undefined;
-  })();
+    const leadingIconComponent = ((): ComponentType | undefined => {
+      if (type === 'search') {
+        return SearchMediumIcon;
+      }
+      return leadingIcon;
+    })();
 
-  return (
-    <InputComponent
-      {...(children ? props : {})}
-      validationStatus={validationStatusFromContext}
-      isInvalid={validationStatusFromContext === 'invalid'}
-      isReadOnly={readonly}
-      isDisabled={formFieldDisabled ?? disabled}
-      isFocused={focused}
-      type={type as undefined}
-      isRequired={isRequired}
-    >
-      {children ? (
-        <>{children}</>
-      ) : (
-        <>
-          {!!leadingIconComponent && (
-            <InputSlot>
-              <InputIcon as={leadingIconComponent} />
-            </InputSlot>
-          )}
-          <InputField
-            type={fieldType}
-            inputMode={getInputMode}
-            inBottomSheet={inBottomSheet}
-            {...props}
-          />
-          {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>
-          )}
-          {!!trailingIcon && (
-            <InputSlot>
-              <InputIcon as={trailingIcon} />
-            </InputSlot>
-          )}
-        </>
-      )}
-    </InputComponent>
-  );
-};
+    const getInputMode = (() => {
+      if (type === 'search') {
+        return 'search';
+      }
+      return undefined;
+    })();
+
+    return (
+      <InputComponent
+        {...(children ? props : {})}
+        validationStatus={validationStatusFromContext}
+        isInvalid={validationStatusFromContext === 'invalid'}
+        isReadOnly={readonly}
+        isDisabled={formFieldDisabled ?? disabled}
+        isFocused={focused}
+        type={type as undefined}
+        isRequired={isRequired}
+      >
+        {children ? (
+          <>{children}</>
+        ) : (
+          <>
+            {!!leadingIconComponent && (
+              <InputSlot>
+                <InputIcon as={leadingIconComponent} />
+              </InputSlot>
+            )}
+            <InputField
+              // @ts-expect-error - ref forwarding issue
+              ref={inputRef}
+              type={fieldType}
+              inputMode={getInputMode}
+              inBottomSheet={inBottomSheet}
+              {...props}
+            />
+            {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>
+            )}
+            {!!trailingIcon && (
+              <InputSlot>
+                <InputIcon as={trailingIcon} />
+              </InputSlot>
+            )}
+          </>
+        )}
+      </InputComponent>
+    );
+  }
+);
 
 Input.displayName = 'Input';
 

package/src/components/Input/InputField.tsx

@@ -1,25 +1,38 @@
 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 = ({
-  style,
-  inBottomSheet = false,
-  ...props
-}: TextInputProps & { inBottomSheet?: boolean }) => {
-  const { disabled, focused = false, type } = useInputContext();
-  styles.useVariants({ focused, type });
-  const { color } = useTheme();
+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 (
+        // @ts-expect-error - BottomSheetTextInput has incompatible event types with TextInput
+        <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]}
+        />
+      );
+    }
 
-  if (inBottomSheet) {
     return (
-      // @ts-expect-error - BottomSheetTextInput type issue
-      <BottomSheetTextInput
+      <RNTextInput
+        ref={ref}
         placeholderTextColor={color.text.secondary}
-        selectionColor={color.purple[700]}
-        cursorColor={color.purple[700]}
+        selectionColor={color.surface.brand.default}
+        cursorColor={color.surface.brand.default}
         verticalAlign="middle"
         aria-disabled={disabled}
         {...props}
@@ -27,19 +40,7 @@ const InputField = ({
       />
     );
   }
-
-  return (
-    <RNTextInput
-      placeholderTextColor={color.text.secondary}
-      selectionColor={color.purple[700]}
-      cursorColor={color.purple[700]}
-      verticalAlign="middle"
-      aria-disabled={disabled}
-      {...props}
-      style={[styles.input, style]}
-    />
-  );
-};
+);
 
 InputField.displayName = 'InputField';
 

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

@@ -0,0 +1,24 @@
+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/Link/Link.figma.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import Link from "./Link"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from your code props to Figma properties.
+ * You should check this is correct, and update the `example` function
+ * to return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Link,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=163%3A562",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      inverted: figma.boolean("Inverted?"),
+      disabled: figma.enum("State", {
+        Active: true,
+      }),
+      showIcon: figma.boolean("Icon right?"),
+      focusable: figma.enum("State", {
+        Focus: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "iconLeft": figma.boolean('Icon left?'),
+      // "iconRight": figma.boolean('Icon right?'),
+      // "iconRight20": figma.instance('Icon right-20'),
+      // "iconLeft20": figma.instance('Icon left-20'),
+      // "text": figma.string('Text')
+    },
+    example: (props) => (
+      <Link
+        inverted={props.inverted}
+        disabled={props.disabled}
+        showIcon={props.showIcon}
+        focusable={props.focusable}
+      />
+    ),
+  },
+)