@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/src/components/Textarea/TextareaField.tsx

@@ -1,45 +0,0 @@
-import { TextInput, TextInputProps } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { useTheme } from '../../hooks';
-import { useTextareaContext } from './Textarea.context';
-
-const TextareaField = ({ style, ...props }: TextInputProps) => {
-  const { disabled } = useTextareaContext();
-  const { color } = useTheme();
-
-  return (
-    <TextInput
-      placeholderTextColor={color.text.secondary}
-      selectionColor={color.purple[700]}
-      cursorColor={color.purple[700]}
-      verticalAlign="top"
-      aria-disabled={disabled}
-      {...props}
-      style={[styles.input, style]}
-    />
-  );
-};
-
-TextareaField.displayName = 'TextareaField';
-
-const styles = StyleSheet.create(theme => ({
-  input: {
-    flex: 1,
-    alignSelf: 'stretch',
-    width: 'auto',
-    justifyContent: 'flex-start',
-    textAlignVertical: 'top',
-    alignItems: 'flex-start',
-    color: theme.color.text.primary,
-    fontSize: theme.typography.mobile.bodyText.md.fontSize,
-    fontFamily: theme.typography.mobile.bodyText.fontFamily,
-    fontWeight: `${theme.typography.mobile.bodyText.fontWeight}`,
-    borderWidth: 0,
-    outlineWidth: 0,
-    _web: {
-      width: '100%',
-    },
-  },
-}));
-
-export default TextareaField;

package/src/components/Textarea/TextareaRoot.tsx

@@ -1,83 +0,0 @@
-import { useMemo } from 'react';
-import { View } from 'react-native';
-import Animated from 'react-native-reanimated';
-import { StyleSheet } from 'react-native-unistyles';
-import { TextareaContext } from './Textarea.context';
-import InputProps from './Textarea.props';
-
-const AnimatedView = Animated.createAnimatedComponent(View);
-
-const TextareaRoot = ({
-  children,
-  style,
-  states,
-  validationStatus,
-  ...props
-}: InputProps & { states?: { focus?: boolean; disabled?: boolean; readonly?: boolean } }) => {
-  const { focus = false, disabled = false, readonly = false } = states || {};
-  styles.useVariants({ validationStatus, focus, disabled, readonly });
-
-  const value = useMemo(
-    () => ({ focused: focus, disabled, readonly, validationStatus }),
-    [focus, disabled, readonly, validationStatus]
-  );
-
-  return (
-    <TextareaContext.Provider value={value}>
-      <AnimatedView {...props} style={[styles.container, style]}>
-        {children}
-      </AnimatedView>
-    </TextareaContext.Provider>
-  );
-};
-
-TextareaRoot.displayName = 'TextareaRoot';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    borderColor: theme.color.border.strong,
-    height: theme.components.input.textArea.height,
-    borderRadius: theme.components.input.borderRadius,
-    position: 'relative',
-    flexDirection: 'row',
-    overflow: 'hidden',
-    alignContent: 'center',
-    paddingHorizontal: theme.components.input.paddingHorizontal,
-    paddingVertical: theme.components.input.paddingVertical,
-    backgroundColor: theme.color.surface.neutral.strong,
-    gap: theme.components.input.gap,
-    outlineStyle: 'solid',
-    outlineWidth: theme.components.input.borderWidth,
-    outlineColor: theme.color.border.strong,
-    variants: {
-      focus: {
-        true: {
-          outlineWidth: theme.components.input.borderWidthFocused,
-        },
-      },
-      validationStatus: {
-        invalid: {
-          borderColor: theme.color.feedback.danger.border,
-          outlineColor: theme.color.feedback.danger.border,
-        },
-        valid: {
-          borderColor: theme.color.feedback.positive.border,
-          outlineColor: theme.color.feedback.positive.border,
-        },
-        initial: {},
-      },
-      disabled: {
-        true: {
-          opacity: theme.opacity.disabled,
-        },
-      },
-      readonly: {
-        true: {
-          borderColor: theme.color.border.subtle,
-        },
-      },
-    },
-  },
-}));
-
-export default TextareaRoot;

package/src/components/Textarea/index.ts

