@sikka/hawa 0.0.50 → 0.0.52

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/HawaPanelTabs.js

@@ -1,32 +1,126 @@
 import React, { useState } from "react";
 
-import Container from "@mui/material/Container";
 import PropTypes from "prop-types";
+import "flowbite";
 
 export const HawaPanelTabs = (props) => {
   const [value, setValue] = useState(props.defaultValue);
   return (
-    <Container variant={props.location || "panelTabs"}>
-      {props.options.map((singleOption, i) => {
-        return (
-          <button
-            key={i}
-            onClick={() => {
-              props.handleChange(singleOption.value);
-              setValue(singleOption.value);
-            }}
-            fullWidth
-            variant={
-              value?.toLowerCase() === singleOption.value?.toLowerCase()
-                ? "selected"
-                : "unselected"
-            }
-          >
-            {singleOption.label}
-          </button>
-        );
-      })}
-    </Container>
+    <div>
+      <div class="mb-4 border-b border-gray-200 dark:border-gray-700">
+        <ul
+          class="flex flex-wrap -mb-px text-sm font-medium text-center"
+          id="myTab"
+          data-tabs-toggle="#myTabContent"
+          role="tablist"
+        >
+          {props.options.map((option) => {
+            return (
+              <li class="mr-2" role="presentation">
+                <button
+                  class="inline-block p-4 rounded-t-lg border-b-2 text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
+                  id="profile-tab"
+                  data-tabs-target="#profile"
+                  type="button"
+                  role="tab"
+                  aria-controls="profile"
+                  aria-selected="true"
+                >
+                  {option.label}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+      {/* <div id="myTabContent">
+        <div
+          class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+          id="profile"
+          role="tabpanel"
+          aria-labelledby="profile-tab"
+        >
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            This is some placeholder content the{" "}
+            <strong class="font-medium text-gray-800 dark:text-white">
+              Profile tab's associated content
+            </strong>
+            . Clicking another tab will toggle the visibility of this one for
+            the next. The tab JavaScript swaps classes to control the content
+            visibility and styling.
+          </p>
+        </div>
+        <div
+          class="hidden p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+          id="dashboard"
+          role="tabpanel"
+          aria-labelledby="dashboard-tab"
+        >
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            This is some placeholder content the{" "}
+            <strong class="font-medium text-gray-800 dark:text-white">
+              Dashboard tab's associated content
+            </strong>
+            . Clicking another tab will toggle the visibility of this one for
+            the next. The tab JavaScript swaps classes to control the content
+            visibility and styling.
+          </p>
+        </div>
+        <div
+          class="hidden p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+          id="settings"
+          role="tabpanel"
+          aria-labelledby="settings-tab"
+        >
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            This is some placeholder content the{" "}
+            <strong class="font-medium text-gray-800 dark:text-white">
+              Settings tab's associated content
+            </strong>
+            . Clicking another tab will toggle the visibility of this one for
+            the next. The tab JavaScript swaps classes to control the content
+            visibility and styling.
+          </p>
+        </div>
+        <div
+          class="hidden p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
+          id="contacts"
+          role="tabpanel"
+          aria-labelledby="contacts-tab"
+        >
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            This is some placeholder content the{" "}
+            <strong class="font-medium text-gray-800 dark:text-white">
+              Contacts tab's associated content
+            </strong>
+            . Clicking another tab will toggle the visibility of this one for
+            the next. The tab JavaScript swaps classes to control the content
+            visibility and styling.
+          </p>
+        </div>
+      </div> */}
+    </div>
+    // <Container variant={props.location || "panelTabs"}>
+    //   {props.options.map((singleOption, i) => {
+    //     return (
+    //       <button
+    //         key={i}
+    //         onClick={() => {
+    //           props.handleChange(singleOption.value);
+    //           setValue(singleOption.value);
+    //         }}
+    //         fullWidth
+    //         variant={
+    //           value?.toLowerCase() === singleOption.value?.toLowerCase()
+    //             ? "selected"
+    //             : "unselected"
+    //         }
+    //       >
+    //         {singleOption.label}
+    //       </button>
+    //     );
+    //   })}
+    // </Container>
   );
 };
 

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/HawaSelect.js

@@ -1,12 +1,16 @@
 import React from "react";
-import InputLabel from "@mui/material/InputLabel";
-import Select from "@mui/material/Select";
-import Typography from "@mui/material/Typography";
 
 export const HawaSelect = (props) => {
   return (
     <div style={{ width: "100%" }}>
-      <div
+      <label
+        for="first_name"
+        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      >
+        {props.label}
+      </label>
+
+      {/* <div
         style={{
           display: "flex",
           flexDirection: "row",
@@ -14,13 +18,19 @@ export const HawaSelect = (props) => {
           alignItems: "center"
         }}
       >
-        <InputLabel>{props.label}</InputLabel>
 
         {props.helperText && (
           <Typography variant="validation">{props.helperText}</Typography>
         )}
-      </div>
-      <Select {...props}>{props.children}</Select>
+      </div> */}
+      {/* <Select {...props}>{props.children}</Select> */}
+
+      <select
+        id="countries"
+        class="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"
+      >
+        {props.children}
+      </select>
     </div>
   );
 };

package/src/elements/HawaSettingsRow.js

@@ -1,19 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Checkbox from "@mui/material/Checkbox";
-import Container from "@mui/material/Container";
 import { HawaTypography } from "./HawaTypography";
 import { HawaTextField } from "./HawaTextField";
 import { HawaPanelTabs } from "./HawaPanelTabs";
 import { HawaSwitch } from "./HawaSwitch";
 import { HawaColorPicker } from "./HawaColorPicker";
 import { HawaRange } from "./HawaRange";
+import { HawaCheckbox } from "./HawaCheckbox";
 
 export const HawaSettingsRow = (props) => {
   return (
-    <Container variant="settingsRow">
+    <div className="flex flex-row bg-white justify-between align-middle items-center p-2 rounded-xl my-2 h-14">
       <HawaTypography>{props.settingsLabel}</HawaTypography>
-      {props.settingsType === "checkbox" && <Checkbox {...props} />}
+      {props.settingsType === "checkbox" && <HawaCheckbox {...props} />}
       {props.settingsType === "text" && <HawaTextField {...props} />}
       {props.settingsType === "boolean" && <HawaSwitch {...props} />}
       {props.settingsType === "range" && <HawaRange {...props} />}
@@ -21,7 +20,7 @@ export const HawaSettingsRow = (props) => {
       {props.settingsType === "radio" && (
         <HawaPanelTabs location="inSettings" {...props} />
       )}
-    </Container>
+    </div>
   );
 };
 

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.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.c0e24dea.iframe.bundle.js"></script><script src="main.c82b0a52.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.0e8a2888.iframe.bundle.js"></script><script src="vendors~main.db6a4c38.iframe.bundle.js"></script><script src="main.c2f37ee9.iframe.bundle.js"></script></body></html>