jp-composter 0.1.0

package/src/SliceUI/input/Token.ts

@@ -0,0 +1,372 @@
+import type {InputThemeSize} from './Type';
+import {dimensions} from '../values/Dimension';
+
+export const INPUT_VARIANTS = {
+  OUTLINED: 'outlined',
+  FILLED: 'filled',
+  STANDARD: 'standard',
+} as const;
+
+export const INPUT_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large',
+} as const;
+
+export const inputTheme: InputThemeSize = {
+  small: {
+    outlined: {
+      container: {
+        padding: dimensions.dimension04,
+        minHeight: dimensions.dimension17,
+      },
+      input: {
+        fontSize: dimensions.dimension07,
+        lineHeight: dimensions.dimension10,
+      },
+      label: {
+        fontSize: dimensions.dimension06,
+        lineHeight: dimensions.dimension08,
+      },
+      error: {
+        fontSize: dimensions.dimension05,
+        lineHeight: dimensions.dimension07,
+      },
+      helperText: {
+        fontSize: dimensions.dimension05,
+        lineHeight: dimensions.dimension07,
+      },
+    },
+    filled: {
+      container: {
+        padding: dimensions.dimension04,
+        minHeight: dimensions.dimension17,
+        backgroundColor: 'colorBackgroundLight',
+      },
+      input: {
+        fontSize: dimensions.dimension07,
+        lineHeight: dimensions.dimension10,
+      },
+      label: {
+        fontSize: dimensions.dimension06,
+        lineHeight: dimensions.dimension08,
+      },
+      error: {
+        fontSize: dimensions.dimension05,
+        lineHeight: dimensions.dimension07,
+      },
+      helperText: {
+        fontSize: dimensions.dimension05,
+        lineHeight: dimensions.dimension07,
+      },
+    },
+    standard: {
+      container: {
+        padding: dimensions.dimension04,
+        minHeight: dimensions.dimension17,
+        borderWidth: dimensions.dimension00,
+        borderBottomWidth: dimensions.dimension01,
+      },
+      input: {
+        fontSize: dimensions.dimension07,
+        lineHeight: dimensions.dimension10,
+      },
+      label: {
+        fontSize: dimensions.dimension06,
+        lineHeight: dimensions.dimension08,
+      },
+      error: {
+        fontSize: dimensions.dimension05,
+        lineHeight: dimensions.dimension07,
+      },
+      helperText: {
+        fontSize: dimensions.dimension05,
+        lineHeight: dimensions.dimension07,
+      },
+    },
+  },
+  medium: {
+    outlined: {
+      container: {
+        padding: dimensions.dimension06,
+        minHeight: dimensions.dimension18,
+      },
+      input: {
+        fontSize: dimensions.dimension08,
+        lineHeight: dimensions.dimension12,
+      },
+      label: {
+        fontSize: dimensions.dimension07,
+        lineHeight: dimensions.dimension10,
+      },
+      error: {
+        fontSize: dimensions.dimension06,
+        lineHeight: dimensions.dimension08,
+      },
+      helperText: {
+        fontSize: dimensions.dimension06,
+        lineHeight: dimensions.dimension08,
+      },
+    },
+    filled: {
+      container: {
+        padding: dimensions.dimension06,
+        minHeight: dimensions.dimension18,
+        backgroundColor: '',
+      },
+      input: {
+        fontSize: dimensions.dimension08,
+        lineHeight: dimensions.dimension12,
+      },
+      label: {
+        fontSize: dimensions.dimension07,
+        lineHeight: dimensions.dimension10,
+      },
+      error: {
+        fontSize: dimensions.dimension06,
+        lineHeight: dimensions.dimension08,
+      },
+      helperText: {
+        fontSize: dimensions.dimension06,
+        lineHeight: dimensions.dimension08,
+      },
+    },
+    standard: {
+      container: {
+        padding: dimensions.dimension06,
+        minHeight: dimensions.dimension18,
+        borderWidth: dimensions.dimension00,
+        borderBottomWidth: dimensions.dimension01,
+      },
+      input: {
+        fontSize: dimensions.dimension08,
+        lineHeight: dimensions.dimension12,
+      },
+      label: {
+        fontSize: dimensions.dimension07,
+        lineHeight: dimensions.dimension10,
+      },
+      error: {
+        fontSize: dimensions.dimension06,
+        lineHeight: dimensions.dimension08,
+      },
+      helperText: {
+        fontSize: dimensions.dimension06,
+        lineHeight: dimensions.dimension08,
+      },
+    },
+  },
+  large: {
+    outlined: {
+      container: {
+        padding: dimensions.dimension08,
+        minHeight: dimensions.dimension19,
+      },
+      input: {
+        fontSize: dimensions.dimension09,
+        lineHeight: dimensions.dimension14,
+      },
+      label: {
+        fontSize: dimensions.dimension08,
+        lineHeight: dimensions.dimension12,
+      },
+      error: {
+        fontSize: dimensions.dimension07,
+        lineHeight: dimensions.dimension10,
+      },
+      helperText: {
+        fontSize: dimensions.dimension07,
+        lineHeight: dimensions.dimension10,
+      },
+    },
+    filled: {
+      container: {
+        padding: dimensions.dimension08,
+        minHeight: dimensions.dimension19,
+        backgroundColor: 'colorBackgroundLight',
+      },
+      input: {
+        fontSize: dimensions.dimension09,
+        lineHeight: dimensions.dimension14,
+      },
+      label: {
+        fontSize: dimensions.dimension08,
+        lineHeight: dimensions.dimension12,
+      },
+      error: {
+        fontSize: dimensions.dimension07,
+        lineHeight: dimensions.dimension10,
+      },
+      helperText: {
+        fontSize: dimensions.dimension07,
+        lineHeight: dimensions.dimension10,
+      },
+    },
+    standard: {
+      container: {
+        padding: dimensions.dimension08,
+        minHeight: dimensions.dimension19,
+        borderWidth: dimensions.dimension00,
+        borderBottomWidth: dimensions.dimension01,
+      },
+      input: {
+        fontSize: dimensions.dimension09,
+        lineHeight: dimensions.dimension14,
+      },
+      label: {
+        fontSize: dimensions.dimension08,
+        lineHeight: dimensions.dimension12,
+      },
+      error: {
+        fontSize: dimensions.dimension07,
+        lineHeight: dimensions.dimension10,
+      },
+      helperText: {
+        fontSize: dimensions.dimension07,
+        lineHeight: dimensions.dimension10,
+      },
+    },
+  },
+  xlarge: {
+    outlined: {
+      container: {
+        padding: dimensions.dimension10,
+        minHeight: dimensions.dimension20,
+      },
+      input: {
+        fontSize: dimensions.dimension12,
+        lineHeight: dimensions.dimension16,
+      },
+      label: {
+        fontSize: dimensions.dimension10,
+        lineHeight: dimensions.dimension14,
+      },
+      error: {
+        fontSize: dimensions.dimension09,
+        lineHeight: dimensions.dimension12,
+      },
+      helperText: {
+        fontSize: dimensions.dimension09,
+        lineHeight: dimensions.dimension12,
+      },
+    },
+    filled: {
+      container: {
+        padding: dimensions.dimension10,
+        minHeight: dimensions.dimension20,
+        backgroundColor: 'colorBackgroundLight',
+      },
+      input: {
+        fontSize: dimensions.dimension12,
+        lineHeight: dimensions.dimension16,
+      },
+      label: {
+        fontSize: dimensions.dimension10,
+        lineHeight: dimensions.dimension14,
+      },
+      error: {
+        fontSize: dimensions.dimension09,
+        lineHeight: dimensions.dimension12,
+      },
+      helperText: {
+        fontSize: dimensions.dimension09,
+        lineHeight: dimensions.dimension12,
+      },
+    },
+    standard: {
+      container: {
+        padding: dimensions.dimension10,
+        minHeight: dimensions.dimension20,
+        borderWidth: dimensions.dimension00,
+        borderBottomWidth: dimensions.dimension01,
+      },
+      input: {
+        fontSize: dimensions.dimension12,
+        lineHeight: dimensions.dimension16,
+      },
+      label: {
+        fontSize: dimensions.dimension10,
+        lineHeight: dimensions.dimension14,
+      },
+      error: {
+        fontSize: dimensions.dimension09,
+        lineHeight: dimensions.dimension12,
+      },
+      helperText: {
+        fontSize: dimensions.dimension09,
+        lineHeight: dimensions.dimension12,
+      },
+    },
+  },
+  xxlarge: {
+    outlined: {
+      container: {
+        padding: dimensions.dimension12,
+        minHeight: dimensions.dimension21,
+      },
+      input: {
+        fontSize: dimensions.dimension14,
+        lineHeight: dimensions.dimension18,
+      },
+      label: {
+        fontSize: dimensions.dimension12,
+        lineHeight: dimensions.dimension16,
+      },
+      error: {
+        fontSize: dimensions.dimension10,
+        lineHeight: dimensions.dimension14,
+      },
+      helperText: {
+        fontSize: dimensions.dimension10,
+        lineHeight: dimensions.dimension14,
+      },
+    },
+    filled: {
+      container: {
+        padding: dimensions.dimension12,
+        minHeight: dimensions.dimension21,
+        backgroundColor: 'colorBackgroundLight',
+      },
+      input: {
+        fontSize: dimensions.dimension14,
+        lineHeight: dimensions.dimension18,
+      },
+      label: {
+        fontSize: dimensions.dimension12,
+        lineHeight: dimensions.dimension16,
+      },
+      error: {
+        fontSize: dimensions.dimension10,
+        lineHeight: dimensions.dimension14,
+      },
+      helperText: {
+        fontSize: dimensions.dimension10,
+        lineHeight: dimensions.dimension14,
+      },
+    },
+    standard: {
+      container: {
+        padding: dimensions.dimension12,
+        minHeight: dimensions.dimension21,
+        borderWidth: dimensions.dimension00,
+        borderBottomWidth: dimensions.dimension01,
+      },
+      input: {
+        fontSize: dimensions.dimension14,
+        lineHeight: dimensions.dimension18,
+      },
+      label: {
+        fontSize: dimensions.dimension12,
+        lineHeight: dimensions.dimension16,
+      },
+      error: {
+        fontSize: dimensions.dimension10,
+        lineHeight: dimensions.dimension14,
+      },
+      helperText: {
+        fontSize: dimensions.dimension10,
+        lineHeight: dimensions.dimension14,
+      },
+    },
+  },
+};

