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

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.249"
+  "version": "1.5.251"
 }

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/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/index.ts

@@ -79,6 +79,8 @@ export {
   usePermissions,
   useRecordContext,
   useRefresh,
+  useRemoveFromStore,
+  useResetStore,
   useResourceContext,
   useResourceDefinition,
   useResourceDefinitions,
@@ -86,6 +88,8 @@ export {
   useShowController,
   useSimpleFormIterator,
   useSimpleFormIteratorItem,
+  useStore,
+  useStoreContext,
   useTranslate,
   useTranslateLabel,
   useUnselect,

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

@@ -1,7 +1,8 @@
 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 = 'Applica';