@sikka/hawa 0.1.87 → 0.1.89

package/dist/styles.css

@@ -1099,6 +1099,9 @@ video {
 .h-14 {
   height: 3.5rem;
 }
+.h-16 {
+  height: 4rem;
+}
 .h-2 {
   height: 0.5rem;
 }
@@ -1255,6 +1258,9 @@ video {
 .w-14 {
   width: 3.5rem;
 }
+.w-16 {
+  width: 4rem;
+}
 .w-2 {
   width: 0.5rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.1.87",
+  "version": "0.1.89",
   "description": "Modern UI Kit made with Tailwind & Radix Primitives",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/blocks/AuthForms/CheckEmail.tsx

@@ -0,0 +1,54 @@
+import React, { useState, FC } from "react"
+import { HawaAlert, HawaPinInput } from "../../elements"
+import { Card, CardContent, CardFooter } from "../../elements/Card"
+import { Button } from "../../elements/Button"
+
+type CheckEmailBlocks = {
+  texts?: {
+    checkEmail: string
+    resendEmail: string
+    pleaseVerify: string
+  }
+  handleResend?: () => void
+}
+
+export const CheckEmail: FC<CheckEmailBlocks> = ({ texts, handleResend }) => {
+  return (
+    <Card>
+      <CardContent headless>
+        <div className="flex flex-col items-center justify-center text-center">
+          <div className="flex h-16 w-16 flex-col items-center justify-center rounded-3xl bg-primary text-6xl font-bold  text-primary-foreground">
+            <svg
+              stroke="currentColor"
+              fill="none"
+              stroke-width="2"
+              viewBox="0 0 24 24"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              height="0.5em"
+              width="0.5em"
+              xmlns="http://www.w3.org/2000/svg"
+              // {...props}
+            >
+              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+              <polyline points="22,6 12,13 2,6"></polyline>
+            </svg>
+          </div>
+          <div className="m-2 text-xl font-bold">
+            {texts?.checkEmail ?? "Check you email"}
+          </div>
+
+          <div className="text-sm">
+            {texts?.pleaseVerify ??
+              "Thank you for signing up! To complete your registration, we've sent a verification email to the address you provided. Please check your inbox and follow the instructions in the email to activate your account."}
+          </div>
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-col justify-center ">
+        <span className="clickable-link text-sm" onClick={handleResend}>
+          {texts?.resendEmail ?? "Resend Email"}
+        </span>
+      </CardFooter>
+    </Card>
+  )
+}

package/src/blocks/AuthForms/ResetPasswordForm.tsx

@@ -15,7 +15,7 @@ type ResetPasswordType = {
   handleResetPassword: () => void
   handleRouteToSignUp: () => void
   sent: any
-  texts: {
+  texts?: {
     emailLabel: string
     emailPlaceholder: string
     emailRequiredText: string
@@ -54,42 +54,42 @@ export const ResetPasswordForm: FC<ResetPasswordType> = (props) => {
                   <HawaTextField
                     width="full"
                     type="text"
-                    label={props.texts.emailLabel}
+                    label={props.texts?.emailLabel}
                     helpertext={errors.email?.message}
-                    placeholder={props.texts.emailPlaceholder}
+                    placeholder={props.texts?.emailPlaceholder}
                     {...field}
                     value={field.value ?? ""}
                   />
                 )}
                 rules={{
-                  required: props.texts.emailRequiredText,
+                  required: props.texts?.emailRequiredText,
                   pattern: {
                     value:
                       /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-                    message: props.texts.emailInvalidText,
+                    message: props.texts?.emailInvalidText,
                   },
                 }}
               />
               <div className=" pb-2 text-left text-sm dark:text-gray-300">
-                {props.texts.dontHaveAccount ?? "Don't have an account? "}
+                {props.texts?.dontHaveAccount ?? "Don't have an account? "}
                 <span
                   onClick={props.handleRouteToSignUp}
                   className="clickable-link"
                 >
-                  {props.texts.signUpText ?? "Sign Up"}
+                  {props.texts?.signUpText ?? "Sign Up"}
                 </span>
               </div>
             </CardContent>
             <CardFooter>
               <Button type="submit" className="w-full">
-                {props.texts.resetPassword}
+                {props.texts?.resetPassword}
               </Button>
             </CardFooter>
           </form>
         </>
       ) : (
         <CardContent headless>
-          <div className="text-center">{props.texts.emailSentText}</div>
+          <div className="text-center">{props.texts?.emailSentText}</div>
         </CardContent>
       )}
     </Card>

package/src/blocks/AuthForms/index.ts

@@ -6,3 +6,4 @@ export * from "./SignUpForm"
 export * from "./NewPasswordForm"
 export * from "./ResetPasswordForm"
 export * from "./CodeConfirmation"
+export * from "./CheckEmail"

package/src/blocks/Misc/NoPermission.tsx

@@ -2,17 +2,13 @@ import React, { FC } from "react"
 import { Card, CardContent } from "../../elements/Card"
 
 type TNoPermission = {
-  variant?: "outlined" | "contained" | "neobrutalism"
   texts?: {
     title: string
     subtitle: string
   }
 }
 
-export const NoPermission: FC<TNoPermission> = ({
-  variant = "contained",
-  texts,
-}) => {
+export const NoPermission: FC<TNoPermission> = ({ texts }) => {
   return (
     <Card>
       <CardContent headless>

package/src/elements/HawaAdCard.tsx

@@ -1,14 +1,40 @@
 import clsx from "clsx"
-import React, { FC } from "react"
+import React, { FC, useState, useEffect, useRef } from "react"
 
 type AdCardTypes = {
   orientation: "vertical" | "horizontal"
   title: string
   description: string
   imageURL: string
-  handleHide: any
+  handleHide?: any
+  handleCantHide?: () => void
+  canHide: boolean
 }
 export const HawaAdCard: FC<AdCardTypes> = ({ orientation, ...props }) => {
+  const adRef = useRef(null)
+  const [closed, setClosed] = useState(false)
+
+  let duration = 0
+
+  useEffect(() => {
+    if (duration) {
+      //To change opacity and hide the component
+      const timeoutHide = setTimeout(() => {
+        setClosed(true)
+      }, duration)
+      //To destroy the component after hiding it
+      const timeoutDestroy = setTimeout(() => {
+        setClosed(true)
+        adRef.current.removeChild(adRef.current.children[0])
+      }, duration + 1000)
+
+      return () => {
+        clearTimeout(timeoutHide)
+        clearTimeout(timeoutDestroy)
+      }
+    }
+  }, [duration])
+
   let cardStyles = {
     horizontal:
       "flex flex-row  max-w-xl rounded border-gray-200 bg-gray-100 shadow-md p-2 gap-2 items-center relative  dark:border-gray-700 dark:bg-gray-800 ",
@@ -22,28 +48,40 @@ export const HawaAdCard: FC<AdCardTypes> = ({ orientation, ...props }) => {
   }
 
   return (
-    <div
-      className={clsx(cardStyles[orientation], "dark:text-white")}
-      {...props}
-    >
-      <div className="flex aspect-square w-full  max-w-fit  items-start ">
-        <img
-          src={
-            props.imageURL ? props.imageURL : "https://via.placeholder.com/50"
-          }
-          className={imageStyles[orientation]}
-        />
-      </div>
-      <div className="w-full text-xs">
-        <div className="font-bold">{props.title}</div>
-        <div className="text-[12px]">{props.description}</div>
-      </div>
-      <span
-        onClick={props.handleHide}
-        className="absolute right-0 top-0 h-fit cursor-pointer select-none rounded-bl-lg rounded-tr-lg bg-blue-100 px-2.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
+    <div ref={adRef}>
+      <div
+        className={clsx(cardStyles[orientation], "dark:text-white")}
+        {...props}
       >
-        Hide
-      </span>
+        <div className="flex aspect-square w-full  max-w-fit  items-start ">
+          <img
+            src={
+              props.imageURL ? props.imageURL : "https://via.placeholder.com/50"
+            }
+            className={imageStyles[orientation]}
+          />
+        </div>
+        <div className="w-full text-xs">
+          <div className="font-bold">{props.title}</div>
+          <div className="text-[12px]">{props.description}</div>
+        </div>
+        <span
+          // onClick={props.handleHide}
+          onClick={() => {
+            if (props.canHide) {
+              setClosed(true)
+              setTimeout(() => {
+                adRef.current.removeChild(adRef.current.children[0])
+              }, 200)
+            } else {
+              props.handleCantHide()
+            }
+          }}
+          className="absolute right-0 top-0 h-fit cursor-pointer select-none rounded-bl-lg rounded-tr-lg bg-blue-100 px-2.5 py-0.5 text-[10px] font-semibold text-blue-800 dark:bg-blue-200 dark:text-blue-800"
+        >
+          Hide
+        </span>
+      </div>
     </div>
   )
 }

package/src/styles.css

@@ -1099,6 +1099,9 @@ video {
 .h-14 {
   height: 3.5rem;
 }
+.h-16 {
+  height: 4rem;
+}
 .h-2 {
   height: 0.5rem;
 }
@@ -1255,6 +1258,9 @@ video {
 .w-14 {
   width: 3.5rem;
 }
+.w-16 {
+  width: 4rem;
+}
 .w-2 {
   width: 0.5rem;
 }

package/src/translations/ar.json

@@ -43,5 +43,8 @@
   "password": "كلمة المرور",
   "settings": "الإعدادات",
   "display": "المظهر",
-  "option": "خيار"
+  "option": "خيار",
+  "checkEmail": "تحقق من بريدك الإلكتروني",
+  "resendEmail": "إعادة إرسال البريد الإلكتروني",
+  "pleaseVerify": "شكرًا لتسجيلك! لإتمام عملية التسجيل، قمنا بإرسال بريد إلكتروني للتحقق إلى العنوان الذي قدمته. يُرجى التحقق من صندوق الوارد الخاص بك واتباع التعليمات الموجودة في البريد الإلكتروني لتنشيط حسابك"
 }

package/src/translations/en.json

@@ -42,5 +42,8 @@
   "password": "Password",
   "settings": "Settings",
   "display": "Display",
-  "option": "Option"
+  "option": "Option",
+  "checkEmail": "Check you email",
+  "resendEmail": "Resend Email",
+  "pleaseVerify": "Thank you for signing up! To complete your registration, we've sent a verification email to the address you provided. Please check your inbox and follow the instructions in the email to activate your account."
 }

package/tsup.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  splitting: true,
+  sourcemap: true,
+  clean: true,
+  dts: true,
+  external: ["react", "react-dom", "react-icons"]
+};