feat: Add NumberStepper form component

Author: codinsonn

features/@app-core/components/styled.tsx

@@ -36,7 +36,7 @@ export const ScrollView = remapProps(styled(RNScrollView), {
 
 /* --- Typography ------------------------------------------------------------------------------ */
 
-export const H1 = styled(RNText, 'font-bold text-2xl')
+export const H1 = styled(RNText, 'font-bold text-3xl')
 export const H2 = styled(RNText, 'font-bold text-xl')
 export const H3 = styled(RNText, 'font-bold text-lg')
 

features/@app-core/forms/NumberStepper.tsx

@@ -0,0 +1,138 @@
+import { forwardRef, ElementRef, useState, useEffect } from 'react'
+import type { NativeSyntheticEvent, TextInputKeyPressEventData } from 'react-native'
+import { TextInput } from './TextInput.styled'
+import { z, schema } from '@green-stack/schemas'
+import { cn, View, Pressable } from '../components/styled'
+import { AddFilled } from '../icons/AddFilled'
+import { RemoveFilled } from '../icons/RemoveFilled'
+
+/* --- Schema ---------------------------------------------------------------------------------- */
+
+export const NumberStepperProps = schema('NumberStepperProps', {
+    value: z.number().default(0),
+    min: z.number().default(0),
+    max: z.number().optional(),
+    step: z.number().default(1),
+    placeholder: z.string().optional().example('Enter number...'),
+    className: z.string().optional(),
+    placeholderClassName: z.string().optional(),
+    placeholderTextColor: z.string().optional(),
+    hasError: z.boolean().default(false),
+    readOnly: z.boolean().default(false),
+    disabled: z.boolean().default(false),
+})
+
+type NumberStepperProps = z.input<typeof NumberStepperProps> & {
+    onChange: (value: number) => void
+}
+
+/* --- <NumberStepper/> ------------------------------------------------------------------------ */
+
+export const NumberStepper = forwardRef<
+    ElementRef<typeof TextInput>,
+    NumberStepperProps
+>((rawProps, ref) => {
+    // Props
+    const props = NumberStepperProps.applyDefaults(rawProps)
+    const { min, max, step, onChange, ...restProps } = props
+
+    // State
+    const [value, setValue] = useState(props.value)
+
+    // Helpers
+    const constrainValue = (value: number) => Math.min(Math.max(value, min), max || Infinity)
+
+    // Vars
+    const numberValue = constrainValue(value)
+
+    // Flags
+    const hasMinValue = typeof rawProps.min !== undefined
+    const hasMaxValue = typeof rawProps.max !== undefined
+    const hasReachedMin = hasMinValue && numberValue === min
+    const hasReachedMax = hasMaxValue && numberValue === max
+ 
+    // -- Handlers --
+
+    const onIncrement = () => setValue(constrainValue(numberValue + step))
+
+    const onDecrement = () => setValue(constrainValue(numberValue - step))
+
+    const onKeyPress = ({ nativeEvent }: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+        const isUpKey = nativeEvent.key === 'ArrowUp'
+        const isDownKey = nativeEvent.key === 'ArrowDown'
+        if (isUpKey) return onIncrement()
+        if (isDownKey) return onDecrement()
+    }
+
+    // -- Effects --
+
+    useEffect(() => {
+        if (value) onChange(value)
+    }, [value])
+
+    // -- Render --
+
+    return (
+        <View
+            className={cn(
+                'h-10 native:h-12',
+                'web:flex web:w-full',
+                'web:max-w-[200px]',
+            )}
+        >
+            <Pressable
+                className={cn(
+                    "absolute top-0 left-0 items-center justify-center select-none z-10",
+                    "w-10 h-10 native:w-12 native:h-12",
+                    "border-r border-r-input",
+                    hasReachedMin && 'opacity-50',
+                    props.hasError && 'border-r-error',
+                )}
+                onPress={onDecrement}
+                disabled={hasReachedMin}
+                hitSlop={10}
+            >
+                <RemoveFilled size={20} />
+            </Pressable>
+            <TextInput
+                ref={ref}
+                keyboardType="numeric"
+                {...restProps}
+                className={cn(
+                    'text-center',
+                    'px-10 native:px-12',
+                    'web:max-w-[200px]',
+                    props.className,
+                )}
+                onKeyPress={onKeyPress}
+                value={value ? `${value}` : ''}
+                onChangeText={(newValue = '') => {
+                    // Strip non-numeric characters
+                    const strippedValue = newValue.replace(/[^0-9]/g, '')
+                    // If empty, show placeholder
+                    if (!strippedValue) setValue(undefined as unknown as number)
+                    // Convert to number
+                    const newNumberValue = +strippedValue 
+                    // @ts-ignore
+                    setValue(newNumberValue)
+                }}
+            />
+            <Pressable
+                className={cn(
+                    "absolute top-0 right-0 items-center justify-center select-none z-10",
+                    "w-10 h-10 native:w-12 native:h-12",
+                    "border-l border-l-input",
+                    hasReachedMax && 'opacity-50',
+                    props.hasError && 'border-l-error',
+                )}
+                onPress={onIncrement}
+                disabled={hasReachedMax}
+                hitSlop={10}
+            >
+                <AddFilled size={20} />
+            </Pressable>
+        </View>
+    )
+})
+
+

features/@app-core/forms/Select.styled.tsx

@@ -419,6 +419,7 @@ const SelectComponent = forwardRef<
                             className={cn(
                                 'text-foreground text-sm',
                                 'native:text-lg',
+                                !value && !!placeholder && 'text-muted',
                                 props.valueClassName,
                             )}
                             placeholder={placeholder}

features/@app-core/forms/TextInput.styled.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, ElementRef } from 'react'
 import { TextInput as BaseTextInput } from '@green-stack/forms/TextInput.primitives'
-import { cn } from '@green-stack/utils/tailwindUtils'
+import { cn, theme } from '../components/styled'
 import { z, schema, PropsOf } from '@green-stack/schemas'
 
 /* --- Props ----------------------------------------------------------------------------------- */
@@ -9,9 +9,11 @@ export const TextInputProps = schema('TextInputProps', {
     value: z.string().optional(),
     placeholder: z.string().optional().example('Start typing...'),
     className: z.string().optional(),
-    placeholderClassName: z.string().optional(),
+    placeholderClassName: z.string().optional(), // @ts-ignore
+    placeholderTextColor: z.string().default(theme?.colors?.muted),
     hasError: z.boolean().default(false),
     readOnly: z.boolean().default(false),
+    disabled: z.boolean().default(false),
 })
 
 export type TextInputProps = PropsOf<typeof BaseTextInput, typeof TextInputProps>
@@ -30,6 +32,11 @@ export const TextInput = forwardRef<
     return (
         <BaseTextInput
             ref={ref}
+            {...props}
+            placeholderClassName={cn(
+                'text-muted',
+                props.placeholderClassName,
+            )}
             className={cn(
                 'h-10 rounded-md bg-background px-3 text-base text-foreground',
                 'border border-input',
@@ -39,10 +46,9 @@ export const TextInput = forwardRef<
                 'web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
                 'file:border-0 file:bg-transparent file:font-medium',
                 props.readOnly && 'opacity-50 eb:cursor-not-allowed',
-                !!props.hasError && 'border border-error',
+                props.hasError && 'border border-error',
+                props.className,
             )}
-            placeholderClassName={cn('text--muted-foreground', props.placeholderClassName)}
-            {...props}
         />
     )
 })