@@ -1 +0,0 @@
-export { default as Textarea, TextareaField } from './Textarea';

package/src/components/ThemedImage/ThemedImage.props.ts

@@ -1,15 +0,0 @@
-import type { ComponentType, ReactElement } from 'react';
-import type { ImageProps, ImageSourcePropType } from 'react-native';
-
-interface ThemedImageProps extends Omit<ImageProps, 'source'> {
-  /**
-   * Image source or component to display in light mode
-   */
-  light: ImageSourcePropType | ReactElement | ComponentType<any>;
-  /**
-   * Image source or component to display in dark mode
-   */
-  dark: ImageSourcePropType | ReactElement | ComponentType<any>;
-}
-
-export default ThemedImageProps;

package/src/components/ThemedImage/ThemedImage.stories.tsx

@@ -1,175 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-native';
-import MascotEnergyDark from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-dark.svg';
-import MascotEnergyLight from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-light.svg';
-import SceneBroadbandDark from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-dark.svg';
-import SceneBroadbandLight from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-light.svg';
-import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
-import SpotBillingLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-light.svg';
-import { SvgProps } from 'react-native-svg';
-import pig from '../../../docs/assets/pigs.png';
-import { Box } from '../Box';
-import { ThemedImage } from './';
-
-const meta: Meta<typeof ThemedImage> = {
-  title: 'Stories / ThemedImage',
-  component: ThemedImage,
-  argTypes: {},
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'ThemedImage component that automatically switches between light and dark mode images or SVG components based on the current theme.',
-      },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ThemedImage>;
-
-export const Playground: Story = {
-  args: {},
-  render: () => (
-    <Box gap="200">
-      <ThemedImage
-        // @ts-expect-error - This is a playground
-        light={<SpotBillingLight width={200} height={200} />}
-        // @ts-expect-error - This is a playground
-        dark={<SpotBillingDark width={200} height={200} />}
-      />
-    </Box>
-  ),
-};
-
-export const WithSpotIllustrations: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => (
-    <Box flexDirection="row" flexWrap="wrap" gap="200">
-      <ThemedImage
-        // @ts-expect-error - Ignore TS2322 for Storybook stories
-        light={<SpotBillingLight width={120} height={120} />}
-        // @ts-expect-error - Ignore TS2322 for Storybook stories
-        dark={<SpotBillingDark width={120} height={120} />}
-      />
-    </Box>
-  ),
-};
-
-export const WithMascots: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => (
-    <Box flexDirection="row" flexWrap="wrap" gap="200" alignItems="center">
-      <ThemedImage
-        light={MascotEnergyLight as unknown as React.FC<SvgProps>}
-        dark={MascotEnergyDark as unknown as React.FC<SvgProps>}
-        width={120}
-        height={120}
-      />
-    </Box>
-  ),
-};
-
-export const WithSceneIllustrations: Story = {
-  parameters: {
-    controls: { include: [] },
-  },
-  render: () => (
-    <Box gap="200">
-      <ThemedImage
-        //  @ts-expect-error - Ignore TS2322 for Storybook stories
-        light={<SceneBroadbandLight width={300} height={200} />}
-        //  @ts-expect-error - Ignore TS2322 for Storybook stories
-        dark={<SceneBroadbandDark width={300} height={200} />}
-      />
-    </Box>
-  ),
-};
-
-export const WithRegularImages: Story = {
-  parameters: {
-    controls: { include: [] },
-    docs: {
-      description: {
-        story:
-          'ThemedImage also works with regular image sources (using `require` or `uri`), not just SVG components.',
-      },
-    },
-  },
-  render: () => (
-    <Box gap="200">
-      <ThemedImage
-        light={{
-          uri: pig,
-        }}
-        dark={{
-          uri: pig,
-        }}
-        width={200}
-        height={200}
-        style={{ width: 200, height: 200, borderRadius: 8 }}
-      />
-    </Box>
-  ),
-};
-
-export const WithCustomSize: Story = {
-  parameters: {
-    controls: { include: [] },
-    docs: {
-      description: {
-        story: 'When using SVG components, control their size with width and height props.',
-      },
-    },
-  },
-  render: () => (
-    <Box flexDirection="row" flexWrap="wrap" gap="200" alignItems="center">
-      <ThemedImage
-        // @ts-expect-error - Ignore TS2322 for Storybook stories
-        light={<SpotBillingLight width={80} height={80} />}
-        // @ts-expect-error - Ignore TS2322 for Storybook stories
-        dark={<SpotBillingDark width={80} height={80} />}
-      />
-      <ThemedImage
-        // @ts-expect-error - Ignore TS2322 for Storybook stories
-        light={<SpotBillingLight width={120} height={120} />}
-        // @ts-expect-error - Ignore TS2322 for Storybook stories
-        dark={<SpotBillingDark width={120} height={120} />}
-      />
-      <ThemedImage
-        // @ts-expect-error - Ignore TS2322 for Storybook stories
-        light={<SpotBillingLight width={160} height={160} />}
-        // @ts-expect-error - Ignore TS2322 for Storybook stories
-        dark={<SpotBillingDark width={160} height={160} />}
-      />
-    </Box>
-  ),
-};
-
-export const WithAccessibility: Story = {
-  parameters: {
-    controls: { include: [] },
-    docs: {
-      description: {
-        story:
-          'ThemedImage supports all standard Image accessibility props like `accessibilityLabel` and `accessible`.',
-      },
-    },
-  },
-  render: () => (
-    <Box gap="200">
-      <ThemedImage
-        // @ts-expect-error - This is a playground
-        light={<MascotEnergyLight width={150} height={150} />}
-        // @ts-expect-error - This is a playground
-        dark={<MascotEnergyDark width={150} height={150} />}
-        accessible={true}
-        accessibilityLabel="Energy service mascot illustration"
-      />
-    </Box>
-  ),
-};

