@sikka/hawa 0.0.51 → 0.0.53

package/package.json

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

package/src/elements/DragDropImages.js

@@ -1,11 +1,8 @@
 import React, { useEffect, useState } from "react";
-// import axios from "axios";
 import { useDropzone } from "react-dropzone";
-import CloseIcon from "@mui/icons-material/Close";
-// import styled from "@emotion/styled";
-import { Button, Container, IconButton, Typography } from "@mui/material";
 import { useTheme } from "@mui/system";
 import { HawaAlert } from "./HawaAlert";
+import { HawaButton } from "./HawaButton";
 
 const thumbsContainer = {
   display: "flex",
@@ -95,26 +92,33 @@ export const DragDropImages = ({
     });
     const thumbs = files?.map((file, index) => (
       <div style={{ position: "relative", margin: 10 }}>
-        <IconButton
+        <button
           onClick={(e) => {
             e.stopPropagation();
             acceptedFiles.splice(acceptedFiles.indexOf(file), 1);
             setCmp(Math.random);
             onDeleteFile(file);
           }}
-          size="small"
-          variant="contained"
-          style={{
-            position: "absolute",
-            top: -10,
-            right: -10,
-            backgroundColor: theme.primaryActionColor,
-            color: "white",
-            padding: 3
-          }}
+          type="button"
+          class="text-gray-400 absolute left-0 bg-gray-900 hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          data-modal-toggle="defaultModal"
         >
-          <CloseIcon fontSize="small" />
-        </IconButton>
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+          <span class="sr-only">Close modal</span>
+        </button>
+
         <div
           style={{
             display: "flex",
@@ -136,17 +140,20 @@ export const DragDropImages = ({
     console.log("error", fileRejections);
 
     return (
-      <Container
-        variant="drop-area"
+      <div
+        // variant="drop-area"
         {...getRootProps({
           style: { backgroundColor: isDragActive && "white" }
         })}
+        className="border-black border border-dashed rounded-xl flex flex-col justify-center"
       >
         <input {...getInputProps()} />
-        <Typography>Click here or drop files here to upload</Typography>
-        <Typography>Max file size is {max}</Typography>
+        <div className="text-center p-1">
+          Click here or drop files here to upload
+        </div>
+        <div className="text-center p-1">Max file size is {max}</div>
         {acceptedFiles.length > 0 && (
-          <Button
+          <HawaButton
             style={{ color: "black" }}
             onClick={(e) => {
               e.stopPropagation();
@@ -154,12 +161,13 @@ export const DragDropImages = ({
             }}
           >
             Clear All
-          </Button>
+          </HawaButton>
         )}
 
-        {thumbs && showPreview ? <aside style={thumbsContainer}>{thumbs}</aside> : null}
+        {thumbs && showPreview ? (
+          <aside style={thumbsContainer}>{thumbs}</aside>
+        ) : null}
         {fileRejections[0]?.errors[0]?.code === "too-many-files" ? (
-          // <Typography variant="">{texts.tooManyFiles}</Typography>
           <HawaAlert text={texts.tooManyFiles} severity="error" />
         ) : fileRejections[0]?.errors[0]?.code === "file-too-large" ? (
           <HawaAlert text={texts.fileTooLarge} severity="error" />
@@ -167,6 +175,6 @@ export const DragDropImages = ({
           errs
         )}
         {}
-      </Container>
+      </div>
     );
   };

package/src/elements/HawaAccordian.js

@@ -89,23 +89,7 @@ export const HawaAccordian = (props) => {
           />
         );
       })}
-      {/* <AccordionItem count={1} />
-      <AccordionItem count={2} />
-      <AccordionItem count={3} /> */}
     </div>
-
-    // <Accordion elevation={0}>
-    //   <AccordionSummary
-    //     expandIcon={<ExpandMore />}
-    //     aria-controls="panel1a-content"
-    //     id="panel1a-header"
-    //   >
-    //     <Typography>{props.title}</Typography>
-    //   </AccordionSummary>
-    //   <AccordionDetails>
-    //     <Typography>{props.content} </Typography>
-    //   </AccordionDetails>
-    // </Accordion>
   );
 };
 HawaAccordian.propTypes = {

package/src/elements/HawaItemCard.js

@@ -1,5 +1,4 @@
 import React from "react";
-import Container from "@mui/material/Container";
 import PropTypes from "prop-types";
 
 export const HawaItemCard = (props) => {

package/src/elements/HawaLogoButton.js

@@ -89,7 +89,7 @@ export const HawaLogoButton = (props) => {
       style={{ direction: isArabic ? "rtl" : "ltr" }}
       {...props}
       // variant="withLogo"
-      className="bg-white rounded-xl my-2 h-11 flex flex-row justify-center align-middle"
+      className="bg-white rounded-xl my-2 h-11 flex max-w-sm w-full flex-row justify-center align-middle"
     >
       <div className="h-full w-1/2 flex flex-row justify-end items-center">
         {logoElement}

package/src/elements/HawaPhoneInput.js

@@ -1,7 +1,5 @@
 import PhoneInput from "react-phone-input-2";
 import "react-phone-input-2/lib/material.css";
-import { useTheme } from "@mui/system";
-import { InputLabel } from "@mui/material";
 
 export default function HawaPhoneInput(props) {
   const {
@@ -19,7 +17,6 @@ export default function HawaPhoneInput(props) {
     ...rest
   } = props;
 
-  const theme = useTheme();
   return (
     <div>
       <label
@@ -33,7 +30,7 @@ export default function HawaPhoneInput(props) {
         className="mb-2 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
       />
 
-      {label && <InputLabel>{props.label}</InputLabel>}
+      {/* {label && <InputLabel>{props.label}</InputLabel>} */}
       <PhoneInput
         country={country ?? null}
         onChange={(e) => onChange(e)}
@@ -49,8 +46,7 @@ export default function HawaPhoneInput(props) {
         specialLabel={""}
         placeholder={placeholder ?? ""}
         inputStyle={{
-          width: "100%",
-          borderRadius: theme.allBorderRadius
+          width: "100%"
         }}
         // inputClass="bg-red-900"
         // inputClass="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"

package/src/elements/HawaPopMenu.js

@@ -1,44 +1,88 @@
-import { useTheme } from "@mui/material";
-import Typography from "@mui/material/Typography";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
 import PropTypes from "prop-types";
-
+import "flowbite";
 export const HawaPopMenu = (props) => {
-  const theme = useTheme();
   return (
-    <Menu
-      sx={{ mt: "45px" }}
-      id="menu-appbar"
-      anchorEl={props.anchor}
-      anchorOrigin={{
-        vertical: "top",
-        horizontal: "right"
-      }}
-      keepMounted
-      transformOrigin={{
-        vertical: "top",
-        horizontal: "right"
-      }}
-      open={Boolean(props.anchor)}
-      onClose={props.handleClose}
-      variant="themed"
-      PaperProps={{
-        style: {
-          boxShadow: "none",
-          borderRadius: theme.allBorderRadius,
-          border: `1px solid ${theme.primaryActionColor}`
-        }
-      }}
-    >
-      {props.menuItems.map((item) => (
-        <MenuItem key={item.label} onClick={item.action}>
-          {item.icon && <item.icon />}
-          {item.icon && <div style={{ width: 10 }} />}
-          <Typography textAlign="center">{item.label}</Typography>
-        </MenuItem>
-      ))}
-    </Menu>
+    <div>
+      {/* <button
+        id="dropdownDefault"
+        data-dropdown-toggle={props.popMenuID}
+        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+        type="button"
+      >
+        Dropdown button{" "}
+        <svg
+          class="ml-2 w-4 h-4"
+          aria-hidden="true"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 9l-7 7-7-7"
+          ></path>
+        </svg>
+      </button> */}
+      <div
+        id={props.popMenuID}
+        class="hidden z-10 w-44 bg-white rounded divide-y divide-gray-100 shadow dark:bg-gray-700"
+        data-popper-reference-hidden=""
+        data-popper-escaped=""
+        data-popper-placement="bottom"
+        // style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(0px, 484.5px, 0px);"
+      >
+        <ul
+          class="py-1 text-sm text-gray-700 dark:text-gray-200"
+          aria-labelledby="dropdownDefault"
+        >
+          {props.menuItems.map((item) => (
+            <li>
+              <a
+                href="#"
+                class="block py-2 px-4 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
+              >
+                {item.label}
+              </a>
+            </li>
+            // <MenuItem key={item.label} onClick={item.action}>
+            //   {item.icon && <item.icon />}
+            //   {item.icon && <div style={{ width: 10 }} />}
+            //   <Typography textAlign="center">{item.label}</Typography>
+            // </MenuItem>
+          ))}
+        </ul>
+      </div>
+    </div>
+
+    // <Menu
+    //   sx={{ mt: "45px" }}
+    //   id="menu-appbar"
+    //   anchorEl={props.anchor}
+    //   anchorOrigin={{
+    //     vertical: "top",
+    //     horizontal: "right"
+    //   }}
+    //   keepMounted
+    //   transformOrigin={{
+    //     vertical: "top",
+    //     horizontal: "right"
+    //   }}
+    //   open={Boolean(props.anchor)}
+    //   onClose={props.handleClose}
+    //   variant="themed"
+    //   PaperProps={{
+    //     style: {
+    //       boxShadow: "none",
+    //       borderRadius: theme.allBorderRadius,
+    //       border: `1px solid ${theme.primaryActionColor}`
+    //     }
+    //   }}
+    // >
+
+    // </Menu>
   );
 };
 

package/src/elements/HawaPricingCard.js

@@ -1,9 +1,5 @@
 import React from "react";
-import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
-import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
 import PropTypes from "prop-types";
-import Chip from "@mui/material/Chip";
 
 export const HawaPricingCard = (props) => {
   let isArabic = props.lang === "ar";
@@ -26,126 +22,112 @@ export const HawaPricingCard = (props) => {
   let featuresMapping = isArabic ? props.features_ar : props.features;
   let chipSpacing = isArabic ? { left: 10 } : { right: 10 };
   return (
-    <Container
-      maxWidth="xs"
-      variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
-      style={{ direction: isArabic ? "rtl" : "ltr" }}
-    >
-      <Container variant="plan-header">
-        {props.discount && (
-          <Chip
-            label={props.discount}
-            variant="standard"
-            style={{
-              maxWidth: "fit-content",
-              position: "absolute",
-              bottom: 10,
-              ...chipSpacing
-            }}
-            color="success"
-          />
-        )}
-        <Typography variant="h3" fontWeight={500}>
+    <div>
+      <div class="p-4 w-full max-w-sm bg-white rounded-lg border shadow-md sm:p-8 dark:bg-gray-800 dark:border-gray-700">
+        <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">
           {isArabic ? props.title_ar : props.title}
-        </Typography>
-        <Typography variant="caption">
-          {isArabic ? props.subtitle_ar : props.subtitle}
-        </Typography>
-        <br />
-        <Typography
-          variant="h4"
-          fontWeight={500}
-          style={{ display: "flex", alignItems: "center" }}
-        >
-          {props.lang === "ar" ? (
-            <div
-              style={{
-                width: "100%",
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "center"
-              }}
-            >
-              <div style={{ display: "flex", flexDirection: "row" }}>
-                {props.price}
-                <div style={{ width: 5 }} />
-                {/* <Typography>{props.currency?.toUpperCase()}</Typography> */}
-                <Typography>
-                  {currencyMapping[props.currency?.toLowerCase()]}
-                </Typography>
-              </div>
-              <Typography style={{ fontSize: 14, margin: 5 }}>
-                {isArabic
-                  ? cycleTextsArabic[props.cycleText]
-                  : cycleTextsEnglish[props.cycleText]}
-              </Typography>
-            </div>
-          ) : (
-            <div
-              style={{
-                width: "100%",
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "center"
-              }}
-            >
-              <div style={{ display: "flex", flexDirection: "row" }}>
-                <Typography>
-                  {currencyMapping[props.currency?.toLowerCase()]}
-                </Typography>
-                {/* <Typography>{props.currency?.toUpperCase()}</Typography> */}
-                <div style={{ width: 5 }} />
-                {props.price}
-              </div>
-              <Typography style={{ fontSize: 14, margin: 5 }}>
-                {props.lang === "ar"
-                  ? cycleTextsArabic[props.cycleText]
-                  : cycleTextsEnglish[props.cycleText]}
-              </Typography>
-            </div>
-          )}
-        </Typography>
-      </Container>
+        </h5>
+        <div class="flex items-baseline text-gray-900 dark:text-white">
+          <span class="text-3xl font-semibold">
+            {" "}
+            {currencyMapping[props.currency?.toLowerCase()]}
+          </span>
+          <span class="text-5xl font-extrabold tracking-tight">
+            {props.price}
+          </span>
+          <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">
+            /{" "}
+            {isArabic
+              ? cycleTextsArabic[props.cycleText]
+              : cycleTextsEnglish[props.cycleText]}
+          </span>
+        </div>
+        <ul role="list" class="my-7 space-y-5">
+          {featuresMapping?.map((feature) => {
+            return (
+              <li class="flex space-x-3">
+                <svg
+                  aria-hidden="true"
+                  class="flex-shrink-0 w-5 h-5 text-blue-600 dark:text-blue-500"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <title>Check icon</title>
+                  <path
+                    fill-rule="evenodd"
+                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                    clip-rule="evenodd"
+                  ></path>
+                </svg>
+                <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400">
+                  {feature}
+                </span>
+              </li>
+            );
+          })}
 
-      <div
-        style={{ padding: 20, color: props.selectedPlan ? "white" : "black" }}
-      >
-        {featuresMapping?.map((feature) => {
-          return (
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "row",
-                alignItems: "center",
-                justifyContent: "flex-start",
-                marginTop: 10,
-                width: "100%"
-              }}
+          {/* <li class="flex space-x-3 line-through decoration-gray-500">
+            <svg
+              aria-hidden="true"
+              class="flex-shrink-0 w-5 h-5 text-gray-400 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
             >
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "flex-end",
-                  width: "10%"
-                }}
-              >
-                <CheckIcon fontSize="small" />
-              </div>
-              <div style={{ width: 10 }} />
-              <Typography variant="subtitle2">{feature}</Typography>
-            </div>
-          );
-        })}
+              <title>Check icon</title>
+              <path
+                fill-rule="evenodd"
+                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+            <span class="text-base font-normal leading-tight text-gray-500">
+              Sketch Files
+            </span>
+          </li> */}
+        </ul>
+        <button
+          type="button"
+          class="text-white bg-blue-600 hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-200 dark:focus:ring-blue-900 font-medium rounded-lg text-sm px-5 py-2.5 inline-flex justify-center w-full text-center"
+        >
+          {props.buttonText}
+        </button>
       </div>
-      <button
-        onClick={props.selectPlan}
-        variant={props.selectedPlan ? "outlined" : "contained"}
-        style={{ margin: 20 }}
-      >
-        {props.buttonText}
-      </button>
-    </Container>
+    </div>
+
+    // <Container
+    //   maxWidth="xs"
+    //   variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
+    //   style={{ direction: isArabic ? "rtl" : "ltr" }}
+    // >
+    //     {props.discount && (
+    //       <Chip
+    //         label={props.discount}
+    //         variant="standard"
+    //         style={{
+    //           maxWidth: "fit-content",
+    //           position: "absolute",
+    //           bottom: 10,
+    //           ...chipSpacing
+    //         }}
+    //         color="success"
+    //       />
+    //     )}
+
+    //   <div
+    //     style={{ padding: 20, color: props.selectedPlan ? "white" : "black" }}
+    //   >
+    //
+    //   </div>
+    //   <button
+    //     onClick={props.selectPlan}
+    //     variant={props.selectedPlan ? "outlined" : "contained"}
+    //     style={{ margin: 20 }}
+    //   >
+    //     {props.buttonText}
+    //   </button>
+    // </Container>
   );
 };
 

package/src/elements/HawaRange.js

@@ -1,20 +1,36 @@
 import React from "react";
-import Slider from "@mui/material/Slider";
-import Stack from "@mui/material/Stack";
 import PropTypes from "prop-types";
 
 export const HawaRange = (props) => {
   return (
-    <Stack spacing={2} direction="row" alignItems="center" style={props.style}>
-      {props.startElement}
-      <Slider
-        size="small"
-        aria-label="Volume"
-        value={props.value}
-        onChange={props.handleChange}
-      />
-      {props.endElement}
-    </Stack>
+    // <Stack spacing={2} direction="row" alignItems="center" style={props.style}>
+    //   {props.startElement}
+    //   <Slider
+    //     size="small"
+    //     aria-label="Volume"
+    //     value={props.value}
+    //     onChange={props.handleChange}
+    //   />
+    //   {props.endElement}
+    // </Stack>
+    <div>
+      <label
+        for="default-range"
+        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      >
+        Default range
+      </label>
+      <div className="flex flex-row justify-center items-center w-fit">
+        <div className="mr-2">{props.startElement}</div>{" "}
+        <input
+          id="default-range"
+          type="range"
+          value="50"
+          class="w-fit h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
+        />
+        <div className="ml-2">{props.endElement}</div>{" "}
+      </div>
+    </div>
   );
 };
 HawaRange.propTypes = {

package/src/elements/HawaSearchBar.js

@@ -1,16 +1,14 @@
-import { Search } from "@mui/icons-material";
-import { InputAdornment } from "@mui/material";
 import React from "react";
 import { HawaTextField } from "./HawaTextField";
 
 export const HawaSearchBar = (props) => {
   return (
     <HawaTextField
-      endAdornment={
-        <InputAdornment position="start">
-          <Search />
-        </InputAdornment>
-      }
+      // endAdornment={
+      //   <InputAdornment position="start">
+      //     <Search />
+      //   </InputAdornment>
+      // }
       {...props}
     />
   );