@utilitywarehouse/hearth-react-native 0.1.0

package/src/components/InlineLink/InlineLink.tsx

@@ -0,0 +1,26 @@
+ 
+import type { InlineLinkProps } from './InlineLink.props';
+import { createLink } from '@gluestack-ui/link';
+import InlineLinkRoot from './InlineLinkRoot';
+
+const InlineLinkComponent = createLink({
+  Root: InlineLinkRoot,
+  Text: () => null,
+});
+
+const InlineLink = ({
+  children,
+  disabled = false,
+  target = '_self',
+  ...props
+}: InlineLinkProps) => {
+  const InlineLinkAny = InlineLinkComponent as any;
+  return (
+    <InlineLinkAny {...props} isDisabled={disabled} isExternal={target === '_blank'}>
+      {children as any}
+    </InlineLinkAny>
+  );
+};
+InlineLink.displayName = 'InlineLink';
+
+export default InlineLink;

package/src/components/InlineLink/InlineLinkRoot.tsx

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+import { Text } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { InlineLinkContext } from './InlineLink.context';
+import InlineLinkProps from './InlineLink.props';
+
+const InlineLinkRoot = ({
+  children,
+  inverted = false,
+  states,
+  ...props
+}: InlineLinkProps & { states?: { active?: boolean; disabled?: boolean } }) => {
+  const { active, disabled = false } = states || {};
+  styles.useVariants({ disabled, inverted, active });
+  const value = useMemo(() => ({ inverted, disabled, active }), [inverted, disabled, active]);
+  return (
+    <InlineLinkContext.Provider value={value}>
+      <Text {...props} style={[styles.container, props.style]}>
+        {children}
+      </Text>
+    </InlineLinkContext.Provider>
+  );
+};
+
+InlineLinkRoot.displayName = 'InlineLinkRoot';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    color: theme.components.inlineLink.color,
+    textDecorationStyle: 'solid',
+    textDecorationLine: 'underline',
+    textDecorationColor: theme.components.inlineLink.color,
+    _web: {
+      '_focus-visible': {
+        borderRadius: theme.borderRadius.xs,
+        outlineStyle: 'solid',
+        outlineWidth: 2,
+        outlineColor: theme.components.focus.border,
+        outlineOffset: 1,
+        boxShadow: 'none',
+      },
+      _hover: {
+        textDecorationLine: 'none',
+      },
+    },
+    variants: {
+      active: {
+        true: {
+          color: theme.components.inlineLink.color,
+        },
+      },
+      inverted: {
+        true: {
+          color: theme.components.inlineLink.inverted.color,
+          textDecorationColor: theme.components.inlineLink.inverted.color,
+          _web: {
+            '_focus-visible': {
+              outlineColor: theme.components.focus.borderInverted,
+            },
+          },
+        },
+      },
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+      inline: {
+        true: {
+          color: theme.color.blue[700],
+          textDecorationColor: theme.color.blue[700],
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        inverted: true,
+        active: true,
+        styles: {
+          color: theme.components.inlineLink.inverted.colorActive,
+        },
+      },
+    ],
+  },
+}));
+
+export default InlineLinkRoot;

package/src/components/InlineLink/index.ts

@@ -0,0 +1,3 @@
+export { default as InlineLink } from './InlineLink';
+export type { InlineLinkProps } from './InlineLink.props';
+export { InlineLinkContext, useInlineLinkContext } from './InlineLink.context';

package/src/components/Input/Input.context.ts

@@ -0,0 +1,6 @@
+import { createContext, useContext } from 'react';
+import { InputContextValue } from './Input.props';
+
+export const InputContext = createContext<InputContextValue>({});
+
+export const useInputContext = () => useContext(InputContext);

package/src/components/Input/Input.docs.mdx

