Extend ExampleDescription with optional i18n configuration

* Extend the ExampleDescription to allow configuring i18n for examples * Adapt example apps to use a provided i18n config * Add i18n configuration to the `categorization` and `Person (i18n)` examples

Author: lucas-koehler

packages/angular-material/example/app/app.component.ts

@@ -24,7 +24,7 @@
 */
 import { Component } from '@angular/core';
 import { ExampleDescription, getExamples } from '@jsonforms/examples';
-import { UISchemaElement, UISchemaTester } from '@jsonforms/core';
+import { JsonFormsI18nState, UISchemaElement, UISchemaTester } from '@jsonforms/core';
 import { angularMaterialRenderers } from '../../src/index';
 import { DateAdapter } from '@angular/material/core';
 
@@ -41,6 +41,9 @@ const uiSchema = {
  }
  ]
 };
+const defaultI18n: JsonFormsI18nState = {
+ locale: 'en-US'
+};
 const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
  if (schemaPath === '#/properties/warehouseitems/items') {
  return 10;
@@ -88,9 +91,7 @@ export class AppComponent {
  readonly renderers = angularMaterialRenderers;
  readonly examples = getExamples();
  selectedExample: ExampleDescription;
- i18n = {
- locale: 'en-US'
- }
+ i18n: JsonFormsI18nState;
  private dateAdapter;
  private readonly = false;
  data: any;
@@ -101,11 +102,13 @@ export class AppComponent {
  constructor(dateAdapter: DateAdapter<Date>) {
  this.selectedExample = this.examples[19];
  this.dateAdapter = dateAdapter;
+ this.i18n = this.selectedExample.i18n ?? defaultI18n;
  dateAdapter.setLocale(this.i18n.locale);
  }
 
  onChange(ev: any) {
  this.selectedExample = this.examples.find(e => e.name === ev.target.value);
+ this.i18n = this.selectedExample.i18n ?? defaultI18n;
  }
 
  changeLocale(locale: string) {

packages/example/src/App.tsx

@@ -76,14 +76,16 @@ const getProps = (example: ExampleDescription, cells?: any, renderers?: any) =>
  const data = example.data;
  const uischemas = example.uischemas;
  const config = example.config;
+ const i18n = example.i18n;
  return {
  schema,
  uischema,
  data,
  config,
  uischemas,
  cells,
- renderers
+ renderers,
+ i18n
  }
 }
 

packages/examples/src/example.ts

@@ -27,7 +27,8 @@ import {
  JsonFormsUISchemaRegistryEntry,
  JsonFormsRendererRegistryEntry,
  JsonSchema,
- UISchemaElement
+ UISchemaElement,
+ JsonFormsI18nState
 } from '@jsonforms/core';
 
 export interface ExampleDescription {
@@ -38,7 +39,8 @@ export interface ExampleDescription {
  uischema: UISchemaElement;
  uischemas?: JsonFormsUISchemaRegistryEntry[];
  config?: any;
- actions?: {label: string, apply: (props: StateProps) => any}[];
+ actions?: { label: string, apply: (props: StateProps) => any }[];
+ i18n?: JsonFormsI18nState;
 }
 
 export interface StateProps {

packages/examples/src/examples/categorization.ts

@@ -22,6 +22,8 @@
  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  THE SOFTWARE.
 */
+import { Translator } from '@jsonforms/core';
+import get from 'lodash/get';
 import { registerExamples } from '../register';
 
 export const schema = {
@@ -93,7 +95,7 @@ export const uischema = {
  elements: [
  {
  type: 'Category',
- label: 'Basic Information',
+ label: 'categoryLabelKey',
  elements: [
  {
  type: 'HorizontalLayout',
@@ -133,7 +135,7 @@ export const uischema = {
  },
  {
  type: 'Category',
- label: 'Address',
+ i18n: 'address',
  elements: [
  {
  type: 'HorizontalLayout',
@@ -284,14 +286,24 @@ const uischema_1713 = {
  ]
  };
 
+export const translations = {
+ categoryLabelKey: 'Basic',
+ address: {
+ label: "Address",
+ },
+};
+export const translate: Translator = (key: string, defaultMessage: string) => {
+ return get(translations, key) ?? defaultMessage
+};
 
 registerExamples([
  {
  name: 'categorization',
  label: 'Categorization',
  data,
  schema,
- uischema
+ uischema,
+ i18n: { locale: 'en', translate: translate }
  },
  {
  name: '1713',

packages/examples/src/examples/i18n.ts

@@ -24,7 +24,8 @@
 */
 import { registerExamples } from '../register';
 import { personCoreSchema } from './person';
-import { JsonFormsCore, updateErrors, AnyAction, Dispatch } from '@jsonforms/core';
+import { JsonFormsCore, updateErrors, AnyAction, Dispatch, Translator } from '@jsonforms/core';
+import get from 'lodash/get';
 const localize = require('ajv-i18n');
 
 export const onChange = (dispatch: Dispatch<AnyAction>) => (
@@ -42,7 +43,8 @@ export const uischema = {
  type: 'VerticalLayout',
  elements: [
  {
- type: 'HorizontalLayout',
+ type: 'Group',
+ i18n: 'basicInfoGroup',
  elements: [
  {
  type: 'Control',
@@ -56,7 +58,7 @@ export const uischema = {
  },
  {
  type: 'Label',
- text: 'Additional Information'
+ text: 'additionalInformationLabel',
  },
  {
  type: 'HorizontalLayout',
@@ -83,12 +85,26 @@ export const data = {
  postalCode: '12345'
 };
 
+export const translations = {
+ basicInfoGroup: {
+ label: 'Basic Information'
+ },
+ additionalInformationLabel: 'Additional Information'
+};
+export const translate: Translator = (key: string, defaultMessage: string) => {
+ return get(translations, key) ?? defaultMessage;
+};
+
 registerExamples([
  {
  name: 'i18n',
  label: 'Person (i18n)',
  data,
  schema: personCoreSchema,
- uischema
+ uischema,
+ i18n: {
+ translate: translate,
+ locale: 'en'
+ }
  }
 ]);