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

package/src/core/design/icons/index.ts

@@ -1,9 +0,0 @@
-export { AmityIcon } from './AmityIcon';
-export type { AmityIconProps } from './AmityIcon';
-export {
-  getIconXml,
-  iconRegistry,
-  AMITY_ICON_COUNT,
-  ICON_FILL_PLACEHOLDER,
-} from './generated/iconRegistry';
-export type { AmityIconName } from './generated/iconRegistry';

package/src/core/design/molecules/SearchInput/SearchInput.tsx

@@ -1,58 +0,0 @@
-// SearchInput molecule — ported from AmityUiKitWeb core/design/molecules/SearchInput.
-// Composes the Boxed input atom (size=small, variant=square) with a leading
-// search glyph and a trailing clear button that appears only when there is text.
-
-import { Pressable } from 'react-native';
-import { Boxed } from '../../atoms/Input';
-import { AmityIcon } from '../../icons';
-import { ICON_TOKEN, useStyles } from './styles';
-
-export type SearchInputProps = {
-  value: string;
-  onChange: (value: string) => void;
-  /** Custom clear handler; defaults to clearing the value via onChange(''). */
-  onClear?: () => void;
-  placeholder?: string;
-  maxLength?: number;
-  accessibilityLabel?: string;
-  clearAccessibilityLabel?: string;
-};
-
-export function SearchInput({
-  value,
-  onChange,
-  onClear,
-  placeholder,
-  maxLength,
-  accessibilityLabel,
-  clearAccessibilityLabel = 'Clear search',
-}: SearchInputProps) {
-  const { styles } = useStyles();
-
-  return (
-    <Boxed
-      size="small"
-      variant="square"
-      value={value}
-      onChange={onChange}
-      placeholder={placeholder}
-      accessibilityLabel={accessibilityLabel ?? placeholder}
-      maxLength={maxLength}
-      leadingIcon={
-        <AmityIcon name="search-r" size={20} tokenColor={ICON_TOKEN} />
-      }
-      trailingIcon={
-        value ? (
-          <Pressable
-            style={styles.clearButton}
-            onPress={onClear ?? (() => onChange(''))}
-            accessibilityRole="button"
-            accessibilityLabel={clearAccessibilityLabel}
-          >
-            <AmityIcon name="clear-r" size={20} tokenColor={ICON_TOKEN} />
-          </Pressable>
-        ) : undefined
-      }
-    />
-  );
-}

package/src/core/design/molecules/SearchInput/index.ts

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

package/src/core/design/molecules/SearchInput/styles.ts

@@ -1,23 +0,0 @@
-import { StyleSheet } from 'react-native';
-import { useToken } from '../../theme/useToken';
-import { AmityColorToken } from '../../tokens/amity-color-tokens';
-
-// SearchInput leans on the Boxed atom for the field chrome; only the trailing
-// clear button needs local layout (web SearchInput.module.css clearButton:
-// 1.25rem = 20 square, centred). Icon tint uses the shared TextInput icon token.
-export const ICON_TOKEN = AmityColorToken.IconInputTextInputDefault;
-
-export const useStyles = () => {
-  const token = useToken();
-
-  const styles = StyleSheet.create({
-    clearButton: {
-      width: 20,
-      height: 20,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-  });
-
-  return { styles, token };
-};

package/src/core/design/molecules/Tabs/Tabs.tsx

@@ -1,46 +0,0 @@
-// Tabs molecule — ported from AmityUiKitWeb core/design/molecules/Tabs.
-// A tab BAR that composes the Tab atom. Web react-aria Tabs/TabList/TabPanel
-// → RN row of `Tab`. Selection (selectedKey/onSelectionChange) → active/onChange.
-// The web TabPanel content rendering is intentionally omitted: this molecule is
-// the bar only, and callers render the active panel themselves.
-
-import { type ReactNode } from 'react';
-import { View } from 'react-native';
-import { Tab } from '../../atoms/Tab';
-import { useStyles } from './styles';
-
-export type TabsVariant = 'pill' | 'underlined' | 'icon';
-
-export type TabItem = {
-  value: string;
-  label?: string;
-  icon?: ReactNode;
-  disabled?: boolean;
-};
-
-export type TabsProps = {
-  variant?: TabsVariant;
-  value: string;
-  onChange: (value: string) => void;
-  tabs: TabItem[];
-};
-
-export function Tabs({ variant = 'pill', value, onChange, tabs }: TabsProps) {
-  const { styles } = useStyles(variant);
-
-  return (
-    <View style={styles.tabList} accessibilityRole="tablist">
-      {tabs.map((tab) => (
-        <Tab
-          key={tab.value}
-          variant={variant}
-          label={tab.label}
-          icon={tab.icon}
-          active={tab.value === value}
-          disabled={tab.disabled}
-          onPress={() => onChange(tab.value)}
-        />
-      ))}
-    </View>
-  );
-}

package/src/core/design/molecules/Tabs/index.ts

@@ -1,2 +0,0 @@
-export { Tabs } from './Tabs';
-export type { TabsProps, TabsVariant, TabItem } from './Tabs';

package/src/core/design/molecules/Tabs/styles.ts

@@ -1,25 +0,0 @@
-import { StyleSheet } from 'react-native';
-import type { TabsVariant } from './Tabs';
-
-// Bar-level layout only — the web Tabs.module.css tabList has no colors, so no
-// color tokens are resolved here (all tab visuals live in the Tab atom).
-// Geometry (web css rem→px ×16, matching SoT geometry.json → tabs):
-//   pill:       gap 8  (tabs.pill.gap),      padding 12×16
-//   underlined: gap 20 (tabs.underline.ios.itemGap), padding 0×16
-//   icon:       gap 8,                        padding 0×16
-export const useStyles = (variant: TabsVariant) => {
-  const layout =
-    variant === 'pill'
-      ? { gap: 8, paddingVertical: 12, paddingHorizontal: 16 }
-      : { gap: variant === 'underlined' ? 20 : 8, paddingHorizontal: 16 };
-
-  const styles = StyleSheet.create({
-    tabList: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      ...layout,
-    },
-  });
-
-  return { styles };
-};

