@utilitywarehouse/hearth-react-native 0.15.3 → 0.16.1

package/src/components/Textarea/Textarea.docs.mdx

@@ -1,8 +1,8 @@
-import { Meta, Controls, Story, Canvas } from '@storybook/addon-docs/blocks';
-import * as Stories from './Textarea.stories';
-import { Textarea, TextareaField, Center, Pressable } from '../..';
+import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
 import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { ViewFigmaButton, BackToTopButton, UsageWrap } from '../../../docs/components';
+import { Center, Pressable, Textarea, TextareaField } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Textarea.stories';
 
 <Meta title="Forms / Textarea" />
 
@@ -19,6 +19,7 @@ The input component is a text field that allows users to enter text, numbers, or
 - [Props](#props)
   - [`Textarea`](#input)
   - [`TextareaField`](#inputfield)
+- [Examples](#examples)
 - [Accessibility](#accessibility)
 
 ## Playground
@@ -61,14 +62,21 @@ all of the React Native [`View` props](https://reactnative.dev/docs/view).
 | ---------------- | ---------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | 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.                                                                                                                                                |
-| 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)**                                                                                  |
+| disabled         | `boolean`                          | `false`     | Disables the input.                                                                                                                                                     |
+| readonly         | `boolean`                          | `false`     | Makes the input read-only.                                                                                                                                              |
+| focused          | `boolean`                          | `false`     | Sets focus on the input.                                                                                                                                                |
+| label            | `string`                           | `-`         | The label for the input. **(Only to be used if the input has no children)**                                                                                             |
+| labelVariant     | `'heading' \| 'body'`              | `'body'`    | The variant of the label text. **(Only to be used if the input has no children)**                                                                                       |
+| helperText       | `string`                           | `-`         | Helper text to display below the input. **(Only to be used if the input has no children)**                                                                              |
+| helperIcon       | `ComponentType`                    | `-`         | Icon to display alongside the helper text. **(Only to be used if the input has no children)**                                                                           |
+| validText        | `string`                           | `-`         | Text to display when validation status is 'valid'. **(Only to be used if the input has no children)**                                                                   |
+| invalidText      | `string`                           | `-`         | Text to display when validation status is 'invalid'.                                                                                                                    |
+| required         | `boolean`                          | `false`     | Whether the input is required. **(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)**                                                                                  |
 
 If the `leadingIcon` or `trailingIcon` props are used, the `Textarea` component should not have any children.
 
@@ -79,11 +87,48 @@ The `TextareaField` inherits all of the React Native [`TextTextarea` props](http
 | 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.                               |
+| 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.                               |
+
+## Examples
+
+### With Label and Helper Text
+
+The `Textarea` component can display a label and helper text by passing the appropriate props.
+
+<UsageWrap>
+  <Center>
+    <Textarea
+      label="Description"
+      helperText="Provide a detailed description"
+      placeholder="Enter your text here..."
+      onChange={() => console.log('###')}
+    />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Textarea } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState('');
+  const handleChange = e => {
+    setValue(e.target.value);
+  };
+  return (
+    <Textarea
+      label="Description"
+      helperText="Provide a detailed description"
+      placeholder="Enter your text here..."
+      value={value}
+      onTextChange={handleChange}
+    />
+  );
+};
+```
 
 ## Accessibility
 
@@ -95,6 +140,9 @@ We have outlined the various features that ensure the Textarea component is acce
 
 ### Screen Reader
 
+- When setting the label prop, it is associated with the Textarea using aria-label.
+- When setting the helperText prop, it is associated with the Textarea using aria-describedby.
+- The required prop to indicate if the Textarea is required or optional and is read out by screen readers.
 - Compatible with screen readers such as VoiceOver and Talk-back.
 - The accessible and aria-label props to provide descriptive information about the Textarea
 - Setting aria-traits and aria-hint to provide contextual information about the various states of the Textarea, such as "double tap to edit".

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

@@ -24,6 +24,14 @@ export interface TextareaBaseProps {
   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 {}

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

@@ -1,5 +1,5 @@
-import { Textarea } from '.';
 import { Meta, StoryObj } from '@storybook/react-vite';
+import { Textarea } from '.';
 
 const meta = {
   title: 'Stories / Textarea',
@@ -13,13 +13,34 @@ const meta = {
       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',

package/src/components/Textarea/Textarea.tsx

@@ -1,9 +1,10 @@
 import { createTextarea } from '@gluestack-ui/textarea';
 import type TextareaProps from './Textarea.props';
 
-import TextareaRoot from './TextareaRoot';
+import { useEffect } from 'react';
+import { FormField, useFormFieldContext } from '../FormField';
 import TextareaFieldComponent from './TextareaField';
-import { useFormFieldContext } from '../FormField';
+import TextareaRoot from './TextareaRoot';
 
 export const TextareaComponent = createTextarea({
   Root: TextareaRoot,
@@ -18,29 +19,96 @@ const Textarea = ({
   disabled,
   focused,
   readonly,
+  label,
+  labelVariant,
+  helperText,
+  validText,
+  invalidText,
+  required,
+  helperIcon,
   ...props
 }: TextareaProps) => {
   const formFieldContext = useFormFieldContext();
-  const { disabled: formFieldDisabled } = formFieldContext;
-  const validationStatusFromContext = formFieldContext?.validationStatus ?? validationStatus;
+  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;
+
+  useEffect(() => {
+    if (formFieldContext?.setShouldHandleAccessibility) {
+      formFieldContext.setShouldHandleAccessibility(true);
+    }
+  }, []);
+
+  const getAccessibilityLabel = () => {
+    let accessibilityLabel = '';
+    if (textareaLabel) {
+      accessibilityLabel = accessibilityLabel + textareaLabel;
+    }
+    if (textareaRequired) {
+      accessibilityLabel = accessibilityLabel + ', required';
+    }
+
+    return accessibilityLabel || props.accessibilityLabel;
+  };
+
+  const getAccessibilityHint = () => {
+    let accessibilityHint = '';
+    if (textareaHelperText) {
+      accessibilityHint = accessibilityHint + textareaHelperText;
+    }
+    if (textareaValidationStatus !== 'initial') {
+      if (accessibilityHint.length > 0) {
+        accessibilityHint = accessibilityHint + ', ';
+      }
+      if (textareaValidationStatus === 'invalid' && textareaInvalidText) {
+        accessibilityHint = accessibilityHint + textareaInvalidText;
+      }
+      if (textareaValidationStatus === 'valid' && textareaValidText) {
+        accessibilityHint = accessibilityHint + textareaValidText;
+      }
+    }
+    return accessibilityHint || props.accessibilityHint;
+  };
 
   return (
-    <TextareaComponent
-      {...(children ? props : {})}
-      validationStatus={validationStatusFromContext}
-      isInvalid={validationStatusFromContext === 'invalid'}
-      isReadOnly={readonly}
-      isDisabled={formFieldDisabled ?? disabled}
-      isFocused={focused}
+    <FormField
+      label={label}
+      labelVariant={labelVariant}
+      helperText={helperText}
+      helperIcon={helperIcon}
+      validText={validText}
+      invalidText={invalidText}
+      required={required}
+      validationStatus={validationStatus}
+      disabled={disabled}
+      readonly={readonly}
+      accessibilityHandledByChildren
     >
-      {children ? (
-        <>{children}</>
-      ) : (
-        <>
-          <TextareaField {...props} />
-        </>
-      )}
-    </TextareaComponent>
+      <TextareaComponent
+        {...(children ? props : {})}
+        validationStatus={textareaValidationStatus}
+        isInvalid={textareaValidationStatus === 'invalid'}
+        isReadOnly={textareaReadonly}
+        isDisabled={textareaDisabled}
+        isFocused={focused}
+        required={textareaRequired}
+        aria-label={getAccessibilityLabel()}
+        accessibilityHint={getAccessibilityHint()}
+      >
+        {children ? (
+          <>{children}</>
+        ) : (
+          <>
+            <TextareaField {...props} />
+          </>
+        )}
+      </TextareaComponent>
+    </FormField>
   );
 };
 

package/src/components/ThemedImage/ThemedImage.stories.tsx

@@ -33,9 +33,9 @@ export const Playground: Story = {
   render: () => (
     <Box gap="200">
       <ThemedImage
-        // @ts-ignore
+        // @ts-expect-error - This is a playground
         light={<SpotBillingLight width={200} height={200} />}
-        // @ts-ignore
+        // @ts-expect-error - This is a playground
         dark={<SpotBillingDark width={200} height={200} />}
       />
     </Box>
@@ -49,9 +49,9 @@ export const WithSpotIllustrations: Story = {
   render: () => (
     <Box flexDirection="row" flexWrap="wrap" gap="200">
       <ThemedImage
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         light={<SpotBillingLight width={120} height={120} />}
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         dark={<SpotBillingDark width={120} height={120} />}
       />
     </Box>
@@ -81,9 +81,9 @@ export const WithSceneIllustrations: Story = {
   render: () => (
     <Box gap="200">
       <ThemedImage
-        //  @ts-ignore
+        //  @ts-expect-error - Ignore TS2322 for Storybook stories
         light={<SceneBroadbandLight width={300} height={200} />}
-        //  @ts-ignore
+        //  @ts-expect-error - Ignore TS2322 for Storybook stories
         dark={<SceneBroadbandDark width={300} height={200} />}
       />
     </Box>
@@ -129,21 +129,21 @@ export const WithCustomSize: Story = {
   render: () => (
     <Box flexDirection="row" flexWrap="wrap" gap="200" alignItems="center">
       <ThemedImage
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         light={<SpotBillingLight width={80} height={80} />}
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         dark={<SpotBillingDark width={80} height={80} />}
       />
       <ThemedImage
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         light={<SpotBillingLight width={120} height={120} />}
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         dark={<SpotBillingDark width={120} height={120} />}
       />
       <ThemedImage
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         light={<SpotBillingLight width={160} height={160} />}
-        // @ts-ignore
+        // @ts-expect-error - Ignore TS2322 for Storybook stories
         dark={<SpotBillingDark width={160} height={160} />}
       />
     </Box>
@@ -163,9 +163,9 @@ export const WithAccessibility: Story = {
   render: () => (
     <Box gap="200">
       <ThemedImage
-        // @ts-ignore
+        // @ts-expect-error - This is a playground
         light={<MascotEnergyLight width={150} height={150} />}
-        // @ts-ignore
+        // @ts-expect-error - This is a playground
         dark={<MascotEnergyDark width={150} height={150} />}
         accessible={true}
         accessibilityLabel="Energy service mascot illustration"

package/src/components/Toast/ToastItem.tsx

@@ -45,7 +45,7 @@ const ToastItem = forwardRef<ToastItemHandle, Props>(({ toast, onClose }, ref) =
     }, 100);
 
     return () => clearTimeout(timer);
-  }, [toast.text, toast.actionText]);
+  }, [toast.text, toast.actionText, translateY, opacity]);
 
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: translateY.value + gestureTranslateY.value }],

package/src/components/ToggleButton/ToggleButtonIcon.tsx

@@ -19,7 +19,7 @@ const ButtonIcon = ({
       {...props}
       style={
         Platform.OS === 'web'
-          ? // @ts-ignore
+          ? // @ts-expect-error - Spread types may only be created from object types.
             { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as StyleProp<ViewStyle>, props.style]
       }

package/src/components/ToggleButton/ToggleButtonRoot.tsx

@@ -1,6 +1,5 @@
 import { GestureResponderEvent, Pressable, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useCardPressHandlerContext } from '../Card';
 import type { ToggleButtonProps } from './ToggleButton.props';
 
 const ButtonRoot = ({
@@ -12,7 +11,6 @@ const ButtonRoot = ({
   ...props
 }: ToggleButtonProps & { states?: { active?: boolean; disabled?: boolean } }) => {
   const { active } = states || {};
-  const { pressed } = useCardPressHandlerContext();
 
   styles.useVariants({
     toggled,

package/src/components/UnstyledIconButton/UnstyledIconButtonIcon.tsx

@@ -12,7 +12,7 @@ const UnstyledIconButtonIcon = ({ children, ...props }: IconProps) => {
       {...props}
       style={
         Platform.OS === 'web'
-          ? // @ts-ignore
+          ? // @ts-expect-error - Spread types may only be created from object types.
             { ...(styles.icon as StyleProp<ViewStyle>), ...props.style }
           : [styles.icon as ViewStyle, props.style]
       }

package/src/components/VerificationInput/VerificationInput.docs.mdx

@@ -54,6 +54,7 @@ The component accepts the following props:
 | `value`            | `string`                            | -           | The value of the input.                                      |
 | `onChangeText`     | `(text: string) => void`            | -           | Callback when the value changes.                             |
 | `label`            | `string`                            | -           | The label for the input.                                     |
+| `labelVariant`     | `'heading' \| 'body'`               | `'body'`    | The variant of the label text.                               |
 | `helperText`       | `string`                            | -           | Helper text to display below the input.                      |
 | `helperIcon`       | `ComponentType`                     | -           | Icon to display alongside the helper text.                   |
 | `validationStatus` | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | The validation status of the input.                          |

package/src/components/VerificationInput/VerificationInput.props.ts

@@ -14,6 +14,10 @@ export interface VerificationInputProps extends ViewProps {
    * The label for the input.
    */
   label?: string;
+  /**
+   * The label variant for the input.
+   */
+  labelVariant?: 'heading' | 'body';
   /**
    * Helper text to display below the input.
    */
@@ -49,4 +53,3 @@ export interface VerificationInputProps extends ViewProps {
 }
 
 export default VerificationInputProps;
-

package/src/components/VerificationInput/VerificationInput.tsx

@@ -9,6 +9,7 @@ const VerificationInput = ({
   value = '',
   onChangeText,
   label,
+  labelVariant = 'body',
   helperText,
   helperIcon,
   validationStatus = 'initial',
@@ -32,6 +33,7 @@ const VerificationInput = ({
   return (
     <FormField
       label={label}
+      labelVariant={labelVariant}
       helperText={helperText}
       helperIcon={helperIcon}
       validationStatus={validationStatus}

package/src/utils/coloursAsArray.ts

@@ -1,6 +1,6 @@
 import { color } from '../tokens';
 
-const { light, dark, ...restOfColors } = color;
+const { light, ...restOfColors } = color;
 
 /**
  * Recursively flatten nested color objects into camelCase keys

package/tsconfig.eslint.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "./src",
+    "./src/**/*.stories.tsx",
+    "./src/**/*.figma.tsx",
+    "./.storybook/**/*",
+    "./docs/**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/src/components/Accordion/AccordionItemRoot.figma.tsx

@@ -1,47 +0,0 @@
-import React from "react"
-import AccordionItemRoot from "./AccordionItemRoot"
-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(
-  AccordionItemRoot,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3390%3A6160",
-  {
-    props: {
-      // These props were automatically mapped based on your linked code:
-      disabled: figma.enum("State", {
-        Active: true,
-      }),
-      title: figma.string("Title"),
-      expanded: figma.boolean("Expand?"),
-      triggerContent: figma.instance("Trigger custom content"),
-      collapsable: figma.boolean("Expand?"),
-      focusable: figma.enum("State", {
-        Focus: true,
-      }),
-      // No matching props could be found for these Figma properties:
-      // "customContent": figma.boolean('Custom content?'),
-      // "title": figma.string('Title'),
-      // "description": figma.string('Description'),
-      // "customContent": figma.instance('Custom content'),
-      // "triggerCustomContent": figma.instance('Trigger custom content'),
-      // "triggerCustomContent": figma.boolean('Trigger custom content?')
-    },
-    example: (props) => (
-      <AccordionItemRoot
-        disabled={props.disabled}
-        title={props.title}
-        expanded={props.expanded}
-        triggerContent={props.triggerContent}
-        collapsable={props.collapsable}
-        focusable={props.focusable}
-      />
-    ),
-  },
-)

package/src/components/DatePicker/DatePickerCalendar.figma.tsx

@@ -1,34 +0,0 @@
-import React from "react"
-import DatePickerCalendar from "./DatePickerCalendar"
-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(
-  DatePickerCalendar,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3797%3A6383",
-  {
-    props: {
-      // No matching props could be found for these Figma properties:
-      // "grabber": figma.boolean('Grabber?'),
-      // "header": figma.boolean('Header?'),
-      // "footer": figma.boolean('Footer?'),
-      // "deviceType": figma.enum('Device type', {
-      //   "Desktop": "desktop",
-      //   "Mobile": "mobile"
-      // }),
-      // "type": figma.enum('Type', {
-      //   "Day": "day",
-      //   "Month": "month",
-      //   "Year": "year"
-      // })
-    },
-    example: (props) => <DatePickerCalendar />,
-  },
-)