Feat: (block-editor-utils) Add RangeField (#1575)

* Feat: (block-editor-utils) Add RangeField

* Chore: Changeset

* Deps: (block-editor-utils) Update package.json

.changeset/small-planets-share.md

@@ -0,0 +1,5 @@
+---
+'@faustwp/block-editor-utils': patch
+---
+
+Feat: Add `RangeControl` field in `block-editor-utils`.

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

@@ -13,7 +13,10 @@ module.exports = {
     ],
   },
   // Run code before each file in the suite is tested.
-  setupFilesAfterEnv: ['./jest.setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  setupFiles: [
+		'<rootDir>/tests/global-mocks.ts',
+	],
 
   testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
 

packages/block-editor-utils/package.json

@@ -7,8 +7,7 @@
   "types": "dist/mjs/index.d.ts",
   "peerDependencies": {
     "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "@faustwp/blocks": ">=2.0.0"
+    "react-dom": "^18.0.0"
   },
   "dependencies": {
     "@wordpress/blocks": "^12.18.0",

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { RangeControl } from '@wordpress/components';
+import { ControlProps, RangeField } from '../types/index.js';
+
+function Range<T extends Record<string, any>>({
+  config,
+  props,
+}: ControlProps<T>) {
+  const onChange = (newContent: number | undefined) => {
+    props.setAttributes({ [config.name]: newContent });
+  };
+  const params: RangeField = {
+    ...config,
+    control: 'range',
+  }; // TODO use satisfies operator when using TS v5
+  return (
+    <RangeControl
+      label={params.label}
+      onChange={onChange}
+      value={props.attributes[config.name]}
+      min={params?.min}
+      max={params?.max}
+    />
+  );
+}
+
+export default Range;

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

@@ -4,9 +4,11 @@ import NumberField from './Number.js';
 import Color from './Color.js';
 import Select from './Select.js';
 import Radio from './Radio.js';
+import Range from './Range.js';
 
 registerControl('text', Text);
 registerControl('number', NumberField);
 registerControl('color', Color);
 registerControl('select', Select);
 registerControl('radio', Radio);
+registerControl('range', Range);

packages/block-editor-utils/src/helpers/getControlFields.ts

@@ -33,6 +33,7 @@ function getControlFields(
     // Set default field by merging both blockAttributes meta and editorFields hints.
     if (fieldConfig) {
       fields.push({
+        ...fieldConfig,
         name: key,
         label: fieldConfig.label ?? key,
         type: fieldType,

packages/block-editor-utils/src/types/index.d.ts

@@ -17,33 +17,32 @@ export interface FieldOption {
   value: string;
 }
 
-export type Field = {
+export type Field = BasicField | SelectableField | RangeField
+
+type BasicField = {
   name: string;
-  type: FieldType;
+  type: FieldType
   control: FieldControl;
   location: FieldLocation;
   label?: string;
   default?: unknown;
   options?: FieldOption[];
 };
 
-export type FieldType =
-  | 'string'
-  | 'number'
-  | 'boolean'
-  | 'integer'
-  | 'object'
-  | 'array';
-export type FieldControl =
-  | 'textarea'
-  | 'color'
-  | 'text'
-  | 'radio'
-  | 'select'
-  | 'range'
-  | 'number'
-  | 'checkbox';
-export type FieldLocation = 'editor' | 'inspector';
+export type SelectableField = BasicField & {
+  control: 'select' | 'radio';
+  options?: FieldOption[];
+}
+
+export type RangeField = BasicField & {
+  control: 'range';
+  min?: number;
+  max?: number;
+}
+
+export type FieldType = "string" | "number" | "boolean" | "integer" | "object" | "array"
+export type FieldControl = "textarea" | "color" | "text" | "radio" | "select" | "range" | "number" | "checkbox"
+export type FieldLocation = "editor" | "inspector"
 
 export interface ControlProps<T extends Record<string, any>> {
   config: Field;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import Range from '../../src/controls/Range';
+import { Field } from '../../src/types';
+
+const config: Field = {
+  label: 'rangeField',
+  name: 'rangeField',
+  type: 'number',
+  control: 'range',
+  location: 'inspector',
+  min: 0,
+  max: 50,
+};
+const props = {
+  setAttributes: jest.fn(),
+  attributes: {
+    rangeField: 20,
+  },
+};
+
+const setup = () => {
+  const utils = render(<Range config={config} props={props} />);
+  const input = screen.findAllByDisplayValue(props.attributes.rangeField!);
+  return {
+    input,
+    ...utils,
+  };
+};
+
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
+describe('RangeField', () => {
+  it('should mount', () => {
+    const { input } = setup();
+    expect(input).toBeTruthy();
+  });
+
+  it('should have correct display value from props', () => {
+    setup();
+    expect(
+      screen.getByRole('spinbutton', {
+        name: /rangefield/i,
+      })
+    ).toHaveValue(props.attributes.rangeField);
+  });
+});

packages/block-editor-utils/tests/global-mocks.ts

@@ -0,0 +1,13 @@
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});

packages/block-editor-utils/tsconfig.json

@@ -1,14 +1,14 @@
 {
-	"extends": "../../tsconfig.json",
-	"compilerOptions": {
-	  "module": "esnext",
-	  "outDir": "dist/mjs",
-	  "target": "es2017",
-	  "rootDir": "src",
-	  "jsx": "react",
-	  "types": ["node", "jest"],
-	  "typeRoots": ["./node_modules/@types", "./src/types"]
-	},
-	"exclude": ["node_modules", "dist"],
-	"include": ["src"]
-  }
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "outDir": "dist/mjs",
+    "target": "es2017",
+    "rootDir": "src",
+    "jsx": "react",
+    "types": ["node", "jest"],
+    "typeRoots": ["./node_modules/@types", "./src/types"]
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": ["src", "./jest-setup.ts"]
+}