@@ -0,0 +1,243 @@
+import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
+import * as Stories from './Input.stories';
+import { Input, InputField, InputIcon, InputSlot, Center, Pressable, FormField } from '../../';
+import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import {
+  ViewFigmaButton,
+  BackToTopButton,
+  UsageWrap,
+  AdvancedInputExample,
+} from '../../../docs/components';
+
+<Meta title="Forms / Input" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1-152" />
+
+# Input
+
+The input component is a text field that allows users to enter text, numbers, or other data. It is commonly used in forms and search fields.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+  - [`Input`](#input)
+  - [`InputField`](#inputfield)
+  - [`InputIcon`](#inputicon)
+  - [`InputSlot`](#inputslot)
+- [Advanced Usage](#advanced-usage)
+- [Variants](#variants)
+- [Examples](#examples)
+  - [With `FormField`](#with-formfield)
+- [Accessibility](#accessibility)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <Input>
+      <InputSlot>
+        <InputIcon as={EmailMediumIcon} />
+      </InputSlot>
+      <InputField placeholder="Placeholder" onChange={() => console.log('###')} />
+    </Input>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Input } from '@utilitywarehouse/hearth-react-native';
+import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  const handleChange = e => {
+    setValue(e.target.value);
+  };
+  return (
+    <Input
+      onChange={handleChange}
+      value={value}
+      placeholder="Placeholder"
+      leadingIcon={EmailMediumIcon}
+    />
+  );
+};
+```
+
+## Props
+
+### `Input`
+
+When using the component with basic usage the `Input` inherits all of the React Native [`TextInput` props](https://reactnative.dev/docs/textinput).
+Otherwise when used with children including the `InputField`, `InputSlot` and `InputIcon` components, the `Input` component inherits
+all of the React Native [`View` props](https://reactnative.dev/docs/view).
+
+| Prop             | Type                               | Default     | Description                                                                                                                                                             |
+| ---------------- | ---------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| type             | `'text' \| 'password'`             | `'text'`    | The type of the input.                                                                                                                                                  |
+| validationStatus | `'initial' \| 'valid' \| 'invalid` | `'initial'` | The validation status of the input.                                                                                                                                     |
+| disabled         | boolean                            | `false`     | Disables the input.                                                                                                                                                     |
+| readonly         | boolean                            | `false`     | Makes the input read-only.                                                                                                                                              |
+| focused          | boolean                            | `false`     | Sets focus on the input.                                                                                                                                                |
+| leadingIcon      | React.ComponentType                | `-`         | The leading icon of the input. **(Only to be used if the input has no children)**                                                                                       |
+| trailingIcon     | React.ComponentType                | `-`         | The trailing icon of the input. **(Only to be used if the input has no children)**                                                                                      |
+| value            | string                             | `-`         | The value of the input. **(Only to be used if the input has no children)**                                                                                              |
+| onChange         | function                           | `-`         | Callback function that is triggered when the input value changes. **(Only to be used if the input has no children)** **(Only to be used if the input has no children)** |
+| onBlur           | function                           | `-`         | Callback function that is triggered when the input loses focus. **(Only to be used if the input has no children)**                                                      |
+| onFocus          | function                           | `-`         | Callback function that is triggered when the input gains focus. **(Only to be used if the input has no children)**                                                      |
+| placeholder      | string                             | `-`         | The placeholder text for the input. **(Only to be used if the input has no children)**                                                                                  |
+| required         | boolean                            | `true`      | Indicates that the input is required. **(Only to be used if the input has no children)**                                                                                |
+
+If the `leadingIcon` or `trailingIcon` props are used, the `Input` component should not have any children.
+
+### `InputField`
+
+The `InputField` inherits all of the React Native [`TextInput` props](https://reactnative.dev/docs/textinput).
+
+| Prop        | Type                   | Default  | Description                                                       |
+| ----------- | ---------------------- | -------- | ----------------------------------------------------------------- |
+| type        | `'text' \| 'password'` | `'text'` | The type of the input.                                            |
+| value       | string                 | `-`      | The value of the input.                                           |
+| onChange    | function               | `-`      | Callback function that is triggered when the input value changes. |
+| onBlur      | function               | `-`      | Callback function that is triggered when the input loses focus.   |
+| onFocus     | function               | `-`      | Callback function that is triggered when the input gains focus.   |
+| placeholder | string                 | `-`      | The placeholder text for the input.                               |
+| required    | boolean                | `true`   | Indicates that the input is required.                             |
+
+### `InputIcon`
+
+| Prop | Type   | Default | Description         |
+| ---- | ------ | ------- | ------------------- |
+| as   | string |         | The icon component. |
+
+### `InputSlot`
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| -    | -    | -       | -           |
+
+## Advanced Usage
+
+The `Input` component can be used with the `InputField`, `InputSlot` and `InputIcon` components to create a custom input field.
+
+<UsageWrap>
+  <Center>
+    <AdvancedInputExample />
+  </Center>
+</UsageWrap>
+
+```tsx
+import {
+  Input,
+  InputField,
+  InputIcon,
+  InputSlot,
+  Pressable,
+} from '@utilitywarehouse/hearth-react-native';
+import {
+  EmailMediumIcon,
+  EyeMediumIcon,
+  EyeOffMediumIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+import { useState } from 'react';
+import { NativeSyntheticEvent, TextInputChangeEventData } from 'react-native';
+
+const AdvancedExample = () => {
+  const [value, setValue] = useState<string>('');
+  const [fieldType, setFieldType] = useState<'password' | 'text'>('password');
+  const handleChange = (e: NativeSyntheticEvent<TextInputChangeEventData>) => {
+    setValue(e.nativeEvent.text);
+  };
+  const handleToggleFieldType = () => {
+    setFieldType(fieldType === 'password' ? 'text' : 'password');
+  };
+  return (
+    <Input>
+      <InputSlot>
+        <InputIcon as={EmailMediumIcon} />
+      </InputSlot>
+      <InputField
+        onChange={handleChange}
+        type={fieldType}
+        value={value}
+        placeholder="Secret email address"
+      />
+      <InputSlot>
+        <Pressable onPress={handleToggleFieldType}>
+          <InputIcon as={fieldType === 'password' ? EyeMediumIcon : EyeOffMediumIcon} />
+        </Pressable>
+      </InputSlot>
+    </Input>
+  );
+};
+
+export default AdvancedExample;
+```
+
+## Variants
+
+The `Input` component has the following variants:
+
+<Canvas of={Stories.Variants} />
+
+## Examples
+
+### With `FormField`
+
+The `Input` component can be used with the `FormField` component to create a custom input field.
+For more information on the `FormField` componment view the [docs here](/docs/components-form-field--docs).
+
+<UsageWrap>
+  <Center>
+    <FormField label="Label" helperText="Helper text" helperPosition="bottom">
+      <Input onChange={() => console.log('###')} placeholder="Placeholder" />
+    </FormField>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { FormField, Input } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  const handleChange = e => {
+    setValue(e.target.value);
+  };
+  return (
+    <FormField label="Label" helperText="Helper text" helperPosition="bottom">
+      <Input onChange={handleChange} value={value} placeholder="Placeholder" />
+    </FormField>
+  );
+};
+```
+
+## Accessibility
+
+We have outlined the various features that ensure the Input component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the [WAI-ARIA design pattern](https://www.w3.org/TR/wai-aria-1.2/#textbox).
+
+### Keyboard
+
+- Setting the aria-label and aria-hint to help users understand the purpose and function of the Input
+
+### Screen Reader
+
+- Compatible with screen readers such as VoiceOver and Talk-back.
+- The accessible and aria-label props to provide descriptive information about the Input
+- Setting aria-traits and aria-hint to provide contextual information about the various states of the Input, such as "double tap to edit".
+
+### Focus Management
+
+- The onFocus and onBlur props to manage focus states and provide visual cues to users. This is especially important for users who rely on keyboard navigation.
+
+### States
+
+- In error state, aria-invalid will be passed to indicate that the Input has an error, and providing support for an aria-errormessage to describe the error in more detail.
+- In disabled state, aria-hidden will be passed to make input not focusable.
+- In required state, aria-required will be passed to indicate that the Input is required.

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

@@ -0,0 +1,115 @@
+// import { Input } from './';
+// import figma from '@figma/code-connect';
+// import { EyeMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+
+/**
+ * -- 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
+ */
+
+// 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}
+//       />
+//     ),
+//   }
+// );

package/src/components/Input/Input.props.ts

@@ -0,0 +1,122 @@
+import type { ComponentType } from 'react';
+import type { TextInputProps, ViewProps } from 'react-native';
+
+// Base props common to all input types
+export interface InputBaseProps {
+  /**
+   * If true, the input will be disabled.
+   *
+   * @type boolean
+   * @example
+   * ```tsx
+   * <Input disabled={true} />
+   * ```
+   */
+  disabled?: boolean;
+  /**
+   * The validation status of the Input component.
+   *
+   * @type 'initial' | 'valid' | 'invalid'
+   * @example
+   * ```tsx
+   * <Input validationStatus="valid" />
+   * ```
+   */
+  validationStatus?: 'initial' | 'valid' | 'invalid';
+  readonly?: boolean;
+  focused?: boolean;
+  placeholder?: string;
+}
+
+// For inputs that have children
+export interface InputWithChildrenProps extends InputBaseProps, ViewProps {
+  children: ViewProps['children'];
+  type?: undefined;
+  showPasswordToggle?: never;
+  format?: never;
+  loading?: never;
+  clearable?: never;
+  onClear?: never;
+  leadingIcon?: never;
+  trailingIcon?: never;
+  required?: never;
+}
+
+// Base for inputs without children
+interface InputWithoutChildrenBaseProps extends InputBaseProps, Omit<TextInputProps, 'children'> {
+  children?: never;
+  leadingIcon?: ComponentType;
+  trailingIcon?: ComponentType;
+  required?: boolean;
+}
+
+// Specific input types with their unique props
+interface TextInputSpecificProps extends InputWithoutChildrenBaseProps {
+  type?: 'text';
+  showPasswordToggle?: never;
+  format?: never;
+  loading?: never;
+  clearable?: never;
+  onClear?: never;
+}
+
+interface PasswordInputSpecificProps extends InputWithoutChildrenBaseProps {
+  type: 'password';
+  showPasswordToggle?: boolean;
+  format?: never;
+  loading?: never;
+  clearable?: never;
+  onClear?: never;
+}
+
+interface DateInputSpecificProps extends InputWithoutChildrenBaseProps {
+  type: 'date';
+  format?: string;
+  showPasswordToggle?: never;
+  loading?: never;
+  clearable?: never;
+  onClear?: never;
+}
+
+interface CurrencyInputSpecificProps extends InputWithoutChildrenBaseProps {
+  type: 'currency';
+  format?: string;
+  showPasswordToggle?: never;
+  loading?: never;
+  clearable?: never;
+  onClear?: never;
+}
+
+interface SearchInputSpecificProps extends InputWithoutChildrenBaseProps {
+  type: 'search';
+  loading?: boolean;
+  clearable?: boolean;
+  onClear?: () => void;
+  showPasswordToggle?: never;
+  format?: never;
+}
+
+// Union of all input types
+export type InputWithoutChildrenProps =
+  | TextInputSpecificProps
+  | PasswordInputSpecificProps
+  | DateInputSpecificProps
+  | CurrencyInputSpecificProps
+  | SearchInputSpecificProps;
+
+/**
+ * Props for the Input component.
+ * This is a discriminated union type where the 'type' property
+ * determines which specific props are available.
+ */
+type InputProps = InputWithChildrenProps | InputWithoutChildrenProps;
+
+export type InputContextValue = {
+  disabled?: InputProps['disabled'];
+  focused?: InputProps['focused'];
+  readonly?: InputProps['readonly'];
+  validationStatus?: InputProps['validationStatus'];
+  type?: InputProps['type'];
+};
+
+export default InputProps;