@amityco/react-native-social-uikit 4.1.1-fdf83f6b.0 → 4.2.0

package/src/core/design/atoms/Input/Chip/Chip.tsx

@@ -1,105 +0,0 @@
-// Chip input atom — ported from AmityUiKitWeb core/design/atoms/Input/Chip.
-// A tag-entry field: existing chips render as removable tags, and submitting the
-// input appends a new chip. Web's react-aria TagGroup becomes RN Views with a
-// remove Pressable (cross-r glyph) per tag.
-
-import { type ReactNode } from 'react';
-import { Pressable, TextInput, View, Text as RNText } from 'react-native';
-import { AmityIcon } from '../../../icons';
-import { useStyles, type ChipState } from './styles';
-
-export type ChipData = {
-  id: string;
-  label: string;
-  disabled?: boolean;
-};
-
-export type ChipProps = {
-  chips?: ChipData[];
-  onChipsChange?: (chips: ChipData[]) => void;
-  value?: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  title?: string;
-  hintText?: string;
-  leadingIcon?: ReactNode;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  onSubmit?: (value: string) => void;
-  accessibilityLabel?: string;
-};
-
-export function Chip({
-  chips = [],
-  onChipsChange,
-  value,
-  onChange,
-  placeholder,
-  title,
-  hintText,
-  leadingIcon,
-  isDisabled = false,
-  isInvalid = false,
-  onSubmit,
-  accessibilityLabel,
-}: ChipProps) {
-  const state: ChipState = isDisabled
-    ? 'disabled'
-    : isInvalid
-    ? 'invalid'
-    : 'default';
-
-  const { styles, placeholderColor, cursorColor, removeIconColor } =
-    useStyles(state);
-
-  const removeChip = (id: string) => {
-    onChipsChange?.(chips.filter((chip) => chip.id !== id));
-  };
-
-  const addChip = () => {
-    const next = value?.trim();
-    if (!next) return;
-    onChipsChange?.([...chips, { id: next, label: next }]);
-    onChange?.('');
-    onSubmit?.(next);
-  };
-
-  return (
-    <View style={styles.chip}>
-      {title ? <RNText style={styles.title}>{title}</RNText> : null}
-      <View style={styles.row}>
-        {leadingIcon ? <View style={styles.icon}>{leadingIcon}</View> : null}
-        {chips.map((chip) => (
-          <View key={chip.id} style={styles.tag}>
-            <RNText style={styles.tagLabel}>{chip.label}</RNText>
-            <Pressable
-              onPress={() => removeChip(chip.id)}
-              accessibilityRole="button"
-              accessibilityLabel="Remove"
-            >
-              <AmityIcon
-                name="cross-r"
-                size={14}
-                tokenColor={removeIconColor}
-              />
-            </Pressable>
-          </View>
-        ))}
-        <TextInput
-          style={styles.input}
-          value={value}
-          onChangeText={onChange}
-          placeholder={placeholder}
-          placeholderTextColor={placeholderColor}
-          selectionColor={cursorColor}
-          cursorColor={cursorColor}
-          editable={!isDisabled}
-          accessibilityLabel={title ? undefined : accessibilityLabel}
-          onSubmitEditing={addChip}
-        />
-      </View>
-      <View style={styles.underline} />
-      {hintText ? <RNText style={styles.hint}>{hintText}</RNText> : null}
-    </View>
-  );
-}

package/src/core/design/atoms/Input/Chip/index.ts

@@ -1,2 +0,0 @@
-export { Chip } from './Chip';
-export type { ChipProps, ChipData } from './Chip';

package/src/core/design/atoms/Input/Chip/styles.ts

