@xqmsg/ui-core 0.26.2 → 0.27.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.26.2",
+  "version": "0.27.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/input/Input.stories.tsx

@@ -76,6 +76,7 @@ interface StoryFormSchema {
   prop4?: string;
   prop5?: string;
   prop6?: boolean;
+  prop7?: number;
 }
 
 const onStubbedSubmit = () => null;
@@ -87,6 +88,7 @@ const storyFormDefaultValues: StoryFormSchema = {
   prop4: '',
   prop5: '',
   prop6: true,
+  prop7: undefined,
 };
 
 const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
@@ -96,6 +98,7 @@ const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
   prop4: Yup.string(),
   prop5: Yup.string(),
   prop6: Yup.boolean(),
+  prop7: Yup.number(),
 });
 
 export default meta;
@@ -175,6 +178,22 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop3"
         onChange={e => form.setValue('prop3', e.target.value)}
       />
+      <Input
+        {...args}
+        label={args.label + ' - number'}
+        inputType="number"
+        name="prop7"
+        ariaLabel="number input"
+        min={0}
+        max={100}
+        step={1}
+        precision={2}
+        setValue={form.setValue}
+        setError={form.setError}
+        clearErrors={form.clearErrors}
+        isInvalid={!!form.formState.errors['prop7']?.message}
+        errorText={form.formState.errors['prop7']?.message}
+      />
       <Input
         {...args}
         inputType="text"

package/src/components/input/InputTypes.ts

@@ -16,7 +16,8 @@ export type InputType =
   | 'textarea'
   | 'radio'
   | 'checkbox'
