@applica-software-guru/react-admin 1.5.248 → 1.5.249

package/dist/utils/localizedValue.d.ts

@@ -8,11 +8,14 @@ type ILocalizedValue<T> = {
 declare function localizedValueHasAllLocales<T>(value?: ILocalizedValue<T>, locales?: Array<ILocale>, options?: {
     isEmpty?: (v: T) => boolean;
 }): boolean;
+declare function localizedValueHasAtLeastOneLocale<T>(value?: ILocalizedValue<T>, locales?: Array<ILocale>, options?: {
+    isEmpty?: (v: T) => boolean;
+}): boolean;
 type IGetLocalizedValueOptions = {
     fallback?: boolean;
     fallbackLocales?: Array<string>;
 };
 declare function getLocalizedValue<T>(value: ILocalizedValue<T>, locale: string, options?: IGetLocalizedValueOptions): T | undefined;
 export type { IGetLocalizedValueOptions, ILocalizedValue };
-export { getLocalizedValue, localizedValueHasAllLocales };
+export { getLocalizedValue, localizedValueHasAllLocales, localizedValueHasAtLeastOneLocale };
 //# sourceMappingURL=localizedValue.d.ts.map

package/dist/utils/localizedValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"localizedValue.d.ts","sourceRoot":"","sources":["../../../src/utils/localizedValue.ts"],"names":[],"mappings":"AAEA,KAAK,OAAO,GAAG;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AACF,KAAK,eAAe,CAAC,CAAC,IAAI;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAA;CAAE,CAAC;AAE/C,iBAAS,2BAA2B,CAAC,CAAC,EACpC,KAAK,GAAE,eAAe,CAAC,CAAC,CAAM,EAC9B,OAAO,GAAE,KAAK,CAAC,OAAO,CAAM,EAC5B,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;CAAO,GAC5C,OAAO,CAIT;AAED,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CACjC,CAAC;AACF,iBAAS,iBAAiB,CAAC,CAAC,EAC1B,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EACzB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,yBAAyB,GAClC,CAAC,GAAG,SAAS,CAyBf;AAED,YAAY,EAAE,yBAAyB,EAAE,eAAe,EAAE,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,2BAA2B,EAAE,CAAC"}
+{"version":3,"file":"localizedValue.d.ts","sourceRoot":"","sources":["../../../src/utils/localizedValue.ts"],"names":[],"mappings":"AAEA,KAAK,OAAO,GAAG;IACb,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AACF,KAAK,eAAe,CAAC,CAAC,IAAI;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,CAAA;CAAE,CAAC;AAE/C,iBAAS,2BAA2B,CAAC,CAAC,EACpC,KAAK,GAAE,eAAe,CAAC,CAAC,CAAM,EAC9B,OAAO,GAAE,KAAK,CAAC,OAAO,CAAM,EAC5B,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;CAAO,GAC5C,OAAO,CAIT;AAED,iBAAS,iCAAiC,CAAC,CAAC,EAC1C,KAAK,GAAE,eAAe,CAAC,CAAC,CAAM,EAC9B,OAAO,GAAE,KAAK,CAAC,OAAO,CAAM,EAC5B,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;CAAO,GAC5C,OAAO,CAGT;AAED,KAAK,yBAAyB,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CACjC,CAAC;AACF,iBAAS,iBAAiB,CAAC,CAAC,EAC1B,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EACzB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,yBAAyB,GAClC,CAAC,GAAG,SAAS,CAyBf;AAED,YAAY,EAAE,yBAAyB,EAAE,eAAe,EAAE,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,2BAA2B,EAAE,iCAAiC,EAAE,CAAC"}

package/package.json

@@ -115,5 +115,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.248"
+  "version": "1.5.249"
 }

package/src/components/Logo.tsx

@@ -1,11 +1,7 @@
-import logoIcon from '@/assets/logo-icon.png';
-import logoMain from '@/assets/logo-main.png';
 import { useThemeConfig } from '@/components/Layout/ThemeProvider';
 import { ButtonBase, SxProps } from '@mui/material';
 import { Link } from 'react-router-dom';
 