@@ -1,95 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { useToken, type ColorTokenRef } from '../../../theme/useToken';
-import { AmityColorToken } from '../../../tokens/amity-color-tokens';
-
-// Chip has no focus state in the web CSS — only default / disabled / invalid.
-export type ChipState = 'default' | 'disabled' | 'invalid';
-
-const LINE: Record<ChipState, ColorTokenRef> = {
-  default: AmityColorToken.LineInputChipInputUnderlinedDefault,
-  disabled: AmityColorToken.LineInputChipInputUnderlinedDisabled,
-  invalid: AmityColorToken.LineInputChipInputUnderlinedError,
-};
-const PLACEHOLDER: Record<ChipState, ColorTokenRef> = {
-  default: AmityColorToken.TextInputChipInputPlaceholderEnabled,
-  disabled: AmityColorToken.TextInputChipInputPlaceholderDisabled,
-  invalid: AmityColorToken.TextInputChipInputPlaceholderError,
-};
-const TITLE: Record<ChipState, ColorTokenRef> = {
-  default: AmityColorToken.TextInputChipInputTitleDefault,
-  disabled: AmityColorToken.TextInputChipInputTitleDisabled,
-  invalid: AmityColorToken.TextInputChipInputTitleError,
-};
-const INDICATOR: Record<ChipState, ColorTokenRef> = {
-  default: AmityColorToken.TextInputChipInputIndicatorDefault,
-  disabled: AmityColorToken.TextInputChipInputIndicatorDisabled,
-  invalid: AmityColorToken.TextInputChipInputIndicatorError,
-};
-
-export const useStyles = (state: ChipState) => {
-  const token = useToken();
-
-  const titleColor = token(TITLE[state]);
-  const placeholderColor = token(PLACEHOLDER[state]);
-  const hintColor = token(
-    state === 'invalid'
-      ? AmityColorToken.TextInputChipInputHintTextError
-      : AmityColorToken.TextInputChipInputHintTextDefault
-  );
-
-  const styles = StyleSheet.create({
-    chip: {
-      width: '100%',
-      gap: 4,
-    },
-    title: {
-      fontSize: 13,
-      fontWeight: '600',
-      color: titleColor,
-    },
-    row: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      flexWrap: 'wrap',
-      gap: 8,
-    },
-    icon: {
-      width: 20,
-      height: 20,
-      flexShrink: 0,
-    },
-    tag: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 4,
-    },
-    tagLabel: {
-      fontSize: 14,
-      color: titleColor,
-    },
-    input: {
-      flex: 1,
-      minWidth: 64,
-      padding: 0,
-      fontSize: 16,
-      color: placeholderColor,
-    },
-    underline: {
-      width: '100%',
-      height: 1,
-      backgroundColor: token(LINE[state]),
-    },
-    hint: {
-      fontSize: 12,
-      color: hintColor,
-    },
-  });
-
-  return {
-    styles,
-    token,
-    placeholderColor,
-    cursorColor: token(AmityColorToken.TextInputChipInputTextCursorDefault),
-    removeIconColor: INDICATOR[state],
-  };
-};

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

@@ -1,14 +0,0 @@
-// Input atom — compound namespace mirroring AmityUiKitWeb
-// core/design/atoms/Input (Input.Text / Input.Boxed / Input.Chip / Input.User).
-
-import { Boxed } from './Boxed';
-import { Chip } from './Chip';
-import { Text } from './Text';
-import { User } from './User';
-
-export const Input = {
-  Boxed,
-  Text,
-  Chip,
-  User,
-};

package/src/core/design/atoms/Input/Text/Text.tsx

@@ -1,118 +0,0 @@
-// Text input atom — ported from AmityUiKitWeb core/design/atoms/Input/Text.
-// Underlined text field with optional title, counter, hint, and leading/trailing
-// icons. Web's :focus-within cascade becomes explicit focus state here; the
-// state × modifier colour matrix lives in styles.ts.
-
-import { useState, type ReactNode } from 'react';
-import { TextInput, View, Text as RNText } from 'react-native';
-import { useStyles, type TextState } from './styles';
-
-export type TextProps = {
-  value?: string;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  title?: string;
-  optionalLabel?: string;
-  hintText?: string;
-  leadingIcon?: ReactNode;
-  trailingIcon?: ReactNode;
-  showCharacterCount?: boolean;
-  maxLength?: number;
-  multiLine?: boolean;
-  isDisabled?: boolean;
-  isInvalid?: boolean;
-  highlightMatch?: boolean;
-  onFocus?: () => void;
-  onBlur?: () => void;
-  onSubmit?: (value: string) => void;
-  accessibilityLabel?: string;
-};
-
-export function Text({
-  value,
-  onChange,
-  placeholder,
-  title,
-  optionalLabel,
-  hintText,
-  leadingIcon,
-  trailingIcon,
-  showCharacterCount = false,
-  maxLength,
-  multiLine = false,
-  isDisabled = false,
-  isInvalid = false,
-  highlightMatch = false,
-  onFocus,
-  onBlur,
-  onSubmit,
-  accessibilityLabel,
-}: TextProps) {
-  const [isFocused, setIsFocused] = useState(false);
-
-  const state: TextState = isDisabled
-    ? 'disabled'
-    : isInvalid
-    ? 'invalid'
-    : isFocused
-    ? 'focused'
-    : 'enabled';
-
-  const { styles, placeholderColor, cursorColor } = useStyles({
-    state,
-    filled: !!value,
-    highlight: highlightMatch,
-    multiLine,
-  });
-
-  const counter = showCharacterCount ? (
-    <RNText style={styles.count}>
-      {value?.length ?? 0}
-      {maxLength ? `/${maxLength}` : ''}
-    </RNText>
-  ) : null;
-
-  return (
-    <View style={styles.field}>
-      {title ? (
-        <View style={styles.titleRow}>
-          <RNText style={styles.title}>
-            {title}
-            {optionalLabel ? (
-              <RNText style={styles.optional}> {optionalLabel}</RNText>
-            ) : null}
-          </RNText>
-          {counter}
-        </View>
-      ) : null}
-      <View style={styles.row}>
-        {leadingIcon ? <View style={styles.icon}>{leadingIcon}</View> : null}
-        <TextInput
-          style={styles.input}
-          value={value}
-          onChangeText={onChange}
-          placeholder={placeholder}
-          placeholderTextColor={placeholderColor}
-          selectionColor={cursorColor}
-          cursorColor={cursorColor}
-          maxLength={maxLength}
-          multiline={multiLine}
-          editable={!isDisabled}
-          accessibilityLabel={accessibilityLabel ?? title}
-          onFocus={() => {
-            setIsFocused(true);
-            onFocus?.();
-          }}
-          onBlur={() => {
-            setIsFocused(false);
-            onBlur?.();
-          }}
-          onSubmitEditing={() => onSubmit?.(value ?? '')}
-        />
-        {trailingIcon ? <View style={styles.icon}>{trailingIcon}</View> : null}
-        {!title ? counter : null}
-      </View>
-      {hintText ? <RNText style={styles.hint}>{hintText}</RNText> : null}
-    </View>
-  );
-}

