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

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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,58 @@
+// 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

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

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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,46 @@
+// 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

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

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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,24 @@
+// 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

@@ -0,0 +1,85 @@
+// 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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,53 @@
+// 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

@@ -0,0 +1,17 @@
+// 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

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