datastake-daf 0.6.587 → 0.6.588

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

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

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

@@ -1,173 +0,0 @@
-
-
-
-.auth-navbar {
-  width: 100%;
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #ffffff;
-  border-bottom: 1px solid #eaecf0;
-  padding: 0 80px;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-
-  @media (max-width: 1200px) {
-    padding: 0 32px;
-  }
-
-  .navbar-left {
-    display: flex;
-    align-items: center;
-
-    .navbar-logo {
-      height: 32px;
-      object-fit: contain;
-    }
-  }
-
-  .navbar-right {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-
-    .language-select {
-      min-width: 110px;
-
-      .ant-select-selector {
-        background: #fff !important;
-        border: 1px solid #d0d5dd !important;
-        border-radius: 8px !important;
-        padding: 8px 12px !important;
-        height: 40px !important;
-        display: flex;
-        align-items: center;
-        transition: all 0.2s ease;
-
-        &:hover {
-          border-color: #98a2b3 !important;
-        }
-      }
-
-      .ant-select-selection-item {
-        display: flex;
-        align-items: center;
-        padding-right: 0 !important;
-      }
-
-      .language-option {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        .flag-icon {
-          width: 20px;
-          height: 14px;
-          object-fit: cover;
-          border-radius: 2px;
-        }
-
-        span {
-          font-size: 14px;
-          font-weight: 500;
-          color: #344054;
-        }
-      }
-
-      .ant-select-arrow {
-        color: #667085;
-        right: 12px;
-        
-        
-        svg {
-          width: 20px;
-          height: 20px;
-        }
-      }
-    }
-
-    .back-btn {
-      border: 1px solid #d0d5dd;
-      background: #fff;
-      border-radius: 8px;
-      padding: 10px 16px;
-      height: 40px;
-      font-size: 14px;
-      font-weight: 600;
-      color: #344054;
-      cursor: pointer;
-      transition: all 0.2s ease;
-      white-space: nowrap;
-
-      &:hover {
-        background: #f9fafb;
-        border-color: #98a2b3;
-      }
-
-      &:active {
-        background: #f2f4f7;
-      }
-    }
-  }
-
-  @media (max-width: 768px) {
-    padding: 0 16px;
-    .navbar-logo { height: 28px; }
-    .navbar-right { gap: 8px; }
-  }
-}
-
-.language-select-popup {
-  .ant-select-dropdown {
-    padding: 4px;
-    background: #ffffff;
-    border-radius: 8px;
-    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
-                0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-    border: none !important;
-  }
-
-  .ant-select-item {
-    border-radius: 6px;
-    padding: 8px 12px;
-    min-height: 40px;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background-color: #265a80;
-
-      .language-option span {
-        color: #ffffff;
-      }
-    }
-
-    &.ant-select-item-option-selected {
-      background-color: #265a80;
-      color: #ffffff;
-
-      .language-option span {
-        color: #ffffff;
-      }
-    }
-
-    .language-option {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      .flag-icon {
-        width: 20px;
-        height: 14px;
-        border-radius: 2px;
-      }
-
-      span {
-        font-size: 14px;
-        font-weight: 500;
-        color: #344054;
-      }
-    }
-  }
-}

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

