jp-composter 0.1.0

package/src/SliceUI/input/components/SelectListItem.tsx

@@ -0,0 +1,377 @@
+import React, { memo, useMemo, useCallback } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import Checkbox from '../../checkbox/Checkbox';
+import type { SelectOption } from '../Type';
+import Typography from '../../typography/Typography';
+import { isWeb } from '../utils/inputUtils';
+
+interface SelectListItemProps {
+    option: SelectOption;
+    index: number;
+    isSelected: boolean;
+    normalizedListType: 'default' | 'checkbox';
+    selectedIcon?: React.ReactNode;
+    onOptionSelect: (value: string) => void;
+    onCheckboxToggle: (value: string, checked: boolean) => void;
+    colorTheme: any;
+    disabled?: boolean;
+    registerOptionRef?: (index: number, el: HTMLElement | null) => void;
+}
+
+const webCheckboxItemBaseStyle: React.CSSProperties = {
+    padding: '14px 16px',
+    borderRadius: 8,
+};
+
+const webDefaultItemBaseStyle: React.CSSProperties = {
+    padding: '14px 16px',
+    borderRadius: 8,
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+    marginBottom: 2,
+};
+
+const webInlineIconStyle: React.CSSProperties = {
+    display: 'flex',
+    alignItems: 'center',
+    flexShrink: 0,
+};
+
+const webTextBaseStyle: React.CSSProperties = {
+    flex: 1,
+    overflow: 'hidden',
+};
+
+const nativeTextBaseStyle = {
+    flex: 1,
+    overflow: 'hidden',
+} as const;
+
+const SelectListItemCheckbox = ({
+    option,
+    index,
+    isSelected,
+    onCheckboxToggle,
+    colorTheme,
+    disabled,
+    registerOptionRef,
+}: SelectListItemProps) => {
+    const backgroundColor = useMemo(() => {
+        if (disabled) {return 'transparent';}
+        return undefined;
+    }, [disabled]);
+
+    const handleRef = useCallback((el: HTMLDivElement | null) => {
+        registerOptionRef?.(index, el);
+    }, [index, registerOptionRef]);
+
+    const handleCheckboxChange = useCallback((checked: boolean) => {
+        if (!disabled) {
+            onCheckboxToggle(option.value, checked);
+        }
+    }, [disabled, onCheckboxToggle, option.value]);
+
+    const hoverBackgroundColor = colorTheme.colors.colorStatePrimaryHover;
+
+    const nativeCheckboxItemStyle = useMemo(
+        () => [styles.nativeCheckboxItem, { backgroundColor }],
+        [backgroundColor],
+    );
+
+    const webCheckboxItemStyle = useMemo(
+        () => ({
+            ...webCheckboxItemBaseStyle,
+            backgroundColor,
+            ...(disabled
+                ? { ['--hover-bg' as any]: 'transparent' }
+                : { ['--hover-bg' as any]: hoverBackgroundColor }),
+        }),
+        [backgroundColor, disabled, hoverBackgroundColor],
+    );
+
+    if (!isWeb) {
+        return (
+            <View style={nativeCheckboxItemStyle}>
+                <Checkbox
+                    checked={isSelected}
+                    onChange={handleCheckboxChange}
+                    label={option.label}
+                    size="medium"
+                    labelColor={disabled ? colorTheme.colors.colorForegroundTertiary : 'black'}
+                    disabled={disabled}
+                />
+            </View>
+        );
+    }
+
+    return (
+        <div
+            className="select-list-item"
+            tabIndex={-1}
+            ref={handleRef}
+            style={webCheckboxItemStyle}
+        >
+            <Checkbox
+                checked={isSelected}
+                onChange={handleCheckboxChange}
+                label={option.label}
+                size="medium"
+                labelColor={disabled ? colorTheme.colors.colorForegroundTertiary : 'black'}
+                disabled={disabled}
+            />
+        </div>
+    );
+};
+
+const SelectListItemDefault = ({
+    option,
+    index,
+    isSelected,
+    selectedIcon,
+    onOptionSelect,
+    colorTheme,
+    disabled,
+    registerOptionRef,
+}: SelectListItemProps) => {
+    const selectedBackgroundColor = colorTheme.colors.colorBackgroundLighter;
+    const hoverBackgroundColor = colorTheme.colors.colorStatePrimaryHover;
+    const primaryTextColor = colorTheme.colors.colorForegroundPrimary;
+    const tertiaryTextColor = colorTheme.colors.colorForegroundTertiary;
+
+    const backgroundColor = useMemo(() => {
+        if (disabled) {return 'transparent';}
+        if (isSelected && !selectedIcon) {
+            return selectedBackgroundColor;
+        }
+        return undefined;
+    }, [disabled, isSelected, selectedIcon, selectedBackgroundColor]);
+
+    const textColor = useMemo(() => {
+        return disabled ? tertiaryTextColor : primaryTextColor;
+    }, [disabled, tertiaryTextColor, primaryTextColor]);
+
+    const handleRef = useCallback((el: HTMLDivElement | null) => {
+        registerOptionRef?.(index, el);
+    }, [index, registerOptionRef]);
+
+    const handleClick = useCallback((e: React.MouseEvent) => {
+        if (disabled) {return;}
+        e.stopPropagation();
+        onOptionSelect(option.value);
+    }, [disabled, onOptionSelect, option.value]);
+
+    const nativeDefaultItemStyle = useMemo(
+        () => [styles.nativeDefaultItem, { backgroundColor }],
+        [backgroundColor],
+    );
+
+    const nativeTextStyle = useMemo(
+        () => ({
+            ...nativeTextBaseStyle,
+            color: textColor,
+        }),
+        [textColor],
+    );
+
+    const webDefaultItemStyle = useMemo(
+        () => ({
+            ...webDefaultItemBaseStyle,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            backgroundColor,
+            ...(disabled
+                ? { ['--hover-bg' as any]: 'transparent' }
+                : { ['--hover-bg' as any]: hoverBackgroundColor }),
+        }),
+        [backgroundColor, disabled, hoverBackgroundColor],
+    );
+
+    const webTextStyle = useMemo(
+        () => ({
+            ...webTextBaseStyle,
+            color: textColor,
+        }),
+        [textColor],
+    );
+
+    if (!isWeb) {
+        return (
+            <TouchableOpacity
+                style={nativeDefaultItemStyle}
+                activeOpacity={disabled ? 1 : 0.7}
+                onPress={() => !disabled && onOptionSelect(option.value)}
+                disabled={disabled}
+            >
+                {option.icon && (
+                    <View style={styles.nativeLeadingIcon}>
+                        {option.icon}
+                    </View>
+                )}
+                <Typography
+                    variant="body2Regular"
+                    style={nativeTextStyle}
+                >
+                    {option.label}
+                </Typography>
+                {isSelected && selectedIcon && (
+                    <View style={styles.nativeTrailingIcon}>
+                        {selectedIcon}
+                    </View>
+                )}
+            </TouchableOpacity>
+        );
+    }
+
+    return (
+        <div
+            className="select-list-item"
+            ref={handleRef}
+            tabIndex={-1}
+            onClick={handleClick}
+            style={webDefaultItemStyle}
+        >
+            {option.icon && (
+                <span style={webInlineIconStyle}>
+                    {option.icon}
+                </span>
+            )}
+
+            <Typography
+                variant="body2Regular"
+                style={webTextStyle}
+            >
+                {option.label}
+            </Typography>
+
+
+            {isSelected && selectedIcon && (
+                <span style={webInlineIconStyle}>
+                    {selectedIcon}
+                </span>
+            )}
+        </div>
+    );
+};
+
+const SelectListItem = memo(({
+    option,
+    index,
+    isSelected,
+    normalizedListType,
+    selectedIcon,
+    onOptionSelect,
+    onCheckboxToggle,
+    colorTheme,
+    disabled = false,
+    registerOptionRef,
+}: SelectListItemProps) => {
+    const handleClickWrapper = useCallback(() => {
+        if (!disabled) {
+            onOptionSelect(option.value);
+        }
+    }, [disabled, onOptionSelect, option.value]);
+
+    if (!isWeb) {
+        return normalizedListType === 'checkbox' ? (
+            <SelectListItemCheckbox
+                option={option}
+                index={index}
+                isSelected={isSelected}
+                normalizedListType={normalizedListType}
+                onOptionSelect={onOptionSelect}
+                onCheckboxToggle={onCheckboxToggle}
+                colorTheme={colorTheme}
+                disabled={disabled}
+            />
+        ) : (
+            <SelectListItemDefault
+                option={option}
+                index={index}
+                isSelected={isSelected}
+                normalizedListType={normalizedListType}
+                selectedIcon={selectedIcon}
+                onOptionSelect={onOptionSelect}
+                onCheckboxToggle={onCheckboxToggle}
+                colorTheme={colorTheme}
+                disabled={disabled}
+            />
+        );
+    }
+
+    return (
+        <div data-select-option data-index={index} onClick={handleClickWrapper}>
+            {normalizedListType === 'checkbox' ? (
+                <SelectListItemCheckbox
+                    option={option}
+                    index={index}
+                    isSelected={isSelected}
+                    normalizedListType={normalizedListType}
+                    onOptionSelect={onOptionSelect}
+                    onCheckboxToggle={onCheckboxToggle}
+                    colorTheme={colorTheme}
+                    disabled={disabled}
+                    registerOptionRef={registerOptionRef}
+                />
+            ) : (
+                <SelectListItemDefault
+                    option={option}
+                    index={index}
+                    isSelected={isSelected}
+                    normalizedListType={normalizedListType}
+                    selectedIcon={selectedIcon}
+                    onOptionSelect={onOptionSelect}
+                    onCheckboxToggle={onCheckboxToggle}
+                    colorTheme={colorTheme}
+                    disabled={disabled}
+                    registerOptionRef={registerOptionRef}
+                />
+            )}
+        </div>
+    );
+}, (prev, next) => {
+    if (prev.disabled !== next.disabled) {return false;}
+    if (prev.isSelected !== next.isSelected) {return false;}
+    if (prev.normalizedListType !== next.normalizedListType) {return false;}
+
+    if (prev.isSelected || next.isSelected) {
+        if (prev.selectedIcon !== next.selectedIcon) {return false;}
+    }
+
+    if (prev.index !== next.index) {return false;}
+    if (prev.option.value !== next.option.value) {return false;}
+    if (prev.option.label !== next.option.label) {return false;}
+    if (prev.colorTheme !== next.colorTheme) {return false;}
+
+    return true;
+});
+
+SelectListItem.displayName = 'SelectListItem';
+
+const styles = StyleSheet.create({
+    nativeCheckboxItem: {
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        borderRadius: 8,
+        marginBottom: 2,
+    },
+    nativeDefaultItem: {
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        borderRadius: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 2,
+    },
+    nativeLeadingIcon: {
+        alignItems: 'center',
+        flexShrink: 0,
+        marginRight: 12,
+    },
+    nativeTrailingIcon: {
+        alignItems: 'center',
+        flexShrink: 0,
+        marginLeft: 12,
+    },
+});
+
+export default SelectListItem;

