@wireservers-ui/react-natives 0.1.0

package/src/toast/toast-provider.tsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type {
+  ToastConfig,
+  ToastContextValue,
+  ToastPlacement,
+  ToastStatus,
+  ToastVariant,
+} from './types';
+import { toastContainerStyle } from './styles';
+import { Toast } from './toast';
+import { ToastTitle } from './toast-title';
+import { ToastDescription } from './toast-description';
+
+export const [ToastContextProvider, useToastContext] =
+  createComponentContext<ToastContextValue>('Toast');
+
+let idCounter = 0;
+function generateId(): string {
+  idCounter += 1;
+  return `toast-${idCounter}-${Date.now()}`;
+}
+
+export const ToastProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [toasts, setToasts] = React.useState<ToastConfig[]>([]);
+  const timersRef = React.useRef<Map<string, ReturnType<typeof setTimeout>>>(
+    new Map(),
+  );
+
+  const close = React.useCallback((id: string) => {
+    const timer = timersRef.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timersRef.current.delete(id);
+    }
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const closeAll = React.useCallback(() => {
+    timersRef.current.forEach((timer) => clearTimeout(timer));
+    timersRef.current.clear();
+    setToasts([]);
+  }, []);
+
+  const show = React.useCallback(
+    (config: Omit<ToastConfig, 'id'>): string => {
+      const id = generateId();
+      const duration = config.duration ?? 5000;
+
+      const toast: ToastConfig = {
+        ...config,
+        id,
+        status: config.status ?? 'info',
+        variant: config.variant ?? 'subtle',
+        placement: config.placement ?? 'top',
+      };
+
+      setToasts((prev) => [...prev, toast]);
+
+      if (duration > 0) {
+        const timer = setTimeout(() => {
+          close(id);
+        }, duration);
+        timersRef.current.set(id, timer);
+      }
+
+      return id;
+    },
+    [close],
+  );
+
+  React.useEffect(() => {
+    return () => {
+      timersRef.current.forEach((timer) => clearTimeout(timer));
+    };
+  }, []);
+
+  // Group toasts by placement
+  const grouped = React.useMemo(() => {
+    const map = new Map<ToastPlacement, ToastConfig[]>();
+    toasts.forEach((toast) => {
+      const placement = toast.placement ?? 'top';
+      if (!map.has(placement)) {
+        map.set(placement, []);
+      }
+      map.get(placement)!.push(toast);
+    });
+    return map;
+  }, [toasts]);
+
+  const contextValue = React.useMemo(
+    () => ({ show, close, closeAll }),
+    [show, close, closeAll],
+  );
+
+  return (
+    <ToastContextProvider value={contextValue}>
+      {children}
+      {Array.from(grouped.entries()).map(([placement, placementToasts]) => (
+        <View
+          key={placement}
+          pointerEvents="box-none"
+          className={toastContainerStyle({ placement })}
+        >
+          {placementToasts.map((toast) => {
+            if (toast.render) {
+              return (
+                <React.Fragment key={toast.id}>
+                  {toast.render()}
+                </React.Fragment>
+              );
+            }
+
+            return (
+              <Toast
+                key={toast.id}
+                status={toast.status as ToastStatus}
+                variant={toast.variant as ToastVariant}
+              >
+                {toast.title && <ToastTitle>{toast.title}</ToastTitle>}
+                {toast.description && (
+                  <ToastDescription>{toast.description}</ToastDescription>
+                )}
+              </Toast>
+            );
+          })}
+        </View>
+      ))}
+    </ToastContextProvider>
+  );
+};
+
+ToastProvider.displayName = 'ToastProvider';

package/src/toast/toast-title.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Text } from 'react-native';
+import { useToastItemContext } from './toast';
+import type { ToastTitleProps } from './types';
+import { toastTitleStyle } from './styles';
+
+export const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  ToastTitleProps
+>(({ className, ...props }, ref) => {
+  const { status, variant } = useToastItemContext();
+
+  return (
+    <Text
+      ref={ref}
+      className={toastTitleStyle({ status, variant, class: className })}
+      {...props}
+    />
+  );
+});
+
+ToastTitle.displayName = 'ToastTitle';

package/src/toast/toast.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { View } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { ToastProps, ToastStatus, ToastVariant } from './types';
+import { toastStyle } from './styles';
+
+export interface ToastItemContextValue {
+  status: ToastStatus;
+  variant: ToastVariant;
+}
+
+export const [ToastItemProvider, useToastItemContext] =
+  createComponentContext<ToastItemContextValue>('ToastItem');
+
+export const Toast = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ToastProps
+>(
+  (
+    {
+      className,
+      status = 'info',
+      variant = 'subtle',
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <ToastItemProvider value={{ status, variant }}>
+        <View
+          ref={ref}
+          className={toastStyle({ status, variant, class: className })}
+          {...props}
+        >
+          {children}
+        </View>
+      </ToastItemProvider>
+    );
+  },
+);
+
+Toast.displayName = 'Toast';

