@amityco/react-native-social-uikit 4.1.0 → 4.1.1-d7da0c5c.0

package/src/core/design/atoms/Loader/Upload/Upload.tsx

@@ -0,0 +1,119 @@
+// Upload atom — ported from AmityUiKitWeb core/design/atoms/Loader/Upload.
+// A determinate/indeterminate progress ring with an optional cancel button or
+// countdown overlay. Web draws an animated SVG ring; RN reproduces it with
+// react-native-svg circles plus an Animated rotation loop (matching the web
+// upload-spin so an indeterminate arc reads as loading, not stuck).
+
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, Pressable, Text, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { AmityIcon } from '../../../icons';
+import {
+  RING_CIRCUMFERENCE,
+  RING_RADIUS,
+  RING_STROKE_WIDTH,
+  TRACK_OPACITY,
+  useStyles,
+} from './styles';
+
+export type UploadSize = 'medium' | 'large';
+
+export type UploadProps = {
+  size?: UploadSize;
+  progress?: number;
+  onCancel?: () => void;
+  accessibilityLabel?: string;
+};
+
+const INDETERMINATE_ARC = 25;
+
+export function Upload({
+  size = 'medium',
+  progress,
+  onCancel,
+  accessibilityLabel = 'Loading',
+}: UploadProps) {
+  const {
+    styles,
+    dimension,
+    trackColor,
+    arcColor,
+    cancelIconSize,
+    cancelIconColor,
+  } = useStyles(size);
+
+  const isIndeterminate = progress === undefined;
+  const value = isIndeterminate
+    ? INDETERMINATE_ARC
+    : Math.max(0, Math.min(100, progress));
+  const showCountdown = size === 'large' && !onCancel && !isIndeterminate;
+
+  const spin = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    const anim = Animated.loop(
+      Animated.timing(spin, {
+        toValue: 1,
+        duration: 900,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    );
+    anim.start();
+    return () => anim.stop();
+  }, [spin]);
+
+  const rotate = spin.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+  const dashArray = `${
+    (value / 100) * RING_CIRCUMFERENCE
+  },${RING_CIRCUMFERENCE}`;
+
+  return (
+    <View
+      style={styles.container}
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel}
+    >
+      <Animated.View style={[styles.ring, { transform: [{ rotate }] }]}>
+        <Svg width={dimension} height={dimension} viewBox="0 0 40 40">
+          <Circle
+            cx={20}
+            cy={20}
+            r={RING_RADIUS}
+            fill="none"
+            stroke={trackColor}
+            strokeWidth={RING_STROKE_WIDTH}
+            opacity={TRACK_OPACITY}
+          />
+          <Circle
+            cx={20}
+            cy={20}
+            r={RING_RADIUS}
+            fill="none"
+            stroke={arcColor}
+            strokeWidth={RING_STROKE_WIDTH}
+            strokeLinecap="butt"
+            strokeDasharray={dashArray}
+          />
+        </Svg>
+      </Animated.View>
+      {onCancel ? (
+        <Pressable
+          onPress={onCancel}
+          accessibilityRole="button"
+          accessibilityLabel="Cancel"
+        >
+          <AmityIcon
+            name="cross-l"
+            size={cancelIconSize}
+            tokenColor={cancelIconColor}
+          />
+        </Pressable>
+      ) : showCountdown ? (
+        <Text style={styles.countdown}>{Math.round(value)}</Text>
+      ) : null}
+    </View>
+  );
+}

package/src/core/design/atoms/Loader/Upload/index.ts

@@ -0,0 +1,2 @@
+export { Upload } from './Upload';
+export type { UploadProps, UploadSize } from './Upload';

package/src/core/design/atoms/Loader/Upload/styles.ts

