datastake-daf 0.6.595 → 0.6.597

package/package.json

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

package/src/@daf/core/components/AuthForm/index.jsx

@@ -210,14 +210,14 @@ function AuthForm ({
                     );
                 }}
                 </Form.Item>
-                <div className="buttons" style={{ marginTop: '8px'}}>
+                <div className="buttons" style={{ marginTop: 0}}>
                     <BorderedButton onClick={prev} block className="normal-br">
                         {t("Back")}
                     </BorderedButton>
                 </div>
             </div>
         ) : (
-            <div className="buttons" style={{ marginTop: 0}}>
+            <div className="buttons" style={{ marginTop: isMultiStep ? '16px' : 0}}>
                 <BorderedButton type="primary" htmlType="submit" block className="normal-br">
                     {isMultiStep ? t("Next") : submitText}
                 </BorderedButton>

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

@@ -0,0 +1,502 @@
+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

@@ -0,0 +1,43 @@
+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',
+    },
+  ];
+  

package/src/@daf/layouts/AuthLayout/components/Navbar/index.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import { Select } from "antd";
+import { formatClassname } from "../../../../../helpers/ClassesHelper.js";
+import Style, { GlobalNavbarStyles } from './style';
+
+const AuthNavbar = ({
+  logo,
+  appName = "default",
+  showLanguageSelector = true,
+  updateLanguage,
+  languageConfig = [
+    { value: "en", label: "EN", flagUrl: "/assets/images/countries/gb.png" },
+    { value: "fr", label: "FR", flagUrl: "/assets/images/countries/fr.png" },
+    { value: "sp", label: "ES", flagUrl: "/assets/images/countries/sp.png" },
+  ],
+  showBack = false,
+  backLabel = "Back",
+  onBack,
+}) => {
+  return (
+    <>
+      <GlobalNavbarStyles />
+      <Style className={formatClassname([showBack && 'bordered'])}>
+        <div className="d-navbar">
+          <div className="main-cont d-container">
+            <div className="left">
+              {logo && (
+                <img className="navbar-logo" src={logo} alt={`${appName} logo`} />
+              )}
+            </div>
+
+            <div className="right">
+              {showLanguageSelector && updateLanguage && (
+                <Select
+                  className="language-select"
+                  defaultValue={localStorage.getItem("datastakeLng") || "en"}
+                  onChange={(lng) => updateLanguage(lng)}
+                  popupClassName={formatClassname([
+                    "language-select-popup",
+                    appName,
+                  ])}
+                  suffixIcon={
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M5 7.5L10 12.5L15 7.5" stroke="#667085" strokeWidth="1.66667" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                  }
+                >
+                  {languageConfig.map((lang) => (
+                    <Select.Option key={lang.value} value={lang.value}>
+                      <div className="language-option">
+                        <img
+                          src={lang.flagUrl}
+                          alt={lang.label}
+                          className="flag-icon"
+                        />
+                        <span>{lang.label}</span>
+                      </div>
+                    </Select.Option>
+                  ))}
+                </Select>
+              )}
+
+              {showBack && (
+                <button className="back-btn" onClick={onBack}>
+                  {backLabel}
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      </Style>
+    </>
+  );
+};
+
+export default AuthNavbar;