@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.0

package/src/components/Timeline/Timeline.stories.tsx

@@ -1,102 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { Timeline, TimelineItem } from '.';
-import { VariantTitle } from '../../../docs/components';
-import { Badge } from '../Badge';
-import { BodyText } from '../BodyText';
-import { Box } from '../Box';
-import { Card } from '../Card';
-import { Flex } from '../Flex';
-
-const meta = {
-  title: 'Stories / Timeline',
-  component: Timeline,
-  argTypes: {
-    variant: {
-      options: ['static', 'progress'],
-      control: 'select',
-      description: 'The timeline indicator style.',
-    },
-  },
-  args: {
-    variant: 'progress',
-  },
-} satisfies Meta<typeof Timeline>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: args => {
-    const isProgress = args.variant === 'progress';
-
-    return (
-      <Box style={{ width: 280 }}>
-        <Timeline {...args}>
-          <TimelineItem
-            label="Order placed"
-            helperText="We have received your request"
-            state={isProgress ? 'complete' : undefined}
-          />
-          <TimelineItem
-            label="Checking details"
-            helperText="We are validating the information"
-            state={isProgress ? 'complete' : undefined}
-          />
-          <TimelineItem
-            label="Engineer booked"
-            helperText="Your appointment has been reserved"
-            state={isProgress ? 'active' : undefined}
-          />
-          <TimelineItem
-            label="Service live"
-            helperText="Everything is ready to go"
-            state={isProgress ? 'incomplete' : undefined}
-          />
-        </Timeline>
-      </Box>
-    );
-  },
-};
-
-export const Variants: Story = {
-  render: () => (
-    <Flex direction="column" spacing="xl" style={{ width: 320 }}>
-      <VariantTitle title="Progress">
-        <Timeline variant="progress">
-          <TimelineItem label="Account created" helperText="Done" state="complete" />
-          <TimelineItem label="Documents uploaded" helperText="Done" state="complete" />
-          <TimelineItem label="Verification" helperText="In progress" state="active" />
-          <TimelineItem label="Decision" helperText="Pending" state="incomplete" />
-        </Timeline>
-      </VariantTitle>
-      <VariantTitle title="Static">
-        <Timeline variant="static">
-          <TimelineItem label="Collected" helperText="08:15" />
-          <TimelineItem label="Sorted" helperText="10:40" />
-          <TimelineItem label="Out for delivery" helperText="13:25" />
-        </Timeline>
-      </VariantTitle>
-    </Flex>
-  ),
-};
-
-export const WithCustomContent: Story = {
-  render: () => (
-    <Box style={{ width: 320 }}>
-      <Timeline variant="progress">
-        <TimelineItem
-          label="Application started"
-          helperText="We have saved your draft"
-          state="complete"
-        />
-        <TimelineItem label="Additional information" helperText="Action needed" state="active">
-          <Card variant="subtle" spacing="md">
-            <Badge>Required</Badge>
-            <BodyText size="sm">Upload proof of address to continue.</BodyText>
-          </Card>
-        </TimelineItem>
-        <TimelineItem label="Review complete" helperText="Pending" state="incomplete" />
-      </Timeline>
-    </Box>
-  ),
-};

