@startupjs-ui/number-input 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# 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/number-input
+
+
+
+
+
+## [0.1.2](https://github.com/startupjs/startupjs-ui/compare/v0.1.1...v0.1.2) (2025-12-29)
+
+
+### 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))
+* **number-input:** refactor NumberInput component ([61f01c3](https://github.com/startupjs/startupjs-ui/commit/61f01c370cb12ab7c9aa110e829c2e8a08ff3f2b))

package/README.mdx

@@ -0,0 +1,207 @@
+import { useState } from 'react'
+import NumberInput, { _PropsJsonSchema as NumberInputPropsJsonSchema } from './index'
+import Div from '@startupjs-ui/div'
+import Br from '@startupjs-ui/br'
+import { Sandbox } from '@startupjs-ui/docs'
+
+# NumberInput
+
+NumberInput allows user to enter or edit number.
+
+```jsx
+import { NumberInput } from 'startupjs-ui'
+```
+
+## Simple example
+
+```jsx example
+const [value, setValue] = useState()
+return (
+  <NumberInput
+    value={value}
+    onChangeNumber={setValue}
+  />
+)
+```
+
+## Disabled
+
+```jsx example
+return (
+  <NumberInput
+    disabled
+    value={10}
+  />
+)
+```
+
+## Readonly
+
+```jsx example
+return (
+  <NumberInput
+    readonly
+    value={10}
+  />
+)
+```
+
+## Step
+
+The step specifies how many decimal places can be entered, set by the numbers 1, 0.1, 0.01, etc. in the `step` property (1 by default).
+
+```jsx example
+const [value, setValue] = useState()
+return (
+  <Div>
+    <NumberInput
+      value={value}
+      step={0.001}
+      onChangeNumber={setValue}
+    />
+  </Div>
+)
+```
+
+## Minimum and maximum value
+
+The minimum and maximum values are set by the `min` and `max` properties
+
+```jsx example
+const [value, setValue] = useState()
+return (
+  <Div>
+    <NumberInput
+      value={value}
+      min={-30}
+      max={20}
+      onChangeNumber={setValue}
+    />
+  </Div>
+)
+```
+
+## Buttons mode
+
+Buttons allow user to change the number at the specified step. The position of the buttons can be changed by passing the `buttonsMode` property with the value `vertical` or `horizontal` (`vertical` by default) to the component or hidden by passing the `buttonsMode` property with the value `none` to the component.
+
+```jsx example
+const [valueVertical, setValueVertical] = useState()
+const [valueHorizontal, setValueHorizontal] = useState()
+const [valueNone, setValueNone] = useState()
+return (
+  <Div>
+    <NumberInput
+      buttonsMode='vertical'
+      value={valueVertical}
+      onChangeNumber={setValueVertical}
+    />
+    <Br />
+    <NumberInput
+      buttonsMode='horizontal'
+      value={valueHorizontal}
+      onChangeNumber={setValueHorizontal}
+    />
+    <Br />
+    <NumberInput
+      buttonsMode='none'
+      value={valueNone}
+      onChangeNumber={setValueNone}
+    />
+  </Div>
+)
+```
+
+## 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>
+    <NumberInput
+      size='s'
+      value={valueS}
+      onChangeNumber={setValueS}
+    />
+    <Br />
+    <NumberInput
+      size='m'
+      value={valueM}
+      onChangeNumber={setValueM}
+    />
+    <Br />
+    <NumberInput
+      size='l'
+      value={valueL}
+      onChangeNumber={setValueL}
+    />
+  </Div>
+)
+```
+
+## Units
+
+The `units` property displays the units of the input. By default, units are displayed to the left of the input. Use `unitsPosition='right'` to display the units on the right side of the input.
+
+```jsx example
+const [value, setValue] = useState()
+return (
+  <NumberInput
+    value={value}
+    units='$'
+    onChangeNumber={setValue}
+  />
+)
+```
+
+## Stylization
+
+For stylization can apply the properties:
+
+- `style` - to style the root component
+- `inputStyle` - to style the input
+- `buttonStyle` - for styling buttons
+
+```jsx example
+const [value, setValue] = useState()
+
+return (
+  <NumberInput
+    style={{
+      width: 250
+    }}
+    buttonStyle={{
+      borderWidth: 0
+    }}
+    inputStyle={{
+      borderTopWidth: 0,
+      borderLeftWidth: 0,
+      borderRightWidth: 0,
+      borderRadius: 0
+    }}
+    placeholder='Enter number'
+    value={value}
+    onChangeNumber={setValue}
+  />
+)
+```
+
+## Sandbox
+
+<Sandbox
+  Component={NumberInput}
+  propsJsonSchema={NumberInputPropsJsonSchema}
+  extraParams={{
+    step: {
+      step: 0.0001
+    },
+    value: {
+      step: 0.0001
+    }
+  }}
+  block
+/>

package/buttons.tsx

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react'
+import { type StyleProp, type ViewStyle } from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Button from '@startupjs-ui/button'
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown'
+import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp'
+import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus'
+import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus'
+import './index.cssx.styl'
+
+interface NumberInputButtonsProps {
+  buttonStyle?: StyleProp<ViewStyle>
+  mode?: 'none' | 'horizontal' | 'vertical'
+  size?: 'l' | 'm' | 's'
+  disabled?: boolean
+  onIncrement?: (value: number) => void
+}
+
+function NumberInputButtons ({
+  buttonStyle,
+  mode,
+  size,
+  disabled,
+  onIncrement
+}: NumberInputButtonsProps): ReactNode {
+  const buttonStyleNames = [mode]
+
+  return pug`
+    if mode !== 'none'
+      Button.input-button.increase(
+        style=buttonStyle
+        styleName=buttonStyleNames
+        focusable=false
+        disabled=disabled
+        icon=mode === 'horizontal' ? faPlus : faAngleUp
+        size=size
+        variant='outlined'
+        onPress=() => onIncrement?.(1)
+      )
+      Button.input-button.decrease(
+        style=buttonStyle
+        styleName=buttonStyleNames
+        focusable=false
+        disabled=disabled
+        icon=mode === 'horizontal' ? faMinus : faAngleDown
+        size=size
+        variant='outlined'
+        onPress=() => onIncrement?.(-1)
+      )
+  `
+}
+
+export default observer(themed('NumberInput', NumberInputButtons))

package/index.cssx.styl

@@ -0,0 +1,87 @@
+$sizes = 'l' 'm' 's'
+// border color should be taken from text input config
+// because the input border and the button border overlap each other
+$inputBorderColor = var(--color-border-main)
+$padding = {
+  l: 6u,
+  m: 5u,
+  s: 4u
+}
+
+.input-wrapper
+  flex-grow 1
+
+  &.right
+    flex-direction row-reverse
+
+  &.readonly
+    align-self flex-start
+
+.input-units
+  align-self center
+
+  &.l
+    font(body1)
+
+  &.readonly
+    &.left
+      margin-right 0.5u
+
+    &.right
+      margin-left 0.5u
+
+.input-container
+  flex-grow 1
+  flex-shrink 1
+
+  &.left
+    margin-left 1u
+
+  &.right
+    margin-right 1u
+
+.input-input
+  for size in $sizes
+    padding = $padding[size]
+
+    &.vertical.{size}
+      padding-right padding
+
+    &.horizontal.{size}
+      padding-left padding
+      padding-right @padding-left
+
+.input-button
+  position absolute
+  border-color $inputBorderColor
+
+  &.vertical
+    right 0
+    height 50%
+
+    &.increase
+      top 0
+      border-top-left-radius 0
+      border-bottom-left-radius 0
+      border-bottom-right-radius 0
+
+    &.decrease
+      bottom 0
+      border-top-left-radius 0
+      border-bottom-left-radius 0
+      border-top-right-radius 0
+
+  &.horizontal
+    top 0
+    bottom 0
+    height auto
+
+    &.increase
+      right 0
+      border-top-left-radius 0
+      border-bottom-left-radius 0
+
+    &.decrease
+      left 0
+      border-top-right-radius 0
+      border-bottom-right-radius 0

package/index.d.ts

@@ -0,0 +1,48 @@
+/* eslint-disable */
+// DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
+
+import { type RefObject } from 'react';
+import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import './index.cssx.styl';
+export declare const _PropsJsonSchema: {};
+export interface NumberInputProps {
+    /** Custom styles for the wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Custom styles for increment and decrement buttons */
+    buttonStyle?: StyleProp<ViewStyle>;
+    /** Current numeric value */
+    value?: number;
+    /** Input size preset @default 'm' */
+    size?: 'l' | 'm' | 's';
+    /** Buttons layout @default 'vertical' */
+    buttonsMode?: 'none' | 'horizontal' | 'vertical';
+    /** Disable interactions @default false */
+    disabled?: boolean;
+    /** Render a non-editable value @default false */
+    readonly?: boolean;
+    /** Maximum allowed value */
+    max?: number;
+    /** Minimum allowed value */
+    min?: number;
+    /** Increment step @default 1 */
+    step?: number;
+    /** Units label displayed next to the value */
+    units?: string;
+    /** Units position @default 'left' */
+    unitsPosition?: 'left' | 'right';
+    /** Return key type for the keyboard @default 'done' */
+    returnKeyType?: string;
+    /** Handler triggered when numeric value changes */
+    onChangeNumber?: (value?: number) => void;
+    /** Ref to access the underlying TextInput */
+    ref?: RefObject<any>;
+    /** Custom styles for the input element */
+    inputStyle?: StyleProp<TextStyle>;
+    /** Placeholder text */
+    placeholder?: string | number;
+    /** Error flag @private */
+    _hasError?: boolean;
+    [key: string]: any;
+}
+declare const _default: import("react").ComponentType<NumberInputProps>;
+export default _default;

package/index.tsx

@@ -0,0 +1,248 @@
+import {
+  useEffect,
+  useMemo,
+  useState,
+  useRef,
+  type ReactNode,
+  type RefObject
+} from 'react'
+import {
+  Platform,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle
+} from 'react-native'
+import { pug, observer } from 'startupjs'
+import { themed } from '@startupjs-ui/core'
+import Div from '@startupjs-ui/div'
+import Span from '@startupjs-ui/span'
+import TextInput from '@startupjs-ui/text-input'
+import Buttons from './buttons'
+import './index.cssx.styl'
+
+const IS_IOS = Platform.OS === 'ios'
+
+export const _PropsJsonSchema = {/* NumberInputProps */}
+
+export interface NumberInputProps {
+  /** Custom styles for the wrapper */
+  style?: StyleProp<ViewStyle>
+  /** Custom styles for increment and decrement buttons */
+  buttonStyle?: StyleProp<ViewStyle>
+  /** Current numeric value */
+  value?: number
+  /** Input size preset @default 'm' */
+  size?: 'l' | 'm' | 's'
+  /** Buttons layout @default 'vertical' */
+  buttonsMode?: 'none' | 'horizontal' | 'vertical'
+  /** Disable interactions @default false */
+  disabled?: boolean
+  /** Render a non-editable value @default false */
+  readonly?: boolean
+  /** Maximum allowed value */
+  max?: number
+  /** Minimum allowed value */
+  min?: number
+  /** Increment step @default 1 */
+  step?: number
+  /** Units label displayed next to the value */
+  units?: string
+  /** Units position @default 'left' */
+  unitsPosition?: 'left' | 'right'
+  /** Return key type for the keyboard @default 'done' */
+  returnKeyType?: string
+  /** Handler triggered when numeric value changes */
+  onChangeNumber?: (value?: number) => void
+  /** Ref to access the underlying TextInput */
+  ref?: RefObject<any>
+  /** Custom styles for the input element */
+  inputStyle?: StyleProp<TextStyle>
+  /** Placeholder text */
+  placeholder?: string | number
+  /** Error flag @private */
+  _hasError?: boolean
+  [key: string]: any
+}
+
+function NumberInput ({
+  style,
+  buttonStyle,
+  value,
+  size = 'm',
+  buttonsMode = 'vertical',
+  disabled = false,
+  readonly = false,
+  max,
+  min,
+  step = 1,
+  units,
+  unitsPosition = 'left',
+  onChangeNumber,
+  returnKeyType = 'done',
+  ref,
+  ...props
+}: NumberInputProps): ReactNode {
+  const [inputValue, setInputValue] = useState<string | undefined>(undefined)
+  const inputValueRef = useRef<string | undefined>(undefined)
+
+  const precision = useMemo(() => {
+    return String(step).split('.')?.[1]?.length || 0
+  }, [step])
+
+  const regexp = useMemo(() => {
+    return precision > 0
+      ? new RegExp('^-?\\d*(\\.(\\d{0,' + precision + '})?)?$')
+      : /^-?\d*$/
+  }, [precision])
+
+  function updateInputValue (newValue: string | undefined) {
+    inputValueRef.current = newValue
+    setInputValue(newValue)
+  }
+
+  useEffect(() => {
+    if (value == null) {
+      updateInputValue('')
+      return
+    }
+
+    if (!isNaN(value) && Number(inputValueRef.current) !== value) {
+      let nextValue = value
+      if (min != null && nextValue < min) {
+        nextValue = min
+      } else if (max != null && nextValue > max) {
+        nextValue = max
+      }
+
+      nextValue = +nextValue.toFixed(precision)
+
+      updateInputValue(String(nextValue))
+      onChangeNumber && onChangeNumber(nextValue)
+    }
+  }, [value, min, max, precision, onChangeNumber])
+
+  function onChangeText (newValue: string) {
+    let formattedValue = newValue
+    // replace comma with dot for some locales
+    if (precision > 0) formattedValue = formattedValue.replace(/,/g, '.')
+
+    if (!regexp.test(formattedValue)) return
+
+    let updateValue: number | undefined
+    // check for an empty string and undefined
+    // and check for strings '-' or '.'
+    // to convert newValue to number
+    // otherwise should value should be undefined
+    if (formattedValue && !isNaN(Number(formattedValue))) {
+      const numericValue = Number(formattedValue)
+
+      if ((min != null && numericValue < min) || (max != null && numericValue > max)) {
+        // TODO: display tip?
+        return
+      }
+
+      updateValue = numericValue
+    }
+
+    updateInputValue(formattedValue)
+
+    // prevent update for the same values
+    // for example
+    // when add dot (values NUMBER and NUMBER. are the same)
+    // when add -
+    // when change value from -NUMBER to -
+    if (updateValue === value) return
+
+    onChangeNumber && onChangeNumber(updateValue)
+  }
+
+  function onIncrement (byNumber: number) {
+    const newValue = +((value ?? 0) + byNumber * step).toFixed(precision)
+    // we use string because this is the value for TextInput
+    onChangeText(String(newValue))
+  }
+
+  function getReturnKeyType (): string | undefined {
+    let res
+
+    if (IS_IOS && returnKeyType === 'none') {
+      res = 'default'
+    } else {
+      res = returnKeyType
+    }
+
+    return res
+  }
+
+  const extraStyleName: Record<string, any> = {}
+
+  if (units) {
+    extraStyleName[unitsPosition] = unitsPosition
+  }
+
+  const renderWrapper = (
+    { style: wrapperStyle }: { style?: StyleProp<ViewStyle> },
+    children: ReactNode
+  ): ReactNode => {
+    return pug`
+      Div(style=wrapperStyle)
+        Div.input-wrapper(
+          styleName=[extraStyleName, { readonly }]
+          row
+        )
+          if units
+            Span.input-units(
+              styleName=[size, extraStyleName, { readonly }]
+            )
+              = units
+          = children
+    `
+  }
+
+  if (readonly) {
+    return renderWrapper({
+      style: [style]
+    }, pug`
+      Span= value
+    `)
+  }
+
+  function renderInputWrapper (
+    wrapperProps: { style?: StyleProp<ViewStyle> },
+    children: ReactNode
+  ): ReactNode {
+    return renderWrapper(
+      wrapperProps,
+      pug`
+        Div.input-container(styleName=[extraStyleName])
+          Buttons(
+            buttonStyle=buttonStyle
+            mode=buttonsMode
+            size=size
+            disabled=disabled
+            onIncrement=onIncrement
+          )
+          = children
+      `)
+  }
+
+  return pug`
+    TextInput(
+      style=style
+      ref=ref
+      inputStyleName=['input-input', buttonsMode, size]
+      value=inputValue
+      size=size
+      disabled=disabled
+      keyboardType='numeric'
+      returnKeyType=getReturnKeyType()
+      onChangeText=onChangeText
+      _renderWrapper=renderInputWrapper
+      ...props
+    )
+  `
+}
+
+export default observer(
+  themed('NumberInput', NumberInput)
+)

package/package.json

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