jp-composter 0.1.0

package/src/SliceUI/input/variants/CurrencyInput/NativeCurrencyInput.tsx

@@ -0,0 +1,181 @@
+// CurrencyInput/NativeCurrencyInput.tsx
+import React from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    TouchableOpacity,
+    FlatList,
+    TextInput,
+} from 'react-native';
+import { spacing } from '../../../values/Spacing';
+import {
+    currencySymbols,
+    availableCurrencies,
+} from '../../utils/inputUtils';
+import NativeBottomSheet from '../../components/NativeBottomSheet';
+import type { CurrencyInputProps } from './types';
+
+const NativeCurrencyInput = ({
+    value,
+    currency,
+    disabled,
+    labelText,
+    placeholder,
+    onChangeText,
+    onToggleDropdown,
+    onSelectCurrency,
+    currencyDropdownOpen,
+    colorTheme,
+}: CurrencyInputProps) => {
+    const currencySymbolColorStyle = {
+        color: disabled
+            ? colorTheme.colors.colorForegroundTertiary
+            : colorTheme.colors.colorForegroundPrimary,
+    };
+
+    const separatorColorStyle = {
+        backgroundColor: colorTheme.colors.colorBorderSubtle,
+    };
+
+    const currencyInputTextColorStyle = {
+        color: disabled
+            ? colorTheme.colors.colorForegroundTertiary
+            : colorTheme.colors.colorForegroundPrimary,
+    };
+
+    const renderCurrencyOption = ({ item }: { item: string }) => {
+        const selected = item === currency;
+        const currencyOptionBackgroundStyle = {
+            backgroundColor: selected
+                ? colorTheme.colors.colorStatePrimaryHover
+                : colorTheme.colors.colorBackgroundPrimary,
+        };
+        const currencyOptionTextColorStyle = {
+            color: colorTheme.colors.colorForegroundPrimary,
+        };
+
+        return (
+            <TouchableOpacity
+                style={[
+                    styles.currencyOption,
+                    currencyOptionBackgroundStyle,
+                ]}
+                activeOpacity={0.7}
+                onPress={() => {
+                    onSelectCurrency(item);
+                    onToggleDropdown();
+                }}
+            >
+                <Text
+                    style={[
+                        styles.currencyText,
+                        currencyOptionTextColorStyle,
+                    ]}
+                >
+                    {currencySymbols[item] || item} ({item})
+                </Text>
+            </TouchableOpacity>
+        );
+    };
+
+    return (
+        <>
+            {/* Input row */}
+            <View style={styles.nativeContainer}>
+                <TouchableOpacity
+                    style={styles.currencyButton}
+                    onPress={onToggleDropdown}
+                    disabled={disabled}
+                    activeOpacity={0.7}
+                >
+                    <Text
+                        style={[
+                            styles.currencySymbol,
+                            currencySymbolColorStyle,
+                        ]}
+                    >
+                        {currencySymbols[currency] || currency}
+                    </Text>
+                </TouchableOpacity>
+
+                <View
+                    style={[
+                        styles.separator,
+                        separatorColorStyle,
+                    ]}
+                />
+
+                <TextInput
+                    style={[
+                        styles.currencyInput,
+                        currencyInputTextColorStyle,
+                    ]}
+                    value={typeof value === 'string' ? value : ''}
+                    onChangeText={onChangeText}
+                    placeholder={!labelText ? placeholder : undefined}
+                    placeholderTextColor={
+                        colorTheme.colors.colorForegroundTertiary
+                    }
+                    editable={!disabled}
+                />
+            </View>
+
+            {/* Currency picker */}
+            <NativeBottomSheet
+                open={currencyDropdownOpen}
+                onClose={onToggleDropdown}
+                title="Select Currency"
+                heightRatio={0.4}
+                colorTheme={colorTheme}
+            >
+                <FlatList
+                    data={availableCurrencies}
+                    keyExtractor={(item) => item}
+                    renderItem={renderCurrencyOption}
+                    keyboardShouldPersistTaps="handled"
+                />
+            </NativeBottomSheet>
+        </>
+    );
+};
+
+const styles = StyleSheet.create({
+    nativeContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        minHeight: 48,
+    },
+
+    currencyButton: {
+        justifyContent: 'center',
+        paddingHorizontal: 12,
+    },
+
+    currencySymbol: {
+        fontSize: 16,
+        fontWeight: '500',
+    },
+    separator: {
+        width: 1,
+        height: 24,
+        marginHorizontal: 4,
+    },
+    currencyInput: {
+        flex: 1,
+        minWidth: 0,
+        fontSize: 16,
+        paddingLeft: spacing.space200,
+        paddingRight: spacing.space200,
+    },
+    currencyOption: {
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    currencyText: {
+        fontSize: 16,
+    },
+});
+
+export default NativeCurrencyInput;

