jp-composter 0.1.0

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

@@ -0,0 +1,296 @@
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import {
+    View,
+    Text,
+    StyleSheet,
+    Modal,
+    Animated,
+    TouchableOpacity,
+    TouchableWithoutFeedback,
+    Dimensions,
+    Keyboard,
+    Platform,
+    KeyboardAvoidingView,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Icon from '../../icon/Icon';
+import IconMoon from '../../IconMoon';
+import FONT_ICON from '../../assets/resources/fonts/FontIcon.json';
+
+interface NativeBottomSheetProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    heightRatio?: number;
+    fitContent?: boolean;
+    children: React.ReactNode;
+    headerContent?: React.ReactNode;
+    avoidKeyboardForHeader?: boolean;
+    colorTheme: any;
+}
+
+const { height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+const NativeBottomSheet = ({
+    open,
+    onClose,
+    title,
+    heightRatio = 0.5,
+    fitContent = false,
+    children,
+    headerContent,
+    avoidKeyboardForHeader = false,
+    colorTheme,
+}: NativeBottomSheetProps) => {
+    const { bottom } = useSafeAreaInsets();
+    const sheetMaxHeight = SCREEN_HEIGHT * heightRatio;
+
+    const [mounted, setMounted] = useState(false);
+    const keyboardHeight = useRef(0);
+
+    const translateY = useRef(
+        new Animated.Value(sheetMaxHeight)
+    ).current;
+
+    const opacity = useRef(new Animated.Value(0)).current;
+
+    const animateTo = useCallback((toValue: number, fade: number, cb?: () => void) => {
+        Animated.parallel([
+            Animated.timing(translateY, {
+                toValue,
+                duration: 260,
+                useNativeDriver: true,
+            }),
+            Animated.timing(opacity, {
+                toValue: fade,
+                duration: 260,
+                useNativeDriver: true,
+            }),
+        ]).start(cb);
+    }, [opacity, translateY]);
+
+    // Open / close
+    useEffect(() => {
+        if (open) {
+            setMounted(true);
+            animateTo(0, 1);
+        } else if (mounted) {
+            animateTo(sheetMaxHeight, 0, () => setMounted(false));
+        }
+    }, [open, mounted, sheetMaxHeight, animateTo]);
+
+    // Keyboard awareness
+    useEffect(() => {
+        if (avoidKeyboardForHeader) {
+            return;
+        }
+
+        const showEvent =
+            Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+        const hideEvent =
+            Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+        const onShow = (e: any) => {
+            keyboardHeight.current = e.endCoordinates?.height || 0;
+            animateTo(-keyboardHeight.current / 2, 1);
+        };
+
+        const onHide = () => {
+            keyboardHeight.current = 0;
+            animateTo(0, 1);
+        };
+
+        const showSub = Keyboard.addListener(showEvent, onShow);
+        const hideSub = Keyboard.addListener(hideEvent, onHide);
+
+        return () => {
+            showSub.remove();
+            hideSub.remove();
+        };
+    }, [animateTo, avoidKeyboardForHeader]);
+
+    const sheetHeightStyle = useMemo(
+        () =>
+            fitContent
+                ? { maxHeight: sheetMaxHeight }
+                : { height: sheetMaxHeight },
+        [fitContent, sheetMaxHeight]
+    );
+
+    const sheetThemeStyle = useMemo(
+        () => ({
+            backgroundColor: colorTheme.colors.colorBackgroundPrimary,
+            paddingBottom: bottom,
+        }),
+        [colorTheme, bottom]
+    );
+
+    const sheetAnimationStyle = useMemo(
+        () => ({
+            transform: [{ translateY }],
+            opacity,
+        }),
+        [translateY, opacity]
+    );
+
+    const headerBorderStyle = useMemo(
+        () => ({
+            borderBottomColor: colorTheme.colors.colorBorderSubtle,
+        }),
+        [colorTheme]
+    );
+
+    const titleColorStyle = useMemo(
+        () => ({
+            color: colorTheme.colors.colorForegroundPrimary,
+        }),
+        [colorTheme]
+    );
+
+    if (!mounted) {
+        return null;
+    }
+
+    return (
+        <Modal transparent visible animationType="none" onRequestClose={onClose}>
+            <View
+                style={styles.overlay}
+                pointerEvents={open ? 'auto' : 'none'}
+            >
+                {open && (
+                    <TouchableOpacity
+                        style={StyleSheet.absoluteFill}
+                        activeOpacity={1}
+                        onPress={onClose}
+                    />
+                )}
+
+
+                <View style={styles.sheetWrapper}>
+                    <TouchableWithoutFeedback>
+                        <Animated.View
+                            style={[
+                                styles.sheet,
+                                sheetHeightStyle,
+                                sheetThemeStyle,
+                                sheetAnimationStyle,
+                            ]}
+                        >
+                            <View style={styles.handleBar} />
+
+                            {title && (
+                                <View
+                                    style={[
+                                        styles.header,
+                                        headerBorderStyle,
+                                    ]}
+                                >
+                                    <Text
+                                        style={[
+                                            styles.title,
+                                            titleColorStyle,
+                                        ]}
+                                    >
+                                        {title}
+                                    </Text>
+
+                                    <TouchableOpacity onPress={onClose}>
+                                        <Icon
+                                            component={<IconMoon icon={FONT_ICON.CLOSE} />}
+                                            variant="medium"
+                                            color={
+                                                colorTheme.colors
+                                                    .colorForegroundPrimary
+                                            }
+                                        />
+                                    </TouchableOpacity>
+                                </View>
+                            )}
+
+                            {headerContent && (
+                                avoidKeyboardForHeader ? (
+                                    <KeyboardAvoidingView
+                                        enabled
+                                        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+                                        keyboardVerticalOffset={0}
+                                    >
+                                        <View
+                                            style={[
+                                                styles.headerContent,
+                                                headerBorderStyle,
+                                            ]}
+                                        >
+                                            {headerContent}
+                                        </View>
+                                    </KeyboardAvoidingView>
+                                ) : (
+                                    <View
+                                        style={[
+                                            styles.headerContent,
+                                            headerBorderStyle,
+                                        ]}
+                                    >
+                                        {headerContent}
+                                    </View>
+                                )
+                            )}
+
+                            <View style={fitContent ? styles.contentFit : styles.content}>{children}</View>
+                        </Animated.View>
+                    </TouchableWithoutFeedback>
+                </View>
+            </View>
+        </Modal>
+    );
+
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+    sheetWrapper: {
+        flex: 1,
+        justifyContent: 'flex-end',
+    },
+    sheet: {
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        overflow: 'hidden',
+    },
+    handleBar: {
+        width: 40,
+        height: 4,
+        borderRadius: 2,
+        backgroundColor: '#C0C0C0',
+        alignSelf: 'center',
+        marginVertical: 10,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+        paddingVertical: 14,
+        borderBottomWidth: 1,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: '600',
+    },
+    content: {
+        flex: 1,
+    },
+    contentFit: {
+        flexShrink: 1,
+    },
+    headerContent: {
+        paddingHorizontal: 16,
+        paddingBottom: 12,
+        borderBottomWidth: 1,
+    },
+});
+
+
+export default NativeBottomSheet;

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

