@utilitywarehouse/hearth-react-native 0.23.0 → 0.25.0

package/build/components/TimePickerInput/TimePickerInputDoneButton.web.js

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

package/build/components/TimePickerInput/index.d.ts

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

package/build/components/TimePickerInput/index.js

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

package/build/components/index.d.ts

@@ -40,6 +40,7 @@ export * from './List';
 export * from './Menu';
 export * from './Modal';
 export * from './PillGroup';
+export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
@@ -51,6 +52,8 @@ export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './TimePicker';
+export * from './TimePickerInput';
 export * from './Toast';
 export * from './ToggleButtonCard';
 export * from './VerificationInput';

package/build/components/index.js

@@ -41,6 +41,7 @@ export * from './List';
 export * from './Menu';
 export * from './Modal';
 export * from './PillGroup';
+export * from './ProgressBar';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
@@ -52,6 +53,8 @@ export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './TimePicker';
+export * from './TimePickerInput';
 export * from './Toast';
 export * from './ToggleButtonCard';
 export * from './VerificationInput';

package/docs/components/AllComponents.web.tsx

@@ -74,6 +74,7 @@ import {
   OL,
   Pill,
   PillGroup,
+  ProgressBar,
   ProgressStep,
   ProgressStepper,
   Radio,
@@ -91,6 +92,8 @@ import {
   TabsList,
   Textarea,
   ThemedImage,
+  TimePicker,
+  TimePickerInput,
   ToastItem,
   ToggleButtonCard,
   ToggleButtonCardGroup,
@@ -150,6 +153,11 @@ const AllComponents: React.FC = () => {
   const handleDatePickerOpenPress = useCallback(() => {
     datePickerRef.current?.present();
   }, []);
+  const [selectedTime, setSelectedTime] = useState<DateType>();
+  const timePickerRef = useRef<BottomSheetModal>(null);
+  const handleTimePickerOpenPress = useCallback(() => {
+    timePickerRef.current?.present();
+  }, []);
   useEffect(() => {
     if (bottomSheetRef.current) {
       setTimeout(() => {
@@ -380,6 +388,29 @@ const AllComponents: React.FC = () => {
               </BottomSheetModalProvider>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Time Picker" link="/?path=/docs/components-time-picker--docs">
+            <Center flex={1}>
+              <Button onPress={handleTimePickerOpenPress}>Open Time Picker</Button>
+              <BottomSheetModalProvider>
+                <TimePicker
+                  ref={timePickerRef}
+                  date={selectedTime}
+                  onChange={({ date }) => setSelectedTime(date)}
+                  onCancel={() => setSelectedTime(undefined)}
+                />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
+          <ComponentWrapper
+            name="Time Picker Input"
+            link="/?path=/docs/forms-time-picker-input--docs"
+          >
+            <Center flex={1} padding="200">
+              <BottomSheetModalProvider>
+                <TimePickerInput placeholder="HH:mm" />
+              </BottomSheetModalProvider>
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Description List"
             link="/?path=/docs/components-description-list--docs"
@@ -663,6 +694,11 @@ const AllComponents: React.FC = () => {
               </PillGroup>
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Progress Bar" link="/?path=/docs/components-progress-bar--docs">
+            <Center flex={1} px="300">
+              <ProgressBar value={58} label="Order progress" />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper
             name="Progress Stepper"
             link="/?path=/docs/components-progress-stepper--docs"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.23.0",
+  "version": "0.25.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -20,6 +20,7 @@
     "@gluestack-ui/spinner": "0.1.14",
     "@gluestack-ui/switch": "0.1.22",
     "@gluestack-ui/textarea": "0.1.23",
+    "@quidone/react-native-wheel-picker": "^1.6.1",
     "dayjs": "^1.11.13"
   },
   "devDependencies": {

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -1,30 +1,47 @@
-import { ReactNode } from 'react';
 import { View } from 'react-native';
 import { StyleSheet } from 'react-native-unistyles';
+import TimePickerView from '../TimePicker/TimePickerView';
 import { useDatePickerContext } from './DatePicker.context';
 import Days from './DatePickerDays';
 import Footer from './DatePickerFooter';
 import Header from './DatePickerHeader';
 import Months from './DatePickerMonths';
 import Years from './DatePickerYears';
-import type { CalendarViews } from './enums';
-import TimePicker from './TimePicker';
-
-const CalendarView: Record<CalendarViews, ReactNode> = {
-  year: <Years />,
-  month: <Months />,
-  day: <Days />,
-  time: <TimePicker />,
-};
 
 const Calendar = () => {
-  const { hideHeader, hideFooter, calendarView, containerHeight, navigationPosition } =
-    useDatePickerContext();
+  const {
+    hideHeader,
+    hideFooter,
+    calendarView,
+    containerHeight,
+    navigationPosition,
+    currentDate,
+    onSelectDate,
+    timeZone,
+    use12Hours,
+  } = useDatePickerContext();
+
+  const calendarContent =
+    calendarView === 'year' ? (
+      <Years />
+    ) : calendarView === 'month' ? (
+      <Months />
+    ) : calendarView === 'time' ? (
+      <TimePickerView
+        currentDate={currentDate}
+        onSelectDate={onSelectDate}
+        timeZone={timeZone}
+        use12Hours={use12Hours}
+        containerHeight={containerHeight}
+      />
+    ) : (
+      <Days />
+    );
 
   return (
     <View style={[styles.container]} testID="calendar">
       {!hideHeader ? <Header navigationPosition={navigationPosition} /> : null}
-      <View style={styles.containerInner(containerHeight)}>{CalendarView[calendarView]}</View>
+      <View style={styles.containerInner(containerHeight)}>{calendarContent}</View>
       {!hideFooter ? <Footer /> : null}
     </View>
   );

package/src/components/Modal/Modal.props.ts

@@ -4,16 +4,14 @@ import { BottomSheetProps } from '../BottomSheet';
 import { ButtonWithoutChildrenProps } from '../Button/Button.props';
 import { UnstyledIconButtonProps } from '../UnstyledIconButton';
 
-interface ModalProps extends Omit<BottomSheetProps, 'children'> {
+interface ModalPropsBase extends Omit<BottomSheetProps, 'children'> {
   loading?: boolean;
   image?: ReactNode;
   showCloseButton?: boolean;
   heading?: string;
   loadingHeading?: string;
   description?: string;
-  inNavModal?: boolean;
   fullscreen?: boolean;
-  stickyFooter?: boolean;
   children?: ViewProps['children'];
   onPressPrimaryButton?: () => void;
   primaryButtonText?: string;
@@ -25,7 +23,18 @@ interface ModalProps extends Omit<BottomSheetProps, 'children'> {
   primaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   secondaryButtonProps?: Omit<ButtonWithoutChildrenProps, 'children'>;
   closeButtonProps?: Omit<UnstyledIconButtonProps, 'children'>;
-  background?: 'default' | 'brand';
 }
 
+type ModalProps =
+  | (ModalPropsBase & {
+      inNavModal?: false | undefined;
+      stickyFooter?: boolean;
+      background?: never;
+    })
+  | (ModalPropsBase & {
+      inNavModal: true;
+      stickyFooter?: never;
+      background?: 'default' | 'brand';
+    });
+
 export default ModalProps;

package/src/components/Modal/Modal.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { useRef } from 'react';
 import { ImageSourcePropType, Platform, View } from 'react-native';
 import { Modal, ModalImage } from '.';

package/src/components/Modal/Modal.tsx

@@ -59,6 +59,7 @@ const Modal = ({
   const theme = useTheme();
   const backgroundOpacity = useSharedValue(0);
   const pretendContentTranslateY = useSharedValue(20);
+  const isBrandBackground = background === 'brand';
 
   const triggerCloseAnimation = useCallback(() => {
     if (Platform.OS === 'android' && inNavModal) {
@@ -171,7 +172,7 @@ const Modal = ({
     noButtons,
     stickyFooter,
     showHandle: props.showHandle,
-    background: background === 'brand' ? 'brand' : 'primary',
+    background: isBrandBackground ? 'brand' : 'primary',
   });
 
   const footer = (
@@ -180,7 +181,7 @@ const Modal = ({
         <Button
           onPress={handlePrimaryButtonPress}
           text={primaryButtonText}
-          inverted={background === 'brand' && inNavModal}
+          inverted={isBrandBackground && inNavModal}
           {...primaryButtonProps}
           variant={(primaryButtonProps?.variant as 'solid') ?? 'solid'}
           colorScheme={(primaryButtonProps?.colorScheme as 'highlight') ?? 'highlight'}
@@ -190,7 +191,7 @@ const Modal = ({
         <Button
           onPress={handleSecondaryButtonPress}
           text={secondaryButtonText}
-          inverted={background === 'brand' && inNavModal}
+          inverted={isBrandBackground && inNavModal}
           {...secondaryButtonProps}
           variant={(secondaryButtonProps?.variant as 'outline') ?? 'outline'}
           colorScheme={(secondaryButtonProps?.colorScheme as 'functional') ?? 'functional'}
@@ -209,8 +210,11 @@ const Modal = ({
           screenReaderFocusable
           ref={viewRef}
         >
-          <Spinner size="lg" />
-          <Heading size="lg" textAlign="center">
+          <Spinner
+            size="lg"
+            color={isBrandBackground && inNavModal ? theme.color.icon.inverted : undefined}
+          />
+          <Heading size="lg" textAlign="center" inverted={isBrandBackground && inNavModal}>
             {loadingHeading}
           </Heading>
         </View>
@@ -225,18 +229,22 @@ const Modal = ({
           <View style={styles.header}>
             <View style={styles.headerTextContent}>
               {heading && !image ? (
-                <Heading size="lg" accessible>
+                <Heading size="lg" accessible inverted={isBrandBackground && inNavModal}>
                   {heading}
                 </Heading>
               ) : null}
-              {description && !image ? <BodyText accessible>{description}</BodyText> : null}
+              {description && !image ? (
+                <BodyText accessible inverted={isBrandBackground && inNavModal}>
+                  {description}
+                </BodyText>
+              ) : null}
             </View>
             {showCloseButton ? (
               <UnstyledIconButton
                 icon={CloseMediumIcon}
                 onPress={handleCloseButtonPress}
                 accessibilityLabel="Close modal"
-                inverted={background === 'brand' && inNavModal}
+                inverted={isBrandBackground && inNavModal}
                 {...closeButtonProps}
               />
             ) : null}
@@ -246,12 +254,21 @@ const Modal = ({
               {image}
               <View style={styles.textContent}>
                 {heading ? (
-                  <Heading size="lg" textAlign="center" accessible>
+                  <Heading
+                    size="lg"
+                    textAlign="center"
+                    accessible
+                    inverted={isBrandBackground && inNavModal}
+                  >
                     {heading}
                   </Heading>
                 ) : null}
                 {description ? (
-                  <BodyText textAlign="center" accessible>
+                  <BodyText
+                    textAlign="center"
+                    accessible
+                    inverted={isBrandBackground && inNavModal}
+                  >
                     {description}
                   </BodyText>
                 ) : null}
@@ -285,7 +302,7 @@ const Modal = ({
     <View
       style={{
         flex: 1,
-        backgroundColor: theme.color.background[background === 'brand' ? 'brand' : 'primary'],
+        backgroundColor: theme.color.background[isBrandBackground ? 'brand' : 'primary'],
       }}
     >
       {Platform.OS === 'android' ? (

package/src/components/ProgressBar/ProgressBar.docs.mdx

@@ -0,0 +1,90 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Box, Center, ProgressBar } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './ProgressBar.stories';
+
+<Meta title="Components / Progress Bar" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7849-5704&t=Jg2fPJPQNzOyspmQ-4" />
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7863-3977&t=Jg2fPJPQNzOyspmQ-4" />
+
+# Progress Bar
+
+Progress bars communicate task completion for linear flows and bounded operations. Use the linear variant for
+inline layouts and the circular variant when space is tighter or when progress needs more emphasis.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Variants](#variants)
+- [Circular Sizes](#circular-sizes)
+- [Examples](#examples)
+  - [Custom Value Labels](#custom-value-labels)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+<UsageWrap>
+  <Center>
+    <Box style={{ width: 260 }}>
+      <ProgressBar value={42} label="Uploading documents" />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { ProgressBar } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => <ProgressBar value={42} label="Uploading documents" />;
+```
+
+## Props
+
+| Property          | Type                                                                                      | Description                                              | Default   |
+| ----------------- | ----------------------------------------------------------------------------------------- | -------------------------------------------------------- | --------- |
+| `variant`         | `'linear' \| 'circular'`                                                                  | The progress bar variant.                                | `linear`  |
+| `colorScheme`     | `'default' \| 'success' \| 'danger'`                                                      | The color scheme for the progress indicator.             | `default` |
+| `size`            | `'sm' \| 'md'`                                                                            | Circular size. Only applies to the circular variant.     | `md`      |
+| `value`           | `number`                                                                                  | Current progress value.                                  |           |
+| `min`             | `number`                                                                                  | Minimum value.                                           | `0`       |
+| `max`             | `number`                                                                                  | Maximum value.                                           | `100`     |
+| `label`           | `string`                                                                                  | Accessible label for the progress bar.                   |           |
+| `hideLabel`       | `boolean`                                                                                 | Visually hide the label and value text.                  | `false`   |
+| `formatValueText` | `(value: number, meta: { min: number; `<br />` max: number; percent: number }) => string` | Override the default percentage label.                   |           |
+| `aria-valuetext`  | `string`                                                                                  | A human-readable text alternative for the current value. |           |
+
+## Variants
+
+<Canvas of={Stories.Variants} />
+
+## Circular Sizes
+
+<Canvas of={Stories.CircularSizes} />
+
+## Examples
+
+### Custom Value Labels
+
+Use `formatValueText` to show values that are not percentages, such as remaining data allowance.
+
+<Canvas of={Stories.CustomValueLabels} />
+
+```tsx
+import { ProgressBar } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <ProgressBar
+    value={68}
+    max={100}
+    label="Data allowance"
+    formatValueText={(value, { max }) => `${max - value}GB remaining`}
+  />
+);
+```

package/src/components/ProgressBar/ProgressBar.figma.tsx

@@ -0,0 +1,79 @@
+import figma from '@figma/code-connect';
+import { ProgressBar } from '../';
+
+figma.connect(
+  ProgressBar,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7849-5704',
+  {
+    props: {
+      value: figma.enum('Progress', {
+        '0%': 0,
+        '10%': 10,
+        '20%': 20,
+        '30%': 30,
+        '40%': 40,
+        '50%': 50,
+        '60%': 60,
+        '70%': 70,
+        '80%': 80,
+        '90%': 90,
+        '100%': 100,
+      }),
+      colorScheme: figma.enum('Color Scheme', {
+        Default: 'default',
+        Success: 'success',
+        Danger: 'danger',
+      }),
+      label: figma.boolean('Label?', { true: figma.string('Label') }),
+    },
+    example: props => (
+      <ProgressBar
+        variant="linear"
+        value={props.value}
+        colorScheme={props.colorScheme}
+        label={props.label}
+      />
+    ),
+  }
+);
+
+figma.connect(
+  ProgressBar,
+  'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=7863-3977',
+  {
+    props: {
+      value: figma.enum('Progress', {
+        '0%': 0,
+        '10%': 10,
+        '20%': 20,
+        '30%': 30,
+        '40%': 40,
+        '50%': 50,
+        '60%': 60,
+        '70%': 70,
+        '80%': 80,
+        '90%': 90,
+        '100%': 100,
+      }),
+      colorScheme: figma.enum('Color Scheme', {
+        Default: 'default',
+        Success: 'success',
+        Danger: 'danger',
+      }),
+      size: figma.enum('Size', {
+        'SM-80': 'sm',
+        'MD-140': 'md',
+      }),
+      label: figma.boolean('Label?', { true: figma.string('Label') }),
+    },
+    example: props => (
+      <ProgressBar
+        variant="circular"
+        value={props.value}
+        colorScheme={props.colorScheme}
+        size={props.size}
+        label={props.label}
+      />
+    ),
+  }
+);

package/src/components/ProgressBar/ProgressBar.props.ts

@@ -0,0 +1,60 @@
+import { ViewProps } from 'react-native';
+
+export type ProgressBarVariant = 'linear' | 'circular';
+export type ProgressBarColorScheme = 'default' | 'success' | 'danger';
+export type ProgressBarSize = 'sm' | 'md';
+
+export interface ProgressBarProps extends ViewProps {
+  variant?: ProgressBarVariant;
+  /**
+   * Set the visual appearance.
+   * @default 'default'
+   */
+  colorScheme?: ProgressBarColorScheme;
+  /**
+   * Sets the circular variant size. Does not affect the appearance of the linear variant.
+   * @default 'md'
+   */
+  size?: ProgressBarSize;
+  /**
+   * The current progress value.
+   */
+  value: number;
+  /**
+   * The minimum value.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * The maximum value.
+   * @default 100
+   */
+  max?: number;
+  /**
+   * Required text label for the progress bar.
+   */
+  label: string;
+  /**
+   * Visually hide the label and value text.
+   */
+  hideLabel?: boolean;
+  /**
+   * Override the default percentage value label formatting.
+   */
+  formatValueText?: (value: number, meta: { min: number; max: number; percent: number }) => string;
+  /**
+   * A human-readable text alternative for the current value.
+   */
+  'aria-valuetext'?: string;
+}
+
+export interface ProgressBarInternalProps {
+  percent: number;
+  label: string;
+  valueText: string;
+  hideLabel?: boolean;
+  colorScheme: ProgressBarColorScheme;
+  size: ProgressBarSize;
+}
+
+export default ProgressBarProps;