package/src/core/design/atoms/Input/Text/index.ts

@@ -1,2 +0,0 @@
-export { Text } from './Text';
-export type { TextProps } from './Text';

package/src/core/design/atoms/Input/Text/styles.ts

@@ -1,137 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { useToken, type ColorTokenRef } from '../../../theme/useToken';
-import { AmityColorToken } from '../../../tokens/amity-color-tokens';
-
-// Web resolves text/placeholder colour through a state × modifier matrix of
-// compound CSS selectors. RN has no cascade, so the matrix is replicated here.
-// Precedence (from CSS specificity + source order):
-//   state:    disabled > invalid > focused > enabled
-//   modifier: highlight > filled
-export type TextState = 'enabled' | 'focused' | 'invalid' | 'disabled';
-
-const PLACEHOLDER: Record<
-  TextState,
-  { base: ColorTokenRef; filled: ColorTokenRef; highlight: ColorTokenRef }
-> = {
-  enabled: {
-    base: AmityColorToken.TextInputTextInputPlaceholderEnabled,
-    filled: AmityColorToken.TextInputTextInputPlaceholderEnabledFilled,
-    highlight: AmityColorToken.TextInputTextInputPlaceholderEnabledHighlight,
-  },
-  focused: {
-    base: AmityColorToken.TextInputTextInputPlaceholderFocused,
-    filled: AmityColorToken.TextInputTextInputPlaceholderFocusedFilled,
-    highlight: AmityColorToken.TextInputTextInputPlaceholderFocusedHighlight,
-  },
-  invalid: {
-    base: AmityColorToken.TextInputTextInputPlaceholderError,
-    filled: AmityColorToken.TextInputTextInputPlaceholderErrorFilled,
-    highlight: AmityColorToken.TextInputTextInputPlaceholderErrorHighlight,
-  },
-  disabled: {
-    base: AmityColorToken.TextInputTextInputPlaceholderDisabled,
-    filled: AmityColorToken.TextInputTextInputPlaceholderDisabledFilled,
-    highlight: AmityColorToken.TextInputTextInputPlaceholderDisabledHighlight,
-  },
-};
-
-// Icon/line only change on invalid/disabled (web keeps default when focused).
-const LINE: Record<TextState, ColorTokenRef> = {
-  enabled: AmityColorToken.LineInputTextInputUnderlinedDefault,
-  focused: AmityColorToken.LineInputTextInputUnderlinedDefault,
-  invalid: AmityColorToken.LineInputTextInputUnderlinedError,
-  disabled: AmityColorToken.LineInputTextInputUnderlinedDisabled,
-};
-
-const resolvePlaceholder = (
-  state: TextState,
-  filled: boolean,
-  highlight: boolean
-): ColorTokenRef => {
-  const slice = PLACEHOLDER[state];
-  if (highlight) return slice.highlight;
-  if (filled) return slice.filled;
-  return slice.base;
-};
-
-type UseStylesArgs = {
-  state: TextState;
-  filled: boolean;
-  highlight: boolean;
-  multiLine: boolean;
-};
-
-export const useStyles = ({
-  state,
-  filled,
-  highlight,
-  multiLine,
-}: UseStylesArgs) => {
-  const token = useToken();
-
-  const textColor = token(resolvePlaceholder(state, filled, highlight));
-  const hintColor = token(
-    state === 'invalid'
-      ? AmityColorToken.TextInputTextInputHintTextError
-      : AmityColorToken.TextInputTextInputHintTextDefault
-  );
-
-  const styles = StyleSheet.create({
-    field: {
-      width: '100%',
-      gap: 4,
-    },
-    titleRow: {
-      flexDirection: 'row',
-      alignItems: 'baseline',
-      justifyContent: 'space-between',
-      gap: 4,
-    },
-    title: {
-      color: token(AmityColorToken.TextInputTextInputTitleDefault),
-      fontSize: 13,
-      fontWeight: '600',
-    },
-    optional: {
-      color: token(AmityColorToken.TextInputTextInputIndicatorDefault),
-      fontSize: 13,
-    },
-    row: {
-      flexDirection: 'row',
-      alignItems: multiLine ? 'flex-start' : 'center',
-      gap: 8,
-      paddingVertical: 16,
-      borderBottomWidth: 1,
-      borderBottomColor: token(LINE[state]),
-    },
-    icon: {
-      width: 20,
-      height: 20,
-      flexShrink: 0,
-    },
-    input: {
-      flex: 1,
-      minWidth: 0,
-      padding: 0,
-      fontSize: 15,
-      lineHeight: 20,
-      color: textColor,
-    },
-    count: {
-      flexShrink: 0,
-      color: token(AmityColorToken.TextInputTextInputTextCountDefault),
-      fontSize: 13,
-    },
-    hint: {
-      color: hintColor,
-      fontSize: 13,
-    },
-  });
-
-  return {
-    styles,
-    token,
-    placeholderColor: textColor,
-    cursorColor: token(AmityColorToken.TextInputTextInputTextCursorDefault),
-  };
-};

