@oxyhq/bloom 0.1.4 → 0.1.6

package/src/toast/index.tsx

@@ -0,0 +1,88 @@
+import React, { isValidElement } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { nanoid } from 'nanoid/non-secure';
+import { toast as sonner, Toaster } from 'sonner-native';
+
+import { DURATION } from './const';
+import {
+  Icon as ToastIcon,
+  Outer as BaseOuter,
+  Text as ToastText,
+  ToastConfigProvider,
+} from './Toast';
+import type { BaseToastOptions } from './types';
+
+export { DURATION } from './const';
+export { Action, Icon, Outer, Text, ToastConfigProvider } from './Toast';
+export type { ToastType, BaseToastOptions } from './types';
+
+/**
+ * Toasts are rendered in a global outlet, which is placed at the top of the
+ * component tree.
+ */
+export function ToastOutlet() {
+  return <Toaster pauseWhenPageIsHidden gap={8} />;
+}
+
+function OuterWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <View style={wrapperStyles.container}>
+      <BaseOuter>{children}</BaseOuter>
+    </View>
+  );
+}
+
+/**
+ * Access the full Sonner API
+ */
+export const api = sonner;
+
+/**
+ * Show a toast notification.
+ *
+ * Pass a string for a simple text toast, or a React element for a custom toast.
+ */
+export function show(
+  content: React.ReactNode,
+  { type = 'default', ...options }: BaseToastOptions = {},
+) {
+  const id = nanoid();
+
+  if (typeof content === 'string') {
+    sonner.custom(
+      <ToastConfigProvider id={id} type={type}>
+        <OuterWrapper>
+          <ToastIcon />
+          <ToastText>{content}</ToastText>
+        </OuterWrapper>
+      </ToastConfigProvider>,
+      {
+        ...options,
+        id,
+        duration: options?.duration ?? DURATION,
+      },
+    );
+  } else if (isValidElement(content)) {
+    sonner.custom(
+      <ToastConfigProvider id={id} type={type}>
+        {content}
+      </ToastConfigProvider>,
+      {
+        ...options,
+        id,
+        duration: options?.duration ?? DURATION,
+      },
+    );
+  } else {
+    throw new Error(
+      `Toast can be a string or a React element, got ${typeof content}`,
+    );
+  }
+}
+
+const wrapperStyles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 20,
+    width: '100%',
+  },
+});

package/src/toast/index.web.tsx

@@ -0,0 +1,81 @@
+import React, { isValidElement } from 'react';
+import { nanoid } from 'nanoid/non-secure';
+import { toast as sonner, Toaster } from 'sonner';
+
+import { DURATION } from './const';
+import {
+  Icon as ToastIcon,
+  Outer as ToastOuter,
+  Text as ToastText,
+  ToastConfigProvider,
+} from './Toast';
+import type { BaseToastOptions } from './types';
+
+export { DURATION } from './const';
+export { Action, Icon, Outer, Text, ToastConfigProvider } from './Toast';
+export type { ToastType, BaseToastOptions } from './types';
+
+/**
+ * Toasts are rendered in a global outlet, which is placed at the top of the
+ * component tree.
+ */
+export function ToastOutlet() {
+  return (
+    <Toaster
+      position="bottom-left"
+      gap={8}
+      offset={20}
+      mobileOffset={20}
+    />
+  );
+}
+
+/**
+ * Access the full Sonner API
+ */
+export const api: typeof sonner = sonner;
+
+/**
+ * Show a toast notification.
+ *
+ * Pass a string for a simple text toast, or a React element for a custom toast.
+ */
+export function show(
+  content: React.ReactNode,
+  { type = 'default', ...options }: BaseToastOptions = {},
+) {
+  const id = nanoid();
+
+  if (typeof content === 'string') {
+    sonner(
+      <ToastConfigProvider id={id} type={type}>
+        <ToastOuter>
+          <ToastIcon />
+          <ToastText>{content}</ToastText>
+        </ToastOuter>
+      </ToastConfigProvider>,
+      {
+        ...options,
+        unstyled: true,
+        id,
+        duration: options?.duration ?? DURATION,
+      },
+    );
+  } else if (isValidElement(content)) {
+    sonner(
+      <ToastConfigProvider id={id} type={type}>
+        {content}
+      </ToastConfigProvider>,
+      {
+        ...options,
+        unstyled: true,
+        id,
+        duration: options?.duration ?? DURATION,
+      },
+    );
+  } else {
+    throw new Error(
+      `Toast can be a string or a React element, got ${typeof content}`,
+    );
+  }
+}

