@utilitywarehouse/hearth-react-native 0.11.0 → 0.13.0

package/src/components/Checkbox/Checkbox.figma.tsx

@@ -1,44 +1,29 @@
-import { Checkbox } from './';
 import figma from '@figma/code-connect';
+import { Checkbox } from './Checkbox';
 
-const props = {
-  isDisabled: figma.boolean('isDisabled'),
-  invalid: figma.boolean('invalid'),
-  label: figma.nestedProps('Label', {
-    text: figma.string('Label Text'),
-  }),
-  helperText: figma.nestedProps('Helper Text', {
-    text: figma.string('Text'),
-  }),
-  invalidText: figma.boolean('invalid', {
-    true: figma.nestedProps('Helper Text', {
-      text: figma.string('Text'),
-      showIcon: figma.boolean('showIcon?'),
-    }),
-    false: {
-      text: undefined,
-      showIcon: undefined,
-    },
-  }),
-};
-
-figma.connect(
-  Checkbox,
-  'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=5623-561&m=dev',
-  {
-    props,
-    example: ({ isDisabled, label, helperText, invalidText }) => (
-      <Checkbox
-        value="some-value"
-        onChange={(isChecked: boolean) => console.log(isChecked)}
-        disabled={isDisabled}
-        label={label.text}
-        helperText={helperText.text}
-        invalidText={invalidText.text}
-        showValidationIcon={invalidText.showIcon}
-      />
-    ),
-  }
-);
+/**
+ * -- 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
+ */
 
-// TODO: Add variants with helperText when it's implemented
+figma.connect(Checkbox, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3087%3A7316', {
+  props: {
+    // These props were automatically mapped based on your linked code:
+    disabled: figma.enum('State', {
+      Disabled: true,
+    }),
+    checked: figma.boolean('Checked?'),
+    'aria-disabled': figma.enum('State', {
+      Disabled: true,
+    }),
+    // No matching props could be found for these Figma properties:
+    // "label": figma.string('Label'),
+    // "helperText": figma.string('Helper text'),
+    // "helperText": figma.boolean('Helper text?'),
+    // "validationText": figma.string('Validation text'),
+    // "image": figma.boolean('Image?')
+  },
+  example: props => <Checkbox disabled={props.disabled} checked={props.checked} />,
+});

package/src/components/Checkbox/Checkbox.props.ts