package/src/core/design/atoms/Input/User/User.tsx

@@ -1,53 +0,0 @@
-// User row atom — ported from AmityUiKitWeb core/design/atoms/Input/User.
-// A read-only identity row (title / username / description) with an optional
-// trailing text action. Web's <button> action becomes an RN Pressable + Text.
-
-import { Pressable, View, Text as RNText } from 'react-native';
-import { useStyles } from './styles';
-
-export type UserData = {
-  userId: string;
-  title: string;
-  username?: string;
-  description?: string;
-  actionLabel?: string;
-  disabled?: boolean;
-};
-
-export type UserProps = {
-  user: UserData;
-  onActionClick?: (user: UserData) => void;
-};
-
-export function User({ user, onActionClick }: UserProps) {
-  const { styles } = useStyles(!!user.disabled);
-
-  return (
-    <View style={styles.user}>
-      <View style={styles.texts}>
-        <RNText style={styles.title} numberOfLines={1}>
-          {user.title}
-        </RNText>
-        {user.username ? (
-          <RNText style={styles.username} numberOfLines={1}>
-            {user.username}
-          </RNText>
-        ) : null}
-        {user.description ? (
-          <RNText style={styles.description} numberOfLines={1}>
-            {user.description}
-          </RNText>
-        ) : null}
-      </View>
-      {user.actionLabel ? (
-        <Pressable
-          disabled={user.disabled}
-          accessibilityRole="button"
-          onPress={() => onActionClick?.(user)}
-        >
-          <RNText style={styles.action}>{user.actionLabel}</RNText>
-        </Pressable>
-      ) : null}
-    </View>
-  );
-}

package/src/core/design/atoms/Input/User/index.ts

@@ -1,2 +0,0 @@
-export { User } from './User';
-export type { UserProps, UserData } from './User';

package/src/core/design/atoms/Input/User/styles.ts

