MERL-1148: number control (#1564)

* Feat: (editor-utils) NumberField component.

.changeset/dry-toys-speak.md

@@ -0,0 +1,5 @@
+---
+'@faustwp/block-editor-utils': patch
+---
+
+Feat: Handle NumberControl fields in the block-editor-utils.

packages/block-editor-utils/jest.config.js

@@ -25,6 +25,8 @@ module.exports = {
   moduleNameMapper: {
     '^(\\.{1,2}/.*)\\.js$': '$1',
     "uuid": require.resolve('uuid'),
+    "^react($|/.+)": "<rootDir>/node_modules/react$1",
+    '^react-dom($|/.+)': '<rootDir>/node_modules/react-dom$1'
   },
   collectCoverage: true,
   coverageReporters: ['json', 'html'],

packages/block-editor-utils/package.json

@@ -6,31 +6,33 @@
   "module": "dist/mjs/index.js",
   "types": "dist/mjs/index.d.ts",
   "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "@faustwp/blocks": ">=2.0.0"
   },
   "dependencies": {
-    "@wordpress/blocks": "^12.17.0",
-    "@wordpress/components": "^25.6.0",
-    "@wordpress/block-editor": "^12.8.0",
-    "@wordpress/element": "5.17.0",
-    "@wordpress/hooks": "^3.40.0",
-    "@wordpress/i18n": "^4.40.0"
+    "@wordpress/blocks": "^12.18.0",
+    "@wordpress/components": "^25.7.0",
+    "@wordpress/block-editor": "^12.9.0",
+    "@wordpress/element": "5.18.0",
+    "@wordpress/hooks": "^3.41.0",
+    "@wordpress/i18n": "^4.41.0"
   },
   "devDependencies": {
-    "jest-environment-jsdom": "29.6.2",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "jest-environment-jsdom": "29.6.4",
     "@types/node": "^18.0.6",
     "@types/react": "^18.0.0",
-    "@types/jest": "^29.5.3",
+    "@types/jest": "^29.5.4",
     "rimraf": "^4.4.0",
-    "@wordpress/jest-preset-default": "^11.9.0",
-    "@types/wordpress__blocks": "12.5.2",
-    "@types/wordpress__block-editor": "11.5.2",
+    "@wordpress/jest-preset-default": "^11.12.0",
+    "@types/wordpress__blocks": "12.5.3",
+    "@types/wordpress__block-editor": "11.5.3",
     "ts-jest": "29.1.1",
-    "jest": "29.6.2",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
+    "jest": "29.6.4",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "@react-spring/web": "9.7.3"
   },
   "scripts": {

packages/block-editor-utils/src/controls/Number.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { TextControl as NumberControl } from '@wordpress/components';
+import { ControlProps } from '../types/index.js';
+
+function NumberField<T extends Record<string, any>>({
+  config,
+  props,
+}: ControlProps<T>) {
+  const onChange = (newContent: string) => {
+    props.setAttributes({ [config.name]: Number(newContent) });
+  };
+  return (
+    <NumberControl
+      type="number"
+      label={config.label}
+      value={props.attributes[config.name]}
+      onChange={onChange}
+    />
+  );
+}
+
+export default NumberField;

packages/block-editor-utils/src/controls/index.ts

@@ -1,6 +1,8 @@
 import registerControl from '../helpers/registerControl.js';
 import Text from './Text.js';
+import NumberField from './Number.js';
 import Color from './Color.js';
 
 registerControl('text', Text);
+registerControl('number', NumberField);
 registerControl('color', Color);

packages/block-editor-utils/tests/controls/Number.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import NumberField from '../../src/controls/Number';
+import { Field } from '../../src/types';
+
+const config: Field = {
+  label: 'numberField',
+  name: 'numberField',
+  type: 'number',
+  control: 'number',
+  location: 'inspector',
+};
+const props = {
+  setAttributes: jest.fn(),
+  attributes: {
+    numberField: 634571,
+  },
+};
+
+const setup = () => {
+  const utils = render(<NumberField config={config} props={props} />);
+  const input = screen.findAllByDisplayValue(props.attributes.numberField!);
+  return {
+    input,
+    ...utils,
+  };
+};
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('NumberField', () => {
+  it('should mount', () => {
+    const { input } = setup();
+    expect(input).toBeTruthy();
+  });
+
+  it('should have correct display value from props', () => {
+    setup();
+    expect(screen.getByDisplayValue(props.attributes.numberField)).toBeTruthy();
+  });
+});