package/src/components/ThemedImage/ThemedImage.tsx

@@ -1,34 +0,0 @@
-import { isValidElement } from 'react';
-import { Image } from 'react-native';
-import useColorMode from '../../hooks/useColorMode';
-import type ThemedImageProps from './ThemedImage.props';
-
-/**
- * ThemedImage component that displays different images or components based on the current theme
- * @param light - Image source or SVG component to display in light mode
- * @param dark - Image source or SVG component to display in dark mode
- * @param ...rest - All other Image props including width/height for SVG components
- */
-const ThemedImage = ({ light, dark, ...props }: ThemedImageProps) => {
-  const [colorMode] = useColorMode();
-
-  const source = colorMode === 'light' ? light : dark;
-
-  // If the source is a React element (like an SVG component), render it directly
-  if (isValidElement(source)) {
-    return source;
-  }
-
-  // If the source is a component type (function/class), instantiate it with props
-  if (typeof source === 'function') {
-    const Source = source as React.ComponentType<any>;
-    return <Source {...props} />;
-  }
-
-  // Otherwise, render as a regular Image with the source
-  return <Image source={source} {...props} />;
-};
-
-ThemedImage.displayName = 'ThemedImage';
-
-export default ThemedImage;

package/src/components/ThemedImage/index.tsx

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

package/src/components/TimePicker/TimePicker.figma.tsx

@@ -1,29 +0,0 @@
-import figma from '@figma/code-connect';
-import { useRef, useState } from 'react';
-import { BottomSheetModalProvider, Button, DateType, TimePicker } from '../';
-
-figma.connect(
-  TimePicker,
-  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10334-16770&t=Jg2fPJPQNzOyspmQ-4',
-  {
-    props: {},
-    example: props => {
-      const pickerRef = useRef(null);
-      const [time, setTime] = useState<DateType>();
-
-      return (
-        <BottomSheetModalProvider>
-          <Button onPress={() => pickerRef.current?.present()}>Choose time</Button>
-
-          <TimePicker
-            ref={pickerRef}
-            date={time}
-            onChange={({ date }) => setTime(date)}
-            onCancel={() => setTime(undefined)}
-            use12Hours={false}
-          />
-        </BottomSheetModalProvider>
-      );
-    },
-  }
-);

package/src/components/TimePicker/TimePicker.props.ts

