Can not render custom form field in Liferay 7.2 - liferay

Question

I was migrating a 7.1 DXP portal to 7.2 DXP but I can not bring my custom form field to work.
I used the dynamic-data-mapping-form-field-type module as a blueprint. My new field is available inside of the form builder - but when using it, nothing gets rendered. I don't have an errors on build, deploy or in JS console. Unfortunately, there is no blade example for 7.2 yet so that I could not start with a simple example.
My question is: how to hook in the field Soy template to render?

Answer 1

It is being implemented in https://issues.liferay.com/browse/LPS-98417 and it is true there is no blade example.
Meanwhile you can download following example code:
https://github.com/natocesarrego/slider

Answer 2

In case anyone is here for Liferay 7.3. Liferay 7.3 moved from soy templates to pure react components. You could use Liferay's module as a blueprint again.
import { FieldBase } from 'dynamic-data-mapping-form-fieldtype/FieldBase/ReactFieldBase.es'
import React, { useState, useEffect, useRef } from 'react';
const Text = ({ readOnly,
id,
name,
onBlur,
onChange,
onFocus,
placeholder,
value: initialValue }) => {
const [value, setValue] = useState(initialValue);
return (
<>
<input type="text" />
</>
);
};
const Main = (props) => {
return (
<FieldBase {...props}>
<Text {...props} />
</FieldBase>
);
}
export default Main;
In this case we are importing FieldBase component that is the Liferay field wrapper that will take care of adding any default Liferay behavior (validation, names, placeholder, tooltip etc...). We did the same when we used Soy templates.
You can create the module from form-field blade template. Then remove the soy template files along with the following line in package.json
"build-soy": "metalsoy --externalMsgFormat \"Liferay.Language.get(‘\\$2’)\" --soyDeps \"./node_modules/clay-*/src/**/*.soy\" \"./node_modules/com.liferay.dynamic.data.mapping.form.field.type/META-INF/resources/+(FieldBase|components)/**/*.soy\""
since we don't have any soy template to generate JS from.
What you will end up is just an es.js file.
Edit:
If you are using blade to generate the template, you can use this option to generate a react based component:
--js-framework react