@utilitywarehouse/hearth-react-native 0.9.0 → 0.11.0

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>
+    );
+  },
+};

package/src/components/DateInput/DateInput.tsx

@@ -0,0 +1,117 @@
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { FormField } from '../FormField';
+import type { DateInputProps } from './DateInput.props';
+import DateInputSegment from './DateInputSegment';
+
+const DateInput = ({
+  label,
+  helperText,
+  helperIcon,
+  validationStatus = 'initial',
+  validText,
+  invalidText,
+  disabled,
+  readonly,
+  required,
+  hideDay = false,
+  hideMonth = false,
+  hideYear = false,
+  dayPlaceholder = 'DD',
+  monthPlaceholder = 'MM',
+  yearPlaceholder = 'YYYY',
+  dayValue,
+  monthValue,
+  yearValue,
+  onDayChange,
+  onMonthChange,
+  onYearChange,
+  onDayFocus,
+  onMonthFocus,
+  onYearFocus,
+  onDayBlur,
+  onMonthBlur,
+  onYearBlur,
+  ...props
+}: DateInputProps) => {
+  return (
+    <FormField
+      label={label}
+      helperText={helperText}
+      helperIcon={helperIcon}
+      validationStatus={validationStatus}
+      validText={validText}
+      invalidText={invalidText}
+      disabled={disabled}
+      readonly={readonly}
+      required={required}
+      style={styles.wrap}
+      {...props}
+    >
+      <View style={styles.container}>
+        {!hideDay && (
+          <DateInputSegment
+            label="Day"
+            placeholder={dayPlaceholder}
+            value={dayValue}
+            onChange={onDayChange}
+            onFocus={onDayFocus}
+            onBlur={onDayBlur}
+            disabled={disabled}
+            required={required}
+            readonly={readonly}
+            validationStatus={validationStatus}
+            maxLength={2}
+            testID="date-input-day"
+          />
+        )}
+        {!hideMonth && (
+          <DateInputSegment
+            label="Month"
+            placeholder={monthPlaceholder}
+            value={monthValue}
+            onChange={onMonthChange}
+            onFocus={onMonthFocus}
+            onBlur={onMonthBlur}
+            disabled={disabled}
+            required={required}
+            readonly={readonly}
+            validationStatus={validationStatus}
+            maxLength={2}
+            testID="date-input-month"
+          />
+        )}
+        {!hideYear && (
+          <DateInputSegment
+            label="Year"
+            placeholder={yearPlaceholder}
+            value={yearValue}
+            onChange={onYearChange}
+            onFocus={onYearFocus}
+            onBlur={onYearBlur}
+            disabled={disabled}
+            required={required}
+            readonly={readonly}
+            validationStatus={validationStatus}
+            maxLength={4}
+            testID="date-input-year"
+          />
+        )}
+      </View>
+    </FormField>
+  );
+};
+
+DateInput.displayName = 'DateInput';
+
+const styles = StyleSheet.create(theme => ({
+  wrap: {
+    gap: theme.components.input.gap,
+  },
+  container: {
+    flexDirection: 'row',
+    gap: theme.components.input.date.gap,
+  },
+}));
+
+export default DateInput;

package/src/components/DateInput/DateInputSegment.tsx

@@ -0,0 +1,83 @@
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Input } from '../Input';
+import type { DateInputProps } from './DateInput.props';
+
+interface DateInputSegmentProps {
+  label: string;
+  placeholder?: string;
+  value?: string;
+  onChange?: (text: string) => void;
+  onFocus?: DateInputProps['onDayFocus'];
+  onBlur?: DateInputProps['onDayBlur'];
+  disabled?: boolean;
+  required?: boolean;
+  validationStatus?: DateInputProps['validationStatus'];
+  maxLength?: number;
+  readonly?: boolean;
+  testID?: string;
+}
+
+const DateInputSegment = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  onFocus,
+  onBlur,
+  disabled,
+  validationStatus,
+  maxLength,
+  readonly,
+  testID,
+}: DateInputSegmentProps) => {
+  styles.useVariants({ disabled });
+  return (
+    <View style={styles.container}>
+      <BodyText size="md" style={styles.label}>
+        {label}
+      </BodyText>
+      <Input
+        value={value}
+        onChangeText={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        placeholder={disabled ? undefined : placeholder}
+        keyboardType="number-pad"
+        maxLength={maxLength}
+        testID={testID}
+        accessibilityLabel={label}
+        disabled={disabled}
+        validationStatus={validationStatus}
+        readonly={readonly}
+        style={styles.input}
+      />
+    </View>
+  );
+};
+
+DateInputSegment.displayName = 'DateInputSegment';
+
+const styles = StyleSheet.create(theme => ({
+  container: {
+    flex: 1,
+    gap: theme.components.input.gap,
+    maxWidth: 96,
+  },
+  label: {
+    variants: {
+      disabled: {
+        true: {
+          opacity: theme.opacity.disabled,
+        },
+      },
+    },
+  },
+  input: {
+    flex: 1,
+    maxWidth: 96,
+  },
+}));
+
+export default DateInputSegment;

package/src/components/DateInput/index.ts

@@ -0,0 +1,2 @@
+export { default as DateInput } from './DateInput';
+export type { DateInputProps } from './DateInput.props';

package/src/components/PillGroup/Pill.props.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PressableProps } from 'react-native';
+
+export interface PillProps extends Omit<PressableProps, 'children'> {
+  /** Value returned when selected */
+  value: string;
+
+  /** Text label shown inside the pill */
+  label: string;
+
+  /** Left icon */
+  icon?: React.ComponentType<any>;
+}