package/src/SliceUI/input/Type.ts

@@ -0,0 +1,109 @@
+import type React from 'react';
+import { ViewStyle, TextStyle, TextInputProps } from 'react-native';
+import type { VariantBreakPoints } from '../responsive/Type';
+import type { CountryCode } from 'libphonenumber-js';
+
+
+export type InputVariantType = 'outlined' | 'filled' | 'standard';
+export type InputSizeType = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+
+export interface InputIconProps {
+  style?: ViewStyle;
+}
+
+export interface InputProps extends Omit<TextInputProps, 'style'> {
+  // variant?: InputVariantType;
+  size?: InputSizeType;
+  labelText?: string;
+  error?: string;
+  helperText?: string;
+  startAdornment?: React.ReactNode;
+  endAdornment?: React.ReactNode;
+  prefixIcon?: React.ReactElement<InputIconProps>;
+  suffixIcon?: React.ReactElement<InputIconProps>;
+  containerStyle?: ViewStyle;
+  inputStyle?: TextStyle;
+  labelStyle?: TextStyle;
+  errorStyle?: TextStyle;
+  helperTextStyle?: TextStyle;
+  phoneNumber?: boolean;
+  countryCode?: string;
+  showCountryFlag?: boolean;
+  onCountryCodeChange?: (code: string) => void;
+  screenName?: string;
+  id?: string;
+}
+
+export interface InputTheme {
+  container: ViewStyle;
+  input: TextStyle;
+  label: TextStyle;
+  error: TextStyle;
+  helperText: TextStyle;
+}
+
+export type InputThemeVariant = {
+  [key in InputVariantType]: InputTheme;
+};
+
+export type InputThemeSize = {
+  [key in InputSizeType]: InputThemeVariant;
+};
+
+export type InputBreakpoints = VariantBreakPoints;
+
+export type ExtendedInputVariant =
+  | 'outlined'
+  | 'filled'
+  | 'phoneWithFlag'
+  | 'phoneWithCodeOnly'
+  | 'currency'
+  | 'select'
+  | 'checkbox';
+
+export type SelectListType = 'default' | 'checkbox';
+
+export interface SelectOption {
+  label: string;
+  value: string;
+  icon?: React.ReactNode;
+}
+
+export interface ExtendedInputProps extends Omit<InputProps, 'onChangeText'> {
+  variant?: ExtendedInputVariant;
+  disabled?: boolean;
+  hover?: boolean;
+  multiple?: boolean;
+  listType?: SelectListType;
+  options?: SelectOption[];
+  searchable?: boolean;
+  noItemText?: string;
+  maxVisibleItems?: number;
+  selectedIcon?: React.ReactNode;
+  expandChips?: boolean;
+  maxAllowed?: number;
+  onChangeText?: ((value: string) => void) | ((value: string | string[]) => void);
+}
+
+export interface WebPhoneInputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  style?: React.CSSProperties;
+}
+
+export interface CountryCodeButtonProps {
+  country: CountryCode | undefined;
+  toggleDropdown: () => void;
+}
+
+export interface CurrencyCodeButtonProps {
+  currency: string;
+  toggleDropdown: () => void;
+}
+
+export interface SeparatorProps {
+  colorTheme: {
+    colors: {
+      colorBorderSubtle: string;
+    };
+  };
+}

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

