jp-composter 0.1.0

package/src/SliceUI/input/Input.tsx

@@ -0,0 +1,573 @@
+import React, {forwardRef, useMemo, useRef, useState, useCallback} from 'react';
+import {View, Text, StyleSheet, Animated} from 'react-native';
+
+import {useSliceTheme} from '../contextProvider/context';
+import {useGetColors} from '../theme/dummyColors';
+import {resolveVariant} from '../responsive/helper';
+import {spacing} from '../values/Spacing';
+
+import type {ExtendedInputProps, InputSizeType} from './Type';
+
+import {
+  isWeb,
+  getNormalizedVariant,
+  getNormalizedMultiple,
+  getNormalizedListType,
+  isSelectVariant,
+  getDisplayValue,
+} from './utils/inputUtils';
+
+import {useInputState} from './hooks/useInputState';
+import {useLabelAnimation} from './hooks/useLabelAnimation';
+import {useSelectLogic} from './hooks/useSelectLogic';
+import {useOutsideClick} from './hooks/useOutsideClick';
+import IconMoon from '../IconMoon';
+import FONT_ICON from '../assets/resources/fonts/FontIcon.json';
+import Icon from '../icon/Icon';
+
+import TextInputVariant from './variants/TextInput';
+import CurrencyInput from './variants/CurrencyInput/CurrencyInput';
+import PhoneInput from './variants/PhoneInput/PhoneInput';
+import SelectInput from './variants/SelectInput/SelectInput';
+import SelectList from './components/SelectList';
+
+import {getCountryCallingCode} from 'react-phone-number-input';
+import type {CountryCode} from 'libphonenumber-js';
+import {colors} from '../colors/Pallete';
+
+const labelTopBySize: Record<InputSizeType, number> = {
+  small: 14,
+  medium: 16,
+  large: 18,
+  xlarge: 17,
+  xxlarge: 19,
+};
+
+const Input = forwardRef<any, ExtendedInputProps>((props, ref) => {
+  const {
+    variant = 'outlined',
+    size = 'medium',
+    labelText,
+    error,
+    helperText,
+    containerStyle,
+    inputStyle,
+    labelStyle,
+    helperTextStyle,
+    value,
+    onChangeText,
+    onFocus,
+    onBlur,
+    placeholder,
+    prefixIcon,
+    suffixIcon,
+    disabled,
+    hover = false,
+    multiple,
+    listType = 'default',
+    searchable = false,
+    options = [],
+    noItemText,
+    maxVisibleItems,
+    selectedIcon,
+    ...rest
+  } = props;
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const webInputContainerRef = useRef<any>(null);
+
+  const normalizedVariant = getNormalizedVariant(variant);
+  const normalizedMultiple = getNormalizedMultiple(variant, multiple);
+  const normalizedListType = getNormalizedListType(variant, listType);
+
+  const [currency, setCurrency] = React.useState('CAD');
+  const [currencyDropdownOpen, setCurrencyDropdownOpen] = React.useState(false);
+  const [country, setCountry] = useState<CountryCode>('CA');
+  const [number, setNumber] = useState('');
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+
+  const onNumberChange = (val: string) => {
+    setNumber(val);
+    const fullNumber = `+${getCountryCallingCode(country)}${val.replace(
+      /\D/g,
+      '',
+    )}`;
+    (onChangeText as any)?.(fullNumber);
+  };
+
+  const rawTheme = useGetColors();
+  const colorTheme = useMemo(() => rawTheme, [rawTheme]);
+
+  const {theme, deviceBreakpoint} = useSliceTheme();
+  const isWebMobile =
+    isWeb && (deviceBreakpoint === 'xs' || deviceBreakpoint === 'sm');
+  const responsiveSize = useMemo(
+    () => resolveVariant(size, deviceBreakpoint) as InputSizeType,
+    [size, deviceBreakpoint],
+  );
+
+  const selectLogic = useSelectLogic({
+    variant: normalizedVariant,
+    value,
+    options,
+    searchable,
+    normalizedMultiple,
+    onChangeText,
+    disabled,
+    maxAllowed: rest.maxAllowed,
+    focusInput: () => {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus();
+      });
+    },
+  });
+  const {registerOptionRef} = selectLogic;
+
+  const focusSearchInput = useCallback(() => {
+    if (!isWeb || normalizedVariant !== 'select' || !searchable) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      inputRef.current?.focus?.();
+    });
+  }, [normalizedVariant, searchable]);
+
+  const handleSelectOpen = useCallback(() => {
+    if (!disabled) {
+      if (selectLogic.suppressNextOpenRef.current) {
+        selectLogic.suppressNextOpenRef.current = false;
+        return;
+      }
+      selectLogic.setSelectDropdownOpen(true);
+      focusSearchInput();
+    }
+  }, [disabled, selectLogic, focusSearchInput]);
+
+  const handleSelectClose = useCallback(() => {
+    selectLogic.setSelectDropdownOpen(false);
+  }, [selectLogic]);
+
+  const handleSelectContainerClick = useCallback(
+    (e: any) => {
+      const clickTarget = e?.target as HTMLElement | null;
+
+      if (clickTarget?.closest?.('.select-dropdown')) {
+        return;
+      }
+
+      handleSelectOpen();
+    },
+    [handleSelectOpen],
+  );
+
+  const {isFocused, setIsFocused, hasValue} = useInputState({
+    value,
+    hover,
+    normalizedMultiple,
+    variant: normalizedVariant,
+  });
+
+  const handleInputFocus = useCallback(
+    (e: any) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    },
+    [onFocus, setIsFocused],
+  );
+
+  const handleInputBlur = useCallback(
+    (e: any) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    },
+    [onBlur, setIsFocused],
+  );
+
+  const {animatedStyle} = useLabelAnimation({
+    value,
+    hasValue,
+    isFocused,
+    variant: normalizedVariant,
+    size: responsiveSize,
+    prefixIcon: !!prefixIcon,
+    selectDropdownOpen: selectLogic.selectDropdownOpen,
+  });
+
+  useOutsideClick({
+    enabled: isWeb && !isWebMobile && selectLogic.selectDropdownOpen,
+    onOutsideClick: handleSelectClose,
+    ignoredClassNames: [
+      'select-dropdown',
+      'select-button',
+      'slice-input-container',
+    ],
+  });
+
+  const displayValue = useMemo(
+    () =>
+      getDisplayValue({
+        variant: normalizedVariant,
+        value,
+        options,
+        selectedValues: selectLogic.selectedValues,
+        labelText,
+        placeholder,
+        normalizedMultiple,
+      }),
+    [
+      normalizedVariant,
+      value,
+      options,
+      selectLogic.selectedValues,
+      labelText,
+      placeholder,
+      normalizedMultiple,
+    ],
+  );
+
+  const variantForTokens = isSelectVariant(normalizedVariant)
+    ? 'outlined'
+    : normalizedVariant;
+  const inputTheme =
+    theme.inputStyles[responsiveSize as keyof typeof theme.inputStyles]?.[
+      variantForTokens as keyof typeof theme.inputStyles.medium
+    ] ?? theme.inputStyles.medium.outlined;
+
+  const defaultSelectedIcon = useMemo(() => {
+    return (
+      <Icon
+        component={<IconMoon icon={FONT_ICON.TICK} />}
+        variant="small"
+        color={colors.black[1000]}
+      />
+    );
+  }, []);
+
+  const labelTop = useMemo(() => {
+    return labelTopBySize[responsiveSize] ?? 14;
+  }, [responsiveSize]);
+
+  const labelPositionStyle = useMemo(
+    () => ({
+      top: labelTop,
+      zIndex: 10,
+    }),
+    [labelTop],
+  );
+
+  const webContainerFocusResetStyle = useMemo(
+    () =>
+      isWeb && normalizedVariant === 'select'
+        ? {
+            ['outlineStyle' as any]: 'none',
+            ['outlineWidth' as any]: 0,
+            ['outlineColor' as any]: 'transparent',
+            ['boxShadow' as any]: 'none',
+          }
+        : null,
+    [normalizedVariant],
+  );
+
+  const combinedContainerStyle = [
+    styles.baseContainer,
+    inputTheme.container,
+    {
+      borderColor: error
+        ? colorTheme.colors.colorBorderNegative
+        : isFocused
+        ? colorTheme.colors.colorBorderStrong
+        : `var(--slice-input-border-color, ${colorTheme.colors.colorBorderSubtle})`,
+      borderWidth: isFocused ? 1.2 : 1,
+      borderRadius: theme.dimensions.dimension06,
+      ['--slice-input-font-size' as any]: inputTheme.input.fontSize,
+      ['--slice-input-line-height' as any]: inputTheme.input.lineHeight,
+      ['--slice-input-min-height' as any]: inputTheme.container.minHeight,
+    },
+    webContainerFocusResetStyle,
+    containerStyle,
+  ];
+
+  const combinedInputStyle = [
+    styles.baseInput,
+    inputTheme.input,
+    {
+      color: colorTheme.colors.colorForegroundPrimary,
+      paddingHorizontal: spacing.space200,
+    },
+    inputStyle,
+  ];
+
+  const combinedLabelStyle = [
+    styles.baseLabel,
+    inputTheme.label,
+    {
+      color: error
+        ? colorTheme.colors.colorForegroundNegative
+        : colorTheme.colors.colorForegroundLight,
+      backgroundColor: colorTheme.colors.colorBackgroundPrimary,
+    },
+    labelStyle,
+  ];
+
+  const combinedHelperTextStyle = [
+    styles.baseHelperText,
+    inputTheme.helperText,
+    {
+      color: error
+        ? colorTheme.colors.colorForegroundNegative
+        : colorTheme.colors.colorForegroundSecondary,
+    },
+    helperTextStyle,
+  ];
+
+  const isFullWidthVariant =
+    normalizedVariant === 'currency' ||
+    normalizedVariant === 'phoneWithFlag' ||
+    normalizedVariant === 'phoneWithCodeOnly';
+
+  const renderInput = () => {
+    switch (normalizedVariant) {
+      case 'currency':
+        return (
+          <CurrencyInput
+            value={typeof value === 'string' ? value : ''}
+            currency={currency}
+            currencyDropdownOpen={currencyDropdownOpen}
+            onToggleDropdown={() => setCurrencyDropdownOpen(v => !v)}
+            onCloseDropdown={() => setCurrencyDropdownOpen(false)}
+            onSelectCurrency={c => {
+              setCurrency(c);
+              setCurrencyDropdownOpen(false);
+            }}
+            disabled={disabled}
+            labelText={labelText}
+            placeholder={placeholder}
+            onChangeText={
+              onChangeText
+                ? (val: string) => (onChangeText as any)(val)
+                : undefined
+            }
+            colorTheme={colorTheme}
+            portalAnchorRef={webInputContainerRef}
+          />
+        );
+
+      case 'phoneWithFlag':
+      case 'phoneWithCodeOnly':
+        return (
+          <PhoneInput
+            mode={normalizedVariant === 'phoneWithFlag' ? 'flag' : 'code'}
+            country={country}
+            number={number}
+            dropdownOpen={dropdownOpen}
+            disabled={disabled}
+            labelText={labelText}
+            placeholder={placeholder}
+            onToggleDropdown={() => setDropdownOpen(v => !v)}
+            onCloseDropdown={() => setDropdownOpen(false)}
+            onSelectCountry={c => {
+              setCountry(c);
+              setDropdownOpen(false);
+              if (onChangeText) {
+                (onChangeText as any)(
+                  `+${getCountryCallingCode(c)}${number.replace(/\D/g, '')}`,
+                );
+              }
+            }}
+            onNumberChange={onNumberChange}
+            onFocus={handleInputFocus}
+            onBlur={handleInputBlur}
+            colorTheme={colorTheme}
+            size={size}
+            portalAnchorRef={webInputContainerRef}
+          />
+        );
+
+      case 'select':
+        return (
+          <SelectInput
+            value={value}
+            displayValue={displayValue}
+            options={options}
+            searchable={searchable}
+            normalizedMultiple={normalizedMultiple}
+            normalizedListType={normalizedListType}
+            selectDropdownOpen={selectLogic.selectDropdownOpen}
+            filteredOptions={selectLogic.filteredOptions}
+            searchValue={selectLogic.searchValue}
+            setSearchValue={selectLogic.setSearchValue}
+            onOpen={handleSelectOpen}
+            onClose={handleSelectClose}
+            onKeyDown={selectLogic.handleSelectKeyDown}
+            onOptionSelect={selectLogic.handleOptionSelect}
+            onCheckboxToggle={selectLogic.handleCheckboxToggle}
+            colorTheme={colorTheme}
+            placeholder={placeholder}
+            noItemText={noItemText}
+            maxAllowed={rest.maxAllowed}
+            maxVisibleItems={maxVisibleItems}
+            selectedIcon={selectedIcon ?? defaultSelectedIcon}
+            selectedValues={selectLogic.selectedValues}
+            disabled={disabled}
+            registerOptionRef={registerOptionRef}
+            inputRef={inputRef}
+            size={responsiveSize}
+            expandChips={rest.expandChips}
+          />
+        );
+
+      default:
+        return (
+          <TextInputVariant
+            inputRef={inputRef}
+            value={typeof value === 'string' ? value : ''}
+            onChangeText={
+              onChangeText
+                ? (val: string | string[]) => {
+                    const stringVal = typeof val === 'string' ? val : '';
+                    (onChangeText as any)(stringVal);
+                  }
+                : undefined
+            }
+            onFocus={handleInputFocus}
+            onBlur={handleInputBlur}
+            placeholder={!labelText ? placeholder : undefined}
+            disabled={disabled}
+            style={combinedInputStyle}
+            placeholderTextColor={colorTheme.colors.colorForegroundTertiary}
+            restProps={rest}
+          />
+        );
+    }
+  };
+
+  return (
+    <View style={styles.wrapper}>
+      <View
+        ref={webInputContainerRef}
+        style={combinedContainerStyle}
+        {...(isWeb && {
+          tabIndex: 0,
+          onFocus: () => setIsFocused(true),
+          onBlur: () => setIsFocused(false),
+          className: disabled
+            ? 'slice-input-container slice-input-container--disabled'
+            : 'slice-input-container',
+          onKeyDown:
+            normalizedVariant === 'select'
+              ? selectLogic.handleSelectKeyDown
+              : undefined,
+          onClick:
+            normalizedVariant === 'select' && !disabled
+              ? handleSelectContainerClick
+              : undefined,
+        })}>
+        {labelText && (
+          <Animated.Text
+            style={[combinedLabelStyle, animatedStyle, labelPositionStyle]}>
+            {labelText}
+          </Animated.Text>
+        )}
+
+        <View style={styles.inputWrapper}>
+          {isFullWidthVariant ? (
+            <View style={styles.fullWidthInputContainer}>{renderInput()}</View>
+          ) : (
+            <>
+              {prefixIcon && (
+                <View style={styles.prefixSlot}>{prefixIcon}</View>
+              )}
+
+              <View style={styles.inputSlot}>{renderInput()}</View>
+
+              {suffixIcon && (
+                <View style={styles.suffixSlot}>{suffixIcon}</View>
+              )}
+            </>
+          )}
+        </View>
+
+        {normalizedVariant === 'select' &&
+          isWeb &&
+          !isWebMobile &&
+          selectLogic.selectDropdownOpen &&
+          !disabled && (
+            <SelectList
+              options={selectLogic.filteredOptions}
+              value={value}
+              normalizedMultiple={normalizedMultiple}
+              normalizedListType={normalizedListType}
+              onOptionSelect={selectLogic.handleOptionSelect}
+              onCheckboxToggle={selectLogic.handleCheckboxToggle}
+              onKeyDown={selectLogic.handleSelectKeyDown}
+              colorTheme={colorTheme}
+              noItemText={noItemText ?? 'No items'}
+              maxVisibleItems={maxVisibleItems}
+              selectedIcon={selectedIcon ?? defaultSelectedIcon}
+              disabled={disabled}
+              registerOptionRef={registerOptionRef}
+              size={responsiveSize}
+            />
+          )}
+      </View>
+
+      {(error || helperText) && (
+        <Text style={combinedHelperTextStyle}>{error || helperText}</Text>
+      )}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  wrapper: {
+    marginVertical: 8,
+  },
+  baseContainer: {
+    position: 'relative',
+    backgroundColor: 'transparent',
+  },
+  baseInput: {
+    flex: 1,
+    minHeight: 24,
+    fontSize: 16,
+  },
+  baseLabel: {
+    position: 'absolute',
+    left: 12,
+    paddingHorizontal: 4,
+    includeFontPadding: false,
+    pointerEvents: 'none',
+  },
+  baseHelperText: {
+    marginTop: 4,
+    fontSize: 12,
+    paddingHorizontal: 12,
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    minHeight: 24,
+    position: 'relative',
+  },
+  prefixSlot: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginLeft: spacing.space100,
+  },
+
+  suffixSlot: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: spacing.space100,
+  },
+
+  inputSlot: {
+    flex: 1,
+    justifyContent: 'center',
+  },
+  fullWidthInputContainer: {
+    flex: 1,
+  },
+});
+
+export default Input;