package/src/SliceUI/input/variants/CurrencyInput/WebCurrencyInput.tsx

@@ -0,0 +1,163 @@
+// CurrencyInput/WebCurrencyInput.tsx
+import React, {useCallback, useMemo, useRef} from 'react';
+import {spacing} from '../../../values/Spacing';
+import {currencySymbols, availableCurrencies} from '../../utils/inputUtils';
+import type {CurrencyInputProps} from './types';
+import InputPortal from '../../components/InputPortal';
+
+const webStyles = {
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    minHeight: 'var(--slice-input-min-height, 32px)',
+  } as const,
+  selectorWrapper: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    height: '100%',
+  } as const,
+  currencyButton: {
+    background: 'transparent',
+    border: 'none',
+    fontSize: 'var(--slice-input-font-size, 16px)',
+    padding: '0 12px',
+    height: '100%',
+  } as const,
+  dropdownOption: {
+    padding: '6px 12px',
+    cursor: 'pointer',
+    userSelect: 'none',
+  } as const,
+  separator: {
+    width: 1,
+    height: 24,
+    margin: '0 4px',
+  } as const,
+  input: {
+    flex: 1,
+    minWidth: 0,
+    border: 'none',
+    outline: 'none',
+    fontSize: 'var(--slice-input-font-size, 16px)',
+    backgroundColor: 'transparent',
+    fontFamily: 'Lato',
+  } as const,
+};
+
+const WebCurrencyInput = ({
+  value,
+  currency,
+  disabled,
+  labelText,
+  placeholder,
+  onChangeText,
+  onToggleDropdown,
+  onCloseDropdown,
+  onSelectCurrency,
+  currencyDropdownOpen,
+  colorTheme,
+  portalAnchorRef,
+}: CurrencyInputProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const resolvedAnchorRef = portalAnchorRef ?? containerRef;
+  const handlePortalClose = onCloseDropdown ?? onToggleDropdown;
+
+  const buttonTextColor = disabled
+    ? colorTheme.colors.colorForegroundTertiary
+    : colorTheme.colors.colorForegroundPrimary;
+
+  const inputTextColor = disabled
+    ? colorTheme.colors.colorForegroundTertiary
+    : colorTheme.colors.colorForegroundPrimary;
+
+  const currencyButtonStyle = useMemo(
+    () => ({
+      ...webStyles.currencyButton,
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      color: buttonTextColor,
+    }),
+    [disabled, buttonTextColor],
+  );
+
+  const separatorStyle = useMemo(
+    () => ({
+      ...webStyles.separator,
+      backgroundColor: colorTheme.colors.colorBorderSubtle,
+    }),
+    [colorTheme],
+  );
+
+  const inputStyle = useMemo(
+    () => ({
+      ...webStyles.input,
+      paddingLeft: spacing.space200,
+      paddingRight: spacing.space200,
+      color: inputTextColor,
+    }),
+    [inputTextColor],
+  );
+
+  const getCurrencyOptionStyle = useCallback(
+    (itemCurrency: string) => ({
+      ...webStyles.dropdownOption,
+      backgroundColor:
+        itemCurrency === currency
+          ? colorTheme.colors.colorBorderAccent
+          : 'transparent',
+      color: colorTheme.colors.colorForegroundPrimary,
+    }),
+    [currency, colorTheme],
+  );
+
+  const renderCurrencyOptions = useMemo(
+    () =>
+      availableCurrencies.map(c => (
+        <div
+          key={c}
+          onClick={() => onSelectCurrency(c)}
+          style={getCurrencyOptionStyle(c)}>
+          {currencySymbols[c] || c}
+        </div>
+      )),
+    [getCurrencyOptionStyle, onSelectCurrency],
+  );
+
+  return (
+    <div ref={containerRef} style={webStyles.root}>
+      <div style={webStyles.selectorWrapper}>
+        <button
+          type="button"
+          onClick={onToggleDropdown}
+          disabled={disabled}
+          aria-label="Select currency"
+          style={currencyButtonStyle}>
+          {currencySymbols[currency] || currency}
+        </button>
+      </div>
+
+      <InputPortal
+        open={currencyDropdownOpen && !disabled}
+        anchorRef={resolvedAnchorRef}
+        borderColor={colorTheme.colors.colorBorderSubtle}
+        backgroundColor={colorTheme.colors.colorBackgroundPrimary}
+        onRequestClose={handlePortalClose}
+        maxHeight={180}>
+        {renderCurrencyOptions}
+      </InputPortal>
+
+      <div style={separatorStyle} />
+
+      <input
+        type="text"
+        value={typeof value === 'string' ? value : ''}
+        onChange={e => onChangeText?.(e.target.value)}
+        placeholder={!labelText ? placeholder : undefined}
+        disabled={disabled}
+        style={inputStyle}
+      />
+    </div>
+  );
+};
+
+export default React.memo(WebCurrencyInput);