@@ -0,0 +1,211 @@
+import React, {
+  ReactNode,
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {createPortal} from 'react-dom';
+
+const SCROLLBAR_STYLE_ID = 'slice-input-portal-scrollbar-style';
+
+type AnchorRect = {
+  top: number;
+  left: number;
+  width: number;
+};
+
+interface InputPortalProps {
+  open: boolean;
+  children: ReactNode;
+  anchorRef: RefObject<HTMLElement>;
+  offsetTop?: number;
+  padding?: number;
+  maxHeight?: number;
+  borderColor: string;
+  backgroundColor: string;
+  zIndex?: number;
+  onRequestClose?: () => void;
+}
+
+const basePortalStyle: React.CSSProperties = {
+  position: 'fixed',
+  boxSizing: 'border-box',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  borderRadius: 8,
+  boxShadow: '0 8px 24px rgba(0,0,0,0.16)',
+  scrollbarWidth: 'none',
+  msOverflowStyle: 'none',
+};
+
+const InputPortal = ({
+  open,
+  children,
+  anchorRef,
+  offsetTop = 6,
+  padding = 8,
+  maxHeight = 220,
+  borderColor,
+  backgroundColor,
+  zIndex = 100000,
+  onRequestClose,
+}: InputPortalProps) => {
+  const [anchorRect, setAnchorRect] = useState<AnchorRect | null>(null);
+  const portalRef = useRef<HTMLDivElement | null>(null);
+  const rafRef = useRef<number | null>(null);
+
+  const setAnchorRectIfChanged = useCallback((nextRect: AnchorRect) => {
+    setAnchorRect(prevRect => {
+      if (
+        prevRect &&
+        prevRect.top === nextRect.top &&
+        prevRect.left === nextRect.left &&
+        prevRect.width === nextRect.width
+      ) {
+        return prevRect;
+      }
+
+      return nextRect;
+    });
+  }, []);
+
+  const measureAnchorRect = useCallback(() => {
+    if (!anchorRef.current) {
+      return;
+    }
+
+    const inputShell = anchorRef.current.closest(
+      '.slice-input-container',
+    ) as HTMLElement | null;
+
+    const rectSource = inputShell ?? anchorRef.current;
+    const rect = rectSource.getBoundingClientRect();
+
+    setAnchorRectIfChanged({
+      top: rect.bottom + offsetTop,
+      left: rect.left,
+      width: rect.width,
+    });
+  }, [anchorRef, offsetTop, setAnchorRectIfChanged]);
+
+  const scheduleMeasureAnchorRect = useCallback(() => {
+    if (rafRef.current !== null) {
+      return;
+    }
+
+    rafRef.current = window.requestAnimationFrame(() => {
+      rafRef.current = null;
+      measureAnchorRect();
+    });
+  }, [measureAnchorRect]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    scheduleMeasureAnchorRect();
+
+    const handleLayout = () => scheduleMeasureAnchorRect();
+
+    window.addEventListener('resize', handleLayout);
+    window.addEventListener('scroll', handleLayout, true);
+
+    return () => {
+      if (rafRef.current !== null) {
+        window.cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      window.removeEventListener('resize', handleLayout);
+      window.removeEventListener('scroll', handleLayout, true);
+    };
+  }, [open, scheduleMeasureAnchorRect]);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    if (document.getElementById(SCROLLBAR_STYLE_ID)) {
+      return;
+    }
+
+    const styleNode = document.createElement('style');
+    styleNode.id = SCROLLBAR_STYLE_ID;
+    styleNode.textContent =
+      '.slice-input-portal::-webkit-scrollbar{width:0;height:0;display:none;}';
+    document.head.appendChild(styleNode);
+  }, []);
+
+  useEffect(() => {
+    if (!open || !onRequestClose) {
+      return;
+    }
+
+    const handleOutsidePointerDown = (event: PointerEvent | MouseEvent) => {
+      const target = event.target as Node | null;
+
+      if (!target) {
+        return;
+      }
+
+      if (portalRef.current?.contains(target)) {
+        return;
+      }
+
+      if (anchorRef.current?.contains(target)) {
+        return;
+      }
+
+      onRequestClose();
+    };
+
+    if (typeof window !== 'undefined' && 'PointerEvent' in window) {
+      document.addEventListener('pointerdown', handleOutsidePointerDown, true);
+      return () => {
+        document.removeEventListener(
+          'pointerdown',
+          handleOutsidePointerDown,
+          true,
+        );
+      };
+    }
+
+    document.addEventListener('mousedown', handleOutsidePointerDown, true);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsidePointerDown, true);
+    };
+  }, [anchorRef, onRequestClose, open]);
+
+  const portalStyle = useMemo(
+    () => ({
+      ...basePortalStyle,
+      top: anchorRect ? anchorRect.top : -9999,
+      left: anchorRect ? anchorRect.left : -9999,
+      width: anchorRect ? anchorRect.width : 0,
+      padding,
+      maxHeight,
+      zIndex,
+      border: `1px solid ${borderColor}`,
+      backgroundColor,
+    }),
+    [anchorRect, backgroundColor, borderColor, maxHeight, padding, zIndex],
+  );
+
+  if (!open || typeof document === 'undefined') {
+    return null;
+  }
+
+  return createPortal(
+    <div ref={portalRef} className="slice-input-portal" style={portalStyle}>
+      {children}
+    </div>,
+    document.body,
+  );
+};
+
+export default React.memo(InputPortal);