@utilitywarehouse/hearth-react-native 0.19.1 → 0.20.0

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

@@ -1,31 +1,37 @@
-import React from "react"
-import SectionHeader from "./SectionHeader"
-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
- */
+import figma from '@figma/code-connect';
+import { SectionHeader } from '../';
 
 figma.connect(
   SectionHeader,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9092%3A3352",
+  '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"
-      // })
+      trailingContent: figma.boolean('Trailing content?', {
+        true: figma.nestedProps('Trailing content', {
+          content: figma.children('Link'),
+        }),
+      }),
+      helperText: figma.boolean('Helper text?', {
+        true: figma.string('Helper text'),
+      }),
+      heading: figma.string('Heading'),
+      badge: figma.boolean('Badge?', {
+        true: figma.children('Badge'),
+      }),
+      invalidText: figma.enum('State', {
+        Invalid: figma.nestedProps('Validation Text', {
+          text: figma.string('Text'),
+        }),
+      }),
     },
-    example: (props) => <SectionHeader />,
-  },
-)
+    example: props => (
+      <SectionHeader
+        heading={props.heading}
+        helperText={props.helperText}
+        badge={props.badge}
+        trailingContent={props.trailingContent?.content}
+        invalidText={props.invalidText?.text}
+      />
+    ),
+  }
+);

package/src/components/Select/Select.docs.mdx