@@ -1,5 +1,5 @@
-import type { ComponentType } from 'react';
-import type { ImageProps, PressableProps, ViewProps } from 'react-native';
+import type { ComponentType, ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
 
 type CheckboxBaseProps = {
   onChange?: (isSelected: boolean) => void;
@@ -37,7 +37,7 @@ type CheckboxWithoutChildrenProps = {
   invalidText?: string;
   validText?: string;
   showValidationIcon?: boolean;
-  image?: ImageProps;
+  image?: ReactNode;
 } & CheckboxBaseProps;
 
 type CheckboxProps = CheckboxWithChildrenProps | CheckboxWithoutChildrenProps;

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import React, { useEffect } from 'react';
 import { ImageSourcePropType } from 'react-native';
-import { Checkbox, CheckboxGroup } from '.';
+import { Checkbox, CheckboxGroup, CheckboxImage } from '.';
 import bankLogo from '../../../docs/assets/bank-logo.png';
 import bankLogo1 from '../../../docs/assets/bank-logo1.png';
 import { VariantTitle } from '../../../docs/components';
@@ -106,7 +106,12 @@ export const WithImage: Story = {
         {...args}
         value="visa"
         label="Visa"
-        image={{ source: bankLogo1 as ImageSourcePropType, style: { width: 40, height: 24 } }}
+        image={
+          <CheckboxImage
+            source={bankLogo1 as ImageSourcePropType}
+            style={{ width: 40, height: 24 }}
+          />
+        }
       />
       <Checkbox
         aria-label="Mastercard"
@@ -117,11 +122,12 @@ export const WithImage: Story = {
         {...args}
         value="mastercard"
         label="Mastercard"
-        image={{
-          source: bankLogo as ImageSourcePropType,
-          style: { width: 40, height: 24 },
-          resizeMode: 'contain',
-        }}
+        image={
+          <CheckboxImage
+            source={bankLogo as ImageSourcePropType}
+            style={{ width: 40, height: 24, resizeMode: 'contain' }}
+          />
+        }
       />
     </CheckboxGroup>
   ),

package/src/components/Checkbox/Checkbox.tsx

@@ -5,7 +5,6 @@ import CheckboxProps from './Checkbox.props';
 import { useCheckboxGroupContext } from './CheckboxGroup.context';
 import StyledCheckboxGroup from './CheckboxGroupRoot';
 import StyledCheckboxIcon from './CheckboxIcon';
-import CheckboxImage from './CheckboxImage';
 import StyledCheckboxIndicator from './CheckboxIndicator';
 import StyledCheckboxLabel from './CheckboxLabel';
 import StyledCheckbox from './CheckboxRoot';
@@ -57,7 +56,7 @@ const Checkbox = ({
       <CheckboxIndicator>
         <CheckboxIcon />
       </CheckboxIndicator>
-      {image ? <CheckboxImage {...image} /> : null}
+      {image ? image : null}
       <CheckboxTextContent>
         {!!label && <CheckboxLabel>{label}</CheckboxLabel>}
         {!!helperText && <Helper disabled={disabled} icon={helperIcon} text={helperText} />}

package/src/components/Checkbox/CheckboxGroup.figma.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import CheckboxGroup from "./CheckboxGroup"
+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(
+  CheckboxGroup,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3141%3A4275",
+  {
+    props: {},
+    example: (props) => <CheckboxGroup />,
+  },
+)

package/src/components/Checkbox/CheckboxImage.figma.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import CheckboxImage from "./CheckboxImage"
+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(
+  CheckboxImage,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7428%3A3207",
+  {
+    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) => <CheckboxImage />,
+  },
+)

package/src/components/Checkbox/CheckboxImage.tsx

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

package/src/components/Checkbox/CheckboxIndicator.tsx

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

package/src/components/Checkbox/CheckboxTileRoot.figma.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import CheckboxTileRoot from "./CheckboxTileRoot"
+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(
+  CheckboxTileRoot,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4961%3A23797",
+  {
+    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",
+      //   "Invalid": "invalid",
+      //   "Focus": "focus"
+      // }),
+      // "checked": figma.boolean('Checked?')
+    },
+    example: (props) => <CheckboxTileRoot />,
+  },
+)

package/src/components/CurrencyInput/CurrencyInput.figma.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+import CurrencyInput from "./CurrencyInput"
+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(
+  CurrencyInput,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2161%3A1336",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      focused: figma.boolean("Focus?"),
+      placeholder: figma.string("Label"),
+      autoFocus: figma.boolean("Focus?"),
+      defaultValue: figma.string("Value"),
+      value: figma.string("Value"),
+      focusable: figma.boolean("Focus?"),
+      hasTVPreferredFocus: figma.boolean("Focus?"),
+      // No matching props could be found for these Figma properties:
+      // "validation": figma.string('Validation'),
+      // "helperText": figma.string('Helper text'),
+      // "label": figma.string('Label'),
+      // "value": figma.string('Value'),
+      // "helperText": figma.boolean('Helper text?'),
+      // "state": figma.enum('State', {
+      //   "Default": "default",
+      //   "Invalid": "invalid"
+      // }),
+      // "valueType": figma.enum('Value type', {
+      //   "Placeholder": "placeholder",
+      //   "Filled": "filled"
+      // }),
+      // "labelVariant": figma.enum('Label variant', {
+      //   "Body": "body",
+      //   "Heading": "heading"
+      // })
+    },
+    example: (props) => (
+      <CurrencyInput
+        focused={props.focused}
+        placeholder={props.placeholder}
+        autoFocus={props.autoFocus}
+        defaultValue={props.defaultValue}
+        value={props.value}
+        focusable={props.focusable}
+        hasTVPreferredFocus={props.hasTVPreferredFocus}
+      />
+    ),
+  },
+)

package/src/components/DateInput/DateInput.figma.tsx

@@ -0,0 +1,75 @@
+import React from "react"
+import DateInput from "./DateInput"
+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(
+  DateInput,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2277%3A14708",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      hideDay: figma.boolean("Day?"),
+      hideMonth: figma.boolean("Month?"),
+      monthPlaceholder: figma.string("Month value"),
+      yearPlaceholder: figma.string("Year value"),
+      dayValue: figma.string("Day value"),
+      monthValue: figma.string("Month value"),
+      yearValue: figma.string("Year value"),
+      disabled: figma.enum("State", {
+        Disabled: true,
+      }),
+      readonly: figma.enum("State", {
+        "Read-only": true,
+      }),
+      label: figma.string("Label"),
+      helperText: figma.string("Helper text"),
+      validText: figma.string("Validation"),
+      invalidText: figma.string("Helper text"),
+      // 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'),
+      // "dayValue": figma.string('Day value'),
+      // "day": figma.boolean('Day?'),
+      // "month": figma.boolean('Month?'),
+      // "monthValue": figma.string('Month value'),
+      // "yearValue": figma.string('Year value'),
+      // "optional": figma.boolean('Optional?'),
+      // "valueType": figma.enum('Value type', {
+      //   "Empty": "empty",
+      //   "Placeholder": "placeholder",
+      //   "Filled": "filled"
+      // }),
+      // "focus": figma.boolean('Focus?'),
+      // "labelVariant": figma.enum('Label variant', {
+      //   "Body": "body",
+      //   "Heading": "heading"
+      // })
+    },
+    example: (props) => (
+      <DateInput
+        hideDay={props.hideDay}
+        hideMonth={props.hideMonth}
+        monthPlaceholder={props.monthPlaceholder}
+        yearPlaceholder={props.yearPlaceholder}
+        dayValue={props.dayValue}
+        monthValue={props.monthValue}
+        yearValue={props.yearValue}
+        disabled={props.disabled}
+        readonly={props.readonly}
+        label={props.label}
+        helperText={props.helperText}
+        validText={props.validText}
+        invalidText={props.invalidText}
+      />
+    ),
+  },
+)

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

