@jobber/components-native 0.30.0 → 0.32.0

package/ios/Picker/ATLPickerOption.swift

@@ -0,0 +1,44 @@
+//
+//  PickerOption.swift
+//  @jobber/components-native
+//
+//  Created by Darryl Tec on 2022-07-21.
+//  Copyright © 2022 Octopusapp Inc. All rights reserved.
+//
+
+import Foundation
+import UIKit;
+
+@available(iOS 13.0, *)
+class ATLPickerOption {
+    var identifier: UIAction.Identifier?;
+    var title: String;
+    var isActive: Bool;
+    var state: UIAction.State = .off
+
+    init(details: NSDictionary){
+        if let identifier = details["value"] as? NSString {
+            self.identifier = UIAction.Identifier(rawValue: identifier as String);
+        }
+
+        if let title = details["label"] as? NSString {
+            self.title = title as String;
+        } else {
+            self.title = "";
+        }
+
+        if let isActive = details["isActive"] as? Bool {
+            self.isActive = isActive as Bool;
+            if isActive == true {
+                self.state = .on
+            }
+        } else {
+            self.isActive = false;
+            self.state = .off
+        }
+    }
+
+    func createUIAction(_ handler: @escaping UIActionHandler) -> UIAction {
+        return UIAction(title: title, identifier: identifier, state: state, handler: handler)
+    }
+}

package/ios/Picker/ATLPickerView.swift

@@ -0,0 +1,61 @@
+//
+//  PickerView.swift
+//  @jobber/components-native
+//
+//  Created by Darryl Tec on 2022-07-21.
+//  Copyright © 2022 Octopusapp Inc. All rights reserved.
+//
+
+import Foundation
+
+import UIKit
+@available(iOS 14.0, *)
+@objc(ATLPickerView)
+class ATLPickerView: UIButton {
+    override init(frame: CGRect) {
+      super.init(frame: frame)
+    }
+    private var _hasSelectedValue: Bool = false;
+    private var _options: [UIAction] = [];
+
+    @objc var onOptionPress: RCTDirectEventBlock?
+    @objc func sendButtonAction(_ action: UIAction) {
+        if let onPress = onOptionPress {
+            onPress(["event": action.identifier.rawValue])
+        }
+    }
+
+    @objc var options: [NSDictionary]? {
+        didSet {
+            guard let options = self.options else {
+                return
+            }
+            _options.removeAll()
+            options.forEach { menuAction in
+                let opt = ATLPickerOption(details: menuAction)
+                _hasSelectedValue = opt.isActive
+                _options.append(opt.createUIAction({action in self.sendButtonAction(action)}))
+            }
+            self.setup()
+        }
+    }
+
+    func setup () {
+        let menu = UIMenu(title: "", identifier: nil, options: .displayInline, children: _options)
+
+        self.menu = menu
+        self.showsMenuAsPrimaryAction = true
+        if #available(iOS 15.0, *) {
+            self.setTitleColor(UIColor.clear, for: .normal)
+            self.changesSelectionAsPrimaryAction = true
+        }
+    }
+
+    override func reactSetFrame(_ frame: CGRect) {
+        super.reactSetFrame(frame);
+    };
+
+    required init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+}

package/ios/Picker/RCTATLPickerManager.m

@@ -0,0 +1,26 @@
+//
+//  RCTPickerManager.m
+//  Jobber
+//
+//  Created by Darryl Tec on 2022-07-21.
+//  Copyright © 2022 Octopusapp Inc. All rights reserved.
+//
+
+#import <Foundation/Foundation.h>
+
+#import <React/RCTBridgeModule.h>
+#import <React/RCTViewManager.h>
+
+@interface RCT_EXTERN_MODULE(RCTATLPicker, RCTViewManager)
+
+/**
+ * Options the user can choose
+ */
+RCT_EXPORT_VIEW_PROPERTY(options, NSArray)
+
+/**
+ * Callback when one of the option is pressed
+ */
+RCT_EXPORT_VIEW_PROPERTY(onOptionPress, RCTDirectEventBlock)
+
+@end

