datastake-daf 0.6.587 → 0.6.588

package/dist/style/datastake/datastake.css

@@ -1508,7 +1508,7 @@ ul.ant-menu.ant-menu-dark.ant-menu-root.ant-menu-vertical::-webkit-scrollbar-thu
 
 .components-layout .sidenav-cont .menus-cont .sidemenu-cont .ant-menu-submenu,
 .components-layout .sidenav-cont .menus-cont .sidemenu-cont .ant-menu-item {
-  color: white;
+  color: var(--custom-sidenav-text-color, white) !important;
 }
 
 .components-layout.nested

package/dist/utils/index.js

@@ -13992,15 +13992,36 @@ const createTheme = (overrides = {}) => {
     ...overrides
   };
 };
+
+/**
+ * Creates an admin theme by merging base theme with app theme and overrides
+ * @param {Object} params - Parameters object
+ * @param {Object} params.appTheme - App-specific theme overrides
+ * @param {Object} params.overrides - Additional theme overrides
+ * @param {string[]} params.keysToRemove - Array of keys to remove from the final theme
+ * @returns {Object} - Merged theme object with specified keys removed
+ * 
+ * @example
+ * // Create admin theme without specific color keys
+ * const myTheme = createAdminTheme({
+ *   appTheme: { colorPrimary: '#FF0000' },
+ *   keysToRemove: ['red1', 'red2', 'red3']
+ * });
+ */
 const createAdminTheme = ({
   appTheme = {},
   overrides = {}
 }) => {
-  return {
+  const mergedTheme = {
     ...baseTheme,
     ...appTheme,
     ...overrides
   };
+  const keysToRemove = ['customSidenavColor', 'customSidenavSubMenuColor', 'customSidenavHoverColor', 'customSidenavSubsectionHover', 'customCollapsedSidenavHoverColor', 'customSidenavDisabledMenuItemColor', 'customSidenavTextColor', 'nestedSidenavColor', 'nestedSidenavSubMenuColor', 'nestedSidenavHoverColor', 'nestedCollapsedSidenavHoverColor', 'nestedSidenavDisabledMenuItemColor', 'nestedSidenavSubmenuBgColor', 'customHeaderColor'];
+  keysToRemove.forEach(key => {
+    delete mergedTheme[key];
+  });
+  return mergedTheme;
 };
 
 const getRedirectLink = (link, APP) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.587",
+	"version": "0.6.588",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/layouts/AppLayout/components/Notifications/index.js

@@ -54,7 +54,7 @@ export default function Notifications({
   return (
     <NotificationsStyle className={appName}>
       <div className="notis-title">
-        <h3>{t('sbg::notification')}</h3>
+        <h3>{t('Notification')}</h3>
         <Dropdown
           menu={{ items }}
           trigger="click"

package/src/@daf/utils/theme.js

@@ -55,6 +55,7 @@ export const mapTheme = (theme = {}) => ({
   '--custom-sidenav-subsection-hover':theme.customSidenavSubsectionHover,
   '--custom-collapsed-sidenav-hover-color':theme.customCollapsedSidenavHoverColor,
   '--custom-sidenav-disabled-menu-item-color':theme.customSidenavDisabledMenuItemColor,
+  '--custom-sidenav-text-color':theme.customSidenavTextColor,
 
   '--nested-sidenav-color':theme.nestedSidenavColor,
   '--nested-sidenav-submenu-color':theme.nestedSidenavSubMenuColor,

package/src/helpers/theme.js

@@ -295,10 +295,38 @@ export const createTheme = (overrides = {}) => {
     };
 };
 
+/**
+ * Creates an admin theme by merging base theme with app theme and overrides
+ * @param {Object} params - Parameters object
+ * @param {Object} params.appTheme - App-specific theme overrides
+ * @param {Object} params.overrides - Additional theme overrides
+ * @param {string[]} params.keysToRemove - Array of keys to remove from the final theme
+ * @returns {Object} - Merged theme object with specified keys removed
+ * 
+ * @example
+ * // Create admin theme without specific color keys
+ * const myTheme = createAdminTheme({
+ *   appTheme: { colorPrimary: '#FF0000' },
+ *   keysToRemove: ['red1', 'red2', 'red3']
+ * });
+ */
 export const createAdminTheme = ({appTheme = {}, overrides = {}}) => {
-    return {
+    const mergedTheme = {
         ...baseTheme,
         ...appTheme,
         ...overrides,
     };
+
+    const keysToRemove = ['customSidenavColor', 'customSidenavSubMenuColor', 'customSidenavHoverColor',
+        'customSidenavSubsectionHover', 'customCollapsedSidenavHoverColor', 'customSidenavDisabledMenuItemColor',
+        'customSidenavTextColor', 'nestedSidenavColor', 'nestedSidenavSubMenuColor', 'nestedSidenavHoverColor',
+        'nestedCollapsedSidenavHoverColor', 'nestedSidenavDisabledMenuItemColor', 'nestedSidenavSubmenuBgColor',
+        'customHeaderColor'
+    ];
+
+    keysToRemove.forEach(key => {
+        delete mergedTheme[key];
+    });
+
+    return mergedTheme;
 }

package/src/layouts.js

@@ -1,2 +1 @@
-export { default as AppLayout } from './@daf/layouts/AppLayout/index.jsx';
-export { default as AuthLayout } from './@daf/layouts/AuthLayout/index.jsx';
+export { default as AppLayout } from './@daf/layouts/AppLayout/index.jsx';

package/src/styles/datastake/datastake.css

@@ -1508,7 +1508,7 @@ ul.ant-menu.ant-menu-dark.ant-menu-root.ant-menu-vertical::-webkit-scrollbar-thu
 
 .components-layout .sidenav-cont .menus-cont .sidemenu-cont .ant-menu-submenu,
 .components-layout .sidenav-cont .menus-cont .sidemenu-cont .ant-menu-item {
-  color: white;
+  color: var(--custom-sidenav-text-color, white) !important;
 }
 
 .components-layout.nested

package/src/@daf/layouts/AuthLayout/AuthLayout.stories.js

@@ -1,502 +0,0 @@
-import React from "react";
-import AuthLayout from "./index.jsx";
-import ThemeLayout from "../../core/components/ThemeLayout/index.jsx";
-
-// Mock translation function
-const mockT = (key) => {
-  const translations = {
-    "Welcome Back": "Welcome Back",
-    "Please introduce yourself": "Please introduce yourself",
-    "Sign In": "Sign In",
-    "Enter your credentials to access your account": "Enter your credentials to access your account",
-    "Create Account": "Create Account",
-    "Join us today and start your journey": "Join us today and start your journey",
-    "Reset Password": "Reset Password",
-    "Enter your email to reset your password": "Enter your email to reset your password",
-    "Back": "Back",
-    "Email": "Email",
-    "Password": "Password",
-    "Remember me": "Remember me",
-    "Forgot password?": "Forgot password?",
-    "Log in": "Log in",
-    "Don't have an account?": "Don't have an account?",
-    "Sign up": "Sign up",
-  };
-  return translations[key] || key;
-};
-
-// Mock form content
-const LoginForm = () => (
-  <div style={{ width: "100%", maxWidth: "400px" }}>
-    <div style={{ marginBottom: "20px" }}>
-      <label style={{ display: "block", marginBottom: "8px", fontSize: "14px", fontWeight: "500" }}>
-        Email
-      </label>
-      <input
-        type="email"
-        placeholder="Enter your email"
-        required
-        style={{
-          width: "100%",
-          padding: "12px",
-          border: "1px solid #ddd",
-          borderRadius: "8px",
-          fontSize: "14px"
-        }}
-      />
-    </div>
-    <div style={{ marginBottom: "20px" }}>
-      <label style={{ display: "block", marginBottom: "8px", fontSize: "14px", fontWeight: "500" }}>
-        Password
-      </label>
-      <input
-        type="password"
-        required
-        placeholder="Enter your password"
-        style={{
-          width: "100%",
-          padding: "12px",
-          border: "1px solid #ddd",
-          borderRadius: "8px",
-          fontSize: "14px"
-        }}
-      />
-    </div>
-    <div style={{ 
-      display: "flex", 
-      justifyContent: "space-between", 
-      alignItems: "center",
-      marginBottom: "24px" 
-    }}>
-      <label style={{ display: "flex", alignItems: "center", fontSize: "14px" }}>
-        <input type="checkbox" style={{ marginRight: "8px" }} />
-        Remember me
-      </label>
-      <a href="#" style={{ fontSize: "14px", color: "#4F46E5", textDecoration: "none" }}>
-        Forgot password?
-      </a>
-    </div>
-    <button
-      style={{
-        width: "100%",
-        padding: "12px",
-        backgroundColor: "#3D8EDB",
-        color: "white",
-        border: "none",
-        borderRadius: "8px",
-        fontSize: "16px",
-        fontWeight: "600",
-        cursor: "pointer"
-      }}
-      onClick={() => console.log("Login clicked")}
-    >
-      Log in
-    </button>
-    <p style={{ 
-      textAlign: "center", 
-      marginTop: "24px", 
-      fontSize: "14px",
-      color: "#6B7280" 
-    }}>
-
-      {/* <a href="#" style={{ color: "#4F46E5", textDecoration: "none", fontWeight: "600" }}>
-        Sign up
-      </a> */}
-    </p>
-  </div>
-);
-
-const SignupForm = () => (
-  <div style={{ width: "100%", maxWidth: "400px" }}>
-    <div style={{ marginBottom: "20px" }}>
-      <label style={{ display: "block", marginBottom: "8px", fontSize: "14px", fontWeight: "500" }}>
-        Full Name
-      </label>
-      <input
-        type="text"
-        placeholder="Enter your full name"
-        style={{
-          width: "100%",
-          padding: "12px",
-          border: "1px solid #ddd",
-          borderRadius: "8px",
-          fontSize: "14px"
-        }}
-      />
-    </div>
-    <div style={{ marginBottom: "20px" }}>
-      <label style={{ display: "block", marginBottom: "8px", fontSize: "14px", fontWeight: "500" }}>
-        Email
-      </label>
-      <input
-        type="email"
-        placeholder="Enter your email"
-        style={{
-          width: "100%",
-          padding: "12px",
-          border: "1px solid #ddd",
-          borderRadius: "8px",
-          fontSize: "14px"
-        }}
-      />
-    </div>
-    <div style={{ marginBottom: "20px" }}>
-      <label style={{ display: "block", marginBottom: "8px", fontSize: "14px", fontWeight: "500" }}>
-        Password
-      </label>
-      <input
-        type="password"
-        placeholder="Create a password"
-        style={{
-          width: "100%",
-          padding: "12px",
-          border: "1px solid #ddd",
-          borderRadius: "8px",
-          fontSize: "14px"
-        }}
-      />
-    </div>
-    <div style={{ marginBottom: "24px" }}>
-      <label style={{ display: "flex", alignItems: "center", fontSize: "14px" }}>
-        <input type="checkbox" style={{ marginRight: "8px" }} />
-        I agree to the Terms and Conditions
-      </label>
-    </div>
-    <button
-      style={{
-        width: "100%",
-        padding: "12px",
-        backgroundColor: "#3D8EDB",
-        color: "white",
-        border: "none",
-        borderRadius: "8px",
-        fontSize: "16px",
-        fontWeight: "600",
-        cursor: "pointer"
-      }}
-      onClick={() => console.log("Sign up clicked")}
-    >
-      Create Account
-    </button>
-    <p style={{ 
-      textAlign: "center", 
-      marginTop: "24px", 
-      fontSize: "14px",
-      color: "#6B7280" 
-    }}>
-      Already have an account?{" "}
-      <a href="#" style={{ color: "#4F46E5", textDecoration: "none", fontWeight: "600" }}>
-        Log in
-      </a>
-    </p>
-  </div>
-);
-
-export default {
-  title: "Layouts/AuthLayout",
-  component: AuthLayout,
-  tags: ["autodocs"],
-  decorators: [
-    (Story) => (
-      <ThemeLayout>
-        <div style={{ width: "100vw", height: "100vh" }}>
-          <Story />
-        </div>
-      </ThemeLayout>
-    ),
-  ],
-  argTypes: {
-    title: {
-      control: "text",
-      description: "Main title of the auth page",
-    },
-    subTitle: {
-      control: "text",
-      description: "Subtitle or description text",
-    },
-    appName: {
-      control: "select",
-      options: ["default", "sbg", "tif", "mmt", "tazama"],
-      description: "Application name for theming",
-    },
-    showTopHeader: {
-      control: "boolean",
-      description: "Show or hide the top navigation bar",
-    },
-    showLanguageSelector: {
-      control: "boolean",
-      description: "Show or hide the language selector",
-    },
-    showBack: {
-      control: "boolean",
-      description: "Show or hide the back button",
-    },
-    backLabel: {
-      control: "text",
-      description: "Label for the back button",
-    }
-  }
-};
-
-// Default Login Story
-export const Default = {
-  name: "Login Page",
-  args: {
-    title: "Welcome Back",
-    subTitle: "Please introduce yourself",
-    appName: "default",
-    showTopHeader: true,
-    showLanguageSelector: true,
-    showBack: false,
-    backLabel: "Back",
-  },
-  render: (args) => (
-    <AuthLayout
-      t={mockT}
-      title={args.title}
-      subTitle={args.subTitle}
-      logo="/assets/images/datastake-logo.svg"
-      appName={args.appName}
-      rightImageUrl="/assets/images/tif-bg.png"
-      showTopHeader={args.showTopHeader}
-      showLanguageSelector={args.showLanguageSelector}
-      updateLanguage={(lng) => console.log("Language changed to:", lng)}
-      showBack={args.showBack}
-      onBack={() => console.log("Back clicked")}
-      backLabel={args.backLabel}
-    >
-      <LoginForm />
-    </AuthLayout>
-  ),
-};
-
-// Sign Up Story
-export const SignUp = {
-  name: "Sign Up Page",
-  render: () => (
-    <AuthLayout
-      t={mockT}
-      title="Create Account"
-      subTitle="Join us today and start your journey"
-      logo="/assets/images/datastake-logo.svg"
-      appName="default"
-      rightImageUrl="/assets/images/auth-bg-2.svg"
-      showTopHeader={true}
-      showLanguageSelector={true}
-      updateLanguage={(lng) => console.log("Language changed to:", lng)}
-    >
-      <SignupForm />
-    </AuthLayout>
-  ),
-};
-
-// With Back Button
-export const WithBackButton = {
-  name: "With Back Button",
-  render: () => (
-    <AuthLayout
-      t={mockT}
-      title="Reset Password"
-      subTitle="Enter your email to reset your password"
-      logo="/assets/images/datastake-logo.svg"
-      appName="default"
-      rightImageUrl="/assets/images/tif-bg.png"
-      showTopHeader={true}
-      showLanguageSelector={false}
-      showBack={true}
-      onBack={() => console.log("Back clicked")}
-      backLabel="Back"
-    >
-      <div style={{ width: "100%", maxWidth: "400px" }}>
-        <div style={{ marginBottom: "20px" }}>
-          <label style={{ display: "block", marginBottom: "8px", fontSize: "14px", fontWeight: "500" }}>
-            Email
-          </label>
-          <input
-            type="email"
-            placeholder="Enter your email"
-            style={{
-              width: "100%",
-              padding: "12px",
-              border: "1px solid #ddd",
-              borderRadius: "8px",
-              fontSize: "14px"
-            }}
-          />
-        </div>
-        <button
-          style={{
-            width: "100%",
-            padding: "12px",
-            backgroundColor: "#4F46E5",
-            color: "white",
-            border: "none",
-            borderRadius: "8px",
-            fontSize: "16px",
-            fontWeight: "600",
-            cursor: "pointer"
-          }}
-          onClick={() => console.log("Reset clicked")}
-        >
-          Send Reset Link
-        </button>
-      </div>
-    </AuthLayout>
-  ),
-};
-
-// No Header
-export const NoHeader = {
-  name: "Without Top Header",
-  render: () => (
-    <AuthLayout
-      t={mockT}
-      title="Sign In"
-      subTitle="Enter your credentials to access your account"
-      logo="/assets/images/datastake-logo.svg"
-      appName="default"
-      rightImageUrl="/assets/images/auth-bg.svg"
-      showTopHeader={false}
-      showLanguageSelector={false}
-    >
-      <LoginForm />
-    </AuthLayout>
-  ),
-};
-
-// SBG Theme
-export const SBGTheme = {
-  name: "SBG Theme",
-  render: () => (
-    <AuthLayout
-      t={mockT}
-      title="Welcome to SBG"
-      subTitle="Sustainable Business Growth Platform"
-      logo="/assets/sbg-images/sbg-logo.svg"
-      appName="sbg"
-      rightImageUrl="/assets/images/auth-bg.svg"
-      showTopHeader={true}
-      showLanguageSelector={true}
-      updateLanguage={(lng) => console.log("Language changed to:", lng)}
-    >
-      <LoginForm />
-    </AuthLayout>
-  ),
-};
-
-// TIF Theme
-export const TIFTheme = {
-  name: "TIF Theme",
-  render: () => (
-    <AuthLayout
-      t={mockT}
-      title="Welcome to TIF"
-      subTitle="Transparency & Information Framework"
-      logo="/assets/images/tif-logo.svg"
-      appName="tif"
-      rightImageUrl="/assets/images/tif-bg.png"
-      showTopHeader={true}
-      showLanguageSelector={true}
-      updateLanguage={(lng) => console.log("Language changed to:", lng)}
-    >
-      <LoginForm />
-    </AuthLayout>
-  ),
-};
-
-// With Additional Content
-export const WithAdditionalContent = {
-  name: "With Additional Content",
-  render: () => (
-    <AuthLayout
-      t={mockT}
-      title="Welcome Back"
-      subTitle="Please introduce yourself"
-      logo="/assets/images/datastake-logo.svg"
-      appName="default"
-      rightImageUrl="/assets/images/auth-bg.svg"
-      showTopHeader={true}
-      showLanguageSelector={true}
-      updateLanguage={(lng) => console.log("Language changed to:", lng)}
-      additionalContent={
-        <div style={{ 
-          marginTop: "32px", 
-          padding: "16px", 
-          backgroundColor: "#F3F4F6", 
-          borderRadius: "8px",
-          textAlign: "center"
-        }}>
-          <p style={{ fontSize: "14px", color: "#6B7280", margin: 0 }}>
-            Need help? <a href="#" style={{ color: "#4F46E5", textDecoration: "none" }}>Contact Support</a>
-          </p>
-        </div>
-      }
-    >
-      <LoginForm />
-    </AuthLayout>
-  ),
-};
-
-// Custom Right Image
-export const CustomRightImage = {
-  name: "Custom Right Background",
-  render: () => (
-    <AuthLayout
-      t={mockT}
-      title="Welcome"
-      subTitle="Access your dashboard"
-      logo="/assets/images/datastake-logo.svg"
-      appName="default"
-      rightImageUrl="/assets/images/kota-bg.jpg"
-      showTopHeader={true}
-      showLanguageSelector={true}
-      updateLanguage={(lng) => console.log("Language changed to:", lng)}
-    >
-      <LoginForm />
-    </AuthLayout>
-  ),
-};
-
-// Minimal Setup
-export const Minimal = {
-  name: "Minimal Setup",
-  render: () => (
-    <AuthLayout
-      t={mockT}
-      title="Sign In"
-      logo="/assets/images/datastake-logo.svg"
-      appName="default"
-      showTopHeader={false}
-    >
-      <LoginForm />
-    </AuthLayout>
-  ),
-};
-
-// With JSX Subtitle
-export const WithJSXSubtitle = {
-  name: "With JSX Subtitle",
-  render: () => (
-    <AuthLayout
-      t={mockT}
-      title="Welcome Back"
-      subTitle={
-        <span>
-          New here?{" "}
-          <a href="#" style={{ color: "#4F46E5", textDecoration: "none", fontWeight: "600" }}>
-            Create an account
-          </a>
-        </span>
-      }
-      logo="/assets/images/datastake-logo.svg"
-      appName="default"
-      rightImageUrl="/assets/images/auth-bg.svg"
-      showTopHeader={true}
-      showLanguageSelector={true}
-      updateLanguage={(lng) => console.log("Language changed to:", lng)}
-    >
-      <LoginForm />
-    </AuthLayout>
-  ),
-};
-

package/src/@daf/layouts/AuthLayout/components/Navbar/config.js

@@ -1,43 +0,0 @@
-export const navItems = [
-    {
-      key: 'home',
-      route: '',
-      label: 'Home',
-    },
-    {
-      key: 'about',
-      route: 'about',
-      label: 'About',
-    },
-    {
-      key: 'platform',
-      route: 'platform',
-      label: 'Platform',
-    },
-    {
-      key: 'applications',
-      route: 'applications',
-      label: 'Applications',
-    },
-    {
-      key: 'buzz',
-      route: 'buzz',
-      label: 'Buzz',
-    },
-  ];
-  
-  export const languages = [
-    {
-      value: 'en',
-      label: '🇬🇧 EN',
-    },
-    {
-      value: 'fr',
-      label: '🇫🇷 FR',
-    },
-    {
-      value: 'sp',
-      label: '🇪🇸 ES',
-    },
-  ];
-