package/src/SliceUI/input/variants/CurrencyInput/types.ts

@@ -0,0 +1,17 @@
+// CurrencyInput/types.ts
+import type React from 'react';
+
+export interface CurrencyInputProps {
+  value?: string;
+  currency: string;
+  disabled?: boolean;
+  labelText?: string;
+  placeholder?: string;
+  onChangeText?: (value: string) => void;
+  onToggleDropdown: () => void;
+  onCloseDropdown?: () => void;
+  onSelectCurrency: (currency: string) => void;
+  currencyDropdownOpen: boolean;
+  colorTheme: any;
+  portalAnchorRef?: React.RefObject<HTMLElement>;
+}

package/src/SliceUI/input/variants/PhoneInput/NativePhoneInput.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  FlatList,
+  TextInput,
+  Animated,
+} from 'react-native';
+import type {CountryCode} from 'libphonenumber-js';
+import {getCountries, getCountryCallingCode} from 'react-phone-number-input';
+import NativeBottomSheet from '../../components/NativeBottomSheet';
+import type {PhoneInputProps} from './types';
+
+const flagSizeBySize: Record<string, {width: number; height: number}> = {
+  small: {width: 20, height: 15},
+  medium: {width: 24, height: 18},
+  large: {width: 28, height: 21},
+  xlarge: {width: 32, height: 24},
+  xxlarge: {width: 36, height: 27},
+};
+
+const NativePhoneInput = ({
+  mode,
+  country,
+  number,
+  dropdownOpen,
+  disabled,
+  labelText,
+  placeholder,
+  onToggleDropdown,
+  onSelectCountry,
+  onNumberChange,
+  onFocus,
+  onBlur,
+  colorTheme,
+  size = 'medium',
+}: PhoneInputProps) => {
+  const flagSize = flagSizeBySize[size] || flagSizeBySize.medium;
+  const flagSizeStyle = {
+    width: flagSize.width,
+    height: flagSize.height,
+  };
+  const countryCodeTextColorStyle = {
+    color: colorTheme.colors.colorForegroundPrimary,
+  };
+  const separatorColorStyle = {
+    backgroundColor: colorTheme.colors.colorBorderSubtle,
+  };
+  const phoneInputTextColorStyle = {
+    color: colorTheme.colors.colorForegroundPrimary,
+  };
+
+  const renderCountryOption = ({item}: {item: string}) => {
+    const isSelected = item === country;
+    const countryOptionBackgroundStyle = {
+      backgroundColor: isSelected
+        ? colorTheme.colors.colorStatePrimaryHover
+        : colorTheme.colors.colorBackgroundPrimary,
+    };
+    const countryTextColorStyle = {
+      color: colorTheme.colors.colorForegroundPrimary,
+    };
+
+    return (
+      <TouchableOpacity
+        style={[styles.countryOption, countryOptionBackgroundStyle]}
+        activeOpacity={0.7}
+        onPress={() => {
+          onSelectCountry(item as CountryCode);
+          onToggleDropdown();
+        }}>
+        {mode === 'flag' && (
+          <Animated.Image
+            source={{
+              uri: `https://flagcdn.com/w20/${item.toLowerCase()}.png`,
+            }}
+            style={[styles.flagImage, flagSizeStyle]}
+          />
+        )}
+
+        <Text style={[styles.countryText, countryTextColorStyle]}>
+          +{getCountryCallingCode(item as CountryCode)} {item}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <>
+      {/* Input row */}
+      <View style={styles.nativeContainer}>
+        <TouchableOpacity
+          style={styles.countryCodeButton}
+          onPress={onToggleDropdown}
+          disabled={disabled}
+          activeOpacity={0.7}>
+          {mode === 'flag' && (
+            <Animated.Image
+              source={{
+                uri: `https://flagcdn.com/w40/${country.toLowerCase()}.png`,
+              }}
+              style={[styles.flagImage, flagSizeStyle]}
+            />
+          )}
+
+          <Text style={[styles.countryCodeText, countryCodeTextColorStyle]}>
+            +{getCountryCallingCode(country)}
+          </Text>
+        </TouchableOpacity>
+
+        <View style={[styles.separator, separatorColorStyle]} />
+
+        <TextInput
+          style={[styles.phoneInput, phoneInputTextColorStyle]}
+          value={number}
+          onChangeText={onNumberChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          placeholder={!labelText ? placeholder : undefined}
+          placeholderTextColor={colorTheme.colors.colorForegroundTertiary}
+          editable={!disabled}
+          keyboardType="phone-pad"
+        />
+      </View>
+
+      {/* Country picker */}
+      <NativeBottomSheet
+        open={dropdownOpen}
+        onClose={onToggleDropdown}
+        title="Select Country"
+        heightRatio={0.6}
+        colorTheme={colorTheme}>
+        <FlatList
+          data={getCountries()}
+          keyExtractor={item => item}
+          renderItem={renderCountryOption}
+          keyboardShouldPersistTaps="handled"
+        />
+      </NativeBottomSheet>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  nativeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  countryCodeButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+  },
+  flagImage: {
+    borderRadius: 2,
+    marginRight: 8,
+  },
+  countryCodeText: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  separator: {
+    width: 1,
+    height: 24,
+    marginHorizontal: 8,
+  },
+  phoneInput: {
+    flex: 1,
+    fontSize: 16,
+    paddingHorizontal: 8,
+    paddingVertical: 0,
+    textAlignVertical: 'center',
+  },
+  countryOption: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+  },
+  countryText: {
+    fontSize: 16,
+    marginLeft: 12,
+  },
+});
+
+export default NativePhoneInput;

package/src/SliceUI/input/variants/PhoneInput/PhoneInput.tsx

@@ -0,0 +1,16 @@
+// PhoneInput.tsx
+import React from 'react';
+import { isWeb } from '../../utils/inputUtils';
+import type { PhoneInputProps } from './types';
+import NativePhoneInput from './NativePhoneInput';
+import WebPhoneInput from './WebPhoneInput';
+
+const PhoneInput = (props: PhoneInputProps) => {
+  if (isWeb) {
+    return <WebPhoneInput {...props} />;
+  }
+
+  return <NativePhoneInput {...props} />;
+};
+
+export default PhoneInput;