package/ios/Picker/RCTATLPickerManager.swift

@@ -0,0 +1,25 @@
+//
+//  RCTPickerManager.swift
+//  @jobber/components-native
+//
+//  Created by Darryl Tec on 2022-07-21.
+//  Copyright © 2022 Octopusapp Inc. All rights reserved.
+//
+
+import Foundation
+
+@objc(RCTATLPicker)
+class RCTATLPickerManager: RCTViewManager {
+
+    override static func requiresMainQueueSetup() -> Bool {
+        return true
+    }
+
+    override func view() -> UIView! {
+        if #available(iOS 14.0, *) {
+            return ATLPickerView();
+        } else {
+            return ATLFallBackPickerView()
+        }
+    }
+}

package/jobber-components-native.podspec

@@ -0,0 +1,35 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
+
+Pod::Spec.new do |s|
+  s.name         = "jobber-components-native"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => "11.0" }
+  s.source       = { :git => "https://github.com/MichaelParadis/jobber-components-native.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift}"
+
+  s.dependency "React-Core"
+
+  # Don't install the dependencies when we run `pod install` in the old architecture.
+  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
+    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
+    s.pod_target_xcconfig    = {
+        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
+        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
+        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
+    }
+    s.dependency "React-Codegen"
+    s.dependency "RCT-Folly"
+    s.dependency "RCTRequired"
+    s.dependency "RCTTypeSafety"
+    s.dependency "ReactCommon/turbomodule/core"
+  end
+end

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@jobber/components-native",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "license": "MIT",
+  "description": "React Native implementation of Atlantis",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/GetJobber/atlantis.git"
+  },
+  "author": "The Frends",
+  "bugs": {
+    "url": "https://github.com/GetJobber/atlantis/issues"
+  },
+  "homepage": "https://github.com/GetJobber/atlantis#readme",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/src/index.d.ts",
@@ -10,7 +20,11 @@
     "src",
     "!**/__tests__",
     "!**/__fixtures__",
-    "!**/__mocks__"
+    "!**/__mocks__",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "!ios/build"
   ],
   "scripts": {
     "clean": "rm -rf dist/* tsconfig.tsbuildinfo",
@@ -22,6 +36,8 @@
   },
   "dependencies": {
     "@jobber/design": "^0.41.3",
+    "@react-native-picker/picker": "^2.4.10",
+    "lodash": "^4.17.21",
     "lodash.chunk": "^4.2.0",
     "lodash.debounce": "^4.0.8",
     "lodash.identity": "^3.0.0",
@@ -57,5 +73,5 @@
     "react": "^18",
     "react-native": ">=0.69.2"
   },
-  "gitHead": "362d0d3914aa440bcbb40f9eed388d447cd205e0"
+  "gitHead": "01fed020a3fe4466db91b66e0e7204b2f9f39e1d"
 }

package/src/InputNumber/InputNumber.test.tsx

