@xqmsg/ui-core 0.26.1 → 0.27.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.26.1",
+  "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;
@@ -113,10 +116,10 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
   return (
     <Form formHandler={formHandler}>
       <Input
-        label="Pilled Text Input - scroll mode"
+        label={args.label + ' - Pilled Text -  scroll mode'}
         name="recipients"
         inputType="pilled-text"
-        placeholder="Enter email address..."
+        placeholder={args.placeholder ?? 'Enter email address...'}
         isInvalid={!!form.formState.errors['prop5']?.message}
         errorText={form.formState.errors['prop5']?.message}
         control={form.control}
@@ -129,10 +132,10 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         overflowMode="scroll"
       />
       <Input
-        label="Pilled Text - wrap mode"
+        label={args.label + ' - Pilled Text - wrap mod'}
         name="recipients"
         inputType="pilled-text"
-        placeholder="Enter email address..."
+        placeholder={args.placeholder ?? 'Enter email address...'}
         isInvalid={!!form.formState.errors['prop5']?.message}
         errorText={form.formState.errors['prop5']?.message}
         control={form.control}
@@ -147,6 +150,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="multi-select"
+        label={args.label + ' - multi-select'}
         setValue={form.setValue}
         setError={form.setError}
         clearErrors={form.clearErrors}
@@ -156,6 +160,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       />
       <Input
         {...args}
+        label={args.label + ' - multi-select'}
         inputType="multi-select"
         variant="mobile"
         setValue={form.setValue}
@@ -168,13 +173,31 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       />
       <Input
         {...args}
+        label={args.label + ' - text'}
         inputType="text"
         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"
+        label={args.label + ' - text - variant mobile'}
         variant="mobile"
         name="prop3"
         onChange={e => form.setValue('prop3', e.target.value)}
@@ -182,6 +205,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="text"
+        label={args.label + ' - text - tooltip as react node'}
         name="prop3"
         onChange={e => form.setValue('prop3', e.target.value)}
         tooltipText={
@@ -194,6 +218,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="text"
+        label={args.label + ' - text - tooltip as string'}
         name="prop3"
         onChange={e => form.setValue('prop3', e.target.value)}
         tooltipText="test text"
@@ -201,12 +226,14 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="textarea"
+        label={args.label + ' - textarea'}
         name="prop2"
         onChange={e => form.setValue('prop2', e.target.value)}
       />
       <Input
         {...args}
         inputType="textarea"
+        label={args.label + ' - textarea - variant mobile'}
         variant="mobile"
         name="prop2"
         onChange={e => form.setValue('prop2', e.target.value)}
@@ -215,6 +242,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         {...args}
         name="prop"
         inputType="pilled-text"
+        label={args.label + ' - Pilled Text'}
         setValue={form.setValue}
         setError={form.setError}
         clearErrors={form.clearErrors}
@@ -226,6 +254,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop"
         variant="mobile"
         inputType="pilled-text"
+        label={args.label + ' - Pilled Text - variant mobile'}
         setValue={form.setValue}
         setError={form.setError}
         clearErrors={form.clearErrors}
@@ -235,6 +264,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="select"
+        label={args.label + ' - select'}
         setValue={form.setValue}
         name="prop4"
         defaultValue={'value1'}
@@ -242,6 +272,8 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="select"
+        label={args.label + ' - select - variant mobile'}
+        variant="mobile"
         setValue={form.setValue}
         name="prop4"
         defaultValue={'value1'}
@@ -250,6 +282,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       <Input
         {...args}
         inputType="select"
+        label={args.label + ' - select - tooltip as react node'}
         setValue={form.setValue}
         name="prop4"
         defaultValue={'value1'}
@@ -263,6 +296,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
       />
       <SelectNative
         {...args}
+        label={args.label + ' - select native'}
         setValue={form.setValue}
         name="prop4"
         setError={form.setError}
@@ -280,6 +314,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         {...args}
         name="prop6"
         inputType="switch"
+        label={args.label + ' - switch'}
         setValue={form.setValue}
       />
       <Input
@@ -287,6 +322,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         name="prop6"
         variant="mobile"
         inputType="switch"
+        label={args.label + ' - switch - variant mobile'}
         setValue={form.setValue}
       />
       <Input
@@ -299,6 +335,7 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         {...args}
         name="prop6"
         inputType="checkbox"
+        label={args.label + ' - checkbox - variant mobile'}
         variant="mobile"
         setValue={form.setValue}
       />

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/StackedInput/StackedInput.tsx

@@ -35,7 +35,7 @@ const StackedInput = React.forwardRef<HTMLInputElement, StackedInputProps>(
         {label}
         <Input
           {...props}
-          placeholder={placeholder}
+          placeholder={props.placeholder ?? placeholder}
           type={type}
           isRequired={isRequired}
           ref={_ref}

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,