@utilitywarehouse/hearth-react-native 0.10.0 → 0.11.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @utilitywarehouse/hearth-react-native@0.10.0 build /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.11.0 build /home/runner/work/hearth/hearth/packages/react-native
 > tsc
 

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
-> @utilitywarehouse/hearth-react-native@0.10.0 lint /home/runner/work/hearth/hearth/packages/react-native
+> @utilitywarehouse/hearth-react-native@0.11.0 lint /home/runner/work/hearth/hearth/packages/react-native
 > TIMING=1 eslint --max-warnings 0
 
 Rule | Time (ms) | Relative

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @utilitywarehouse/hearth-react-native
 
+## 0.11.0
+
+### Minor Changes
+
+- [#674](https://github.com/utilitywarehouse/hearth/pull/674) [`c617257`](https://github.com/utilitywarehouse/hearth/commit/c617257974b11c39d706d6fd46712a284ff5fe10) Thanks [@jordmccord](https://github.com/jordmccord)! - Adds `DateInput` component
+
+- [#663](https://github.com/utilitywarehouse/hearth/pull/663) [`8889a07`](https://github.com/utilitywarehouse/hearth/commit/8889a07e347e9289928e679cee495d7656a4e9aa) Thanks [@Utakato](https://github.com/Utakato)! - Add Avatar component
+
 ## 0.10.0
 
 ### Minor Changes

package/build/components/Avatar/Avatar.d.ts

@@ -0,0 +1,6 @@
+import AvatarProps from './Avatar.props';
+declare const Avatar: {
+    ({ src, name, size, delayMs, onLoadingStatusChange, style, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Avatar;

package/build/components/Avatar/Avatar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UserMediumIcon, UserSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { useEffect, useState } from 'react';
+import { Image, View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useTheme } from '../../hooks';
+import { getInitials } from '../../utils';
+import BodyText from '../BodyText/BodyText';
+const Avatar = ({ src, name, size = 'md', delayMs = 0, onLoadingStatusChange, style, ...props }) => {
+    const [status, setStatus] = useState('idle');
+    const [isDelayed, setIsDelayed] = useState(delayMs > 0);
+    const { components } = useTheme();
+    useEffect(() => {
+        if (!src) {
+            setStatus('idle');
+            return;
+        }
+        setStatus('loading');
+    }, [src]);
+    useEffect(() => {
+        onLoadingStatusChange?.(status);
+    }, [status, onLoadingStatusChange]);
+    useEffect(() => {
+        if (delayMs <= 0) {
+            setIsDelayed(false);
+            return;
+        }
+        const timerId = setTimeout(() => {
+            setIsDelayed(false);
+        }, delayMs);
+        return () => clearTimeout(timerId);
+    }, [delayMs]);
+    styles.useVariants({ size });
+    const initials = getInitials(name);
+    const handleLoad = () => setStatus('loaded');
+    const handleError = () => setStatus('error');
+    const showImage = src && status === 'loaded';
+    const showFallback = !showImage && !isDelayed;
+    const textSize = size === 'sm' ? 'md' : 'lg';
+    const FallbackIcon = size === 'sm' ? UserSmallIcon : UserMediumIcon;
+    return (_jsxs(View, { ...props, style: [styles.container, style], accessibilityRole: showImage && name ? 'image' : undefined, accessibilityLabel: showImage ? name : undefined, children: [src && (_jsx(Image, { source: src, style: styles.image, onLoad: handleLoad, onError: handleError, accessibilityElementsHidden: true })), showFallback && (_jsx(View, { style: styles.fallback, children: name ? (_jsx(BodyText, { size: textSize, weight: "semibold", textTransform: "uppercase", style: styles.text, children: initials })) : (_jsx(FallbackIcon, {})) }))] }));
+};
+Avatar.displayName = 'Avatar';
+const styles = StyleSheet.create(theme => ({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        backgroundColor: theme.color.surface.pig.subtle,
+        variants: {
+            size: {
+                sm: {
+                    width: theme.components.avatar.sm.width,
+                    height: theme.components.avatar.sm.height,
+                    borderRadius: theme.components.avatar.sm.borderRadius,
+                },
+                md: {
+                    width: theme.components.avatar.md.width,
+                    height: theme.components.avatar.md.height,
+                    borderRadius: theme.components.avatar.md.borderRadius,
+                },
+            },
+        },
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+        position: 'absolute',
+    },
+    fallback: {
+        width: '100%',
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    text: {
+        color: theme.color.text.primary,
+    },
+}));
+export default Avatar;

package/build/components/Avatar/Avatar.props.d.ts

@@ -0,0 +1,28 @@
+import type { ImageSourcePropType, ViewProps } from 'react-native';
+export type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+interface AvatarProps extends ViewProps {
+    /**
+     * The image source to display.
+     */
+    src?: ImageSourcePropType;
+    /**
+     * The name associated with the avatar, used for creating initials and accessibility label.
+     */
+    name?: string;
+    /**
+     * Sets the avatar size.
+     * @default md
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Delay in milliseconds before the image is rendered.
+     * Useful to prevent flickering when the image loads very quickly.
+     * @default 0
+     */
+    delayMs?: number;
+    /**
+     * Callback fired when the loading status of the image changes.
+     */
+    onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
+}
+export default AvatarProps;

package/build/components/Avatar/Avatar.props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar';
+export type { default as AvatarProps, AvatarLoadingStatus } from './Avatar.props';

package/build/components/Avatar/index.js

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

package/build/components/DateInput/DateInput.d.ts

@@ -0,0 +1,6 @@
+import type { DateInputProps } from './DateInput.props';
+declare const DateInput: {
+    ({ label, helperText, helperIcon, validationStatus, validText, invalidText, disabled, readonly, required, hideDay, hideMonth, hideYear, dayPlaceholder, monthPlaceholder, yearPlaceholder, dayValue, monthValue, yearValue, onDayChange, onMonthChange, onYearChange, onDayFocus, onMonthFocus, onYearFocus, onDayBlur, onMonthBlur, onYearBlur, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DateInput;

package/build/components/DateInput/DateInput.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { FormField } from '../FormField';
+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 }) => {
+    return (_jsx(FormField, { label: label, helperText: helperText, helperIcon: helperIcon, validationStatus: validationStatus, validText: validText, invalidText: invalidText, disabled: disabled, readonly: readonly, required: required, style: styles.wrap, ...props, children: _jsxs(View, { style: styles.container, children: [!hideDay && (_jsx(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 && (_jsx(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 && (_jsx(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" }))] }) }));
+};
+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/build/components/DateInput/DateInput.props.d.ts

@@ -0,0 +1,79 @@
+import type { TextInputProps } from 'react-native';
+import type { FormFieldBaseProps } from '../FormField/FormField.props';
+export interface DateInputProps extends FormFieldBaseProps {
+    /**
+     * Whether the day segment is hidden.
+     * @default false
+     */
+    hideDay?: boolean;
+    /**
+     * Whether the month segment is hidden.
+     * @default false
+     */
+    hideMonth?: boolean;
+    /**
+     * Whether the year segment is hidden.
+     * @default false
+     */
+    hideYear?: boolean;
+    /**
+     * Placeholder text for the day segment.
+     */
+    dayPlaceholder?: string;
+    /**
+     * Placeholder text for the month segment.
+     */
+    monthPlaceholder?: string;
+    /**
+     * Placeholder text for the year segment.
+     */
+    yearPlaceholder?: string;
+    /**
+     * The controlled value for the day segment. Must be used with an `onDayChange` handler.
+     */
+    dayValue?: string;
+    /**
+     * The controlled value for the month segment. Must be used with an `onMonthChange` handler.
+     */
+    monthValue?: string;
+    /**
+     * The controlled value for the year segment. Must be used with an `onYearChange` handler.
+     */
+    yearValue?: string;
+    /**
+     * Callback fired when the day value changes.
+     */
+    onDayChange?: (text: string) => void;
+    /**
+     * Callback fired when the month value changes.
+     */
+    onMonthChange?: (text: string) => void;
+    /**
+     * Callback fired when the year value changes.
+     */
+    onYearChange?: (text: string) => void;
+    /**
+     * Callback fired when the day segment receives focus.
+     */
+    onDayFocus?: TextInputProps['onFocus'];
+    /**
+     * Callback fired when the month segment receives focus.
+     */
+    onMonthFocus?: TextInputProps['onFocus'];
+    /**
+     * Callback fired when the year segment receives focus.
+     */
+    onYearFocus?: TextInputProps['onFocus'];
+    /**
+     * Callback fired when the day segment loses focus.
+     */
+    onDayBlur?: TextInputProps['onBlur'];
+    /**
+     * Callback fired when the month segment loses focus.
+     */
+    onMonthBlur?: TextInputProps['onBlur'];
+    /**
+     * Callback fired when the year segment loses focus.
+     */
+    onYearBlur?: TextInputProps['onBlur'];
+}

package/build/components/DateInput/DateInput.props.js

@@ -0,0 +1 @@
+export {};

package/build/components/DateInput/DateInputSegment.d.ts

@@ -0,0 +1,20 @@
+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;
+}
+declare const DateInputSegment: {
+    ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, }: DateInputSegmentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default DateInputSegment;

package/build/components/DateInput/DateInputSegment.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { BodyText } from '../BodyText';
+import { Input } from '../Input';
+const DateInputSegment = ({ label, placeholder, value, onChange, onFocus, onBlur, disabled, validationStatus, maxLength, readonly, testID, }) => {
+    styles.useVariants({ disabled });
+    return (_jsxs(View, { style: styles.container, children: [_jsx(BodyText, { size: "md", style: styles.label, children: label }), _jsx(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 })] }));
+};
+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/build/components/DateInput/index.d.ts

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

package/build/components/DateInput/index.js

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

package/build/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Accordion';
 export * from './Alert';
+export * from './Avatar';
 export * from './Badge';
 export * from './Banner';
 export * from './BodyText';
@@ -12,6 +13,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/build/components/index.js

@@ -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/build/utils/getInitials.d.ts

@@ -0,0 +1 @@
+export declare function getInitials(name?: string): string | undefined;

package/build/utils/getInitials.js

@@ -0,0 +1,8 @@
+export function getInitials(name) {
+    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/build/utils/index.d.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';

package/build/utils/index.js

@@ -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';

package/docs/components/AllComponents.web.tsx

@@ -23,6 +23,7 @@ import {
   Accordion,
   AccordionItem,
   Alert,
+  Avatar,
   Badge,
   Banner,
   BodyText,
@@ -39,6 +40,7 @@ import {
   Checkbox,
   Container,
   CurrencyInput,
+  DateInput,
   DatePicker,
   DatePickerInput,
   DateType,
@@ -196,6 +198,11 @@ const AllComponents: React.FC = () => {
               <Alert text="This is an alert" />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Avatar" link="/?path=/docs/components-avatar--docs">
+            <Center flex={1} gap="200">
+              <Avatar name="John Doe" />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Badge" link="/?path=/docs/components-badge--docs">
             <Center gap="200" flex={1}>
               <View>
@@ -340,6 +347,11 @@ const AllComponents: React.FC = () => {
               <CurrencyInput />
             </Center>
           </ComponentWrapper>
+          <ComponentWrapper name="Date Input" link="/?path=/docs/forms-date-input--docs">
+            <Center flex={1} padding="200">
+              <DateInput />
+            </Center>
+          </ComponentWrapper>
           <ComponentWrapper name="Date Picker" link="/?path=/docs/components-date-picker--docs">
             <Center flex={1}>
               <Button onPress={handleDatePickerOpenPress}>Open Date Picker</Button>
@@ -635,7 +647,12 @@ const AllComponents: React.FC = () => {
               {(() => {
                 const [pillValue, setPillValue] = React.useState<string[]>(['energy', 'mobile']);
                 return (
-                  <PillGroup value={pillValue} onChange={v => setPillValue(v as string[])} wrap={false} multiple>
+                  <PillGroup
+                    value={pillValue}
+                    onChange={v => setPillValue(v as string[])}
+                    wrap={false}
+                    multiple
+                  >
                     <Pill value="all" label="All" />
                     <Pill value="energy" label="Energy" icon={ElectricityMediumIcon} />
                     <Pill value="broadband" label="Broadband" icon={BroadbandMediumIcon} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",

package/src/components/Avatar/Avatar.docs.mdx

@@ -0,0 +1,105 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
+import { Avatar, Box, Center } from '../..';
+import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
+import * as Stories from './Avatar.stories';
+
+<Meta title="Components / Avatar" />
+
+<BackToTopButton />
+
+<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1%3A148" />
+
+# Avatar
+
+Avatars help humanise the product experience by connecting users with the product and to each other.
+
+- [Playground](#playground)
+- [Usage](#usage)
+- [Props](#props)
+- [Accessibility](#accessibility)
+
+## Playground
+
+<Canvas of={Stories.Playground} />
+
+<Controls of={Stories.Playground} />
+
+## Usage
+
+### Icon
+
+The icon variant is the default `Avatar` type. It ensures UI remains balanced and visually complete, even with limited data.
+
+<UsageWrap>
+  <Center>
+    <Box>
+      <Avatar />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Avatar } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => <Avatar />;
+```
+
+### Initials
+
+The initials variant can be used when a profile image is not available, but you have the user's name.
+
+<UsageWrap>
+  <Center>
+    <Box>
+      <Avatar name="Jane Doe" />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Avatar } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => <Avatar name="Jane Doe" />;
+```
+
+### Image
+
+The image variant is available to use in journeys where a user is able to upload their own profile picture.
+
+<UsageWrap>
+  <Center>
+    <Box>
+      <Avatar
+        name="Jane Doe"
+        src={{ uri: 'https://ca.slack-edge.com/T0HR00WDA-U05SHRATW7Q-3ad4ae7c75b8-512' }}
+      />
+    </Box>
+  </Center>
+</UsageWrap>
+
+```tsx
+import { Avatar } from '@utilitywarehouse/hearth-react-native';
+
+const MyComponent = () => (
+  <Avatar
+    name="Jane Doe"
+    src={{ uri: 'https://ca.slack-edge.com/T0HR00WDA-U05SHRATW7Q-3ad4ae7c75b8-512' }}
+  />
+);
+```
+
+## Props
+
+| Property                | Type                                                       | Description                                                                          | Default |
+| ----------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------------ | ------- |
+| `src`                   | `ImageSourcePropType`                                      | The image source to display.                                                         |         |
+| `name`                  | `string`                                                   | The name associated with the avatar, used for creating initials and accessibility.   |         |
+| `size`                  | `'sm' \| 'md'`                                             | Sets the avatar size.                                                                | `md`    |
+| `delayMs`               | `number`                                                   | Delay in milliseconds before the image is rendered to avoid flickering.              | `0`     |
+| `onLoadingStatusChange` | `(status: 'idle' \| 'loading' \| 'loaded' \| 'error') => void` | Callback fired when the loading status of the image changes.                         |         |
+
+## Accessibility
+
+When passing a user image to the `src` prop, you should also pass their name to the `name` prop so it can be used as an accessible description for the image.
+
+If the image fails to load, the component will automatically fall back to displaying the initials (if `name` is provided) or the default user icon.

package/src/components/Avatar/Avatar.props.ts

@@ -0,0 +1,31 @@
+import type { ImageSourcePropType, ViewProps } from 'react-native';
+
+export type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
+
+interface AvatarProps extends ViewProps {
+  /**
+   * The image source to display.
+   */
+  src?: ImageSourcePropType;
+  /**
+   * The name associated with the avatar, used for creating initials and accessibility label.
+   */
+  name?: string;
+  /**
+   * Sets the avatar size.
+   * @default md
+   */
+  size?: 'sm' | 'md';
+  /**
+   * Delay in milliseconds before the image is rendered.
+   * Useful to prevent flickering when the image loads very quickly.
+   * @default 0
+   */
+  delayMs?: number;
+  /**
+   * Callback fired when the loading status of the image changes.
+   */
+  onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
+}
+
+export default AvatarProps;