@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/TimePickerInput/TimePickerInput.stories.tsx

@@ -1,175 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-native';
-import { useState } from 'react';
-import { Platform } from 'react-native';
-import { TimePickerInput, 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 / TimePickerInput',
-  component: TimePickerInput,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    format: {
-      control: 'text',
-      description: 'Day.js format string used to render and parse the value',
-      defaultValue: 'HH:mm',
-    },
-    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 time trigger button',
-      defaultValue: 'Open time picker',
-    },
-    autoCloseOnSelect: {
-      control: 'boolean',
-      description: 'Automatically close the picker after selecting a time',
-      defaultValue: false,
-    },
-  },
-  args: {
-    format: 'HH:mm',
-    validationStatus: 'initial',
-    disabled: false,
-    readonly: false,
-    focused: false,
-    openButtonLabel: 'Open time picker',
-    autoCloseOnSelect: false,
-    placeholder: undefined,
-  },
-} satisfies Meta<typeof TimePickerInput>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: (args: typeof meta.args) => {
-    const [selected, setSelected] = useState<DateType>();
-
-    const picker = (
-      <TimePickerInput
-        {...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 States: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => {
-    const [withValue, setWithValue] = useState<DateType>(new Date());
-    const [clearableTime, setClearableTime] = useState<DateType>(new Date());
-    const [formFieldTime, setFormFieldTime] = useState<DateType>();
-
-    return (
-      <Flex direction="column" spacing="lg">
-        <VariantTitle title="Default">
-          <TimePickerInput />
-        </VariantTitle>
-        <VariantTitle title="With value">
-          <TimePickerInput
-            value={withValue}
-            onChange={({ date }) => setWithValue(date ?? undefined)}
-            onClear={() => setWithValue(undefined)}
-          />
-        </VariantTitle>
-        <VariantTitle title="Disabled">
-          <TimePickerInput disabled />
-        </VariantTitle>
-        <VariantTitle title="Readonly">
-          <TimePickerInput readonly value={withValue} />
-        </VariantTitle>
-        <VariantTitle title="Invalid">
-          <TimePickerInput validationStatus="invalid" />
-        </VariantTitle>
-        <VariantTitle title="Valid">
-          <TimePickerInput validationStatus="valid" />
-        </VariantTitle>
-        <VariantTitle title="With clear action">
-          <TimePickerInput
-            value={clearableTime}
-            onChange={({ date }) => setClearableTime(date ?? undefined)}
-            onClear={() => setClearableTime(undefined)}
-          />
-        </VariantTitle>
-        <VariantTitle title="Inside FormField">
-          <FormField label="Meeting time" helperText="Pick a time">
-            <TimePickerInput
-              value={formFieldTime}
-              onChange={({ date }) => setFormFieldTime(date ?? undefined)}
-              onClear={() => setFormFieldTime(undefined)}
-            />
-          </FormField>
-        </VariantTitle>
-      </Flex>
-    );
-  },
-};
-
-export const MinuteIntervals: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => {
-    const [intervalTime, setIntervalTime] = useState<DateType>();
-
-    const picker = (
-      <TimePickerInput
-        value={intervalTime}
-        onChange={({ date }) => setIntervalTime(date ?? undefined)}
-        onClear={() => setIntervalTime(undefined)}
-        timePickerProps={{ minuteInterval: 5 }}
-      />
-    );
-
-    if (Platform.OS !== 'web') {
-      return picker;
-    }
-
-    return (
-      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
-        <ViewWrap>{picker}</ViewWrap>
-      </View>
-    );
-  },
-};

package/src/components/TimePickerInput/TimePickerInput.tsx

@@ -1,283 +0,0 @@
-import type { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
-import { CloseSmallIcon, TimeSmallIcon } 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 type { DateType } from '../DatePicker/DatePicker.props';
-import { useFormFieldContext } from '../FormField';
-import { Input, InputField, InputSlot } from '../Input';
-import { TimePicker } from '../TimePicker';
-import { UnstyledIconButton } from '../UnstyledIconButton';
-import type TimePickerInputProps from './TimePickerInput.props';
-import TimePickerInputDoneButton from './TimePickerInputDoneButton';
-
-dayjs.extend(customParseFormat);
-
-const DEFAULT_FORMAT_24 = 'HH:mm';
-const DEFAULT_FORMAT_12 = 'hh:mm A';
-
-const maskDefaultFormat = (value: string) => {
-  const digitsOnly = value.replace(/\D/g, '').slice(0, 4);
-  const hours = digitsOnly.slice(0, 2);
-  const minutes = digitsOnly.slice(2, 4);
-
-  return [hours, minutes].filter(Boolean).join(':');
-};
-
-const TimePickerInput = ({
-  validationStatus = 'initial',
-  disabled,
-  focused,
-  readonly,
-  placeholder = '--:--',
-  inBottomSheet = false,
-  format,
-  openButtonLabel = 'Open time picker',
-  autoCloseOnSelect = true,
-  label,
-  labelVariant,
-  helperText,
-  helperIcon,
-  validText,
-  invalidText,
-  required = true,
-  onChange,
-  onChangeText,
-  onBlur,
-  onFocus,
-  value,
-  timePickerProps,
-  onClear,
-  ...rest
-}: TimePickerInputProps) => {
-  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 `timepicker-input-${Math.random().toString(36).slice(2)}`;
-  }, []);
-
-  const use12Hours = timePickerProps?.use12Hours ?? false;
-  const resolvedFormat = useMemo(
-    () => format ?? (use12Hours ? DEFAULT_FORMAT_12 : DEFAULT_FORMAT_24),
-    [format, use12Hours]
-  );
-
-  const formatTime = useCallback(
-    (dateValue?: DateType) => {
-      if (!dateValue) return '';
-      const parsed = dayjs(dateValue);
-      return parsed.isValid() ? parsed.format(resolvedFormat) : '';
-    },
-    [resolvedFormat]
-  );
-
-  const isDefaultFormat = resolvedFormat === DEFAULT_FORMAT_24;
-
-  const [inputValue, setInputValue] = useState(() => formatTime(value));
-
-  useEffect(() => {
-    setInputValue(formatTime(value));
-  }, [value, formatTime]);
-
-  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, resolvedFormat, true);
-
-      if (parsed.isValid()) {
-        onChange?.({ date: parsed.toDate() });
-      } else {
-        onChange?.({ date: undefined });
-      }
-    },
-    [isDefaultFormat, onChange, onChangeText, resolvedFormat]
-  );
-
-  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, resolvedFormat, true);
-    return parsed.isValid() ? parsed.toDate() : undefined;
-  }, [value, inputValue, resolvedFormat]);
-
-  const handlePickerChange = useCallback(
-    ({ date }: { date: DateType }) => {
-      if (!date) {
-        handleClear();
-        return;
-      }
-
-      const formatted = formatTime(date);
-      setInputValue(formatted);
-      onChange?.({ date });
-
-      if (autoCloseOnSelect) {
-        pickerRef.current?.close?.();
-      }
-    },
-    [autoCloseOnSelect, formatTime, handleClear, onChange]
-  );
-
-  const handleBlur = useCallback(
-    (event: TextInputFocusEvent) => {
-      onBlur?.(event);
-    },
-    [onBlur]
-  );
-
-  const handleFocus = useCallback(
-    (event: TextInputFocusEvent) => {
-      onFocus?.(event);
-    },
-    [onFocus]
-  );
-
-  const { onCancel: pickerOnCancel, ...restTimePickerProps } = timePickerProps ?? {};
-  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 time in ${resolvedFormat} format`;
-  const resolvedAccessibilityLabel = accessibilityLabelProp ?? 'Time input';
-  const resolvedAccessible = accessibleProp ?? true;
-  const resolvedImportantForAccessibility = importantForAccessibilityProp ?? 'yes';
-
-  const handleCancel = useCallback(() => {
-    pickerOnCancel?.();
-    pickerRef.current?.close?.();
-  }, [pickerOnCancel]);
-
-  const placeholderValue = placeholder;
-
-  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="Time 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 time"
-              accessibilityHint="Removes the current time"
-              icon={CloseSmallIcon}
-              onPress={handleClear}
-            />
-          </InputSlot>
-        )}
-        <InputSlot accessibilityElementsHidden={false}>
-          <UnstyledIconButton
-            accessibilityLabel={openButtonLabel}
-            accessibilityHint="Opens the time picker"
-            icon={TimeSmallIcon}
-            onPress={openPicker}
-            disabled={isDisabled || isReadonly}
-          />
-        </InputSlot>
-      </Input>
-      <TimePicker
-        ref={pickerRef}
-        date={selectedDate}
-        onChange={handlePickerChange}
-        onCancel={handleCancel}
-        {...restTimePickerProps}
-      />
-      {Platform.OS === 'ios' && accessoryViewID && (
-        <TimePickerInputDoneButton
-          accessoryViewID={accessoryViewID}
-          closeKeyboard={closeKeyboard}
-        />
-      )}
-    </>
-  );
-};
-
-TimePickerInput.displayName = 'TimePickerInput';
-
-const styles = StyleSheet.create(theme => ({
-  wrap: {
-    gap: theme.components.input.date.gap,
-  },
-  input: {
-    paddingLeft: 0,
-    paddingRight: 0,
-  },
-}));
-
-export default TimePickerInput;

package/src/components/TimePickerInput/TimePickerInputDoneButton.tsx

@@ -1,42 +0,0 @@
-import { InputAccessoryView, View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { Button } from '../Button';
-
-const TimePickerInputDoneButton = ({
-  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,
-  },
-}));
-
-TimePickerInputDoneButton.DisplayName = 'TimePickerInputDoneButton';
-
-export default TimePickerInputDoneButton;

package/src/components/TimePickerInput/TimePickerInputDoneButton.web.tsx

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

package/src/components/TimePickerInput/index.ts

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

package/src/components/Timeline/Timeline.figma.tsx

@@ -1,89 +0,0 @@
-import figma from '@figma/code-connect';
-import { Timeline, TimelineItem } from '.';
-
-figma.connect(
-  Timeline,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10592-5483&t=pZwKJYFo1y1QRQD1-4',
-  {
-    props: {
-      items: figma.children('Progress'),
-    },
-    variant: {
-      Variant: 'Progress',
-    },
-    example: props => <Timeline variant="progress">{props.items}</Timeline>,
-  }
-);
-
-figma.connect(
-  Timeline,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10592-5483&t=pZwKJYFo1y1QRQD1-4',
-  {
-    props: {
-      items: figma.children('Static'),
-    },
-    variant: {
-      Variant: 'Static',
-    },
-    example: props => <Timeline variant="static">{props.items}</Timeline>,
-  }
-);
-
-figma.connect(
-  TimelineItem,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10562-2810&t=pZwKJYFo1y1QRQD1-4',
-  {
-    props: {
-      label: figma.string('Label'),
-      helperText: figma.boolean('Helper text?', { true: figma.string('Helper text') }),
-      state: figma.enum('State', {
-        Complete: 'complete',
-        Active: 'active',
-        Incomplete: 'incomplete',
-      }),
-      customContent: figma.boolean('Custom content?', {
-        true: figma.instance('Slot'),
-      }),
-    },
-    example: props => (
-      <TimelineItem
-        variant="progress"
-        position="middle"
-        label={props.label}
-        helperText={props.helperText}
-        state={props.state}
-      >
-        {props.customContent}
-      </TimelineItem>
-    ),
-  }
-);
-
-figma.connect(
-  TimelineItem,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10592-5189&t=pZwKJYFo1y1QRQD1-4',
-  {
-    props: {
-      label: figma.string('Label'),
-      helperText: figma.boolean('Helper text?', { true: figma.string('Helper text') }),
-      customContent: figma.boolean('Custom content?', {
-        true: figma.instance('Slot'),
-      }),
-      position: figma.enum('Variant', {
-        Start: 'start',
-        Middle: 'middle',
-        End: 'end',
-      }),
-    },
-    example: props => (
-      <TimelineItem
-        variant="static"
-        position={props.position}
-        label={props.label}
-        helperText={props.helperText}
-      >
-        {props.customContent}
-      </TimelineItem>
-    ),
-  }
-);

package/src/components/Timeline/Timeline.props.ts

@@ -1,51 +0,0 @@
-import { ViewProps } from 'react-native';
-
-export type TimelineVariant = 'static' | 'progress';
-export type TimelineItemState = 'complete' | 'active' | 'incomplete';
-export type TimelineItemPosition = 'single' | 'start' | 'middle' | 'end';
-
-export interface TimelineProps extends ViewProps {
-  /**
-   * Child TimelineItem components.
-   */
-  children: React.ReactNode;
-  /**
-   * Controls the indicator style used by all child timeline items.
-   * @default 'static'
-   */
-  variant?: TimelineVariant;
-}
-
-export interface TimelineItemProps extends ViewProps {
-  /**
-   * The primary label for the timeline item.
-   */
-  label: string;
-  /**
-   * Optional supporting text displayed beneath the label.
-   */
-  helperText?: string;
-  /**
-   * Visual state for progress timelines.
-   * @default 'incomplete'
-   */
-  state?: TimelineItemState;
-  /**
-   * Optional custom content rendered beneath the text content.
-   */
-  children?: React.ReactNode;
-  /**
-   * The timeline variant used when the item is rendered standalone.
-   * Items inside Timeline receive this automatically.
-   * @default 'static'
-   */
-  variant?: TimelineVariant;
-  /**
-   * The item's position in the timeline used to draw connectors.
-   * Items inside Timeline receive this automatically.
-   * @default 'single'
-   */
-  position?: TimelineItemPosition;
-}
-
-export default TimelineProps;