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

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

@@ -108,12 +108,12 @@
     "format": "prettier --write .",
     "prepare": "husky",
     "preview": "vite preview",
-    "start": "vite",
+    "start": "vite --host",
     "test": "vitest run",
     "watch": "vite build --watch"
   },
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.248"
+  "version": "1.5.250"
 }

package/src/components/AuthWrapper.tsx

@@ -1,5 +1,6 @@
 import { AuthBackground } from '@/components/AuthBackground';
 import { AuthCard } from '@/components/AuthCard';
+import { ThemeColor } from '@/components/Layout';
 import { Footer } from '@/components/Layout/Footer';
 import { MainIcon } from '@/components/MainIcon';
 import { Box, Grid } from '@mui/material';
@@ -11,20 +12,23 @@ type AuthWrapperProps = PropsWithChildren<{
   copy?: string;
   background?: React.ReactNode | React.ComponentType;
   logo?: React.ReactNode;
+  footer?: boolean;
 }>;
 
-function AuthWrapper({ version, name, copy, children, logo, background = AuthBackground }: AuthWrapperProps) {
+function AuthWrapper({
+  version,
+  name,
+  copy,
+  children,
+  logo,
+  background = AuthBackground,
+  footer = true
+}: AuthWrapperProps) {
   return (
-    <Box sx={{ minHeight: '100vh' }}>
+    <Box>
+      <ThemeColor source="default" />
       {React.isValidElement(background) ? background : React.createElement(background as any)}
-      <Grid
-        container
-        direction="column"
-        justifyContent="flex-end"
-        sx={{
-          minHeight: '100vh'
-        }}
-      >
+      <Grid container direction="column" justifyContent="flex-end">
         <Grid item xs={12} sx={{ ml: 3 }}>
           {logo ? logo : <MainIcon title={name} />}
         </Grid>
@@ -41,9 +45,11 @@ function AuthWrapper({ version, name, copy, children, logo, background = AuthBac
               <AuthCard>{children}</AuthCard>
             </Grid>
           </Grid>
-          <Grid item sx={{ pb: 1 }}>
-            <Footer name={name} copy={copy} version={version} />
-          </Grid>
+          {footer ? (
+            <Grid item sx={{ pb: 1, position: 'absolute', bottom: 0, ml: 2 }}>
+              <Footer name={name} copy={copy} version={version} />
+            </Grid>
+          ) : null}
         </Grid>
       </Grid>
     </Box>

package/src/components/Layout/Footer.tsx

@@ -9,7 +9,14 @@ type IFooterProps = {
 function Footer(props: IFooterProps) {
   const { name, version, copy = '© Applica Software Guru for' } = props;
   return (
-    <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ p: '24px 16px 0px', mt: 'auto' }}>
+    <Stack
+      direction="row"
+      justifyContent="space-between"
+      alignItems="flex-end"
+      flexGrow={1}
+      height="auto"
+      sx={{ pt: 1 }}
+    >
       <Typography variant="caption">
         <span dangerouslySetInnerHTML={{ __html: copy || '' }} /> {name} - {version}
       </Typography>

package/src/components/Layout/Layout.tsx

@@ -8,6 +8,7 @@ import { ThemeToggler } from './ThemeToggler';
 import { LayoutWrapper } from './Wrapper';
 import { Breadcrumbs } from '@/components/@extended';
 import { useBreadcrumbs } from '@/components/Layout/MenuProvider';
+import { ThemeColor } from '@/components/Layout/ThemeColor';
 import { ErrorProps, LoadingIndicator } from 'ra-ui-materialui';
 import { Outlet } from 'react-router-dom';
 
@@ -29,6 +30,7 @@ const Layout = withLayoutProvider(function Layout(props: ILayoutProps) {
         <HeaderSpacer />
         <LocaleButton />
         {enableThemeToggler ? <ThemeToggler /> : null}
+        <ThemeColor />
         <LoadingIndicator />
         <HeaderNotification />
         <ResponsiveSection>

package/src/components/Layout/ThemeColor.tsx

@@ -0,0 +1,24 @@
+import { useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { useTheme } from '@mui/material';
+import _ from 'lodash';
+import { useEffect } from 'react';
+
+type ThemeColorProps = {
+  source?: 'paper' | 'default';
+};
+/**
+ * ThemeColor component is responsible for setting the theme color in the browser.
+ * It uses the current theme mode and the theme object to set the theme color.
+ */
+function ThemeColor({ source = 'paper' }: ThemeColorProps) {
+  const { mode } = useThemeConfig();
+  const theme = useTheme();
+  useEffect(() => {
+    const backgroundColor = _.get(theme.palette.background, source);
+    document.querySelector('meta[name="theme-color"]')?.setAttribute('content', backgroundColor as string);
+  }, [mode, theme, source]);
+
+  return null;
+}
+
+export { ThemeColor };

package/src/components/Layout/ThemeToggler.tsx

@@ -4,7 +4,6 @@ import { MoonOutlined, SunOutlined } from '@ant-design/icons';
 
 function ThemeToggler(): JSX.Element {
   const { mode, setMode } = useThemeConfig();
-
   return (
     <HeaderToggleButton
       value="theme-mode"

package/src/components/Layout/index.ts

@@ -9,6 +9,7 @@ export * from './MenuProvider';
 export * from './NavMenu';
 export * from './Navigation';
 export * from './Provider';
+export * from './ThemeColor';
 export * from './ThemeProvider';
 export * from './ThemeToggler';
 export * from './Wrapper';

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-fields/CoverField.tsx

@@ -15,7 +15,6 @@ type CoverFieldProps = {
  * @example
  * // Suppose you have a property, in your record, called 'image' and it contains a base64 string related field called '_image'.
  * // You can use this component as follows:
- * import { CoverField } from 'ra-ui-applica';
  * ...
  * <CoverField source="image" />
  *

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

@@ -33,7 +33,6 @@ const StyledFileInput = styled(RaFileInput, { slot: 'root' })(({ theme }) => ({
  *
  * @example
  * // If you hav an object class with @File annotation, you can map it to a FileInput:
- * import { FileInput } from 'ra-ui-applica';
  * ...
  * <FileInput source="file_property" />
  *

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/App.jsx

@@ -37,6 +37,7 @@ function App() {
       enableNotification
       enableRegistration
       enablePasswordRecover
+      enableThemeToggler
     >
       <CustomRoutes>
         <Route path="/custom-page" element={<CustomPage />} />

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

@@ -1,10 +1,11 @@
 let environment = 'PRODUCTION';
 let appUrl = `//${document.location.host}/`;
-if (appUrl.endsWith(':3000/') || appUrl.indexOf(':51') !== -1) {
-  appUrl = 'http://localhost:8080/';
+if (appUrl.endsWith(':3000/')) {
+  const callingHostOrIp = document.location.host.split(':')[0];
+  appUrl = `//${callingHostOrIp}: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 };