@sikka/hawa 0.0.174 → 0.0.176

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.176",
   "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/EmptyState.tsx

@@ -12,7 +12,7 @@ export const EmptyState: React.FunctionComponent<TEmptyState> = ({
   return (
     <HawaContainer variant={variant} centered={true}>
       <div className="flex flex-col items-center justify-center text-center dark:text-white">
-        <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-lighter text-6xl font-bold">
+        <div className="flex h-10 w-10 flex-col items-center justify-center rounded-3xl bg-buttonPrimary-300 text-6xl font-bold">
           <FaCheck size={20} />
         </div>
         <div className="m-2 text-xl font-bold">You're all caught up</div>

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/HawaButton.tsx

@@ -31,7 +31,7 @@ const sizeStyles = {
 const widthStyles = {
   full: "w-full flex justify-center px-5 py-2.5 text-center inline-flex items-center",
   normal:
-    "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-darker dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
+    "w-fit dark:bg-buttonPrimary-dark dark:hover:bg-buttonPrimary-700 dark:hover:brightness-90 dark:focus:ring-buttonPrimary-500",
   half: "w-1/2",
 }
 const variantStyles = {
@@ -42,17 +42,17 @@ const variantStyles = {
 const colorStyles = {
   contained: {
     default:
-      "text-neutral-900 bg-buttonPrimary-500 hover:bg-buttonPrimary-darker bg-buttonPrimary-500 text-white",
+      "text-neutral-900 bg-buttonPrimary-500 hover:bg-buttonPrimary-700 bg-buttonPrimary-500 text-white",
     primary:
-      "text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-darker transition-all",
+      "text-white bg-buttonPrimary-500 hover:bg-buttonPrimary-700 transition-all",
     secondary:
-      "text-neutral-900 bg-buttonSecondary-default hover:text-white hover:bg-buttonSecondary-darker",
+      "text-neutral-900 bg-buttonSecondary-default hover:text-white hover:bg-buttonSecondary-700",
   },
   outlined: {
     default: "text-gray-600 border-gray-600 hover:bg-gray-200",
     primary: "text-black hover:bg-gray-50",
     secondary:
-      "text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-darker hover:text-white",
+      "text-secondary-800 border-secondary-800 hover:bg-buttonSecondary-700 hover:text-white",
   },
 }
 
@@ -84,6 +84,7 @@ export function HawaButton({
     >
       <button
         id={buttonID}
+        type={props.type}
         className={
           disabled
             ? clsx(
@@ -105,7 +106,6 @@ export function HawaButton({
               )
         }
         disabled={disabled}
-        type={props.type}
         {...props}
       >
         {!isLoading ? children : <HawaSpinner size="button" />}

package/src/elements/HawaMenu.tsx

@@ -106,7 +106,7 @@ export const HawaMenu: React.FunctionComponent<TMenuTypes> = ({
                     onClick={(e) => item.action(e, item.label)}
                     className={
                       item.isButton
-                        ? "mx-1 my-1 flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 py-2 px-4 text-white hover:bg-buttonPrimary-darker rtl:flex-row-reverse dark:hover:bg-buttonPrimary-darker dark:hover:text-white"
+                        ? "mx-1 my-1 flex cursor-pointer flex-row items-center rounded bg-buttonPrimary-500 py-2 px-4 text-white hover:bg-buttonPrimary-700 rtl:flex-row-reverse dark:hover:bg-buttonPrimary-700 dark:hover:text-white"
                         : "mx-1 flex cursor-pointer flex-row items-center rounded py-2 px-4 hover:bg-gray-200 rtl:flex-row-reverse dark:hover:bg-gray-600 dark:hover:text-white"
                     }
                   >

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
@@ -229,7 +229,7 @@ export const HawaAppLayout: React.FunctionComponent<HawaAppLayoutTypes> = ({
                         className={clsx(
                           props.currentPage === dItem.slug
                             ? "bg-buttonPrimary-500 text-white"
-                            : "hover:bg-buttonPrimary-lighter",
+                            : "hover:bg-buttonPrimary-300",
                           "m-2 flex cursor-pointer flex-row items-center overflow-x-clip rounded p-2  pl-3 transition-all ",
                           direction === "rtl" ? "flex-row-reverse pr-3" : ""
                         )}

package/src/layout/HawaBottomAppBar.tsx

@@ -26,7 +26,7 @@ export const HawaBottomAppBar: React.FunctionComponent<BottomAppBarTypes> = (
       >
         {props.appBarContent.map((singleContent: any) => (
           <div
-            className="m-1 flex h-full w-full flex-col items-center justify-center rounded p-2 transition-all hover:cursor-pointer hover:bg-buttonPrimary-darker hover:text-white"
+            className="m-1 flex h-full w-full flex-col items-center justify-center rounded p-2 transition-all hover:cursor-pointer hover:bg-buttonPrimary-700 hover:text-white"
             onClick={singleContent.action}
           >
             <div

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/src/styles.css

@@ -382,8 +382,8 @@ video {
     --button-primary-500: #4c37eb;
     --button-primary-700: #2e1dac;
 
-    --button-secondary: #ffc011;
-    --button-secondary-darker: #b48d24;
+    --button-secondary-500: #ffc011;
+    --button-secondary-700: #b48d24;
 
     --border-radius: 13px;
   }
@@ -1439,9 +1439,6 @@ video {
 .bg-buttonPrimary-500 {
   background-color: var(--button-primary-500);
 }
-.bg-buttonSecondary-default {
-  background-color: var(--button-secondary);
-}
 .bg-red-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 202 202 / var(--tw-bg-opacity));
@@ -1502,9 +1499,8 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity));
 }
-.bg-buttonPrimary-lighter {
-  --tw-bg-opacity: 1;
-  background-color: rgb(237 235 253 / var(--tw-bg-opacity));
+.bg-buttonPrimary-300 {
+  background-color: var(--button-primary-300);
 }
 .bg-blue-400 {
   --tw-bg-opacity: 1;
@@ -1959,8 +1955,12 @@ body {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-buttonSecondary-darker:hover {
-  background-color: var(--button-secondary-darker);
+.hover\:bg-buttonPrimary-700:hover {
+  background-color: var(--button-primary-700);
+}
+
+.hover\:bg-buttonSecondary-700:hover {
+  background-color: var(--button-secondary-700);
 }
 
 .hover\:bg-gray-50:hover {
@@ -1991,9 +1991,8 @@ body {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-buttonPrimary-lighter:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(237 235 253 / var(--tw-bg-opacity));
+.hover\:bg-buttonPrimary-300:hover {
+  background-color: var(--button-primary-300);
 }
 
 .hover\:text-gray-900:hover {
@@ -2293,6 +2292,10 @@ body {
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
+.dark .dark\:hover\:bg-buttonPrimary-700:hover {
+  background-color: var(--button-primary-700);
+}
+
 .dark .dark\:hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

package/src/tailwind.css

@@ -11,8 +11,8 @@
     --button-primary-500: #4c37eb;
     --button-primary-700: #2e1dac;
 
-    --button-secondary: #ffc011;
-    --button-secondary-darker: #b48d24;
+    --button-secondary-500: #ffc011;
+    --button-secondary-700: #b48d24;
 
     --border-radius: 13px;
   }

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>