@utilitywarehouse/hearth-react-native 0.10.0 → 0.12.0

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/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/DateInput/DateInput.docs.mdx

@@ -0,0 +1,163 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { BackToTopButton, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './DateInput.stories';
+
+<Meta title="Forms / Date Input" />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=2277-14708&t=dbFGPEbIX93BQlur-4" />
+
+<BackToTopButton />
+
+# Date Input
+
+The `DateInput` component allows users to enter dates manually using separate input fields for day, month, and year. It provides flexibility to show only the date segments you need, supports validation states, and integrates seamlessly with the React Native form system.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Examples](#examples)
+  - [Date of Birth](#date-of-birth)
+  - [Card Expiry](#card-expiry)
+  - [Year Only](#year-only)
+  - [Validation](#validation)
+  - [Disabled](#disabled)
+  - [Default Value](#default-value)
+  - [Custom Validation](#custom-validation)
+  - [Flexible Segments](#flexible-segments)
+  - [Grouping Inputs](#grouping-inputs)
+  - [With State](#with-state)
+- [Accessibility](#accessibility)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+Use state to control the date values:
+
+```tsx
+import { useState } from 'react';
+import { DateInput } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => {
+  const [day, setDay] = useState('');
+  const [month, setMonth] = useState('');
+  const [year, setYear] = useState('');
+
+  return (
+    <DateInput
+      label="Date of birth"
+      dayValue={day}
+      monthValue={month}
+      yearValue={year}
+      onDayChange={setDay}
+      onMonthChange={setMonth}
+      onYearChange={setYear}
+    />
+  );
+};
+```
+
+## Props
+
+### DateInputProps
+
+| Prop               | Type                                | Default     | Description                                           |
+| ------------------ | ----------------------------------- | ----------- | ----------------------------------------------------- |
+| `label`            | `string`                            | -           | Label text displayed above the inputs                 |
+| `helperText`       | `string`                            | -           | Helper text displayed below the inputs                |
+| `helperIcon`       | `ComponentType`                     | -           | Icon component to display with helper/validation text |
+| `validationStatus` | `'initial' \| 'valid' \| 'invalid'` | `'initial'` | Validation status of the input                        |
+| `validText`        | `string`                            | -           | Text to display when validation status is valid       |
+| `invalidText`      | `string`                            | -           | Text to display when validation status is invalid     |
+| `required`         | `boolean`                           | `false`     | Whether the input is required                         |
+| `disabled`         | `boolean`                           | `false`     | Whether the input is disabled                         |
+| `readonly`         | `boolean`                           | `false`     | Whether the input is read-only                        |
+| `hideDay`          | `boolean`                           | `false`     | Whether to hide the day segment                       |
+| `hideMonth`        | `boolean`                           | `false`     | Whether to hide the month segment                     |
+| `hideYear`         | `boolean`                           | `false`     | Whether to hide the year segment                      |
+| `dayPlaceholder`   | `string`                            | `'DD'`      | Placeholder text for the day segment                  |
+| `monthPlaceholder` | `string`                            | `'MM'`      | Placeholder text for the month segment                |
+| `yearPlaceholder`  | `string`                            | `'YYYY'`    | Placeholder text for the year segment                 |
+| `dayValue`         | `string`                            | -           | Controlled value for the day segment                  |
+| `monthValue`       | `string`                            | -           | Controlled value for the month segment                |
+| `yearValue`        | `string`                            | -           | Controlled value for the year 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            |
+| `onDayFocus`       | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the day segment receives focus    |
+| `onMonthFocus`     | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the month segment receives focus  |
+| `onYearFocus`      | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the year segment receives focus   |
+| `onDayBlur`        | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the day segment loses focus       |
+| `onMonthBlur`      | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the month segment loses focus     |
+| `onYearBlur`       | `(e: NativeSyntheticEvent) => void` | -           | Callback fired when the year segment loses focus      |
+
+## Examples
+
+### Date of Birth
+
+<Canvas of={Stories.DateOfBirth} />
+
+### Card Expiry
+
+Hide the day segment for card expiry dates:
+
+<Canvas of={Stories.CardExpiry} />
+
+### Year Only
+
+Hide day and month segments for year-only inputs:
+
+<Canvas of={Stories.YearOnly} />
+
+### Validation
+
+Show validation states with helper text and icons:
+
+<Canvas of={Stories.Validation} />
+
+### Disabled
+
+Disabled date inputs:
+
+<Canvas of={Stories.Disabled} />
+
+### Default Value
+
+Set initial values with `value` props:
+
+<Canvas of={Stories.DefaultValue} />
+
+### Custom Validation
+
+Implement custom validation logic:
+
+<Canvas of={Stories.WithCustomValidation} />
+
+### Flexible Segments
+
+Control which segments are visible:
+
+<Canvas of={Stories.FlexibleSegments} />
+
+### Grouping Inputs
+
+Group date inputs with other form fields in a card:
+
+<Canvas of={Stories.GroupingInputs} />
+
+### With State
+
+Programmatically control date values:
+
+<Canvas of={Stories.WithState} />
+
+## Accessibility
+
+- Each segment has a descriptive label ("Day", "Month", "Year") for screen readers
+- Keyboard type is set to `number-pad` for easier numeric input
+- Validation states are communicated through helper text and icons
+- Disabled state properly communicated to assistive technologies

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

@@ -0,0 +1,80 @@
+import type { TextInputProps } from 'react-native';
+import type { FormFieldBaseProps } from '../FormField/FormField.props';
+
+export interface DateInputProps extends FormFieldBaseProps {
+  /**
+   * Whether the day segment is hidden.
+   * @default false
+   */
+  hideDay?: boolean;
+  /**
+   * Whether the month segment is hidden.
+   * @default false
+   */
+  hideMonth?: boolean;
+  /**
+   * Whether the year segment is hidden.
+   * @default false
+   */
+  hideYear?: boolean;
+  /**
+   * Placeholder text for the day segment.
+   */
+  dayPlaceholder?: string;
+  /**
+   * Placeholder text for the month segment.
+   */
+  monthPlaceholder?: string;
+  /**
+   * Placeholder text for the year segment.
+   */
+  yearPlaceholder?: string;
+  /**
+   * The controlled value for the day segment. Must be used with an `onDayChange` handler.
+   */
+  dayValue?: string;
+  /**
+   * The controlled value for the month segment. Must be used with an `onMonthChange` handler.
+   */
+  monthValue?: string;
+  /**
+   * The controlled value for the year segment. Must be used with an `onYearChange` handler.
+   */
+  yearValue?: string;
+  /**
+   * Callback fired when the day value changes.
+   */
+  onDayChange?: (text: string) => void;
+  /**
+   * Callback fired when the month value changes.
+   */
+  onMonthChange?: (text: string) => void;
+  /**
+   * Callback fired when the year value changes.
+   */
+  onYearChange?: (text: string) => void;
+  /**
+   * Callback fired when the day segment receives focus.
+   */
+  onDayFocus?: TextInputProps['onFocus'];
+  /**
+   * Callback fired when the month segment receives focus.
+   */
+  onMonthFocus?: TextInputProps['onFocus'];
+  /**
+   * Callback fired when the year segment receives focus.
+   */
+  onYearFocus?: TextInputProps['onFocus'];
+  /**
+   * Callback fired when the day segment loses focus.
+   */
+  onDayBlur?: TextInputProps['onBlur'];
+  /**
+   * Callback fired when the month segment loses focus.
+   */
+  onMonthBlur?: TextInputProps['onBlur'];
+  /**
+   * Callback fired when the year segment loses focus.
+   */
+  onYearBlur?: TextInputProps['onBlur'];
+}

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

@@ -0,0 +1,269 @@
+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 { Button, Card, Flex, Heading } from '../../components';
+import { DateInput } from './';
+
+const DateInputMeta: Meta<typeof DateInput> = {
+  title: 'Stories / DateInput',
+  component: DateInput,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+    },
+    helperText: {
+      control: 'text',
+    },
+    validationStatus: {
+      control: 'select',
+      options: ['initial', 'valid', 'invalid'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    required: {
+      control: 'boolean',
+    },
+    hideDay: {
+      control: 'boolean',
+    },
+    hideMonth: {
+      control: 'boolean',
+    },
+    hideYear: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default DateInputMeta;
+
+type Story = StoryObj<typeof DateInput>;
+
+export const Playground: Story = {
+  args: {
+    label: 'Date',
+    helperText: 'Helper text',
+  },
+};
+
+export const DateOfBirth: Story = {
+  render: () => {
+    return <DateInput label="Date of birth" helperText="Enter your date of birth" required />;
+  },
+};
+
+export const CardExpiry: Story = {
+  render: () => {
+    const [month, setMonth] = useState('');
+    const [year, setYear] = useState('');
+    return (
+      <DateInput
+        label="Card expiry"
+        helperText="Enter the expiry month and year"
+        monthValue={month}
+        yearValue={year}
+        onMonthChange={setMonth}
+        onYearChange={setYear}
+        hideDay
+        required
+      />
+    );
+  },
+};
+
+export const YearOnly: Story = {
+  render: () => {
+    return <DateInput label="Year" helperText="Enter the year" hideDay hideMonth />;
+  },
+};
+
+export const Validation: Story = {
+  render: () => {
+    const [day, setDay] = useState('01');
+    const [month, setMonth] = useState('02');
+    const [year, setYear] = useState('2025');
+    return (
+      <View style={{ gap: 16 }}>
+        <DateInput
+          label="Valid date"
+          dayValue={day}
+          monthValue={month}
+          yearValue={year}
+          onDayChange={setDay}
+          onMonthChange={setMonth}
+          onYearChange={setYear}
+          validationStatus="valid"
+          validText="Date is valid"
+          helperIcon={TickSmallIcon}
+          required
+        />
+        <DateInput
+          label="Invalid date"
+          dayValue="32"
+          monthValue="13"
+          yearValue="2025"
+          validationStatus="invalid"
+          invalidText="Please enter a valid date"
+          helperIcon={WarningSmallIcon}
+          required
+        />
+      </View>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    return (
+      <DateInput
+        label="Date of birth"
+        helperText="This field is disabled"
+        dayValue="15"
+        monthValue="06"
+        yearValue="1990"
+        disabled
+      />
+    );
+  },
+};
+
+export const DefaultValue: Story = {
+  render: () => {
+    return <DateInput label="Date of birth" dayValue="01" monthValue="01" yearValue="2000" />;
+  },
+};
+
+export const WithCustomValidation: Story = {
+  render: () => {
+    const [day, setDay] = useState('');
+    const [month, setMonth] = useState('');
+    const [year, setYear] = useState('');
+
+    const validateDate = () => {
+      if (!day || !month || !year) return { status: 'initial' as const, message: '' };
+
+      const dayNum = parseInt(day, 10);
+      const monthNum = parseInt(month, 10);
+      const yearNum = parseInt(year, 10);
+
+      // Basic validation
+      if (dayNum < 1 || dayNum > 31) {
+        return { status: 'invalid' as const, message: 'Day must be between 1 and 31' };
+      }
+      if (monthNum < 1 || monthNum > 12) {
+        return { status: 'invalid' as const, message: 'Month must be between 1 and 12' };
+      }
+      if (yearNum < 1900 || yearNum > new Date().getFullYear()) {
+        return {
+          status: 'invalid' as const,
+          message: `Year must be between 1900 and ${new Date().getFullYear()}`,
+        };
+      }
+
+      // Check valid date
+      const date = new Date(yearNum, monthNum - 1, dayNum);
+      if (
+        date.getDate() !== dayNum ||
+        date.getMonth() !== monthNum - 1 ||
+        date.getFullYear() !== yearNum
+      ) {
+        return { status: 'invalid' as const, message: 'Please enter a valid date' };
+      }
+
+      return { status: 'valid' as const, message: 'Valid date' };
+    };
+
+    const validation = validateDate();
+
+    return (
+      <DateInput
+        label="Date of birth"
+        helperText="Enter a valid date between 1900 and today"
+        dayValue={day}
+        monthValue={month}
+        yearValue={year}
+        onDayChange={setDay}
+        onMonthChange={setMonth}
+        onYearChange={setYear}
+        validationStatus={validation.status}
+        validText={validation.status === 'valid' ? validation.message : undefined}
+        invalidText={validation.status === 'invalid' ? validation.message : undefined}
+        required
+      />
+    );
+  },
+};
+
+export const FlexibleSegments: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <DateInput label="Full date" helperText="DD/MM/YYYY" />
+      <DateInput label="Month and year" helperText="MM/YYYY" hideDay required />
+      <DateInput label="Year only" helperText="YYYY" hideDay hideMonth required />
+    </View>
+  ),
+};
+
+export const GroupingInputs: Story = {
+  render: () => (
+    <Flex space="sm">
+      <Heading size="lg">Event Registration</Heading>
+      <Card variant="subtle" gap="250">
+        <DateInput label="Date of birth" helperText="Enter your date of birth" required />
+        <DateInput
+          label="Event date preference"
+          helperText="Select your preferred date"
+          required={false}
+        />
+      </Card>
+    </Flex>
+  ),
+};
+
+export const WithState: Story = {
+  render: () => {
+    const [day, setDay] = useState('');
+    const [month, setMonth] = useState('');
+    const [year, setYear] = useState('');
+
+    const handleReset = () => {
+      setDay('');
+      setMonth('');
+      setYear('');
+    };
+
+    const handleSetToday = () => {
+      const today = new Date();
+      setDay(String(today.getDate()).padStart(2, '0'));
+      setMonth(String(today.getMonth() + 1).padStart(2, '0'));
+      setYear(String(today.getFullYear()));
+    };
+
+    return (
+      <Flex space="md">
+        <DateInput
+          label="Date"
+          helperText="Select or enter a date"
+          dayValue={day}
+          monthValue={month}
+          yearValue={year}
+          onDayChange={setDay}
+          onMonthChange={setMonth}
+          onYearChange={setYear}
+        />
+        <Flex space="xs">
+          <Button onPress={handleSetToday}>Set to Today</Button>
+          <Button onPress={handleReset} variant="solid">
+            Reset
+          </Button>
+        </Flex>
+      </Flex>
+    );
+  },
+};