datastake-daf 0.6.596 → 0.6.598

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

@@ -0,0 +1,268 @@
+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: 30px;
+          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;
+          }
+        }
+
+        .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;
+      }
+    }
+
+    .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/components/Select/index.jsx

@@ -0,0 +1,146 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect, useMemo, useRef, useState } from "react"
+import { formatClassname } from '../../../../../helpers/ClassesHelper.js';
+import Style from "./style";
+
+function useOutsideAlerter({ ref, secondRef, onOutside = () => { } }) {
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (ref.current && !ref.current.contains(event.target)
+        && secondRef.current && !secondRef.current.contains(event.target)) {
+        onOutside();
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref]);
+}
+
+const Options = ({
+  values = [],
+  onChange = () => { },
+  value = '',
+  setToggled = () => { },
+  toggled = false,
+  secondRef = {},
+}) => {
+  const ref = useRef();
+  useOutsideAlerter({ ref, secondRef, onOutside: () => setToggled(false) });
+
+  return (
+    <div
+      className={formatClassname(['select-options', !toggled && 'not-toggled'])}
+      ref={ref}
+    >
+      {values.map((val) => (
+        <div
+          className={formatClassname(['value', val.value === value && 'active-value'])}
+          key={val.value}
+          onClick={() => onChange(val.value)}
+        >
+          {val.label}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+let timeout = null;
+
+export const Select = ({
+  bordered,
+  values = [],
+  defaultValue = '',
+  onChange = () => { },
+}) => {
+  const ref = useRef();
+  const [value, setValue] = useState(defaultValue);
+  const [toggled, setToggled] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  const valueLabel = useMemo(() => {
+    if (value === 'en') {
+      return (
+        <div className="country-cont flex-r">
+          <div className="flex-c jus-c">
+            <img src="/assets/images/countries/gb.png" alt="" />
+          </div>
+          <div className="flex-c jus-c">
+            <span>EN</span>
+          </div>
+        </div>
+      );
+    }
+
+    if (value === 'sp') {
+      return (
+        <div className="country-cont flex-r">
+          <div className="flex-c jus-c">
+            <img src="/assets/images/countries/sp.png" alt="" />
+          </div>
+          <div className="flex-c jus-c">
+            <span>ES</span>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="country-cont flex-r">
+        <div className="flex-c jus-c">
+          <img src="/assets/images/countries/fr.png" alt="" />
+        </div>
+        <div className="flex-c jus-c">
+          <span>FR</span>
+        </div>
+      </div>
+    );
+  }, [values, value]);
+
+  useEffect(() => {
+    if (toggled) {
+      setVisible(true);
+    } else {
+      timeout = setTimeout(() => setVisible(false), 300);
+    }
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+    }
+  }, [toggled]);
+
+  return (
+    <Style>
+      <div
+        className={formatClassname(['select-navbar', bordered && 'bordered'])}
+        onClick={() => setToggled((p) => !p)}
+        ref={ref}
+      >
+        <div>{valueLabel}</div>
+      </div>
+      {visible && (
+        <Options
+          value={value}
+          secondRef={ref}
+          values={values}
+          toggled={toggled}
+          onChange={(val) => {
+            setValue(val);
+            setToggled(false);
+            onChange(val);
+          }}
+          setToggled={setToggled}
+        />
+      )}
+    </Style>
+  );
+}

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

@@ -0,0 +1,122 @@
+import styled from "styled-components";
+import { MOBILE_WIDTH, TABLET_WIDTH } from "datastake-daf/src/constants/Style";
+
+const Style = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+
+  .flex-r {
+    display: flex;
+  }
+
+  .flex-c {
+    display: flex;
+    flex-direction: column;
+
+    img {
+        border-radius: 50%;
+        margin-top: -2px;
+    }
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .select-navbar {
+    padding: 0 .75rem;
+
+    div {
+      width: 4.625rem;
+      user-select: none;
+      font-size: .875rem;
+      font-weight: 500;
+      text-align: center;
+      color: #193E61; 
+      cursor: pointer;
+    }
+
+    .country-cont {
+      justify-content: center;
+      gap: 0.6rem;
+
+      .flex-c {
+        width: fit-content;
+      }
+
+      img {
+        width: 18px;
+        height: 18px;
+      }
+
+      span {
+        color: $gray-100;
+        font-size: 14px;
+      }
+    }
+
+    &.bordered {
+      .country-cont {
+        img {
+          width: 14px;
+          height: 14px;
+          border-radius: 100%;
+        }
+      }
+    }
+  }
+
+  .select-options {
+    position: absolute;
+    width: 100%;
+    top: 55px;
+    left: 0;
+    background-color: white;
+    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);
+    padding: .75rem 0;
+    z-index: 100;
+    animation: .3s fade forwards;
+
+    &.not-toggled {
+      animation: .3s fadeOut forwards;
+    }
+
+    @media (${TABLET_WIDTH}) {
+      top: 50px;
+    }
+
+    @media (${MOBILE_WIDTH}) {
+      top: 3.5rem;
+    }
+
+    .value {
+      padding: .75rem 0rem;
+      margin: 0 .75rem;
+      text-align: center;
+      font-size: 1rem;
+      font-weight: 500;
+      cursor: pointer;
+      user-select: none;
+
+      &.active-value {
+        background-color: #265A80;
+        color: white;
+      }
+    }
+  }
+
+  @keyframes fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+  }
+
+  @keyframes fadeOut {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+  }
+`;
+
+export default Style;

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

@@ -0,0 +1,87 @@
+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",
+  defaultValue = "en",
+}) => {
+  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}
+          defaultValue={defaultValue}
+        />
+      )}
+    <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;