@@ -20,6 +20,7 @@ The `Select` component creates a dropdown menu that allows users to choose from
   - [`Select`](#select)
   - [`SelectOption`](#selectoption)
 - [Examples](#examples)
+  - [With label and helper text](#with-label-and-helper-text)
   - [With `FormField`](#with-formfield)
   - [Searchable `Select`](#searchable-select)
   - [Inline `SelectOption`](#inline-selectoption)
@@ -77,42 +78,89 @@ const MyComponent = () => {
 
 The `Select` component inherits all of the React Native [`View` props](https://reactnative.dev/docs/view).
 
-| Prop              | Type                                | Default                  | Description                                                |
-| ----------------- | ----------------------------------- | ------------------------ | ---------------------------------------------------------- |
-| options           | SelectOptionProps[]                 | `[]`                     | Array of options to display in the select.                 |
-| value             | string \| null                      | `-`                      | Currently selected value.                                  |
-| onValueChange     | (value: string) => void             | `-`                      | Callback when value changes.                               |
-| label             | string                              | `-`                      | Label for the select.                                      |
-| placeholder       | string                              | `'Select an option'`     | Placeholder text to show when no value is selected.        |
-| disabled          | boolean                             | `false`                  | Whether the select is disabled.                            |
-| readonly          | boolean                             | `false`                  | Whether the select is readonly.                            |
-| leadingIcon       | React.ComponentType                 | `-`                      | Icon to display before the select text.                    |
-| validationStatus  | `'initial' \| 'valid' \| 'invalid'` | `'initial'`              | The validation status of the select.                       |
-| required          | boolean                             | `true`                   | Indicates that the select is required.                     |
-| menuHeading       | string                              | `-`                      | Heading to display at the top of the menu.                 |
-| children          | ReactNode                           | `-`                      | Children to render inside the select (for custom options). |
-| bottomSheetProps  | `BottomSheetProps`                  | `-`                      | Props passed to the BottomSheetModal.                      |
-| emptyText         | string                              | `'No options available'` | Text to display when no options are available.             |
-| listProps         | object                              | `-`                      | Props to be passed to the bottom sheet flat list.          |
-| searchable        | boolean                             | `false`                  | Optional search functionality for the select.              |
-| searchPlaceholder | string                              | `'Search'`               | Search placeholder.                                        |
+| Prop              | Type                                | Default                  | Description                                                                |
+| ----------------- | ----------------------------------- | ------------------------ | -------------------------------------------------------------------------- |
+| options           | `SelectOptionProps[]`               | `[]`                     | Array of options to display in the select.                                 |
+| value             | `string \| null`                    | `-`                      | Currently selected value.                                                  |
+| onValueChange     | `(value: string) => void`           | `-`                      | Callback when value changes.                                               |
+| label             | `string`                            | `-`                      | Label for the select.                                                      |
+| labelVariant      | `'body' \| 'heading'`               | `'body'`                 | Variant for the label. 'inline' will display the label next to the select. |
+| helperText        | `string`                            | `-`                      | Helper text to display below the select.                                   |
+| helperIcon        | `React.ComponentType`               | `-`                      | Optional icon to display next to the helper text.                          |
+| placeholder       | `string`                            | `'Select an option'`     | Placeholder text to show when no value is selected.                        |
+| disabled          | `boolean`                           | `false`                  | Whether the select is disabled.                                            |
+| readonly          | `boolean`                           | `false`                  | Whether the select is readonly.                                            |
+| leadingIcon       | `React.ComponentType`               | `-`                      | Icon to display before the select text.                                    |
+| validationStatus  | `'initial' \| 'valid' \| 'invalid'` | `'initial'`              | The validation status of the select.                                       |
+| invalidText       | `string`                            | `-`                      | Text to display when validationStatus is 'invalid'.                        |
+| validText         | `string`                            | `-`                      | Text to display when validationStatus is 'valid'.                          |
+| required          | `boolean`                           | `true`                   | Indicates that the select is required.                                     |
+| menuHeading       | `string`                            | `-`                      | Heading to display at the top of the menu.                                 |
+| children          | `ReactNode`                         | `-`                      | Children to render inside the select (for custom options).                 |
+| bottomSheetProps  | `BottomSheetProps`                  | `-`                      | Props passed to the BottomSheetModal.                                      |
+| emptyText         | `string`                            | `'No options available'` | Text to display when no options are available.                             |
+| listProps         | `object`                            | `-`                      | Props to be passed to the bottom sheet flat list.                          |
+| searchable        | `boolean`                           | `false`                  | Optional search functionality for the select.                              |
+| searchPlaceholder | `string`                            | `'Search'`               | Search placeholder.                                                        |
 
 ### `SelectOption`
 
 The `SelectOption` component is used to create individual options within the `Select` component. It can be used inline or as part of the `options` prop.
 
-| Prop         | Type                    | Default | Description                            |
-| ------------ | ----------------------- | ------- | -------------------------------------- |
-| label        | string                  | `-`     | Label to display for this option.      |
-| value        | string                  | `-`     | Value for this option.                 |
-| leadingIcon  | React.ComponentType     | `-`     | Optional left icon for this option.    |
-| trailingIcon | React.ComponentType     | `-`     | Optional right icon for this option.   |
-| selected     | boolean                 | `-`     | Whether this option is selected.       |
-| disabled     | boolean                 | `false` | Whether this option is disabled.       |
-| onPress      | (value: string) => void | `-`     | Callback when this option is selected. |
+| Prop         | Type                      | Default | Description                            |
+| ------------ | ------------------------- | ------- | -------------------------------------- |
+| label        | `string`                  | `-`     | Label to display for this option.      |
+| value        | `string`                  | `-`     | Value for this option.                 |
+| leadingIcon  | `React.ComponentType`     | `-`     | Optional left icon for this option.    |
+| trailingIcon | `React.ComponentType`     | `-`     | Optional right icon for this option.   |
+| selected     | `boolean`                 | `-`     | Whether this option is selected.       |
+| disabled     | `boolean`                 | `false` | Whether this option is disabled.       |
+| onPress      | `(value: string) => void` | `-`     | Callback when this option is selected. |
 
 ## Examples
 
+## With label and helper text
+
+<UsageWrap>
+  <Center>
+    <Select
+      label="Select an option"
+      helperText="This is some helper text for the select component."
+      placeholder="Select an option"
+      options={[
+        { label: 'Option 1', value: '1' },
+        { label: 'Option 2', value: '2' },
+        { label: 'Option 3', value: '3' },
+      ]}
+      value="1"
+      onValueChange={value => console.log('Selected:', value)}
+    />
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Select } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <Select
+      label="Select an option"
+      helperText="This is some helper text for the select component."
+      placeholder="Select an option"
+      options={[
+        { label: 'Option 1', value: '1' },
+        { label: 'Option 2', value: '2' },
+        { label: 'Option 3', value: '3' },
+      ]}
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+};
+```
+
 ### With `FormField`
 
 The `Select` component can be used with the `FormField` component for additional functionality like validation messages and helper text.

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

@@ -1,55 +1,56 @@
 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
- */
+import { useState } from 'react';
+import { Select } from '../';
 
 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'),
+    placeholder: figma.enum('Value type', {
+      Placeholder: figma.string('Value'),
+    }),
     disabled: figma.enum('Variant', {
       Disabled: true,
     }),
-    emptyText: figma.string('Helper text'),
-    readonly: figma.enum('Variant', {
-      'Read-only': true,
+    validationStatus: figma.enum('Variant', {
+      Invalid: 'invalid',
+      Valid: 'valid',
     }),
-    collapsable: figma.boolean('Dropdown?'),
-    focusable: figma.boolean('Focus?'),
-    hasTVPreferredFocus: figma.boolean('Focus?'),
-    'aria-disabled': figma.enum('Variant', {
-      Disabled: true,
+    invalidText: figma.enum('Variant', {
+      Invalid: figma.string('Validation'),
+    }),
+    validText: figma.enum('Variant', {
+      Valid: figma.string('Validation'),
     }),
-    // 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"
-    // })
+    helperText: figma.boolean('Helper text?', {
+      true: figma.string('Helper text'),
+    }),
+    required: figma.boolean('Optional?', {
+      true: false,
+    }),
+    value: figma.enum('Value type', {
+      Selected: figma.string('Value'),
+    }),
+  },
+  example: props => {
+    const [value, setValue] = useState(null);
+    return (
+      <Select
+        label={props.label}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+        validationStatus={props.validationStatus}
+        invalidText={props.invalidText}
+        validText={props.validText}
+        helperText={props.helperText}
+        required={props.required}
+        options={[
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+          { label: 'Option 3', value: '3' },
+        ]}
+        value={value}
+        onValueChange={value => setValue(value)}
+      />
+    );
   },
-  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/Select.props.ts

@@ -53,6 +53,22 @@ interface SelectProps extends ViewProps {
    * @default 'body'.
    */
   labelVariant?: 'heading' | 'body';
+  /**
+   * Helper text to show below the select
+   */
+  helperText?: string;
+  /**
+   * Optional icon to display alongside the helper text
+   */
+  helperIcon?: React.ComponentType;
+  /**
+   *  Text to display when validationStatus is 'invalid'
+   */
+  invalidText?: string;
+  /**
+   * Text to display when validationStatus is 'valid'
+   */
+  validText?: string;
   /**
    * Placeholder text to show when no value is selected
    */

package/src/components/Select/Select.tsx

@@ -10,10 +10,9 @@ import {
   BottomSheetView,
 } from '../BottomSheet';
 import { DetailText } from '../DetailText';
-import { useFormFieldContext } from '../FormField';
+import { FormField, useFormFieldContext } from '../FormField';
 import { Icon } from '../Icon';
 import { Input } from '../Input';
-import { Label } from '../Label';
 import { SelectContext } from './Select.context';
 import SelectProps, { SelectOptionItemProps } from './Select.props';
 import SelectOption from './SelectOption';
@@ -28,6 +27,10 @@ const Select = ({
   disabled = false,
   leadingIcon: LeadingIcon,
   validationStatus = 'initial',
+  helperText,
+  helperIcon,
+  invalidText,
+  validText,
   required = true,
   children,
   bottomSheetProps,
@@ -122,42 +125,46 @@ const Select = ({
 
   return (
     <View {...rest} style={[styles.container, rest.style]}>
-      {!!label && (
-        <View>
-          <Label variant={labelVariant}>
-            {label}
-            {!isRequired && <Label variant={labelVariant}> (Optional)</Label>}
-          </Label>
-        </View>
-      )}
-      <Pressable
-        onPress={openBottomSheet}
-        disabled={isDisabled || isReadonly}
-        style={({ pressed }) => [
-          styles.selectContainer,
-          styles.pressedContainer(pressed || isOpen),
-        ]}
+      <FormField
+        label={label}
+        labelVariant={labelVariant}
+        helperText={helperText}
+        helperIcon={helperIcon}
+        validationStatus={validationStatusFromContext}
+        required={isRequired}
+        disabled={isDisabled}
+        readonly={isReadonly}
+        invalidText={invalidText}
+        validText={validText}
       >
-        {!!LeadingIcon && (
-          <View>
-            {(() => {
-              const IconAny = Icon as any;
-              return <IconAny as={LeadingIcon} style={styles.icon as any} />;
-            })()}
-          </View>
-        )}
-
-        <View style={styles.optionContainer}>
-          <BodyText numberOfLines={1} style={styles.placeholderText}>
-            {selectedOption?.label || selectedLabel || placeholder}
-          </BodyText>
-        </View>
+        <Pressable
+          onPress={openBottomSheet}
+          disabled={isDisabled || isReadonly}
+          style={({ pressed }) => [
+            styles.selectContainer,
+            styles.pressedContainer(pressed || isOpen),
+          ]}
+        >
+          {!!LeadingIcon && (
+            <View>
+              {(() => {
+                const IconAny = Icon as any;
+                return <IconAny as={LeadingIcon} style={styles.icon as any} />;
+              })()}
+            </View>
+          )}
 
-        <View>
-          <Icon as={ExpandSmallIcon} style={styles.icon} />
-        </View>
-      </Pressable>
+          <View style={styles.optionContainer}>
+            <BodyText numberOfLines={1} style={styles.placeholderText}>
+              {selectedOption?.label || selectedLabel || placeholder}
+            </BodyText>
+          </View>
 
+          <View>
+            <Icon as={ExpandSmallIcon} style={styles.icon} />
+          </View>
+        </Pressable>
+      </FormField>
       <BottomSheetModal
         ref={bottomSheetModalRef}
         snapPoints={['25%', '40%', '80%']}

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

@@ -1,36 +1,18 @@
 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
- */
+import { SelectOption } from '../';
 
 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,
+        Disabled: 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}
-      />
+      <SelectOption label={props.label} value="some value" disabled={props.disabled} />
     ),
   }
 );

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

@@ -1,27 +1,14 @@
-import React from "react"
-import Spinner from "./Spinner"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { Spinner } from '../';
 
-/**
- * -- 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?node-id=61%3A195",
-  {
-    props: {
-      // 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: (props) => <Spinner size={props.size} />,
+figma.connect(Spinner, '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',
+    }),
   },
-)
+  example: props => <Spinner size={props.size} />,
+});

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

@@ -1,37 +1,16 @@
 import figma from '@figma/code-connect';
-import Switch from './Switch';
-
-/**
- * -- 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
- */
+import { Switch } from '../';
 
 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}
-    />
-  ),
+  example: props => <Switch value={props.checked} disabled={props.disabled} size={props.size} />,
 });

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

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect';
+import { Tab } from '..';
+
+figma.connect(
+  Tab,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6464-2288&m=dev',
+  {
+    props: {
+      label: figma.string('Label'),
+      icon: figma.boolean('Icon?', {
+        true: figma.instance('Icon-20'),
+      }),
+      tabs: figma.children('Tab item'),
+    },
+    example: props => (
+      <Tab value={props.label} icon={props.icon}>
+        {props.label}
+      </Tab>
+    ),
+  }
+);

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

@@ -1,29 +1,20 @@
-import React from "react"
-import Tabs from "./Tabs"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { TabPanel, Tabs, TabsList } from '../';
 
-/**
- * -- 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} />,
+figma.connect(Tabs, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6464%3A8744', {
+  props: {
+    size: figma.enum('Size', {
+      'LG-64': 'lg',
+    }),
+    tabs: figma.children('Tab item'),
   },
-)
+  example: props => (
+    <Tabs size={props.size}>
+      <TabsList>{props.tabs}</TabsList>
+      {/* Example TabPanel content, make sure they match the value of your Tab items */}
+      <TabPanel value="account">Account content</TabPanel>
+      <TabPanel value="billing">Billing content</TabPanel>
+      <TabPanel value="usage">Usage content</TabPanel>
+    </Tabs>
+  ),
+});