package/src/SliceUI/input/components/SelectScrollbarStyle.ts

@@ -0,0 +1,44 @@
+export const selectScrollbarCSS = `
+.select-scroll-container {
+  max-height: 280px;
+  overflow-y: auto;
+  padding: 0;
+  margin: 0;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(255, 255, 255, 0.25);
+}
+
+.select-scroll-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.select-scroll-container::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.select-scroll-container::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.25);
+  border-radius: 8px;
+}
+
+.select-scroll-container::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+/* Hover styling for select list items using CSS variable for theme color */
+.select-list-item:hover {
+  background-color: var(--hover-bg);
+}
+
+/* Keyboard focus styling to match hover */
+.select-list-item:focus {
+  background-color: var(--hover-bg);
+  outline: none;
+}
+
+/* When the dropdown is hovered, suppress focus highlight so mouse takes precedence */
+.select-dropdown:hover .select-list-item:focus {
+  background-color: transparent;
+}
+`;

package/src/SliceUI/input/hooks/useCustomScrollbar.ts

@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+
+export const useCustomScrollbar = (
+  id: string,
+  css: string,
+) => {
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    if (document.getElementById(id)) return;
+
+    const style = document.createElement('style');
+    style.id = id;
+    style.innerHTML = css;
+    document.head.appendChild(style);
+  }, [id, css]);
+};

