@itcase/ui-react-native 1.10.84 → 1.10.86

package/src/components/Code/Code.appearance.ts

@@ -1,6 +1,7 @@
 import { codeAppearanceDefault } from './appearance/codeDefault'
 import { codeAppearanceDisabled } from './appearance/codeDisabled'
 import { codeAppearanceError } from './appearance/codeError'
+import { codeAppearanceRequire } from './appearance/codeRequire'
 import { codeAppearanceShape } from './appearance/codeShape'
 import { codeAppearanceSize } from './appearance/codeSize'
 import { codeAppearanceStyle } from './appearance/codeStyle'
@@ -11,6 +12,7 @@ const codeAppearance = {
   ...codeAppearanceDefault,
   ...codeAppearanceDisabled,
   ...codeAppearanceError,
+  ...codeAppearanceRequire,
   ...codeAppearanceShape,
   ...codeAppearanceSize,
   ...codeAppearanceStyle,

package/src/components/Code/Code.helpers.ts

@@ -0,0 +1,213 @@
+import { Platform, type TextStyle, type ViewStyle } from 'react-native'
+
+import type { Theme } from 'react-native-otp-entry'
+
+import type {
+  BorderColorProps,
+  FillProps,
+  ShapeProps,
+  SizeProps,
+  TextColorProps,
+  TextSizeProps,
+} from '@itcase/types-ui'
+
+import { tokens } from '../../styles/tokens'
+import { colorTheme } from '../../utils'
+import { styles } from './Code.styles'
+
+interface CreateCodeOtpThemeParams {
+  isDisabled?: boolean
+  inputBorderColor?: BorderColorProps
+  inputBorderFocusColor?: BorderColorProps
+  inputFill?: FillProps
+  inputPlaceholderTextColor?: TextColorProps
+  inputSize?: SizeProps
+  inputTextColor?: TextColorProps
+  inputTextSize?: TextSizeProps
+  shape?: ShapeProps
+  size?: SizeProps
+}
+
+function getWrapperGap(size?: SizeProps) {
+  if (size === 'l') {
+    return 8
+  }
+
+  if (size === 's') {
+    return 4
+  }
+
+  return 6
+}
+
+function resolveFillColor(fillKey?: FillProps) {
+  if (!fillKey || fillKey === 'none') {
+    return 'transparent'
+  }
+
+  const fillStyle = tokens[`fill_${fillKey}`]
+
+  if (
+    fillStyle &&
+    'backgroundColor' in fillStyle &&
+    typeof fillStyle.backgroundColor === 'string'
+  ) {
+    return fillStyle.backgroundColor
+  }
+
+  return 'transparent'
+}
+
+function resolveBorderColor(borderColorKey?: BorderColorProps) {
+  if (!borderColorKey || borderColorKey === 'none') {
+    return 'transparent'
+  }
+
+  const borderStyle = tokens[`border_color_${borderColorKey}`]
+
+  if (
+    borderStyle &&
+    'borderColor' in borderStyle &&
+    typeof borderStyle.borderColor === 'string'
+  ) {
+    return borderStyle.borderColor
+  }
+
+  return 'transparent'
+}
+
+function resolveTextColor(textColorKey?: TextColorProps) {
+  if (!textColorKey) {
+    return undefined
+  }
+
+  const textStyle = tokens[`text_color_${textColorKey}`]
+
+  if (
+    textStyle &&
+    'color' in textStyle &&
+    typeof textStyle.color === 'string'
+  ) {
+    return textStyle.color
+  }
+
+  return undefined
+}
+
+function resolveFocusColor(caretColorKey?: string) {
+  if (!caretColorKey) {
+    return undefined
+  }
+
+  return colorTheme[caretColorKey]
+}
+
+function getInputShapeStyle(shape?: ShapeProps, inputSize?: SizeProps) {
+  if (!shape) {
+    return undefined
+  }
+
+  const shapeStyle = styles[`code__input_shape_${shape}`]
+
+  if (shape !== 'circular') {
+    return shapeStyle
+  }
+
+  const sizeStyle = inputSize
+    ? styles[`code__input_size_${inputSize}` as keyof typeof styles]
+    : undefined
+  const cellSize =
+    sizeStyle && 'width' in sizeStyle && typeof sizeStyle.width === 'number'
+      ? sizeStyle.width
+      : undefined
+
+  if (!cellSize) {
+    return shapeStyle
+  }
+
+  return {
+    ...shapeStyle,
+    borderRadius: cellSize / 2,
+  }
+}
+
+function createCodeOtpTheme(params: CreateCodeOtpThemeParams): Theme {
+  const {
+    size,
+    inputBorderColor,
+    inputBorderFocusColor,
+    inputFill,
+    inputPlaceholderTextColor,
+    inputSize,
+    inputTextColor,
+    inputTextSize,
+    shape,
+    isDisabled,
+  } = params
+
+  const backgroundColor = resolveFillColor(inputFill)
+  const borderColor = resolveBorderColor(inputBorderColor)
+  const focusBorderColor = resolveBorderColor(
+    inputBorderFocusColor || inputBorderColor,
+  )
+  const color = resolveTextColor(inputTextColor)
+  const placeholderColor = resolveTextColor(inputPlaceholderTextColor)
+  const sizeStyle = inputSize
+    ? styles[`code__input_size_${inputSize}` as keyof typeof styles]
+    : undefined
+  const shapeStyle = getInputShapeStyle(shape, inputSize)
+  const textSizeStyle = inputTextSize
+    ? tokens[`text_size_${inputTextSize}`]
+    : undefined
+
+  const pinCodeContainerStyle: ViewStyle = {
+    ...sizeStyle,
+    ...shapeStyle,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderColor,
+    borderWidth: borderColor === 'transparent' ? 0 : 1,
+    backgroundColor,
+  }
+
+  const pinCodeTextStyle: TextStyle = {
+    ...textSizeStyle,
+    color,
+    fontFamily: Platform.select({
+      android: 'monospace',
+      default: 'monospace',
+      ios: 'Menlo',
+    }),
+    textAlign: 'center',
+  }
+
+  const focusedPinCodeContainerStyle: ViewStyle = {
+    borderColor: focusBorderColor,
+    borderWidth: focusBorderColor === 'transparent' ? 0 : 1,
+  }
+
+  const disabledPinCodeContainerStyle: ViewStyle | undefined = isDisabled
+    ? {
+        opacity: 0.6,
+      }
+    : undefined
+
+  return {
+    containerStyle: {
+      ...styles.code__wrapper,
+      justifyContent: 'flex-start',
+      gap: getWrapperGap(size),
+    },
+    disabledPinCodeContainerStyle,
+    focusedPinCodeContainerStyle,
+    focusStickStyle: styles.code__focus_stick,
+    pinCodeContainerStyle,
+    pinCodeTextStyle,
+    placeholderTextStyle: {
+      ...pinCodeTextStyle,
+      color: placeholderColor,
+    },
+  }
+}
+
+export { createCodeOtpTheme, resolveFocusColor }

package/src/components/Code/Code.interface.ts

@@ -4,40 +4,103 @@ import type { StyleProp, ViewStyle } from 'react-native'
 import type {
   AppearanceConfig,
   AppearanceKeysState,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
   BorderColorProps,
+  CompositeAppearanceStateDefault,
   FillProps,
+  ItemFillActiveProps,
   ShapeProps,
+  SizeProps,
   TextColorProps,
   TextSizeProps,
+  WidthProps,
 } from '@itcase/types-ui'
 
-import type { codeSizePropsType } from './styles/codeSize'
-import type { codeVariantPropsType } from './styles/codeVariant'
+import type { ComponentGalleryArgs } from '../../storybook'
 
 interface CodeAppearanceProps {
-  borderColor?: BorderColorProps
-  fill?: FillProps
+  inputBorderColor?: BorderColorProps
+  inputBorderFocusColor?: BorderColorProps
+  inputCaretColor?: ItemFillActiveProps
+  inputFill?: FillProps
+  inputPlaceholderTextColor?: TextColorProps
+  inputShape?: ShapeProps
+  inputSize?: SizeProps
+  inputTextColor?: TextColorProps
+  inputTextSize?: TextSizeProps
   shape?: ShapeProps
-  size?: codeSizePropsType
-  textColor?: TextColorProps
-  textSize?: TextSizeProps
+  size?: SizeProps
+  width?: WidthProps
 }
 
-type CodeAppearanceKey = AppearanceKeysState
+type CodeAppearanceKey = AppearanceKeysState | CompositeAppearanceStateDefault
 type CodeConfig = AppearanceConfig<AppearanceKeysState, CodeAppearanceProps>
 type CodeAppearance = CodeConfig['appearance']
+type CodeAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  CodeAppearanceProps,
+  'inputBorderColor' | 'inputFill'
+>
+type CodeAppearanceShape = Partial<
+  Record<AppearanceShapeKey, Partial<Pick<CodeAppearanceProps, 'shape'>>>
+>
+type CodeAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  CodeAppearanceProps,
+  'inputSize' | 'inputTextSize' | 'size'
+>
+
+type CodeInputType = 'alpha' | 'alphanumeric' | 'numeric'
 
 interface CodeProps extends CodeAppearanceProps {
+  isDisabled?: boolean
+  onBlur?: () => void
+  onChange?: (otp: string) => void
+  onFocus?: () => void
+  after?: ReactNode
   appearance?: CodeAppearanceKey
-  children?: ReactNode
+  appearanceStyle?: AppearanceStyleKey
+  before?: ReactNode
+  dataTestId?: string
+  initialValue?: string
+  inputAutoFocus?: boolean
+  inputCount?: number
+  inputPlaceholder?: string
+  inputType?: CodeInputType
   style?: StyleProp<ViewStyle>
-  variant?: codeVariantPropsType
+}
+
+type CodeGalleryStory = ComponentGalleryArgs &
+  Pick<
+    CodeProps,
+    | 'dataTestId'
+    | 'initialValue'
+    | 'inputCount'
+    | 'inputPlaceholder'
+    | 'isDisabled'
+  >
+
+type CodeStoryArgs = Omit<CodeProps, 'appearance'> & {
+  appearanceShape: string
+  appearanceSize: string
+  appearanceStyle: string
+  appearanceType: string
 }
 
 export type {
   CodeAppearance,
   CodeAppearanceKey,
   CodeAppearanceProps,
+  CodeAppearanceShape,
+  CodeAppearanceSize,
+  CodeAppearanceStyle,
   CodeConfig,
+  CodeGalleryStory,
+  CodeInputType,
   CodeProps,
+  CodeStoryArgs,
 }

package/src/components/Code/Code.styles.ts

@@ -1,11 +1,15 @@
 import { codeStyles as codeBaseStyles } from './styles/code'
-import { codeSizeStyles } from './styles/codeSize'
-import { codeVariantStyles } from './styles/codeVariant'
+import { codeInputShapeStyles } from './styles/codeInputShape'
+import { codeInputSizeStyles, codeSizeStyles } from './styles/codeSize'
 
 const styles = {
   ...codeBaseStyles,
+  ...codeInputShapeStyles,
+  ...codeInputSizeStyles,
   ...codeSizeStyles,
-  ...codeVariantStyles,
-}
+} as typeof codeBaseStyles &
+  typeof codeInputShapeStyles &
+  typeof codeInputSizeStyles &
+  typeof codeSizeStyles
 
 export { styles }