package/src/toast/sonner/index.ts

@@ -0,0 +1,3 @@
+import { toast } from 'sonner-native';
+
+export const dismiss = toast.dismiss;

package/src/toast/sonner/index.web.ts

@@ -0,0 +1,3 @@
+import { toast } from 'sonner';
+
+export const dismiss = toast.dismiss;

package/src/toast/types.ts

@@ -0,0 +1,10 @@
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info';
+
+export interface BaseToastOptions {
+  duration?: number;
+  dismissible?: boolean;
+  type?: ToastType;
+  onDismiss?: () => void;
+  onPress?: () => void;
+  onAutoClose?: () => void;
+}

package/src/tooltip/TextBubble.tsx

@@ -0,0 +1,34 @@
+/**
+ * Shared TextBubble factory for Tooltip (native + web).
+ *
+ * Returns a TextBubble component bound to the platform-specific Content
+ * component, avoiding circular imports between TextBubble and the
+ * platform entry points.
+ */
+import { Children } from 'react';
+import { View } from 'react-native';
+
+import { atoms as a } from '../styles';
+import { Text } from '../typography';
+
+type ContentComponent = React.ComponentType<{
+  children: React.ReactNode;
+  label: string;
+}>;
+
+export function createTextBubble(Content: ContentComponent) {
+  return function TextBubble({ children }: { children: React.ReactNode }) {
+    const c = Children.toArray(children);
+    return (
+      <Content label={c.join(' ')}>
+        <View style={[a.gap_xs]}>
+          {c.map((child, i) => (
+            <Text key={i} style={[a.text_sm, a.leading_snug]}>
+              {child}
+            </Text>
+          ))}
+        </View>
+      </Content>
+    );
+  };
+}

package/src/tooltip/const.ts

@@ -0,0 +1,6 @@
+import { atoms as a } from '../styles';
+
+export const BUBBLE_MAX_WIDTH = 240;
+export const ARROW_SIZE = 12;
+export const ARROW_HALF_SIZE = ARROW_SIZE / 2;
+export const MIN_EDGE_SPACE = a.px_lg.paddingHorizontal;

package/src/tooltip/index.tsx