@@ -1,62 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { useToken, type ColorTokenRef } from '../../../theme/useToken';
-import { AmityColorToken } from '../../../tokens/amity-color-tokens';
-
-// User row has only default / disabled states.
-const TITLE: Record<'default' | 'disabled', ColorTokenRef> = {
-  default: AmityColorToken.TextInputUserInputTitleDefault,
-  disabled: AmityColorToken.TextInputUserInputTitleDisabled,
-};
-const USERNAME: Record<'default' | 'disabled', ColorTokenRef> = {
-  default: AmityColorToken.TextInputUserInputUserNameDefault,
-  disabled: AmityColorToken.TextInputUserInputUserNameDisabled,
-};
-const DESCRIPTION: Record<'default' | 'disabled', ColorTokenRef> = {
-  default: AmityColorToken.TextInputUserInputTextDescriptionDefault,
-  disabled: AmityColorToken.TextInputUserInputTextDescriptionDisabled,
-};
-const ACTION: Record<'default' | 'disabled', ColorTokenRef> = {
-  default: AmityColorToken.TextInputUserInputActionDefault,
-  disabled: AmityColorToken.TextInputUserInputActionDisabled,
-};
-
-export const useStyles = (disabled: boolean) => {
-  const token = useToken();
-  const key = disabled ? 'disabled' : 'default';
-
-  const styles = StyleSheet.create({
-    user: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: 12,
-      width: '100%',
-    },
-    texts: {
-      flexShrink: 1,
-      gap: 2,
-      minWidth: 0,
-    },
-    title: {
-      fontSize: 15,
-      fontWeight: '600',
-      color: token(TITLE[key]),
-    },
-    username: {
-      fontSize: 13,
-      color: token(USERNAME[key]),
-    },
-    description: {
-      fontSize: 13,
-      color: token(DESCRIPTION[key]),
-    },
-    action: {
-      flexShrink: 0,
-      fontSize: 15,
-      fontWeight: '600',
-      color: token(ACTION[key]),
-    },
-  });
-
-  return { styles, token };
-};

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

@@ -1,9 +0,0 @@
-export { Input } from './Input';
-export { Boxed } from './Boxed';
-export { Text } from './Text';
-export { Chip } from './Chip';
-export { User } from './User';
-export type { BoxedProps, BoxedSize, BoxedVariant } from './Boxed';
-export type { TextProps } from './Text';
-export type { ChipProps, ChipData } from './Chip';
-export type { UserProps, UserData } from './User';

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

@@ -1,10 +0,0 @@
-// Loader atom — compound namespace mirroring AmityUiKitWeb
-// core/design/atoms/Loader (Loader.Spinner / Loader.Upload).
-
-import { Spinner } from './Spinner';
-import { Upload } from './Upload';
-
-export const Loader = {
-  Spinner,
-  Upload,
-};

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

@@ -1,30 +0,0 @@
-// Spinner atom — ported from AmityUiKitWeb core/design/atoms/Loader/Spinner.
-// Web draws a rotating two-tone SVG (track + arc); RN uses ActivityIndicator
-// (single tint) per the port's simplicity rule. The track color has no
-// ActivityIndicator slot, so only the arc/loader token is applied.
-
-import { ActivityIndicator } from 'react-native';
-import { useStyles } from './styles';
-
-export type SpinnerSize = 'sm' | 'lg';
-
-export type SpinnerProps = {
-  size?: SpinnerSize;
-  accessibilityLabel?: string;
-};
-
-export function Spinner({
-  size = 'lg',
-  accessibilityLabel = 'Loading',
-}: SpinnerProps) {
-  const { color, dimension } = useStyles(size);
-
-  return (
-    <ActivityIndicator
-      size={dimension}
-      color={color}
-      accessibilityRole="progressbar"
-      accessibilityLabel={accessibilityLabel}
-    />
-  );
-}

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

@@ -1,2 +0,0 @@
-export { Spinner } from './Spinner';
-export type { SpinnerProps, SpinnerSize } from './Spinner';

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

@@ -1,21 +0,0 @@
-import { useToken } from '../../../theme/useToken';
-import { AmityColorToken } from '../../../tokens/amity-color-tokens';
-import type { SpinnerSize } from './Spinner';
-
-// Geometry (SoT: Spinner.module.css, rem × 16): sm 1.5rem → 24, lg 2.5rem → 40.
-const DIMENSION: Record<SpinnerSize, number> = {
-  sm: 24,
-  lg: 40,
-};
-
-export const useStyles = (size: SpinnerSize) => {
-  const token = useToken();
-
-  return {
-    // Web arc uses --asc-color-surface-loaders-spinner-icon; the RN token set
-    // exposes SurfaceLoadersSpinnerPrimaryIcon (no ...Icon), which is the same slot.
-    color: token(AmityColorToken.SurfaceLoadersSpinnerPrimaryIcon),
-    dimension: DIMENSION[size],
-    token,
-  };
-};