@@ -0,0 +1,323 @@
+import React from "react";
+import { fireEvent, render, waitFor } from "@testing-library/react-native";
+import { useIntl } from "react-intl";
+import { InputNumber } from ".";
+import { messages } from "./messages";
+
+type OS = "ios" | "android";
+let Platform: { OS: OS };
+beforeEach(() => {
+  Platform = require("react-native").Platform;
+});
+
+const platforms: OS[] = ["ios", "android"];
+it.each(platforms)("renders an InputNumber on %s", platform => {
+  Platform.OS = platform;
+  const label = "My Accessible label";
+  const { getByLabelText } = render(<InputNumber accessibilityLabel={label} />);
+  expect(getByLabelText(label)).toBeTruthy();
+});
+
+it.each(platforms)(
+  "renders an InputNumber with defaultValue on %s",
+  platform => {
+    Platform.OS = platform;
+    const value = 200;
+    const { getByDisplayValue } = render(<InputNumber value={value} />);
+    expect(getByDisplayValue(value.toString())).toBeTruthy();
+  },
+);
+
+it("Displays a validation message when the value is not a number", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { getByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+  const inputValue = "this";
+  fireEvent.changeText(getByLabelText(a11yLabel), inputValue);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(
+    getByText(formatMessage(messages.notANumberError), {
+      includeHiddenElements: true,
+    }),
+  ).toBeDefined();
+  expect(onChange).toHaveBeenCalledWith(inputValue);
+});
+
+it("When onChange is called it returns a number", async () => {
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+
+  fireEvent.changeText(getByLabelText(a11yLabel), "100");
+  expect(onChange).toHaveBeenCalledWith(100);
+});
+
+it("doesn't change the value when the input is controlled without an onChange", async () => {
+  const a11yLabel = "InputNumberTest";
+  const initialValue = 12;
+  const changeValue = 100;
+  const { queryByText, getByLabelText, getByDisplayValue } = render(
+    <InputNumber accessibilityLabel={a11yLabel} value={initialValue} />,
+  );
+
+  fireEvent.changeText(getByLabelText(a11yLabel), changeValue.toString());
+  expect(queryByText(changeValue.toString())).toBeNull();
+  expect(getByDisplayValue(initialValue.toString())).toBeDefined();
+});
+
+it("passes validation when decimal value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+  const numInput = "13.5";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
+});
+
+it("passes validation when negative value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+
+  const numInput = "-15";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseInt(numInput, 10));
+});
+
+it("passes validation when negative decimal value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+  const numInput = "-15.123";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
+});
+
+it("passes validation when explicit positive value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+
+  const numInput = "+15";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseInt(numInput, 10));
+});
+
+it("passes validation when e notation value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+
+  const numInput = "6e10";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
+});
+
+it("passes validation when e notation decimal value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+
+  const numInput = "6.456e10";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
+});
+
+it("passes validation when e notation for representing decimal value is entered", async () => {
+  const { formatMessage } = useIntl();
+  const a11yLabel = "InputNumberTest";
+  const onChange = jest.fn();
+  const { queryByText, getByLabelText } = render(
+    <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+  );
+
+  const numInput = "6e-10";
+  fireEvent.changeText(getByLabelText(a11yLabel), numInput);
+
+  await waitFor(() => {
+    fireEvent(getByLabelText(a11yLabel), "blur");
+  });
+  expect(queryByText(formatMessage(messages.notANumberError))).toBeNull();
+  expect(onChange).toHaveBeenCalledWith(parseFloat(numInput));
+});
+
+describe("when the value ends with period", () => {
+  const values = [".", "0.", "12.", "+1.", "-0."];
+
+  it.each(values)("doesn't convert the value %s", value => {
+    const a11yLabel = "InputNumberTest";
+    const onChange = jest.fn();
+    const { getByLabelText, getByDisplayValue } = render(
+      <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+    );
+
+    fireEvent.changeText(getByLabelText(a11yLabel), value);
+    expect(getByDisplayValue(value)).toBeDefined();
+  });
+});
+
+describe("when the value ends with scientific notation", () => {
+  const values = ["1e", "+2e", "1.2e", "-3e"];
+
+  it.each(values)("doesn't convert the value %s", value => {
+    const a11yLabel = "InputNumberTest";
+    const onChange = jest.fn();
+    const { getByLabelText, getByDisplayValue } = render(
+      <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+    );
+
+    fireEvent.changeText(getByLabelText(a11yLabel), value);
+    expect(getByDisplayValue(value)).toBeDefined();
+  });
+});
+
+describe("when the value ends with + or -", () => {
+  const values = ["+", "-"];
+
+  it.each(values)("doesn't convert the value %s", value => {
+    const a11yLabel = "InputNumberTest";
+    const onChange = jest.fn();
+    const { getByLabelText, getByDisplayValue } = render(
+      <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+    );
+
+    fireEvent.changeText(getByLabelText(a11yLabel), value);
+    expect(getByDisplayValue(value)).toBeDefined();
+  });
+});
+
+describe("when the value ends with zero decimal", () => {
+  const values = ["0.0", "+0.00000", "-3.00000", "2.100", ".0", ".00000"];
+
+  it.each(values)("doesn't convert the value %s", value => {
+    const a11yLabel = "InputNumberTest";
+    const onChange = jest.fn();
+    const { getByLabelText, getByDisplayValue } = render(
+      <InputNumber accessibilityLabel={a11yLabel} onChange={onChange} />,
+    );
+
+    fireEvent.changeText(getByLabelText(a11yLabel), value);
+    expect(getByDisplayValue(value)).toBeDefined();
+  });
+});
+
+describe("when the OS is iOS", () => {
+  const a11yLabel = "InputNumberTest";
+  beforeEach(() => {
+    Platform.OS = "ios";
+  });
+  it("uses the decimal-pad keyboard when keyboard is 'decimal-pad'", () => {
+    const { getByLabelText } = render(
+      <InputNumber accessibilityLabel={a11yLabel} keyboard={"decimal-pad"} />,
+    );
+    expect(getByLabelText(a11yLabel).props.keyboardType).toEqual("decimal-pad");
+  });
+
+  it("uses the default numbers-and-punctuation keyboard when missing keyboard prop", () => {
+    const { getByLabelText } = render(
+      <InputNumber accessibilityLabel={a11yLabel} />,
+    );
+    expect(getByLabelText(a11yLabel).props.keyboardType).toEqual(
+      "numbers-and-punctuation",
+    );
+  });
+
+  it("uses the numbers-and-punctuation keyboard when keyboard is 'numbers-and-punctuation'", () => {
+    const { getByLabelText } = render(
+      <InputNumber
+        accessibilityLabel={a11yLabel}
+        keyboard={"numbers-and-punctuation"}
+      />,
+    );
+    expect(getByLabelText(a11yLabel).props.keyboardType).toEqual(
+      "numbers-and-punctuation",
+    );
+  });
+});
+
+describe("when the OS is android", () => {
+  const a11yLabel = "InputNumberTest";
+  beforeEach(() => {
+    Platform.OS = "android";
+  });
+
+  it("uses the numeric keyboard when missing keyboard prop", () => {
+    const { getByLabelText } = render(
+      <InputNumber accessibilityLabel={a11yLabel} />,
+    );
+    expect(getByLabelText(a11yLabel).props.keyboardType).toEqual("numeric");
+  });
+
+  it("uses the numeric keyboard when keyboard is 'decimal-pad'", () => {
+    const { getByLabelText } = render(
+      <InputNumber accessibilityLabel={a11yLabel} keyboard={"decimal-pad"} />,
+    );
+    expect(getByLabelText(a11yLabel).props.keyboardType).toEqual("numeric");
+  });
+
+  it("uses the numeric keyboard when keyboard is 'numbers-and-punctuation'", () => {
+    const { getByLabelText } = render(
+      <InputNumber
+        accessibilityLabel={a11yLabel}
+        keyboard={"numbers-and-punctuation"}
+      />,
+    );
+    expect(getByLabelText(a11yLabel).props.keyboardType).toEqual("numeric");
+  });
+});