@@ -0,0 +1,185 @@
+import React, { memo, useMemo } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Platform,
+} from 'react-native';
+import { spacing } from '../../values/Spacing';
+import { borderRadius } from '../../values/BorderRadius';
+import { borderWidth } from '../../values/BorderWidth';
+import IconMoon from '../../IconMoon';
+import FONT_ICON from '../../assets/resources/fonts/FontIcon.json';
+import Typography from '../../typography/Typography';
+
+type ChipSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+
+interface SelectChipsProps {
+  labels: string[];
+  colorTheme: any;
+  disabled?: boolean;
+  values?: string[];
+  onRemove?: (value: string) => void;
+  size?: ChipSize;
+  wrap?: boolean;
+}
+
+const CHIP_SIZE_STYLES: Record<ChipSize, {
+  minHeight: number;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  fontSize: number;
+  iconSize: number;
+}> = {
+  small: { minHeight: 24, paddingHorizontal: 10, paddingVertical: 4, fontSize: 12, iconSize: 10 },
+  medium: { minHeight: 28, paddingHorizontal: 12, paddingVertical: 5, fontSize: 13, iconSize: 11 },
+  large: { minHeight: 32, paddingHorizontal: 12, paddingVertical: 6, fontSize: 14, iconSize: 12 },
+  xlarge: { minHeight: 34, paddingHorizontal: 14, paddingVertical: 7, fontSize: 14, iconSize: 12 },
+  xxlarge: { minHeight: 36, paddingHorizontal: 14, paddingVertical: 8, fontSize: 15, iconSize: 13 },
+};
+
+const SelectChips = memo(
+  ({
+    labels,
+    colorTheme,
+    disabled = false,
+    values,
+    onRemove,
+    size = 'medium',
+    wrap = false,
+  }: SelectChipsProps) => {
+    const sizeStyle = CHIP_SIZE_STYLES[size];
+    const chipTextColor = useMemo(
+      () => (
+        disabled
+          ? colorTheme.colors.colorForegroundTertiary
+          : colorTheme.colors.colorForegroundPrimary
+      ),
+      [disabled, colorTheme],
+    );
+
+    const typographyTextStyle = useMemo(
+      () => ({
+        color: chipTextColor,
+      }),
+      [chipTextColor],
+    );
+
+    const nativeTextDynamicStyle = useMemo(
+      () => ({
+        fontSize: sizeStyle.fontSize,
+        flexShrink: onRemove ? 1 : 0,
+        color: chipTextColor,
+      }),
+      [sizeStyle.fontSize, onRemove, chipTextColor],
+    );
+
+    const chipDynamicStyle = useMemo(
+      () => ({
+        borderColor: colorTheme.colors.colorBorderSubtle,
+        opacity: disabled ? 0.6 : 1,
+        minHeight: sizeStyle.minHeight,
+        paddingHorizontal: sizeStyle.paddingHorizontal,
+        paddingVertical: sizeStyle.paddingVertical,
+        marginBottom: wrap ? spacing.space100 : 0,
+        flexShrink: onRemove ? 1 : 0,
+      }),
+      [
+        colorTheme,
+        disabled,
+        sizeStyle.minHeight,
+        sizeStyle.paddingHorizontal,
+        sizeStyle.paddingVertical,
+        wrap,
+        onRemove,
+      ],
+    );
+
+    return (
+      <>
+        {labels.map((label, index) => {
+          const value = values?.[index] ?? label;
+
+          const content = Platform.OS === 'web' ? (
+            <Typography
+              variant="body2Semibold"
+              style={typographyTextStyle}
+            >
+              {label}
+            </Typography>
+          ) : (
+            <Text
+              style={[
+                styles.nativeText,
+                nativeTextDynamicStyle,
+              ]}
+              numberOfLines={onRemove ? 1 : undefined}
+            >
+              {label}
+            </Text>
+          );
+
+          return (
+            <View
+              key={`${label}-${index}`}
+              style={[
+                styles.chip,
+                sizeStyle,
+                chipDynamicStyle,
+              ]}
+            >
+              {content}
+
+              {!!onRemove && !disabled && (
+                <TouchableOpacity
+                  onPress={(e) => {
+                    e.stopPropagation?.();
+                    onRemove(value);
+                  }}
+                  hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+                  style={styles.removeButton}
+                >
+                  <IconMoon
+                    icon={FONT_ICON.CLOSE}
+                    size={sizeStyle.iconSize}
+                    color={colorTheme.colors.colorForegroundPrimary}
+                  />
+                </TouchableOpacity>
+              )}
+            </View>
+          );
+        })}
+      </>
+    );
+  }
+);
+
+SelectChips.displayName = 'SelectChips';
+
+const styles = StyleSheet.create({
+  chip: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: borderRadius.borderRadius40,
+    borderWidth: borderWidth.borderWidth15,
+    alignSelf: 'flex-start',
+    marginRight: spacing.space100,
+    maxWidth: '100%',
+    flexShrink: 1,
+  },
+  nativeText: {
+    fontSize: 14,
+    fontWeight: '600',
+    flexShrink: 1,
+  },
+  removeButton: {
+    marginLeft: spacing.space100,
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 16,
+    height: 16,
+  },
+});
+
+export default SelectChips;

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