@@ -0,0 +1,393 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import Animated, { Easing, ZoomIn } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useTheme } from '../theme/use-theme';
+import { atoms as a } from '../styles';
+import { Portal } from '../portal';
+import {
+  ARROW_HALF_SIZE,
+  ARROW_SIZE,
+  BUBBLE_MAX_WIDTH,
+  MIN_EDGE_SPACE,
+} from './const';
+import { createTextBubble } from './TextBubble';
+
+/**
+ * These are native specific values, not shared with web
+ */
+const ARROW_VISUAL_OFFSET = ARROW_SIZE / 1.25;
+const BUBBLE_SHADOW_OFFSET = ARROW_SIZE / 3;
+
+type TooltipContextType = {
+  position: 'top' | 'bottom';
+  visible: boolean;
+  onVisibleChange: (visible: boolean) => void;
+};
+
+type TargetMeasurements = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+type TargetContextType = {
+  targetMeasurements: TargetMeasurements | undefined;
+  setTargetMeasurements: (measurements: TargetMeasurements) => void;
+  shouldMeasure: boolean;
+};
+
+const TooltipContext = createContext<TooltipContextType>({
+  position: 'bottom',
+  visible: false,
+  onVisibleChange: () => {},
+});
+TooltipContext.displayName = 'TooltipContext';
+
+const TargetContext = createContext<TargetContextType>({
+  targetMeasurements: undefined,
+  setTargetMeasurements: () => {},
+  shouldMeasure: false,
+});
+TargetContext.displayName = 'TargetContext';
+
+/**
+ * Provider for Tooltip component. Only needed when you need to position the
+ * tooltip relative to a container, such as in a sheet.
+ *
+ * Only really necessary on iOS but can work on Android.
+ */
+export function SheetCompatProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <>{children}</>;
+}
+SheetCompatProvider.displayName = 'TooltipSheetCompatProvider';
+
+export function Outer({
+  children,
+  position = 'bottom',
+  visible: requestVisible,
+  onVisibleChange,
+}: {
+  children: React.ReactNode;
+  position?: 'top' | 'bottom';
+  visible: boolean;
+  onVisibleChange: (visible: boolean) => void;
+}) {
+  /**
+   * Lagging state to track the externally-controlled visibility of the
+   * tooltip, which needs to wait for the target to be measured before
+   * actually being shown.
+   */
+  const [visible, setVisible] = useState<boolean>(false);
+  const [targetMeasurements, setTargetMeasurements] = useState<
+    TargetMeasurements | undefined
+  >(undefined);
+
+  if (requestVisible && !visible && targetMeasurements) {
+    setVisible(true);
+  } else if (!requestVisible && visible) {
+    setVisible(false);
+    setTargetMeasurements(undefined);
+  }
+
+  const ctx = useMemo(
+    () => ({ position, visible, onVisibleChange }),
+    [position, visible, onVisibleChange],
+  );
+  const targetCtx = useMemo(
+    () => ({
+      targetMeasurements,
+      setTargetMeasurements,
+      shouldMeasure: requestVisible,
+    }),
+    [requestVisible, targetMeasurements, setTargetMeasurements],
+  );
+
+  return (
+    <TooltipContext.Provider value={ctx}>
+      <TargetContext.Provider value={targetCtx}>
+        {children}
+      </TargetContext.Provider>
+    </TooltipContext.Provider>
+  );
+}
+
+export function Target({ children }: { children: React.ReactNode }) {
+  const { shouldMeasure, setTargetMeasurements } = useContext(TargetContext);
+  const [hasLayedOut, setHasLayedOut] = useState(false);
+  const targetRef = useRef<View>(null);
+
+  useEffect(() => {
+    if (!shouldMeasure || !hasLayedOut) return;
+
+    targetRef.current?.measure((_x, _y, width, height, x, y) => {
+      if (x !== undefined && y !== undefined && width && height) {
+        setTargetMeasurements({ x, y, width, height });
+      }
+    });
+  }, [shouldMeasure, setTargetMeasurements, hasLayedOut]);
+
+  return (
+    <View
+      collapsable={false}
+      ref={targetRef}
+      onLayout={() => setHasLayedOut(true)}>
+      {children}
+    </View>
+  );
+}
+
+export function Content({
+  children,
+  label,
+}: {
+  children: React.ReactNode;
+  label: string;
+}) {
+  const { position, visible, onVisibleChange } = useContext(TooltipContext);
+  const { targetMeasurements } = useContext(TargetContext);
+  const requestClose = useCallback(() => {
+    onVisibleChange(false);
+  }, [onVisibleChange]);
+
+  if (!visible || !targetMeasurements) return null;
+
+  return (
+    <Portal>
+      <Bubble
+        label={label}
+        position={position}
+        targetMeasurements={targetMeasurements}
+        requestClose={requestClose}>
+        {children}
+      </Bubble>
+    </Portal>
+  );
+}
+
+function Bubble({
+  children,
+  label,
+  position,
+  requestClose,
+  targetMeasurements,
+}: {
+  children: React.ReactNode;
+  label: string;
+  position: TooltipContextType['position'];
+  requestClose: () => void;
+  targetMeasurements: TargetMeasurements;
+}) {
+  const theme = useTheme();
+  const insets = useSafeAreaInsets();
+  const dimensions = useWindowDimensions();
+  const [bubbleMeasurements, setBubbleMeasurements] = useState<
+    | {
+        width: number;
+        height: number;
+      }
+    | undefined
+  >(undefined);
+
+  const bubbleBg = theme.isDark
+    ? { backgroundColor: theme.colors.backgroundSecondary }
+    : { backgroundColor: theme.colors.background };
+
+  const coords = useMemo(() => {
+    if (!bubbleMeasurements)
+      return {
+        computedPosition: position,
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        tipTop: 0,
+        tipLeft: 0,
+      };
+
+    const { width: ww, height: wh } = dimensions;
+    const maxTop = insets.top;
+    const maxBottom = wh - insets.bottom;
+    const { width: cw, height: ch } = bubbleMeasurements;
+    const minLeft = MIN_EDGE_SPACE;
+    const maxLeft = ww - minLeft;
+
+    let computedPosition: 'top' | 'bottom' = position;
+    let top = targetMeasurements.y + targetMeasurements.height;
+    let left = Math.max(
+      minLeft,
+      targetMeasurements.x + targetMeasurements.width / 2 - cw / 2,
+    );
+    const tipTranslate = ARROW_HALF_SIZE * -1;
+    let tipTop = tipTranslate;
+
+    if (left + cw > maxLeft) {
+      left -= left + cw - maxLeft;
+    }
+
+    const tipLeft =
+      targetMeasurements.x -
+      left +
+      targetMeasurements.width / 2 -
+      ARROW_HALF_SIZE;
+
+    let bottom = top + ch;
+
+    function positionTop() {
+      top = top - ch - targetMeasurements.height;
+      bottom = top + ch;
+      tipTop = tipTop + ch;
+      computedPosition = 'top';
+    }
+
+    function positionBottom() {
+      top = targetMeasurements.y + targetMeasurements.height;
+      bottom = top + ch;
+      tipTop = tipTranslate;
+      computedPosition = 'bottom';
+    }
+
+    if (position === 'top') {
+      positionTop();
+      if (top < maxTop) {
+        positionBottom();
+      }
+    } else {
+      if (bottom > maxBottom) {
+        positionTop();
+      }
+    }
+
+    if (computedPosition === 'bottom') {
+      top += ARROW_VISUAL_OFFSET;
+      bottom += ARROW_VISUAL_OFFSET;
+    } else {
+      top -= ARROW_VISUAL_OFFSET;
+      bottom -= ARROW_VISUAL_OFFSET;
+    }
+
+    return {
+      computedPosition,
+      top,
+      bottom,
+      left,
+      right: left + cw,
+      tipTop,
+      tipLeft,
+    };
+  }, [position, targetMeasurements, bubbleMeasurements, insets, dimensions]);
+
+  const requestCloseWrapped = useCallback(() => {
+    setBubbleMeasurements(undefined);
+    requestClose();
+  }, [requestClose]);
+
+  return (
+    <>
+      {/* Backdrop to close on outside tap */}
+      <Pressable
+        style={StyleSheet.absoluteFill}
+        onPress={requestCloseWrapped}
+        accessibilityRole="none"
+      />
+      <View
+        accessible
+        role="alert"
+        accessibilityHint=""
+        accessibilityLabel={label}
+        importantForAccessibility="yes"
+        accessibilityViewIsModal
+        style={[
+          a.absolute,
+          a.align_start,
+          {
+            width: BUBBLE_MAX_WIDTH,
+            opacity: bubbleMeasurements ? 1 : 0,
+            top: coords.top,
+            left: coords.left,
+          },
+        ]}>
+        <Animated.View
+          entering={ZoomIn.easing(Easing.out(Easing.exp))}
+          style={{ transformOrigin: opposite(position) }}>
+          <View
+            style={[
+              a.absolute,
+              a.top_0,
+              a.z_10,
+              bubbleBg,
+              {
+                borderTopLeftRadius: a.rounded_2xs.borderRadius,
+                borderBottomRightRadius: a.rounded_2xs.borderRadius,
+                width: ARROW_SIZE,
+                height: ARROW_SIZE,
+                transform: [{ rotate: '45deg' }],
+                top: coords.tipTop,
+                left: coords.tipLeft,
+              },
+            ]}
+          />
+          <View
+            style={[
+              a.px_md,
+              a.py_sm,
+              a.rounded_sm,
+              bubbleBg,
+              {
+                shadowColor: theme.colors.shadow,
+                shadowOpacity: 0.2,
+                shadowRadius: 12,
+                shadowOffset: {
+                  width: 0,
+                  height:
+                    BUBBLE_SHADOW_OFFSET *
+                    (coords.computedPosition === 'bottom' ? -1 : 1),
+                },
+                elevation: 8,
+              },
+            ]}
+            onLayout={(e) => {
+              setBubbleMeasurements({
+                width: e.nativeEvent.layout.width,
+                height: e.nativeEvent.layout.height,
+              });
+            }}>
+            {children}
+          </View>
+        </Animated.View>
+      </View>
+    </>
+  );
+}
+
+function opposite(position: 'top' | 'bottom'): string {
+  switch (position) {
+    case 'top':
+      return 'center bottom';
+    case 'bottom':
+      return 'center top';
+    default:
+      return 'center';
+  }
+}
+
+export const TextBubble = createTextBubble(Content);