@utilitywarehouse/hearth-react-native 0.9.0 → 0.10.0

package/src/components/Toast/Toast.stories.tsx

@@ -0,0 +1,356 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import {
+  InfoSmallIcon,
+  TickSmallIcon,
+  TrashSmallIcon,
+  WarningSmallIcon,
+} from '@utilitywarehouse/hearth-react-native-icons';
+import React from 'react';
+import { Platform, View } from 'react-native';
+import { Button } from '../Button';
+import { ToastProvider, useToast } from './';
+
+const meta: Meta = {
+  title: 'Stories / Toast',
+  argTypes: {},
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ViewWrap = ({ children }: { children: React.ReactNode }) => (
+  <View
+    style={
+      Platform.OS === 'web'
+        ? { width: 400, height: 400, position: 'relative', overflow: 'visible' }
+        : { flex: 1 }
+    }
+  >
+    <ToastProvider>{children}</ToastProvider>
+  </View>
+);
+
+export const Playground: Story = {
+  render: () => {
+    return (
+      <ViewWrap>
+        <PlaygroundDemo />
+      </ViewWrap>
+    );
+  },
+};
+
+const PlaygroundDemo = () => {
+  const { addToast } = useToast();
+
+  const showBasic = () => {
+    addToast({ text: 'This is a simple toast message' });
+  };
+
+  return (
+    <View style={{ gap: 12, padding: 16 }}>
+      <Button onPress={showBasic}>Show Toast</Button>
+    </View>
+  );
+};
+
+const BasicToastDemo = () => {
+  const { addToast } = useToast();
+
+  return (
+    <View style={{ gap: 12, padding: 16 }}>
+      <Button onPress={() => addToast({ text: 'Settings saved successfully' })}>
+        Show Basic Toast
+      </Button>
+    </View>
+  );
+};
+
+export const BasicToast: Story = {
+  render: () => (
+    <ViewWrap>
+      <BasicToastDemo />
+    </ViewWrap>
+  ),
+};
+
+const WithIconDemo = () => {
+  const { addToast } = useToast();
+
+  return (
+    <View style={{ gap: 12, padding: 16 }}>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'Changes saved',
+            icon: TickSmallIcon,
+          })
+        }
+      >
+        Show Success Toast
+      </Button>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'Important information',
+            icon: InfoSmallIcon,
+          })
+        }
+      >
+        Show Info Toast
+      </Button>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'Please review your input',
+            icon: WarningSmallIcon,
+          })
+        }
+      >
+        Show Warning Toast
+      </Button>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'Item deleted',
+            icon: TrashSmallIcon,
+          })
+        }
+      >
+        Show Destructive Toast
+      </Button>
+    </View>
+  );
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <ViewWrap>
+      <WithIconDemo />
+    </ViewWrap>
+  ),
+};
+
+const WithActionDemo = () => {
+  const { addToast } = useToast();
+
+  return (
+    <View style={{ gap: 12, padding: 16, flex: 1 }}>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'File uploaded successfully',
+            actionText: 'View file',
+            onPress: () => console.log('View clicked'),
+          })
+        }
+      >
+        Show Toast With Action
+      </Button>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'Changes saved',
+            icon: TickSmallIcon,
+            actionText: 'Undo',
+            onPress: () => console.log('Undo clicked'),
+          })
+        }
+      >
+        Show With Icon & Action
+      </Button>
+    </View>
+  );
+};
+
+export const WithAction: Story = {
+  render: () => (
+    <ViewWrap>
+      <WithActionDemo />
+    </ViewWrap>
+  ),
+};
+
+const CustomDurationDemo = () => {
+  const { addToast } = useToast();
+
+  return (
+    <View style={{ gap: 12, padding: 16 }}>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'Quick message (2 seconds)',
+            duration: 2000,
+          })
+        }
+      >
+        2 Second Toast
+      </Button>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'Default duration (6 seconds)',
+          })
+        }
+      >
+        Default Duration
+      </Button>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'Long message (10 seconds)',
+            duration: 10000,
+          })
+        }
+      >
+        10 Second Toast
+      </Button>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'Persistent (no auto-dismiss)',
+            duration: 0,
+          })
+        }
+      >
+        No Auto-Dismiss
+      </Button>
+    </View>
+  );
+};
+
+export const CustomDuration: Story = {
+  render: () => (
+    <ViewWrap>
+      <CustomDurationDemo />
+    </ViewWrap>
+  ),
+};
+
+const StackedToastsDemo = () => {
+  const { addToast } = useToast();
+
+  const showMultiple = () => {
+    addToast({ text: 'First toast', icon: TickSmallIcon });
+    setTimeout(() => {
+      addToast({ text: 'Second toast', icon: InfoSmallIcon });
+    }, 500);
+    setTimeout(() => {
+      addToast({ text: 'Third toast', icon: TickSmallIcon });
+    }, 1000);
+  };
+
+  return (
+    <View style={{ gap: 12, padding: 16 }}>
+      <Button onPress={showMultiple}>Show Multiple Toasts</Button>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'Another toast message',
+          })
+        }
+      >
+        Add Another
+      </Button>
+    </View>
+  );
+};
+
+export const StackedToasts: Story = {
+  render: () => (
+    <ViewWrap>
+      <StackedToastsDemo />
+    </ViewWrap>
+  ),
+};
+
+const ProgrammaticDismissDemo = () => {
+  const { addToast, removeToast } = useToast();
+  const [lastId, setLastId] = React.useState<string | null>(null);
+
+  const showToast = () => {
+    const id = addToast({
+      text: 'This toast can be dismissed programmatically',
+      duration: 0, // Don't auto-dismiss
+    });
+    setLastId(id);
+  };
+
+  const dismissLast = () => {
+    if (lastId) {
+      removeToast(lastId);
+      setLastId(null);
+    }
+  };
+
+  return (
+    <View style={{ gap: 12, padding: 16 }}>
+      <Button onPress={showToast}>Show Persistent Toast</Button>
+      <Button onPress={dismissLast} disabled={!lastId}>
+        Dismiss Last Toast
+      </Button>
+    </View>
+  );
+};
+
+export const ProgrammaticDismiss: Story = {
+  render: () => (
+    <ViewWrap>
+      <ProgrammaticDismissDemo />
+    </ViewWrap>
+  ),
+};
+
+const DismissOptionsDemo = () => {
+  const { addToast } = useToast();
+
+  return (
+    <View style={{ gap: 12, padding: 16 }}>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'Toast without dismiss button',
+            showDismissIcon: false,
+            duration: 3000,
+          })
+        }
+      >
+        Hide Dismiss Icon
+      </Button>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'Tap anywhere to dismiss',
+            dismissOnPress: true,
+            onPress: () => console.log('Toast pressed'),
+            actionText: 'Action',
+            duration: 0,
+          })
+        }
+      >
+        Dismiss On Press
+      </Button>
+      <Button
+        onPress={() =>
+          addToast({
+            text: 'No dismiss button, press to dismiss',
+            showDismissIcon: false,
+            dismissOnPress: true,
+            onPress: () => console.log('Toast pressed'),
+            actionText: 'Action',
+            duration: 0,
+          })
+        }
+      >
+        Both Options
+      </Button>
+    </View>
+  );
+};
+
+export const DismissOptions: Story = {
+  render: () => (
+    <ViewWrap>
+      <DismissOptionsDemo />
+    </ViewWrap>
+  ),
+};

