@sikka/hawa 0.0.49 → 0.0.51

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

@@ -0,0 +1,54 @@
+import React from "react";
+import "flowbite";
+export const HawaTooltip = (props) => {
+  const screenSize = {
+    width: 1500,
+    height: 200
+  };
+  return (
+    <div
+      id={props.tooltipID}
+      role="tooltip"
+      class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip dark:bg-gray-700"
+    >
+      Tooltip content
+      <div class="tooltip-arrow" data-popper-arrow></div>
+    </div>
+
+    // <Tooltip
+    //   placement={screenSize.width > 400 ? "bottom-center" : "top-center"}
+    //   enterTouchDelay={100}
+    //   title={
+    //     props.hint ? (
+    //       props.hint
+    //     ) : (
+    //       <div>
+    //         <div
+    //           style={{
+    //             fontSize: 20,
+    //             fontWeight: 800,
+    //             padding: 10,
+    //             paddingBottom: 5,
+    //             textAlign: "center"
+    //           }}
+    //         >
+    //           {props.hintTitle}
+    //         </div>
+    //         <div
+    //           style={{
+    //             fontSize: 13,
+    //             fontWeight: 100,
+    //             padding: 10,
+    //             textAlign: "center"
+    //           }}
+    //         >
+    //           {props.hintContent}
+    //         </div>
+    //       </div>
+    //     )
+    //   }
+    // >
+    //   {props.children}
+    // </Tooltip>
+  );
+};

package/src/elements/ResponsiveButton.js

@@ -1,5 +1,4 @@
 import React from "react";
-import Tooltip from "@mui/material/Tooltip";
 import PropTypes from "prop-types";
 
 export const ResponsiveButton = (props) => {
@@ -14,11 +13,16 @@ export const ResponsiveButton = (props) => {
   } else {
     //icon only
     return (
-      <Tooltip title={props.buttonText} placement="top">
-        <button variant="adaptive-dark" onClick={props.onClick}>
+      <>
+        <button
+          data-tooltip-target="btn1"
+          variant="adaptive-dark"
+          onClick={props.onClick}
+        >
           {props.icon}
         </button>
-      </Tooltip>
+        <HawaTooltip tooltipID="btn1" content={props.buttonText} />
+      </>
     );
   }
 };
@@ -26,5 +30,5 @@ export const ResponsiveButton = (props) => {
 ResponsiveButton.propTypes = {
   buttonText: PropTypes.string,
   onClick: PropTypes.func,
-  showText: PropTypes.bool,
+  showText: PropTypes.bool
 };

package/src/elements/index.js

@@ -24,3 +24,4 @@ export * from "./DraggableCard";
 export * from "./HawaPhoneInput";
 export * from "./HawaPhoneInput2";
 export * from "./HawaDrawerItem";
+export * from "./HawaTooltip";

package/src/layout/HawaAppLayout2.js

@@ -14,7 +14,6 @@ import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ListItemButton from "@mui/material/ListItemButton";
 import ListItemText from "@mui/material/ListItemText";
 import Avatar from "@mui/material/Avatar";
-import Tooltip from "@mui/material/Tooltip";
 import { HawaPopMenu } from "../elements/HawaPopMenu";
 
 const drawerWidth = 200;
@@ -154,18 +153,15 @@ export function HawaAppLayout(props) {
             </Typography>
 
             <Box style={{ position: "absolute", right: 10 }}>
-              <Tooltip title="Open settings">
-                <IconButton
-                  onClick={handleOpenUserMenu}
-                  // sx={{ p: 0 }}
-                  size="small"
-                >
-                  <Avatar
-                    style={{ width: 30, height: 30 }}
-                    fontSize="inherit"
-                  />
-                </IconButton>
-              </Tooltip>
+              <IconButton
+                onClick={handleOpenUserMenu}
+                // sx={{ p: 0 }}
+                size="small"
+              >
+                <Avatar style={{ width: 30, height: 30 }} fontSize="inherit" />
+              </IconButton>
+              {/* <Tooltip title="Open settings">
+              </Tooltip> */}
               <HawaPopMenu
                 menuItems={props.accountMenu}
                 anchor={anchorElUser}
@@ -207,34 +203,32 @@ export function HawaAppLayout(props) {
         >
           {props.pages.map((p, jk) => {
             return (
-              <Tooltip
-                title={p.text}
-                key={jk}
-                placement={"right"}
-                arrow={true}
-                PopperProps={{ style: { opacity: open ? 0 : 1 } }}
+              // <Tooltip
+              //   title={p.text}
+              //   key={jk}
+              //   placement={"right"}
+              //   arrow={true}
+              //   PopperProps={{ style: { opacity: open ? 0 : 1 } }}
+              // >
+
+              // </Tooltip>
+              <ListItemButton
+                variant={
+                  props.pageName?.toLowerCase() === p.slug?.toLowerCase() &&
+                  "clicked"
+                }
+                onClick={p.action}
+                key={p.text}
+                sx={{
+                  minHeight: 48,
+                  justifyContent: open ? "initial" : "center",
+                  px: 2.5
+                }}
               >
-                <ListItemButton
-                  variant={
-                    props.pageName?.toLowerCase() === p.slug?.toLowerCase() &&
-                    "clicked"
-                  }
-                  onClick={p.action}
-                  key={p.text}
-                  sx={{
-                    minHeight: 48,
-                    justifyContent: open ? "initial" : "center",
-                    px: 2.5
-                  }}
-                >
-                  <p.icon />
-                  <div style={{ width: 20 }} />
-                  <ListItemText
-                    primary={p.text}
-                    sx={{ opacity: open ? 1 : 0 }}
-                  />
-                </ListItemButton>
-              </Tooltip>
+                <p.icon />
+                <div style={{ width: 20 }} />
+                <ListItemText primary={p.text} sx={{ opacity: open ? 1 : 0 }} />
+              </ListItemButton>
             );
           })}
         </List>

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.ceb9a32a.iframe.bundle.js"></script><script src="main.8bf9785a.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.8ab765cf.iframe.bundle.js"></script><script src="main.030838f5.iframe.bundle.js"></script></body></html>