@@ -0,0 +1,57 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../../theme/useToken';
+import { AmityColorToken } from '../../../tokens/amity-color-tokens';
+import type { UploadSize } from './Upload';
+
+// Ring geometry mirrors the web SVG: viewBox 0 0 40 40, r=18, stroke-width 2.
+// react-native-svg ignores pathLength, so the arc dash is computed against the
+// real circumference (2πr) instead of the web's normalized 100.
+export const RING_RADIUS = 18;
+export const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS; // ≈ 113.097
+export const RING_STROKE_WIDTH = 2;
+export const TRACK_OPACITY = 0.5;
+
+// Geometry (SoT: Upload.module.css, rem × 16): container medium 2.5rem → 40,
+// large 4.5rem → 72; cancel icon medium 1.5rem → 24, large 2rem → 32.
+const CONTAINER: Record<UploadSize, number> = {
+  medium: 40,
+  large: 72,
+};
+const CANCEL_ICON: Record<UploadSize, number> = {
+  medium: 24,
+  large: 32,
+};
+
+export const useStyles = (size: UploadSize) => {
+  const token = useToken();
+  const dimension = CONTAINER[size];
+
+  const styles = StyleSheet.create({
+    container: {
+      width: dimension,
+      height: dimension,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    ring: {
+      ...StyleSheet.absoluteFillObject,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    countdown: {
+      fontSize: 32,
+      fontWeight: '700',
+      color: token(AmityColorToken.TextLoadersUploadControllerDefault),
+    },
+  });
+
+  return {
+    styles,
+    token,
+    dimension,
+    trackColor: token(AmityColorToken.SurfaceLoadersUploadControllerBackground),
+    arcColor: token(AmityColorToken.SurfaceLoadersUploadControllerLoader),
+    cancelIconSize: CANCEL_ICON[size],
+    cancelIconColor: AmityColorToken.IconLoadersUploadControllerDefault,
+  };
+};

package/src/core/design/atoms/Loader/index.ts

@@ -0,0 +1,5 @@
+export { Loader } from './Loader';
+export { Spinner } from './Spinner';
+export { Upload } from './Upload';
+export type { SpinnerProps, SpinnerSize } from './Spinner';
+export type { UploadProps, UploadSize } from './Upload';

package/src/core/design/atoms/Selection/Selection.tsx

@@ -0,0 +1,96 @@
+// Selection atom — ported from AmityUiKitWeb core/design/atoms/Selection.
+// Compound namespace: Selection.Checkbox (toggles) and Selection.Radio (selects).
+// Web builds these on react-aria; RN uses a Pressable + a token-tinted circle,
+// rendering the check glyph / radio dot only while selected (web animated its
+// opacity — same result). Web's RadioGroup wrapper is dropped: RN group state is
+// owned by the parent, and Radio fires onSelect once rather than toggling.
+
+import { type ReactNode } from 'react';
+import { Pressable, View } from 'react-native';
+import { AmityIcon } from '../../icons';
+import { useStyles } from './styles';
+
+export type CheckboxProps = {
+  isSelected?: boolean;
+  onChange?: (selected: boolean) => void;
+  isDisabled?: boolean;
+  children?: ReactNode;
+  accessibilityLabel?: string;
+};
+
+export type RadioProps = {
+  isSelected?: boolean;
+  onSelect?: () => void;
+  isDisabled?: boolean;
+  children?: ReactNode;
+  accessibilityLabel?: string;
+};
+
+function Checkbox({
+  isSelected = false,
+  onChange,
+  isDisabled = false,
+  children,
+  accessibilityLabel,
+}: CheckboxProps) {
+  const hasChildren = children != null;
+  const { styles, iconRef, checkSize } = useStyles({
+    variant: 'checkbox',
+    selected: isSelected,
+    disabled: isDisabled,
+  });
+
+  return (
+    <Pressable
+      disabled={isDisabled}
+      onPress={() => onChange?.(!isSelected)}
+      style={hasChildren ? styles.row : styles.control}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: isSelected, disabled: isDisabled }}
+      accessibilityLabel={accessibilityLabel}
+    >
+      {hasChildren ? children : null}
+      <View style={styles.circle}>
+        {isSelected ? (
+          <AmityIcon name="check-1-s" size={checkSize} tokenColor={iconRef} />
+        ) : null}
+      </View>
+    </Pressable>
+  );
+}
+
+function Radio({
+  isSelected = false,
+  onSelect,
+  isDisabled = false,
+  children,
+  accessibilityLabel,
+}: RadioProps) {
+  const hasChildren = children != null;
+  const { styles } = useStyles({
+    variant: 'radio',
+    selected: isSelected,
+    disabled: isDisabled,
+  });
+
+  return (
+    <Pressable
+      disabled={isDisabled}
+      onPress={() => onSelect?.()}
+      style={hasChildren ? styles.row : styles.control}
+      accessibilityRole="radio"
+      accessibilityState={{ checked: isSelected, disabled: isDisabled }}
+      accessibilityLabel={accessibilityLabel}
+    >
+      {hasChildren ? children : null}
+      <View style={styles.circle}>
+        {isSelected ? <View style={styles.dot} /> : null}
+      </View>
+    </Pressable>
+  );
+}
+
+export const Selection = {
+  Checkbox,
+  Radio,
+};