package/src/SliceUI/input/ToDo.md

@@ -0,0 +1,99 @@
+## Input Dropdown
+## Day 1 To Do
+- [x] Add select and checkbox variant support with dropdown functionality
+- [x] Add Multi-select Variant by adding Select-Checkbox as a variant
+- [x] Display selected values with smart formatting (single, two, or "first +N" format)
+- [x] Add click-outside handler to close dropdown
+- [x] Update label animation to work with dropdown open state
+- [x] Import and integrate Checkbox component
+
+## Day 2 To Do
+- [x] Match Logic to Country & Currency Code Dropdown
+- [x] Add Keyboard Accessibility
+- [x] Add Searchable prop
+- [x] Type Check the Implementation
+
+## Day 3 To Do
+- [x] Split Files as proposed
+- [x] Bug Fixes
+    - [x] Hover Colors
+- [x] Final Type Check
+- [x] Add Ability to backspace selected items for select variant
+- [x] Add an No Items found Item
+
+## Day 4 To Do
+- [x] Add Disabled State
+- [x] Add Icon Support for ListItem (selected Item Icon (tick,X or anything) on right & Each item can have its own icon on left) 
+- [x] Add Custom Scrollbar
+- [x] Add Selected Item Chip for Multi-select.
+- [x] Add a Prop to Show only Max of x Items
+- [x] Add sole/exact word enter in searchable
+- [x] Bug fix
+    - [x] Keyboard Hover and Mouse Hover are independently working.Need them to work as 1 so that there isn’t 2 hover at 1 time
+
+## Day 5 To Do
+- [x] Stablize Elements
+
+## Day 6 To Do
+- [x] Optimize
+
+### Result
+    
+#### Single Select Dropdown
+| Metric                             | Pre-Optimization | Post-Optimization | Δ (Pre → Post) |
+| ---------------------------------- | ---------------- | ----------------- | -------------- |
+| Total commits                      | 23               | 7                 | -16            |
+| Total render duration (ms)         | 72               | 36                | -36            |
+| Average commit duration (ms)       | 3.13             | 5.14              | +2.01          |
+| Max single commit duration (ms)    | 8                | 15                | +7             |
+| Total effect duration (ms)         | 1                | 0                 | -1             |
+| Total passive effect duration (ms) | 6                | 1                 | -5             |
+
+#### Multi-Select Dropdown
+| Metric                             | Pre-Optimization | Post-Optimization | Δ (Pre → Post) |
+| ---------------------------------- | ---------------- | ----------------- | -------------- |
+| Total commits                      | 24               | 18                | -6             |
+| Total render duration (ms)         | 84               | 49                | -35            |
+| Average commit duration (ms)       | 3.50             | 2.72              | -0.78          |
+| Max single commit duration (ms)    | 10               | 15                | +5             |
+| Total effect duration (ms)         | 2                | 1                 | -1             |
+| Total passive effect duration (ms) | 4                | 5                 | +1             |
+
+## Day 7 To Do
+- [x] Match Label to Design
+- [x] Add Default Icon to selected Icon 
+- [x] Make size variants work for input based on the Tokens
+
+## Day 8 To Do
+- [x] Add Sizes Based on design using the token styling from Chips Component
+- [x] Replace Normal Text With Typography code calls
+- [x] Add Size Based Animation for Labels
+- [x] Match Text Styles to the design
+- [x] Check Android Working
+
+## Day 9 To Do
+- [x] Remake the Details page for Showcase
+- [x] Select-Input Fixes
+    - [x] Move Icon to be below Animated Labels and Aligns with Item Icon
+    - [x] Select-Chip Icon Size Controls
+    - [x] Dropdown Width Matching the Parent
+    - [x] Align Size Based Labels Properly
+    - [x] Click outside to lose focus
+- [x] Prepare a Documentation of what work is done
+- [x] Add Native Support using bottom Sheet
+
+## Day 10 To Do
+- [x] Edit Testscreen to support Mobile view
+- [x] Mimic Input-Dropdown Web on Mobile
+    - [x] Features
+        - [x] Searchable
+        - [x] Max Allowed
+        - [x] Max Visible Items
+        - [x] Checkbox Support
+        - [x] Empty State
+    - [x] Styles
+        - [x] Add Expanded Chips for Mobile
+
+## Day 11 To Do
+- [x] Move inline styles into Internal Stylesheet/Memonized style component (If rendered dynamically/web specific)
+- []