@asaleh37/ui-base 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asaleh37/ui-base",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "",
   "license": "ISC",
   "author": "Ahmed Saleh Mohamed",

package/rollup.config-1748377725725.cjs

@@ -0,0 +1,50 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var resolve = require('@rollup/plugin-node-resolve');
+var commonjs = require('@rollup/plugin-commonjs');
+var typescript = require('@rollup/plugin-typescript');
+var dts = require('rollup-plugin-dts');
+var terser = require('@rollup/plugin-terser');
+var json = require('@rollup/plugin-json');
+var peerDepsExternal = require('rollup-plugin-peer-deps-external');
+var postcss = require('rollup-plugin-postcss');
+
+const packageJson = require("./package.json");
+
+var rollup_config = [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json" }),
+      terser(),
+      postcss(),
+      json(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    input: "src/index.ts",
+    output: [{ file: packageJson.types }],
+    plugins: [dts.default()],
+    external: [/\.css$/],
+  },
+];
+
+exports.default = rollup_config;

package/src/components/App.tsx

@@ -1,14 +1,15 @@
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { createTheme } from "@mui/material";
 import { ThemeProvider } from "@emotion/react";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { RootState } from "../redux/store";
 import { LightThemeOptions } from "../theme/LightThemeOptions";
 import { DarkThemeOptions } from "../theme/DarkThemeOptions";
 import Layout from "../layout/Layout";
+import { AppInfo, AppInfoActions } from "../redux/features/common/AppInfoSlice";
 
-function App() {
-  const AppInfo = useSelector((state: RootState) => state.AppInfo);
+const App: React.FC<AppInfo> = (props: AppInfo) => {
+  const dispatch = useDispatch();  
   const AppLayoutState = useSelector((state: RootState) => state.AppLayout);
   let themeOptions = { ...LightThemeOptions };
   if (AppLayoutState.themeMode === "dark") {
@@ -19,13 +20,16 @@ function App() {
     ...themeOptions,
   });
   useEffect(() => {
-    document.title = AppInfo.documentTitle;
+    document.title = props.documentTitle;
   }, []);
+  useEffect(() => {
+    dispatch(AppInfoActions.setAppInfo(props));
+  }, [props]);
   return (
     <ThemeProvider theme={theme}>
       <Layout />
     </ThemeProvider>
   );
-}
+};
 
 export default App;

package/src/components/BaseApp.tsx

@@ -12,17 +12,16 @@ LicenseInfo.setLicenseKey(
 );
 import "react-toastify/dist/ReactToastify.css";
 import App from "./App";
+import { AppInfo } from "../redux/features/common/AppInfoSlice";
 
 library.add(fab);
 library.add(far);
 library.add(fas);
 
-export type BaseAppProps = {};
-
-export const BaseApp: React.FC<BaseAppProps> = (props) => {
+export const BaseApp: React.FC<AppInfo> = (props) => {
   return (
     <Provider store={store}>
-      <App />
+      <App {...props} />
     </Provider>
   );
 };

package/src/styles/index.css

@@ -11,8 +11,7 @@ body {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  overflow: hidden;
-  background-color: aliceblue;
+  overflow: hidden;  
 }
 
 .red-row {