@butternutbox/pawprint-native 0.0.1 → 0.2.0

package/src/components/molecules/NumberField/NumberField.tsx

@@ -0,0 +1,186 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../../atoms/Typography"
+import {
+  NumberFieldInput,
+  type NumberFieldInputProps
+} from "./NumberFieldInput"
+
+type NumberFieldSize = "sm" | "lg"
+type NumberFieldState = "default" | "error" | "success"
+
+type NumberFieldOwnProps = {
+  label?: string
+  smallLabel?: string
+  description?: string
+  error?: string
+  state?: NumberFieldState
+  size?: NumberFieldSize
+  disabled?: boolean
+  onIncrement?: () => void
+  onDecrement?: () => void
+  showIncrementButton?: boolean
+  showDecrementButton?: boolean
+  incrementDisabled?: boolean
+  decrementDisabled?: boolean
+  min?: number
+  max?: number
+}
+
+export type NumberFieldProps = NumberFieldOwnProps &
+  Omit<NumberFieldInputProps, keyof NumberFieldOwnProps | "fieldSize"> &
+  Omit<ViewProps, keyof NumberFieldOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledRoot = styled(View)<{
+  rootGap: number
+}>(({ rootGap }) => ({
+  alignItems: "center",
+  gap: rootGap
+}))
+
+const StyledLabelGroup = styled(View)<{
+  labelGap: number
+}>(({ labelGap }) => ({
+  gap: labelGap
+}))
+
+/**
+ * Number field component for collecting numeric data with increment/decrement
+ * buttons and an optional side text label.
+ * Built on React Native TextInput with design system styling.
+ *
+ * @param {"sm" | "lg"} [size="lg"] - Size variant controlling typography and spacing.
+ * @param {string} [label] - Primary label text above the field.
+ * @param {string} [smallLabel] - Secondary label text displayed below the primary label.
+ * @param {string} [description] - Help text displayed below the field.
+ * @param {string} [error] - Error message displayed when state is "error".
+ * @param {"default" | "error" | "success"} [state="default"] - Visual state of the field.
+ * @param {boolean} [disabled=false] - Whether the entire field (input + buttons) is disabled.
+ * @param {() => void} [onIncrement] - Called when the + button is pressed.
+ * @param {() => void} [onDecrement] - Called when the - button is pressed.
+ * @param {boolean} [showIncrementButton=true] - Whether to show the + button.
+ * @param {boolean} [showDecrementButton=true] - Whether to show the - button.
+ * @param {boolean} [incrementDisabled=false] - Whether the + button is independently disabled.
+ * @param {boolean} [decrementDisabled=false] - Whether the - button is independently disabled.
+ * @param {number} [min] - Minimum allowed value. Clamps on blur and disables decrement at min.
+ * @param {number} [max] - Maximum allowed value. Clamps on blur and disables increment at max.
+ *
+ * @example
+ * ```tsx
+ * import { NumberField } from "@butternutbox/pawprint-native"
+ *
+ * <NumberField
+ *   label="Weight"
+ *   size="lg"
+ *   defaultValue="0"
+ *   onIncrement={() => setValue(v => v + 1)}
+ *   onDecrement={() => setValue(v => v - 1)}
+ * />
+ * ```
+ *
+ * Note: Unlike the web version, this component does not support a compound component API.
+ */
+export const NumberField = React.forwardRef<View, NumberFieldProps>(
+  (
+    {
+      label,
+      smallLabel,
+      description,
+      error,
+      state = "default",
+      size = "lg",
+      disabled,
+      onIncrement,
+      onDecrement,
+      showIncrementButton,
+      showDecrementButton,
+      incrementDisabled,
+      decrementDisabled,
+      min,
+      max,
+      ...inputProps
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const tokens = theme.tokens.components.numberField
+    const sizeTokens =
+      size === "lg" ? tokens.spacing.large : tokens.spacing.small
+    const typoTokens =
+      size === "lg" ? tokens.typography.large : tokens.typography.small
+
+    return (
+      <StyledRoot ref={ref} rootGap={parseTokenValue(sizeTokens.gap)}>
+        {(label || smallLabel) && (
+          <StyledLabelGroup
+            labelGap={parseTokenValue(
+              theme.tokens.components.inputs.spacing.label.gap
+            )}
+          >
+            {label && (
+              <Typography
+                token={typoTokens.label}
+                color={tokens.colour.text.label}
+              >
+                {label}
+              </Typography>
+            )}
+            {smallLabel && (
+              <Typography
+                token={typoTokens.smallLabel}
+                color={tokens.colour.text.description}
+              >
+                {smallLabel}
+              </Typography>
+            )}
+          </StyledLabelGroup>
+        )}
+        <NumberFieldInput
+          fieldSize={size}
+          state={state}
+          disabled={disabled}
+          onIncrement={onIncrement}
+          onDecrement={onDecrement}
+          showIncrementButton={showIncrementButton}
+          showDecrementButton={showDecrementButton}
+          incrementDisabled={incrementDisabled}
+          decrementDisabled={decrementDisabled}
+          min={min}
+          max={max}
+          accessibilityState={{ disabled }}
+          {...inputProps}
+        />
+        {description && state !== "error" && (
+          <Typography
+            token={
+              size === "lg"
+                ? tokens.typography.large.secondaryContent
+                : tokens.typography.small.smallLabel
+            }
+            color={tokens.colour.text.description}
+          >
+            {description}
+          </Typography>
+        )}
+        {error && state === "error" && (
+          <Typography
+            token={
+              size === "lg"
+                ? tokens.typography.large.secondaryContent
+                : tokens.typography.small.smallLabel
+            }
+            color={theme.tokens.components.inputs.colour.description.error}
+          >
+            {error}
+          </Typography>
+        )}
+      </StyledRoot>
+    )
+  }
+)
+
+NumberField.displayName = "NumberField"

package/src/components/molecules/NumberField/NumberFieldInput.tsx

@@ -0,0 +1,287 @@
+import React from "react"
+import { View, TextInput, TextInputProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { IconButton } from "../../atoms/IconButton"
+import { Add, Remove } from "@butternutbox/pawprint-icons/core"
+import { resolveFont } from "../../../fonts"
+
+type NumberFieldSize = "sm" | "lg"
+
+type NumberFieldInputOwnProps = {
+  fieldSize?: NumberFieldSize
+  state?: "default" | "error" | "success"
+  onIncrement?: () => void
+  onDecrement?: () => void
+  showIncrementButton?: boolean
+  showDecrementButton?: boolean
+  disabled?: boolean
+  incrementDisabled?: boolean
+  decrementDisabled?: boolean
+  min?: number
+  max?: number
+}
+
+export type NumberFieldInputProps = NumberFieldInputOwnProps &
+  Omit<TextInputProps, keyof NumberFieldInputOwnProps>
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const StyledFieldWrapper = styled(View)<{
+  fieldBgColor: string
+  fieldBorderColor: string
+  fieldBorderRadius: number
+  fieldMinWidth: number
+  fieldHeight: number
+  fieldPaddingHorizontal: number
+}>(
+  ({
+    fieldBgColor,
+    fieldBorderColor,
+    fieldBorderRadius,
+    fieldMinWidth,
+    fieldHeight,
+    fieldPaddingHorizontal
+  }) => ({
+    alignItems: "center",
+    justifyContent: "center",
+    width: fieldMinWidth,
+    height: fieldHeight,
+    paddingHorizontal: fieldPaddingHorizontal,
+    backgroundColor: fieldBgColor,
+    borderWidth: 1,
+    borderColor: fieldBorderColor,
+    borderRadius: fieldBorderRadius,
+    overflow: "hidden"
+  })
+)
+
+type FontWeight =
+  | "normal"
+  | "bold"
+  | "100"
+  | "200"
+  | "300"
+  | "400"
+  | "500"
+  | "600"
+  | "700"
+  | "800"
+  | "900"
+
+const StyledTextInput = styled(TextInput)<{
+  inputColor: string
+  inputFontFamily: string
+  inputFontWeight?: FontWeight
+  inputFontSize: number
+  inputLineHeight: number
+}>(
+  ({
+    inputColor,
+    inputFontFamily,
+    inputFontWeight,
+    inputFontSize,
+    inputLineHeight
+  }) => ({
+    textAlign: "center" as const,
+    outlineStyle: "none" as unknown as undefined,
+    padding: 0,
+    minWidth: 0,
+    minHeight: 0,
+    width: "100%",
+    height: "100%",
+    color: inputColor,
+    fontFamily: inputFontFamily,
+    ...(inputFontWeight ? { fontWeight: inputFontWeight } : {}),
+    fontSize: inputFontSize,
+    lineHeight: inputLineHeight
+  })
+)
+
+const StyledRow = styled(View)<{
+  rowGap: number
+}>(({ rowGap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  alignSelf: "center",
+  gap: rowGap
+}))
+
+/**
+ * Inner input field for NumberField.
+ * Renders decrement button, centered numeric input, increment button,
+ * and optional side text (e.g. "kg").
+ *
+ * Border states:
+ * - default: `colour.field.border.default`
+ * - focused: `colour.field.border.selected`
+ * - edited (blurred after change): `colour.field.border.edited`
+ * - error/success: from shared input tokens
+ */
+export const NumberFieldInput = React.forwardRef<
+  TextInput,
+  NumberFieldInputProps
+>(
+  (
+    {
+      fieldSize = "lg",
+      state = "default",
+      onIncrement,
+      onDecrement,
+      showIncrementButton = true,
+      showDecrementButton = true,
+      disabled = false,
+      incrementDisabled = false,
+      decrementDisabled = false,
+      min,
+      max,
+      style,
+      onFocus,
+      onBlur,
+      onChangeText,
+      defaultValue,
+      value,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const tokens = theme.tokens.components.numberField
+    const inputTokens = theme.tokens.components.inputs
+
+    const [isFocused, setIsFocused] = React.useState(false)
+    const [isEdited, setIsEdited] = React.useState(false)
+    const initialValueRef = React.useRef(value ?? defaultValue ?? "")
+
+    const isLarge = fieldSize === "lg"
+    const sizeTokens = isLarge ? tokens.spacing.large : tokens.spacing.small
+    const buttonSize = isLarge ? "lg" : "sm"
+    const fieldSizeTokens = isLarge ? tokens.size.large : tokens.size.small
+    const fieldMinWidth = parseTokenValue(fieldSizeTokens.minWidth)
+    const fieldHeight = parseTokenValue(fieldSizeTokens.height)
+    const fieldPaddingHorizontal = parseTokenValue(
+      inputTokens.spacing.field.horizontalPadding
+    )
+
+    const getBorderColor = (): string => {
+      if (state === "error") return inputTokens.colour.field.border.error
+      if (state === "success") return inputTokens.colour.field.border.success
+      if (isFocused) return tokens.colour.field.border.selected
+      if (isEdited) return tokens.colour.field.border.edited
+      return tokens.colour.field.border.default
+    }
+
+    const handleFocus = React.useCallback(
+      (e: Parameters<NonNullable<TextInputProps["onFocus"]>>[0]) => {
+        setIsFocused(true)
+        onFocus?.(e)
+      },
+      [onFocus]
+    )
+
+    const handleBlur = React.useCallback(
+      (e: Parameters<NonNullable<TextInputProps["onBlur"]>>[0]) => {
+        setIsFocused(false)
+        if (value != null && onChangeText) {
+          const num = Number(value)
+          if (!Number.isNaN(num)) {
+            const clamped =
+              min != null && num < min
+                ? min
+                : max != null && num > max
+                  ? max
+                  : num
+            if (clamped !== num) {
+              onChangeText(String(clamped))
+            }
+          }
+        }
+        onBlur?.(e)
+      },
+      [onBlur, value, min, max, onChangeText]
+    )
+
+    const numericValue =
+      value != null ? Number(value) : Number(defaultValue ?? 0)
+    const isAtMin = min != null && numericValue <= min
+    const isAtMax = max != null && numericValue >= max
+
+    const handleChangeText = React.useCallback(
+      (text: string) => {
+        setIsEdited(text !== initialValueRef.current)
+        onChangeText?.(text)
+      },
+      [onChangeText]
+    )
+
+    const typographyToken =
+      fieldSize === "lg"
+        ? tokens.typography.field.large
+        : tokens.typography.field.small
+
+    const resolvedInputFontFamily =
+      typographyToken.fontFamily && typographyToken.fontWeight
+        ? resolveFont(typographyToken.fontFamily, typographyToken.fontWeight)
+            .fontFamily
+        : typographyToken.fontFamily
+
+    return (
+      <StyledRow rowGap={parseTokenValue(sizeTokens.group.gap)}>
+        {showDecrementButton && (
+          <IconButton
+            icon={Remove}
+            variant="filled"
+            size={buttonSize}
+            colour="secondary"
+            aria-label="Decrease value"
+            onPress={onDecrement}
+            disabled={disabled || decrementDisabled || isAtMin}
+          />
+        )}
+        <StyledFieldWrapper
+          fieldBgColor={tokens.colour.field.background.default}
+          fieldBorderColor={getBorderColor()}
+          fieldBorderRadius={parseTokenValue(tokens.borderRadius.field.default)}
+          fieldMinWidth={fieldMinWidth}
+          fieldHeight={fieldHeight}
+          fieldPaddingHorizontal={fieldPaddingHorizontal}
+        >
+          <StyledTextInput
+            ref={ref}
+            inputColor={tokens.colour.field.text.default}
+            inputFontFamily={resolvedInputFontFamily}
+            inputFontWeight={
+              resolvedInputFontFamily === typographyToken.fontFamily
+                ? (typographyToken.fontWeight as FontWeight)
+                : undefined
+            }
+            inputFontSize={parseTokenValue(typographyToken.fontSize)}
+            inputLineHeight={parseTokenValue(typographyToken.lineHeight)}
+            keyboardType="numeric"
+            editable={!disabled}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onChangeText={handleChangeText}
+            defaultValue={defaultValue}
+            value={value}
+            style={style}
+            {...rest}
+          />
+        </StyledFieldWrapper>
+        {showIncrementButton && (
+          <IconButton
+            icon={Add}
+            variant="filled"
+            size={buttonSize}
+            colour="secondary"
+            aria-label="Increase value"
+            onPress={onIncrement}
+            disabled={disabled || incrementDisabled || isAtMax}
+          />
+        )}
+      </StyledRow>
+    )
+  }
+)
+
+NumberFieldInput.displayName = "NumberField.Input"

package/src/components/molecules/NumberField/index.ts

@@ -0,0 +1,2 @@
+export { NumberField } from "./NumberField"
+export type { NumberFieldProps } from "./NumberField"