@startupjs-ui/text-input 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/text-input
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### Bug Fixes
+
+* **text-input:** increase padding for 'm' size ([b3b6836](https://github.com/startupjs/startupjs-ui/commit/b3b6836ffea7f26d73851fbee3e6c6f0c53a81d3))
+* **text-input:** set default font ([a77a27b](https://github.com/startupjs/startupjs-ui/commit/a77a27bbe570537d0f95784aad9e2b58627a6b0f))
+
+
+### Features
+
+* add mdx and docs packages. Refactor docs to get rid of any @startupjs/ui usage and use startupjs-ui instead ([703c926](https://github.com/startupjs/startupjs-ui/commit/703c92636efb0421ffd11783f692fc892b74018f))
+* **text-input:** refactor TextInput component ([d0c7d64](https://github.com/startupjs/startupjs-ui/commit/d0c7d64233e575227c1764454c336735e203a95b))

package/README.mdx

@@ -0,0 +1,165 @@
+import { useState } from 'react'
+import TextInput, { _PropsJsonSchema as TextInputPropsJsonSchema } from './index'
+import Div from '@startupjs-ui/div'
+import Br from '@startupjs-ui/br'
+import { faSearch, faTimesCircle } from '@fortawesome/free-solid-svg-icons'
+import { Sandbox } from '@startupjs-ui/docs'
+import './index.mdx.cssx.styl'
+
+# TextInput
+
+TextInput lets user enter or edit text.
+
+```jsx
+import { TextInput } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const [value, setValue] = useState()
+return (
+  <TextInput
+    placeholder='TextInput'
+    value={value}
+    onChangeText={setValue}
+  />
+)
+```
+
+## Disabled
+
+```jsx example
+return (
+  <TextInput
+    disabled
+    value='disabled'
+  />
+)
+```
+
+## Readonly
+
+```jsx example
+return (
+  <TextInput
+    value='readonly'
+    readonly
+  />
+)
+```
+
+## Sizes
+
+Size can be modified using the `size` prop. Default size is `m`.
+
+```jsx example
+const [valueL, setValueL] = useState()
+const [valueM, setValueM] = useState()
+const [valueS, setValueS] = useState()
+return (
+  <Div>
+    <TextInput
+      size='s'
+      value={valueS}
+      onChangeText={setValueS}
+    />
+    <Br />
+    <TextInput
+      size='m'
+      value={valueM}
+      onChangeText={setValueM}
+    />
+    <Br />
+    <TextInput
+      size='l'
+      value={valueL}
+      onChangeText={setValueL}
+    />
+  </Div>
+)
+```
+
+## Icons
+
+Icon can be added using `icon` and `secondaryIcon` properties. Position of icon can be changed by passing `iconPosition` to component (`left` by default). The `secondaryIcon` uses opposite position of `iconPosition`. To handle clicks on the icon, use the property `onIconPress` and `onSecondaryIconPress`. To change icon color use the ʻiconStyleName` and `secondaryIconStyleName` properties.
+
+In `.styl` file
+```stylus
+.icon
+  color var(--color-text-primary)
+```
+
+```jsx example
+const [valueLeft, setLeftValue] = useState()
+const [valueRight, setRightValue] = useState()
+return (
+  <Div>
+    <TextInput
+      icon={faSearch}
+      secondaryIcon={faTimesCircle}
+      secondaryIconStyleName='icon'
+      value={valueLeft}
+      onChangeText={setLeftValue}
+      onSecondaryIconPress={() => setLeftValue()}
+    />
+    <Br />
+    <TextInput
+      icon={faTimesCircle}
+      iconPosition='right'
+      value={valueRight}
+      onChangeText={setRightValue}
+      onIconPress={() => setRightValue()}
+    />
+  </Div>
+)
+```
+
+## Number of lines
+
+Pass `numberOfLines={number}` to set the number of lines.
+
+```jsx example
+const [value, setValue] = useState()
+
+return (
+  <TextInput
+    placeholder='write here'
+    value={value}
+    numberOfLines={4}
+    onChangeText={setValue}
+  />
+)
+```
+
+## Dynamic number of lines
+
+Pass `resize=true` to dynamically change number of lines according to content.
+
+```jsx example
+const [value, setValue] = useState()
+
+return (
+  <TextInput
+    placeholder='write here'
+    value={value}
+    resize
+    onChangeText={setValue}
+  />
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={TextInput}
+  propsJsonSchema={TextInputPropsJsonSchema}
+  extraParams={{
+    icon: { showIconSelect: true },
+    secondaryIcon: { showIconSelect: true }
+  }}
+  props={{
+    onIconPress: () => alert('"onIconPress" event on "TextInput" component'),
+  }}
+  block
+/>

package/index.cssx.styl

@@ -0,0 +1,111 @@
+// ----- CONFIG: $UI.TextInput
+$this = merge({
+  textColor: var(--TextInput-text-color),
+  borderWidth: 1,
+  heights: {
+    s: 2u,
+    m: 2.5u,
+    l: 3u
+  },
+  fontSizes: {
+    s: 1.75u,
+    m: 1.75u,
+    l: 2u
+  }
+  paddings: {
+    s: 0.5u,
+    m: 0.75u,
+    l: 1u
+  }
+}, $UI.TextInput, true)
+
+$this.caretColor = $this.textColor
+
+// ----- COMPONENT
+
+$inputBg = var(--color-bg-main-strong)
+$inputBorderColor = var(--color-border-main)
+$inputBgDisabled = var(--color-bg-main-subtle)
+$inputBorderWidth = 1px
+
+.input-input
+  margin 0 // important for safari
+  flex 1 // important for multiline
+  // padding-top, padding-bottom is important
+  // for android because it has invisible paddings
+  // on the web is important for textarea (override default paddings)
+  padding-top 0
+  padding-bottom 0
+  padding-left 1u
+  padding-right @padding-left
+  color: $this.textColor
+  background-color $inputBg
+  border-width $inputBorderWidth
+  border-style solid
+  border-color var(--color-border-main)
+  min-width 8u
+  radius()
+  fontFamily('normal')
+
+  +web()
+    outline 0
+    caret-color: $this.caretColor ? $this.caretColor : this.textColor
+
+  &.s
+    padding-top $this.paddings.s
+    padding-bottom $this.paddings.s
+    font-size $this.fontSizes.s
+    line-height $this.heights.s
+
+  &.m
+    padding-top $this.paddings.m
+    padding-bottom $this.paddings.m
+    font-size $this.fontSizes.m
+    line-height $this.heights.m
+
+  &.l
+    padding-top $this.paddings.l
+    padding-bottom $this.paddings.l
+    font-size $this.fontSizes.l
+    line-height $this.heights.l
+
+  &.disabled
+    background-color $inputBgDisabled
+
+    +web()
+      cursor default
+
+  &.focused
+    border-color var(--color-border-primary)
+
+  &.error
+    border-color var(--color-border-error)
+
+  for side in (left right)
+    &.icon-{side}
+      &.l
+        padding-{side} 5u
+
+      &.m
+        padding-{side} 4u
+
+      &.s
+        padding-{side} 4u
+
+.input-icon
+  position absolute
+  top 0
+  bottom 0
+  justify-content center
+  z-index 1
+
+  &.left
+    left 1u
+
+  &.right
+    right 1u
+
+// ----- JS EXPORTS
+
+:export
+  config: $this

package/index.d.ts

@@ -0,0 +1,58 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type ReactNode, type RefObject } from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle, type TextInputProps } from 'react-native';
+declare const _default: import("react").ComponentType<UITextInputProps>;
+export default _default;
+export declare const _PropsJsonSchema: {};
+export interface UITextInputProps extends Omit<TextInputProps, 'placeholder' | 'style'> {
+    /** Ref to access the underlying input */
+    ref?: RefObject<any>;
+    /** Custom styles for the wrapper element */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles for the input element */
+    inputStyle?: StyleProp<TextStyle>;
+    /** Custom styles for the primary icon */
+    iconStyle?: StyleProp<TextStyle>;
+    /** Custom styles for the secondary icon */
+    secondaryIconStyle?: StyleProp<TextStyle>;
+    /** Placeholder text */
+    placeholder?: string | number;
+    /** Test identifier */
+    testID?: string;
+    /** Input value @default '' */
+    value?: string;
+    /** Size preset @default 'm' */
+    size?: 'l' | 'm' | 's';
+    /** Disable input interactions @default false */
+    disabled?: boolean;
+    /** Render a non-editable value @default false */
+    readonly?: boolean;
+    /** Enable dynamic height based on content @default false */
+    resize?: boolean;
+    /** Number of lines to display @default 1 */
+    numberOfLines?: number;
+    /** Primary icon component */
+    icon?: any;
+    /** Position of the primary icon @default 'left' */
+    iconPosition?: 'left' | 'right';
+    /** Secondary icon component */
+    secondaryIcon?: any;
+    /** Primary icon press handler */
+    onIconPress?: () => void;
+    /** Secondary icon press handler */
+    onSecondaryIconPress?: () => void;
+    /** Focus event handler */
+    onFocus?: (...args: any[]) => void;
+    /** Blur event handler */
+    onBlur?: (...args: any[]) => void;
+    /** Change text handler */
+    onChangeText?: (...args: any[]) => void;
+    /** Custom wrapper renderer @private */
+    _renderWrapper?: (options: {
+        style?: StyleProp<ViewStyle>;
+    }, children: ReactNode) => ReactNode;
+    /** Error state flag @private */
+    _hasError?: boolean;
+}

package/index.mdx.cssx.styl

@@ -0,0 +1,2 @@
+.icon
+  color var(--color-text-primary)

package/index.tsx

@@ -0,0 +1,263 @@
+import {
+  useState,
+  useMemo,
+  useRef,
+  type ReactNode,
+  type RefObject
+} from 'react'
+import {
+  TextInput as RNTextInput,
+  Platform,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+  type TextInputProps
+} from 'react-native'
+import { pug, observer, useIsomorphicLayoutEffect } from 'startupjs'
+import { themed, useColors } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Icon from '@startupjs-ui/icon'
+import Span from '@startupjs-ui/span'
+import STYLES from './index.cssx.styl'
+
+const {
+  config: {
+    caretColor,
+    heights,
+    paddings
+  }
+} = STYLES
+
+const IS_WEB = Platform.OS === 'web'
+const IS_ANDROID = Platform.OS === 'android'
+const ICON_SIZES = {
+  s: 'm',
+  m: 'm',
+  l: 'l'
+}
+
+export default observer(themed('TextInput', TextInput))
+
+export const _PropsJsonSchema = {/* TextInputProps */}
+
+export interface UITextInputProps extends Omit<TextInputProps, 'placeholder' | 'style'> {
+  /** Ref to access the underlying input */
+  ref?: RefObject<any>
+  /** Custom styles for the wrapper element */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles for the input element */
+  inputStyle?: StyleProp<TextStyle>
+  /** Custom styles for the primary icon */
+  iconStyle?: StyleProp<TextStyle>
+  /** Custom styles for the secondary icon */
+  secondaryIconStyle?: StyleProp<TextStyle>
+  /** Placeholder text */
+  placeholder?: string | number
+  /** Test identifier */
+  testID?: string
+  /** Input value @default '' */
+  value?: string
+  /** Size preset @default 'm' */
+  size?: 'l' | 'm' | 's'
+  /** Disable input interactions @default false */
+  disabled?: boolean
+  /** Render a non-editable value @default false */
+  readonly?: boolean
+  /** Enable dynamic height based on content @default false */
+  resize?: boolean
+  /** Number of lines to display @default 1 */
+  numberOfLines?: number
+  /** Primary icon component */
+  icon?: any
+  /** Position of the primary icon @default 'left' */
+  iconPosition?: 'left' | 'right'
+  /** Secondary icon component */
+  secondaryIcon?: any
+  /** Primary icon press handler */
+  onIconPress?: () => void
+  /** Secondary icon press handler */
+  onSecondaryIconPress?: () => void
+  /** Focus event handler */
+  onFocus?: (...args: any[]) => void
+  /** Blur event handler */
+  onBlur?: (...args: any[]) => void
+  /** Change text handler */
+  onChangeText?: (...args: any[]) => void
+  /** Custom wrapper renderer @private */
+  _renderWrapper?: (options: { style?: StyleProp<ViewStyle> }, children: ReactNode) => ReactNode
+  /** Error state flag @private */
+  _hasError?: boolean
+}
+
+function TextInput ({
+  ref,
+  style,
+  placeholder,
+  value = '',
+  size = 'm',
+  disabled = false,
+  readonly = false,
+  resize = false,
+  numberOfLines = 1,
+  iconPosition = 'left',
+  icon,
+  secondaryIcon,
+  onFocus,
+  onBlur,
+  onIconPress,
+  onSecondaryIconPress,
+  _renderWrapper,
+  _hasError,
+  ...props
+}: UITextInputProps): ReactNode {
+  const [focused, setFocused] = useState(false)
+  const [currentNumberOfLines, setCurrentNumberOfLines] = useState(numberOfLines)
+  const fallbackRef = useRef<any>(null)
+  const inputRef = ref ?? fallbackRef
+
+  const getColor = useColors()
+
+  function handleFocus (...args: any[]) {
+    onFocus && onFocus(...args)
+    setFocused(true)
+  }
+  function handleBlur (...args: any[]) {
+    onBlur && onBlur(...args)
+    setFocused(false)
+  }
+
+  if (!_renderWrapper) {
+    _renderWrapper = ({ style }: { style?: StyleProp<ViewStyle> }, children: ReactNode): ReactNode => pug`
+      Div(style=style)= children
+    `
+  }
+
+  useIsomorphicLayoutEffect(() => {
+    if (readonly || !resize) return
+    const numberOfLinesInValue = value.split('\n').length
+    if (numberOfLinesInValue >= numberOfLines) {
+      setCurrentNumberOfLines(numberOfLinesInValue)
+    }
+  }, [value, resize, numberOfLines, readonly])
+
+  if (IS_WEB) {
+    // repeat mobile behaviour on the web
+    // TODO
+    // test mobile device behaviour
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useIsomorphicLayoutEffect(() => {
+      if (readonly) return
+      if (focused && disabled) {
+        inputRef.current?.blur()
+        setFocused(false)
+      }
+    }, [disabled, focused, readonly])
+    // fix minWidth on web
+    // ref: https://stackoverflow.com/a/29990524/1930491
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useIsomorphicLayoutEffect(() => {
+      if (readonly) return
+      // TODO: looks like it's not available anymore on new versions of react-native-web
+      inputRef.current?.setNativeProps?.({ size: '1' })
+    }, [readonly])
+  }
+
+  // useDidUpdate(() => {
+  //   if (readonly) return
+  //   if (numberOfLines !== currentNumberOfLines) {
+  //     setCurrentNumberOfLines(numberOfLines)
+  //   }
+  // }, [numberOfLines, currentNumberOfLines, readonly])
+
+  const multiline = useMemo(() => {
+    return resize || numberOfLines > 1
+  }, [resize, numberOfLines])
+
+  const fullHeight = useMemo(() => {
+    return currentNumberOfLines * (heights[size] as number) + (paddings[size] as number) * 2
+  }, [currentNumberOfLines, size])
+
+  function onLayoutIcon (e: any) {
+    if (IS_WEB) {
+      e.nativeEvent.target.childNodes[0].tabIndex = -1
+      e.nativeEvent.target.childNodes[0].childNodes[0].tabIndex = -1
+    }
+  }
+
+  const inputExtraProps: Record<string, any> = {}
+  if (IS_ANDROID && multiline) inputExtraProps.textAlignVertical = 'top'
+
+  const inputStyleName = [
+    size,
+    {
+      disabled,
+      focused,
+      [`icon-${iconPosition}`]: !!icon,
+      [`icon-${getOppositePosition(iconPosition)}`]: !!secondaryIcon,
+      error: _hasError
+    }
+  ]
+
+  if (readonly) {
+    return pug`
+      Span= value
+    `
+  }
+
+  return _renderWrapper({
+    style: [style]
+  }, pug`
+    RNTextInput.input-input(
+      part=['input', {
+        inputIconLeft: icon && iconPosition === 'left',
+        inputIconRight: icon && iconPosition === 'right'
+      }]
+      ref=inputRef
+      style={ minHeight: fullHeight }
+      styleName=inputStyleName
+      selectionColor=caretColor
+      placeholder=placeholder
+      placeholderTextColor=getColor('text-placeholder')
+      value=value
+      disabled=IS_WEB ? disabled : undefined
+      editable=IS_WEB ? undefined : !disabled
+      multiline=multiline
+      selectTextOnFocus=false
+      onFocus=handleFocus
+      onBlur=handleBlur
+      ...props
+      ...inputExtraProps
+    )
+    if icon
+      Div.input-icon(
+        focusable=false
+        onLayout=onLayoutIcon
+        styleName=[size, iconPosition]
+        onPress=disabled ? undefined : onIconPress
+        pointerEvents=onIconPress ? undefined : 'none'
+      )
+        Icon(
+          part='icon'
+          icon=icon
+          size=ICON_SIZES[size]
+        )
+    if secondaryIcon
+      Div.input-icon(
+        focusable=false
+        onLayout=onLayoutIcon
+        styleName=[size, getOppositePosition(iconPosition)]
+        onPress=disabled ? undefined : onSecondaryIconPress
+        pointerEvents=onSecondaryIconPress ? undefined : 'none'
+      )
+        Icon(
+          part='secondaryIcon'
+          icon=secondaryIcon
+          size=ICON_SIZES[size]
+        )
+  `)
+}
+
+function getOppositePosition (position: 'left' | 'right') {
+  return position === 'left' ? 'right' : 'left'
+}

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@startupjs-ui/text-input",
+  "version": "0.1.3",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "index.tsx",
+  "types": "index.d.ts",
+  "type": "module",
+  "dependencies": {
+    "@startupjs-ui/core": "^0.1.3",
+    "@startupjs-ui/div": "^0.1.3",
+    "@startupjs-ui/icon": "^0.1.3",
+    "@startupjs-ui/span": "^0.1.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "startupjs": "*"
+  },
+  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+}