jp-composter 0.1.0

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

@@ -0,0 +1,291 @@
+import React, {useCallback, useMemo, useRef} from 'react';
+import {spacing} from '../../../values/Spacing';
+import {getCountries, getCountryCallingCode} from 'react-phone-number-input';
+import type {CountryCode} from 'libphonenumber-js';
+import type {PhoneInputProps} from './types';
+import InputPortal from '../../components/InputPortal';
+
+const webStyles = {
+  flagModeContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    flex: 1,
+  } as const,
+  selectorButton: {
+    background: 'transparent',
+    border: 'none',
+    display: 'flex',
+    alignItems: 'center',
+  } as const,
+  codeSelectorButton: {
+    background: 'transparent',
+    border: 'none',
+    userSelect: 'none',
+  } as const,
+  flagImage: {
+    objectFit: 'cover',
+  } as const,
+  separator: {
+    width: 1,
+    margin: '0 4px',
+  } as const,
+  input: {
+    flex: 1,
+    border: 'none',
+    outline: 'none',
+    backgroundColor: 'transparent',
+    fontFamily: 'Lato',
+  } as const,
+  container: {
+    position: 'relative',
+    width: '100%',
+  } as const,
+  inputRow: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+  } as const,
+  dropdownOption: {
+    padding: '8px 12px',
+    cursor: 'pointer',
+    userSelect: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+  } as const,
+};
+
+const WebPhoneInput = ({
+  mode,
+  country,
+  number,
+  dropdownOpen,
+  disabled,
+  labelText,
+  placeholder,
+  onToggleDropdown,
+  onCloseDropdown,
+  onSelectCountry,
+  onNumberChange,
+  onFocus,
+  onBlur,
+  colorTheme,
+  size = 'medium',
+  portalAnchorRef,
+}: PhoneInputProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const resolvedAnchorRef = portalAnchorRef ?? containerRef;
+  const handlePortalClose = onCloseDropdown ?? onToggleDropdown;
+
+  const fontSize =
+    {
+      small: '14px',
+      medium: '16px',
+      large: '18px',
+      xlarge: '20px',
+      xxlarge: '22px',
+    }[size] || '16px';
+
+  const minHeight =
+    {
+      small: '20px',
+      medium: '24px',
+      large: '32px',
+      xlarge: '36px',
+      xxlarge: '40px',
+    }[size] || '24px';
+
+  const padding =
+    {
+      small: '0 6px',
+      medium: '0 8px',
+      large: '0 12px',
+      xlarge: '0 14px',
+      xxlarge: '0 16px',
+    }[size] || '0 8px';
+
+  const flagSize = {
+    small: {width: 16, height: 12},
+    medium: {width: 20, height: 15},
+    large: {width: 24, height: 18},
+    xlarge: {width: 28, height: 21},
+    xxlarge: {width: 32, height: 24},
+  }[size] || {width: 20, height: 15};
+
+  const flagImageStyle = useMemo(
+    () => ({
+      ...webStyles.flagImage,
+      width: flagSize.width,
+      height: flagSize.height,
+    }),
+    [flagSize.height, flagSize.width],
+  );
+
+  const flagSelectorButtonStyle = useMemo(
+    () => ({
+      ...webStyles.selectorButton,
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      padding,
+    }),
+    [disabled, padding],
+  );
+
+  const codeSelectorButtonStyle = useMemo(
+    () => ({
+      ...webStyles.codeSelectorButton,
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      fontSize,
+      padding,
+    }),
+    [disabled, fontSize, padding],
+  );
+
+  const separatorStyle = useMemo(
+    () => ({
+      ...webStyles.separator,
+      height: minHeight,
+      backgroundColor: colorTheme.colors.colorBorderSubtle,
+    }),
+    [minHeight, colorTheme],
+  );
+
+  const inputStyle = useMemo(
+    () => ({
+      ...webStyles.input,
+      fontSize,
+      paddingLeft: spacing.space200,
+      paddingRight: spacing.space200,
+      color: colorTheme.colors.colorForegroundPrimary,
+      minHeight,
+    }),
+    [fontSize, minHeight, colorTheme],
+  );
+
+  const getCountryOptionStyle = useCallback(
+    (countryCode: string) => ({
+      ...webStyles.dropdownOption,
+      backgroundColor:
+        countryCode === country
+          ? colorTheme.colors.colorBorderAccent
+          : 'transparent',
+      color: colorTheme.colors.colorForegroundPrimary,
+    }),
+    [country, colorTheme],
+  );
+
+  const dropdownOptionLabelStyle = useMemo(() => ({fontSize}), [fontSize]);
+
+  const countries = useMemo(() => getCountries() as CountryCode[], []);
+
+  const countryOptions = useMemo(
+    () =>
+      countries.map(countryCode => ({
+        countryCode,
+        callingCode: getCountryCallingCode(countryCode),
+      })),
+    [countries],
+  );
+
+  const renderCountryOptions = useMemo(
+    () =>
+      countryOptions.map(({countryCode, callingCode}) => (
+        <div
+          key={countryCode}
+          onClick={() => onSelectCountry(countryCode)}
+          style={getCountryOptionStyle(countryCode)}>
+          {mode === 'flag' && (
+            <img
+              src={`https://flagcdn.com/w40/${countryCode.toLowerCase()}.png`}
+              alt={countryCode}
+              style={flagImageStyle}
+            />
+          )}
+
+          <span style={dropdownOptionLabelStyle}>
+            +{callingCode} {countryCode}
+          </span>
+        </div>
+      )),
+    [
+      countryOptions,
+      dropdownOptionLabelStyle,
+      flagImageStyle,
+      getCountryOptionStyle,
+      mode,
+      onSelectCountry,
+    ],
+  );
+
+  return (
+    <div ref={containerRef} style={webStyles.container}>
+      <div style={webStyles.inputRow}>
+        {mode === 'flag' ? (
+          <div style={webStyles.flagModeContainer}>
+            <button
+              type="button"
+              onClick={onToggleDropdown}
+              aria-label="Select country"
+              disabled={disabled}
+              style={flagSelectorButtonStyle}>
+              <img
+                src={`https://flagcdn.com/w40/${country.toLowerCase()}.png`}
+                alt={country}
+                style={flagImageStyle}
+              />
+            </button>
+
+            <div style={separatorStyle} />
+
+            <input
+              type="tel"
+              value={number}
+              onChange={e => onNumberChange(e.target.value)}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              placeholder={!labelText ? placeholder : undefined}
+              disabled={disabled}
+              style={inputStyle}
+              aria-label={labelText || placeholder}
+            />
+          </div>
+        ) : (
+          <>
+            <button
+              type="button"
+              onClick={onToggleDropdown}
+              disabled={disabled}
+              aria-label="Select country code"
+              style={codeSelectorButtonStyle}>
+              +{getCountryCallingCode(country)}
+            </button>
+
+            <div style={separatorStyle} />
+
+            <input
+              type="tel"
+              value={number}
+              onChange={e => onNumberChange(e.target.value)}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              placeholder={!labelText ? placeholder : undefined}
+              disabled={disabled}
+              style={inputStyle}
+              aria-label={labelText || placeholder}
+            />
+          </>
+        )}
+      </div>
+
+      <InputPortal
+        open={dropdownOpen}
+        anchorRef={resolvedAnchorRef}
+        borderColor={colorTheme.colors.colorBorderSubtle}
+        backgroundColor={colorTheme.colors.colorBackgroundPrimary}
+        onRequestClose={handlePortalClose}>
+        {renderCountryOptions}
+      </InputPortal>
+    </div>
+  );
+};
+
+export default React.memo(WebPhoneInput);

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

