@himakarinv/nativex 1.0.0

package/src/components/ActionsMenu/ActionsMenu.tsx

@@ -0,0 +1,314 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Dimensions,
+  Linking,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { borders, colors, radius, spacing, typography } from '../../theme';
+import { Button, ButtonSize, ButtonVariant, IconPosition, dismissButtonFocus } from '../Button';
+import { Icon, IconName } from '../Icon';
+
+export type ActionMenuItemVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+
+export type ActionMenuItem<T = Record<string, unknown>> = {
+  label: string;
+  icon?: string;
+  action: (row: T) => void;
+  visible?: (row: T) => boolean;
+  disabled?: (row: T) => boolean;
+  variant?: ActionMenuItemVariant;
+  dividerBefore?: boolean;
+};
+
+export type ActionsMenuProps<T = Record<string, unknown>> = {
+  rowData: T;
+  actions?: ActionMenuItem<T>[];
+  menuAriaLabel?: string;
+  menuPanelAriaLabel?: string;
+  triggerText?: string;
+  triggerHref?: string;
+  triggerHrefTarget?: '_blank' | '_self' | '_parent' | '_top';
+  disabled?: boolean;
+  resolveLabel?: (label: string, row: T) => string;
+  onActionClick?: (payload: { action: ActionMenuItem<T>; row: T }) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+function itemColor(variant?: ActionMenuItemVariant) {
+  if (variant === 'danger') {
+    return colors.danger.dark;
+  }
+  if (variant === 'primary') {
+    return colors.interactive.accent;
+  }
+  return colors.gray.darker;
+}
+
+function panelPosition(
+  trigger: { x: number; y: number; width: number; height: number },
+  menu: { width: number; height: number },
+) {
+  const window = Dimensions.get('window');
+  const pad = spacing.lg;
+  const spaceBelow = window.height - (trigger.y + trigger.height);
+  const placeUp = spaceBelow < menu.height + spacing.xs && trigger.y > menu.height + spacing.xs;
+
+  let top = placeUp ? trigger.y - menu.height - spacing.xs : trigger.y + trigger.height + spacing.xs;
+  let left = trigger.x + trigger.width - menu.width;
+
+  left = Math.min(Math.max(pad, left), window.width - menu.width - pad);
+  top = Math.min(Math.max(pad, top), window.height - menu.height - pad);
+
+  return { top, left };
+}
+
+function openHref(href: string, target: ActionsMenuProps['triggerHrefTarget']) {
+  if (Platform.OS === 'web' && typeof globalThis.open === 'function' && target === '_blank') {
+    globalThis.open(href, '_blank', 'noopener,noreferrer');
+    return;
+  }
+  void Linking.openURL(href);
+}
+
+export function ActionsMenu<T = Record<string, unknown>>({
+  rowData,
+  actions = [],
+  menuAriaLabel = 'Actions menu',
+  menuPanelAriaLabel,
+  triggerText,
+  triggerHref,
+  triggerHrefTarget = '_blank',
+  disabled = false,
+  resolveLabel,
+  onActionClick,
+  style,
+}: ActionsMenuProps<T>) {
+  const triggerRef = useRef<View>(null);
+  const [open, setOpen] = useState(false);
+  const [hovered, setHovered] = useState<number | null>(null);
+  const [triggerBox, setTriggerBox] = useState({ x: 0, y: 0, width: 0, height: 0 });
+  const [menuSize, setMenuSize] = useState({ width: spacing['4xl'] * 4, height: 0 });
+  const position = panelPosition(triggerBox, menuSize);
+  const hasTextTrigger = Boolean(triggerText?.trim());
+
+  const visibleActions = useMemo(
+    () => actions.filter((action) => !action.visible || action.visible(rowData)),
+    [actions, rowData],
+  );
+
+  useEffect(() => {
+    if (disabled && open) {
+      setOpen(false);
+    }
+  }, [disabled, open]);
+
+  function close() {
+    setOpen(false);
+    setHovered(null);
+    dismissButtonFocus();
+    setTimeout(() => dismissButtonFocus(), 220);
+  }
+
+  function toggle() {
+    if (disabled) {
+      close();
+      return;
+    }
+    if (open) {
+      close();
+      return;
+    }
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setTriggerBox({ x, y, width, height });
+      setOpen(true);
+    });
+  }
+
+  function onItemPress(action: ActionMenuItem<T>) {
+    const isDisabled = Boolean(action.disabled?.(rowData));
+    if (disabled || isDisabled) {
+      return;
+    }
+    action.action(rowData);
+    onActionClick?.({ action, row: rowData });
+    close();
+  }
+
+  if (triggerHref) {
+    return (
+      <Pressable
+        accessibilityRole="link"
+        accessibilityLabel={triggerText || menuAriaLabel}
+        onPress={() => openHref(triggerHref, triggerHrefTarget)}
+        style={[styles.host, styles.linkTrigger, style]}>
+        <Text style={styles.linkLabel}>{triggerText || menuAriaLabel}</Text>
+      </Pressable>
+    );
+  }
+
+  return (
+    <View ref={triggerRef} collapsable={false} style={[styles.host, style]}>
+      <View style={[styles.triggerFrame, open && styles.triggerFrameOpen]}>
+        <Button
+          label={hasTextTrigger ? triggerText : undefined}
+          variant={ButtonVariant.TertiaryGray}
+          size={ButtonSize.Small}
+          iconPosition={hasTextTrigger ? IconPosition.None : IconPosition.Only}
+          iconName={hasTextTrigger ? undefined : open ? IconName.VerticalDotsActive : IconName.VerticalThreeDots}
+          iconDecorative
+          disabled={disabled}
+          accessibilityLabel={menuAriaLabel}
+          onPress={toggle}
+          contentStyle={hasTextTrigger ? undefined : styles.dotsContent}
+        />
+      </View>
+
+      <Modal visible={open} transparent animationType="none" onRequestClose={close}>
+        <Pressable accessible={false} style={styles.backdrop} onPress={close}>
+          <Pressable
+            accessible={false}
+            accessibilityRole="menu"
+            accessibilityLabel={menuPanelAriaLabel || menuAriaLabel}
+            onPress={(event) => {
+              if ('stopPropagation' in event && typeof event.stopPropagation === 'function') {
+                event.stopPropagation();
+              }
+            }}
+            onLayout={(event) => {
+              const { width, height } = event.nativeEvent.layout;
+              if (width !== menuSize.width || height !== menuSize.height) {
+                setMenuSize({ width, height });
+              }
+            }}
+            style={[styles.panel, { top: position.top, left: position.left }]}>
+            <ScrollView
+              style={styles.list}
+              contentContainerStyle={styles.listContent}
+              keyboardShouldPersistTaps="handled"
+              bounces={false}>
+              {visibleActions.map((action, index) => {
+                const label = resolveLabel ? resolveLabel(action.label, rowData) : action.label;
+                const isDisabled = Boolean(action.disabled?.(rowData));
+                const tint = itemColor(action.variant);
+                const isHovered = hovered === index && !isDisabled;
+
+                return (
+                  <View key={`${action.label}-${index}`}>
+                    {action.dividerBefore ? <View style={styles.divider} /> : null}
+                    <Pressable
+                      accessibilityRole="menuitem"
+                      accessibilityState={{ disabled: isDisabled }}
+                      accessibilityLabel={label}
+                      disabled={isDisabled}
+                      onHoverIn={() => setHovered(index)}
+                      onHoverOut={() => setHovered((current) => (current === index ? null : current))}
+                      onPress={() => onItemPress(action)}
+                      style={[styles.item, isHovered && styles.itemHovered, isDisabled && styles.itemDisabled]}>
+                      {action.icon ? (
+                        <Icon name={action.icon} size={spacing.base} color={tint} decorative />
+                      ) : null}
+                      <Text style={[styles.itemLabel, { color: tint }, isDisabled && styles.itemLabelDisabled]}>
+                        {label}
+                      </Text>
+                    </Pressable>
+                  </View>
+                );
+              })}
+            </ScrollView>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  host: {
+    alignSelf: 'flex-start',
+  },
+  triggerFrame: {
+    borderRadius: radius.md,
+    borderWidth: borders.width.medium,
+    borderColor: colors.transparent,
+  },
+  triggerFrameOpen: {
+    backgroundColor: colors.actionsMenu.triggerOpenBg,
+    borderColor: colors.actionsMenu.triggerBorder,
+  },
+  dotsContent: {
+    width: spacing['3xl'],
+    height: spacing['3xl'],
+    minHeight: spacing['3xl'],
+    borderWidth: borders.width.none,
+    padding: spacing.none,
+  },
+  backdrop: {
+    flex: 1,
+  },
+  panel: {
+    position: 'absolute',
+    minWidth: spacing['4xl'] * 4,
+    maxWidth: spacing['4xl'] * 6,
+    maxHeight: spacing['4xl'] * 8,
+    backgroundColor: colors.actionsMenu.panelBg,
+    borderWidth: borders.width.thin,
+    borderColor: colors.actionsMenu.panelBorder,
+    borderRadius: radius.md,
+    overflow: 'hidden',
+  },
+  list: {
+    maxHeight: spacing['4xl'] * 8,
+  },
+  listContent: {
+    paddingVertical: spacing.xs,
+  },
+  item: {
+    minHeight: spacing['4xl'],
+    paddingVertical: spacing.xs,
+    paddingHorizontal: spacing.base,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  itemHovered: {
+    backgroundColor: colors.actionsMenu.itemHoverBg,
+  },
+  itemDisabled: {
+    opacity: 0.5,
+  },
+  itemLabel: {
+    flexShrink: 1,
+    fontFamily: typography.fontFamily.base,
+    fontWeight: typography.fontWeight.regular,
+    fontSize: typography.fontSize.sm,
+    lineHeight: typography.buttonLineHeight.sm,
+  },
+  itemLabelDisabled: {
+    color: colors.gray.dark,
+  },
+  divider: {
+    height: borders.width.thin,
+    backgroundColor: colors.actionsMenu.divider,
+    marginVertical: spacing.none,
+  },
+  linkTrigger: {
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.base,
+    borderRadius: radius.md,
+  },
+  linkLabel: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.medium,
+    color: colors.gray.dark,
+  },
+});