-  | 'switch';
+  | 'switch'
+  | 'number';
 
 export type FieldOption = {
   label: string;
@@ -43,6 +44,9 @@ export interface InputFieldProps
       | 'ref'
       | 'onChange'
       | 'defaultValue'
+      | 'min'
+      | 'max'
+      | 'step'
     >,
     FieldProps,
     Partial<InputProps> {}

package/src/components/input/StackedNumberInput/StackedNumberInput.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import {
+  InputGroup,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+} from '@chakra-ui/react';
+import { InputFieldProps } from '../InputTypes';
+
+export interface StackedNumberInputProps extends InputFieldProps {
+  isRequired?: boolean;
+  leftElement?: React.ReactNode;
+  rightElement?: React.ReactNode;
+  variant?: string;
+  label?: string;
+  min?: number;
+  max?: number;
+  step?: number;
+  precision?: number;
+  showStepper?: boolean;
+}
+
+/**
+ * A functional React component that renders Chakra UI's `NumberInput` wrapped
+ * in an `InputGroup`, following the same pattern as `StackedInput`.
+ */
+const StackedNumberInput = React.forwardRef<
+  HTMLInputElement,
+  StackedNumberInputProps
+>(
+  (
+    {
+      name,
+      id,
+      placeholder,
+      isRequired,
+      isInvalid,
+      disabled,
+      value,
+      defaultValue,
+      min,
+      max,
+      step = 1,
+      precision = 0,
+      showStepper = false,
+      variant,
+      className,
+      label,
+      leftElement,
+      rightElement,
+      onChange,
+      onBlur,
+    },
+    ref
+  ) => {
+    const isMobile = variant === 'mobile';
+    const resolvedPlaceholder = isMobile && label ? label : placeholder;
+    const inputValue =
+      typeof value === 'string' || typeof value === 'number' ? value : undefined;
+    const normalizedValue =
+      precision === 0 && inputValue !== undefined && inputValue !== ''
+        ? Number.isNaN(Number(inputValue))
+          ? inputValue
+          : String(Math.round(Number(inputValue)))
+        : inputValue;
+
+    return (
+      <InputGroup>
+        {leftElement && leftElement}
+        {label && !isMobile && label}
+        <NumberInput
+          id={id}
+          name={name}
+          isRequired={isRequired}
+          isInvalid={isInvalid}
+          isDisabled={disabled}
+          value={normalizedValue}
+          defaultValue={defaultValue}
+          min={min}
+          max={max}
+          step={step}
+          precision={precision}
+          onChange={(_: string, valueAsNumber: number) =>
+            onChange?.({
+              target: {
+                name,
+                value: Number.isNaN(valueAsNumber)
+                  ? ''
+                  : precision === 0
+                    ? String(Math.round(valueAsNumber))
+                    : String(valueAsNumber),
+              },
+            } as React.ChangeEvent<HTMLInputElement>)
+          }
+          className={className}
+          variant={variant === 'mobile' ? 'mobile' : 'default'}
+          width="100%"
+        >
+          <NumberInputField
+            ref={ref}
+            placeholder={resolvedPlaceholder}
+            onBlur={onBlur}
+          />
+          {showStepper && (
+            <NumberInputStepper>
+              <NumberIncrementStepper />
+              <NumberDecrementStepper />
+            </NumberInputStepper>
+          )}
+        </NumberInput>
+        {rightElement && rightElement}
+      </InputGroup>
+    );
+  }
+);
+
+StackedNumberInput.displayName = 'StackedNumberInput';
+
+export default StackedNumberInput;

package/src/components/input/index.tsx

@@ -22,6 +22,7 @@ import {
   UseFormSetValue,
 } from 'react-hook-form';
 import StackedMultiSelect from './StackedMultiSelect';
+import StackedNumberInput from './StackedNumberInput/StackedNumberInput';
 import StackedPilledInput from './StackedPilledInput';
 import StackedSwitch from './StackedSwitch';
 import { Label } from './components/label';
@@ -32,7 +33,7 @@ export interface InputProps<T extends FieldValues = FieldValues>
   name: string;
   ariaLabel: string;
   placeholder?: string;
-  defaultValue?: string;
+  defaultValue?: string | number;
   label?: string;
   className?: string;
   options?: FieldOption[];
@@ -54,6 +55,14 @@ export interface InputProps<T extends FieldValues = FieldValues>
   truncatePillLength?: number;
   searchable?: boolean;
   overflowMode?: 'scroll' | 'wrap';
+  /** Minimum value (numberInput only) */
+  min?: number;
+  /** Maximum value (numberInput only) */
+  max?: number;
+  /** Increment/decrement step (numberInput only) */
+  step?: number;
+  /** Number of decimal places (numberInput only) */
+  precision?: number;
 }
 
 /**
@@ -90,12 +99,16 @@ export function Input<T extends FieldValues>({
   truncatePillLength,
   searchable,
   overflowMode = 'scroll',
+  min,
+  max,
+  step,
+  precision,
 }: InputProps<T>) {
   function selectedInputField<T extends Element = Element>(
-    onChange: ((e: ChangeEvent<T>) => void) | ((v?: string) => void),
+    onChange: ((e: ChangeEvent<T>) => void) | ((v?: string | number) => void),
     onBlur: () => void,
     ref: RefCallBack,
-    value: string
+    value: string | number
   ) {
     switch (inputType) {
       case 'text':
@@ -121,6 +134,33 @@ export function Input<T extends FieldValues>({
             label={label as string}
           />
         );
+      case 'number':
+        return (
+          <StackedNumberInput
+            className={`input-${inputType} ${className ?? ''}`}
+            aria-label={ariaLabel}
+            name={name}
+            id={name}
+            placeholder={placeholder}
+            maxLength={maxLength}
+            isRequired={isRequired}
+            isInvalid={isInvalid}
+            onChange={onChange as (e: ChangeEvent) => void}
+            onBlur={onBlur}
+            ref={ref}
+            rightElement={rightElement}
+            leftElement={leftElement}
+            disabled={disabled}
+            defaultValue={defaultValue}
+            value={value}
+            variant={variant}
+            label={label as string}
+            min={min}
+            max={max}
+            step={step}
+            precision={precision}
+          />
+        );
       case 'radio':
         return (
           <StackedRadioGroup

package/src/theme/customXQChakraTheme.ts

@@ -39,6 +39,7 @@ const customXQChakraTheme = extendTheme({
     FormError,
     FormLabel,
     Input,
+    NumberInput: Input,
     Link,
     Menu,
     Modal,