@utilitywarehouse/hearth-react-native 0.10.0 → 0.11.0

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/index.ts

@@ -1,6 +1,7 @@
 // Custom
 export * from './Accordion';
 export * from './Alert';
+export * from './Avatar';
 export * from './Badge';
 export * from './Banner';
 export * from './BodyText';
@@ -13,6 +14,7 @@ export * from './Center';
 export * from './Checkbox';
 export * from './Container';
 export * from './CurrencyInput';
+export * from './DateInput';
 export * from './DatePicker';
 export * from './DatePickerInput';
 export * from './DescriptionList';

package/src/utils/getInitials.ts

@@ -0,0 +1,7 @@
+export function getInitials(name?: string) {
+  if (!name) return undefined;
+  const regex = new RegExp(/(\p{L}{1})\p{L}+/gu);
+  const names = [...name.matchAll(regex)];
+  const initials = (names.shift()?.[1] || '') + (names.pop()?.[1] || '');
+  return initials.toUpperCase();
+}

package/src/utils/index.ts

@@ -3,6 +3,7 @@ export { default as formatThousands } from './formatThousands';
 export { default as getFlattenedColorValue } from './getFlattenedColorValue';
 export { default as getStyleValue } from './getStyleValue';
 export { default as hexWithOpacity } from './hexWithOpacity';
+export { getInitials } from './getInitials';
 export { default as isEqual } from './isEqual';
 export * from './styleUtils';
 export * from './themeValueHelpers';