@jsonforms/core 3.0.0-alpha.1 → 3.0.0-beta.1

package/src/reducers/reducers.ts

@@ -27,25 +27,20 @@ import { ControlElement, UISchemaElement } from '../models';
 import {
   coreReducer,
   errorAt,
-  errorsAt,
-  JsonFormsCore,
   subErrorsAt,
-  ValidationMode
 } from './core';
 import { defaultDataReducer } from './default-data';
 import { rendererReducer } from './renderers';
 import { JsonFormsState } from '../store';
+import type { JsonFormsUISchemaRegistryEntry } from './uischemas';
 import {
   findMatchingUISchema,
-  JsonFormsUISchemaRegistryEntry,
   uischemaRegistryReducer,
-  UISchemaTester
 } from './uischemas';
 import {
+  fetchErrorTranslator,
   fetchLocale,
-  findLocalizedSchema,
-  findLocalizedUISchema,
-  i18nReducer
+  i18nReducer,
 } from './i18n';
 
 import { Generate } from '../generators';
@@ -54,19 +49,8 @@ import { JsonSchema } from '../models/jsonSchema';
 import { cellReducer } from './cells';
 import { configReducer } from './config';
 import get from 'lodash/get';
-
-export {
-  rendererReducer,
-  cellReducer,
-  coreReducer,
-  i18nReducer,
-  configReducer,
-  UISchemaTester,
-  uischemaRegistryReducer,
-  findMatchingUISchema,
-  JsonFormsUISchemaRegistryEntry
-};
-export { JsonFormsCore, ValidationMode };
+import { fetchTranslator } from '.';
+import { ErrorTranslator, Translator } from '../i18n';
 
 export const jsonFormsReducerConfig = {
   core: coreReducer,
@@ -75,7 +59,7 @@ export const jsonFormsReducerConfig = {
   config: configReducer,
   uischemas: uischemaRegistryReducer,
   defaultData: defaultDataReducer,
-  i18n: i18nReducer
+  i18n: i18nReducer,
 };
 
 /**
@@ -126,8 +110,6 @@ export const getErrorAt = (instancePath: string, schema: JsonSchema) => (
   return errorAt(instancePath, schema)(state.jsonforms.core);
 };
 
-export { errorsAt };
-
 export const getSubErrorsAt = (instancePath: string, schema: JsonSchema) => (
   state: JsonFormsState
 ) => subErrorsAt(instancePath, schema)(state.jsonforms.core);
@@ -137,11 +119,10 @@ export const getConfig = (state: JsonFormsState) => state.jsonforms.config;
 export const getLocale = (state: JsonFormsState) =>
   fetchLocale(get(state, 'jsonforms.i18n'));
 
-export const getLocalizedSchema = (locale: string) => (
+export const getTranslator = () => (
   state: JsonFormsState
-): JsonSchema => findLocalizedSchema(locale)(get(state, 'jsonforms.i18n'));
+): Translator => fetchTranslator(get(state, 'jsonforms.i18n'));
 
-export const getLocalizedUISchema = (locale: string) => (
+export const getErrorTranslator = () => (
   state: JsonFormsState
-): UISchemaElement =>
-  findLocalizedUISchema(locale)(get(state, 'jsonforms.i18n'));
+): ErrorTranslator => fetchErrorTranslator(get(state, 'jsonforms.i18n'));

package/src/reducers/selectors.ts

@@ -24,7 +24,7 @@
 */
 
 import get from 'lodash/get';
-import { Ajv} from 'ajv';
+import Ajv from 'ajv';
 import { JsonFormsState } from '../store';
 import { JsonSchema, UISchemaElement } from '../models';
 import {

package/src/store.ts

@@ -28,9 +28,9 @@ import {
   JsonFormsCore,
   JsonFormsCellRendererRegistryEntry,
   JsonFormsRendererRegistryEntry,
-  JsonFormsLocaleState,
   JsonFormsUISchemaRegistryEntry
 } from './reducers';
+import { JsonFormsI18nState } from './i18n';
 
 /**
  * JSONForms store.
@@ -65,11 +65,11 @@ export interface JsonFormsSubStates {
    */
   cells?: JsonFormsCellRendererRegistryEntry[];
   /**
-   *
+   * I18n settings.
    */
-  i18n?: JsonFormsLocaleState;
+  i18n?: JsonFormsI18nState;
   /**
-   *
+   * The UI schema registry used in detail renderers.
    */
   uischemas?: JsonFormsUISchemaRegistryEntry[];
   /**

package/src/util/cell.ts

@@ -25,13 +25,14 @@
 
 import isEmpty from 'lodash/isEmpty';
 import union from 'lodash/union';
+import type { JsonFormsCellRendererRegistryEntry } from '../reducers';
 import {
+  getAjv,
   getConfig,
   getData,
   getErrorAt,
   getSchema,
-  getAjv,
-  JsonFormsCellRendererRegistryEntry
+  getTranslator,
 } from '../reducers';
 import { AnyAction, Dispatch } from './type';
 import {
@@ -54,8 +55,9 @@ import {
 } from './renderer';
 import { JsonFormsState } from '../store';
 import { JsonSchema } from '../models';
+import { getI18nKeyPrefix } from '../i18n';
 
-export { JsonFormsCellRendererRegistryEntry };
+export type { JsonFormsCellRendererRegistryEntry };
 
 export interface OwnPropsOfCell extends OwnPropsOfControl {
   data?: any;
@@ -196,8 +198,20 @@ export const defaultMapStateToEnumCellProps = (
   const props: StatePropsOfCell = mapStateToCellProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    props.schema.enum?.map(enumToEnumOptionMapper) ||
-    (props.schema.const && [enumToEnumOptionMapper(props.schema.const)]);
+    props.schema.enum?.map(e =>
+      enumToEnumOptionMapper(
+        e,
+        getTranslator()(state),
+        getI18nKeyPrefix(props.schema, props.uischema, props.path)
+      )
+    ) ||
+    (props.schema.const && [
+      enumToEnumOptionMapper(
+        props.schema.const,
+        getTranslator()(state),
+        getI18nKeyPrefix(props.schema, props.uischema, props.path)
+      )
+    ]);
   return {
     ...props,
     options
@@ -217,7 +231,13 @@ export const mapStateToOneOfEnumCellProps = (
   const props: StatePropsOfCell = mapStateToCellProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    (props.schema.oneOf as JsonSchema[])?.map(oneOfToEnumOptionMapper);
+    (props.schema.oneOf as JsonSchema[])?.map(oneOfSubSchema =>
+      oneOfToEnumOptionMapper(
+        oneOfSubSchema,
+        getTranslator()(state),
+        getI18nKeyPrefix(props.schema, props.uischema, props.path)
+      )
+    );
   return {
     ...props,
     options

package/src/util/renderer.ts

@@ -25,8 +25,11 @@
 
 import get from 'lodash/get';
 import { ControlElement, JsonSchema, UISchemaElement } from '../models';
-import union from 'lodash/union';
 import find from 'lodash/find';
+import type {
+  JsonFormsCellRendererRegistryEntry,
+  JsonFormsRendererRegistryEntry,
+} from '../reducers';
 import {
   findUISchema,
   getAjv,
@@ -34,28 +37,26 @@ import {
   getConfig,
   getData,
   getErrorAt,
+  getErrorTranslator,
   getRenderers,
   getSchema,
   getSubErrorsAt,
+  getTranslator,
   getUiSchema,
-  JsonFormsCellRendererRegistryEntry,
-  JsonFormsRendererRegistryEntry,
   JsonFormsUISchemaRegistryEntry,
 } from '../reducers';
 import { RankedTester } from '../testers';
-import { isInherentlyEnabled, hasShowRule } from './runtime';
+import { hasShowRule, isInherentlyEnabled, isVisible } from './runtime';
 import { createLabelDescriptionFrom } from './label';
 import { CombinatorKeyword, resolveSubSchemas } from './combinators';
 import { moveDown, moveUp } from './array';
 import { AnyAction, Dispatch } from './type';
-import { formatErrorMessage, Resolve } from './util';
+import { Resolve } from './util';
 import { composePaths, composeWithUi } from './path';
-import { isVisible } from './runtime';
 import { CoreActions, update } from '../actions';
 import { ErrorObject } from 'ajv';
 import { JsonFormsState } from '../store';
-
-export { JsonFormsRendererRegistryEntry, JsonFormsCellRendererRegistryEntry };
+import { getCombinedErrorMessage, getI18nKey, getI18nKeyPrefix, Translator } from '../i18n';
 
 const isRequired = (
   schema: JsonSchema,
@@ -86,16 +87,31 @@ const isRequired = (
  * Adds an asterisk to the given label string based
  * on the required parameter.
  *
- * @param {string} label the label string
+ * @param {string | undefined} label the label string
  * @param {boolean} required whether the label belongs to a control which is required
+ * @param {boolean} hideRequiredAsterisk applied UI Schema option
  * @returns {string} the label string
  */
 export const computeLabel = (
-  label: string,
+  label: string | undefined,
   required: boolean,
   hideRequiredAsterisk: boolean
 ): string => {
-  return required && !hideRequiredAsterisk ? label + '*' : label;
+  return `${label ?? ''}${ required && !hideRequiredAsterisk ? '*' : ''}`;
+};
+
+/**
+ * Indicates whether to mark a field as required.
+ *
+ * @param {boolean} required whether the label belongs to a control which is required
+ * @param {boolean} hideRequiredAsterisk applied UI Schema option
+ * @returns {boolean} should the field be marked as required
+ */
+ export const showAsRequired = (
+  required: boolean,
+  hideRequiredAsterisk: boolean
+): boolean => {
+  return required && !hideRequiredAsterisk;
 };
 
 /**
@@ -139,7 +155,7 @@ export const createDefaultValue = (schema: JsonSchema) => {
  */
 export const isDescriptionHidden = (
   visible: boolean,
-  description: string,
+  description: string | undefined,
   isFocused: boolean,
   showUnfocusedDescription: boolean
 ): boolean => {
@@ -159,16 +175,45 @@ export interface EnumOption {
   value: any;
 }
 
-export const enumToEnumOptionMapper = (e: any): EnumOption => {
-  const stringifiedEnum = typeof e === 'string' ? e : JSON.stringify(e);
-  return { label: stringifiedEnum, value: e };
+export const enumToEnumOptionMapper = (
+  e: any,
+  t?: Translator,
+  i18nKey?: string
+): EnumOption => {
+  let label = typeof e === 'string' ? e : JSON.stringify(e);
+  if (t) {
+    if (i18nKey) {
+      label = t(`${i18nKey}.${label}`, label);
+    } else {
+      label = t(label, label);
+    }
+  }
+  return { label, value: e };
 };
 
-export const oneOfToEnumOptionMapper = (e: any): EnumOption => ({
-  value: e.const,
-  label:
-    e.title ?? (typeof e.const === 'string' ? e.const : JSON.stringify(e.const))
-});
+export const oneOfToEnumOptionMapper = (
+  e: any,
+  t?: Translator,
+  fallbackI18nKey?: string
+): EnumOption => {
+  let label =
+    e.title ??
+    (typeof e.const === 'string' ? e.const : JSON.stringify(e.const));
+  if (t) {
+    // prefer schema keys as they can be more specialized
+    if (e.i18n) {
+      label = t(e.i18n, label);
+    } else if (fallbackI18nKey) {
+      label = t(`${fallbackI18nKey}.${label}`, label);
+    } else {
+      label = t(label, label);
+    }
+  }
+  return {
+    label,
+    value: e.const,
+  };
+};
 
 export interface OwnPropsOfRenderer {
   /**
@@ -398,9 +443,8 @@ export const mapStateToControlProps = (
     controlElement.scope,
     rootSchema
   );
-  const errors = formatErrorMessage(
-    union(getErrorAt(path, resolvedSchema)(state).map(error => error.message))
-  );
+  const errors = getErrorAt(path, resolvedSchema)(state);
+  
   const description =
     resolvedSchema !== undefined ? resolvedSchema.description : '';
   const data = Resolve.data(rootData, path);
@@ -415,18 +459,26 @@ export const mapStateToControlProps = (
     rootData,
     config
   );
+
+  const schema = resolvedSchema ?? rootSchema;
+  const t = getTranslator()(state);
+  const te = getErrorTranslator()(state);
+  const i18nLabel = t(getI18nKey(schema, uischema, path, 'label'), label);
+  const i18nDescription = t(getI18nKey(schema, uischema, path, 'description'), description);
+  const i18nErrorMessage = getCombinedErrorMessage(errors, te, t, schema, uischema, path);
+
   return {
     data,
-    description,
-    errors,
-    label,
+    description: i18nDescription,
+    errors: i18nErrorMessage,
+    label: i18nLabel,
     visible,
     enabled,
     id,
     path,
     required,
-    uischema: ownProps.uischema,
-    schema: resolvedSchema || rootSchema,
+    uischema,
+    schema,
     config: getConfig(state),
     cells: ownProps.cells || state.jsonforms.cells,
     rootSchema
@@ -461,8 +513,20 @@ export const mapStateToEnumControlProps = (
   const props: StatePropsOfControl = mapStateToControlProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    props.schema.enum?.map(enumToEnumOptionMapper) ||
-    (props.schema.const && [enumToEnumOptionMapper(props.schema.const)]);
+    props.schema.enum?.map(e =>
+      enumToEnumOptionMapper(
+        e,
+        getTranslator()(state),
+        getI18nKeyPrefix(props.schema, props.uischema, props.path)
+      )
+    ) ||
+    (props.schema.const && [
+      enumToEnumOptionMapper(
+        props.schema.const,
+        getTranslator()(state),
+        getI18nKeyPrefix(props.schema, props.uischema, props.path)
+      )
+    ]);
   return {
     ...props,
     options
@@ -482,7 +546,13 @@ export const mapStateToOneOfEnumControlProps = (
   const props: StatePropsOfControl = mapStateToControlProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    (props.schema.oneOf as JsonSchema[])?.map(oneOfToEnumOptionMapper);
+    (props.schema.oneOf as JsonSchema[])?.map(oneOfSubSchema =>
+      oneOfToEnumOptionMapper(
+        oneOfSubSchema,
+        getTranslator()(state),
+        getI18nKeyPrefix(props.schema, props.uischema, props.path)
+      )
+    );
   return {
     ...props,
     options
@@ -504,8 +574,20 @@ export const mapStateToMultiEnumControlProps = (
   const options: EnumOption[] =
     ownProps.options ||
     (items?.oneOf &&
-      (items.oneOf as JsonSchema[]).map(oneOfToEnumOptionMapper)) ||
-    items?.enum?.map(enumToEnumOptionMapper);
+      (items.oneOf as JsonSchema[]).map(oneOfSubSchema =>
+        oneOfToEnumOptionMapper(
+          oneOfSubSchema,
+          state.jsonforms.i18n?.translate,
+          getI18nKeyPrefix(props.schema, props.uischema, props.path)
+        )
+      )) ||
+    items?.enum?.map(e =>
+      enumToEnumOptionMapper(
+        e,
+        state.jsonforms.i18n?.translate,
+        getI18nKeyPrefix(props.schema, props.uischema, props.path)
+      )
+    );
   return {
     ...props,
     options
@@ -840,7 +922,7 @@ export interface StatePropsOfCombinator extends OwnPropsOfControl {
   data: any;
 }
 
-const mapStateToCombinatorRendererProps = (
+export const mapStateToCombinatorRendererProps = (
   state: JsonFormsState,
   ownProps: OwnPropsOfControl,
   keyword: CombinatorKeyword
@@ -961,9 +1043,18 @@ export const mapStateToArrayLayoutProps = (
   } = mapStateToControlWithDetailProps(state, ownProps);
 
   const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
-  const childErrors = formatErrorMessage(
-    getSubErrorsAt(path, resolvedSchema)(state).map(error => error.message)
+
+  // TODO Does not consider a specialized '.custom' error message overriding all other error messages
+  // TODO Does not consider 'i18n' keys which are specified in the ui schemas of the sub errors
+  const childErrors = getCombinedErrorMessage(
+    getSubErrorsAt(path, resolvedSchema)(state),
+    getErrorTranslator()(state),
+    getTranslator()(state),
+    undefined,
+    undefined,
+    undefined
   );
+
   const allErrors =
     errors +
     (errors.length > 0 && childErrors.length > 0 ? '\n' : '') +
@@ -979,8 +1070,6 @@ export const mapStateToArrayLayoutProps = (
   };
 };
 
-export type CombinatorProps = StatePropsOfCombinator & DispatchPropsOfControl;
-
 /**
  * Props of an array control.
  */

package/src/util/runtime.ts

@@ -36,7 +36,7 @@ import {
 } from '../models';
 import { resolveData } from './resolvers';
 import { composeWithUi } from './path';
-import { Ajv } from 'ajv';
+import Ajv from 'ajv';
 import { getAjv } from '../reducers';
 import { JsonFormsState } from '../store';
 import { JsonSchema } from '../models/jsonSchema';

package/src/util/util.ts

@@ -31,7 +31,7 @@ import { JsonSchema, Scopable, UISchemaElement } from '..';
 import { resolveData, resolveSchema } from './resolvers';
 import { composePaths, toDataPathSegments } from './path';
 import { isEnabled, isVisible } from './runtime';
-import { Ajv } from 'ajv';
+import Ajv from 'ajv';
 
 /**
  * Escape the given string such that it can be used as a class name,

package/src/util/validator.ts

@@ -22,21 +22,17 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-
-import AJV from 'ajv';
+import Ajv from 'ajv';
+import addFormats from 'ajv-formats';
 import { Options } from 'ajv';
-import { Draft4 } from '../models';
 
 export const createAjv = (options?: Options) => {
-  const ajv = new AJV({
-    schemaId: 'auto',
+  const ajv = new Ajv({
     allErrors: true,
-    jsonPointers: true,
-    errorDataPath: 'property',
     verbose: true,
+    strict: false,
     ...options
   });
-  ajv.addFormat('time', '^([0-1][0-9]|2[0-3]):[0-5][0-9]$');
-  ajv.addMetaSchema(Draft4);
+  addFormats(ajv);
   return ajv;
 };