@utilitywarehouse/hearth-react-native 0.16.0 → 0.16.1

package/src/components/Carousel/Carousel.figma.tsx

@@ -1,19 +1,22 @@
 import figma from '@figma/code-connect';
-import Carousel from './Carousel';
+import { Carousel, CarouselItem } 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(Carousel, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=5191%3A3220', {
-  props: {
-    // These props were automatically mapped based on your linked code:
-    inverted: figma.boolean('Inverted?'),
-    // No matching props could be found for these Figma properties:
-    // "arrows": figma.boolean('Arrows?')
-  },
-  example: props => <Carousel width={null} inverted={props.inverted} />,
-});
+figma.connect(
+  Carousel,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=5191-3220&m=dev',
+  {
+    props: {
+      inverted: figma.boolean('Inverted?'),
+      showNavigation: figma.boolean('Arrows?'),
+    },
+    example: props => (
+      // Example usage of the Carousel component
+      // See https://hearth.prod.uw.systems/react-native/?path=/docs/components-carousel--docs
+      <Carousel width={300} inverted={props.inverted} showNavigation={props.showNavigation}>
+        <CarouselItem>Item 1</CarouselItem>
+        <CarouselItem>Item 2</CarouselItem>
+        <CarouselItem>Item 3</CarouselItem>
+      </Carousel>
+    ),
+  }
+);

package/src/components/Carousel/Carousel.tsx

@@ -49,7 +49,7 @@ const Carousel = ({
   ...props
 }: CarouselProps) => {
   const [activeIndex, setActiveIndex] = useState(initialActiveIndex);
-  const [numItems, setNumItems] = useState(0);
+  const [, setNumItems] = useState(0);
 
   const scrollViewRef = useRef<ScrollView>(null);
   const flatListRef = useRef<FlatList>(null);

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

@@ -1,29 +1,26 @@
 import figma from '@figma/code-connect';
 import { Checkbox } from './Checkbox';
 
-/**
- * -- 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(Checkbox, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3087%3A7316', {
+figma.connect(Checkbox, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3087-7316', {
   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,
+    label: figma.string('Label'),
+    helperText: figma.boolean('Helper text?', {
+      true: figma.string('Helper text'),
+      false: undefined,
     }),
-    // 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?')
+    validationText: figma.string('Validation text'),
   },
-  example: props => <Checkbox disabled={props.disabled} checked={props.checked} />,
+  example: props => (
+    <Checkbox
+      disabled={props.disabled}
+      checked={props.checked}
+      label={props.label}
+      helperText={props.helperText}
+      invalidText={props.validationText}
+    />
+  ),
 });

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

@@ -76,7 +76,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  render: ({ checked: checkedArg = false, value, children, onChange, ...args }) => {
+  render: ({ checked: checkedArg = false, value, onChange, ...args }) => {
     const [checked, setChecked] = React.useState(checkedArg);
     useEffect(() => {
       setChecked(checkedArg);
@@ -95,7 +95,7 @@ export const Playground: Story = {
 };
 
 export const WithImage: Story = {
-  render: ({ children, ...args }) => (
+  render: ({ ...args }) => (
     <CheckboxGroup aria-label="Checkbox Group" nativeID="checkbox-group">
       <Checkbox
         aria-label="Visa"

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

@@ -1,20 +1,53 @@
-import React from "react"
-import CheckboxGroup from "./CheckboxGroup"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { CheckboxGroup } from '../';
 
-/**
- * -- 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
- */
+const props = {
+  label: figma.string('Group label'),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+    false: undefined,
+  }),
+  direction: figma.enum('Direction', {
+    Column: undefined,
+    Row: 'row',
+  }),
+  tiles: figma.children('Checkbox Tile'),
+  checkboxes: figma.children('Checkbox'),
+};
 
 figma.connect(
   CheckboxGroup,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=3141%3A4275",
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3141-4275&m=dev',
   {
-    props: {},
-    example: (props) => <CheckboxGroup />,
-  },
-)
+    variant: {
+      Content: 'Checkbox Tile',
+    },
+    props,
+    example: props => (
+      <CheckboxGroup
+        type="tile"
+        label={props.label}
+        helperText={props.helperText}
+        direction={props.direction}
+      >
+        {props.tiles}
+      </CheckboxGroup>
+    ),
+  }
+);
+
+figma.connect(
+  CheckboxGroup,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3141-4275&m=dev',
+  {
+    variant: {
+      Content: 'Checkbox',
+    },
+    props,
+    example: props => (
+      <CheckboxGroup label={props.label} helperText={props.helperText} direction={props.direction}>
+        {props.checkboxes}
+      </CheckboxGroup>
+    ),
+  }
+);

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