@@ -1,45 +0,0 @@
-import type { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
-import type { Ref } from 'react';
-import type { ViewStyle } from 'react-native';
-import type { DateType, PickerOption } from '../DatePicker/DatePicker.props';
-
-export interface TimePickerProps {
-  /**
-   * IANA time zone identifier applied when normalising and comparing times.
-   */
-  timeZone?: string;
-  /**
-   * Controlled time value.
-   */
-  date?: DateType;
-  /**
-   * Fired whenever a time is picked.
-   */
-  onChange?: (params: { date: DateType }) => void;
-  /**
-   * Display a 12-hour clock with AM/PM selector.
-   */
-  use12Hours?: boolean;
-  /**
-   * Step interval for minutes shown in the picker.
-   */
-  minuteInterval?: number;
-  /**
-   * Hide the footer actions.
-   */
-  hideFooter?: boolean;
-  /**
-   * Custom container styling for the time picker surface.
-   */
-  style?: ViewStyle;
-  /**
-   * Gives imperative access to the bottom sheet instance.
-   */
-  ref?: Ref<BottomSheetModalMethods<any>>;
-  /**
-   * Fired when the cancel action is triggered.
-   */
-  onCancel?: () => void;
-}
-
-export type { DateType, PickerOption };

package/src/components/TimePicker/TimePicker.stories.tsx

@@ -1,85 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-native';
-import { useRef, useState } from 'react';
-import { Platform, View } from 'react-native';
-import { DateType, TimePicker } from '.';
-import { ViewWrap } from '../../../docs/components';
-import { BottomSheetModal } from '../BottomSheet';
-import { Button } from '../Button';
-
-const meta = {
-  title: 'Stories / TimePicker',
-  component: TimePicker,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    use12Hours: {
-      control: 'boolean',
-      description: 'Display a 12-hour clock with AM/PM selector',
-      defaultValue: false,
-    },
-    minuteInterval: {
-      control: 'number',
-      description: 'Step interval for minutes shown in the picker',
-      defaultValue: 1,
-    },
-  },
-  args: {
-    use12Hours: false,
-    minuteInterval: 1,
-  },
-} satisfies Meta<typeof TimePicker>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-type StoryArgs = Story['args'];
-
-export const Playground: Story = {
-  render: (args: StoryArgs) => {
-    const [selected, setSelected] = useState<DateType>();
-    const modalRef = useRef<BottomSheetModal>(null);
-
-    return (
-      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
-        <ViewWrap>
-          <Button onPress={() => modalRef.current?.present()}>Show Time Picker</Button>
-          <TimePicker
-            ref={modalRef}
-            date={selected}
-            use12Hours={args.use12Hours}
-            minuteInterval={args.minuteInterval}
-            onChange={({ date }) => setSelected(date)}
-            onCancel={() => setSelected(undefined)}
-          />
-        </ViewWrap>
-      </View>
-    );
-  },
-};
-
-export const TwelveHour: Story = {
-  args: {
-    use12Hours: true,
-  },
-  render: (args: StoryArgs) => {
-    const [selected, setSelected] = useState<DateType>();
-    const modalRef = useRef<BottomSheetModal>(null);
-
-    return (
-      <View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
-        <ViewWrap>
-          <Button onPress={() => modalRef.current?.present()}>Show 12-hour Time Picker</Button>
-          <TimePicker
-            ref={modalRef}
-            date={selected}
-            use12Hours={args.use12Hours}
-            minuteInterval={args.minuteInterval}
-            onChange={({ date }) => setSelected(date)}
-            onCancel={() => setSelected(undefined)}
-          />
-        </ViewWrap>
-      </View>
-    );
-  },
-};

package/src/components/TimePicker/TimePicker.tsx

