@sikka/hawa 0.0.174 → 0.0.175

package/lib/layout/HawaContainer.d.ts

@@ -3,6 +3,7 @@ type ContainerTypes = {
     maxWidth?: "full" | "small" | "normal";
     children: React.ReactNode;
     variant?: "contained" | "outlined" | "neobrutalism";
+    direction?: "rtl" | "ltr";
     centered?: boolean;
 };
 export declare const HawaContainer: React.FunctionComponent<ContainerTypes>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.174",
+  "version": "0.0.175",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",

package/src/blocks/AuthForms/SignInForm.tsx

@@ -10,6 +10,7 @@ import { Controller, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout"
 
 type SignInFormTypes = {
+  language?: string
   showError?: any
   errorTitle?: string
   errorText?: string
@@ -47,7 +48,6 @@ type SignInFormTypes = {
   handleGithubSignIn?: () => void
   handleTwitterSignIn?: () => void
 }
-// TODO: add direction to flip block
 
 export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
   const {
@@ -57,7 +57,7 @@ export const SignInForm: React.FunctionComponent<SignInFormTypes> = (props) => {
   } = useForm()
 
   return (
-    <HawaContainer>
+    <HawaContainer direction={props.language === "ar" ? "rtl" : "ltr"}>
       <form onSubmit={handleSubmit((e) => props.handleSignIn(e))}>
         {props.showError && (
           <HawaAlert

package/src/blocks/AuthForms/SignUpForm.tsx

@@ -11,6 +11,7 @@ import { Controller, FormProvider, useForm } from "react-hook-form"
 import { HawaContainer } from "../../layout/HawaContainer"
 
 type SignUpFormTypes = {
+  language?: string
   texts: {
     fullNameLabel: string
     fullNamePlaceholder: string
@@ -70,7 +71,7 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
   } = methods
 
   return (
-    <HawaContainer>
+    <HawaContainer direction={props.language === "ar" ? "rtl" : "ltr"}>
       <div>
         {props.showError && (
           <HawaAlert
@@ -288,8 +289,8 @@ export const SignUpForm: React.FunctionComponent<SignUpFormTypes> = (props) => {
             </HawaButton>
           </form>
         </FormProvider>
-        <div className="p-3 text-center text-sm font-semibold">
-          {props.texts.existingUserText}{" "}
+        <div className="flex flex-row items-center justify-center gap-1 p-3  text-center text-sm font-semibold">
+          <span>{props.texts.existingUserText}</span>
           <span
             onClick={props.handleRouteToSignIn}
             className="cursor-pointer text-blue-600"

package/src/blocks/Misc/Newsletter.tsx

@@ -8,13 +8,13 @@ type TNewsletter = {
     wantToStayUpdated: string
     subscribeToNewsletter: string
   }
+  handleNewsletterSub: (e: string) => void
 }
 
-// TODO: make it a form and handle email submission
-
 export const Newsletter: React.FunctionComponent<TNewsletter> = ({
   variant = "contained",
   texts,
+  handleNewsletterSub,
 }) => {
   return (
     <HawaContainer variant={variant} centered={true}>
@@ -22,17 +22,24 @@ export const Newsletter: React.FunctionComponent<TNewsletter> = ({
         <h1 className="font-bold">{texts.wantToStayUpdated}</h1>
         <span>{texts.subscribeToNewsletter}</span>
       </div>
-      <div className="flex flex-row gap-2">
+      <form
+        className="flex flex-row gap-2"
+        onSubmit={(e) => {
+          e.preventDefault()
+          handleNewsletterSub(e.target[0].value)
+        }}
+      >
         <HawaTextField
           width="full"
           type="email"
+          name="email"
           placeholder={"example@sikka.io"}
           margin="none"
         />
         <HawaButton size="full" margins="none">
           Submit
         </HawaButton>
-      </div>
+      </form>
     </HawaContainer>
   )
 }

package/src/elements/HawaPricingCard.tsx

@@ -1,21 +1,17 @@
+import clsx from "clsx"
 import React from "react"
 
-// TODO: make the texts in one object property
-// TODO: give it a background color (white)
-// TODO: remove title_ar
-// TODO: spicifiy features object
-// TODO: remove features_ar
+// TODO: if feature.included is false, show gray and x
 
 type PricingCardTypes = {
   lang: "ar" | "en"
-  features: [any]
-  features_ar: [any]
+  features: [{ included: boolean; text: string }]
   title: string
-  title_ar: string
   price: number
-  currency: string
-  buttonText: string
-  cycleText: string
+  // currency: string
+  // buttonText: string
+  // cycleText: string
+  texts: { buttonText: string; cycleText: string; currencyText: string }
   size: "small" | "medium" | "large"
 }
 type CycleTextTypes = {
@@ -48,8 +44,6 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
     usd: isArabic ? "دولار" : "$",
     sar: isArabic ? "ريال" : "SAR",
   }
-  let featuresMapping = isArabic ? props.features_ar : props.features
-  let chipSpacing = isArabic ? { left: 10 } : { right: 10 }
   let cardSizes = {
     small:
       "mx-1 w-full max-w-fit rounded border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
@@ -59,45 +53,49 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
       "mx-1 w-full max-w-lg rounded border bg-white p-4 shadow-md dark:border-gray-700 dark:bg-gray-800 sm:p-8",
   }
   return (
-    <div dir={isArabic ? "rtl" : "ltr"} className={cardSizes[props.size]}>
+    <div
+      dir={isArabic ? "rtl" : "ltr"}
+      className={clsx(cardSizes[props.size], "bg-white")}
+    >
       <h5 className="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">
-        {isArabic ? props.title_ar : props.title}
+        {props.title}
       </h5>
       <div className="flex items-baseline text-gray-900 dark:text-white">
-        {isArabic ? (
-          <>
-            <span className="text-5xl font-extrabold tracking-tight">
-              {props.price}
-            </span>
-            <span className="mx-1 text-sm font-semibold">
-              {" "}
-              {
-                currencyMapping[
-                  props.currency?.toLowerCase() as keyof CurrencyTextTypes
-                ]
-              }
-            </span>
-          </>
-        ) : (
-          <>
-            <span className="text-sm font-semibold">
-              {" "}
-              {
-                currencyMapping[
-                  props.currency?.toLowerCase() as keyof CurrencyTextTypes
-                ]
-              }
-            </span>
-            <span className="mx-1 text-5xl font-extrabold tracking-tight">
-              {props.price}
-            </span>
-          </>
-        )}
+        {/* {isArabic ? ( */}
+        <>
+          <span className="text-5xl font-extrabold tracking-tight">
+            {props.price}
+          </span>
+          <span className="mx-1 text-sm font-semibold">
+            {" "}
+            {/* {
+              currencyMapping[
+                props.currency?.toLowerCase() as keyof CurrencyTextTypes
+              ]
+            } */}
+            {props.texts.currencyText}
+          </span>
+        </>
+        {/* // ) : (
+        //   <>
+        //     <span className="text-sm font-semibold">
+        //       {" "}
+        //       {
+        //         currencyMapping[
+        //           props.currency?.toLowerCase() as keyof CurrencyTextTypes
+        //         ]
+        //       }
+        //     </span>
+        //     <span className="mx-1 text-5xl font-extrabold tracking-tight">
+        //       {props.price}
+        //     </span>
+        //   </>
+        // )} */}
         <span className="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
-          /{" "}
-          {isArabic
+          / {props.texts.cycleText}
+          {/* {isArabic
             ? cycleTextsArabic[props.cycleText as keyof CycleTextTypes]
-            : cycleTextsEnglish[props.cycleText as keyof CycleTextTypes]}
+            : cycleTextsEnglish[props.cycleText as keyof CycleTextTypes]} */}
         </span>
       </div>
       <ul role="list" className="my-7 space-y-0">
@@ -119,7 +117,7 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
                 ></path>
               </svg>
               <span className="flex items-center  text-center font-normal leading-tight text-gray-500  dark:text-gray-400">
-                {feature}
+                {feature.text}
               </span>
             </li>
           )
@@ -129,7 +127,7 @@ export const HawaPricingCard: React.FunctionComponent<PricingCardTypes> = (
         type="button"
         className="inline-flex w-full justify-center rounded bg-blue-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900"
       >
-        {props.buttonText}
+        {props.texts.buttonText}
       </button>
     </div>
 

package/src/elements/HawaSpinner.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx"
 import React from "react"
-// TODO: Add different sizes
+
 type SpinnerTypes = {
   size?: "button" | "sm" | "normal" | "lg" | "xl"
 }

package/src/layout/HawaAppLayout.tsx

@@ -33,7 +33,7 @@ type MenuItems = {
   isButton?: boolean
 }
 
-// TODO: fix the drawer top when no topbar
+
 export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
   direction = "rtl",
   ...props

package/src/layout/HawaContainer.tsx

@@ -5,12 +5,14 @@ type ContainerTypes = {
   maxWidth?: "full" | "small" | "normal"
   children: React.ReactNode
   variant?: "contained" | "outlined" | "neobrutalism"
+  direction?: "rtl" | "ltr"
   centered?: boolean
 }
 export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
   maxWidth = "normal",
   variant = "contained",
   centered = false,
+  direction = "rtl",
   ...props
 }) => {
   let defaultStyle = "flex w-full flex-col rounded p-4"
@@ -34,6 +36,7 @@ export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
         variantStyles[variant],
         centered ? "flex items-center text-center" : ""
       )}
+      dir={direction}
     >
       {props.children}
     </div>

package/src/layout/HawaSiteLayout.tsx

@@ -26,7 +26,6 @@ type HawaSiteLayoutTypes = {
   floating?: boolean
 }
 
-// TODO: fix the drawer top when no topbar
 export const HawaSiteLayout: React.FunctionComponent<HawaSiteLayoutTypes> = ({
   direction = "rtl",
   navigationSize = "md",

package/storybook-static/iframe.html

@@ -361,4 +361,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.4a2964ac.iframe.bundle.js"></script><script src="239.5e8067ea.iframe.bundle.js"></script><script src="main.ea6f9b48.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.4a2964ac.iframe.bundle.js"></script><script src="239.5e8067ea.iframe.bundle.js"></script><script src="main.46fe6f33.iframe.bundle.js"></script></body></html>