package/src/core/design/atoms/Selection/index.ts

@@ -0,0 +1,2 @@
+export { Selection } from './Selection';
+export type { CheckboxProps, RadioProps } from './Selection';

package/src/core/design/atoms/Selection/styles.ts

@@ -0,0 +1,133 @@
+import { StyleSheet } from 'react-native';
+import { useToken, type ColorTokenRef } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+
+// Selection geometry (SoT: Checkbox/Radio .module.css, rem × 16).
+//   outer control 1.5rem = 24, padding 0.125rem = 2 → inner circle 1.25rem = 20
+//   circle border 0.0625rem = 1; check glyph 0.875rem = 14; radio dot 0.5rem = 8
+//   row layout: checkbox minHeight 3.5rem = 56, padding 0.5rem 1rem = 8×16, gap 8
+//               radio    padding 1rem = 16 (no minHeight),                gap 8
+export type SelectionVariant = 'checkbox' | 'radio';
+
+const CONTROL_SIZE = 24;
+const CONTROL_PADDING = 2;
+const CIRCLE_SIZE = 20;
+const CHECK_SIZE = 14;
+const DOT_SIZE = 8;
+
+// Per-variant colour tokens (web CSS custom props → AmityColorToken refs).
+type VariantTokens = {
+  surfaceActiveDefault: ColorTokenRef;
+  surfaceActiveDisabled: ColorTokenRef;
+  surfaceInactiveDefault: ColorTokenRef;
+  surfaceInactiveDisabled: ColorTokenRef;
+  borderInactiveDefault: ColorTokenRef;
+  borderInactiveDisabled: ColorTokenRef;
+  iconDefault: ColorTokenRef;
+  iconDisabled: ColorTokenRef;
+};
+
+const CHECKBOX_TOKENS: VariantTokens = {
+  surfaceActiveDefault:
+    AmityColorToken.SurfaceSelectionCheckboxAtomicActiveDefault,
+  surfaceActiveDisabled:
+    AmityColorToken.SurfaceSelectionCheckboxAtomicActiveDisabled,
+  surfaceInactiveDefault:
+    AmityColorToken.SurfaceSelectionCheckboxAtomicInactiveDefault,
+  surfaceInactiveDisabled:
+    AmityColorToken.SurfaceSelectionCheckboxAtomicInactiveDisabled,
+  borderInactiveDefault:
+    AmityColorToken.BorderSelectionCheckboxAtomicInactiveDefault,
+  borderInactiveDisabled:
+    AmityColorToken.BorderSelectionCheckboxAtomicInactiveDisabled,
+  iconDefault: AmityColorToken.IconSelectionCheckboxAtomicDefault,
+  iconDisabled: AmityColorToken.IconSelectionCheckboxAtomicDisabled,
+};
+
+const RADIO_TOKENS: VariantTokens = {
+  surfaceActiveDefault:
+    AmityColorToken.SurfaceSelectionRadioAtomicActiveDefault,
+  surfaceActiveDisabled:
+    AmityColorToken.SurfaceSelectionRadioAtomicActiveDisabled,
+  surfaceInactiveDefault:
+    AmityColorToken.SurfaceSelectionRadioAtomicInactiveDefault,
+  surfaceInactiveDisabled:
+    AmityColorToken.SurfaceSelectionRadioAtomicInactiveDisabled,
+  borderInactiveDefault:
+    AmityColorToken.BorderSelectionRadioAtomicInactiveDefault,
+  borderInactiveDisabled:
+    AmityColorToken.BorderSelectionRadioAtomicInactiveDisabled,
+  iconDefault: AmityColorToken.IconSelectionRadioAtomicDefault,
+  iconDisabled: AmityColorToken.IconSelectionRadioAtomicDisabled,
+};
+
+type UseStylesArgs = {
+  variant: SelectionVariant;
+  selected: boolean;
+  disabled: boolean;
+};
+
+export const useStyles = ({ variant, selected, disabled }: UseStylesArgs) => {
+  const token = useToken();
+  const t = variant === 'checkbox' ? CHECKBOX_TOKENS : RADIO_TOKENS;
+
+  // Precedence mirrors the web CSS cascade: selected+disabled > selected >
+  // disabled > default. Border collapses to transparent whenever selected.
+  const surfaceRef = selected
+    ? disabled
+      ? t.surfaceActiveDisabled
+      : t.surfaceActiveDefault
+    : disabled
+    ? t.surfaceInactiveDisabled
+    : t.surfaceInactiveDefault;
+
+  const borderColor = selected
+    ? 'transparent'
+    : token(disabled ? t.borderInactiveDisabled : t.borderInactiveDefault);
+
+  // Glyph tint (check icon / radio dot). Only rendered when selected.
+  const iconRef = disabled ? t.iconDisabled : t.iconDefault;
+
+  // Row padding differs between the two variants.
+  const rowPadding =
+    variant === 'checkbox'
+      ? { paddingVertical: 8, paddingHorizontal: 16, minHeight: 56 }
+      : { padding: 16 };
+
+  const styles = StyleSheet.create({
+    control: {
+      width: CONTROL_SIZE,
+      height: CONTROL_SIZE,
+      padding: CONTROL_PADDING,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    row: {
+      width: '100%',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      gap: 8,
+      ...rowPadding,
+    },
+    circle: {
+      width: CIRCLE_SIZE,
+      height: CIRCLE_SIZE,
+      flexShrink: 0,
+      borderRadius: CIRCLE_SIZE / 2,
+      borderWidth: 1,
+      borderColor,
+      backgroundColor: token(surfaceRef),
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    dot: {
+      width: DOT_SIZE,
+      height: DOT_SIZE,
+      borderRadius: DOT_SIZE / 2,
+      backgroundColor: token(iconRef),
+    },
+  });
+
+  return { styles, token, iconRef, checkSize: CHECK_SIZE };
+};

package/src/core/design/atoms/Tab/Tab.tsx

@@ -0,0 +1,65 @@
+// Tab atom — ported from AmityUiKitWeb core/design/atoms/Tab.
+// One atom with three variants (pill, underlined, icon). Web react-aria Tab
+// (selection + click) → RN Pressable + `active`/`onPress`. Hover and
+// focus-visible are web-only interaction states and are intentionally omitted.
+
+import {
+  cloneElement,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { useStyles } from './styles';
+
+export type TabVariant = 'pill' | 'underlined' | 'icon';
+
+export type TabProps = {
+  variant?: TabVariant;
+  label?: string;
+  icon?: ReactNode;
+  active?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+};
+
+export function Tab({
+  variant = 'pill',
+  label,
+  icon,
+  active = false,
+  disabled = false,
+  onPress,
+}: TabProps) {
+  const { styles, iconColor } = useStyles(variant, active, disabled);
+
+  const tintedIcon = isValidElement(icon)
+    ? cloneElement(icon as ReactElement<{ color?: string }>, {
+        color: iconColor,
+      })
+    : icon;
+
+  return (
+    <Pressable
+      style={styles.tab}
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: active, disabled }}
+    >
+      {variant === 'icon' ? (
+        <>
+          <View style={styles.icon}>{tintedIcon}</View>
+          <View style={styles.indicator} />
+        </>
+      ) : variant === 'underlined' ? (
+        <>
+          <Text style={styles.label}>{label}</Text>
+          <View style={styles.indicator} />
+        </>
+      ) : (
+        <Text style={styles.label}>{label}</Text>
+      )}
+    </Pressable>
+  );
+}

package/src/core/design/atoms/Tab/index.ts

@@ -0,0 +1,2 @@
+export { Tab } from './Tab';
+export type { TabProps, TabVariant } from './Tab';

package/src/core/design/atoms/Tab/styles.ts

@@ -0,0 +1,109 @@
+import { StyleSheet } from 'react-native';
+import { useToken } from '../../theme/useToken';
+import { AmityColorToken } from '../../tokens/amity-color-tokens';
+import type { TabVariant } from './Tab';
+
+// Geometry from SoT (geometry.json → tabs), px:
+//   pill:       height 40, padding 8×12, radius 24, border 1, fontSize 17, lineHeight 24
+//   underlined: height 56, paddingTop 16, gap 14, indicator thickness 2
+//   icon:       height 56, paddingTop 16, gap 14, glyph 24×24, indicator 24×2
+export const useStyles = (
+  variant: TabVariant,
+  active: boolean,
+  disabled: boolean
+) => {
+  const token = useToken();
+
+  const labelColor =
+    variant === 'pill'
+      ? token(
+          disabled
+            ? AmityColorToken.TextTabPillDisabled
+            : active
+            ? AmityColorToken.TextTabPillActive
+            : AmityColorToken.TextTabPillDefault
+        )
+      : token(
+          disabled
+            ? AmityColorToken.TextTabUnderlinedDisabled
+            : active
+            ? AmityColorToken.TextTabUnderlinedActive
+            : AmityColorToken.TextTabUnderlinedDefault
+        );
+
+  const iconColor = token(
+    disabled
+      ? AmityColorToken.IconTabDisabled
+      : active
+      ? AmityColorToken.IconTabActive
+      : AmityColorToken.IconTabDefault
+  );
+
+  const indicatorColor = !active
+    ? 'transparent'
+    : variant === 'icon'
+    ? token(AmityColorToken.LineTabIconActive)
+    : token(AmityColorToken.LineTabUnderlinedActive);
+
+  const pillSurface = token(
+    disabled
+      ? AmityColorToken.SurfaceTabPillDisabled
+      : active
+      ? AmityColorToken.SurfaceTabPillActive
+      : AmityColorToken.SurfaceTabPillDefault
+  );
+  const pillBorder = token(
+    disabled
+      ? AmityColorToken.BorderTabPillDisabled
+      : active
+      ? AmityColorToken.BorderTabPillActive
+      : AmityColorToken.BorderTabPillDefault
+  );
+
+  const tab =
+    variant === 'pill'
+      ? {
+          flexDirection: 'row' as const,
+          alignItems: 'center' as const,
+          justifyContent: 'center' as const,
+          height: 40,
+          paddingVertical: 8,
+          paddingHorizontal: 12,
+          borderRadius: 24,
+          borderWidth: 1,
+          borderColor: pillBorder,
+          backgroundColor: pillSurface,
+        }
+      : {
+          flexDirection: 'column' as const,
+          alignItems: 'center' as const,
+          gap: 14,
+          height: 56,
+          paddingTop: 16,
+          backgroundColor: 'transparent' as const,
+        };
+
+  const styles = StyleSheet.create({
+    tab,
+    label: {
+      fontSize: 17,
+      lineHeight: 24,
+      fontWeight: active ? '600' : '400',
+      color: labelColor,
+    },
+    icon: {
+      width: 24,
+      height: 24,
+    },
+    indicator:
+      variant === 'icon'
+        ? { width: 24, height: 2, backgroundColor: indicatorColor }
+        : {
+            width: '100%' as const,
+            height: 2,
+            backgroundColor: indicatorColor,
+          },
+  });
+
+  return { styles, iconColor };
+};

package/src/core/design/components/Menu/Menu.tsx

@@ -0,0 +1,92 @@
+// Menu — ported from AmityUiKitWeb core/design/components/Menu.
+// Web renders a <div> wrapper whose CSS descendant selectors style each row by
+// the parent's data-container / data-variant. RN has no cascade, so the parent
+// pushes those two axes to rows through context. `Menu.Item` is an icon + label
+// row (tinted per destructive flag); `Menu.Item.Skeleton` is the loading row.
+
+import { createContext, useContext, type ReactNode } from 'react';
+import { Pressable, View } from 'react-native';
+import { AmityIcon, type AmityIconName } from '../../icons';
+import { Typography, type TypographyVariant } from '../Typography';
+import { Skeleton } from '../Skeleton';
+import { useStyles, type MenuContainer, type MenuVariant } from './styles';
+
+type MenuContextValue = {
+  container: MenuContainer;
+  variant: MenuVariant;
+};
+
+const MenuContext = createContext<MenuContextValue>({
+  container: 'popover',
+  variant: 'social',
+});
+
+type MenuProps = {
+  children: ReactNode;
+  container?: MenuContainer;
+  variant?: MenuVariant;
+};
+
+export function Menu({
+  children,
+  container = 'popover',
+  variant = 'social',
+}: MenuProps) {
+  const { styles } = useStyles({ container, variant });
+
+  return (
+    <MenuContext.Provider value={{ container, variant }}>
+      <View style={styles.menu}>{children}</View>
+    </MenuContext.Provider>
+  );
+}
+
+type MenuItemProps = {
+  label: string;
+  icon?: AmityIconName;
+  destructive?: boolean;
+  onPress: () => void;
+  typography?: TypographyVariant;
+};
+
+function MenuItem({
+  label,
+  icon,
+  destructive = false,
+  onPress,
+  typography = 'bodyBold',
+}: MenuItemProps) {
+  const { container, variant } = useContext(MenuContext);
+  const { styles, iconSize, labelColorToken } = useStyles({
+    container,
+    variant,
+    destructive,
+  });
+
+  return (
+    <Pressable style={styles.menuItem} onPress={onPress}>
+      {icon ? (
+        <AmityIcon name={icon} size={iconSize} tokenColor={labelColorToken} />
+      ) : null}
+      <Typography variant={typography} style={styles.menuItemLabel}>
+        {label}
+      </Typography>
+    </Pressable>
+  );
+}
+
+Menu.Item = MenuItem;
+
+function MenuItemSkeleton() {
+  const { container, variant } = useContext(MenuContext);
+  const { styles } = useStyles({ container, variant });
+
+  return (
+    <View style={styles.menuItemSkeleton} accessibilityElementsHidden>
+      {/* Web Skeleton.Line height 0.625rem (10px), full width. */}
+      <Skeleton height={10} width="100%" />
+    </View>
+  );
+}
+
+MenuItem.Skeleton = MenuItemSkeleton;

package/src/core/design/components/Menu/index.ts

@@ -0,0 +1,2 @@
+export { Menu } from './Menu';
+export type { MenuContainer, MenuVariant } from './styles';