@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.1

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

@@ -1,385 +0,0 @@
-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 LongToastDemo = () => {
-  const { addToast } = useToast();
-
-  return (
-    <View style={{ gap: 12, padding: 16 }}>
-      <Button
-        onPress={() =>
-          addToast({
-            text: "Couldn't update top-up. Please check your connection and try again.",
-            icon: WarningSmallIcon,
-            actionText: 'Retry',
-            onPress: () => console.log('Retry clicked'),
-          })
-        }
-      >
-        Show Long Toast
-      </Button>
-    </View>
-  );
-};
-
-export const LongToastMessage = {
-  render: () => (
-    <ViewWrap>
-      <LongToastDemo />
-    </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.figma.tsx

@@ -1,15 +0,0 @@
-import figma from '@figma/code-connect';
-import ToastItem from './ToastItem';
-
-
-figma.connect(ToastItem, 'https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR?node-id=7072%3A913', {
-  props: {
-    // No matching props could be found for these Figma properties:
-    // "link": figma.boolean('Link?'),
-    // "text": figma.string('Text'),
-    // "icon": figma.boolean('Icon?'),
-    // "icon24": figma.instance('Icon-24'),
-    // "dismiss": figma.boolean('Dismiss?')
-  },
-  example: props => <ToastItem  />,
-});

package/src/components/Toast/ToastItem.tsx

@@ -1,205 +0,0 @@
-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, translateY, opacity]);
-
-  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 style={styles.text}>
-          {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',
-    alignSelf: 'flex-start',
-    alignItems: 'flex-start',
-    flexShrink: 0,
-  },
-  icon: {
-    color: theme.color.icon.inverted,
-  },
-  content: {
-    flex: 1,
-    gap: theme.components.toast.text.gap,
-    flexDirection: 'row',
-    alignItems: 'center',
-    minWidth: 0,
-  },
-  text: { flexShrink: 1 },
-  actions: {
-    flexShrink: 0,
-    alignSelf: 'flex-start',
-  },
-}));
-
-export default ToastItem;

package/src/components/Toast/index.ts

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

package/src/components/ToggleButton/ToggleButton.props.tsx

@@ -1,7 +0,0 @@
-import type { PressableProps } from 'react-native';
-
-export interface ToggleButtonProps extends PressableProps {
-  text?: string;
-  toggled?: boolean;
-  onToggle?: (toggled: boolean) => void;
-}

package/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -1,35 +0,0 @@
-import { ToggleButton } from '.';
-import { Meta, StoryObj } from '@storybook/react-vite';
-
-const meta = {
-  title: 'Stories / ToggleButton',
-  component: ToggleButton,
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    text: {
-      type: 'string',
-      control: 'text',
-      description: 'The text of the button.',
-    },
-    toggled: {
-      type: 'boolean',
-      control: 'boolean',
-      description: 'Whether the button is toggled or not.',
-    },
-  },
-  args: {
-    text: 'Press me',
-    toggled: false,
-  },
-} satisfies Meta<typeof ToggleButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  render: ({ ...args }) => {
-    return <ToggleButton {...args} />;
-  },
-};

package/src/components/ToggleButton/ToggleButton.tsx

@@ -1,32 +0,0 @@
-import type { ToggleButtonProps } from './ToggleButton.props';
-import ToggleButtonTextComponent from './ToggleButtonText';
-import ToggleButtonIconComponent from './ToggleButtonIcon';
-import { createButton } from '@gluestack-ui/button';
-import ToggleButtonRoot from './ToggleButtonRoot';
-
-const ToggleButtonComponent = createButton({
-  Root: ToggleButtonRoot,
-  Group: () => null, // No group for ToggleButton
-  Icon: ToggleButtonIconComponent,
-  Spinner: () => null, // No spinner for ToggleButton
-  Text: ToggleButtonTextComponent,
-});
-
-export const ToggleButtonText = ToggleButtonComponent.Text;
-export const ToggleButtonIcon = ToggleButtonComponent.Icon;
-
-ToggleButtonText.displayName = 'ToggleButtonText';
-ToggleButtonIcon.displayName = 'ToggleButtonIcon';
-
-const ToggleButton = ({ text, toggled = false, onToggle, ...props }: ToggleButtonProps) => {
-  return (
-    <ToggleButtonComponent toggled={toggled} onToggle={onToggle} {...props}>
-      {toggled && <ToggleButtonIcon toggled={toggled} />}
-      <ToggleButtonText toggled={toggled}>{text}</ToggleButtonText>
-    </ToggleButtonComponent>
-  );
-};
-
-ToggleButton.displayName = 'ToggleButton';
-
-export default ToggleButton;