package/src/toast/types.ts

@@ -0,0 +1,50 @@
+import type { View, Text as RNText } from 'react-native';
+
+export type ToastPlacement =
+  | 'top'
+  | 'top-right'
+  | 'top-left'
+  | 'bottom'
+  | 'bottom-right'
+  | 'bottom-left';
+
+export type ToastStatus = 'info' | 'success' | 'warning' | 'error';
+
+export type ToastVariant = 'solid' | 'subtle' | 'outline';
+
+export interface ToastConfig {
+  id: string;
+  title?: string;
+  description?: string;
+  status?: ToastStatus;
+  variant?: ToastVariant;
+  duration?: number;
+  placement?: ToastPlacement;
+  isClosable?: boolean;
+  render?: () => React.ReactNode;
+}
+
+export interface UseToastReturn {
+  show(config: Omit<ToastConfig, 'id'>): string;
+  close(id: string): void;
+  closeAll(): void;
+}
+
+export type ToastContextValue = UseToastReturn;
+
+export interface ToastProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  status?: ToastStatus;
+  variant?: ToastVariant;
+}
+
+export interface ToastTitleProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}
+
+export interface ToastDescriptionProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}

package/src/toast/use-toast.ts

@@ -0,0 +1,7 @@
+import { useToastContext } from './toast-provider';
+import type { UseToastReturn } from './types';
+
+export function useToast(): UseToastReturn {
+  const { show, close, closeAll } = useToastContext();
+  return { show, close, closeAll };
+}

package/src/toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle } from './toggle';
+export type { ToggleProps, ToggleVariant, ToggleSize } from './types';

package/src/toggle/styles.ts

@@ -0,0 +1,30 @@
+import { tv } from 'tailwind-variants';
+
+export const toggleStyle = tv({
+  base: 'items-center justify-center rounded-lg',
+  variants: {
+    variant: {
+      outline: 'border border-outline-300 bg-transparent',
+      solid: 'bg-background-100',
+    },
+    size: {
+      sm: 'h-8 px-2.5',
+      md: 'h-10 px-3',
+      lg: 'h-12 px-4',
+    },
+    isPressed: {
+      true: '',
+    },
+    isDisabled: {
+      true: 'opacity-50',
+    },
+  },
+  compoundVariants: [
+    { variant: 'outline', isPressed: true, class: 'bg-primary-50 border-primary-500' },
+    { variant: 'solid', isPressed: true, class: 'bg-primary-500' },
+  ],
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
+});

package/src/toggle/toggle.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Pressable } from 'react-native';
+import type { ToggleProps } from './types';
+import { toggleStyle } from './styles';
+
+export const Toggle = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ToggleProps
+>(({ className, variant, size, isPressed = false, onPressedChange, isDisabled, children, ...props }, ref) => {
+  return (
+    <Pressable
+      ref={ref}
+      disabled={isDisabled}
+      onPress={() => onPressedChange?.(!isPressed)}
+      className={toggleStyle({ variant, size, isPressed, isDisabled, class: className })}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isPressed }}
+      {...props}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+Toggle.displayName = 'Toggle';

package/src/toggle/types.ts

@@ -0,0 +1,15 @@
+import type { Pressable } from 'react-native';
+
+export type ToggleVariant = 'outline' | 'solid';
+export type ToggleSize = 'sm' | 'md' | 'lg';
+
+export interface ToggleProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'children'> {
+  className?: string;
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+  isPressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  isDisabled?: boolean;
+  children: React.ReactNode;
+}

package/src/toggle-group/index.ts

@@ -0,0 +1,2 @@
+export { ToggleGroup, ToggleGroupProvider, useToggleGroupContext, ToggleGroupItem } from './toggle-group';
+export type { ToggleGroupProps, ToggleGroupItemProps, ToggleGroupType, ToggleGroupVariant, ToggleGroupSize, ToggleGroupContextValue } from './types';

package/src/toggle-group/styles.ts

@@ -0,0 +1,35 @@
+import { tv } from 'tailwind-variants';
+
+export const toggleGroupStyle = tv({
+  base: 'flex-row items-center rounded-lg border border-outline-200 overflow-hidden',
+  variants: {},
+});
+
+export const toggleGroupItemStyle = tv({
+  base: 'items-center justify-center border-r border-outline-200 last:border-r-0',
+  variants: {
+    variant: {
+      outline: 'bg-transparent',
+      solid: 'bg-background-50',
+    },
+    size: {
+      sm: 'h-8 px-2.5',
+      md: 'h-10 px-3',
+      lg: 'h-12 px-4',
+    },
+    isSelected: {
+      true: '',
+    },
+    isDisabled: {
+      true: 'opacity-50',
+    },
+  },
+  compoundVariants: [
+    { variant: 'outline', isSelected: true, class: 'bg-primary-50' },
+    { variant: 'solid', isSelected: true, class: 'bg-primary-500' },
+  ],
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md',
+  },
+});

