@utilitywarehouse/hearth-react-native 0.11.0 → 0.13.0

package/src/components/Radio/RadioImage.figma.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import RadioImage from "./RadioImage"
+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(
+  RadioImage,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7428%3A8535",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "customContent": figma.instance('Custom content'),
+      // "variant": figma.enum('Variant', {
+      //   "Bank logo": "bank-logo",
+      //   "Custom": "custom"
+      // })
+    },
+    example: (props) => <RadioImage />,
+  },
+)

package/src/components/Radio/RadioImage.tsx

@@ -1,8 +1,13 @@
 import { Image, ImageProps } from 'react-native';
+import { isThemedImageProps } from '../../utils';
+import { ThemedImage, ThemedImageProps } from '../ThemedImage';
 
-const RadioImage = ({ source, style, ...props }: ImageProps) => (
-  <Image source={source} style={style} {...props} />
-);
+const RadioImage = ({ ...props }: ImageProps | ThemedImageProps) => {
+  if (isThemedImageProps(props)) {
+    return <ThemedImage {...props} />;
+  }
+  return <Image {...props} />;
+};
 
 RadioImage.displayName = 'RadioImage';
 

package/src/components/Radio/RadioIndicator.tsx

@@ -35,9 +35,9 @@ const styles = StyleSheet.create(theme => ({
       _hover: {
         outlineColor: theme.components.radio.outlineColorHover,
       },
-      '_focus-within': {
-        ...theme.helpers.focusVisible,
-      },
+      // '_focus-within': {
+      //   ...theme.helpers.focusVisible,
+      // },
       _active: {
         outlineColor: theme.components.radio.outlineColorActive,
       },

package/src/components/Radio/RadioTileRoot.figma.tsx

@@ -0,0 +1,31 @@
+import React from "react"
+import RadioTileRoot from "./RadioTileRoot"
+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(
+  RadioTileRoot,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3138%3A13222",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "helperText": figma.boolean('Helper text?'),
+      // "helperText": figma.string('Helper text'),
+      // "label": figma.string('Label'),
+      // "image": figma.boolean('Image?'),
+      // "state": figma.enum('State', {
+      //   "Default": "default",
+      //   "Focus": "focus"
+      // }),
+      // "checked": figma.boolean('Checked?')
+    },
+    example: (props) => <RadioTileRoot />,
+  },
+)

package/src/components/RadioCard/RadioCardIndicator.tsx

@@ -35,9 +35,9 @@ const styles = StyleSheet.create(theme => ({
       _hover: {
         outlineColor: theme.components.radio.outlineColorHover,
       },
-      '_focus-within': {
-        ...theme.helpers.focusVisible,
-      },
+      // '_focus-within': {
+      //   ...theme.helpers.focusVisible,
+      // },
       _active: {
         outlineColor: theme.components.radio.outlineColorActive,
       },

package/src/components/RadioCard/RadioCardRoot.tsx

@@ -75,9 +75,9 @@ const styles = StyleSheet.create(theme => ({
       },
     },
     _web: {
-      '_focus-visible': {
-        ...theme.helpers.focusVisible,
-      },
+      // '_focus-visible': {
+      //   ...theme.helpers.focusVisible,
+      // },
     },
   },
 }));

package/src/components/SectionHeader/SectionHeader.figma.tsx

@@ -1,17 +1,31 @@
-//
-// import { SectionHeader } from './';
-// import figma from '@figma/code-connect';
+import React from "react"
+import SectionHeader from "./SectionHeader"
+import figma from "@figma/code-connect"
 
-// figma.connect(
-//   SectionHeader,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4763-8266&t=q4qCzh74a2av1MqM-4',
-//   {
-//     props: {
-//       helperText: figma.string('Supporting text'),
-//       text: figma.string('heading'),
-//     },
-//     example: ({ helperText, text }) => (
-//       <SectionHeader text={text} helperText={helperText} />
-//     ),
-//   }
-// );
+/**
+ * -- 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(
+  SectionHeader,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9092%3A3352",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "trailingContent": figma.boolean('Trailing content?'),
+      // "helperText": figma.boolean('Helper text?'),
+      // "helperText": figma.string('Helper text'),
+      // "heading": figma.string('Heading'),
+      // "badge": figma.boolean('Badge?'),
+      // "state": figma.enum('State', {
+      //   "Invalid": "invalid",
+      //   "Default": "default"
+      // })
+    },
+    example: (props) => <SectionHeader />,
+  },
+)

package/src/components/Select/Select.figma.tsx

@@ -0,0 +1,55 @@
+import figma from '@figma/code-connect';
+import Select from './Select';
+
+/**
+ * -- 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(Select, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3224%3A995', {
+  props: {
+    // These props were automatically mapped based on your linked code:
+    label: figma.string('Label'),
+    placeholder: figma.string('Label'),
+    disabled: figma.enum('Variant', {
+      Disabled: true,
+    }),
+    emptyText: figma.string('Helper text'),
+    readonly: figma.enum('Variant', {
+      'Read-only': true,
+    }),
+    collapsable: figma.boolean('Dropdown?'),
+    focusable: figma.boolean('Focus?'),
+    hasTVPreferredFocus: figma.boolean('Focus?'),
+    'aria-disabled': figma.enum('Variant', {
+      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'),
+    // "dropdown": figma.boolean('Dropdown?'),
+    // "optional": figma.boolean('Optional?'),
+    // "valueType": figma.enum('Value type', {
+    //   "Empty": "empty",
+    //   "Placeholder": "placeholder",
+    //   "Selected": "selected"
+    // })
+  },
+  example: props => (
+    <Select
+      label={props.label}
+      placeholder={props.placeholder}
+      disabled={props.disabled}
+      emptyText={props.emptyText}
+      readonly={props.readonly}
+      collapsable={props.collapsable}
+      focusable={props.focusable}
+      hasTVPreferredFocus={props.hasTVPreferredFocus}
+    />
+  ),
+});

package/src/components/Select/SelectOption.figma.tsx

@@ -0,0 +1,36 @@
+import figma from '@figma/code-connect';
+import SelectOption from './SelectOption';
+
+/**
+ * -- 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(
+  SelectOption,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4340%3A1252',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      label: figma.string('Label'),
+      selected: figma.boolean('Selected?'),
+      disabled: figma.enum('State', {
+        Active: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "label": figma.string('Label'),
+      // "icon": figma.boolean('Icon?'),
+      // "icon20": figma.instance('Icon-20')
+    },
+    example: props => (
+      <SelectOption
+        label={props.label}
+        value={null}
+        selected={props.selected}
+        disabled={props.disabled}
+      />
+    ),
+  }
+);

package/src/components/Spinner/Spinner.figma.tsx

@@ -1,19 +1,27 @@
-import figma from '@figma/code-connect';
-import { color } from '@utilitywarehouse/hearth-tokens/js';
-import { Spinner } from './';
+import React from "react"
+import Spinner from "./Spinner"
+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(
   Spinner,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components?node-id=61-195&t=j6vWFfxRVLbnAYhY-4',
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=61%3A195",
   {
     props: {
-      size: figma.enum('Size', {
-        'XS-20': 'xs',
-        'SM-24': 'sm',
-        'MD-32': 'md',
-        'LG-44': 'lg',
+      // These props were automatically mapped based on your linked code:
+      size: figma.enum("Size", {
+        "XS-20": "xs",
+        "SM-24": "sm",
+        "MD-32": "md",
+        "LG-44": "lg",
       }),
     },
-    example: ({ size }) => <Spinner size={size} color={color.purple['700']} />,
-  }
-);
+    example: (props) => <Spinner size={props.size} />,
+  },
+)

package/src/components/Switch/Switch.figma.tsx

@@ -1,29 +1,37 @@
-import { Switch } from './';
 import figma from '@figma/code-connect';
+import Switch from './Switch';
 
 /**
  * -- 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(
-  Switch,
-  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=9551-7352&t=fDsV1m42i8hVbZo3-4',
-  {
-    props: {
-      value: figma.boolean('checked'),
-      state: figma.enum('state', {
-        default: 'default',
-      }),
-      size: figma.enum('size', {
-        'medium - 32': 'medium',
-        'small - 24': 'small',
-      }),
-      disabled: figma.boolean('disabled'),
-    },
-    example: props => <Switch {...props} />,
-  }
-);
+figma.connect(Switch, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3044%3A243', {
+  props: {
+    // These props were automatically mapped based on your linked code:
+    disabled: figma.enum('State', {
+      Disabled: true,
+    }),
+    'aria-disabled': figma.enum('State', {
+      Disabled: true,
+    }),
+    focusable: figma.enum('State', {
+      Focus: true,
+    }),
+    checked: figma.boolean('Checked?'),
+    size: figma.enum('Size', {
+      'MD-32': 'medium',
+      'SM-24': 'small',
+    }),
+  },
+  example: props => (
+    <Switch
+      value={props.checked}
+      disabled={props.disabled}
+      focusable={props.focusable}
+      size={props.size}
+    />
+  ),
+});

package/src/components/Tabs/Tab.tsx

@@ -76,11 +76,11 @@ const styles = StyleSheet.create(theme => ({
       _hover: {
         backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
       },
-      '_focus-visible': {
-        ...theme.helpers.focusVisible,
-        outlineOffset: -2,
-        borderRadius: theme.borderRadius.sm,
-      },
+      // '_focus-visible': {
+      //   ...theme.helpers.focusVisible,
+      //   outlineOffset: -2,
+      //   borderRadius: theme.borderRadius.sm,
+      // },
       _active: {
         backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
       },

package/src/components/Tabs/Tabs.figma.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import Tabs from "./Tabs"
+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(
+  Tabs,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6464%3A8744",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      size: figma.enum("Size", {
+        "MD-56": "md",
+        "LG-64": "lg",
+      }),
+      // No matching props could be found for these Figma properties:
+      // "arrowLeft": figma.boolean('Arrow left?'),
+      // "arrowRight": figma.boolean('Arrow right?'),
+      // "condensed": figma.boolean('Condensed?')
+    },
+    example: (props) => <Tabs size={props.size} />,
+  },
+)

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import MascotEnergyDark from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-dark.svg';
 import MascotEnergyLight from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-light.svg';
 import SceneBroadbandDark from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-dark.svg';

package/src/components/Toast/ToastItem.figma.tsx

@@ -0,0 +1,22 @@
+import figma from '@figma/code-connect';
+import ToastItem from './ToastItem';
+
+/**
+ * -- 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(ToastItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7072%3A913', {
+  props: {
+    // No matching props could be found for these Figma properties:
+    // "link": figma.boolean('Link?'),
+    // "text": figma.string('Text'),
+    // "icon": figma.boolean('Icon?'),
+    // "icon24": figma.instance('Icon-24'),
+    // "dismiss": figma.boolean('Dismiss?')
+  },
+  example: props => <ToastItem toast={null} onClose={null} />,
+});

package/src/components/ToggleButton/ToggleButtonRoot.tsx

@@ -16,7 +16,7 @@ const ButtonRoot = ({
 
   styles.useVariants({
     toggled,
-    active: active || pressed,
+    active,
   });
 
   const handlePress = (e: GestureResponderEvent) => {
@@ -56,7 +56,7 @@ const styles = StyleSheet.create(theme => ({
     borderColor: theme.color.interactive.neutral.border.subtle,
     height: theme.components.toggleButton.height,
     _web: {
-      '_focus-visible': theme.helpers.focusVisible,
+      // '_focus-visible': theme.helpers.focusVisible,
       _hover: {
         backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
       },

package/src/components/ToggleButtonCard/ToggleButtonCardRoot.tsx

@@ -77,9 +77,9 @@ const styles = StyleSheet.create(theme => ({
       },
     },
     _web: {
-      '_focus-visible': {
-        ...theme.helpers.focusVisible,
-      },
+      // '_focus-visible': {
+      //   ...theme.helpers.focusVisible,
+      // },
     },
   },
   buttonContainer: {

package/src/components/UnstyledIconButton/UnstyledIconButton.figma.tsx

@@ -0,0 +1,49 @@
+import figma from '@figma/code-connect';
+import UnstyledIconButton from './UnstyledIconButton';
+
+/**
+ * -- 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(
+  UnstyledIconButton,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2926%3A2430',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      loading: figma.enum('State', {
+        Loading: true,
+      }),
+      size: figma.enum('Size', {
+        'SM-20': 'sm',
+        'MD-24': 'md',
+      }),
+      inverted: figma.boolean('Inverted?'),
+      'aria-disabled': figma.enum('State', {
+        Disabled: true,
+      }),
+      focusable: figma.enum('State', {
+        Focus: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "icon24": figma.instance('Icon-24'),
+      // "icon20": figma.instance('Icon-20')
+    },
+    example: props => (
+      <UnstyledIconButton
+        disabled={props.disabled}
+        icon={null}
+        loading={props.loading}
+        size={props.size}
+        inverted={props.inverted}
+        focusable={props.focusable}
+      />
+    ),
+  }
+);

package/src/components/UnstyledIconButton/UnstyledIconButtonRoot.tsx

@@ -36,7 +36,7 @@ const styles = StyleSheet.create(theme => ({
     alignItems: 'center',
     borderRadius: theme.borderRadius.sm,
     _web: {
-      '_focus-visible': theme.helpers.focusVisible,
+      // '_focus-visible': theme.helpers.focusVisible,
     },
     variants: {
       disabled: {

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

@@ -0,0 +1,68 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { InfoMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { VerificationInput } from '../../';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './VerificationInput.stories';
+
+<Meta title="Forms / Verification Input" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4049-3615&t=m0WHtPBmyE9YVP8Q-0" />
+
+# Verification Input
+
+The verification input component is used to capture OTP (One Time Password) or other verification codes.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
+  - [States](#states)
+  - [Secure Text Entry](#secure-text-entry)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <VerificationInput label="Enter Code" onChangeText={code => console.log(code)} />
+</UsageWrap>
+
+```tsx
+import { VerificationInput } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [code, setCode] = useState('');
+
+  return <VerificationInput label="Enter Code" value={code} onChangeText={setCode} />;
+};
+```
+
+## Props
+
+### `VerificationInput`
+
+The component accepts the following props:
+
+| Prop               | Type                                | Default     | Description                                                  |
+| :----------------- | :---------------------------------- | :---------- | :----------------------------------------------------------- |
+| `value`            | `string`                            | -           | The value of the input.                                      |
+| `onChangeText`     | `(text: string) => void`            | -           | Callback when the value changes.                             |
+| `label`            | `string`                            | -           | The label for the input.                                     |
+| `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.                          |
+| `validText`        | `string`                            | -           | Text to display when validation status is 'valid'.           |
+| `invalidText`      | `string`                            | -           | Text to display when validation status is 'invalid'.         |
+| `disabled`         | `boolean`                           | `false`     | Whether the input is disabled.                               |
+| `readonly`         | `boolean`                           | `false`     | Whether the input is read-only.                              |
+| `secureTextEntry`  | `boolean`                           | `false`     | Whether to obscure the text entry (e.g. for passwords/OTPs). |
+
+## Variants
+
+<Canvas of={Stories.Variants} />

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

@@ -0,0 +1,52 @@
+import type { ComponentType } from 'react';
+import { ViewProps } from 'react-native';
+
+export interface VerificationInputProps extends ViewProps {
+  /**
+   * The value of the input.
+   */
+  value?: string;
+  /**
+   * Callback when the value changes.
+   */
+  onChangeText?: (text: string) => void;
+  /**
+   * The label for the input.
+   */
+  label?: string;
+  /**
+   * Helper text to display below the input.
+   */
+  helperText?: string;
+  /**
+   * Icon to display alongside the helper text.
+   */
+  helperIcon?: ComponentType;
+  /**
+   * The validation status of the input.
+   */
+  validationStatus?: 'initial' | 'valid' | 'invalid';
+  /**
+   * Text to display when validation status is 'valid'.
+   */
+  validText?: string;
+  /**
+   * Text to display when validation status is 'invalid'.
+   */
+  invalidText?: string;
+  /**
+   * Whether the input is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Whether the input is read-only.
+   */
+  readonly?: boolean;
+  /**
+   * Whether to obscure the text entry (e.g. for passwords/OTPs).
+   */
+  secureTextEntry?: boolean;
+}
+
+export default VerificationInputProps;
+