@@ -0,0 +1,22 @@
+// types.ts
+import type React from 'react';
+import type {CountryCode} from 'libphonenumber-js';
+
+export interface PhoneInputProps {
+  mode: 'flag' | 'code';
+  country: CountryCode;
+  number: string;
+  dropdownOpen: boolean;
+  disabled?: boolean;
+  labelText?: string;
+  placeholder?: string;
+  onToggleDropdown: () => void;
+  onCloseDropdown?: () => void;
+  onSelectCountry: (country: CountryCode) => void;
+  onNumberChange: (value: string) => void;
+  onFocus?: (e: any) => void;
+  onBlur?: (e: any) => void;
+  colorTheme: any;
+  size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+  portalAnchorRef?: React.RefObject<HTMLElement>;
+}

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

@@ -0,0 +1,407 @@
+import React, { memo, useMemo, useCallback, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  FlatList,
+  ScrollView,
+  LayoutAnimation,
+  UIManager,
+} from 'react-native';
+import { spacing } from '../../../values/Spacing';
+import SelectChips from '../../components/SelectChip';
+import SelectListItem from '../../components/SelectListItem';
+import NativeBottomSheet from '../../components/NativeBottomSheet';
+import Typography from '../../../typography/Typography';
+import { useSliceTheme } from '../../../contextProvider/context';
+import type { SelectInputProps } from './types';
+import type { SelectOption } from '../../Type';
+import { isWeb } from '../../utils/inputUtils';
+
+const MAX_VISIBLE_CHIPS = 3;
+const ITEM_HEIGHT = 52;
+
+const SelectInput = memo(({
+  value,
+  displayValue,
+  searchable = false,
+  normalizedMultiple,
+  normalizedListType = 'default',
+  selectDropdownOpen,
+  filteredOptions,
+  options,
+  searchValue,
+  setSearchValue,
+  onOpen,
+  onClose,
+  onKeyDown,
+  onOptionSelect,
+  onCheckboxToggle,
+  colorTheme,
+  placeholder,
+  noItemText = 'No items',
+  maxAllowed,
+  maxVisibleItems,
+  selectedIcon,
+  selectedValues,
+  disabled = false,
+  registerOptionRef: _registerOptionRef,
+  inputRef,
+  size = 'medium',
+  expandChips = false,
+}: SelectInputProps) => {
+  const { deviceBreakpoint } = useSliceTheme();
+  const isWebMobile = isWeb && (deviceBreakpoint === 'xs' || deviceBreakpoint === 'sm');
+  const useBottomSheetMode = !isWeb || isWebMobile;
+
+  useEffect(() => {
+    if (!isWeb && UIManager.setLayoutAnimationEnabledExperimental) {
+      UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
+  }, []);
+
+  const hasMultipleValues = useMemo(() => {
+    return !!normalizedMultiple && Array.isArray(value) && value.length > 0;
+  }, [normalizedMultiple, value]);
+
+  const labels = useMemo(() => {
+    return selectedValues
+      .map(v => options.find(o => o.value === v)?.label)
+      .filter(Boolean) as string[];
+  }, [selectedValues, options]);
+
+  const visibleLabels = expandChips ? labels : labels.slice(0, MAX_VISIBLE_CHIPS);
+  const visibleValues = expandChips ? selectedValues : selectedValues.slice(0, MAX_VISIBLE_CHIPS);
+  const overflowCount = expandChips ? 0 : Math.max(labels.length - MAX_VISIBLE_CHIPS, 0);
+  const nativeListMaxHeight = useMemo(() => {
+    return maxVisibleItems && maxVisibleItems > 0
+      ? maxVisibleItems * ITEM_HEIGHT
+      : 280;
+  }, [maxVisibleItems]);
+
+  const hasReachedMaxAllowed = useMemo(() => {
+    return !!normalizedMultiple
+      && maxAllowed !== undefined
+      && selectedValues.length >= maxAllowed;
+  }, [normalizedMultiple, maxAllowed, selectedValues.length]);
+
+  const inputTextColor = disabled
+    ? colorTheme.colors.colorForegroundTertiary
+    : colorTheme.colors.colorForegroundPrimary;
+
+  const searchableWithChipsRowStyle = useMemo(
+    () => [
+      styles.searchableWithChipsRow,
+      expandChips ? styles.searchableWithChipsRowWrap : styles.searchableWithChipsRowNoWrap,
+    ],
+    [expandChips],
+  );
+
+  const inputTextColorStyle = useMemo(
+    () => ({
+      color: inputTextColor,
+    }),
+    [inputTextColor],
+  );
+
+  const bottomSheetSearchInputThemeStyle = useMemo(
+    () => ({
+      color: inputTextColor,
+      borderColor: colorTheme.colors.colorBorderSubtle,
+      backgroundColor: colorTheme.colors.colorBackgroundPrimary,
+    }),
+    [inputTextColor, colorTheme],
+  );
+
+  const emptyTextStyle = useMemo(
+    () => ({
+      color: colorTheme.colors.colorForegroundSecondary,
+    }),
+    [colorTheme],
+  );
+
+  const nativeListMaxHeightStyle = useMemo(
+    () => ({
+      maxHeight: nativeListMaxHeight,
+    }),
+    [nativeListMaxHeight],
+  );
+
+  const webSearchInputFocusResetStyle = useMemo(
+    () => ({
+      ['outlineStyle' as any]: 'none',
+      ['outlineWidth' as any]: 0,
+      ['outlineColor' as any]: 'transparent',
+      ['boxShadow' as any]: 'none',
+    }),
+    [],
+  );
+
+  const handleSearchChange = useCallback((inputValue: string) => {
+    if (disabled) {return;}
+
+    setSearchValue(inputValue);
+    if (inputValue && !selectDropdownOpen) {onOpen();}
+  }, [disabled, selectDropdownOpen, onOpen, setSearchValue]);
+
+  useEffect(() => {
+    if (!isWeb && normalizedMultiple && expandChips) {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    }
+  }, [expandChips, normalizedMultiple, visibleLabels.length, overflowCount]);
+
+  const renderChips = () => (
+    <>
+      <SelectChips
+        labels={visibleLabels}
+        values={visibleValues}
+        colorTheme={colorTheme}
+        disabled={disabled}
+        size={size}
+        onRemove={onOptionSelect}
+        wrap={expandChips}
+      />
+      {overflowCount > 0 && (
+        <SelectChips
+          labels={[`+${overflowCount}`]}
+          colorTheme={colorTheme}
+          disabled
+          size={size}
+          wrap={expandChips}
+        />
+      )}
+    </>
+  );
+
+  const renderNativeOption = ({ item, index }: { item: SelectOption; index: number }) => {
+    const isSelected = normalizedMultiple
+      ? selectedValues.includes(item.value)
+      : value === item.value;
+    const optionDisabled = disabled || (hasReachedMaxAllowed && !isSelected);
+
+    return (
+      <SelectListItem
+        option={item}
+        index={index}
+        isSelected={isSelected}
+        normalizedListType={normalizedListType}
+        selectedIcon={selectedIcon}
+        onOptionSelect={(selectedValue: string) => {
+          onOptionSelect(selectedValue);
+          if (!normalizedMultiple) {
+            onClose();
+          }
+        }}
+        onCheckboxToggle={onCheckboxToggle}
+        colorTheme={colorTheme}
+        disabled={optionDisabled}
+      />
+    );
+  };
+
+  return (
+    <>
+      {isWeb && searchable && !isWebMobile ? (
+        hasMultipleValues ? (
+          <View style={styles.searchableWithChipsContainer}>
+            <View style={searchableWithChipsRowStyle}>
+              {renderChips()}
+              <TextInput
+                ref={inputRef as any}
+                value={searchValue}
+                onChangeText={handleSearchChange}
+                onFocus={disabled ? undefined : onOpen}
+                editable={!disabled}
+                style={[
+                  styles.searchInputWithChips,
+                  inputTextColorStyle,
+                  webSearchInputFocusResetStyle,
+                ]}
+                {...(isWeb ? { onKeyDown: onKeyDown as any } : {})}
+              />
+            </View>
+          </View>
+        ) : (
+          <TextInput
+            ref={inputRef as any}
+            value={selectDropdownOpen ? searchValue : (searchValue || displayValue)}
+            onChangeText={handleSearchChange}
+            onFocus={disabled ? undefined : onOpen}
+            editable={!disabled}
+            placeholder={!displayValue ? placeholder : ''}
+            placeholderTextColor={colorTheme.colors.colorForegroundTertiary}
+            style={[
+              styles.searchInput,
+              inputTextColorStyle,
+              webSearchInputFocusResetStyle,
+            ]}
+            {...(isWeb ? { onKeyDown: onKeyDown as any } : {})}
+          />
+        )
+      ) : (
+        <TouchableOpacity
+          onPress={disabled ? undefined : onOpen}
+          activeOpacity={disabled ? 1 : 0.7}
+          style={[
+            styles.triggerContainer,
+            hasMultipleValues && styles.triggerContainerMultiple,
+            hasMultipleValues && expandChips && styles.triggerContainerExpanded,
+          ]}
+          {...(isWeb
+            ? {
+              className: 'select-button',
+              onClick: disabled ? undefined : onOpen,
+            }
+            : {})}
+        >
+          {hasMultipleValues ? (
+            expandChips ? (
+              <ScrollView
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                style={styles.chipsScroll}
+                contentContainerStyle={styles.chipsContainerScroll}
+              >
+                <View style={styles.chipsContainerRow}>
+                  {renderChips()}
+                </View>
+              </ScrollView>
+            ) : (
+              <View style={styles.chipsContainer}>
+                {renderChips()}
+              </View>
+            )
+          ) : (
+            <Typography
+              variant="body2Regular"
+              style={inputTextColorStyle}
+            >
+              {displayValue}
+            </Typography>
+          )}
+        </TouchableOpacity>
+      )}
+
+      {useBottomSheetMode ? (
+        <NativeBottomSheet
+          open={selectDropdownOpen}
+          onClose={onClose}
+          title={placeholder}
+          fitContent
+          avoidKeyboardForHeader={searchable}
+          headerContent={searchable ? (
+            <TextInput
+              ref={inputRef as any}
+              value={searchValue}
+              onChangeText={setSearchValue}
+              placeholder="Search..."
+              placeholderTextColor={colorTheme.colors.colorForegroundTertiary}
+              editable={!disabled}
+              autoFocus
+              style={[
+                styles.bottomSheetSearchInput,
+                bottomSheetSearchInputThemeStyle,
+              ]}
+            />
+          ) : undefined}
+          colorTheme={colorTheme}
+        >
+          {filteredOptions.length === 0 ? (
+            <View style={styles.emptyContainer}>
+              <Text style={emptyTextStyle}>
+                {noItemText}
+              </Text>
+            </View>
+          ) : (
+            <View style={[styles.nativeListContainer, nativeListMaxHeightStyle]}>
+              <FlatList
+                data={filteredOptions}
+                keyExtractor={(item) => item.value}
+                renderItem={renderNativeOption}
+                keyboardShouldPersistTaps="handled"
+              />
+            </View>
+          )}
+        </NativeBottomSheet>
+      ) : null}
+    </>
+  );
+});
+
+SelectInput.displayName = 'SelectInput';
+
+const styles = StyleSheet.create({
+  searchableWithChipsContainer: {
+    flex: 1,
+    paddingHorizontal: spacing.space200,
+  },
+  searchableWithChipsRow: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  searchableWithChipsRowWrap: {
+    flexWrap: 'wrap',
+  },
+  searchableWithChipsRowNoWrap: {
+    flexWrap: 'nowrap',
+  },
+  searchInputWithChips: {
+    flex: 1,
+    minWidth: 40,
+    marginLeft: spacing.space100,
+    backgroundColor: 'transparent',
+  },
+  searchInput: {
+    flex: 1,
+    paddingHorizontal: spacing.space200,
+    backgroundColor: 'transparent',
+  },
+  triggerContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    paddingHorizontal: spacing.space200,
+  },
+  triggerContainerMultiple: {
+    paddingVertical: spacing.space50,
+    alignItems: 'stretch',
+  },
+  triggerContainerExpanded: {
+    paddingVertical: 0,
+  },
+  chipsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    flexShrink: 1,
+  },
+  chipsScroll: {
+    width: '100%',
+  },
+  chipsContainerScroll: {
+    alignItems: 'center',
+    paddingVertical: spacing.space50,
+    paddingRight: spacing.space100,
+  },
+  chipsContainerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  emptyContainer: {
+    padding: 32,
+    alignItems: 'center',
+  },
+  nativeListContainer: {
+    width: '100%',
+  },
+  bottomSheetSearchInput: {
+    height: 40,
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 12,
+  },
+});
+
+export default SelectInput;