@utilitywarehouse/hearth-react-native 0.12.0 → 0.13.0

package/src/components/List/List.figma.tsx

@@ -1,110 +1,31 @@
-// /* eslint-disable react/jsx-no-undef */
-//
-// import { List } from './';
-// import figma from '@figma/code-connect';
-// import { Card } from '../Card';
+import React from "react"
+import List from "./List"
+import figma from "@figma/code-connect"
 
-// const props = {
-//   heading: figma.nestedProps('List Heading', {
-//     text: figma.string('heading'),
-//     helperText: figma.string('Supporting text'),
-//   }),
-//   listItem: figma.children('List Item'),
-//   listItems: figma.children('List Items'),
-//   cardProps: figma.nestedProps('Card', {
-//     variant: figma.enum('variant', {
-//       dashed: 'dashed',
-//       elevated: 'elevated',
-//       outline: 'outline',
-//       filled: 'filled',
-//     }),
-//     padding: figma.enum('padding', {
-//       large: 'large',
-//       medium: 'medium',
-//       small: 'small',
-//       none: 'none',
-//     }),
-//     colorScheme: figma.enum('colorScheme', {
-//       base: 'base',
-//       grey: 'grey',
-//       purple: 'purple',
-//     }),
-//     surface: figma.enum('surface', {
-//       base: 'base',
-//       purple: 'purple',
-//     }),
-//   }),
-// };
+/**
+ * -- 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(
-//   List,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4643-17907&m=dev',
-//   {
-//     props,
-//     example: ({ listItems }) => <List>{listItems}</List>,
-//   }
-// );
-
-// figma.connect(
-//   List,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4643-17907&m=dev',
-//   {
-//     props,
-//     variant: {
-//       'Heading?': true,
-//     },
-//     example: ({ heading, listItems }) => (
-//       <List headingText={heading.text} headingHelperText={heading.helperText}>
-//         {listItems}
-//       </List>
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   List,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4643-17907&m=dev',
-//   {
-//     props,
-//     variant: {
-//       container: 'tile',
-//       'Heading?': true,
-//     },
-//     example: ({ heading, listItems, cardProps }) => (
-//       <List
-//         container="card"
-//         headingText={heading.text}
-//         headingHelperText={heading.helperText}
-//       >
-//         <Card {...cardProps}>{listItems}</Card>
-//       </List>
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   List,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4643-17907&m=dev',
-//   {
-//     props,
-//     variant: {
-//       container: 'tile',
-//       'Heading?': false,
-//     },
-//     example: ({ listItems, cardProps }) => (
-//       <List container="card">
-//         <Card {...cardProps}>{listItems}</Card>
-//       </List>
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   List,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4623-14698&m=dev',
-//   {
-//     props,
-//     imports: [],
-//     example: ({ listItem }) => <>{listItem}</>,
-//   }
-// );
+figma.connect(
+  List,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2437%3A621",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      container: figma.enum("Container", {
+        None: "none",
+        "Subtle White": "subtleWhite",
+        "Emphasis White": "emphasisWhite",
+        "Subtle Warm White": "subtleWarmWhite",
+        "Emphasis Warm White": "emphasisWarmWhite",
+      }),
+      // No matching props could be found for these Figma properties:
+      // "sectionHeader": figma.boolean('Section header?'),
+      // "listAction": figma.boolean('List action?')
+    },
+    example: (props) => <List container={props.container} />,
+  },
+)

package/src/components/List/ListAction/ListAction.figma.tsx

@@ -0,0 +1,29 @@
+import figma from '@figma/code-connect';
+import ListAction from './ListAction';
+
+/**
+ * -- 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(
+  ListAction,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9661%3A5128',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      heading: figma.string('Action heading'),
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      'aria-disabled': figma.enum('State', {
+        Disabled: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "actionHeading": figma.string('Action heading')
+    },
+    example: props => <ListAction heading={props.heading} disabled={props.disabled} />,
+  }
+);

package/src/components/List/ListItem/ListItem.figma.tsx

@@ -1,220 +1,40 @@
-// /* eslint-disable react/jsx-no-undef */
-//
-// import { ListItem } from './';
-// import figma from '@figma/code-connect';
-
-// const props = {
-//   divider: figma.boolean('Divider?'),
-//   disabled: figma.enum('state', {
-//     disabled: true,
-//   }),
-//   loading: figma.enum('state', {
-//     loading: true,
-//   }),
-//   trailingIcon: figma.instance('Trailing Icon'),
-//   leadingIcon: figma.instance('Leading Icon'),
-//   text: figma.nestedProps('.Parts/List Item Text', {
-//     text: figma.string('list item text'),
-//     helperText: figma.string('Supporting Text'),
-//   }),
-// };
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     example: ({ disabled, divider, loading, text }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     variant: {
-//       'Trailing Icon?': true,
-//       'Trailing Icon': 'Chevron Right-01 - 24',
-//     },
-//     props,
-//     example: ({ disabled, divider, loading, text }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         onPress={() => console.log('list item pressed')}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     variant: {
-//       'Trailing Icon?': true,
-//     },
-//     example: ({ disabled, divider, loading, text, trailingIcon }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         trailingContent={trailingIcon}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     variant: {
-//       'Trailing Icon?': true,
-//       'Leading Icon?': true,
-//       'Trailing Icon': 'Chevron Right-01 - 24',
-//     },
-//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//         onPress={() => console.log('list item pressed')}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     variant: {
-//       'Trailing Icon?': true,
-//       'Leading Icon?': true,
-//     },
-//     example: ({ disabled, divider, loading, text, trailingIcon, leadingIcon }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//         trailingContent={trailingIcon}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     props: props,
-//     variant: {
-//       'Leading Icon?': true,
-//     },
-//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     variant: {
-//       _content: 'toggle',
-//       'Trailing Icon?': true,
-//       'Leading Icon?': true,
-//     },
-//     props,
-//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
-//       // Toggle doesn't exist in native-ui yet
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//         trailingContent={<Toggle />}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     variant: {
-//       _content: 'toggle',
-//       'Leading Icon?': true,
-//     },
-//     props,
-//     example: ({ disabled, divider, loading, text, leadingIcon }) => (
-//       // Toggle doesn't exist in native-ui yet
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         leadingContent={leadingIcon}
-//         trailingContent={<Toggle />}
-//       />
-//     ),
-//   }
-// );
-
-// figma.connect(
-//   ListItem,
-//   'https://www.figma.com/design/3RY3OvLA88yZksRjOfjQJm/UW-App-UI?node-id=4283-3401&m=dev',
-//   {
-//     variant: {
-//       _content: 'toggle',
-//       'Leading Icon?': false,
-//     },
-//     props,
-//     example: ({ disabled, divider, loading, text }) => (
-//       // Toggle doesn't exist in native-ui yet
-//       <ListItem
-//         text={text.text}
-//         helperText={text.helperText}
-//         disabled={disabled}
-//         divider={divider}
-//         loading={loading}
-//         trailingContent={<Toggle />}
-//       />
-//     ),
-//   }
-// );
+import figma from '@figma/code-connect';
+import ListItem from './ListItem';
+
+/**
+ * -- 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(ListItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2421%3A1628', {
+  props: {
+    // These props were automatically mapped based on your linked code:
+    loading: figma.enum('State', {
+      Loading: true,
+    }),
+    disabled: figma.enum('State', {
+      Disabled: true,
+    }),
+    'aria-disabled': figma.enum('State', {
+      Disabled: true,
+    }),
+    // No matching props could be found for these Figma properties:
+    // "listHeading": figma.string('List heading'),
+    // "helperText": figma.boolean('Helper text?'),
+    // "helperText": figma.string('Helper text'),
+    // "customContent": figma.instance('Custom content'),
+    // "badge": figma.boolean('Badge?'),
+    // "leadingContent": figma.boolean('Leading content?'),
+    // "trailingContent": figma.boolean('Trailing Content?'),
+    // "numericalValue": figma.boolean('Numerical value?'),
+    // "numericalValue": figma.string('Numerical value'),
+    // "variant": figma.enum('Variant', {
+    //   "Default": "default",
+    //   "Custom": "custom"
+    // }),
+    // "paddingNone": figma.boolean('Padding None?')
+  },
+  example: props => <ListItem loading={props.loading} disabled={props.disabled} />,
+});

package/src/components/List/ListItem/ListItemLeadingContent.figma.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import ListItemLeadingContent from "./ListItemLeadingContent"
+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(
+  ListItemLeadingContent,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6732%3A5792",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "icon24": figma.instance('Icon-24'),
+      // "variant": figma.enum('Variant', {
+      //   "Icon": "icon",
+      //   "Icon Container": "icon-container",
+      //   "Avatar": "avatar",
+      //   "Indicator": "indicator"
+      // })
+    },
+    example: (props) => <ListItemLeadingContent />,
+  },
+)

package/src/components/List/ListItem/ListItemTrailingContent.figma.tsx

@@ -0,0 +1,27 @@
+import React from "react"
+import ListItemTrailingContent from "./ListItemTrailingContent"
+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(
+  ListItemTrailingContent,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=9852%3A9858",
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "icon20": figma.instance('Icon-20'),
+      // "variant": figma.enum('Variant', {
+      //   "Link": "link",
+      //   "Button": "button"
+      // })
+    },
+    example: (props) => <ListItemTrailingContent />,
+  },
+)

package/src/components/Menu/Menu.figma.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import Menu from "./Menu"
+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(
+  Menu,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3263%3A18832",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      heading: figma.string("Heading"),
+      // No matching props could be found for these Figma properties:
+      // "heading": figma.string('Heading'),
+      // "heading": figma.boolean('Heading?'),
+      // "grabber": figma.boolean('Grabber?'),
+      // "deviceType": figma.enum('Device type', {
+      //   "Web": "web",
+      //   "App": "app"
+      // })
+    },
+    example: (props) => <Menu heading={props.heading} />,
+  },
+)

package/src/components/Menu/MenuItem.figma.tsx

@@ -0,0 +1,31 @@
+import figma from '@figma/code-connect';
+import MenuItem from './MenuItem';
+
+/**
+ * -- 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(
+  MenuItem,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6416%3A11142',
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      disabled: figma.enum('State', {
+        Active: true,
+      }),
+      focusable: figma.enum('State', {
+        Focus: true,
+      }),
+      // No matching props could be found for these Figma properties:
+      // "number": figma.string('Number'),
+      // "selected": figma.boolean('Selected?')
+    },
+    example: props => (
+      <MenuItem text={null} disabled={props.disabled} focusable={props.focusable} />
+    ),
+  }
+);

package/src/components/Modal/Modal.figma.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+import Modal from "./Modal"
+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(
+  Modal,
+  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=6300%3A2825",
+  {
+    props: {
+      // These props were automatically mapped based on your linked code:
+      loading: figma.enum("State", {
+        Loading: true,
+      }),
+      image: figma.enum("Image?", {
+        False: false,
+        True: true,
+      }),
+      heading: figma.string("Heading"),
+      description: figma.string("Description"),
+      fullscreen: figma.boolean("Full screen?"),
+      showHandle: figma.boolean("Handle?"),
+      // No matching props could be found for these Figma properties:
+      // "heading": figma.string('Heading'),
+      // "description": figma.string('Description'),
+      // "customContent": figma.boolean('Custom content?'),
+      // "buttons": figma.boolean('Buttons?'),
+      // "close": figma.boolean('Close?'),
+      // "customContent": figma.instance('Custom content'),
+      // "homeIndicator": figma.boolean('Home indicator?'),
+      // "handle": figma.boolean('Handle?'),
+      // "loadingHeading": figma.string('Loading heading'),
+      // "deviceType": figma.enum('Device type', {
+      //   "Desktop": "desktop",
+      //   "Tablet": "tablet",
+      //   "Mobile": "mobile"
+      // })
+    },
+    example: (props) => (
+      <Modal
+        loading={props.loading}
+        image={props.image}
+        heading={props.heading}
+        description={props.description}
+        fullscreen={props.fullscreen}
+        showHandle={props.showHandle}
+      />
+    ),
+  },
+)

package/src/components/PillGroup/Pill.figma.tsx

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

package/src/components/PillGroup/Pill.tsx

@@ -1,10 +1,10 @@
 import { createPressable } from '@gluestack-ui/pressable';
 import { Pressable } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { Icon } from '../Icon';
 import { BodyText } from '../BodyText';
-import { usePillGroupContext } from './PillGroup.context';
+import { Icon } from '../Icon';
 import type { PillProps } from './Pill.props';
+import { usePillGroupContext } from './PillGroup.context';
 
 const PillRoot = ({
   value,
@@ -61,7 +61,7 @@ const styles = StyleSheet.create(theme => ({
       _hover: {
         backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
       },
-      '_focus-visible': theme.helpers.focusVisible,
+      // '_focus-visible': theme.helpers.focusVisible,
     },
     variants: {
       active: {