package/src/components/Timeline/Timeline.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { View, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import type { TimelineItemPosition, TimelineItemProps, TimelineProps } from './Timeline.props';
-
-const getItemPosition = (index: number, count: number): TimelineItemPosition => {
-  if (count <= 1) {
-    return 'single';
-  }
-
-  if (index === 0) {
-    return 'start';
-  }
-
-  if (index === count - 1) {
-    return 'end';
-  }
-
-  return 'middle';
-};
-
-const Timeline = ({ children, variant = 'static', style, ...rest }: TimelineProps) => {
-  const childElements = React.Children.toArray(children).filter(React.isValidElement);
-
-  return (
-    <View accessibilityRole="list" style={[styles.root, style as ViewStyle]} {...rest}>
-      {childElements.map((child, index) => {
-        const position = getItemPosition(index, childElements.length);
-
-        return React.cloneElement(child as React.ReactElement<TimelineItemProps>, {
-          key: child.key ?? `timeline-item-${index}`,
-          position,
-          variant,
-        });
-      })}
-    </View>
-  );
-};
-
-Timeline.displayName = 'Timeline';
-
-const styles = StyleSheet.create(() => ({
-  root: {
-    width: '100%',
-  },
-}));
-
-export default Timeline;

package/src/components/Timeline/TimelineItem.tsx

@@ -1,293 +0,0 @@
-import { TickSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { View, ViewStyle } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import { BodyText } from '../BodyText';
-import { Icon } from '../Icon';
-import type { TimelineItemProps } from './Timeline.props';
-
-const TimelineItem = ({
-  children,
-  helperText,
-  label,
-  position = 'single',
-  state = 'incomplete',
-  style,
-  variant = 'static',
-  accessibilityLabel: accessibilityLabelProp,
-  accessible: accessibleProp,
-  ...rest
-}: TimelineItemProps) => {
-  styles.useVariants({ position, state, variant });
-
-  const hasCustomContent = Boolean(children);
-
-  const computedAccessibilityLabel = [
-    label,
-    helperText,
-    variant === 'progress' ? `Step ${state}` : undefined,
-  ]
-    .filter(Boolean)
-    .join(', ');
-
-  return (
-    <View
-      style={[styles.item, style as ViewStyle]}
-      {...rest}
-      accessible={accessibleProp ?? !hasCustomContent}
-      accessibilityLabel={
-        (accessibleProp ?? !hasCustomContent)
-          ? (accessibilityLabelProp ?? computedAccessibilityLabel)
-          : undefined
-      }
-    >
-      <View style={styles.indicatorColumn}>
-        {(position === 'middle' || position === 'end') && <View style={styles.topConnector} />}
-        <View style={styles.circle}>
-          {variant === 'progress' && state === 'complete' ? (
-            <Icon as={TickSmallIcon} width={20} height={20} style={styles.completeIcon} />
-          ) : variant === 'progress' && state === 'active' ? (
-            <View style={styles.activeInnerDot} />
-          ) : null}
-        </View>
-        {(position === 'start' || position === 'middle') && <View style={styles.bottomConnector} />}
-      </View>
-      <View style={styles.content}>
-        <View
-          style={styles.textContent}
-          accessible={hasCustomContent}
-          accessibilityLabel={
-            hasCustomContent ? (accessibilityLabelProp ?? computedAccessibilityLabel) : undefined
-          }
-        >
-          <BodyText size="md" weight="semibold" style={styles.label}>
-            {label}
-          </BodyText>
-          {helperText ? (
-            <BodyText size="md" style={styles.helperText}>
-              {helperText}
-            </BodyText>
-          ) : null}
-        </View>
-        {children ? <View style={styles.customContent}>{children}</View> : null}
-      </View>
-    </View>
-  );
-};
-
-TimelineItem.displayName = 'TimelineItem';
-
-const styles = StyleSheet.create(theme => ({
-  item: {
-    flexDirection: 'row',
-    gap: theme.components.timeline.gap,
-    width: '100%',
-  },
-  indicatorColumn: {
-    alignItems: 'center',
-    variants: {
-      variant: {
-        static: {
-          width: theme.components.timeline.static.circle.width,
-        },
-        progress: {
-          width: theme.components.timeline.progress.circle.width,
-        },
-      },
-    },
-  },
-  topConnector: {
-    width: theme.components.timeline.bar.width,
-    variants: {
-      variant: {
-        static: {
-          height: theme.components.timeline.static.circle.height / 2,
-          backgroundColor: theme.color.surface.brand.default,
-        },
-        progress: {
-          height: 0,
-        },
-      },
-      state: {
-        complete: {},
-        active: {},
-        incomplete: {},
-      },
-    },
-    compoundVariants: [
-      {
-        variant: 'progress',
-        state: 'complete',
-        styles: {
-          backgroundColor: theme.color.surface.brand.default,
-        },
-      },
-      {
-        variant: 'progress',
-        state: 'active',
-        styles: {
-          backgroundColor: theme.color.surface.brand.default,
-        },
-      },
-      {
-        variant: 'progress',
-        state: 'incomplete',
-        styles: {
-          backgroundColor: theme.color.border.subtle,
-        },
-      },
-    ],
-  },
-  bottomConnector: {
-    flex: 1,
-    minHeight: theme.components.timeline.content.paddingBottom,
-    width: theme.components.timeline.bar.width,
-    variants: {
-      variant: {
-        static: {
-          backgroundColor: theme.color.surface.brand.default,
-        },
-        progress: {},
-      },
-      state: {
-        complete: {},
-        active: {},
-        incomplete: {},
-      },
-    },
-    compoundVariants: [
-      {
-        variant: 'progress',
-        state: 'complete',
-        styles: {
-          backgroundColor: theme.color.surface.brand.default,
-        },
-      },
-      {
-        variant: 'progress',
-        state: 'active',
-        styles: {
-          backgroundColor: theme.color.border.subtle,
-        },
-      },
-      {
-        variant: 'progress',
-        state: 'incomplete',
-        styles: {
-          backgroundColor: theme.color.border.subtle,
-        },
-      },
-    ],
-  },
-  circle: {
-    borderRadius: theme.borderRadius.full,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 2,
-    variants: {
-      variant: {
-        static: {
-          width: theme.components.timeline.static.circle.width,
-          height: theme.components.timeline.static.circle.height,
-          backgroundColor: theme.color.surface.brand.default,
-        },
-        progress: {
-          width: theme.components.timeline.progress.circle.width,
-          height: theme.components.timeline.progress.circle.height,
-        },
-      },
-      state: {
-        complete: {},
-        active: {},
-        incomplete: {},
-      },
-    },
-    compoundVariants: [
-      {
-        variant: 'progress',
-        state: 'complete',
-        styles: {
-          backgroundColor: theme.color.surface.brand.default,
-        },
-      },
-      {
-        variant: 'progress',
-        state: 'active',
-        styles: {
-          backgroundColor: theme.color.surface.neutral.subtle,
-          borderWidth: theme.borderWidth[2],
-          borderColor: theme.color.surface.brand.default,
-        },
-      },
-      {
-        variant: 'progress',
-        state: 'incomplete',
-        styles: {
-          backgroundColor: theme.color.surface.neutral.subtle,
-          borderWidth: theme.borderWidth[2],
-          borderColor: theme.color.border.subtle,
-        },
-      },
-    ],
-  },
-  activeInnerDot: {
-    width: '100%',
-    height: '100%',
-    borderRadius: theme.borderRadius.full,
-    backgroundColor: theme.color.surface.brand.default,
-  },
-  completeIcon: {
-    color: theme.color.text.inverted,
-  },
-  content: {
-    flex: 1,
-    minWidth: 0,
-    gap: theme.components.timeline.content.gap,
-    variants: {
-      position: {
-        single: {
-          paddingBottom: 0,
-        },
-        start: {
-          paddingBottom: theme.components.timeline.content.paddingBottom,
-        },
-        middle: {
-          paddingBottom: theme.components.timeline.content.paddingBottom,
-        },
-        end: {
-          paddingBottom: 0,
-        },
-      },
-      variant: {
-        static: {
-          paddingTop: 0,
-        },
-        progress: {
-          paddingTop: theme.components.timeline.content.paddingTop,
-        },
-      },
-    },
-    compoundVariants: [
-      {
-        position: 'start',
-        variant: 'static',
-        styles: {
-          marginTop: -6,
-        },
-      },
-    ],
-  },
-  textContent: {
-    width: '100%',
-  },
-  label: {
-    color: theme.color.text.primary,
-  },
-  helperText: {
-    color: theme.color.text.secondary,
-  },
-  customContent: {
-    width: '100%',
-  },
-}));
-
-export default TimelineItem;

package/src/components/Timeline/index.ts

@@ -1,9 +0,0 @@
-export { default as Timeline } from './Timeline';
-export { default as TimelineItem } from './TimelineItem';
-export type {
-  TimelineItemPosition,
-  TimelineItemProps,
-  TimelineItemState,
-  TimelineProps,
-  TimelineVariant,
-} from './Timeline.props';

package/src/components/Toast/Toast.context.tsx

@@ -1,139 +0,0 @@
-import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import { View } from 'react-native';
-import { StyleSheet } from 'react-native-unistyles';
-import type {
-  ToastContextValue,
-  ToastInstance,
-  ToastOptions,
-  ToastProviderProps,
-} from './Toast.props';
-import ToastItem, { type ToastItemHandle } from './ToastItem';
-
-const ToastContext = createContext<ToastContextValue | undefined>(undefined);
-
-export const useToastContext = () => {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error('useToastContext must be used within ToastProvider');
-  return ctx;
-};
-
-export const ToastProvider: React.FC<ToastProviderProps> = ({
-  children,
-  safeAreaPadding = true,
-}) => {
-  const [toasts, setToasts] = useState<ToastInstance[]>([]);
-  const timers = useRef<Record<string, number>>({});
-  const toastRefs = useRef<Record<string, ToastItemHandle | null>>({});
-
-  const removeToast = useCallback((id: string) => {
-    setToasts(s => s.filter(t => t.id !== id));
-    const timer = timers.current[id];
-    if (timer) {
-      clearTimeout(timer);
-      delete timers.current[id];
-    }
-    delete toastRefs.current[id];
-  }, []);
-
-  const addToast = useCallback(
-    (opts: ToastOptions) => {
-      const id = opts.id ?? `${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
-      const toast: ToastInstance = {
-        id,
-        text: opts.text,
-        actionText: opts.actionText,
-        onPress: opts.onPress,
-        onDismiss: opts.onDismiss,
-        icon: opts.icon,
-        duration: opts.duration ?? 6000,
-        showDismissIcon: opts.showDismissIcon,
-        dismissOnPress: opts.dismissOnPress ?? true,
-      };
-      setToasts(s => [toast, ...s]);
-
-      // set auto-dismiss timer
-      if (toast.duration && toast.duration > 0) {
-        const t = setTimeout(() => {
-          // call dismiss animation if ref exists, otherwise remove immediately
-          const ref = toastRefs.current[id];
-          if (ref) {
-            ref.dismiss();
-          } else {
-            removeToast(id);
-          }
-        }, toast.duration) as unknown as number;
-        timers.current[id] = t;
-      }
-
-      return id;
-    },
-    [removeToast]
-  );
-
-  styles.useVariants({
-    safeAreaPadding,
-  });
-
-  useEffect(() => {
-    return () => {
-      // cleanup timers on unmount
-      Object.values(timers.current).forEach(t => clearTimeout(t));
-      timers.current = {};
-    };
-  }, []);
-
-  return (
-    <ToastContext.Provider value={{ addToast, removeToast }}>
-      {children}
-      <View style={styles.container as any}>
-        <View style={styles.stack as any}>
-          {toasts.map(t => (
-            <ToastItem
-              key={t.id}
-              ref={el => {
-                toastRefs.current[t.id] = el;
-              }}
-              toast={t}
-              onClose={removeToast}
-            />
-          ))}
-        </View>
-      </View>
-    </ToastContext.Provider>
-  );
-};
-
-export const useToast = () => {
-  const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error('useToast must be used within ToastProvider');
-  return ctx;
-};
-
-export default ToastContext;
-
-const styles = StyleSheet.create((theme, rt) => ({
-  container: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    alignItems: 'stretch',
-    paddingBottom: theme.space['200'],
-    pointerEvents: 'box-none',
-    variants: {
-      safeAreaPadding: {
-        true: {
-          paddingBottom: theme.space['200'] + rt.insets.bottom,
-          paddingTop: rt.insets.top,
-        },
-        false: {},
-      },
-    },
-  },
-  stack: {
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    gap: theme.components.toast.stack.gap,
-  },
-}));

package/src/components/Toast/Toast.props.ts

@@ -1,38 +0,0 @@
-import type { ReactNode } from 'react';
-
-export interface ToastOptions {
-  id?: string;
-  text: string | ReactNode;
-  /** Optional action text to display as a link */
-  actionText?: string;
-  /** Optional callback when action link or toast is pressed */
-  onPress?: () => void;
-  /** Optional callback when toast is dismissed */
-  onDismiss?: () => void;
-  /** Optional icon component */
-  icon?: React.ComponentType;
-  /** Duration in milliseconds; default 6000 */
-  duration?: number;
-  /** Whether to show the dismiss icon button; default true */
-  showDismissIcon?: boolean;
-  /** Whether to dismiss the toast when pressed; default true */
-  dismissOnPress?: boolean;
-}
-
-export interface ToastInstance extends ToastOptions {
-  id: string;
-  /** resolved duration */
-  duration: number;
-}
-
-export interface ToastProviderProps {
-  children: ReactNode;
-  safeAreaPadding?: boolean;
-}
-
-export interface ToastContextValue {
-  addToast: (opts: ToastOptions) => string;
-  removeToast: (id: string) => void;
-}
-
-export default ToastOptions;