@@ -1,150 +0,0 @@
-import dayjs from 'dayjs';
-import timezone from 'dayjs/plugin/timezone';
-import utc from 'dayjs/plugin/utc';
-import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { AccessibilityInfo, findNodeHandle, Platform, View as RNView } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BottomSheetModal, BottomSheetView } from '../BottomSheet';
-import { Button } from '../Button';
-import type { DateType, TimePickerProps } from './TimePicker.props';
-import TimePickerView from './TimePickerView';
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-type FooterProps = {
-  onCancel: () => void;
-  onConfirm: () => void;
-};
-
-const Footer = ({ onCancel, onConfirm }: FooterProps) => {
-  return (
-    <RNView style={styles.footer} testID="footer">
-      <Button variant="ghost" colorScheme="functional" onPress={onCancel}>
-        Cancel
-      </Button>
-      <Button variant="ghost" colorScheme="functional" onPress={onConfirm}>
-        Ok
-      </Button>
-    </RNView>
-  );
-};
-
-const TimePicker = ({
-  timeZone,
-  date,
-  onChange,
-  use12Hours,
-  minuteInterval,
-  hideFooter,
-  style,
-  ref,
-  onCancel = () => {},
-}: TimePickerProps) => {
-  dayjs.tz.setDefault(timeZone);
-  dayjs.locale('en');
-
-  const modalRef = useRef<BottomSheetModal>(null);
-  const pickerViewRef = useRef<RNView>(null);
-
-  useImperativeHandle(ref, () => modalRef.current as BottomSheetModal);
-
-  const [currentDate, setCurrentDate] = useState<DateType>(() => {
-    return date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
-  });
-
-  useEffect(() => {
-    const nextDate = date ? dayjs.tz(date, timeZone) : dayjs().tz(timeZone);
-    const isSameMinute = dayjs(currentDate).isSame(nextDate, 'minute');
-
-    if (!isSameMinute) {
-      setCurrentDate(nextDate);
-    }
-  }, [currentDate, date, timeZone]);
-
-  const closeTimePicker = useCallback(() => {
-    modalRef.current?.close();
-  }, []);
-
-  const handleSelectDate = useCallback(
-    (selectedDate: DateType) => {
-      const newDate = dayjs.tz(selectedDate ?? currentDate, timeZone);
-      if (!dayjs(currentDate).isSame(newDate, 'minute')) {
-        setCurrentDate(newDate);
-      }
-      onChange?.({ date: newDate ? dayjs(newDate).toDate() : newDate });
-    },
-    [currentDate, onChange, timeZone]
-  );
-
-  const handleCancel = useCallback(() => {
-    onCancel?.();
-    closeTimePicker();
-  }, [closeTimePicker, onCancel]);
-
-  const handleConfirm = useCallback(() => {
-    closeTimePicker();
-  }, [closeTimePicker]);
-
-  const handleChange = useCallback((index: number) => {
-    if (index > -1) {
-      setTimeout(() => {
-        AccessibilityInfo.announceForAccessibility('Time picker opened.');
-
-        const targetRef = pickerViewRef.current;
-        if (targetRef) {
-          const nodeHandle = findNodeHandle(targetRef);
-          if (nodeHandle) {
-            AccessibilityInfo.setAccessibilityFocus(nodeHandle);
-          }
-        }
-      }, 50);
-    }
-  }, []);
-
-  const contentStyle = useMemo(() => [styles.container, style], [style]);
-
-  return (
-    <BottomSheetModal
-      ref={modalRef}
-      onChange={handleChange}
-      accessible={false}
-      enableContentPanningGesture={false}
-    >
-      <BottomSheetView>
-        <RNView
-          ref={pickerViewRef}
-          accessible={Platform.OS === 'android' ? true : undefined}
-          accessibilityLabel={Platform.OS === 'android' ? 'Time picker' : undefined}
-          importantForAccessibility={Platform.OS === 'android' ? 'yes' : 'auto'}
-          style={contentStyle}
-        >
-          <TimePickerView
-            currentDate={currentDate}
-            onSelectDate={handleSelectDate}
-            timeZone={timeZone}
-            use12Hours={use12Hours}
-            minuteInterval={minuteInterval}
-          />
-          {!hideFooter ? <Footer onCancel={handleCancel} onConfirm={handleConfirm} /> : null}
-        </RNView>
-      </BottomSheetView>
-    </BottomSheetModal>
-  );
-};
-
-TimePicker.displayName = 'TimePicker';
-
-const styles = StyleSheet.create(theme => ({
-  container: {
-    backgroundColor: theme.color.background.secondary,
-    gap: theme.components.datePicker.calendar.gap,
-  },
-  footer: {
-    flexDirection: 'row',
-    gap: theme.components.datePicker.calendar.footer.gap,
-    justifyContent: 'flex-end',
-  },
-}));
-
-export default TimePicker;