@@ -1,32 +1,29 @@
-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
- */
+import figma from '@figma/code-connect';
+import { Checkbox } from './Checkbox';
 
 figma.connect(
-  CheckboxTileRoot,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=4961%3A23797",
+  Checkbox,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=4961-23797&m=dev',
   {
     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?')
+      disabled: figma.enum('State', {
+        Disabled: true,
+      }),
+      checked: figma.boolean('Checked?'),
+      label: figma.string('Label'),
+      helperText: figma.boolean('Helper text?', {
+        true: figma.string('Helper text'),
+        false: undefined,
+      }),
     },
-    example: (props) => <CheckboxTileRoot />,
-  },
-)
+    example: props => (
+      <Checkbox
+        type="tile"
+        disabled={props.disabled}
+        checked={props.checked}
+        label={props.label}
+        helperText={props.helperText}
+      />
+    ),
+  }
+);

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

@@ -1,56 +1,72 @@
-import React from "react"
-import CurrencyInput from "./CurrencyInput"
-import figma from "@figma/code-connect"
+import figma from '@figma/code-connect';
+import { CurrencyInput, FormField } 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
- */
+const props = {
+  placeholder: figma.string('Value'),
+  value: figma.string('Value'),
+  label: figma.string('Label'),
+  helperText: figma.boolean('Helper text?', {
+    true: figma.string('Helper text'),
+    false: undefined,
+  }),
+  invalidText: figma.enum('State', {
+    Default: undefined,
+    Invalid: figma.string('Validation'),
+  }),
+  validationStatus: figma.enum('State', {
+    Default: undefined,
+    Invalid: 'invalid',
+  }),
+  // "labelVariant": figma.enum('Label variant', {
+  //   "Body": "body",
+  //   "Heading": "heading"
+  // })
+};
+
+const onChangeHandler = () => {
+  // Placeholder for onChange handler
+};
+
+const value = 'some value';
+
+figma.connect(
+  CurrencyInput,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2161%3A1336',
+  {
+    props,
+    variant: {
+      'Value type': 'Filled',
+    },
+    example: props => (
+      <FormField
+        label={props.label}
+        helperText={props.helperText}
+        invalidText={props.invalidText}
+        validationStatus={props.validationStatus}
+      >
+        <CurrencyInput value={props.value} onChange={onChangeHandler} />
+      </FormField>
+    ),
+  }
+);
 
 figma.connect(
   CurrencyInput,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2161%3A1336",
+  '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"
-      // })
+    props,
+    variant: {
+      'Value type': 'Placeholder',
     },
-    example: (props) => (
-      <CurrencyInput
-        focused={props.focused}
-        placeholder={props.placeholder}
-        autoFocus={props.autoFocus}
-        defaultValue={props.defaultValue}
-        value={props.value}
-        focusable={props.focusable}
-        hasTVPreferredFocus={props.hasTVPreferredFocus}
-      />
+    example: props => (
+      <FormField
+        label={props.label}
+        helperText={props.helperText}
+        invalidText={props.invalidText}
+        validationStatus={props.validationStatus}
+      >
+        <CurrencyInput placeholder={props.placeholder} value={value} onChange={onChangeHandler} />
+      </FormField>
     ),
-  },
-)
+  }
+);

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

@@ -1,60 +1,72 @@
-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
- */
+import figma from '@figma/code-connect';
+import { DateInput } from '../';
 
 figma.connect(
   DateInput,
-  "https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=2277%3A14708",
+  '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", {
+      hideDay: figma.boolean('Day?', {
+        true: false,
+        false: true,
+      }),
+      hideMonth: figma.boolean('Month?', {
+        true: false,
+        false: true,
+      }),
+      // hideYear: figma.boolean('Year?'),
+      monthPlaceholder: figma.enum('Value type', {
+        Placeholder: figma.boolean('Month?', {
+          true: figma.string('Month value'),
+        }),
+      }),
+      yearPlaceholder: figma.enum('Value type', {
+        Placeholder: figma.string('Year value'),
+      }),
+      dayPlaceholder: figma.enum('Value type', {
+        Placeholder: figma.boolean('Day?', {
+          true: figma.string('Day value'),
+        }),
+      }),
+      dayValue: figma.enum('Value type', {
+        Filled: figma.boolean('Day?', {
+          true: figma.string('Day value'),
+        }),
+      }),
+      monthValue: figma.enum('Value type', {
+        Filled: figma.boolean('Month?', {
+          true: figma.string('Month value'),
+        }),
+      }),
+      yearValue: figma.enum('Value type', {
+        Filled: figma.string('Year value'),
+      }),
+      disabled: figma.enum('State', {
         Disabled: true,
       }),
-      readonly: figma.enum("State", {
-        "Read-only": true,
+      readonly: figma.enum('State', {
+        'Read-only': true,
+      }),
+      label: figma.string('Label'),
+      helperText: figma.string('Helper text'),
+      validText: figma.enum('State', {
+        Valid: figma.string('Validation'),
+      }),
+      invalidText: figma.enum('State', {
+        Invalid: figma.string('Validation'),
+      }),
+      validationStatus: figma.enum('State', {
+        Default: undefined,
+        Valid: 'valid',
+        Invalid: 'invalid',
       }),
-      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) => (
+    example: props => (
       <DateInput
         hideDay={props.hideDay}
         hideMonth={props.hideMonth}
@@ -69,7 +81,8 @@ figma.connect(
         helperText={props.helperText}
         validText={props.validText}
         invalidText={props.invalidText}
+        validationStatus={props.validationStatus}
       />
     ),
-  },
-)
+  }
+);