package/src/core/design/theme/AmityForceMode.tsx

@@ -1,24 +0,0 @@
-// AmityForceMode — force light/dark for a subtree (e.g. always-dark surfaces like
-// livestream/story). Ports the web's useForceDarkTheme to RN's context model:
-// it re-provides the theme with a fixed mode while preserving the parent's config + scope.
-
-import React from 'react';
-import {
-  AmityThemeProvider,
-  useAmityTheme,
-  type Mode,
-} from './AmityThemeProvider';
-
-export interface AmityForceModeProps {
-  mode: Mode;
-  children: React.ReactNode;
-}
-
-export function AmityForceMode({ mode, children }: AmityForceModeProps) {
-  const { scopeId, config } = useAmityTheme();
-  return (
-    <AmityThemeProvider mode={mode} scopeId={scopeId} config={config}>
-      {children}
-    </AmityThemeProvider>
-  );
-}

package/src/core/design/theme/AmityThemeProvider.tsx

@@ -1,85 +0,0 @@
-// AmityThemeProvider — resolves all design tokens to concrete colours for the active
-// mode + scope and provides them via context. RN has no CSS variables, so we eagerly
-// flatten every token (semantic → alias → theme key → hex) using the vendored
-// config-resolver.js. Mode is config-driven (not the OS setting), per the guide.
-// The pure resolution/mode logic lives in ./resolveTokens (unit-tested).
-
-import React, { createContext, useContext, useMemo } from 'react';
-import { useColorScheme } from 'react-native';
-import {
-  type Mode,
-  type TokenConfig,
-  type TokenTable,
-} from '../tokens/config-resolver';
-import designTokens from '../tokens/amity-uikit-design-tokens.json';
-import baseConfig from '../tokens/amity-uikit-config.json';
-import {
-  resolveAllTokens,
-  deriveMode,
-  effectiveConfig,
-  type ColorMap,
-  type PreferredTheme,
-} from './resolveTokens';
-
-const TABLE = designTokens as unknown as TokenTable;
-const BASE_CONFIG = baseConfig as unknown as TokenConfig;
-
-export interface AmityThemeContextValue {
-  mode: Mode;
-  scopeId: string;
-  colors: ColorMap;
-  /** The effective config (base + customer overrides), for nested providers. */
-  config: TokenConfig;
-}
-
-const AmityThemeContext = createContext<AmityThemeContextValue | null>(null);
-
-export interface AmityThemeProviderProps {
-  children: React.ReactNode;
-  /** Explicit mode override (wins over preferredTheme). */
-  mode?: Mode;
-  /** Config-driven theme: 'default' follows the OS colour scheme. */
-  preferredTheme?: PreferredTheme;
-  /** Customer overrides (partial); backfilled from the bundled base config. */
-  config?: TokenConfig;
-  /** Scope for the customization cascade; default global. */
-  scopeId?: string;
-}
-
-export function AmityThemeProvider({
-  children,
-  mode: modeProp,
-  preferredTheme = 'default',
-  config,
-  scopeId = '*/*/*',
-}: AmityThemeProviderProps) {
-  const scheme = useColorScheme();
-  const mode = deriveMode({ mode: modeProp, preferredTheme, scheme });
-
-  const value = useMemo<AmityThemeContextValue>(() => {
-    const effective = effectiveConfig(BASE_CONFIG, config);
-    return {
-      mode,
-      scopeId,
-      config: effective,
-      colors: resolveAllTokens(effective, TABLE, mode, scopeId),
-    };
-  }, [mode, scopeId, config]);
-
-  return (
-    <AmityThemeContext.Provider value={value}>
-      {children}
-    </AmityThemeContext.Provider>
-  );
-}
-
-export function useAmityTheme(): AmityThemeContextValue {
-  const ctx = useContext(AmityThemeContext);
-  if (!ctx) {
-    throw new Error('useAmityTheme must be used within an AmityThemeProvider');
-  }
-  return ctx;
-}
-
-export { AmityThemeContext };
-export type { Mode, ColorMap, PreferredTheme };