package/src/toggle-group/toggle-group.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, Pressable } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { ToggleGroupProps, ToggleGroupItemProps, ToggleGroupContextValue } from './types';
+import { toggleGroupStyle, toggleGroupItemStyle } from './styles';
+
+export const [ToggleGroupProvider, useToggleGroupContext] =
+  createComponentContext<ToggleGroupContextValue>('ToggleGroup');
+
+export const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof View>,
+  ToggleGroupProps
+>(({ className, type = 'single', value, onValueChange, variant = 'outline', size = 'md', children, ...props }, ref) => {
+  const normalizedValue = Array.isArray(value) ? value : value ? [value] : [];
+
+  const handleValueChange = (itemValue: string) => {
+    if (type === 'single') {
+      onValueChange?.(itemValue);
+    } else {
+      const newValue = normalizedValue.includes(itemValue)
+        ? normalizedValue.filter((v) => v !== itemValue)
+        : [...normalizedValue, itemValue];
+      onValueChange?.(newValue);
+    }
+  };
+
+  return (
+    <ToggleGroupProvider value={{ type, value: normalizedValue, onValueChange: handleValueChange, variant, size }}>
+      <View ref={ref} className={toggleGroupStyle({ class: className })} {...props}>
+        {children}
+      </View>
+    </ToggleGroupProvider>
+  );
+});
+
+ToggleGroup.displayName = 'ToggleGroup';
+
+export const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  ToggleGroupItemProps
+>(({ className, value, isDisabled, children, ...props }, ref) => {
+  const { value: groupValue, onValueChange, variant, size } = useToggleGroupContext();
+  const isSelected = groupValue.includes(value);
+
+  return (
+    <Pressable
+      ref={ref}
+      disabled={isDisabled}
+      onPress={() => onValueChange(value)}
+      className={toggleGroupItemStyle({ variant, size, isSelected, isDisabled, class: className })}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isSelected }}
+      {...props}
+    >
+      {children}
+    </Pressable>
+  );
+});
+
+ToggleGroupItem.displayName = 'ToggleGroupItem';

package/src/toggle-group/types.ts

@@ -0,0 +1,29 @@
+import type { View, Pressable } from 'react-native';
+
+export type ToggleGroupType = 'single' | 'multiple';
+export type ToggleGroupVariant = 'outline' | 'solid';
+export type ToggleGroupSize = 'sm' | 'md' | 'lg';
+
+export interface ToggleGroupContextValue {
+  type: ToggleGroupType;
+  value: string[];
+  onValueChange: (value: string) => void;
+  variant: ToggleGroupVariant;
+  size: ToggleGroupSize;
+}
+
+export interface ToggleGroupProps extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+  type?: ToggleGroupType;
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  variant?: ToggleGroupVariant;
+  size?: ToggleGroupSize;
+}
+
+export interface ToggleGroupItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Pressable>, 'children'> {
+  className?: string;
+  value: string;
+  isDisabled?: boolean;
+  children: React.ReactNode;
+}

package/src/tooltip/index.ts

@@ -0,0 +1,11 @@
+export { Tooltip } from './tooltip';
+export { TooltipContent } from './tooltip-content';
+export { TooltipText } from './tooltip-text';
+
+export type {
+  TooltipProps,
+  TooltipContentProps,
+  TooltipTextProps,
+  TooltipPlacement,
+  TooltipContextValue,
+} from './types';

package/src/tooltip/styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const tooltipContentStyle = tv({
+  base: 'bg-background-950 rounded-md px-3 py-1.5 shadow-hard-2 min-w-max',
+});
+
+export const tooltipTextStyle = tv({
+  base: 'text-typography-0 text-xs',
+});