package/src/InputNumber/InputNumber.tsx

@@ -0,0 +1,126 @@
+import React, { Ref, forwardRef, useState } from "react";
+import { Platform } from "react-native";
+import { useIntl } from "react-intl";
+import flow from "lodash/flow";
+import identity from "lodash/identity";
+import { messages } from "./messages";
+import { InputText, InputTextProps, InputTextRef } from "../InputText";
+
+type NumberKeyboard = "decimal-pad" | "numbers-and-punctuation";
+export interface InputNumberProps
+  extends Omit<
+    InputTextProps,
+    "keyboard" | "onChangeText" | "value" | "defaultValue"
+  > {
+  readonly value?: number;
+  readonly defaultValue?: number;
+  readonly onChange: (newValue?: number | string | undefined) => void;
+  readonly keyboard?: NumberKeyboard;
+  /**
+   * Used to locate this view in end-to-end tests
+   */
+  readonly testID?: string;
+}
+
+const NUMBER_VALIDATION_REGEX =
+  /^[-+]?(([0-9]*\.[0-9]+)|([0-9]+)|([0-9]+(\.?[0-9]+)?e[-+]?[0-9]+))$/;
+
+export const InputNumber = forwardRef(InputNumberInternal);
+
+function InputNumberInternal(props: InputNumberProps, ref: Ref<InputTextRef>) {
+  const getKeyboard = () => {
+    if (Platform.OS === "ios") {
+      //since we are checking for which keyboard to use here here, just implement default keyboard here instead of in params
+      return props.keyboard ?? "numbers-and-punctuation";
+    } else {
+      return "numeric";
+    }
+  };
+  const { formatMessage } = useIntl();
+  const handleChange = (newValue: number | string | undefined) => {
+    props.onChange?.(newValue);
+  };
+
+  const { inputTransform: convertToString, outputTransform: convertToNumber } =
+    useNumberTransform(props.value);
+  return (
+    <InputText
+      {...props}
+      keyboard={getKeyboard()}
+      transform={{
+        input: flow(convertToString, props.transform?.input || identity),
+        output: flow(convertToNumber, props.transform?.output || identity),
+      }}
+      ref={ref}
+      value={props.value?.toString()}
+      defaultValue={props.defaultValue?.toString()}
+      onChangeText={handleChange}
+      validations={{
+        pattern: {
+          value: NUMBER_VALIDATION_REGEX,
+          message: formatMessage(messages.notANumberError),
+        },
+        ...props.validations,
+      }}
+    />
+  );
+}
+
+function hasPeriodAtEnd(value: string) {
+  // matches patterns like ".", "0.", "12.", "+1.", and "-0."
+  return !!value?.match(/^[-+]?[0-9]*\.$/);
+}
+function hasScientificNotationAtEnd(value: string) {
+  // matches patterns like "1e", "+2e", "1.2e" and "-3e"
+  return !!value?.match(/^[-+]?[0-9]+(\.?[0-9]+)?e$/);
+}
+function hasPlusMinusAtEnd(value: string) {
+  // matches "+" and "-"
+  return !!value?.match(/^[-+]+$/);
+}
+
+function hasZeroDecimalAtEnd(value: string) {
+  // matches patterns like "0.0", "+0.00000", "-3.00000", "2.100", ".0", and ".00000"
+  return !!value?.match(/^[-+]?[0-9]*\.[0-9]*0+$/);
+}
+
+export function shouldShowUserValue(value: string): boolean {
+  const specialCasesFn = [
+    hasPeriodAtEnd,
+    hasScientificNotationAtEnd,
+    hasPlusMinusAtEnd,
+    hasZeroDecimalAtEnd,
+  ];
+  const isSpecial = (v: string) =>
+    specialCasesFn.reduce((acc, fn) => acc || fn(v), false);
+  return isSpecial(value);
+}
+
+export function useNumberTransform(controlledValue: number | undefined): {
+  inputTransform: (internalValue?: number) => string | undefined;
+  outputTransform: (value: string) => string | number;
+} {
+  const [typedValue, setTypedValue] = useState<string>(
+    controlledValue?.toString() || "",
+  );
+
+  const convertToNumber = (newValue: string) => {
+    setTypedValue(newValue);
+    if (newValue?.match?.(NUMBER_VALIDATION_REGEX)) {
+      return parseFloat(newValue);
+    }
+    return newValue;
+  };
+
+  const convertToString = (internalValue: number | undefined) => {
+    if (shouldShowUserValue(typedValue)) {
+      return typedValue;
+    }
+    return internalValue?.toString() || undefined;
+  };
+
+  return {
+    inputTransform: convertToString,
+    outputTransform: convertToNumber,
+  };
+}

package/src/InputNumber/index.ts

@@ -0,0 +1,2 @@
+export { InputNumber } from "./InputNumber";
+export type { InputNumberProps } from "./InputNumber";