package/src/components/Code/Code.tsx

@@ -1,16 +1,20 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { View } from 'react-native'
 
+import { OtpInput, type OtpInputRef } from 'react-native-otp-entry'
+
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+import { mergeAppearanceKeys } from '@itcase/ui-core/utils'
+
 import { tokens } from '../../styles/tokens'
-import { Text } from '../Text'
 import { codeAppearance } from './Code.appearance'
+import { createCodeOtpTheme, resolveFocusColor } from './Code.helpers'
 import type { CodeConfig, CodeProps } from './Code.interface'
 import { styles } from './Code.styles'
 
-const DEFAULT_CODE_APPEARANCE = 'defaultPrimary'
-const DEFAULT_CODE_SIZE = 'm'
-const DEFAULT_CODE_VARIANT = 'inline'
-
 const codeConfig: CodeConfig = {
   appearance: {},
   setAppearance: (newComponent) => {
@@ -22,52 +26,115 @@ codeConfig.setAppearance(codeAppearance)
 
 function Code(props: CodeProps) {
   const {
-    appearance = DEFAULT_CODE_APPEARANCE,
-    size,
-    fill,
-    borderColor,
-    textColor,
-    textSize,
-    shape,
+    appearance = 'defaultPrimary sizeM solid rounded',
+    dataTestId,
+    initialValue = '',
+    appearanceStyle,
+    inputAutoFocus = false,
+    inputCount = 6,
+    inputPlaceholder,
+    inputType = 'numeric',
     style,
-    variant = DEFAULT_CODE_VARIANT,
-    children = '',
+    before,
+    after,
+    isDisabled,
+    onBlur,
+    onChange,
+    onFocus,
   } = props
 
-  const appearanceConfig = useMemo(() => {
-    if (!appearance || !codeConfig.appearance) {
-      return undefined
-    }
+  const otpRef = useRef<OtpInputRef>(null)
+
+  const resolvedAppearance = useMemo(() => {
+    const appearanceTokens = appearance.split(' ')
+    const isCompositeAppearance = appearanceTokens.length > 1
+
+    return isCompositeAppearance
+      ? appearance
+      : mergeAppearanceKeys(appearance, appearanceStyle || 'solid')
+  }, [appearance, appearanceStyle])
+
+  const appearanceConfig = useAppearanceConfig(
+    resolvedAppearance,
+    codeConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
+  const {
+    width,
+    size,
+    inputBorderColor,
+    inputBorderFocusColor,
+    inputCaretColor,
+    inputFill,
+    inputPlaceholderTextColor,
+    inputSize,
+    inputTextColor,
+    inputTextSize,
+    shape,
+  } = propsGenerator
 
-    return codeConfig.appearance[appearance]
-  }, [appearance])
+  const theme = useMemo(
+    () =>
+      createCodeOtpTheme({
+        size,
+        inputBorderColor,
+        inputBorderFocusColor,
+        inputFill,
+        inputPlaceholderTextColor,
+        inputSize,
+        inputTextColor,
+        inputTextSize,
+        shape,
+        isDisabled,
+      }),
+    [
+      inputBorderColor,
+      inputBorderFocusColor,
+      inputFill,
+      inputPlaceholderTextColor,
+      inputSize,
+      inputTextColor,
+      inputTextSize,
+      isDisabled,
+      shape,
+      size,
+    ],
+  )
+
+  const focusColor = resolveFocusColor(inputCaretColor)
+
+  useEffect(() => {
+    if (initialValue) {
+      otpRef.current?.setValue(initialValue)
+    }
+  }, [initialValue])
 
-  const fillKey = fill || appearanceConfig?.fill
-  const borderColorKey = borderColor || appearanceConfig?.borderColor
-  const shapeKey = shape || appearanceConfig?.shape || 'rounded'
-  const sizeKey = size || appearanceConfig?.size || DEFAULT_CODE_SIZE
-  const textColorKey = textColor || appearanceConfig?.textColor
-  const textSizeKey = textSize || appearanceConfig?.textSize
+  const handleTextChange = (text: string) => {
+    onChange?.(text)
+  }
 
   return (
     <View
-      style={[
-        styles.code,
-        styles[`code_variant_${variant}`],
-        styles[`code_size_${sizeKey}`],
-        fillKey && tokens[`fill_${fillKey}`],
-        borderColorKey && tokens[`border_color_${borderColorKey}`],
-        shapeKey && tokens[`shape_${shapeKey}`],
-        style && style,
-      ]}
+      style={[styles.code, width && tokens[`width_${width}`], style]}
+      testID={dataTestId}
     >
-      <Text
-        size={textSizeKey}
-        textColor={textColorKey}
-        style={styles.code__text}
-      >
-        {children}
-      </Text>
+      {before}
+      <OtpInput
+        type={inputType}
+        ref={otpRef}
+        autoFocus={inputAutoFocus}
+        disabled={isDisabled}
+        focusColor={focusColor}
+        numberOfDigits={inputCount}
+        placeholder={inputPlaceholder}
+        theme={theme}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        onTextChange={handleTextChange}
+      />
+      {after}
     </View>
   )
 }

package/src/components/Code/appearance/codeDefault.ts

@@ -2,9 +2,11 @@ import type { CodeAppearance } from '../Code.interface'
 
 const codeAppearanceDefault = {
   defaultPrimary: {
-    fill: 'surfaceSecondary',
-    borderColor: 'surfaceBorderTertiary',
-    textColor: 'surfaceTextPrimary',
+    inputBorderColor: 'surfaceBorderTertiary',
+    inputCaretColor: 'surfaceItemPrimary',
+    inputFill: 'surfaceSecondary',
+    inputPlaceholderTextColor: 'surfaceTextQuaternary',
+    inputTextColor: 'surfaceTextPrimary',
   },
 } satisfies CodeAppearance
 

package/src/components/Code/appearance/codeDisabled.ts

@@ -2,9 +2,11 @@ import type { CodeAppearance } from '../Code.interface'
 
 const codeAppearanceDisabled = {
   disabledPrimary: {
-    fill: 'surfaceDisabled',
-    borderColor: 'surfaceBorderDisabled',
-    textColor: 'surfaceTextPrimary',
+    inputBorderColor: 'surfaceBorderDisabled',
+    inputCaretColor: 'surfaceItemPrimary',
+    inputFill: 'surfaceDisabled',
+    inputPlaceholderTextColor: 'surfaceTextQuaternary',
+    inputTextColor: 'surfaceTextPrimary',
   },
 } satisfies CodeAppearance
 

package/src/components/Code/appearance/codeError.ts

@@ -2,9 +2,11 @@ import type { CodeAppearance } from '../Code.interface'
 
 const codeAppearanceError = {
   errorPrimary: {
-    fill: 'errorTertiary',
-    borderColor: 'errorBorderQuaternary',
-    textColor: 'surfaceTextPrimary',
+    inputBorderColor: 'errorBorderQuaternary',
+    inputCaretColor: 'surfaceItemPrimary',
+    inputFill: 'errorTertiary',
+    inputPlaceholderTextColor: 'surfaceTextQuaternary',
+    inputTextColor: 'surfaceTextPrimary',
   },
 } satisfies CodeAppearance
 

package/src/components/Code/appearance/codeRequire.ts

@@ -0,0 +1,13 @@
+import type { CodeAppearance } from '../Code.interface'
+
+const codeAppearanceRequire = {
+  requirePrimary: {
+    inputBorderColor: 'warningBorderSecondary',
+    inputCaretColor: 'surfaceItemPrimary',
+    inputFill: 'warningTertiary',
+    inputPlaceholderTextColor: 'surfaceTextQuaternary',
+    inputTextColor: 'surfaceTextPrimary',
+  },
+} satisfies CodeAppearance
+
+export { codeAppearanceRequire }

package/src/components/Code/appearance/codeShape.ts

@@ -1,4 +1,4 @@
-import type { CodeAppearance } from '../Code.interface'
+import type { CodeAppearanceShape } from '../Code.interface'
 
 const codeAppearanceShape = {
   circular: {
@@ -7,9 +7,21 @@ const codeAppearanceShape = {
   rounded: {
     shape: 'rounded',
   },
+  roundedXL: {
+    shape: 'roundedXL',
+  },
+  roundedL: {
+    shape: 'roundedL',
+  },
+  roundedM: {
+    shape: 'roundedM',
+  },
+  roundedS: {
+    shape: 'roundedS',
+  },
   geometric: {
     shape: 'geometric',
   },
-} satisfies CodeAppearance
+} satisfies CodeAppearanceShape
 
 export { codeAppearanceShape }

package/src/components/Code/appearance/codeSize.ts

@@ -1,18 +1,21 @@
-import type { CodeAppearance } from '../Code.interface'
+import type { CodeAppearanceSize } from '../Code.interface'
 
 const codeAppearanceSize = {
   sizeL: {
     size: 'l',
-    textSize: 'l',
+    inputSize: 'l',
+    inputTextSize: 'xxl',
   },
   sizeM: {
     size: 'm',
-    textSize: 'm',
+    inputSize: 'm',
+    inputTextSize: 'xxl',
   },
   sizeS: {
     size: 's',
-    textSize: 's',
+    inputSize: 's',
+    inputTextSize: 'xl',
   },
-} satisfies CodeAppearance
+} satisfies CodeAppearanceSize
 
 export { codeAppearanceSize }

package/src/components/Code/appearance/codeStyle.ts

@@ -1,16 +1,19 @@
-import type { CodeAppearance } from '../Code.interface'
+import type { CodeAppearanceStyle } from '../Code.interface'
 
 const codeAppearanceStyle = {
   solid: {
-    borderColor: 'none',
+    inputBorderColor: 'none',
   },
   outlined: {
-    fill: 'none',
+    inputFill: 'none',
+  },
+  full: {
+    inputBorderColor: 'none',
   },
   ghost: {
-    fill: 'none',
-    borderColor: 'none',
+    inputBorderColor: 'none',
+    inputFill: 'none',
   },
-} satisfies CodeAppearance
+} satisfies CodeAppearanceStyle
 
 export { codeAppearanceStyle }