package/src/SliceUI/input/hooks/useInputState.ts

@@ -0,0 +1,41 @@
+import { useState, useMemo } from 'react';
+
+interface UseInputStateParams {
+  value?: string | string[];
+  hover?: boolean;
+  normalizedMultiple?: boolean;
+  variant?: string;
+}
+
+export const useInputState = ({
+  value,
+  hover = false,
+  normalizedMultiple,
+  variant,
+}: UseInputStateParams) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [internalHovered, setInternalHovered] = useState(false);
+
+  const isHovered = hover || internalHovered;
+
+  const selectedValues: string[] = useMemo(() => {
+    if (!normalizedMultiple) return [];
+
+    return Array.isArray(value) ? value : [];
+  }, [normalizedMultiple, value]);
+
+  const hasValue = useMemo(() => {
+    return normalizedMultiple
+      ? selectedValues.length > 0
+      : typeof value === 'string' && value.length > 0;
+  }, [normalizedMultiple, selectedValues, value, variant]);
+
+  return {
+    isFocused,
+    setIsFocused,
+    isHovered,
+    setInternalHovered,
+    hasValue,
+    selectedValues,
+  };
+};

package/src/SliceUI/input/hooks/useLabelAnimation.ts

@@ -0,0 +1,132 @@
+import {useEffect, useRef, useMemo} from 'react';
+import {Animated, Platform} from 'react-native';
+import type {InputSizeType} from '../Type';
+import type {ExtendedInputVariant} from '../Type';
+import {labelLeftOffsetBySize} from '../utils/inputUtils';
+
+const isWeb = Platform.OS === 'web';
+
+interface UseLabelAnimationParams {
+  value?: string | string[];
+  hasValue: boolean;
+  isFocused: boolean;
+  variant?: ExtendedInputVariant;
+  size?: InputSizeType;
+  prefixIcon?: boolean;
+  selectDropdownOpen?: boolean;
+}
+const LABEL_ANIMATION_BY_SIZE: Record<
+  InputSizeType,
+  {
+    translateY: number;
+    scale: number;
+  }
+> = {
+  small: {
+    translateY: -20,
+    scale: 0.88,
+  },
+  medium: {
+    translateY: -24,
+    scale: 0.85,
+  },
+  large: {
+    translateY: -24,
+    scale: 0.9,
+  },
+  xlarge: {
+    translateY: -30,
+    scale: 0.95,
+  },
+  xxlarge: {
+    translateY: -32,
+    scale: 1,
+  },
+};
+
+export const useLabelAnimation = ({
+  value,
+  hasValue,
+  isFocused,
+  variant,
+  size = 'medium',
+  prefixIcon = false,
+  selectDropdownOpen = false,
+}: UseLabelAnimationParams) => {
+  const forceFloatLabelByDefault =
+    variant === 'phoneWithFlag' ||
+    variant === 'phoneWithCodeOnly' ||
+    variant === 'currency';
+
+  const animationConfig =
+    LABEL_ANIMATION_BY_SIZE[size] ?? LABEL_ANIMATION_BY_SIZE.medium;
+
+  const labelAnimation = useRef(
+    new Animated.Value(forceFloatLabelByDefault || value ? 1 : 0),
+  ).current;
+
+  useEffect(() => {
+    if (variant === 'select') {
+      Animated.timing(labelAnimation, {
+        toValue: selectDropdownOpen || hasValue ? 1 : 0,
+        duration: 200,
+        useNativeDriver: false,
+      }).start();
+      return;
+    }
+
+    if (forceFloatLabelByDefault) {
+      Animated.timing(labelAnimation, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: false,
+      }).start();
+    } else if (isFocused || hasValue) {
+      Animated.timing(labelAnimation, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: false,
+      }).start();
+    } else {
+      Animated.timing(labelAnimation, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: false,
+      }).start();
+    }
+  }, [
+    isFocused,
+    hasValue,
+    variant,
+    selectDropdownOpen,
+    labelAnimation,
+    forceFloatLabelByDefault,
+  ]);
+
+  const translateY = labelAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, animationConfig.translateY],
+  });
+
+  const scale = labelAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, animationConfig.scale],
+  });
+
+  const initialLeft = prefixIcon
+    ? (labelLeftOffsetBySize[size] || 44) + 10
+    : 12;
+
+  const left = labelAnimation.interpolate({
+    inputRange: [0, 1],
+    outputRange: [initialLeft, 12],
+  });
+
+  return {
+    labelAnimation,
+    animatedStyle: {
+      transform: [{translateY}, {scale}],
+      left,
+    },
+  };
+};

package/src/SliceUI/input/hooks/useOutsideClick.ts

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { Platform } from 'react-native';
+
+const isWeb = Platform.OS === 'web';
+
+interface UseOutsideClickParams {
+  enabled: boolean;
+  onOutsideClick: () => void;
+  ignoredClassNames: string[];
+}
+
+export const useOutsideClick = ({
+  enabled,
+  onOutsideClick,
+  ignoredClassNames,
+}: UseOutsideClickParams) => {
+  useEffect(() => {
+    if (!isWeb || !enabled) return;
+
+    const onClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement | null;
+      if (!target) return;
+
+      const shouldIgnore = ignoredClassNames.some(className =>
+        target.closest(`.${className}`),
+      );
+
+      if (!shouldIgnore) {
+        onOutsideClick();
+      }
+    };
+
+    window.addEventListener('mousedown', onClickOutside);
+    return () => {
+      window.removeEventListener('mousedown', onClickOutside);
+    };
+  }, [enabled, onOutsideClick, ignoredClassNames]);
+};