package/src/components/ActionsMenu/index.ts

@@ -0,0 +1,2 @@
+export type { ActionMenuItem, ActionMenuItemVariant, ActionsMenuProps } from './ActionsMenu';
+export { ActionsMenu } from './ActionsMenu';

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,291 @@
+import { useEffect, useState } from 'react';
+import { Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import * as Linking from 'expo-linking';
+
+import { borders, colors, radius, spacing, typography } from '../../theme';
+import { Button, ButtonSize, ButtonVariant, IconPosition, dismissButtonFocus } from '../Button';
+import { Icon, IconName } from '../Icon';
+
+export const AlertType = {
+  Success: 'success',
+  Error: 'error',
+  Warning: 'warning',
+  Hint: 'hint',
+} as const;
+
+export type AlertType = (typeof AlertType)[keyof typeof AlertType];
+
+export const AlertLayout = {
+  Wide: 'wide',
+  Narrow: 'narrow',
+} as const;
+
+export type AlertLayout = (typeof AlertLayout)[keyof typeof AlertLayout];
+
+export const AlertTextTone = {
+  Neutral: 'neutral',
+  Themed: 'themed',
+} as const;
+
+export type AlertTextTone = (typeof AlertTextTone)[keyof typeof AlertTextTone];
+
+export type AlertProps = {
+  type?: AlertType;
+  layout?: AlertLayout;
+  textTone?: AlertTextTone;
+  title?: string;
+  bodyText?: string;
+  dismissible?: boolean;
+  showIcon?: boolean;
+  learnMoreLabel?: string;
+  learnMoreHref?: string | null;
+  closeAriaLabel?: string;
+  onClosed?: () => void;
+  onLearnMore?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const TYPE_CHROME: Record<AlertType, { surface: string; border: string; themedText: string; icon: IconName }> = {
+  [AlertType.Success]: {
+    surface: colors.alert.successSurface,
+    border: colors.alert.successBorder,
+    themedText: colors.alert.successText,
+    icon: IconName.Success,
+  },
+  [AlertType.Hint]: {
+    surface: colors.alert.infoSurface,
+    border: colors.alert.infoBorder,
+    themedText: colors.alert.hintText,
+    icon: IconName.Info,
+  },
+  [AlertType.Warning]: {
+    surface: colors.alert.warningSurface,
+    border: colors.alert.warningBorder,
+    themedText: colors.alert.warningText,
+    icon: IconName.Warning,
+  },
+  [AlertType.Error]: {
+    surface: colors.alert.errorSurface,
+    border: colors.alert.errorBorder,
+    themedText: colors.alert.errorText,
+    icon: IconName.Error,
+  },
+};
+
+function isOpenableHref(href: string | null | undefined) {
+  return Boolean(href && href !== '#');
+}
+
+export function Alert({
+  type = AlertType.Hint,
+  layout = AlertLayout.Wide,
+  textTone = AlertTextTone.Neutral,
+  title = '',
+  bodyText = '',
+  dismissible,
+  showIcon = true,
+  learnMoreLabel = '',
+  learnMoreHref = null,
+  closeAriaLabel = 'Close',
+  onClosed,
+  onLearnMore,
+  style,
+}: AlertProps) {
+  const [dismissed, setDismissed] = useState(false);
+  const isWide = layout === AlertLayout.Wide;
+  const showClose = !isWide && dismissible !== false;
+  const chrome = TYPE_CHROME[type];
+  const isThemed = textTone === AlertTextTone.Themed;
+  const titleColor = isThemed ? chrome.themedText : colors.alert.title;
+  const messageColor = isThemed ? chrome.themedText : colors.alert.description;
+  const linkColor = isThemed ? chrome.themedText : colors.alert.description;
+
+  useEffect(() => {
+    setDismissed(false);
+  }, [type, layout, title, bodyText, dismissible, showIcon]);
+
+  if (dismissed) {
+    return null;
+  }
+
+  const closeAlert = () => {
+    setDismissed(true);
+    dismissButtonFocus();
+    onClosed?.();
+  };
+
+  const pressLearnMore = () => {
+    onLearnMore?.();
+    if (isOpenableHref(learnMoreHref)) {
+      void Linking.openURL(learnMoreHref as string);
+    }
+  };
+
+  const icon = showIcon ? (
+    <Icon name={chrome.icon} size={spacing.xl} decorative />
+  ) : null;
+
+  const learnMore = !learnMoreLabel
+    ? null
+    : learnMoreHref != null && learnMoreHref !== ''
+      ? (
+          <Pressable
+            accessibilityRole="link"
+            accessibilityLabel={learnMoreLabel}
+            onPress={pressLearnMore}
+            style={({ pressed }) => [styles.learnMore, pressed && styles.learnMorePressed]}>
+            <Text style={[styles.learnMoreText, { color: linkColor, borderBottomColor: linkColor }]}>{learnMoreLabel}</Text>
+          </Pressable>
+        )
+      : (
+          <Button
+            label={learnMoreLabel}
+            variant={ButtonVariant.LinkGray}
+            size={ButtonSize.Small}
+            accessibilityLabel={learnMoreLabel}
+            onPress={pressLearnMore}
+            contentStyle={[styles.learnMoreButton, { borderBottomColor: linkColor }]}
+          />
+        );
+
+  const closeButton = showClose ? (
+    <Button
+      label=""
+      variant={ButtonVariant.TertiaryGray}
+      size={ButtonSize.Small}
+      iconPosition={IconPosition.Only}
+      iconName={IconName.Close}
+      iconDecorative
+      accessibilityLabel={closeAriaLabel || 'Close'}
+      onPress={closeAlert}
+      contentStyle={styles.closeBtn}
+    />
+  ) : null;
+
+  return (
+    <View
+      accessibilityRole="alert"
+      style={[
+        styles.host,
+        isWide ? styles.hostWide : styles.hostNarrow,
+        { backgroundColor: chrome.surface, borderColor: chrome.border },
+        style,
+      ]}>
+      <View style={styles.inner}>
+        {isWide ? (
+          showIcon || title ? (
+            <View style={styles.headerWide}>
+              {icon}
+              {title ? (
+                <Text style={[styles.title, styles.titleInline, { color: titleColor }]}>{title}</Text>
+              ) : null}
+            </View>
+          ) : null
+        ) : showIcon || showClose ? (
+          <View style={styles.headerNarrow}>
+            {icon}
+            <View style={styles.headerGap} />
+            {closeButton}
+          </View>
+        ) : null}
+
+        <View style={[styles.body, isWide && showIcon && styles.bodyIndented]}>
+          {!isWide && title ? <Text style={[styles.title, { color: titleColor }]}>{title}</Text> : null}
+          {bodyText ? <Text style={[styles.message, { color: messageColor }]}>{bodyText}</Text> : null}
+          {learnMore}
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const compactLineHeight = typography.fontSize.sm * typography.lineHeight.tight;
+
+const styles = StyleSheet.create({
+  host: {
+    width: '100%',
+    padding: spacing.base,
+    borderWidth: borders.width.thin,
+    borderRadius: radius.md,
+  },
+  hostWide: {
+    alignSelf: 'center',
+    maxWidth: spacing['2xl'] * 12,
+  },
+  hostNarrow: {
+    alignSelf: 'center',
+    maxWidth: spacing['2xl'] * 10,
+  },
+  inner: {
+    width: '100%',
+    gap: spacing.sm,
+  },
+  headerWide: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    width: '100%',
+    minHeight: spacing.xl,
+  },
+  headerNarrow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    width: '100%',
+    minHeight: spacing.xl,
+  },
+  headerGap: {
+    flex: 1,
+    minWidth: spacing.none,
+  },
+  body: {
+    gap: spacing.sm,
+    minWidth: spacing.none,
+  },
+  bodyIndented: {
+    paddingLeft: spacing.xl + spacing.sm,
+  },
+  title: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.semibold,
+    lineHeight: compactLineHeight,
+  },
+  titleInline: {
+    flex: 1,
+    minWidth: spacing.none,
+  },
+  message: {
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.regular,
+    lineHeight: compactLineHeight,
+  },
+  learnMore: {
+    alignSelf: 'flex-start',
+  },
+  learnMorePressed: {
+    opacity: 0.85,
+  },
+  learnMoreText: {
+    alignSelf: 'flex-start',
+    fontFamily: typography.fontFamily.base,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.regular,
+    lineHeight: compactLineHeight,
+    borderBottomWidth: borders.width.thin,
+  },
+  learnMoreButton: {
+    alignSelf: 'flex-start',
+    paddingHorizontal: spacing.none,
+    paddingVertical: spacing.none,
+    minHeight: compactLineHeight,
+    borderBottomWidth: borders.width.thin,
+    boxShadow: 'none',
+  },
+  closeBtn: {
+    minWidth: spacing['3xl'],
+    minHeight: spacing['3xl'],
+    padding: spacing.xs,
+  },
+});

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert, AlertType, AlertLayout, AlertTextTone } from './Alert';
+export type { AlertProps } from './Alert';