-const defaultIcon = <img src={logoIcon} alt="Applica" width="20px" />;
-const defaultMain = <img src={logoMain} alt="Applica" width="100px" />;
 type LogoProps = {
   isIcon: boolean;
   sx: SxProps;
@@ -13,7 +9,7 @@ type LogoProps = {
   logoIcon: React.ReactNode;
   logoMain: React.ReactNode;
 };
-function Logo({ isIcon, sx, to, logoIcon = defaultIcon, logoMain = defaultMain }: LogoProps) {
+function Logo({ isIcon, sx, to, logoIcon, logoMain }: LogoProps) {
   const { appDefaultPath } = useThemeConfig();
   return (
     <ButtonBase disableRipple component={Link} to={!to ? appDefaultPath : to} sx={sx}>

package/src/components/ra-inputs/LabeledInput.tsx

@@ -87,7 +87,7 @@ type LabeledInputProps = InputProps & {
   isRequired?: boolean;
   source?: string;
   display?: 'legend' | 'label';
-  helperText?: string | boolean;
+  helperText?: string | boolean | React.ReactElement | null;
   divider?: boolean;
 };
 

package/src/components/ra-inputs/LocalizedTextInput.tsx

@@ -1,9 +1,16 @@
 import { TextInput } from './TextInput';
 import { LabeledInput, LabeledInputProps } from '@/components/ra-inputs/LabeledInput';
-import { localizedValueHasAllLocales } from '@/utils';
+import { localizedValueHasAllLocales, localizedValueHasAtLeastOneLocale } from '@/utils';
 import { Box, Chip, ListItemText, Menu, MenuItem, PopoverOrigin, Typography } from '@mui/material';
 import _ from 'lodash';
-import { useInput, useLocaleState, useLocales } from 'ra-core';
+import {
+  ValidationError,
+  ValidationErrorMessage,
+  composeValidators,
+  useInput,
+  useLocaleState,
+  useLocales
+} from 'ra-core';
 import { TextInputProps } from 'ra-ui-materialui';
 import { ReactElement, useCallback, useMemo, useState } from 'react';
 import { useWatch } from 'react-hook-form';
@@ -11,14 +18,49 @@ import { useWatch } from 'react-hook-form';
 const ANCHOR_ORIGIN: PopoverOrigin = { vertical: 'bottom', horizontal: 'right' };
 const TRANSFORM_ORIGIN: PopoverOrigin = { vertical: 'top', horizontal: 'right' };
 
-type ILocalizedTextInputProps = TextInputProps & LabeledInputProps;
+type ILocalizedTextInputProps = TextInputProps &
+  LabeledInputProps & {
+    /**
+     * Indicates if at least one locale is required.
+     */
+    requiredAtLeastOneLocale?: boolean;
+    /**
+     * Indicates the locale that is required.
+     * If not provided, one of the locales will be required.
+     */
+    requiredLocale?: string;
+  };
 
-function LocalizedTextInput(props: ILocalizedTextInputProps) {
+function LocalizedTextInput({
+  requiredAtLeastOneLocale,
+  requiredLocale,
+  validate: _validate,
+  required: _required,
+  ...props
+}: ILocalizedTextInputProps) {
   const { source } = props;
-  const { fieldState } = useInput(props);
-  const value = useWatch({ name: source });
-  const { error } = fieldState;
   const locales = useLocales();
+  const required = useCallback(
+    (requiredMessage = 'ra.validation.required', specificRequiredMessage = 'ra.validation.required_locale') => {
+      return (value: any) => {
+        if (requiredAtLeastOneLocale && !requiredLocale && !localizedValueHasAtLeastOneLocale(value, locales)) {
+          return requiredMessage;
+        } else if (requiredLocale && (!_.has(value, requiredLocale) || _.isEmpty(_.get(value, requiredLocale)))) {
+          return { message: specificRequiredMessage, args: { locale: requiredLocale } };
+        } else if (!requiredAtLeastOneLocale && _required && !localizedValueHasAllLocales(value, locales)) {
+          return requiredMessage;
+        }
+        return undefined;
+      };
+    },
+    [requiredAtLeastOneLocale, requiredLocale, locales, _required]
+  );
+  const validate = useMemo(() => {
+    return composeValidators(_validate, required());
+  }, [_validate, required]);
+  const { fieldState } = useInput({ ...props, validate });
+  const { error } = fieldState;
+  const value = useWatch({ name: source });
   const isMissingLocalizations = !localizedValueHasAllLocales(value, locales);
   const [currentLocale] = useLocaleState();
   const [locale, setLocale] = useState(currentLocale);
@@ -29,6 +71,7 @@ function LocalizedTextInput(props: ILocalizedTextInputProps) {
     [open, setAnchorEl]
   );
   const handleClose = useCallback(() => setAnchorEl(null), [setAnchorEl]);
+
   const MenuItems: Array<ReactElement> = useMemo(() => {
     return _.map(locales, (l, index) => {
       return (
@@ -44,9 +87,14 @@ function LocalizedTextInput(props: ILocalizedTextInputProps) {
       );
     });
   }, [locales, setLocale, handleClose, value]);
-
   return (
-    <LabeledInput {...props} helperText={error?.message}>
+    <LabeledInput
+      {...props}
+      validate={validate}
+      helperText={
+        error?.message ? <ValidationError error={error?.message as ValidationErrorMessage} /> : props?.helperText
+      }
+    >
       <>
         <Box flex={1}>
           {_.map(locales, (l, index) => {
@@ -57,6 +105,8 @@ function LocalizedTextInput(props: ILocalizedTextInputProps) {
                 source={`${source}.${l.locale}`}
                 sx={{ width: '100%', display: l.locale === locale ? 'inline-flex' : 'none' }}
                 label={false}
+                helperText={false}
+                required={false}
                 InputProps={{
                   endAdornment: (
                     <Chip

package/src/playground/components/ra-forms/CategoryForm.jsx

@@ -1,9 +1,17 @@
-import { BooleanInput, SimpleForm, TextInput } from '@/';
+import { BooleanInput, LocalizedTextInput, SimpleForm, required } from '@/';
 
+function requiredAtLeastOneTranslation(message = 'ra.validation.at_least_one_translation') {
+  return (value, values) => {
+    if (!value || !Object.keys(value).length) {
+      return message;
+    }
+    return undefined;
+  };
+}
 function CategoryForm(props) {
   return (
     <SimpleForm {...props}>
-      <TextInput source="description" fullWidth />
+      <LocalizedTextInput source="description" fullWidth validate={requiredAtLeastOneTranslation()} />
       <BooleanInput source="active" />
     </SimpleForm>
   );

package/src/playground/components/ra-forms/DeviceForm.jsx

@@ -1,4 +1,5 @@
 import {
+  DateField,
   ReadonlyField,
   SimpleForm,
   TextInput,
@@ -16,7 +17,9 @@ function DeviceForm() {
       <Grid container spacing={spacing}>
         {record?.id ? (
           <Grid item xs={12} sm={12}>
-            <ReadonlyField source="registrationDate" fullWidth />
+            <ReadonlyField source="registrationDate" fullWidth>
+              <DateField showTime />
+            </ReadonlyField>
           </Grid>
         ) : null}
         <Grid item xs={12} sm={12}>

package/src/playground/components/ra-lists/CategoryList.jsx

@@ -7,6 +7,7 @@ import {
   Empty,
   FilterButton,
   List,
+  LocalizedTextField,
   SearchInput,
   SimpleForm,
   TextField,
@@ -51,7 +52,7 @@ function CategoryList() {
       empty={<Empty actions={<CategoryAddButton />} />}
     >
       <Datagrid>
-        <TextField source="description" />
+        <LocalizedTextField source="description" />
         <EditInDialogButton>
           <CategoryForm />
         </EditInDialogButton>

package/src/playground/config.jsx

@@ -4,7 +4,7 @@ if (appUrl.endsWith(':3000/') || appUrl.indexOf(':51') !== -1) {
   appUrl = 'http://localhost:8080/';
   environment = 'DEVELOPER';
 }
-const APP_NAME = 'RApplica';
+const APP_NAME = 'Applica';
 const APP_URL = appUrl;
 const API_URL = `${APP_URL}api`;
 const ENVIRONMENT = environment;

package/src/playground/menu.jsx

@@ -20,13 +20,6 @@ export const menu = [
         type: 'item',
         url: '/entities/notification',
         icon: NotificationOutlined
-      },
-      {
-        id: 'entities/order',
-        title: 'ra.menu.item.order',
-        type: 'item',
-        url: '/entities/order',
-        icon: TableOutlined
       }
     ]
   },

package/src/utils/localizedValue.ts

@@ -16,6 +16,15 @@ function localizedValueHasAllLocales<T>(
   return !_.some(locales, (l) => isEmpty((value ?? {})[l.locale]));
 }
 
+function localizedValueHasAtLeastOneLocale<T>(
+  value: ILocalizedValue<T> = {},
+  locales: Array<ILocale> = [],
+  options: { isEmpty?: (v: T) => boolean } = {}
+): boolean {
+  const { isEmpty = _.isEmpty } = options;
+  return _.some(locales, (l) => !isEmpty((value ?? {})[l.locale]));
+}
+
 type IGetLocalizedValueOptions = {
   fallback?: boolean;
   fallbackLocales?: Array<string>;
@@ -52,4 +61,4 @@ function getLocalizedValue<T>(
 }
 
 export type { IGetLocalizedValueOptions, ILocalizedValue };
-export { getLocalizedValue, localizedValueHasAllLocales };
+export { getLocalizedValue, localizedValueHasAllLocales, localizedValueHasAtLeastOneLocale };