package/src/components/DateInput/DateInput.tsx

@@ -111,6 +111,7 @@ const styles = StyleSheet.create(theme => ({
   container: {
     flexDirection: 'row',
     gap: theme.components.input.date.gap,
+    // alignItems: 'stretch',
   },
 }));
 

package/src/components/DateInput/DateInputSegment.tsx

@@ -63,7 +63,7 @@ const styles = StyleSheet.create(theme => ({
   container: {
     flex: 1,
     gap: theme.components.input.gap,
-    maxWidth: 96,
+    // maxWidth: 96,
   },
   label: {
     variants: {
@@ -75,7 +75,7 @@ const styles = StyleSheet.create(theme => ({
     },
   },
   input: {
-    maxWidth: 96,
+    // maxWidth: 96,
   },
 }));
 

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

@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect';
+import { DatePicker } from '../';
+
+const selectedDate = '';
+const handlePickerChange = () => {
+  // Placeholder for onChange handler
+};
+const handleCancel = () => {
+  // Placeholder for onCancel handler
+};
+
+const pickerRef = () => null;
+
+figma.connect(
+  DatePicker,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=3797-6383&m=dev',
+  {
+    props: {
+      // "grabber": figma.boolean('Grabber?'),
+      header: figma.boolean('Header?', {
+        true: false,
+        false: true,
+      }),
+      footer: figma.boolean('Footer?', {
+        true: false,
+        false: true,
+      }),
+      initialView: figma.enum('Type', {
+        Day: undefined,
+        Month: 'month',
+        Year: 'year',
+      }),
+    },
+    example: props => (
+      <DatePicker
+        ref={pickerRef}
+        mode="single"
+        date={selectedDate}
+        hideFooter={props.footer}
+        hideHeader={props.header}
+        initialView={props.initialView}
+        onChange={handlePickerChange}
+        onCancel={handleCancel}
+      />
+    ),
+  }
+);

package/src/components/DatePicker/DatePicker.tsx

@@ -52,6 +52,7 @@ export interface DatePickerMultipleProps extends DatePickerBaseProps {
 const DateTimePicker = (
   props: DatePickerSingleProps | DatePickerRangeProps | DatePickerMultipleProps
 ) => {
+  // eslint-disable-next-line @typescript-eslint/prefer-as-const
   const numerals: 'latn' = 'latn';
   const {
     mode = 'single',
@@ -216,26 +217,29 @@ const DateTimePicker = (
           ...prevState,
           currentYear: action.payload,
         };
-      case CalendarActionKind.CHANGE_SELECTED_DATE:
+      case CalendarActionKind.CHANGE_SELECTED_DATE: {
         const { date: selectedDate } = action.payload;
         return {
           ...prevState,
           date: selectedDate,
           currentDate: selectedDate,
         };
-      case CalendarActionKind.CHANGE_SELECTED_RANGE:
+      }
+      case CalendarActionKind.CHANGE_SELECTED_RANGE: {
         const { startDate: start, endDate: end } = action.payload;
         return {
           ...prevState,
           startDate: start,
           endDate: end,
         };
-      case CalendarActionKind.CHANGE_SELECTED_MULTIPLE:
+      }
+      case CalendarActionKind.CHANGE_SELECTED_MULTIPLE: {
         const { dates: selectedDates } = action.payload;
         return {
           ...prevState,
           dates: selectedDates,
         };
+      }
       case CalendarActionKind.RESET_STATE:
         return action.payload;
       default:
@@ -363,7 +367,7 @@ const DateTimePicker = (
           });
         } else if (mode === 'range') {
           // set time to 00:00:00
-          let start = removeTime(stateRef.current.startDate, timeZone);
+          const start = removeTime(stateRef.current.startDate, timeZone);
           let end = removeTime(stateRef.current.endDate, timeZone);
           const selected = removeTime(selectedDate, timeZone);
           let isStart: boolean = true;

package/src/components/DatePicker/DatePickerHeader/DatePickerHeader.props.ts

@@ -6,5 +6,3 @@ export type HeaderProps = {
   NextIcon?: React.ReactNode;
   navigationPosition?: NavigationPosition;
 };
-
-export type NavigationProps = {};

package/src/components/DatePicker/DatePickerHeader/index.tsx

@@ -1,12 +1,12 @@
 import { memo } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import type { HeaderProps, NavigationProps } from './DatePickerHeader.props';
+import type { HeaderProps } from './DatePickerHeader.props';
 import NextButton from './DatePickerNextButton';
 import PrevButton from './DatePickerPrevButton';
 import Selectors from './DatePickerSelectors';
 
-const NavigationButtons = ({}: NavigationProps) => (
+const NavigationButtons = () => (
   <View style={styles.navigation}>
     <PrevButton />
     <NextButton />

package/src/components/DatePicker/index.ts

@@ -1,6 +1,8 @@
 import 'dayjs/locale/en';
 import './polyfill';
 
+export type { BottomSheetMethods as DatePickerMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
+
 export type {
   CalendarDay,
   CalendarMode,