package/src/core/design/theme/index.ts

@@ -1,18 +0,0 @@
-export {
-  AmityThemeProvider,
-  useAmityTheme,
-  AmityThemeContext,
-} from './AmityThemeProvider';
-export type {
-  AmityThemeProviderProps,
-  AmityThemeContextValue,
-  PreferredTheme,
-  ColorMap,
-  Mode,
-} from './AmityThemeProvider';
-export { useToken } from './useToken';
-export type { ColorTokenRef } from './useToken';
-export { spacing, sp } from '../tokens/spacing';
-export type { SpacingToken } from '../tokens/spacing';
-export { AmityForceMode } from './AmityForceMode';
-export type { AmityForceModeProps } from './AmityForceMode';

package/src/core/design/theme/resolveTokens.ts

@@ -1,53 +0,0 @@
-// Pure, framework-free core of the theming layer — extracted so it can be unit-tested
-// without a React renderer. AmityThemeProvider is a thin wrapper over these functions.
-
-import {
-  resolveToken,
-  backfillThemeDefaults,
-  type Mode,
-  type TokenConfig,
-  type TokenTable,
-} from '../tokens/config-resolver';
-import { AmityColorToken } from '../tokens/amity-color-tokens';
-
-/** Resolved colours keyed by the semantic token path (e.g. "Surface/Page/Background/Default"). */
-export type ColorMap = Record<string, string>;
-
-export type PreferredTheme = 'light' | 'dark' | 'default';
-
-/** Eagerly resolve every AmityColorToken to a concrete hex for the mode + scope. */
-export function resolveAllTokens(
-  config: TokenConfig,
-  table: TokenTable,
-  mode: Mode,
-  scopeId: string
-): ColorMap {
-  const out: ColorMap = {};
-  for (const key of Object.keys(AmityColorToken)) {
-    const { path } = AmityColorToken[key as keyof typeof AmityColorToken];
-    out[path] = resolveToken(config, table, scopeId, mode, path).value;
-  }
-  return out;
-}
-
-/** Derive the active mode. Explicit `mode` wins; else `preferredTheme`; else the OS scheme. */
-export function deriveMode(opts: {
-  mode?: Mode;
-  preferredTheme?: PreferredTheme;
-  /** Accepts react-native's ColorSchemeName ('light' | 'dark' | null | undefined). */
-  scheme?: string | null;
-}): Mode {
-  const { mode, preferredTheme = 'default', scheme } = opts;
-  if (mode) return mode;
-  if (preferredTheme === 'dark') return 'dark';
-  if (preferredTheme === 'light') return 'light';
-  return scheme === 'dark' ? 'dark' : 'light';
-}
-
-/** Base config, with optional (partial) customer overrides backfilled on top. */
-export function effectiveConfig(
-  base: TokenConfig,
-  customer?: TokenConfig
-): TokenConfig {
-  return customer ? backfillThemeDefaults(customer, base) : base;
-}

package/src/core/design/theme/useToken.ts

@@ -1,17 +0,0 @@
-// useToken — the component-facing accessor. Returns a function that maps an
-// AmityColorToken to its resolved hex for the active mode + scope.
-//
-//   const token = useToken();
-//   backgroundColor: token(AmityColorToken.SurfacePageBackgroundDefault)
-
-import { useAmityTheme } from './AmityThemeProvider';
-
-/** Structural type of an AmityColorToken entry (only `.path` is needed to resolve). */
-export interface ColorTokenRef {
-  path: string;
-}
-
-export function useToken() {
-  const { colors } = useAmityTheme();
-  return (token: ColorTokenRef): string => colors[token.path];
-}

package/src/core/design/tokens/CHECKSUMS.json

@@ -1,9 +0,0 @@
-{
-  "schema_version": 3,
-  "tokenCount": 723,
-  "files": {
-    "AmityColorToken.swift": "4384091f42e900c459d73b1510aebdeaed8be290443c30048e72d09caa330d51",
-    "AmityColorToken.kt": "a6121fdf758cc232c9e3f64073866d0159bedaf071ff51e2f2b3a10487bb91f9",
-    "amity-color-tokens.ts": "1f06c867f9c87516a7fa8878dba3b198383075ec57b06fe1cfd5b345f372eeec"
-  }
-}