features/@app-core/icons/AddFilled.tsx

@@ -0,0 +1,44 @@
+import Svg, { Path } from 'react-native-svg'
+import { cssInterop } from 'nativewind'
+import { z, iconProps, IconProps } from '../schemas/IconProps'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export const AddFilledProps = iconProps('AddFilled', {
+    color: z.string().default('#333333'),
+})
+
+export type AddFilledProps = IconProps<typeof AddFilledProps>
+
+/* --- <AddFilled/> -------------------------------------------------------------------------- */
+
+export const AddFilledBase = (rawProps: AddFilledProps) => {
+    // Props
+    const props = AddFilledProps.applyDefaults(rawProps)
+    const color = AddFilledProps.getIconColor(props)
+    // Render
+    return (
+        <Svg width={props.size} height={props.size} fill="none" viewBox="0 0 24 24" {...props}>
+            <Path
+                fill={color}
+                fillRule="evenodd"
+                d="M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z"
+                clipRule="evenodd"
+            />
+            <Path
+                fill={color}
+                fillRule="evenodd"
+                d="M12 2C12.5523 2 13 2.44772 13 3V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V3C11 2.44772 11.4477 2 12 2Z"
+                clipRule="evenodd"
+            />
+        </Svg>
+    )
+}
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export const AddFilled = cssInterop(AddFilledBase, {
+    className: {
+        target: 'style',
+    },
+})

features/@app-core/icons/RemoveFilled.tsx

@@ -0,0 +1,38 @@
+import Svg, { Path } from 'react-native-svg'
+import { cssInterop } from 'nativewind'
+import { z, iconProps, IconProps } from '../schemas/IconProps'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export const RemoveFilledProps = iconProps('RemoveFilled', {
+    color: z.string().default('#333333'),
+})
+
+export type RemoveFilledProps = IconProps<typeof RemoveFilledProps>
+
+/* --- <RemoveFilled/> -------------------------------------------------------------------------- */
+
+export const RemoveFilledBase = (rawProps: RemoveFilledProps) => {
+    // Props
+    const props = RemoveFilledProps.applyDefaults(rawProps)
+    const color = RemoveFilledProps.getIconColor(props)
+    // Render
+    return (
+        <Svg width={props.size} height={props.size} fill="none" viewBox="0 0 24 24" {...props}>
+            <Path
+                fill={color}
+                fillRule="evenodd"
+                d="M2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12Z"
+                clipRule="evenodd"
+            />
+        </Svg>
+    )
+}
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export const RemoveFilled = cssInterop(RemoveFilledBase, {
+    className: {
+        target: 'style',
+    },
+})