add i18n

package.json

@@ -5,16 +5,18 @@
   "dependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.0.0-alpha.3",
-    "@jsonforms/material-renderers": "3.0.0-alpha.3",
-    "@jsonforms/react": "3.0.0-alpha.3",
+    "@jsonforms/core": "3.0.0-beta.1",
+    "@jsonforms/material-renderers": "3.0.0-beta.1",
+    "@jsonforms/react": "3.0.0-beta.1",
     "@mui/icons-material": "^5.2.0",
     "@mui/lab": "^5.0.0-alpha.58",
     "@mui/material": "^5.2.2",
     "@mui/styles": "^5.2.3",
     "@types/node": "^14.14.14",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "dayjs": "^1.11.1",
+    "i18next": "^21.6.16",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "typescript": "^4.1.3"

src/App.tsx

@@ -14,6 +14,12 @@ import {
 import RatingControl from './RatingControl';
 import ratingControlTester from './ratingControlTester';
 import { makeStyles } from '@mui/styles';
+import i18next from 'i18next';
+import dayjs from 'dayjs';
+import 'dayjs/locale/de';
+import 'dayjs/locale/en';
+import translationEN from './localisation/en.json';
+import translationDE from './localisation/de.json';
 
 const useStyles = makeStyles({
   container: {
@@ -31,7 +37,7 @@ const useStyles = makeStyles({
     backgroundColor: '#cecece',
     marginBottom: '1rem',
   },
-  resetButton: {
+  button: {
     margin: 'auto !important',
     display: 'block !important',
   },
@@ -55,15 +61,45 @@ const renderers = [
   { tester: ratingControlTester, renderer: RatingControl },
 ];
 
+i18next.init({
+  resources: {
+    en: {
+      translation: translationEN
+    },
+    de: {
+      translation: translationDE
+    }
+  }
+});
+
+
 const App = () => {
   const classes = useStyles();
   const [data, setData] = useState<any>(initialData);
+  const [locale, setLocale] = useState<'de' | 'en'>('en');
   const stringifiedData = useMemo(() => JSON.stringify(data, null, 2), [data]);
 
+  const createTranslator = (locale: string) => (key: any, defaultMessage: any) => {
+    return i18next.exists(key) ? i18next.t(key) : defaultMessage;
+  };
+
+  const translation = useMemo(() => createTranslator(locale), [locale]);
+
+  i18next.changeLanguage(locale);
+  dayjs.locale(locale);
+
   const clearData = () => {
     setData({});
   };
 
+  const switchLocale = () => {
+    if (locale === 'en') {
+      setLocale('de');
+    } else {
+      setLocale('en');
+    }
+  };
+
   return (
     <Fragment>
       <div className='App'>
@@ -87,14 +123,26 @@ const App = () => {
           <div className={classes.dataContent}>
             <pre id='boundData'>{stringifiedData}</pre>
           </div>
-          <Button
-            className={classes.resetButton}
-            onClick={clearData}
-            color='primary'
-            variant='contained'
+          <Grid
+            container
+            direction="row"
+            justifyContent="space-between"
+            alignItems="center"
           >
-            Clear data
-          </Button>
+            <Button
+              onClick={clearData}
+              color='primary'
+              variant='contained'
+            >
+              Clear data
+            </Button>
+            <Button onClick={switchLocale} color='primary' variant='contained'>
+              Switch language
+            </Button>
+            <Typography variant={'body1'} align={'center'}>
+              current language: {locale}
+            </Typography>
+          </Grid>
         </Grid>
         <Grid item sm={6}>
           <Typography variant={'h4'} className={classes.title}>
@@ -108,6 +156,7 @@ const App = () => {
               renderers={renderers}
               cells={materialCells}
               onChange={({ errors, data }) => setData(data)}
+              i18n={{ locale: locale, translate: translation }}
             />
           </div>
         </Grid>

src/Rating.tsx

@@ -6,14 +6,15 @@ interface RatingProps {
   id?: string;
   value: number;
   updateValue: (newValue: number) => void;
+  label: string;
 }
 
-export const Rating: React.FC<RatingProps> = ({ id, value, updateValue }) => {
+export const Rating: React.FC<RatingProps> = ({ id, value, updateValue, label }) => {
   const [hoverAt, setHoverAt] = useState<number | null>(null);
 
   return (
     <div id='#/properties/rating' className='rating'>
-      <InputLabel shrink style={{ marginTop: '0.8em' }}>Rating</InputLabel>
+      <InputLabel shrink style={{ marginTop: '0.8em' }}>{label}</InputLabel>
       <div style={{ cursor: 'pointer', fontSize: '18px' }}>
         {[0, 1, 2, 3, 4].map((i) => {
           const fullStars = hoverAt ?? value;

src/RatingControl.tsx

@@ -5,12 +5,14 @@ interface RatingControlProps {
   data: any;
   handleChange(path: string, value: any): void;
   path: string;
+  label: string;
 }
 
-const RatingControl = ({ data, handleChange, path }: RatingControlProps) => (
+const RatingControl = ({ data, handleChange, path, label }: RatingControlProps) => (
   <Rating
     value={data}
     updateValue={(newValue: number) => handleChange(path, newValue)}
+    label={label}
   />
 );
 

src/localisation/de.json

@@ -0,0 +1,15 @@
+{
+  "name.label": "Name",
+  "description.label": "Beschreibung",
+  "done.label": "Abgeschlossen",
+  "due_date.label": "Fälligkeitsdatum",
+  "due_date.error.custom": "Bitte wählen sie ein gültiges Datum",
+  "rating.label": "Bewertung",
+  "rating.description": "Bewertung",
+  "recurrence.label": "Wiederholung",
+  "recurrence_interval.label": "Interval",
+  "recurrence.Monthly": "Monatlich",
+  "recurrence.Never": "Einmalig",
+  "recurrence.Weekly": "Wöchentlich",
+  "recurrence.Daily": "Täglich"
+}

src/localisation/en.json

@@ -0,0 +1,3 @@
+{
+  "name.label": "Name"
+}