@utilitywarehouse/hearth-react-native 0.20.0 → 0.21.0

package/src/components/DateInput/DateInput.docs.mdx

@@ -26,6 +26,7 @@ The `DateInput` component allows users to enter dates manually using separate in
   - [Flexible Segments](#flexible-segments)
   - [Grouping Inputs](#grouping-inputs)
   - [With State](#with-state)
+  - [Segment Refs](#segment-refs)
   - [Overriding Styles](#overriding-styles)
 - [Accessibility](#accessibility)
 
@@ -86,6 +87,9 @@ const MyComponent = () => {
 | `dayValue`            | `string`                            | -           | Controlled value for the day segment                  |
 | `monthValue`          | `string`                            | -           | Controlled value for the month segment                |
 | `yearValue`           | `string`                            | -           | Controlled value for the year segment                 |
+| `dayRef`              | `Ref<TextInput>`                    | -           | Ref for the day input segment                         |
+| `monthRef`            | `Ref<TextInput>`                    | -           | Ref for the month input segment                       |
+| `yearRef`             | `Ref<TextInput>`                    | -           | Ref for the year input segment                        |
 | `onDayChange`         | `(text: string) => void`            | -           | Callback fired when the day value changes             |
 | `onMonthChange`       | `(text: string) => void`            | -           | Callback fired when the month value changes           |
 | `onYearChange`        | `(text: string) => void`            | -           | Callback fired when the year value changes            |
@@ -159,6 +163,45 @@ Programmatically control date values:
 
 <Canvas of={Stories.WithState} />
 
+### Segment Refs
+
+Use `dayRef`, `monthRef`, and `yearRef` to focus each segment programmatically:
+
+<Canvas of={Stories.WithRefs} />
+
+```tsx
+import { useRef, useState } from 'react';
+import { TextInput } from 'react-native';
+import { Button, DateInput } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [day, setDay] = useState('');
+  const [month, setMonth] = useState('');
+  const [year, setYear] = useState('');
+
+  const dayRef = useRef<TextInput>(null);
+  const monthRef = useRef<TextInput>(null);
+  const yearRef = useRef<TextInput>(null);
+
+  return (
+    <>
+      <DateInput
+        dayValue={day}
+        monthValue={month}
+        yearValue={year}
+        onDayChange={setDay}
+        onMonthChange={setMonth}
+        onYearChange={setYear}
+        dayRef={dayRef}
+        monthRef={monthRef}
+        yearRef={yearRef}
+      />
+      <Button onPress={() => monthRef.current?.focus()}>Focus month</Button>
+    </>
+  );
+};
+```
+
 ### Overriding Styles
 
 You can override the styles of the input containers, input fields, and input labels using the `inputContainerStyle`, `inputStyle`, and `inputLabelStyle` props respectively:

package/src/components/DateInput/DateInput.props.ts

@@ -1,4 +1,5 @@
-import type { TextInputProps, ViewProps } from 'react-native';
+import type { Ref } from 'react';
+import type { TextInput, TextInputProps, ViewProps } from 'react-native';
 import type { FormFieldBaseProps } from '../FormField/FormField.props';
 import LabelProps from '../Label/Label.props';
 
@@ -42,6 +43,18 @@ export interface DateInputProps extends FormFieldBaseProps {
    * The controlled value for the year segment. Must be used with an `onYearChange` handler.
    */
   yearValue?: string;
+  /**
+   * Ref for the day segment input.
+   */
+  dayRef?: Ref<TextInput>;
+  /**
+   * Ref for the month segment input.
+   */
+  monthRef?: Ref<TextInput>;
+  /**
+   * Ref for the year segment input.
+   */
+  yearRef?: Ref<TextInput>;
   /**
    * Callback fired when the day value changes.
    */
@@ -96,6 +109,7 @@ export interface DateInputSegmentProps {
   label: string;
   placeholder?: string;
   value?: string;
+  inputRef?: Ref<TextInput>;
   onChange?: (text: string) => void;
   onFocus?: DateInputProps['onDayFocus'];
   onBlur?: DateInputProps['onDayBlur'];

package/src/components/DateInput/DateInput.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { TickSmallIcon, WarningSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { useState } from 'react';
-import { View } from 'react-native';
+import { useRef, useState } from 'react';
+import { TextInput, View } from 'react-native';
 import { Button, Card, Flex, Heading } from '../../components';
 import { DateInput } from './';
 
@@ -268,6 +268,41 @@ export const WithState: Story = {
   },
 };
 
+export const WithRefs: Story = {
+  render: () => {
+    const [day, setDay] = useState('');
+    const [month, setMonth] = useState('');
+    const [year, setYear] = useState('');
+
+    const dayRef = useRef<TextInput>(null);
+    const monthRef = useRef<TextInput>(null);
+    const yearRef = useRef<TextInput>(null);
+
+    return (
+      <Flex spacing="md">
+        <DateInput
+          label="Date"
+          helperText="Use buttons to focus each segment"
+          dayValue={day}
+          monthValue={month}
+          yearValue={year}
+          onDayChange={setDay}
+          onMonthChange={setMonth}
+          onYearChange={setYear}
+          dayRef={dayRef}
+          monthRef={monthRef}
+          yearRef={yearRef}
+        />
+        <Flex spacing="xs">
+          <Button onPress={() => dayRef.current?.focus()}>Focus day</Button>
+          <Button onPress={() => monthRef.current?.focus()}>Focus month</Button>
+          <Button onPress={() => yearRef.current?.focus()}>Focus year</Button>
+        </Flex>
+      </Flex>
+    );
+  },
+};
+
 export const CustomWidth: Story = {
   render: () => (
     <DateInput

package/src/components/DateInput/DateInput.tsx

@@ -23,6 +23,9 @@ const DateInput = ({
   dayValue,
   monthValue,
   yearValue,
+  dayRef,
+  monthRef,
+  yearRef,
   onDayChange,
   onMonthChange,
   onYearChange,
@@ -57,6 +60,7 @@ const DateInput = ({
             label="Day"
             placeholder={dayPlaceholder}
             value={dayValue}
+            inputRef={dayRef}
             onChange={onDayChange}
             onFocus={onDayFocus}
             onBlur={onDayBlur}
@@ -76,6 +80,7 @@ const DateInput = ({
             label="Month"
             placeholder={monthPlaceholder}
             value={monthValue}
+            inputRef={monthRef}
             onChange={onMonthChange}
             onFocus={onMonthFocus}
             onBlur={onMonthBlur}
@@ -95,6 +100,7 @@ const DateInput = ({
             label="Year"
             placeholder={yearPlaceholder}
             value={yearValue}
+            inputRef={yearRef}
             onChange={onYearChange}
             onFocus={onYearFocus}
             onBlur={onYearBlur}

package/src/components/DateInput/DateInputSegment.tsx

@@ -8,6 +8,7 @@ const DateInputSegment = ({
   label,
   placeholder,
   value,
+  inputRef,
   onChange,
   onFocus,
   onBlur,
@@ -27,6 +28,7 @@ const DateInputSegment = ({
         {label}
       </BodyText>
       <Input
+        ref={inputRef}
         value={value}
         onChangeText={onChange}
         onFocus={onFocus}

package/src/components/DetailText/DetailText.props.ts

@@ -1,21 +1,8 @@
-import type { TextProps as RNTextProps, TextStyle } from 'react-native';
-import type { ColorValue } from '../../types';
+import type { CommonTextProps } from '../../types';
 
-interface TextProps extends RNTextProps {
+interface DetailTextProps extends CommonTextProps {
+  /** Text size variant. */
   size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
-  strikeThrough?: boolean;
-  underline?: boolean;
-  truncated?: boolean;
-  italic?: boolean;
-  color?: ColorValue;
-  textTransform?: TextStyle['textTransform'];
-  textAlign?: TextStyle['textAlign'];
-  textAlignVertical?: TextStyle['textAlignVertical'];
-  textDecorationLine?: TextStyle['textDecorationLine'];
-  textDecorationStyle?: TextStyle['textDecorationStyle'];
-  textDecorationColor?: ColorValue;
-  userSelect?: TextStyle['userSelect'];
-  inverted?: boolean;
 }
 
-export default TextProps;
+export default DetailTextProps;

package/src/components/DetailText/DetailText.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { DetailText } from '.';
 import { VariantTitle } from '../../../docs/components';
-import { coloursAsArray } from '../../utils';
+import { coloursAsArray, textColorKeys } from '../../utils';
 import { Box } from '../Box';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -24,7 +24,6 @@ const meta = {
       control: 'boolean',
       description: 'Truncate the text.',
     },
-
     italic: {
       type: 'boolean',
       control: 'boolean',
@@ -41,7 +40,7 @@ const meta = {
       description: 'Strike through the text.',
     },
     color: {
-      options: coloursAsArray(),
+      options: textColorKeys,
       control: 'select',
       description: 'Color of the text. Use the color name from the theme.',
     },

package/src/components/DetailText/DetailText.tsx

@@ -1,8 +1,7 @@
-import { useMemo } from 'react';
 import { Text } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import { getFlattenedColorValue } from '../../utils';
+import { useStyleProps } from '../../hooks';
+import { getFlattenedColorValue, resolveThemeValueWithFallback } from '../../utils';
 import type DetailTextProps from './DetailText.props';
 
 const DetailText = ({
@@ -23,7 +22,8 @@ const DetailText = ({
   inverted,
   ...props
 }: DetailTextProps) => {
-  const { color: themeColor, colorMode } = useTheme();
+  const { computedStyles: utilityStyles, remainingProps } = useStyleProps(props);
+
   styles.useVariants({
     size,
     underline,
@@ -31,19 +31,10 @@ const DetailText = ({
     italic,
     inverted,
   });
-  const colorValue = useMemo(
-    () => getFlattenedColorValue(color, themeColor),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [color, colorMode]
-  );
-  const decorationColor = useMemo(
-    () => getFlattenedColorValue(textDecorationColor, themeColor),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [textDecorationColor, colorMode]
-  );
+
   return (
     <Text
-      {...props}
+      {...remainingProps}
       {...(truncated
         ? {
             numberOfLines: 1,
@@ -52,16 +43,16 @@ const DetailText = ({
         : {})}
       style={[
         styles.text,
+        utilityStyles,
         {
-          ...(colorValue && { color: colorValue }),
           ...(textTransform && { textTransform }),
           ...(textAlign && { textAlign }),
-          ...(decorationColor && { textDecorationColor: decorationColor }),
           ...(textDecorationLine && { textDecorationLine }),
           ...(textDecorationStyle && { textDecorationStyle }),
           ...(userSelect && { userSelect }),
           ...(textAlignVertical && { textAlignVertical }),
         },
+        styles.getColours(color, textDecorationColor),
         props.style,
       ]}
     >
@@ -143,6 +134,14 @@ const styles = StyleSheet.create(theme => ({
       },
     },
   },
+  getColours: (color?: string, textDecorationColor?: string) => ({
+    ...(color
+      ? { color: resolveThemeValueWithFallback(color, theme.helpers.semanticColor.text, theme.color) }
+      : {}),
+    ...(textDecorationColor
+      ? { textDecorationColor: getFlattenedColorValue(textDecorationColor, theme.color) }
+      : {}),
+  }),
 }));
 
 export default DetailText;

package/src/components/Flex/Flex.props.ts

@@ -1,7 +1,7 @@
 import type { FlexAlignType, ViewProps, ViewStyle } from 'react-native';
-import { SpacingValues } from '../../types';
+import { FlexLayoutProps, GapProps, SpacingValues } from '../../types';
 
-interface FlexProps extends ViewProps {
+interface FlexProps extends ViewProps, FlexLayoutProps, GapProps {
   direction?: ViewStyle['flexDirection'];
   align?: FlexAlignType;
   justify?: ViewStyle['justifyContent'];

package/src/components/Flex/Flex.stories.tsx

@@ -68,7 +68,7 @@ export const Playground: Story = {
           bg={`grey${index + 1}00`}
           w={100 + index * 10}
           h={100 + index * 10}
-          borderColor="grey800"
+          borderColor="strong"
           borderWidth="2"
           borderRadius="md"
         />

package/src/components/Flex/Flex.tsx

@@ -1,5 +1,6 @@
 import { View, ViewStyle } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import { useStyleProps } from '../../hooks';
 import FlexProps from './Flex.props';
 
 const Flex = ({
@@ -20,10 +21,12 @@ const Flex = ({
     flexWrap: wrap,
   };
 
+  const { computedStyles, remainingProps } = useStyleProps(rest);
+
   styles.useVariants({ spacing: space ?? spacing });
 
   return (
-    <View style={[propStyle, styles.flex, style]} {...rest}>
+    <View style={[propStyle, styles.flex, computedStyles, style]} {...remainingProps}>
       {children}
     </View>
   );

package/src/components/Grid/Grid.docs.mdx

@@ -2,6 +2,7 @@ import { Canvas, Controls, Meta, Primary, Story } from '@storybook/addon-docs/bl
 import { BodyText, Box, Center, Grid } from '../..';
 import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './Grid.stories';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 <Meta title="Primitives / Grid" />
 
@@ -26,17 +27,17 @@ The Grid component helps you create responsive grid layouts with configurable co
 <UsageWrap>
   <Center>
     <Grid columns={2} spacing="md" width={300}>
-      <Box backgroundColor="green400" height={100} padding="200">
-        <BodyText color="white">Item 1</BodyText>
+      <Box backgroundColor={color.green[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 1</BodyText>
       </Box>
-      <Box backgroundColor="blue400" height={100} padding="200">
-        <BodyText color="white">Item 2</BodyText>
+      <Box backgroundColor={color.blue[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 2</BodyText>
       </Box>
-      <Box backgroundColor="red400" height={100} padding="200">
-        <BodyText color="white">Item 3</BodyText>
+      <Box backgroundColor={color.red[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 3</BodyText>
       </Box>
-      <Box backgroundColor="yellow400" height={100} padding="200">
-        <BodyText color="white">Item 4</BodyText>
+      <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 4</BodyText>
       </Box>
     </Grid>
   </Center>
@@ -44,20 +45,21 @@ The Grid component helps you create responsive grid layouts with configurable co
 
 ```jsx
 import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Grid columns={2} spacing="md" width={300}>
-    <Box backgroundColor="green400" height={100} padding="200">
-      <BodyText color="white">Item 1</BodyText>
+    <Box backgroundColor={color.green[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 1</BodyText>
     </Box>
-    <Box backgroundColor="blue400" height={100} padding="200">
-      <BodyText color="white">Item 2</BodyText>
+    <Box backgroundColor={color.blue[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 2</BodyText>
     </Box>
-    <Box backgroundColor="red400" height={100} padding="200">
-      <BodyText color="white">Item 3</BodyText>
+    <Box backgroundColor={color.red[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 3</BodyText>
     </Box>
-    <Box backgroundColor="yellow400" height={100} padding="200">
-      <BodyText color="white">Item 4</BodyText>
+    <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 4</BodyText>
     </Box>
   </Grid>
 );
@@ -79,17 +81,17 @@ The Grid component supports responsive column layouts based on screen size break
       spacing="md"
       width="100%"
     >
-      <Box backgroundColor="green400" height={100} padding="200">
-        <BodyText color="white">Item 1</BodyText>
+      <Box backgroundColor={color.green[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 1</BodyText>
       </Box>
-      <Box backgroundColor="blue400" height={100} padding="200">
-        <BodyText color="white">Item 2</BodyText>
+      <Box backgroundColor={color.blue[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 2</BodyText>
       </Box>
-      <Box backgroundColor="red400" height={100} padding="200">
-        <BodyText color="white">Item 3</BodyText>
+      <Box backgroundColor={color.red[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 3</BodyText>
       </Box>
-      <Box backgroundColor="yellow400" height={100} padding="200">
-        <BodyText color="white">Item 4</BodyText>
+      <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 4</BodyText>
       </Box>
     </Grid>
   </Center>
@@ -97,6 +99,7 @@ The Grid component supports responsive column layouts based on screen size break
 
 ```jsx
 import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Grid
@@ -109,17 +112,17 @@ const MyComponent = () => (
     spacing="md"
     width="100%"
   >
-    <Box backgroundColor="green400" height={100} padding="200">
-      <BodyText color="white">Item 1</BodyText>
+    <Box backgroundColor={color.green[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 1</BodyText>
     </Box>
-    <Box backgroundColor="blue400" height={100} padding="200">
-      <BodyText color="white">Item 2</BodyText>
+    <Box backgroundColor={color.blue[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 2</BodyText>
     </Box>
-    <Box backgroundColor="red400" height={100} padding="200">
-      <BodyText color="white">Item 3</BodyText>
+    <Box backgroundColor={color.red[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 3</BodyText>
     </Box>
-    <Box backgroundColor="yellow400" height={100} padding="200">
-      <BodyText color="white">Item 4</BodyText>
+    <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 4</BodyText>
     </Box>
   </Grid>
 );
@@ -132,38 +135,39 @@ You can specify different horizontal and vertical spacing:
 <UsageWrap>
   <Center>
     <Grid columns={2} columnGap={24} rowGap={16}>
-      <Box backgroundColor="green400" height={100} padding="200">
-        <BodyText color="white">Item 1</BodyText>
+      <Box backgroundColor={color.green[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 1</BodyText>
       </Box>
-      <Box backgroundColor="blue400" height={100} padding="200">
-        <BodyText color="white">Item 2</BodyText>
+      <Box backgroundColor={color.blue[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 2</BodyText>
       </Box>
-      <Box backgroundColor="red400" height={100} padding="200">
-        <BodyText color="white">Item 3</BodyText>
+      <Box backgroundColor={color.red[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 3</BodyText>
       </Box>
-      <Box backgroundColor="yellow400" height={100} padding="200">
-        <BodyText color="white">Item 4</BodyText>
+      <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+        <BodyText color="inverted">Item 4</BodyText>
       </Box>
     </Grid>
   </Center>
 </UsageWrap>
 
 ```jsx
-import { Grid, Box } from '@utilitywarehouse/hearth-react-native';
+import { Grid, Box, BodyText } from '@utilitywarehouse/hearth-react-native';
+import { color } from '@utilitywarehouse/hearth-tokens';
 
 const MyComponent = () => (
   <Grid columns={2} columnGap={24} rowGap={8}>
-    <Box backgroundColor="green400" height={100} padding="200">
-      <BodyText color="white">Item 1</BodyText>
+    <Box backgroundColor={color.green[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 1</BodyText>
     </Box>
-    <Box backgroundColor="blue400" height={100} padding="200">
-      <BodyText color="white">Item 2</BodyText>
+    <Box backgroundColor={color.blue[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 2</BodyText>
     </Box>
-    <Box backgroundColor="red400" height={100} padding="200">
-      <BodyText color="white">Item 3</BodyText>
+    <Box backgroundColor={color.red[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 3</BodyText>
     </Box>
-    <Box backgroundColor="yellow400" height={100} padding="200">
-      <BodyText color="white">Item 4</BodyText>
+    <Box backgroundColor={color.yellow[400]} height={100} padding="200">
+      <BodyText color="inverted">Item 4</BodyText>
     </Box>
   </Grid>
 );

package/src/components/Heading/Heading.props.ts

@@ -1,22 +1,8 @@
-import type { Ref } from 'react';
-import type { Text, TextProps, TextStyle } from 'react-native';
-import type { ColorValue } from '../../types';
+import type { CommonTextProps } from '../../types';
 
-interface HeadingProps extends TextProps {
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  strikeThrough?: boolean;
-  underline?: boolean;
-  truncated?: boolean;
-  color?: ColorValue;
-  textTransform?: TextStyle['textTransform'];
-  textAlign?: TextStyle['textAlign'];
-  textAlignVertical?: TextStyle['textAlignVertical'];
-  textDecorationLine?: TextStyle['textDecorationLine'];
-  textDecorationStyle?: TextStyle['textDecorationStyle'];
-  textDecorationColor?: ColorValue;
-  userSelect?: TextStyle['userSelect'];
-  inverted?: boolean;
-  ref?: Ref<Text>;
+interface HeadingProps extends CommonTextProps {
+  /** Heading size variant. */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
 
 export default HeadingProps;

package/src/components/Heading/Heading.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react-vite';
 import { Heading } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { coloursAsArray } from '../../utils';
+import { textColorKeys } from '../../utils/coloursAsArray';
 import { Box } from '../Box';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
@@ -35,7 +36,7 @@ const meta = {
       description: 'Strike through the text.',
     },
     color: {
-      options: coloursAsArray(),
+      options: textColorKeys,
       control: 'select',
       description: 'Color of the text. Use the color name from the theme.',
     },