datastake-daf 0.6.573 → 0.6.574

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: "#4F46E5",
-        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: "#4F46E5",
-        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 to Login"
-    >
-      <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/NavbarComponent.jsx

@@ -1,69 +0,0 @@
-import React from "react";
-import { Select } from "antd";
-import { formatClassname } from "../../../../helpers/ClassesHelper.js";
-import "./index.scss";
-
-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 (
-    <div className="auth-navbar">
-      <div className="navbar-left">
-        {logo && (
-          <img className="navbar-logo" src={logo} alt={`${appName} logo`} />
-        )}
-      </div>
-
-      <div className="navbar-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>
-  );
-};
-
-export default AuthNavbar;