@himakarinv/nativex 1.0.0

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,230 @@
+import { Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { colors, radius, typography } from '../../theme';
+import { Icon, IconName, isIconName } from '../Icon';
+
+export const BadgeSize = {
+  Small: 'sm',
+  Medium: 'md',
+  Large: 'lg',
+} as const;
+
+export type BadgeSize = (typeof BadgeSize)[keyof typeof BadgeSize];
+
+export const BadgeColor = {
+  Gray: 'gray',
+  Primary: 'primary',
+  Error: 'error',
+  Warning: 'warning',
+  Success: 'success',
+  BlueGray: 'blue-gray',
+  BlueLight: 'blue-light',
+  Blue: 'blue',
+  Indigo: 'indigo',
+  Purple: 'purple',
+  Pink: 'pink',
+  Rose: 'rose',
+  Orange: 'orange',
+} as const;
+
+export type BadgeColor = (typeof BadgeColor)[keyof typeof BadgeColor];
+
+export const BadgeIconPosition = {
+  Left: 'left',
+  Right: 'right',
+} as const;
+
+export type BadgeIconPosition = (typeof BadgeIconPosition)[keyof typeof BadgeIconPosition];
+
+export type BadgeIconColor = BadgeColor;
+export type BadgeIcon = 'none' | IconName;
+
+export type BadgeProps = {
+  label?: string;
+  size?: BadgeSize;
+  color?: BadgeColor;
+  icon?: BadgeIcon;
+  iconPosition?: BadgeIconPosition;
+  iconColor?: BadgeIconColor;
+  removable?: boolean;
+  onRemove?: () => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const COLOR_TOKENS: Record<BadgeColor, { bg: string; text: string; icon: string }> = {
+  gray: colors.badge.gray,
+  primary: colors.badge.primary,
+  error: colors.badge.error,
+  warning: colors.badge.warning,
+  success: colors.badge.success,
+  'blue-gray': colors.badge.blueGray,
+  'blue-light': colors.badge.blueLight,
+  blue: colors.badge.blue,
+  indigo: colors.badge.indigo,
+  purple: colors.badge.purple,
+  pink: colors.badge.pink,
+  rose: colors.badge.rose,
+  orange: colors.badge.orange,
+};
+
+function BadgeGlyph({
+  icon,
+  iconColor,
+  position,
+}: {
+  icon: BadgeIcon;
+  iconColor: BadgeIconColor;
+  position: BadgeIconPosition;
+}) {
+  if (icon === 'none') {
+    return null;
+  }
+
+  if (icon === IconName.Country) {
+    return (
+      <View style={position === BadgeIconPosition.Right ? styles.countryRight : styles.country}>
+        <Icon name={IconName.Country} size={16} decorative />
+      </View>
+    );
+  }
+
+  if (!isIconName(icon)) {
+    return null;
+  }
+
+  const isDot = icon === IconName.Dot;
+  const tint = COLOR_TOKENS[iconColor].icon;
+
+  return (
+    <View style={position === BadgeIconPosition.Right ? styles.maskRight : undefined}>
+      <Icon name={icon} size={isDot ? 8 : 12} color={tint} decorative accessibilityLabel={icon} />
+    </View>
+  );
+}
+
+export function Badge({
+  label = 'Label',
+  size = BadgeSize.Medium,
+  color = BadgeColor.Gray,
+  icon = 'none',
+  iconPosition = BadgeIconPosition.Left,
+  iconColor = BadgeColor.Gray,
+  removable = false,
+  onRemove,
+  style,
+}: BadgeProps) {
+  const palette = COLOR_TOKENS[color];
+  const showIcon = icon !== 'none';
+  const isDotOrCountry = icon === IconName.Dot || icon === IconName.Country;
+  const gapStyle = showIcon || removable ? (isDotOrCountry ? styles.gap6 : styles.gap4) : undefined;
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        SIZE_STYLES[size],
+        { backgroundColor: palette.bg },
+        gapStyle,
+        removable && styles.removable,
+        style,
+      ]}>
+      {showIcon && iconPosition === BadgeIconPosition.Left ? (
+        <BadgeGlyph icon={icon} iconColor={iconColor} position={iconPosition} />
+      ) : null}
+      <Text
+        style={[styles.label, SIZE_LABEL[size], { color: palette.text, fontFamily: typography.fontFamily.base }]}
+        numberOfLines={1}>
+        {label}
+      </Text>
+      {showIcon && iconPosition === BadgeIconPosition.Right ? (
+        <BadgeGlyph icon={icon} iconColor={iconColor} position={iconPosition} />
+      ) : null}
+      {removable ? (
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Remove"
+          hitSlop={8}
+          onPress={onRemove}
+          style={styles.close}>
+          <Icon name={IconName.Close} size={6} color={palette.text} decorative />
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}
+
+const SIZE_STYLES = StyleSheet.create({
+  sm: {
+    minWidth: 48,
+    height: 22,
+    paddingVertical: 2,
+    paddingHorizontal: 8,
+  },
+  md: {
+    minWidth: 57,
+    height: 24,
+    paddingVertical: 2,
+    paddingHorizontal: 10,
+  },
+  lg: {
+    minWidth: 61,
+    height: 28,
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+  },
+});
+
+const SIZE_LABEL = StyleSheet.create({
+  sm: {
+    fontSize: 12,
+    lineHeight: 18,
+  },
+  md: {
+    fontSize: typography.fontSize.sm,
+    lineHeight: 20,
+  },
+  lg: {
+    fontSize: typography.fontSize.sm,
+    lineHeight: 20,
+  },
+});
+
+const styles = StyleSheet.create({
+  badge: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    borderRadius: radius.xl,
+  },
+  gap4: {
+    gap: 4,
+  },
+  gap6: {
+    gap: 6,
+  },
+  removable: {
+    paddingEnd: 2,
+  },
+  label: {
+    fontWeight: typography.fontWeight.medium,
+    textAlign: 'center',
+  },
+  country: {
+    marginLeft: -2,
+    marginRight: -5,
+    transform: [{ translateY: -2 }],
+  },
+  countryRight: {
+    transform: [{ translateY: -3 }],
+  },
+  maskRight: {
+    transform: [{ translateY: -1 }],
+  },
+  close: {
+    width: 12,
+    height: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge, BadgeSize, BadgeColor, BadgeIconPosition } from './Badge';
+export type { BadgeProps, BadgeIcon, BadgeIconColor } from './Badge';

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,364 @@
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+
+import { button as buttonTokens, colors, radius, spacing, typography } from '../../theme';
+import { a11yHiddenProps } from '../../utils/a11y';
+import { Icon, IconName } from '../Icon';
+
+export const BreadcrumbVariant = {
+  Default: 'default',
+  Card: 'card',
+} as const;
+
+export type BreadcrumbVariant = (typeof BreadcrumbVariant)[keyof typeof BreadcrumbVariant];
+
+export const BreadcrumbSeparator = {
+  Chevron: 'chevron',
+  Slash: 'slash',
+  Arrow: 'arrow',
+  Caret: 'caret',
+} as const;
+
+export type BreadcrumbSeparator = (typeof BreadcrumbSeparator)[keyof typeof BreadcrumbSeparator];
+
+export const BreadcrumbSlotKind = {
+  Crumb: 'crumb',
+  Ellipsis: 'ellipsis',
+} as const;
+
+export type BreadcrumbSlotKind = (typeof BreadcrumbSlotKind)[keyof typeof BreadcrumbSlotKind];
+
+export type BreadcrumbItem = {
+  label: string;
+  routerLink?: unknown[] | string | null;
+  href?: string | null;
+};
+
+export type BreadcrumbRow = {
+  kind: BreadcrumbSlotKind;
+  label: string;
+  linkHref: string | null;
+  isCurrent: boolean;
+  showLeadingSep: boolean;
+};
+
+export type BreadcrumbProps = {
+  items?: BreadcrumbItem[];
+  maxLeadingSegments?: number;
+  variant?: BreadcrumbVariant;
+  separator?: BreadcrumbSeparator;
+  showItemIcon?: boolean;
+  onItemPress?: (item: { label: string; href: string }) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+const SEPARATOR_ICON: Record<BreadcrumbSeparator, IconName> = {
+  [BreadcrumbSeparator.Chevron]: IconName.ChevronRight,
+  [BreadcrumbSeparator.Slash]: IconName.Slash,
+  [BreadcrumbSeparator.Arrow]: IconName.ArrowRight,
+  [BreadcrumbSeparator.Caret]: IconName.CaretRight,
+};
+
+const SEPARATOR_SIZE: Record<BreadcrumbSeparator, number> = {
+  [BreadcrumbSeparator.Chevron]: spacing.base,
+  [BreadcrumbSeparator.Slash]: spacing.lg,
+  [BreadcrumbSeparator.Arrow]: spacing.lg,
+  [BreadcrumbSeparator.Caret]: spacing.lg,
+};
+
+const ITEM_ICON_SIZE = spacing.lg;
+
+type Slot =
+  | { kind: typeof BreadcrumbSlotKind.Crumb; item: BreadcrumbItem; isCurrent: boolean }
+  | { kind: typeof BreadcrumbSlotKind.Ellipsis };
+
+function normalizeItems(items: BreadcrumbItem[]): BreadcrumbItem[] {
+  if (!Array.isArray(items)) {
+    return [];
+  }
+  return items.map((entry) => {
+    const o = entry as Record<string, unknown>;
+    const rawLabel = o.label ?? o.name ?? o.text ?? '';
+    return {
+      label: typeof rawLabel === 'string' ? rawLabel : String(rawLabel ?? ''),
+      routerLink: (o.routerLink as BreadcrumbItem['routerLink']) ?? null,
+      href: typeof o.href === 'string' && o.href.length ? o.href : null,
+    };
+  });
+}
+
+function resolveHref(item: BreadcrumbItem, isCurrent: boolean): string | null {
+  if (isCurrent) {
+    return null;
+  }
+  if (item.href) {
+    return item.href;
+  }
+  const rl = item.routerLink;
+  if (rl === null || rl === undefined || rl === '') {
+    return null;
+  }
+  if (Array.isArray(rl)) {
+    if (!rl.length) {
+      return null;
+    }
+    return rl
+      .map((segment, index) => {
+        const str = String(segment ?? '');
+        return index === 0 ? str : str.replace(/^\//, '');
+      })
+      .join('/');
+  }
+  return String(rl);
+}
+
+function buildSlots(items: BreadcrumbItem[], maxLeadingSegments: number): Slot[] {
+  if (!items.length) {
+    return [];
+  }
+  const maxLead = Math.max(1, maxLeadingSegments);
+  const maxItemsWithoutEllipsis = maxLead + 1;
+  if (items.length <= maxItemsWithoutEllipsis) {
+    return items.map((item, index) => ({
+      kind: BreadcrumbSlotKind.Crumb,
+      item,
+      isCurrent: index === items.length - 1,
+    }));
+  }
+  const head: Slot[] = items.slice(0, maxLead).map((item) => ({
+    kind: BreadcrumbSlotKind.Crumb,
+    item,
+    isCurrent: false,
+  }));
+  const tail: Slot = {
+    kind: BreadcrumbSlotKind.Crumb,
+    item: items[items.length - 1],
+    isCurrent: true,
+  };
+  return [...head, { kind: BreadcrumbSlotKind.Ellipsis }, tail];
+}
+
+function buildRows(items: BreadcrumbItem[], maxLeadingSegments: number): BreadcrumbRow[] {
+  return buildSlots(items, maxLeadingSegments).map((slot, index) => {
+    if (slot.kind === BreadcrumbSlotKind.Ellipsis) {
+      return {
+        kind: BreadcrumbSlotKind.Ellipsis,
+        label: '…',
+        linkHref: null,
+        isCurrent: false,
+        showLeadingSep: index > 0,
+      };
+    }
+    return {
+      kind: BreadcrumbSlotKind.Crumb,
+      label: slot.item.label,
+      linkHref: resolveHref(slot.item, slot.isCurrent),
+      isCurrent: slot.isCurrent,
+      showLeadingSep: index > 0,
+    };
+  });
+}
+
+function asCurrentOnly(item: BreadcrumbItem): BreadcrumbItem {
+  return { label: item.label };
+}
+
+export function Breadcrumb({
+  items = [],
+  maxLeadingSegments = 3,
+  variant = BreadcrumbVariant.Default,
+  separator = BreadcrumbSeparator.Chevron,
+  showItemIcon = false,
+  onItemPress,
+  style,
+}: BreadcrumbProps) {
+  const [trail, setTrail] = useState(() => normalizeItems(items));
+
+  useEffect(() => {
+    setTrail(normalizeItems(items));
+  }, [items]);
+
+  const rows = useMemo(() => buildRows(trail, maxLeadingSegments), [trail, maxLeadingSegments]);
+  const isSoloItem = trail.length === 1;
+  const isCard = variant === BreadcrumbVariant.Card;
+  const fontSize = isCard ? typography.fontSize.sm : typography.fontSize.md;
+  const lineHeight = isCard ? spacing['2xl'] : Math.round(fontSize * 1.3);
+  const linkColor = isCard
+    ? colors.breadcrumb.cardText
+    : showItemIcon
+      ? colors.breadcrumb.withIconsText
+      : colors.breadcrumb.normalText;
+  const currentColor = isCard ? colors.breadcrumb.cardCurrent : colors.breadcrumb.link;
+  const soloColor = isCard
+    ? colors.breadcrumb.cardText
+    : showItemIcon
+      ? colors.breadcrumb.withIconsText
+      : colors.breadcrumb.normalText;
+  const ellipsisColor = isCard
+    ? colors.breadcrumb.cardText
+    : showItemIcon
+      ? colors.breadcrumb.withIconsText
+      : colors.breadcrumb.normalText;
+  const sepIcon = SEPARATOR_ICON[separator];
+  const sepSize = SEPARATOR_SIZE[separator];
+  const hitSlop = crumbHitSlop(lineHeight);
+
+  function circleIconFor(isCurrent: boolean) {
+    return isCurrent && !isSoloItem ? IconName.CircleRadioActive : IconName.CircleRadio;
+  }
+
+  function onCrumbPress(row: BreadcrumbRow) {
+    if (!row.linkHref) {
+      return;
+    }
+    const index = trail.findIndex((item, itemIndex) => {
+      const href = resolveHref(item, itemIndex === trail.length - 1);
+      return item.label === row.label && href === row.linkHref;
+    });
+    if (index >= 0) {
+      setTrail(trail.slice(0, index + 1).map((item, itemIndex, list) => (itemIndex === list.length - 1 ? asCurrentOnly(item) : item)));
+    }
+    onItemPress?.({ label: row.label, href: row.linkHref });
+  }
+
+  return (
+    <View accessibilityLabel="breadcrumb" style={[styles.nav, isCard && styles.navCard, style]}>
+      <ScrollView
+        horizontal
+        bounces={false}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.list}>
+        {rows.map((row, index) => {
+          const labelColor = row.isCurrent ? (isSoloItem ? soloColor : currentColor) : linkColor;
+          const itemIcon = showItemIcon ? (
+            <Icon name={circleIconFor(row.isCurrent)} size={ITEM_ICON_SIZE} color={labelColor} decorative />
+          ) : null;
+
+          return (
+            <View key={`${row.kind}-${index}-${row.label}`} style={styles.item} accessibilityState={{ selected: row.isCurrent }}>
+              <View style={styles.cell}>
+                {row.showLeadingSep ? (
+                  <View style={styles.sep} {...a11yHiddenProps()}>
+                    <Icon name={sepIcon} size={sepSize} color={colors.breadcrumb.normalText} decorative />
+                  </View>
+                ) : null}
+
+                {row.kind === BreadcrumbSlotKind.Ellipsis ? (
+                  <Text
+                    {...a11yHiddenProps(true, 'no')}
+                    style={[styles.ellipsis, { fontSize, color: ellipsisColor, lineHeight }]}>
+                    {row.label}
+                  </Text>
+                ) : row.linkHref ? (
+                  <Pressable
+                    accessibilityRole="link"
+                    accessibilityLabel={row.label}
+                    hitSlop={hitSlop}
+                    onPress={() => onCrumbPress(row)}
+                    style={styles.crumb}>
+                    {({ pressed }) => (
+                      <>
+                        {itemIcon}
+                        <Text
+                          style={[
+                            styles.label,
+                            {
+                              fontSize,
+                              lineHeight,
+                              color: pressed ? currentColor : labelColor,
+                              textDecorationLine: pressed ? 'underline' : 'none',
+                            },
+                          ]}
+                          numberOfLines={1}>
+                          {row.label}
+                        </Text>
+                      </>
+                    )}
+                  </Pressable>
+                ) : (
+                  <View
+                    style={styles.crumb}
+                    accessibilityRole="text"
+                    accessibilityLabel={row.label}
+                    accessibilityState={{ selected: row.isCurrent }}>
+                    {itemIcon}
+                    <Text numberOfLines={1} style={[styles.label, { fontSize, lineHeight, color: labelColor }]}>
+                      {row.label}
+                    </Text>
+                  </View>
+                )}
+              </View>
+            </View>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+function crumbHitSlop(lineHeight: number) {
+  const extra = Math.max(0, (buttonTokens.minTouch - lineHeight) / 2);
+  if (extra === 0) {
+    return undefined;
+  }
+  return { top: extra, bottom: extra, left: extra, right: extra };
+}
+
+const styles = StyleSheet.create({
+  nav: {
+    minHeight: spacing['2xl'],
+    alignSelf: 'stretch',
+    width: '100%',
+    maxWidth: '100%',
+  },
+  navCard: {
+    backgroundColor: colors.breadcrumb.cardBg,
+    borderRadius: radius.md,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.base,
+  },
+  list: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    gap: spacing.xs,
+    flexGrow: 1,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexShrink: 0,
+  },
+  cell: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+  },
+  sep: {
+    width: spacing.lg,
+    height: spacing.lg,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  crumb: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+  },
+  label: {
+    fontFamily: typography.fontFamily.base,
+    fontWeight: typography.fontWeight.medium,
+  },
+  ellipsis: {
+    fontFamily: typography.fontFamily.base,
+    fontWeight: typography.fontWeight.medium,
+  },
+});

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export {
+  Breadcrumb,
+  BreadcrumbVariant,
+  BreadcrumbSeparator,
+  BreadcrumbSlotKind,
+} from './Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem, BreadcrumbRow } from './Breadcrumb';