@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/src/components/DatePickerInput/DatePickerInput.stories.tsx

@@ -1,178 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { Platform } from 'react-native';
-import { DatePickerInput, View } from '..';
-import { VariantTitle, ViewWrap } from '../../../docs/components';
-import type { DateType } from '../DatePicker';
-import { Flex } from '../Flex';
-import { FormField } from '../FormField';
-
-const meta = {
-  title: 'Stories / DatePickerInput',
-  component: DatePickerInput,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    format: {
-      control: 'text',
-      description: 'Day.js format string used to render and parse the value',
-      defaultValue: 'DD/MM/YYYY',
-    },
-    validationStatus: {
-      control: 'select',
-      options: ['initial', 'valid', 'invalid'],
-      description: 'Manually set the validation status',
-      defaultValue: 'initial',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disable the input and trigger button',
-      defaultValue: false,
-    },
-    readonly: {
-      control: 'boolean',
-      description: 'Make the input read-only (typing disabled, picker still accessible)',
-      defaultValue: false,
-    },
-    focused: {
-      control: 'boolean',
-      description: 'Force the focused visual state',
-      defaultValue: false,
-    },
-    openButtonLabel: {
-      control: 'text',
-      description: 'Accessible label for the calendar trigger button',
-      defaultValue: 'Open date picker',
-    },
-    autoCloseOnSelect: {
-      control: 'boolean',
-      description: 'Automatically close the picker after selecting a date',
-      defaultValue: false,
-    },
-  },
-  args: {
-    format: 'DD/MM/YYYY',
-    validationStatus: 'initial',
-    disabled: false,
-    readonly: false,
-    focused: false,
-    openButtonLabel: 'Open date picker',
-    autoCloseOnSelect: false,
-    placeholder: 'DD/MM/YYYY',
-  },
-} satisfies Meta<typeof DatePickerInput>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: args => {
-    const [selected, setSelected] = useState<DateType>();
-
-    const picker = (
-      <DatePickerInput
-        {...args}
-        value={selected}
-        onChange={({ date }) => setSelected(date ?? undefined)}
-        onClear={() => setSelected(undefined)}
-      />
-    );
-
-    if (Platform.OS !== 'web') {
-      return picker;
-    }
-
-    return (
-      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
-        <ViewWrap>{picker}</ViewWrap>
-      </View>
-    );
-  },
-};
-
-export const CustomFormat: Story = {
-  parameters: {
-    controls: { include: ['format'] },
-  },
-  args: {
-    format: 'YYYY-MM-DD',
-    placeholder: 'YYYY-MM-DD',
-  },
-  render: args => {
-    const [selected, setSelected] = useState<DateType>(new Date());
-
-    const picker = (
-      <DatePickerInput
-        {...args}
-        value={selected}
-        onChange={({ date }) => setSelected(date ?? undefined)}
-        onClear={() => setSelected(undefined)}
-      />
-    );
-
-    if (Platform.OS !== 'web') {
-      return picker;
-    }
-
-    return <ViewWrap>{picker}</ViewWrap>;
-  },
-};
-
-export const States: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => {
-    const [withValue, setWithValue] = useState<DateType>(new Date());
-    const [clearableDate, setClearableDate] = useState<DateType>(new Date());
-    const [formFieldDate, setFormFieldDate] = useState<DateType>();
-
-    return (
-      <Flex direction="column" spacing="lg">
-        <VariantTitle title="Default">
-          <DatePickerInput placeholder="DD/MM/YYYY" />
-        </VariantTitle>
-        <VariantTitle title="With value">
-          <DatePickerInput
-            value={withValue}
-            onChange={({ date }) => setWithValue(date ?? undefined)}
-            onClear={() => setWithValue(undefined)}
-          />
-        </VariantTitle>
-        <VariantTitle title="Disabled">
-          <DatePickerInput disabled placeholder="DD/MM/YYYY" />
-        </VariantTitle>
-        <VariantTitle title="Readonly">
-          <DatePickerInput readonly value={withValue} />
-        </VariantTitle>
-        <VariantTitle title="Invalid">
-          <DatePickerInput validationStatus="invalid" placeholder="DD/MM/YYYY" />
-        </VariantTitle>
-        <VariantTitle title="Valid">
-          <DatePickerInput validationStatus="valid" placeholder="DD/MM/YYYY" />
-        </VariantTitle>
-        <VariantTitle title="Custom format">
-          <DatePickerInput format="MMM D, YYYY" placeholder="MMM D, YYYY" />
-        </VariantTitle>
-        <VariantTitle title="With clear action">
-          <DatePickerInput
-            value={clearableDate}
-            onChange={({ date }) => setClearableDate(date ?? undefined)}
-            onClear={() => setClearableDate(undefined)}
-          />
-        </VariantTitle>
-        <VariantTitle title="Inside FormField">
-          <FormField label="Booking date" helperText="Pick a date">
-            <DatePickerInput
-              value={formFieldDate}
-              onChange={({ date }) => setFormFieldDate(date ?? undefined)}
-              onClear={() => setFormFieldDate(undefined)}
-            />
-          </FormField>
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};

package/src/components/DatePickerInput/DatePickerInput.tsx

@@ -1,277 +0,0 @@
-import type { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
-import { CalendarSmallIcon, CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Keyboard, Platform, TextInputFocusEvent } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { DatePicker } from '../DatePicker';
-import type { DateType } from '../DatePicker/DatePicker.props';
-import { useFormFieldContext } from '../FormField';
-import { Input, InputField, InputSlot } from '../Input';
-import { UnstyledIconButton } from '../UnstyledIconButton';
-import type DatePickerInputProps from './DatePickerInput.props';
-import DatePickerInputDoneButton from './DatePickerInputDoneButton';
-
-dayjs.extend(customParseFormat);
-
-const DEFAULT_FORMAT = 'DD/MM/YYYY';
-
-const maskDefaultFormat = (value: string) => {
-  const digitsOnly = value.replace(/\D/g, '').slice(0, 8);
-  const day = digitsOnly.slice(0, 2);
-  const month = digitsOnly.slice(2, 4);
-  const year = digitsOnly.slice(4, 8);
-
-  return [day, month, year].filter(Boolean).join('/');
-};
-
-const DatePickerInput = ({
-  validationStatus = 'initial',
-  disabled,
-  focused,
-  readonly,
-  placeholder,
-  inBottomSheet = false,
-  format = DEFAULT_FORMAT,
-  openButtonLabel = 'Open date picker',
-  autoCloseOnSelect = true,
-  label,
-  labelVariant,
-  helperText,
-  helperIcon,
-  validText,
-  invalidText,
-  required = true,
-  onChange,
-  onChangeText,
-  onBlur,
-  onFocus,
-  value,
-  datePickerProps,
-  onClear,
-  ...rest
-}: DatePickerInputProps) => {
-  const formFieldContext = useFormFieldContext();
-  const isDisabled = formFieldContext?.disabled ?? disabled;
-  const isReadonly = formFieldContext?.readonly ?? readonly;
-
-  const pickerRef = useRef<BottomSheetModalMethods | null>(null);
-  const accessoryViewID = useMemo(() => {
-    if (Platform.OS !== 'ios') return undefined;
-    return `datepicker-input-${Math.random().toString(36).slice(2)}`;
-  }, []);
-
-  const formatDate = useCallback(
-    (dateValue?: DateType) => {
-      if (!dateValue) return '';
-      const parsed = dayjs(dateValue);
-      return parsed.isValid() ? parsed.format(format) : '';
-    },
-    [format]
-  );
-
-  const isDefaultFormat = format === DEFAULT_FORMAT;
-
-  const [inputValue, setInputValue] = useState(() => formatDate(value));
-
-  useEffect(() => {
-    setInputValue(formatDate(value));
-  }, [value, formatDate]);
-
-  const handleTextChange = useCallback(
-    (text: string) => {
-      const nextValue = isDefaultFormat ? maskDefaultFormat(text) : text;
-
-      setInputValue(nextValue);
-      onChangeText?.(nextValue);
-
-      if (!nextValue) {
-        onChange?.({ date: undefined });
-        return;
-      }
-
-      const parsed = dayjs(nextValue, format, true);
-
-      if (parsed.isValid()) {
-        onChange?.({ date: parsed.toDate() });
-      } else {
-        onChange?.({ date: undefined });
-      }
-    },
-    [format, isDefaultFormat, onChange, onChangeText]
-  );
-
-  const handleClear = useCallback(() => {
-    setInputValue('');
-    onChange?.({ date: undefined });
-    onClear?.();
-  }, [onChange, onClear]);
-
-  const closeKeyboard = useCallback(() => {
-    Keyboard.dismiss();
-  }, []);
-
-  const openPicker = useCallback(() => {
-    if (isDisabled || isReadonly) return;
-    closeKeyboard();
-    pickerRef.current?.present();
-  }, [closeKeyboard, isDisabled, isReadonly]);
-
-  const selectedDate = useMemo(() => {
-    if (value) {
-      return value;
-    }
-
-    const parsed = dayjs(inputValue, format, true);
-    return parsed.isValid() ? parsed.toDate() : undefined;
-  }, [value, inputValue, format]);
-
-  const handlePickerChange = useCallback(
-    ({ date }: { date: DateType }) => {
-      if (!date) {
-        handleClear();
-        return;
-      }
-
-      const formatted = formatDate(date);
-      setInputValue(formatted);
-      onChange?.({ date });
-
-      if (autoCloseOnSelect) {
-        pickerRef.current?.close?.();
-      }
-    },
-    [autoCloseOnSelect, formatDate, handleClear, onChange]
-  );
-
-  const handleBlur = useCallback(
-    (event: TextInputFocusEvent) => {
-      onBlur?.(event);
-    },
-    [onBlur]
-  );
-
-  const handleFocus = useCallback(
-    (event: TextInputFocusEvent) => {
-      onFocus?.(event);
-    },
-    [onFocus]
-  );
-
-  const { onCancel: pickerOnCancel, ...restDatePickerProps } = datePickerProps ?? {};
-  const {
-    style: inputStyle,
-    keyboardType: keyboardTypeProp,
-    inputMode: inputModeProp,
-    accessibilityHint: accessibilityHintProp,
-    accessibilityLabel: accessibilityLabelProp,
-    accessible: accessibleProp,
-    importantForAccessibility: importantForAccessibilityProp,
-    ...textInputProps
-  } = rest;
-
-  const resolvedKeyboardType = keyboardTypeProp ?? (isDefaultFormat ? 'number-pad' : undefined);
-  const resolvedInputMode = inputModeProp ?? (isDefaultFormat ? 'numeric' : undefined);
-  const resolvedAccessibilityHint = accessibilityHintProp ?? `Enter the date in ${format} format`;
-  const resolvedAccessibilityLabel = accessibilityLabelProp ?? 'Date input';
-  const resolvedAccessible = accessibleProp ?? true;
-  const resolvedImportantForAccessibility = importantForAccessibilityProp ?? 'yes';
-
-  const handleCancel = useCallback(() => {
-    pickerOnCancel?.();
-    pickerRef.current?.close?.();
-  }, [pickerOnCancel]);
-
-  const placeholderValue = placeholder ?? format;
-
-  return (
-    <>
-      <Input
-        validationStatus={validationStatus}
-        disabled={disabled}
-        readonly={readonly}
-        focused={focused}
-        label={label}
-        labelVariant={labelVariant}
-        helperText={helperText}
-        helperIcon={helperIcon}
-        validText={validText}
-        invalidText={invalidText}
-        required={required}
-        style={styles.wrap}
-        accessible={false}
-      >
-        <InputField
-          editable={!isReadonly && !isDisabled}
-          value={inputValue}
-          placeholder={placeholderValue}
-          onChangeText={handleTextChange}
-          onBlur={handleBlur}
-          onFocus={handleFocus}
-          inBottomSheet={inBottomSheet}
-          keyboardType={resolvedKeyboardType}
-          inputMode={resolvedInputMode}
-          accessibilityHint={resolvedAccessibilityHint}
-          aria-label="Date input"
-          accessibilityLabel={resolvedAccessibilityLabel}
-          accessible={resolvedAccessible}
-          accessibilityState={{
-            disabled: isDisabled || isReadonly,
-          }}
-          importantForAccessibility={resolvedImportantForAccessibility}
-          inputAccessoryViewID={Platform.OS === 'ios' ? accessoryViewID : undefined}
-          {...textInputProps}
-          style={[styles.input, inputStyle]}
-        />
-        {!!inputValue && onClear && !isReadonly && !isDisabled && (
-          <InputSlot accessibilityElementsHidden={false}>
-            <UnstyledIconButton
-              accessibilityLabel="Clear date"
-              accessibilityHint="Removes the current date"
-              icon={CloseSmallIcon}
-              onPress={handleClear}
-            />
-          </InputSlot>
-        )}
-        <InputSlot accessibilityElementsHidden={false}>
-          <UnstyledIconButton
-            accessibilityLabel={openButtonLabel}
-            accessibilityHint="Opens the date picker calendar"
-            icon={CalendarSmallIcon}
-            onPress={openPicker}
-            disabled={isDisabled || isReadonly}
-          />
-        </InputSlot>
-      </Input>
-      <DatePicker
-        ref={pickerRef}
-        mode="single"
-        date={selectedDate}
-        onChange={handlePickerChange}
-        onCancel={handleCancel}
-        {...restDatePickerProps}
-      />
-      {Platform.OS === 'ios' && accessoryViewID && (
-        <DatePickerInputDoneButton
-          accessoryViewID={accessoryViewID}
-          closeKeyboard={closeKeyboard}
-        />
-      )}
-    </>
-  );
-};
-
-DatePickerInput.displayName = 'DatePickerInput';
-
-const styles = StyleSheet.create(theme => ({
-  wrap: {
-    gap: theme.components.input.date.gap,
-  },
-  input: {
-    paddingLeft: 0,
-    paddingRight: 0,
-  },
-}));
-
-export default DatePickerInput;

package/src/components/DatePickerInput/DatePickerInputDoneButton.tsx

@@ -1,42 +0,0 @@
-import { InputAccessoryView, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { Button } from '../Button';
-
-const DatePickerInputDoneButton = ({
-  accessoryViewID,
-  closeKeyboard,
-}: {
-  accessoryViewID: string;
-  closeKeyboard: () => void;
-}) => {
-  return (
-    <InputAccessoryView nativeID={accessoryViewID}>
-      <View style={styles.accessory}>
-        <Button
-          accessibilityRole="button"
-          accessibilityLabel="Done"
-          onPress={closeKeyboard}
-          variant="ghost"
-          colorScheme="functional"
-        >
-          Done
-        </Button>
-      </View>
-    </InputAccessoryView>
-  );
-};
-
-const styles = StyleSheet.create(theme => ({
-  accessory: {
-    paddingHorizontal: 16,
-    paddingVertical: 2,
-    alignItems: 'flex-end',
-    backgroundColor: theme.color.surface.neutral.strong,
-    borderTopWidth: theme.borderWidth[1],
-    borderTopColor: theme.color.border.subtle,
-  },
-}));
-
-DatePickerInputDoneButton.DisplayName = 'DatePickerInputDoneButton';
-
-export default DatePickerInputDoneButton;

package/src/components/DatePickerInput/DatePickerInputDoneButton.web.tsx

@@ -1,7 +0,0 @@
-const DatePickerInputDoneButton = () => {
-  return null;
-};
-
-DatePickerInputDoneButton.DisplayName = 'DatePickerInputDoneButton';
-
-export default DatePickerInputDoneButton;

package/src/components/DatePickerInput/index.ts

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

package/src/components/DescriptionList/DescriptionList.context.ts

@@ -1,18 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export interface DescriptionListContextValue {
-  direction: 'row' | 'column';
-  itemHeadingWidth?: number;
-}
-
-export const DescriptionListContext = createContext<DescriptionListContextValue | undefined>(
-  undefined
-);
-
-export const useDescriptionListContext = () => {
-  const ctx = useContext(DescriptionListContext);
-  if (!ctx) {
-    throw new Error('DescriptionListItem must be used within a DescriptionList');
-  }
-  return ctx;
-};

package/src/components/DescriptionList/DescriptionList.figma.tsx

@@ -1,47 +0,0 @@
-import figma from '@figma/code-connect';
-import { DescriptionList } from '../';
-
-figma.connect(
-  DescriptionList,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7247%3A4636',
-  {
-    props: {
-      sectionHeader: figma.boolean('Section header?', {
-        true: figma.nestedProps('Section Header', {
-          heading: figma.string('Heading'),
-          helperText: figma.boolean('Helper text?', {
-            true: figma.string('Helper text'),
-          }),
-          trailingContent: figma.boolean('Trailing content?', {
-            true: figma.nestedProps('Trailing content', {
-              headerTrailingContent: figma.instance('Variant'),
-            }),
-          }),
-          invalidText: figma.enum('State', {
-            Invalid: figma.nestedProps('Validation Text', {
-              invalidText: figma.string('Text'),
-            }),
-          }),
-        }),
-      }),
-      items: figma.children('Item'),
-      direction: figma.nestedProps('Item', {
-        direction: figma.enum('Direction', {
-          Row: 'row',
-          Column: 'column',
-        }),
-      }),
-    },
-    example: props => (
-      <DescriptionList
-        heading={props.sectionHeader?.heading}
-        helperText={props.sectionHeader?.helperText}
-        direction={props.direction?.direction}
-        headerTrailingContent={props.sectionHeader?.trailingContent?.headerTrailingContent}
-        invalidText={props.sectionHeader?.invalidText?.invalidText}
-      >
-        {props.items}
-      </DescriptionList>
-    ),
-  }
-);

package/src/components/DescriptionList/DescriptionList.props.ts

@@ -1,14 +0,0 @@
-import type { ViewProps } from 'react-native';
-
-export interface DescriptionListProps extends ViewProps {
-  /** Direction orientation for items */
-  direction?: 'row' | 'column';
-  /** Override heading/term column width when layout is row (defaults to token) */
-  itemHeadingWidth?: number;
-  heading?: string;
-  helperText?: string;
-  headerTrailingContent?: React.ReactNode;
-  invalidText?: string;
-}
-
-export default DescriptionListProps;