@@ -0,0 +1,34 @@
+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 />,
+  },
+)

package/src/components/DatePicker/DatePickerDay.tsx

@@ -189,9 +189,9 @@ const styles = StyleSheet.create(theme => ({
       },
     ],
     _web: {
-      '_focus-visible': {
-        ...theme.helpers.focusVisible,
-      },
+      // '_focus-visible': {
+      //   ...theme.helpers.focusVisible,
+      // },
       _active: {
         backgroundColor: theme.color.interactive.functional.surface.subtle.active,
       },

package/src/components/DatePickerInput/DatePickerInput.figma.tsx

@@ -0,0 +1,62 @@
+import figma from '@figma/code-connect';
+import DatePickerInput from './DatePickerInput';
+
+/**
+ * -- 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(
+  DatePickerInput,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3917%3A7057',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      disabled: figma.enum('Variant', {
+        Disabled: true,
+      }),
+      readonly: figma.enum('Variant', {
+        'Read-only': true,
+      }),
+      focused: figma.boolean('Focus?'),
+      placeholder: figma.string('Label'),
+      autoFocus: figma.boolean('Focus?'),
+      defaultValue: figma.string('Value'),
+      readOnly: figma.enum('Variant', {
+        'Read-only': true,
+      }),
+      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'),
+      // "icon": figma.boolean('Icon?'),
+      // "calendar": figma.boolean('Calendar?'),
+      // "valueType": figma.enum('Value type', {
+      //   "Empty": "empty",
+      //   "Placeholder": "placeholder",
+      //   "Filled": "filled"
+      // })
+    },
+    example: props => (
+      <DatePickerInput
+        disabled={props.disabled}
+        readonly={props.readonly}
+        focused={props.focused}
+        placeholder={props.placeholder}
+        autoFocus={props.autoFocus}
+        defaultValue={props.defaultValue}
+        readOnly={props.readOnly}
+        focusable={props.focusable}
+      />
+    ),
+  }
+);

package/src/components/DescriptionList/DescriptionList.figma.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import DescriptionList from "./DescriptionList"
+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(
+  DescriptionList,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7247%3A4636",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "sectionHeader": figma.boolean('Section header?')
+    },
+    example: (props) => <DescriptionList />,
+  },
+)

package/src/components/Divider/Divider.figma.tsx

@@ -1,20 +1,25 @@
-//
-// import { Divider } from './';
-// import figma from '@figma/code-connect';
+import React from "react"
+import Divider from "./Divider"
+import figma from "@figma/code-connect"
 
-// /**
-//  * -- 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
-//  */
+/**
+ * -- 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(
-//   Divider,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=8951-448&t=AlTwUg7LBLngn5z6-4',
-//   {
-//     props: {},
-//     example: () => <Divider />,
-//   }
-// );
+figma.connect(
+  Divider,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2421%3A1687",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      orientation: figma.enum("Orientation", {
+        Horizontal: "horizontal",
+        Vertical: "vertical",
+      }),
+    },
+    example: (props) => <Divider orientation={props.orientation} />,
+  },
+)

package/src/components/ExpandableCard/ExpandableCard.docs.mdx

@@ -64,7 +64,7 @@ const MyComponent = () => (
 | `helperText`       | `string`                      | -                   | Optional helper text displayed below the heading |
 | `leadingIcon`      | `ComponentType`               | -                   | Leading icon component (automatically wrapped)   |
 | `leadingContent`   | `ReactNode`                   | -                   | Leading content (icon or custom element)         |
-| `badge`            | `BadgeProps`                  | -                   | Badge to display                                 |
+| `badge`            | `ReactNode`                   | -                   | Badge to display                                 |
 | `badgePosition`    | `'top' \| 'bottom'`           | `'bottom'`          | Badge position                                   |
 | `numericValue`     | `string \| number`            | -                   | Numeric value to display on the right            |
 | `expandedContent`  | `ReactNode`                   | -                   | The content to show when expanded                |
@@ -152,7 +152,7 @@ const MyComponent = () => (
 <ExpandableCard
   heading="New Feature"
   helperText="Check out what's new"
-  badge={{ text: 'New', colorScheme: 'cyan' }}
+  badge={<Badge text="New" colorScheme="cyan" />}
   expandedContent={<BodyText>We've added new features to improve your experience.</BodyText>}
 />
 ```

package/src/components/ExpandableCard/ExpandableCard.figma.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+import ExpandableCard from "./ExpandableCard"
+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(
+  ExpandableCard,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7222%3A5935",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      expanded: figma.boolean("Expand?"),
+      heading: figma.string("Heading"),
+      helperText: figma.string("Helper text"),
+      expandedContent: figma.enum("Expand?", {
+        False: false,
+        True: true,
+      }),
+      disabled: figma.enum("State", {
+        Active: true,
+      }),
+      collapsable: figma.boolean("Expand?"),
+      focusable: figma.enum("State", {
+        Focus: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "customContent": figma.instance('Custom content'),
+      // "heading": figma.string('Heading'),
+      // "helperText": figma.string('Helper text'),
+      // "helperText": figma.boolean('Helper text?'),
+      // "numericalValue": figma.boolean('Numerical value?'),
+      // "numericalValue": figma.string('Numerical value'),
+      // "leadingContent": figma.boolean('Leading content?'),
+      // "badge": figma.boolean('Badge?')
+    },
+    example: (props) => (
+      <ExpandableCard
+        expanded={props.expanded}
+        heading={props.heading}
+        helperText={props.helperText}
+        expandedContent={props.expandedContent}
+        disabled={props.disabled}
+        collapsable={props.collapsable}
+        focusable={props.focusable}
+      />
+    ),
+  },
+)