@@ -1,305 +0,0 @@
-import styled, { createGlobalStyle } from "styled-components";
-import { MOBILE_WIDTH, TABLET_WIDTH } from "datastake-daf/src/constants/Style";
-
-// Global styles for portaled elements (dropdowns, modals, etc.)
-export const GlobalNavbarStyles = createGlobalStyle`
-  .language-select-popup {
-    .ant-select-dropdown {
-      padding: 4px;
-      background: #ffffff;
-      border-radius: 8px;
-      box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
-                  0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-      border: none !important;
-    }
-
-    .ant-select-item {
-      border-radius: 6px;
-      padding: 8px 12px;
-      min-height: 40px;
-      transition: all 0.2s ease;
-
-      &:hover {
-        background-color: #265a80;
-
-        .language-option span {
-          color: #ffffff;
-        }
-      }
-
-      &.ant-select-item-option-selected {
-        background-color: #265a80;
-        color: #ffffff;
-
-        .language-option span {
-          color: #ffffff;
-        }
-      }
-
-      .language-option {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-
-        .flag-icon {
-          width: 20px;
-          height: 14px;
-          border-radius: 2px;
-        }
-
-        span {
-          font-size: 14px;
-          font-weight: 500;
-          color: #344054;
-        }
-      }
-    }
-  }
-`;
-
-const style = styled.div`
-  font-family: Outfit;
-
-  .btns {
-    display: flex;
-    gap: 12px;
-  }
-
-  .d-container {
-    width: 80vw;
-    margin-left: auto;
-    margin-right: auto;
-
-    @media (max-width: 1440px) {
-      width: 85vw;
-    }
-
-    @media (${TABLET_WIDTH}) {
-      width: calc(100vw - 4.6rem);
-    }
-  }
-
-  .flex-c {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .jus-c {
-    justify-content: center;
-  }
-
-  .d-navbar {
-    box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: white;
-    z-index: 1000;
-    width: 100%;
-    height: 80px;
-    display: flex;
-    align-items: center;
-
-    @media (${TABLET_WIDTH}) {
-      height: 72px;
-    }
-
-    @media (${MOBILE_WIDTH}) {
-      height: 64px;
-    }
-
-    .main-cont {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      height: 100%;
-      padding: 0 80px;
-
-      @media (max-width: 1200px) {
-        padding: 0 32px;
-      }
-
-      @media (${TABLET_WIDTH}) {
-        padding: 0 24px;
-      }
-
-      @media (${MOBILE_WIDTH}) {
-        padding: 0 16px;
-      }
-
-      .left {
-        display: flex;
-        align-items: center;
-        height: 100%;
-
-        .navbar-logo {
-          cursor: pointer;
-          height: 40px;
-          width: auto;
-          object-fit: contain;
-
-          @media (${MOBILE_WIDTH}) {
-            height: 32px;
-          }
-        }
-
-        img {
-          cursor: pointer;
-          height: 40px;
-          width: auto;
-          object-fit: contain;
-
-          @media (${MOBILE_WIDTH}) {
-            height: 32px;
-          }
-        }
-      }
-
-      .right {
-        display: flex;
-        gap: 1rem;
-        align-items: center;
-
-        .language-select {
-          min-width: 100px;
-
-          .ant-select-selector {
-            padding: 8px 12px !important;
-            height: auto !important;
-            border: none !important;
-
-            .ant-select-selection-item {
-              padding: 0 !important;
-              line-height: none !important;
-              &:hover{
-                background-color: transparent !important;
-              border: none !important;
-              }
-            }
-          }
-
-          .ant-select-arrow {
-            color: #667085;
-            display: flex;
-            align-items: center;
-            height: 80%;
-          }
-        }
-
-        .language-option {
-          display: flex;
-          align-items: center;
-          gap: 8px;
-
-          .flag-icon {
-            width: 20px;
-            height: 15px;
-            object-fit: cover;
-            border-radius: 2px;
-          }
-
-          span {
-            font-size: 14px;
-            font-weight: 500;
-            color: #344054;
-          }
-        }
-
-        .back-btn {
-          background: transparent;
-          border: 1px solid #D0D5DD;
-          border-radius: 8px;
-          padding: 8px 16px;
-          font-size: 14px;
-          font-weight: 500;
-          color: #344054;
-          cursor: pointer;
-          transition: all 0.2s ease;
-          box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-
-          &:hover {
-            background: #F9FAFB;
-            border-color: #98A2B3;
-          }
-
-          &:active {
-            transform: scale(0.98);
-          }
-        }
-
-        .ant-btn {
-          font-size: 14px;
-          padding: 6px 0;
-          text-align: center;
-          width: 70px;
-
-          @media (${MOBILE_WIDTH}) {
-            padding: 3px 0;
-          }
-        }
-
-        @media (max-width: 1070px) {
-          gap: 1rem;
-        }
-      }
-    }
-  }
-
-  &.bordered {
-    .d-navbar {
-      position: relative;
-      box-shadow: unset;
-      border-bottom: 1px solid var(--base-gray-40);
-    }
-  }
-
-  .tazama-extra {
-    &.mobile {
-      display: none;
-    }
-
-    @media (${MOBILE_WIDTH}) {
-      &.mobile {
-        display: flex;
-      }
-
-      &.desktop {
-        display: none;
-      }
-    }
-
-    .ant-btn {
-      width: 90px !important;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-
-      &.w-100 {
-        width: 100% !important;
-      }
-
-      span {
-        margin: 0 auto;
-      }
-    }
-
-    .nav-extra {
-      position: fixed;
-      top: 0;
-      left: 0;
-      height: 100dvh;
-      width: 100%;
-      background: white;
-      margin-left: -100%;
-      transition: 0.4s margin-left;
-
-      &.toggled {
-        margin-left: 0;
-      }
-    }
-  }
-`;
-
-export default style;

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

@@ -1,85 +0,0 @@
-import React from "react";
-import AuthNavbar from "./components/Navbar/index.jsx";
-import { formatClassname } from "../../../helpers/ClassesHelper.js";
-import Style from './style';
-
-const AuthLayout = ({
-  children,
-  StyleComponent,
-  t = (key) => key,
-  title = "Welcome Back",
-  subTitle = "Please introduce yourself",
-  logo,
-  appName = "default",
-  containerClassName = "",
-  leftClassName = "",
-  rightClassName = "",
-  rightImgClassName = "",
-  rightImageUrl,
-  additionalContent,
-  showTopHeader = true,
-  showLanguageSelector = true,
-  updateLanguage,
-  showBack = false,
-  onBack,
-  backLabel = "Back",
-}) => {
-  const Wrapper = StyleComponent || "div";
-  const wrapperClassName = formatClassname([
-    "auth-layout",
-    appName,
-    containerClassName,
-  ]);
-
-  return (
-
-  
-    <>
-      {showTopHeader && (
-        <AuthNavbar
-          logo={logo}
-          appName={appName}
-          showLanguageSelector={showLanguageSelector}
-          updateLanguage={updateLanguage}
-          showBack={showBack}
-          onBack={onBack}
-          backLabel={backLabel}
-        />
-      )}
-<Style>
-      <div className="main-cont">
-        <div className={formatClassname(["d-cont left", leftClassName])}>
-          <div className="main">
-            {logo && (
-              <div className="left-logo">
-                <img src={logo} alt={`${appName} logo`} />
-              </div>
-            )}
-            <div className="left-header">
-              {title && <h2>{t(title)}</h2>}
-              {subTitle && (
-                <p>{typeof subTitle === "string" ? t(subTitle) : subTitle}</p>
-              )}
-            </div>
-            {children}
-            {additionalContent}
-          </div>
-        </div>
-
-        <div
-          className={formatClassname(["d-cont right", rightClassName])}
-          style={
-            rightImageUrl
-              ? { backgroundImage: `url(${rightImageUrl})`, backgroundSize: "cover" }
-              : {}
-          }
-        >
-          <div className={formatClassname(["right-img", rightImgClassName])} />
-        </div>
-      </div>
-      </Style>
-    </>
-  );
-};
-
-export default AuthLayout;