package/src/components/Toast/ToastItem.tsx

@@ -0,0 +1,200 @@
+import { CloseSmallIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { AccessibilityInfo, Platform, Pressable, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { StyleSheet, withUnistyles } from 'react-native-unistyles';
+import { scheduleOnRN } from 'react-native-worklets';
+import { BodyText } from '../BodyText';
+import { Icon } from '../Icon';
+import { Link } from '../Link';
+import { UnstyledIconButton } from '../UnstyledIconButton';
+import type { ToastInstance } from './Toast.props';
+
+const AnimatedView = Platform.OS === 'web' ? withUnistyles(Animated.View) : Animated.View;
+
+export interface ToastItemHandle {
+  dismiss: () => void;
+}
+
+interface Props {
+  toast: ToastInstance;
+  onClose: (id: string) => void;
+}
+
+const ToastItem = forwardRef<ToastItemHandle, Props>(({ toast, onClose }, ref) => {
+  const translateY = useSharedValue(30);
+  const opacity = useSharedValue(0);
+  const gestureTranslateY = useSharedValue(0);
+
+  useEffect(() => {
+    translateY.value = withTiming(0, { duration: 300 });
+    opacity.value = withTiming(1, { duration: 300 });
+
+    // Announce toast content to screen readers
+    // Use a slight delay to ensure iOS VoiceOver picks it up
+    const timer = setTimeout(() => {
+      const message = typeof toast.text === 'string' ? toast.text : 'Toast notification';
+      const announcement = toast.actionText ? `${message}, ${toast.actionText}` : message;
+      AccessibilityInfo.announceForAccessibility(announcement);
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, [toast.text, toast.actionText]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: translateY.value + gestureTranslateY.value }],
+    opacity: opacity.value,
+  }));
+
+  const handleDismiss = (fromGesture = false) => {
+    'worklet';
+    // Call onDismiss callback if provided
+    if (toast.onDismiss) {
+      scheduleOnRN(toast.onDismiss);
+    }
+    // animate out then call onClose
+    if (!fromGesture) {
+      gestureTranslateY.value = 0;
+    }
+    // Continue from current position and animate further down
+    translateY.value = withTiming(100, { duration: 250 });
+    opacity.value = withTiming(0, { duration: 250 }, finished => {
+      if (finished) scheduleOnRN(onClose, toast.id);
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    dismiss: handleDismiss,
+  }));
+
+  const panGesture = Gesture.Pan()
+    .onUpdate(event => {
+      // only allow downward drag
+      if (event.translationY > 0) {
+        gestureTranslateY.value = event.translationY;
+      }
+    })
+    .onEnd(event => {
+      if (event.translationY > 30 || event.velocityY > 800) {
+        handleDismiss(true);
+      } else {
+        // spring back to original position
+        gestureTranslateY.value = withSpring(0, {
+          damping: 20,
+          stiffness: 300,
+        });
+      }
+    });
+
+  const IconComp = toast.icon;
+  const showDismissIcon = toast.showDismissIcon !== false; // default true
+  const dismissOnPress = toast.dismissOnPress === true; // default false
+
+  const handlePress = () => {
+    if (toast.onPress) {
+      toast.onPress();
+      if (dismissOnPress) {
+        handleDismiss(false);
+      }
+    }
+  };
+
+  const toastContent = (
+    <View style={styles.inner}>
+      <View style={styles.content}>
+        {IconComp ? (
+          <View style={styles.iconWrap}>
+            <Icon as={IconComp} style={styles.icon} />
+          </View>
+        ) : null}
+        <BodyText inverted>{toast.text}</BodyText>
+      </View>
+      {toast.actionText ? (
+        <Link onPress={handlePress} showIcon={false} inverted>
+          {toast.actionText}
+        </Link>
+      ) : null}
+
+      {showDismissIcon ? (
+        <View style={styles.actions}>
+          <UnstyledIconButton
+            icon={CloseSmallIcon}
+            accessibilityLabel="Dismiss"
+            inverted
+            onPress={() => handleDismiss(false)}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+
+  return (
+    <GestureDetector gesture={panGesture}>
+      <AnimatedView
+        style={[styles.toast, animatedStyle]}
+        {...(Platform.OS === 'ios' && {
+          accessible: true,
+          accessibilityRole: 'alert',
+          accessibilityLiveRegion: 'polite',
+        })}
+        importantForAccessibility={Platform.OS === 'android' ? 'no-hide-descendants' : undefined}
+      >
+        {toast.onPress ? (
+          <Pressable onPress={handlePress} style={styles.pressable}>
+            {toastContent}
+          </Pressable>
+        ) : (
+          toastContent
+        )}
+      </AnimatedView>
+    </GestureDetector>
+  );
+});
+
+ToastItem.displayName = 'ToastItem';
+
+const styles = StyleSheet.create(theme => ({
+  toast: {
+    backgroundColor: theme.components.toast.backgroundColor,
+    borderRadius: theme.components.toast.borderRadius,
+    padding: theme.components.toast.padding,
+    width: '95%',
+  },
+  pressable: {
+    width: '100%',
+  },
+  inner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    gap: theme.components.toast.gap,
+  },
+  iconWrap: {
+    width: 24,
+    height: 24,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexShrink: 0,
+  },
+  icon: {
+    color: theme.color.icon.inverted,
+  },
+  content: {
+    flex: 1,
+    gap: theme.components.toast.text.gap,
+    flexDirection: 'row',
+    alignItems: 'center',
+    minWidth: 0,
+  },
+  actions: {
+    flexShrink: 0,
+  },
+}));
+
+export default ToastItem;

package/src/components/Toast/index.ts

@@ -0,0 +1,3 @@
+export { ToastProvider, useToast, useToastContext } from './Toast.context';
+export type { ToastInstance, ToastOptions } from './Toast.props';
+export { default as ToastItem } from './ToastItem';

package/src/components/index.ts

@@ -38,6 +38,7 @@ export * from './Link';
 export * from './List';
 export * from './Menu';
 export * from './Modal';
+export * from './PillGroup';
 export * from './ProgressStepper';
 export * from './Radio';
 export * from './RadioCard';
@@ -49,6 +50,7 @@ export * from './Switch';
 export * from './Tabs';
 export * from './Textarea';
 export * from './ThemedImage';
+export * from './Toast';
 export * from './ToggleButtonCard';
 
 export { FlatList, Image, KeyboardAvoidingView, ScrollView, SectionList, View } from 'react-native';

package/src/tokens/components/dark/checkbox.ts

@@ -28,6 +28,9 @@ export default {
     gap: 8,
     group: {
       gap: 12,
+      heading: {
+        gap: 2,
+      },
       stack: {
         gap: 12,
       },

package/src/tokens/components/dark/input.ts

@@ -14,6 +14,12 @@ export default {
     gap: 8,
   },
   gap: 6,
+  heading: {
+    gap: 12,
+    text: {
+      gap: 0,
+    },
+  },
   height: 48,
   label: {
     gap: 6,

package/src/tokens/components/dark/radio.ts

@@ -25,6 +25,9 @@ export default {
     gap: 8,
     group: {
       gap: 8,
+      heading: {
+        gap: 2,
+      },
       stack: {
         gap: 12,
       },

package/src/tokens/components/dark/table.ts

@@ -6,6 +6,7 @@ export default {
   borderRadius: 16,
   cell: {
     borderWidth: 1,
+    minHeight: 48,
     padding: 12,
   },
   emphasis: {
@@ -14,6 +15,7 @@ export default {
   headerCell: {
     borderWidth: 2,
     gap: 8,
+    height: 56,
     paddingHorizontal: 12,
     paddingVertical: 16,
   },

package/src/tokens/components/dark/toast.ts

@@ -5,9 +5,13 @@
 export default {
   backgroundColor: '#3f3f3f',
   borderRadius: 8,
-  gapHorizontal: 16,
+  bottomPosition: 32,
+  gap: 16,
   padding: 14,
   stack: {
-    gapHorizontal: 8,
+    gap: 12,
+  },
+  text: {
+    gap: 8,
   },
 } as const;

package/src/tokens/components/light/checkbox.ts

@@ -28,6 +28,9 @@ export default {
     gap: 12,
     group: {
       gap: 6,
+      heading: {
+        gap: 2,
+      },
       stack: {
         gap: 12,
       },

package/src/tokens/components/light/input.ts

@@ -14,6 +14,12 @@ export default {
     gap: 8,
   },
   gap: 6,
+  heading: {
+    gap: 12,
+    text: {
+      gap: 2,
+    },
+  },
   height: 48,
   label: {
     gap: 2,

package/src/tokens/components/light/radio.ts

@@ -25,6 +25,9 @@ export default {
     gap: 8,
     group: {
       gap: 12,
+      heading: {
+        gap: 2,
+      },
       stack: {
         gap: 12,
       },

package/src/tokens/components/light/table.ts

@@ -6,6 +6,7 @@ export default {
   borderRadius: 16,
   cell: {
     borderWidth: 1,
+    minHeight: 48,
     padding: 12,
   },
   emphasis: {
@@ -14,6 +15,7 @@ export default {
   headerCell: {
     borderWidth: 2,
     gap: 8,
+    height: 56,
     paddingHorizontal: 12,
     paddingVertical: 16,
   },

package/src/tokens/components/light/toast.ts

@@ -5,9 +5,13 @@
 export default {
   backgroundColor: '#101010',
   borderRadius: 8,
-  gapHorizontal: 16,
+  bottomPosition: 32,
+  gap: 16,
   padding: 14,
   stack: {
-    gapHorizontal: 8,
+    gap: 12,
+  },
+  text: {
+    gap: 8,
   },
 } as const;