WIP feature/ Dashboard_breadcrumbs & fix_localize

client/src/components/Breadcrumbs.js

@@ -12,15 +12,6 @@ const PureBreadcrumbs = ({ breadcrumbs }) => (
       </span>
     ))}
   </div>
-
-  // <div>
-  //   {breadcrumbs.map(({ breadcrumb, match }, index) => (
-  //     <div key={match.url}>
-  //       <Link to={match.url || ""}>{breadcrumb}</Link>
-  //       {index < breadcrumbs.length - 1 && ">"}
-  //     </div>
-  //   ))}
-  // </div>
 );
   
 export default withBreadcrumbs(routes)(PureBreadcrumbs);

client/src/components/Dashboard/DashboardBreadcrumbs.js

@@ -3,38 +3,47 @@ import {
   CollapsibleList,
   MenuItem,
   Classes,
-  Boundary
+  Boundary,
 } from '@blueprintjs/core';
 import classNames from 'classnames';
+import withBreadcrumbs from 'react-router-breadcrumbs-hoc';
+import routes from 'routes/dashboard';
+
+function DashboardBreadcrumbs({breadcrumbs}){
+
+  const renderBreadcrumb =(props)=>{
+
+    if(props.href != null){
 
-export default function DashboardBreadcrumbs() {
-  function renderBreadcrumb(props) {
-    if (props.href != null) {
     return <a className={Classes.BREADCRUMB}>{props.text}</a>;
-    } else {
+    }else{
-      return (
+
+      return(
         <span
-          className={classNames(Classes.BREADCRUMB, Classes.BREADCRUMB_CURRENT)}
+        className={classNames(Classes.BREADCRUMB, Classes.BREADCRUMB_CURRENT)}>
-        >
+
           {props.text}
         </span>
-      );
+      )
     }
   }
-  return (
+  return(
-    <CollapsibleList
+<CollapsibleList
    className={Classes.BREADCRUMBS}
    dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
    visibleItemRenderer={renderBreadcrumb}
    collapseFrom={Boundary.START}
-      visibleItemCount={0}
+   visibleItemCount={0}>
-    >
+
-      <MenuItem icon='folder-close' text='All files' href='#' />
+     {
-      <MenuItem icon='folder-close' text='Users' href='#' />
+       breadcrumbs.map(({breadcrumb,match},index)=>{
-      <MenuItem icon='folder-close' text='Jane Person' href='#' />
+
-      <MenuItem icon='folder-close' text='My documents' href='#' />
+        return <MenuItem key={match.url} icon={'folder-close'} text={breadcrumb} href={match.url} />
-      <MenuItem icon='folder-close' text='Classy dayjob' href='#' />
+       })
-      <MenuItem icon='document' text='How to crush it' />
+     }
-    </CollapsibleList>
+</CollapsibleList>
-  );
+
+  )
 }
+
+export default withBreadcrumbs(routes)(DashboardBreadcrumbs)

client/src/components/Expenses/ExpenseForm.js

@@ -32,14 +32,14 @@ export default function ExpenseForm({
     selectedPaymentAccount: null
   });
   const validationSchema = Yup.object().shape({
-    date: Yup.date().required(),
+    date: Yup.date().required().label(formatMessage({id:'date'})),
-    description: Yup.string().trim(),
+    description: Yup.string().trim().label(formatMessage({id:'description'})),
-    expense_account_id: Yup.number().required(),
+    expense_account_id: Yup.number().required().label(formatMessage({id:'expense_account_id'})),
-    payment_account_id: Yup.number().required(),
+    payment_account_id: Yup.number().required().label(formatMessage({id:'payment_account_id'})),
-    amount: Yup.number().required(),
+    amount: Yup.number().required().label(formatMessage({id:'amount'})),
-    currency_code: Yup.string().required(),
+    currency_code: Yup.string().required().label(formatMessage({id:'currency_code_'})),
-    publish: Yup.boolean(),
+    publish: Yup.boolean().label(formatMessage({id:'publish'})),
-    exchange_rate: Yup.number()
+    exchange_rate: Yup.number().label(formatMessage({id:'exchange_rate_'}))
   });
 
   const formik = useFormik({

client/src/containers/Accounting/MakeJournalEntriesForm.js

@@ -63,8 +63,8 @@ function MakeJournalEntriesForm({
   }, [changePageTitle, changePageSubtitle, manualJournal]);
 
   const validationSchema = Yup.object().shape({
-    journal_number: Yup.string().required(),
+    journal_number: Yup.string().required().label(formatMessage({id:'journal_number_'})),
-    date: Yup.date().required(),
+    date: Yup.date().required().label(formatMessage({id:'date'})),
     reference: Yup.string(),
     description: Yup.string(),
     entries: Yup.array().of(
@@ -147,7 +147,7 @@ function MakeJournalEntriesForm({
       // Validate the total credit should be eqials total debit.
       if (totalCredit !== totalDebit) {
         AppToaster.show({
-          message: 'credit_and_debit_not_equal',
+          message: formatMessage({id:'credit_and_debit_not_equal'}),
         });
         setSubmitting(false);
         return;

client/src/containers/Authentication/InviteAccept.js

@@ -33,14 +33,14 @@ function Invite({ requestInviteAccept, requestInviteMetaByToken }) {
   }, [shown]);
 
   const ValidationSchema = Yup.object().shape({
-    first_name: Yup.string().required(formatMessage({ id: 'required' })),
+    first_name: Yup.string().required().label(formatMessage({id:'first_name_'})),
-    last_name: Yup.string().required(formatMessage({ id: 'required' })),
+    last_name: Yup.string().required().label(formatMessage({id:'last_name_'})),
     phone_number: Yup.string()
       .matches()
-      .required(formatMessage({ id: 'required' })),
+      .required().label(formatMessage({id:''})),
     password: Yup.string()
-      .min(4, 'Password has to be longer than 4 characters!')
+      .min(4)
-      .required('Password is required!'),
+      .required().label(formatMessage({id:'password'}))
   });
 
   const inviteMeta = useAsync(() => {

client/src/containers/Authentication/Login.js

@@ -1,6 +1,8 @@
 import React, { useMemo, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import * as Yup from 'yup';
+
+
 import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import {
@@ -34,14 +36,15 @@ function Login({
   const [shown, setShown] = useState(false);
   const passwordRevealer = () => { setShown(!shown); };
 
+
   // Validation schema.
   const loginValidationSchema = Yup.object().shape({
     crediential: Yup.string()
-      .required(formatMessage({ id: 'required' }))
+      .required()
-      .email(formatMessage({ id: 'invalid_email_or_phone_number' })),
+      .email().label(formatMessage({id:'email'})),
     password: Yup.string()
-      .required(formatMessage({ id: 'required' }))
+      .required()
-      .min(4),
+      .min(4).label(formatMessage({id:'password'}))
   });
 
   // Formik validation schema and submit handler.
@@ -69,7 +72,7 @@ function Login({
         const toastBuilders = [];
         if (errors.find((e) => e.type === ERRORS_TYPES.INVALID_DETAILS)) {
           toastBuilders.push({
-            message: formatMessage({id:'email_and_password_entered_did_not_match'}),
+            message: formatMessage({ id: 'email_and_password_entered_did_not_match' }),
             intent: Intent.DANGER,
           });
         }
@@ -110,7 +113,7 @@ function Login({
           <FormGroup
             label={<T id={'email_or_phone_number'} />}
             intent={(errors.crediential && touched.crediential) && Intent.DANGER}
-            helperText={<ErrorMessage name={'crediential'} {...{errors, touched}} />}
+            helperText={<ErrorMessage name={'crediential'} {...{ errors, touched }} />}
             className={'form-group--crediential'}
           >
             <InputGroup
@@ -124,7 +127,7 @@ function Login({
             label={<T id={'password'} />}
             labelInfo={passwordRevealerTmp}
             intent={(errors.password && touched.password) && Intent.DANGER}
-            helperText={<ErrorMessage name={'password'} {...{errors, touched}} />}
+            helperText={<ErrorMessage name={'password'} {...{ errors, touched }} />}
             className={'form-group--password has-password-revealer'}
           >
             <InputGroup

client/src/containers/Authentication/Register.js

@@ -10,6 +10,7 @@ import {
   FormGroup,
   Spinner,
 } from '@blueprintjs/core';
+
 import { Row, Col } from 'react-grid-system';
 import { Link, useHistory } from 'react-router-dom';
 import withAuthenticationActions from './withAuthenticationActions';
@@ -29,18 +30,19 @@ function Register({ requestRegister }) {
   }, [shown]);
 
   const ValidationSchema = Yup.object().shape({
-    organization_name: Yup.string().required(formatMessage({ id: 'required' })),
+    organization_name: Yup.string().required().label(formatMessage({id:'organization_name_'})),
-    first_name: Yup.string().required(formatMessage({ id: 'required' })),
+    first_name: Yup.string().required().label(formatMessage({id:'first_name_'})),
-    last_name: Yup.string().required(formatMessage({ id: 'required' })),
+    last_name: Yup.string().required().label(formatMessage({id:'last_name_'})),
     email: Yup.string()
       .email()
-      .required(formatMessage({ id: 'required' })),
+      .required()
+      .label(formatMessage({ id: 'email' })),
     phone_number: Yup.string()
       .matches()
-      .required(formatMessage({ id: 'required' })),
+      .required().label(formatMessage({id:'phone_number_'})),
     password: Yup.string()
-      .min(4, 'Password has to be longer than 8 characters!')
+      .min(4)
-      .required('Password is required!'),
+      .required().label(formatMessage({id:'password'})),
   });
 
   const initialValues = useMemo(

client/src/containers/Authentication/ResetPassword.js

@@ -17,18 +17,21 @@ import withAuthenticationActions from './withAuthenticationActions';
 import AuthInsider from 'containers/Authentication/AuthInsider';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 
+
+
 function ResetPassword({ requestResetPassword }) {
   const { formatMessage } = useIntl();
   const { token } = useParams();
   const history = useHistory();
 
+  
   const ValidationSchema = Yup.object().shape({
     password: Yup.string()
-      .min(4, 'Password has to be longer than 4 characters!')
+      .min(4)
-      .required('Password is required!'),
+      .required().label(formatMessage({id:'password'})),
     confirm_password: Yup.string()
-      .oneOf([Yup.ref('password'), null], 'Passwords must match')
+      .oneOf([Yup.ref('password'), null])
-      .required('Confirm Password is required'),
+      .required().label(formatMessage({id:'confirm_password'})),
   });
 
   const initialValues = useMemo(

client/src/containers/Authentication/SendResetPassword.js

@@ -4,7 +4,6 @@ import { useFormik } from 'formik';
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
-import { FormattedMessage } from 'react-intl';
 
 import { compose } from 'utils';
 
@@ -21,9 +20,9 @@ function SendResetPassword({ requestSendResetPassword }) {
 
   // Validation schema.
   const ValidationSchema = Yup.object().shape({
-    crediential: Yup.string('')
+    crediential: Yup.string()
-      .required(formatMessage({ id: 'required' }))
+      .required()
-      .email(formatMessage({ id: 'invalid_email_or_phone_numner' })),
+      .email().label(formatMessage({id:''})),
   });
 
   const initialValues = useMemo(

client/src/containers/Dialogs/AccountFormDialog.js

@@ -52,11 +52,11 @@ function AccountFormDialog({
 }) { 
   const { formatMessage } = useIntl();
   const accountFormValidationSchema = Yup.object().shape({
-    name: Yup.string().required(formatMessage({ id: 'required' })),
+    name: Yup.string().required().label(formatMessage({id:'account_name_'})),
     code: Yup.number(),
     account_type_id: Yup.string()
       .nullable()
-      .required(formatMessage({ id: 'required' })),
+      .required().label(formatMessage({id:'account_type_id'})),
     description: Yup.string().trim()
   });
 

client/src/containers/Dialogs/CurrencyDialog.js

@@ -46,13 +46,11 @@ function CurrencyDialog({
 }) {
   const {formatMessage} = useIntl();
 
-  const ValidationSchema = Yup.object().shape({
+  const validationSchema = Yup.object().shape({
-    currency_name: Yup.string().required(
+    currency_name: Yup.string().required().label(formatMessage({id:'currency_name_'})),
-      formatMessage({ id: 'required' })
-    ),
     currency_code: Yup.string()
       .max(4)
-      .required(formatMessage({ id: 'required' })),
+      .required().label(formatMessage({id:'currency_code_'})),
   });
   const initialValues = useMemo(() => ({
     currency_name: '',
@@ -63,9 +61,9 @@ function CurrencyDialog({
     values, 
     errors,
     touched,
+    isSubmitting,
     setFieldValue,
     getFieldProps,
-    isSubmitting,
     handleSubmit,
     resetForm,
   } = useFormik({
@@ -74,13 +72,13 @@ function CurrencyDialog({
       ...(payload.action === 'edit' &&
         pick(currency, Object.keys(initialValues))),
     },
-    validationSchema: ValidationSchema,
+    validationSchema: validationSchema,
     onSubmit: (values, { setSubmitting }) => {
       if (payload.action === 'edit') {
         requestEditCurrency(currency.id, values).then((response) => {
           closeDialog(name);
           AppToaster.show({
-            message: 'the_currency_has_been_edited',
+            message: formatMessage({id:'the_currency_has_been_successfully_edited'}),
             intent: Intent.SUCCESS,
           });
           setSubmitting(false);
@@ -92,7 +90,7 @@ function CurrencyDialog({
         requestSubmitCurrencies(values).then((response) => {
           closeDialog(name);
           AppToaster.show({
-            message: 'the_currency_has_been_submit',
+            message: formatMessage({id:'the_currency_has_been_successfully_created'}),
             intent: Intent.SUCCESS,
           });
           setSubmitting(false);

client/src/containers/Dialogs/ExchangeRateDialog.js

@@ -49,9 +49,9 @@ function ExchangeRateDialog({
   const [selectedItems, setSelectedItems] = useState({});
 
   const validationSchema = Yup.object().shape({
-    exchange_rate: Yup.number().required(),
+    exchange_rate: Yup.number().required().label(formatMessage({id:'exchange_rate_'})),
-    currency_code: Yup.string().max(3).required(),
+    currency_code: Yup.string().max(3).required(formatMessage({id:'currency_code_'})),
-    date: Yup.date().required(),
+    date: Yup.date().required().label(formatMessage({id:'date'})),
   });
 
   const initialValues = useMemo(() => ({

client/src/containers/Dialogs/InviteUserDialog.js

@@ -37,12 +37,12 @@ function InviteUserDialog({
   }, false);
 
   const validationSchema = Yup.object().shape({
-    first_name: Yup.string().required(formatMessage({ id: 'required' })),
+    first_name: Yup.string().required().label(formatMessage({id:'first_name_'})),
-    last_name: Yup.string().required(formatMessage({ id: 'required' })),
+    last_name: Yup.string().required().label(formatMessage({id:'last_name_'})),
     email: Yup.string()
       .email()
-      .required(formatMessage({ id: 'required' })),
+      .required().label(formatMessage({id:'email'})),
-    phone_number: Yup.number().required(formatMessage({ id: 'required' })),
+    phone_number: Yup.number().required().label(formatMessage({id:'phone_number_'})),
   });
 
   const initialValues = useMemo(

client/src/containers/Dialogs/ItemCategoryDialog.js

@@ -61,7 +61,7 @@ function ItemCategoryDialog({
     () => requestFetchItemCategories());
 
   const validationSchema = Yup.object().shape({
-    name: Yup.string().required(),
+    name: Yup.string().required().label(formatMessage({id:'category_name_'})),
     parent_category_id: Yup.string().nullable(),
     description: Yup.string().trim()
   });

client/src/containers/Dialogs/ItemFromDialog.js

@@ -30,7 +30,7 @@ function ItemFromDialog({
   const [state, setState] = useState({});
   const { formatMessage } = useIntl();
   const ValidationSchema = Yup.object().shape({
-    name: Yup.string().required(formatMessage({ id: 'required' })),
+    name: Yup.string().required().label(formatMessage({id:'category_name_'})),
     description: Yup.string().trim(),
   });
 

client/src/containers/Dialogs/UserFormDialog.js

@@ -36,7 +36,7 @@ function UserFormDialog({
   }, false);
 
   const validationSchema = Yup.object().shape({
-    email: Yup.string().email().required(),
+    email: Yup.string().email().required().label(formatMessage({id:'email'})),
   });
 
   const initialValues = {

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js

@@ -31,8 +31,8 @@ export default function BalanceSheetHeader({
       to_date: moment(pageFilter.to_date).toDate(),
     },
     validationSchema: Yup.object().shape({
-      from_date: Yup.date().required(),
+      from_date: Yup.date().required().label(formatMessage({id:'from_data'})),
-      to_date: Yup.date().min(Yup.ref('from_date')).required(),
+      to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
     }),
     onSubmit: (values, actions) => {
       onSubmitFilter(values);

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js

@@ -26,8 +26,8 @@ export default function JournalHeader({
       to_date: moment(pageFilter.to_date).toDate()
     },
     validationSchema: Yup.object().shape({
-      from_date: Yup.date().required(),
+      from_date: Yup.date().required().label(formatMessage({id:'from_date'})),
-      to_date: Yup.date().min(Yup.ref('from_date')).required(),
+      to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
     }),
     onSubmit: (values, actions) => {
       onSubmitFilter(values);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js

@@ -25,8 +25,8 @@ export default function TrialBalanceSheetHeader({
       to_date: moment(pageFilter.to_date).toDate()
     },
     validationSchema: Yup.object().shape({
-      from_date: Yup.date().required(),
+      from_date: Yup.date().required().label(formatMessage({id:'from_date'})),
-      to_date: Yup.date().min(Yup.ref('from_date')).required(),
+      to_date: Yup.date().min(Yup.ref('from_date')).required().label(formatMessage({id:'to_date'})),
     }),
     onSubmit: (values, { setSubmitting }) => {
       onSubmitFilter(values);

client/src/containers/Items/ItemForm.js

@@ -67,13 +67,13 @@ const ItemForm = ({
 
   const validationSchema = Yup.object().shape({
     active: Yup.boolean(),
-    name: Yup.string().required(),
+    name: Yup.string().required().label(formatMessage({id:'item_name_'})),
-    type: Yup.string().trim().required(),
+    type: Yup.string().trim().required().label(formatMessage({id:'item_type_'})),
     sku: Yup.string().trim(),
     cost_price: Yup.number(),
     sell_price: Yup.number(),
-    cost_account_id: Yup.number().required(),
+    cost_account_id: Yup.number().required().label(formatMessage({id:'cost_account_id'})),
-    sell_account_id: Yup.number().required(),
+    sell_account_id: Yup.number().required().label(formatMessage({id:'sell_account_id'})),
     inventory_account_id: Yup.number().when('type', {
       is: (value) => value === 'inventory',
       then: Yup.number().required(),

client/src/containers/Preferences/General/General.js

@@ -32,7 +32,7 @@ function GeneralPreferences({
   requestSubmitOptions,
   requestFetchOptions,
 }) {
-  const intl = useIntl();
+  const {formatMessage} = useIntl();
   const [selectedItems, setSelectedItems] = useState({});
   const [timeZone, setTimeZone] = useState('');
 
@@ -65,16 +65,16 @@ function GeneralPreferences({
   ];
 
   const validationSchema = Yup.object().shape({
-    name: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    name: Yup.string().required().label(formatMessage({id:'organization_name_'})),
-    industry: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    industry: Yup.string().required().label(formatMessage({id:'organization_industry_'})),
-    location: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    location: Yup.string().required().label(formatMessage({id:'location'})),
     base_currency: Yup.string().required(
-      intl.formatMessage({ id: 'required' })
+      formatMessage({ id: 'required' })
     ),
-    fiscal_year: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    fiscal_year: Yup.string().required().label(formatMessage({id:'base_currency_'})),
-    language: Yup.string().required(intl.formatMessage({ id: 'required' })),
+    language: Yup.string().required().label(formatMessage({id:'language'})),
-    // time_zone: Yup.object().required(intl.formatMessage({ id: 'required' })),
+    // time_zone: Yup.object().required()..label(formatMessage({id:''})),
-    date_format: Yup.date().required(intl.formatMessage({ id: 'required' })),
+    date_format: Yup.date().required().label(formatMessage({id:'date_format_'})),
   });
 
   const {

client/src/index.js

@@ -6,7 +6,12 @@ import App from 'components/App';
 import * as serviceWorker from 'serviceWorker';
 import createStore from 'store/createStore';
 import AppProgress from 'components/NProgress/AppProgress';
+import { setLocale } from 'yup';
+import {locale} from 'lang/en/locale';
 
+
+
+setLocale(locale)
 ReactDOM.render(
   <Provider store={createStore}>
     <BrowserRouter>

client/src/lang/en/index.js

@@ -1,10 +1,10 @@
 export default {
   hello_world: 'Hello World',
-  email_or_phone_number: 'Email or phone number',
+  'email_or_phone_number': 'Email or phone number',
   password: 'Password',
   login: 'Login',
   invalid_email_or_phone_number: 'Invalid email or phone number.',
-  required: 'Required',
+  'required': 'Required',
   reset_password: 'Reset Password',
   the_user_has_been_suspended_from_admin: 'The user has been suspended from the administrator.',
   email_and_password_entered_did_not_match:
@@ -75,7 +75,6 @@ export default {
   new_exchange_rate: 'New Exchange Rate',
   delete_exchange_rate: 'Delete Exchange Rate',
   exchange_rate: 'Exchange Rate',
-  currency_code: 'Currency Code',
   edit_invite: 'Edit invite',
   edit_category: 'Edit Category',
   delete_category: 'Delete Category',
@@ -116,7 +115,7 @@ export default {
   cancel: 'Cancel',
   move_to_trash: 'Move to Trash',
   save_new: 'Save & New',
-  journal_number: 'Journal number',
+  journal_number: 'Journal Number',
   credit_currency: 'Credit ({currency})',
   debit_currency: 'Debit ({currency})',
   note: 'Note',
@@ -292,16 +291,35 @@ run_report:'Run Report',
 num:'Num.',
 acc_code:'Acc. Code',
 display_report_columns:'Display report columns',
-select_display_columns_by:'Select display columns by...'
+select_display_columns_by:'Select display columns by...',
-
+credit_and_debit_not_equal:'credit and debit not equal',
-
+the_currency_has_been_successfully_edited:'The currency has been successfully edited',
-
+the_currency_has_been_successfully_created:'The currency has been successfully created',
-
-
-
-
-
 
+// Name Labels
+expense_account_id :'Expense account',
+payment_account_id: 'Payment account',
+currency_code_: 'Currency code',
+publish:'Publish',
+exchange_rate_:'Exchange rate',
+journal_number_:'Journal number',
+first_name_: 'First name',
+last_name_:'Last name',
+phone_number_:'Phone number',
+organization_name_:'Organization name',
+confirm_password:'Confirm password',
+crediential:'Email or Phone number',
+account_type_id:'Account type',
+account_name_:'Account name',
+currency_name_:'Currency name',
+cost_account_id:'Cost account',
+sell_account_id:'Sell account',
+item_type_:'Item type',
+item_name_:'Item name',
+organization_industry_:'Organization industry',
+base_currency_:'Base currency',
+date_format_:'Date format',
+view_name_:'View name'
 };
 
 

client/src/lang/en/locale.js

@@ -0,0 +1,60 @@
+import printValue from '../printValue';
+export const locale = {
+
+  mixed: {
+    default: "${path} is invalid",
+    required: "${path} is a required field ",
+    oneOf: "${path} must be one of the following values: ${values}",
+    notOneOf: "${path} must not be one of the following values: ${values}",
+    notType: ({ path, type, value, originalValue }) => {
+      let isCast = originalValue != null && originalValue !== value;
+      let msg =
+        `${path} must beeeeee a \`${type}\` type, ` +
+        `but the final value was: \`${printValue(value, true)}\`` +
+        (isCast
+          ? ` (cast from the value \`${printValue(originalValue, true)}\`).`
+          : '.');
+  
+      if (value === null) {
+        msg += `\n If "null" is intended as an empty value be sure to mark the schema as \`.nullable()\``;
+      }
+  
+      return msg;
+    },
+    defined: '${path} must be defined',
+  },
+  string: {
+    length: "${path} must be exactly ${length} characters",
+    min: "${path} must be at least ${min} characters",
+    max: "${path} must be at most ${max} characters",
+    matches: '${path} must match the following: "${regex}"',
+    email: "${path} must be a valid email",
+    url: "${path} must be a valid URL",
+    trim: "${path} must be a trimmed string",
+    lowercase: "${path} must be a lowercase string",
+    uppercase: "${path} must be a upper case string"
+  },
+  number: {
+    min: "${path} must be greater than or equal to ${min}",
+    max: "${path} must be less than or equal to ${max}",
+    lessThan: "${path} must be less than ${less}",
+    moreThan: "${path} must be greater than ${more}",
+    notEqual: "${path} must be not equal to ${notEqual}",
+    positive: "${path} must be a positive number",
+    negative: "${path} must be a negative number",
+    integer: "${path} must be an integer"
+  },
+  date: {
+    min: "${path} field must be later than ${min}",
+    max: "${path} field must be at earlier than ${max}"
+  },
+  boolean : {},
+  object: {
+    noUnknown:
+      "${path} field cannot have keys not specified in the object shape"
+  },
+  array: {
+    min: "${path} field must have at least ${min} items",
+    max: "${path} field must have less than or equal to ${max} items"
+  }
+};

client/src/lang/printValue.js

@@ -0,0 +1,48 @@
+const toString = Object.prototype.toString;
+const errorToString = Error.prototype.toString;
+const regExpToString = RegExp.prototype.toString;
+const symbolToString =
+  typeof Symbol !== 'undefined' ? Symbol.prototype.toString : () => '';
+const SYMBOL_REGEXP = /^Symbol\((.*)\)(.*)$/;
+
+function printNumber(val) {
+  if (val != +val) return 'NaN';
+  const isNegativeZero = val === 0 && 1 / val < 0;
+  return isNegativeZero ? '-0' : '' + val;
+}
+
+function printSimpleValue(val, quoteStrings = false) {
+  if (val == null || val === true || val === false) return '' + val;
+
+  const typeOf = typeof val;
+  if (typeOf === 'number') return printNumber(val);
+  if (typeOf === 'string') return quoteStrings ? `"${val}"` : val;
+  if (typeOf === 'function')
+    return '[Function ' + (val.name || 'anonymous') + ']';
+  if (typeOf === 'symbol')
+    return symbolToString.call(val).replace(SYMBOL_REGEXP, 'Symbol($1)');
+
+  const tag = toString.call(val).slice(8, -1);
+  if (tag === 'Date')
+    return isNaN(val.getTime()) ? '' + val : val.toISOString(val);
+  if (tag === 'Error' || val instanceof Error)
+    return '[' + errorToString.call(val) + ']';
+  if (tag === 'RegExp') return regExpToString.call(val);
+
+  return null;
+}
+
+export default function printValue(value, quoteStrings) {
+  let result = printSimpleValue(value, quoteStrings);
+  if (result !== null) return result;
+
+  return JSON.stringify(
+    value,
+    function(key, value) {
+      let result = printSimpleValue(this[key], quoteStrings);
+      if (result !== null) return result;
+      return value;
+    },
+    2,
+  );
+}