@@ -0,0 +1,173 @@
+import React, { useRef, memo, useMemo, useEffect, useCallback } from 'react';
+import type { SelectOption, InputSizeType } from '../Type';
+import SelectListItem from './SelectListItem';
+import { useCustomScrollbar } from '../hooks/useCustomScrollbar';
+import { selectScrollbarCSS } from './SelectScrollbarStyle';
+import Typography from '../../typography/Typography';
+import { isWeb } from '../utils/inputUtils';
+
+const marginTopBySize: Record<InputSizeType, number> = {
+  small: 8,
+  medium: 16,
+  large: 24,
+  xlarge: 32,
+  xxlarge: 40,
+};
+
+const emptyStateContainerStyle = {
+  padding: '14px 16px',
+  textAlign: 'center',
+  userSelect: 'none',
+} as const;
+
+interface SelectListProps {
+  options: SelectOption[];
+  value?: string | string[];
+  normalizedMultiple?: boolean;
+  normalizedListType: 'default' | 'checkbox';
+  onOptionSelect: (value: string) => void;
+  onCheckboxToggle: (value: string, checked: boolean) => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+  colorTheme: any;
+  noItemText: string;
+  maxVisibleItems?: number;
+  selectedIcon?: React.ReactNode;
+  disabled?: boolean;
+  registerOptionRef: (index: number, el: HTMLElement | null) => void;
+  size?: InputSizeType;
+}
+
+const SelectList = memo(({
+  options,
+  value,
+  normalizedMultiple,
+  normalizedListType,
+  onOptionSelect,
+  onCheckboxToggle,
+  onKeyDown,
+  colorTheme,
+  noItemText,
+  maxVisibleItems,
+  selectedIcon,
+  disabled = false,
+  registerOptionRef,
+  size = 'medium',
+}: SelectListProps) => {
+  const listRef = useRef<HTMLDivElement | null>(null);
+  const optionSelectRef = useRef(onOptionSelect);
+  const checkboxToggleRef = useRef(onCheckboxToggle);
+
+  useEffect(() => {
+    optionSelectRef.current = onOptionSelect;
+  }, [onOptionSelect]);
+
+  useEffect(() => {
+    checkboxToggleRef.current = onCheckboxToggle;
+  }, [onCheckboxToggle]);
+
+  const stableOnOptionSelect = useCallback((v: string) => {
+    optionSelectRef.current(v);
+  }, []);
+
+  const stableOnCheckboxToggle = useCallback((v: string, c: boolean) => {
+    checkboxToggleRef.current(v, c);
+  }, []);
+
+  useCustomScrollbar(
+    'select-list-scrollbar-styles',
+    selectScrollbarCSS,
+  );
+
+  const ITEM_HEIGHT = 52;
+  const maxHeight = useMemo(() => {
+    return maxVisibleItems && maxVisibleItems > 0
+      ? maxVisibleItems * ITEM_HEIGHT
+      : 280;
+  }, [maxVisibleItems]);
+
+  const selectedValuesSet = useMemo(() => {
+    if (normalizedMultiple && Array.isArray(value)) {
+      return new Set(value);
+    }
+    return null;
+  }, [normalizedMultiple, value]);
+
+  const dropdownStyle = {
+    position: 'absolute',
+    top: 'calc(100% - 1px)',
+    left: 0,
+    width: '100%',
+    marginTop: marginTopBySize[size],
+    border: `1px solid ${colorTheme.colors.colorBorderSubtle}`,
+    backgroundColor: colorTheme.colors.colorBackgroundPrimary,
+    borderRadius: 12,
+    boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
+    zIndex: 9999,
+    padding: 0,
+  };
+
+  const scrollContainerStyle = { maxHeight };
+
+  const noItemsTextStyle = {
+    color: colorTheme.colors.colorForegroundSecondary,
+  };
+
+  const renderedItems = useMemo(() => {
+    return options.map((option, index) => {
+      const isSelected = selectedValuesSet
+        ? selectedValuesSet.has(option.value)
+        : value === option.value;
+
+      return (
+        <SelectListItem
+          key={option.value}
+          option={option}
+          index={index}
+          isSelected={isSelected}
+          normalizedListType={normalizedListType}
+          onOptionSelect={stableOnOptionSelect}
+          onCheckboxToggle={stableOnCheckboxToggle}
+          selectedIcon={selectedIcon}
+          colorTheme={colorTheme}
+          disabled={disabled}
+          registerOptionRef={registerOptionRef}
+        />
+      );
+    });
+  }, [options, value, selectedValuesSet, normalizedListType, stableOnOptionSelect, stableOnCheckboxToggle, selectedIcon, colorTheme, disabled, registerOptionRef]);
+
+  // Only render on web platform since this component uses HTML elements
+  if (!isWeb) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={listRef}
+      className="select-dropdown"
+      onKeyDown={onKeyDown}
+      style={dropdownStyle}
+    >
+      <div className="select-scroll-container" style={scrollContainerStyle}>
+        {options.length === 0 ? (
+          <div style={emptyStateContainerStyle}>
+            <Typography
+              variant="body2Regular"
+              style={noItemsTextStyle}
+            >
+              {noItemText}
+            </Typography>
+          </div>
+
+
+        ) : (
+          renderedItems
+        )}
+      </div>
+    </div>
+  );
+});
+
+SelectList.displayName = 'SelectList';
+
+export default SelectList;