package/src/tooltip/tooltip-content.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+import type { TooltipContentProps } from './types';
+import { tooltipContentStyle } from './styles';
+
+export const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof View>,
+  TooltipContentProps
+>(({ className, ...props }, ref) => {
+  return (
+    <View
+      ref={ref}
+      className={tooltipContentStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+TooltipContent.displayName = 'TooltipContent';

package/src/tooltip/tooltip-text.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { TooltipTextProps } from './types';
+import { tooltipTextStyle } from './styles';
+
+export const TooltipText = React.forwardRef<
+  React.ElementRef<typeof Text>,
+  TooltipTextProps
+>(({ className, ...props }, ref) => {
+  return (
+    <Text
+      ref={ref}
+      className={tooltipTextStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+TooltipText.displayName = 'TooltipText';

package/src/tooltip/tooltip.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { View, type LayoutRectangle } from 'react-native';
+import { createComponentContext } from '../utils/create-context';
+import type { TooltipProps, TooltipContextValue, TooltipPlacement } from './types';
+
+export const [TooltipProvider, useTooltipContext] =
+  createComponentContext<TooltipContextValue>('Tooltip');
+
+const TOOLTIP_OFFSET = 8;
+
+function getTooltipPosition(
+  triggerLayout: LayoutRectangle,
+  placement: TooltipPlacement,
+) {
+  switch (placement) {
+    case 'top':
+      return {
+        bottom: triggerLayout.height + TOOLTIP_OFFSET,
+        left: 0,
+      };
+    case 'bottom':
+      return {
+        top: triggerLayout.height + TOOLTIP_OFFSET,
+        left: 0,
+      };
+    case 'left':
+      return {
+        right: triggerLayout.width + TOOLTIP_OFFSET,
+        top: 0,
+      };
+    case 'right':
+      return {
+        left: triggerLayout.width + TOOLTIP_OFFSET,
+        top: 0,
+      };
+  }
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  placement = 'bottom',
+  isOpen: isOpenProp,
+  defaultIsOpen = false,
+  onOpen,
+  onClose,
+  trigger,
+  children,
+}) => {
+  const [isOpenState, setIsOpenState] = React.useState(defaultIsOpen);
+  const triggerRef = React.useRef<View>(null);
+  const [triggerLayout, setTriggerLayout] =
+    React.useState<LayoutRectangle | null>(null);
+
+  const isControlled = isOpenProp !== undefined;
+  const isOpen = isControlled ? isOpenProp : isOpenState;
+
+  const handleOpen = React.useCallback(() => {
+    if (!isControlled) {
+      setIsOpenState(true);
+    }
+    onOpen?.();
+  }, [isControlled, onOpen]);
+
+  const handleClose = React.useCallback(() => {
+    if (!isControlled) {
+      setIsOpenState(false);
+    }
+    onClose?.();
+  }, [isControlled, onClose]);
+
+  const handleToggle = React.useCallback(() => {
+    if (isOpen) {
+      handleClose();
+    } else {
+      handleOpen();
+    }
+  }, [isOpen, handleOpen, handleClose]);
+
+  const handleTriggerLayout = React.useCallback(() => {
+    if (triggerRef.current) {
+      triggerRef.current.measure((_x, _y, width, height) => {
+        setTriggerLayout({ x: 0, y: 0, width, height });
+      });
+    }
+  }, []);
+
+  React.useEffect(() => {
+    if (isOpen) {
+      handleTriggerLayout();
+    }
+  }, [isOpen, handleTriggerLayout]);
+
+  const positionStyle = triggerLayout
+    ? getTooltipPosition(triggerLayout, placement)
+    : {};
+
+  return (
+    <TooltipProvider value={{ placement, isOpen, onClose: handleClose }}>
+      <View style={{ position: 'relative', zIndex: isOpen ? 9999 : 0 }}>
+        {trigger({
+          ref: triggerRef,
+          onPress: handleToggle,
+          onLongPress: handleOpen,
+          onMouseEnter: handleOpen,
+          onMouseLeave: handleClose,
+        })}
+        {isOpen && (
+          <View style={{ position: 'absolute', zIndex: 9999, ...positionStyle }} pointerEvents="box-none">
+            {children}
+          </View>
+        )}
+      </View>
+    </TooltipProvider>
+  );
+};
+
+Tooltip.displayName = 'Tooltip';

package/src/tooltip/types.ts

@@ -0,0 +1,35 @@
+import type { View, Text as RNText } from 'react-native';
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps {
+  placement?: TooltipPlacement;
+  isOpen?: boolean;
+  defaultIsOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  trigger: (props: {
+    ref: React.Ref<any>;
+    onPress: () => void;
+    onLongPress: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+  }) => React.ReactNode;
+  children: React.ReactNode;
+}
+
+export interface TooltipContextValue {
+  placement: TooltipPlacement;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export interface TooltipContentProps
+  extends React.ComponentPropsWithoutRef<typeof View> {
+  className?: string;
+}
+
+export interface TooltipTextProps
+  extends React.ComponentPropsWithoutRef<typeof RNText> {
+  className?: string;
+}