@himakarinv/nativex 1.0.0

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,278 @@
+import { useEffect, useState } from 'react';
+import { Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { borders, button as buttonTokens, colors, radius, spacing, typography } from '../../theme';
+import { Icon, IconName } from '../Icon';
+
+export const ToastType = {
+  Default: 'default',
+  Success: 'success',
+  Error: 'error',
+  Warning: 'warning',
+  Info: 'info',
+} as const;
+
+export type ToastType = (typeof ToastType)[keyof typeof ToastType];
+
+export type ToastItem = {
+  id: string;
+  header?: string;
+  body: string;
+  type: ToastType;
+  delay: number;
+  autohide: boolean;
+};
+
+export type ToastShowOptions = {
+  header?: string;
+  body: string;
+  type?: ToastType;
+  delay?: number;
+  autohide?: boolean;
+};
+
+export type ToastProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+const DEFAULT_DELAY_MS = 5000;
+
+const TOAST_DELAY_BY_TYPE: Record<ToastType, number> = {
+  [ToastType.Default]: DEFAULT_DELAY_MS,
+  [ToastType.Success]: DEFAULT_DELAY_MS,
+  [ToastType.Error]: 8000,
+  [ToastType.Warning]: DEFAULT_DELAY_MS,
+  [ToastType.Info]: DEFAULT_DELAY_MS,
+};
+
+const TOAST_HEADER_BY_TYPE: Record<ToastType, string> = {
+  [ToastType.Default]: 'Notification',
+  [ToastType.Success]: 'Success',
+  [ToastType.Error]: 'Error',
+  [ToastType.Warning]: 'Warning',
+  [ToastType.Info]: 'Info',
+};
+
+type Listener = (toasts: ToastItem[]) => void;
+
+let toasts: ToastItem[] = [];
+const listeners = new Set<Listener>();
+const hideTimers = new Map<string, ReturnType<typeof setTimeout>>();
+
+function emit() {
+  const snapshot = [...toasts];
+  listeners.forEach((listen) => listen(snapshot));
+}
+
+function scheduleHide(toast: ToastItem) {
+  if (!toast.autohide) {
+    return;
+  }
+  const timer = setTimeout(() => {
+    hideTimers.delete(toast.id);
+    removeToast(toast);
+  }, toast.delay);
+  hideTimers.set(toast.id, timer);
+}
+
+function clearTimer(id: string) {
+  const timer = hideTimers.get(id);
+  if (timer) {
+    clearTimeout(timer);
+    hideTimers.delete(id);
+  }
+}
+
+function subscribeToasts(listen: Listener) {
+  listeners.add(listen);
+  listen([...toasts]);
+  return () => {
+    listeners.delete(listen);
+  };
+}
+
+export function getToasts() {
+  return [...toasts];
+}
+
+export function showToast(options: ToastShowOptions): ToastItem {
+  const type = options.type ?? ToastType.Default;
+  const toast: ToastItem = {
+    id: `toast_${Date.now()}_${Math.random().toString(36).substring(2, 11)}`,
+    header: options.header ?? TOAST_HEADER_BY_TYPE[type],
+    body: options.body,
+    type,
+    delay: options.delay ?? TOAST_DELAY_BY_TYPE[type],
+    autohide: options.autohide !== false,
+  };
+  toasts = [...toasts, toast];
+  emit();
+  scheduleHide(toast);
+  return toast;
+}
+
+export function removeToast(toast: ToastItem) {
+  clearTimer(toast.id);
+  toasts = toasts.filter((item) => item.id !== toast.id);
+  emit();
+}
+
+export function clearToasts() {
+  hideTimers.forEach((timer) => clearTimeout(timer));
+  hideTimers.clear();
+  toasts = [];
+  emit();
+}
+
+export const toastService = {
+  show: showToast,
+  success: (message: string, header = TOAST_HEADER_BY_TYPE[ToastType.Success]) =>
+    showToast({ header, body: message, type: ToastType.Success }),
+  error: (message: string, header = TOAST_HEADER_BY_TYPE[ToastType.Error]) =>
+    showToast({ header, body: message, type: ToastType.Error }),
+  warning: (message: string, header = TOAST_HEADER_BY_TYPE[ToastType.Warning]) =>
+    showToast({ header, body: message, type: ToastType.Warning }),
+  info: (message: string, header = TOAST_HEADER_BY_TYPE[ToastType.Info]) =>
+    showToast({ header, body: message, type: ToastType.Info }),
+  remove: removeToast,
+  clear: clearToasts,
+  getToasts,
+};
+
+const TYPE_CHROME: Record<
+  ToastType,
+  { background: string; text: string; border: string; header: string }
+> = {
+  [ToastType.Default]: {
+    background: colors.white,
+    text: colors.text.primary,
+    border: colors.borderSubtle,
+    header: colors.gray.lighter,
+  },
+  [ToastType.Success]: {
+    background: colors.success.base,
+    text: colors.white,
+    border: colors.success.base,
+    header: colors.alert.successSurface,
+  },
+  [ToastType.Error]: {
+    background: colors.danger.dark,
+    text: colors.white,
+    border: colors.danger.dark,
+    header: colors.alert.errorSurface,
+  },
+  [ToastType.Warning]: {
+    background: colors.alert.warningText,
+    text: colors.text.primary,
+    border: colors.alert.warningBorder,
+    header: colors.alert.warningSurface,
+  },
+  [ToastType.Info]: {
+    background: colors.primary.base,
+    text: colors.white,
+    border: colors.primary.base,
+    header: colors.alert.infoSurface,
+  },
+};
+
+function ToastCard({ toast }: { toast: ToastItem }) {
+  const chrome = TYPE_CHROME[toast.type];
+  const compactLine = typography.fontSize.sm * typography.lineHeight.tight;
+
+  return (
+    <View accessibilityRole="alert" style={[styles.card, { borderColor: chrome.border }]}>
+      <View style={[styles.header, { backgroundColor: chrome.header }]}>
+        {toast.header ? (
+          <Text style={[styles.headerText, { lineHeight: compactLine }]}>{toast.header}</Text>
+        ) : (
+          <View style={styles.headerGap} />
+        )}
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Dismiss"
+          hitSlop={spacing.md}
+          onPress={() => removeToast(toast)}
+          style={({ pressed }) => [styles.close, pressed && styles.closePressed]}>
+          <Icon name={IconName.Close} size={buttonTokens.icon.sm} color={colors.gray.darker} decorative />
+        </Pressable>
+      </View>
+      <View style={[styles.bodyWrap, { backgroundColor: chrome.background }]}>
+        <Text style={[styles.body, { color: chrome.text, lineHeight: compactLine }]}>{toast.body}</Text>
+      </View>
+    </View>
+  );
+}
+
+export function Toast({ style }: ToastProps) {
+  const [items, setItems] = useState<ToastItem[]>([]);
+
+  useEffect(() => subscribeToasts(setItems), []);
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <View pointerEvents="box-none" style={[styles.viewport, style]}>
+      {items.map((toast) => (
+        <ToastCard key={toast.id} toast={toast} />
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  viewport: {
+    position: 'absolute',
+    top: spacing['4xl'],
+    right: spacing.md,
+    alignItems: 'flex-end',
+    gap: spacing.sm,
+    zIndex: 1090,
+    maxWidth: '100%',
+  },
+  card: {
+    width: spacing['2xl'] * 12,
+    maxWidth: '100%',
+    overflow: 'hidden',
+    borderRadius: radius.md,
+    borderWidth: borders.width.thin,
+    backgroundColor: colors.white,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+  },
+  headerText: {
+    flex: 1,
+    minWidth: spacing.none,
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.semibold,
+    color: colors.text.primary,
+  },
+  headerGap: {
+    flex: 1,
+  },
+  bodyWrap: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.md,
+  },
+  body: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.regular,
+  },
+  close: {
+    width: spacing['2xl'],
+    height: spacing['2xl'],
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closePressed: {
+    opacity: 0.85,
+  },
+});

package/src/components/Toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast, ToastType, showToast, removeToast, clearToasts, toastService } from './Toast';
+export type { ToastProps, ToastItem, ToastShowOptions } from './Toast';

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,296 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, button as buttonTokens, colors, radius, shadows, spacing, typography } from '../../theme';
+import { Label } from '../Label';
+
+export const ToggleSize = {
+  Small: 'sm',
+  Medium: 'md',
+  Large: 'lg',
+} as const;
+
+export type ToggleSize = (typeof ToggleSize)[keyof typeof ToggleSize];
+
+export const ToggleState = {
+  Default: 'default',
+  Hover: 'hover',
+  Focused: 'focused',
+  Disabled: 'disabled',
+} as const;
+
+export type ToggleState = (typeof ToggleState)[keyof typeof ToggleState];
+
+export type ToggleProps = {
+  checked?: boolean;
+  size?: ToggleSize;
+  text?: string;
+  supportingText?: string;
+  state?: ToggleState;
+  onCheckedChange?: (checked: boolean) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const isNative = Platform.OS !== 'web';
+
+const TRACK = {
+  [ToggleSize.Small]: {
+    width: spacing['3xl'],
+    height: spacing.lg,
+    thumb: spacing.base,
+  },
+  [ToggleSize.Medium]: {
+    width: spacing['4xl'],
+    height: spacing.xl,
+    thumb: spacing.lg,
+  },
+  [ToggleSize.Large]: {
+    width: spacing['6xl'],
+    height: spacing['2xl'],
+    thumb: spacing.xl,
+  },
+} as const;
+
+function hitSlopFor(trackHeight: number) {
+  const extra = Math.max(spacing.none, (buttonTokens.minTouch - trackHeight) / 2);
+  if (extra === spacing.none) {
+    return undefined;
+  }
+  return { top: extra, bottom: extra, left: extra, right: extra };
+}
+
+function webThumbShadow(): ViewStyle {
+  return {
+    boxShadow: `0 ${borders.width.thin}px ${borders.width.medium}px ${spacing.none} ${shadows.toggleThumb.color}, 0 ${borders.width.thin}px ${spacing.xs + borders.width.thin}px ${spacing.none} ${shadows.toggleThumbMd.color}`,
+  } as ViewStyle;
+}
+
+function webFocusRing(): ViewStyle {
+  return {
+    outlineWidth: borders.focusRing.width,
+    outlineStyle: 'solid',
+    outlineColor: colors.toggle.onFocusRing,
+    outlineOffset: borders.focusRing.offset,
+  } as ViewStyle;
+}
+
+function nativeFocusRing(): ViewStyle {
+  return {
+    position: 'absolute',
+    top: -borders.focusRing.width,
+    right: -borders.focusRing.width,
+    bottom: -borders.focusRing.width,
+    left: -borders.focusRing.width,
+    borderRadius: radius.lg + borders.focusRing.width,
+    borderWidth: borders.focusRing.width,
+    borderColor: colors.toggle.onFocusRing,
+    zIndex: 0,
+  };
+}
+
+function trackColor(checked: boolean, disabled: boolean, hover: boolean) {
+  if (disabled) {
+    return checked ? colors.toggle.onDisabled : colors.toggle.offDisabled;
+  }
+  if (hover) {
+    return checked ? colors.toggle.onHover : colors.toggle.offHover;
+  }
+  return checked ? colors.toggle.on : colors.toggle.off;
+}
+
+type FocusListener = (source: symbol | null) => void;
+
+const focusListeners = new Set<FocusListener>();
+
+export function dismissToggleFocus() {
+  focusListeners.forEach((listener) => listener(null));
+}
+
+function subscribeToggleFocus(listener: FocusListener) {
+  focusListeners.add(listener);
+  return () => {
+    focusListeners.delete(listener);
+  };
+}
+
+function claimToggleFocus(source: symbol) {
+  focusListeners.forEach((listener) => listener(source));
+}
+
+export function Toggle({
+  checked = false,
+  size = ToggleSize.Small,
+  text = '',
+  supportingText = '',
+  state = ToggleState.Default,
+  onCheckedChange,
+  style,
+}: ToggleProps) {
+  const [internalChecked, setInternalChecked] = useState(checked);
+  const [focused, setFocused] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const focusId = useRef(Symbol('toggle-focus'));
+
+  useEffect(() => {
+    setInternalChecked(checked);
+  }, [checked]);
+
+  useEffect(() => {
+    return subscribeToggleFocus((source) => {
+      if (source !== focusId.current && state !== ToggleState.Focused) {
+        setFocused(false);
+      }
+    });
+  }, [state]);
+
+  const isDisabled = state === ToggleState.Disabled;
+  const isChecked = internalChecked;
+  const hasText = Boolean(text) || Boolean(supportingText?.trim());
+  const hasSupporting = Boolean(supportingText?.trim());
+  const showHover = !isDisabled && (state === ToggleState.Hover || hovered);
+  const showFocus = !isDisabled && (state === ToggleState.Focused || focused);
+  const metrics = TRACK[size];
+  const thumbInset = spacing.xs;
+  const thumbLeft = isChecked ? metrics.width - metrics.thumb - thumbInset : thumbInset;
+
+  const toggle = () => {
+    if (isDisabled) {
+      return;
+    }
+
+    claimToggleFocus(focusId.current);
+    setFocused(true);
+    const next = !isChecked;
+    setInternalChecked(next);
+    onCheckedChange?.(next);
+  };
+
+  return (
+    <Pressable
+      accessibilityRole="switch"
+      accessibilityState={{ checked: isChecked, disabled: isDisabled }}
+      accessibilityLabel={text || supportingText || undefined}
+      disabled={isDisabled}
+      hitSlop={hasText ? undefined : hitSlopFor(metrics.height)}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      onFocus={() => {
+        claimToggleFocus(focusId.current);
+        setFocused(true);
+      }}
+      onBlur={() => {
+        if (state !== ToggleState.Focused) {
+          setFocused(false);
+        }
+      }}
+      onPress={toggle}
+      style={[
+        styles.wrapper,
+        hasText && styles.wrapperWithText,
+        hasSupporting && styles.wrapperFill,
+        isDisabled && styles.wrapperDisabled,
+        style,
+      ]}>
+      <View style={styles.trackHost}>
+        {showFocus && isNative ? <View pointerEvents="none" style={nativeFocusRing()} /> : null}
+        <View
+          style={[
+            styles.track,
+            {
+              width: metrics.width,
+              height: metrics.height,
+              backgroundColor: trackColor(isChecked, isDisabled, showHover),
+            },
+            showFocus && !isNative && webFocusRing(),
+          ]}>
+          <View
+            style={[
+              styles.thumb,
+              {
+                width: metrics.thumb,
+                height: metrics.thumb,
+                top: thumbInset,
+                left: thumbLeft,
+              },
+              !isDisabled && !isNative && webThumbShadow(),
+            ]}
+          />
+        </View>
+      </View>
+
+      {hasText ? (
+        <Label
+          embedded
+          text={text}
+          supportingText={supportingText}
+          style={[styles.content, hasSupporting && styles.contentFill]}
+          labelStyle={[styles.label, isDisabled && styles.labelDisabled]}
+          supportingStyle={[styles.supporting, isDisabled && styles.labelDisabled]}
+        />
+      ) : null}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    alignSelf: 'center',
+    maxWidth: '100%',
+  },
+  wrapperWithText: {
+    gap: spacing.md,
+    maxWidth: '100%',
+  },
+  wrapperFill: {
+    maxWidth: '100%',
+  },
+  wrapperDisabled: {
+    opacity: 1,
+  },
+  trackHost: {
+    position: 'relative',
+    overflow: 'visible',
+    flexShrink: 0,
+  },
+  track: {
+    borderRadius: radius.lg,
+    overflow: 'visible',
+  },
+  thumb: {
+    position: 'absolute',
+    borderRadius: radius.full,
+    backgroundColor: colors.toggle.thumb,
+  },
+  content: {
+    flexGrow: 0,
+    flexShrink: 1,
+    minWidth: spacing.none,
+    maxWidth: '100%',
+    alignItems: 'stretch',
+    gap: spacing.sm,
+  },
+  contentFill: {
+    flexGrow: 1,
+  },
+  label: {
+    color: colors.toggle.label,
+    fontWeight: typography.fontWeight.medium,
+  },
+  supporting: {
+    color: colors.toggle.supporting,
+    fontWeight: typography.fontWeight.regular,
+    lineHeight: typography.fontSize.sm * typography.lineHeight.normal,
+  },
+  labelDisabled: {
+    color: colors.toggle.labelDisabled,
+  },
+});

package/src/components/Toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle, ToggleSize, ToggleState, dismissToggleFocus } from './Toggle';
+export type { ToggleProps } from './Toggle';