package/src/components/PillGroup/Pill.tsx

@@ -0,0 +1,120 @@
+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 type { PillProps } from './Pill.props';
+
+const PillRoot = ({
+  value,
+  label,
+  icon,
+  states = {},
+  ...props
+}: PillProps & { states?: { active?: boolean } }) => {
+  const { active } = states;
+  const context = usePillGroupContext();
+  const isSelected = context?.value.includes(value) ?? false;
+
+  styles.useVariants({ selected: isSelected, active });
+
+  const handlePress = () => {
+    context?.onChange(value);
+  };
+
+  return (
+    <Pressable
+      {...props}
+      style={styles.pill}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isSelected }}
+      onPress={handlePress}
+    >
+      {icon && <Icon as={icon} size="sm" style={styles.icon} />}
+      <BodyText weight="semibold" style={styles.text}>
+        {label}
+      </BodyText>
+    </Pressable>
+  );
+};
+
+export const Pill = createPressable({ Root: PillRoot });
+
+Pill.displayName = 'Pill';
+
+const styles = StyleSheet.create(theme => ({
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: theme.components.pill.height,
+    minWidth: theme.components.pill.minWidth,
+    gap: theme.components.pill.gap,
+    paddingHorizontal: theme.components.pill.paddingHorizontal,
+    paddingVertical: theme.components.pill.paddingVertical,
+    borderRadius: theme.components.pill.borderRadius,
+    borderWidth: theme.components.pill.borderWidth,
+    borderColor: theme.color.interactive.neutral.border.subtle,
+    backgroundColor: 'transparent',
+    _web: {
+      _hover: {
+        backgroundColor: theme.color.interactive.neutral.surface.subtle.hover,
+      },
+      '_focus-visible': theme.helpers.focusVisible,
+    },
+    variants: {
+      active: {
+        true: {
+          backgroundColor: theme.color.interactive.neutral.surface.subtle.active,
+        },
+      },
+      selected: {
+        true: {
+          backgroundColor: theme.color.interactive.brand.surface.strong.default,
+          borderColor: theme.color.interactive.brand.surface.strong.default,
+          _web: {
+            _hover: {
+              backgroundColor: theme.color.interactive.brand.surface.strong.hover,
+              borderColor: theme.color.interactive.brand.surface.strong.hover,
+            },
+          },
+        },
+      },
+    },
+    compoundVariants: [
+      {
+        selected: true,
+        active: true,
+        styles: {
+          backgroundColor: theme.color.interactive.brand.surface.strong.active,
+          borderColor: theme.color.interactive.brand.surface.strong.active,
+        },
+      },
+    ],
+  },
+  text: {
+    variants: {
+      selected: {
+        true: {
+          color: theme.color.text.inverted,
+        },
+        false: {
+          color: theme.color.text.primary,
+        },
+      },
+    },
+  },
+  icon: {
+    variants: {
+      selected: {
+        true: {
+          color: theme.color.icon.inverted,
+        },
+        false: {
+          color: theme.color.icon.primary,
+        },
+      },
+    },
+  },
+}));

package/src/components/PillGroup/PillGroup.context.tsx

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+export interface PillGroupContextValue {
+  value: string[];
+  onChange: (value: string) => void;
+}
+
+export const PillGroupContext = createContext<PillGroupContextValue | null>(null);
+
+export const usePillGroupContext = () => {
+  return useContext(PillGroupContext);
+};