@sikka/hawa 0.0.43 → 0.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -37,6 +37,7 @@
     "next": "^12.1.0",
     "next-scripts": "^0.3.4",
     "next-translate": "^1.3.5",
+    "postcss-focus-visible": "^7.1.0",
     "qs": "^6.10.3",
     "react": "^17.0.1",
     "react-color": "^2.19.3",
@@ -52,6 +53,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",
+    "tailwindcss": "^3.2.1",
     "tinycolor2": "^1.4.2"
   },
   "peerDependencies": {
@@ -80,5 +82,8 @@
     "@storybook/core-server/webpack": "^5",
     "@storybook/builder-webpack4/webpack": "^5",
     "@storybook/manager-webpack4/webpack": "^5"
+  },
+  "dependencies": {
+    "flowbite": "^1.5.3"
   }
 }

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}

package/src/elements/ActionButton.js

@@ -1,5 +1,14 @@
-import Button from "@mui/material/Button";
 
 export const ActionButton = (props) => {
-  return <Button {...props}>{props.text}</Button>;
+  // <Button {...props}>{props.text}</Button>;
+  return (
+    <button
+      type="button"
+      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-5 py-2.5 text-center inline-flex items-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+    >
+      {props.icon ? <div class="mr-2 -ml-1 w-5 h-5">{props.icon}</div> : null}
+
+      {props.children}
+    </button>
+  );
 };

package/src/elements/HawaButton.js

@@ -1,6 +1,14 @@
 import React from "react";
-import Button from "@mui/material/Button";
 
 export const HawaButton = (props) => {
-  return <Button {...props}>{props.children}</Button>;
+  return (
+    <button
+      type="button"
+      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-5 py-2.5 text-center inline-flex items-center mr-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+    >
+      {props.icon ? <div class="mr-2 -ml-1 w-5 h-5">{props.icon}</div> : null}
+
+      {props.children}
+    </button>
+  );
 };

package/src/elements/HawaDrawerItem.js

@@ -0,0 +1,26 @@
+import React from "react";
+
+const HawaDrawerItem = (props) => {
+  return (
+    <li>
+      <a
+        href="#"
+        class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"
+      >
+        <svg
+          aria-hidden="true"
+          class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path>
+          <path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path>
+        </svg>
+        <span class="ml-3">{props.text}</span>
+      </a>
+    </li>
+  );
+};
+
+export default HawaDrawerItem;

package/src/elements/HawaPhoneInput2.js

@@ -0,0 +1,78 @@
+// import { Input } from "@mui/material";
+// import { height } from "@mui/system";
+// import { useState } from "react";
+// import Countries from "../../countries.json";
+
+// export default function HawaPhoneInput2({ preferredCountry }) {
+//   const [code, setCode] = useState(preferredCountry.toUpperCase() ?? "");
+//   const [tel, setTel] = useState("");
+  
+//   const handleChangePhone = (phone) => {
+//     if (phone.length == 0) {
+//       setTel("");
+//       setCode("");
+//       return;
+//     }
+//     if (!phone.startsWith("+")) phone = "+".concat(phone);
+//     if (phone.length >= 5) {
+//       setTel(phone);
+//       return;
+//     }
+//     let findDialCode = Countries.find((country) => country.dial_code == phone);
+//     if (findDialCode != undefined && findDialCode != null) {
+//       setCode(findDialCode.code);
+//     }
+//     setTel(phone);
+//   };
+
+//   return (
+//     <div
+//       style={{
+//         display: "flex",
+//         flexDirection: "row",
+//         justifyContent: "center",
+//         alignItems: "center",
+//         height: "100%"
+//       }}
+//     >
+//       <div style={{ maxWidth: "50px", height: "100%" }}>
+//         <select
+//           style={{
+//             width: 38,
+//             height: 40,
+//             scale: 1.2,
+//             borderRight: "none",
+//             borderTop: "none",
+//             borderTopLeftRadius: 10
+//           }}
+//           onChange={(e) => {
+//             setCode(e.target.value);
+//             setTel(
+//               Countries.find((country) => country.code == e.target.value)
+//                 .dial_code
+//             );
+//           }}
+//           defaultValue={code}
+//           value={code}
+//         >
+//           {Countries.map((country) => (
+//             <option
+//               value={country.code}
+//               dangerouslySetInnerHTML={{
+//                 __html: country.unicode + " " + country.name
+//               }}
+//               key={country.name + "_" + country.code}
+//             ></option>
+//           ))}
+//         </select>
+//       </div>
+
+//       <Input
+//         type="tel"
+//         style={{ borderBottomLeftRadius: 0, borderTopLeftRadius: 0 }}
+//         onChange={(e) => handleChangePhone(e.target.value)}
+//         value={tel}
+//       />
+//     </div>
+//   );
+// }

package/src/elements/{AdaptiveButton.js → ResponsiveButton.js}

@@ -3,7 +3,7 @@ import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import PropTypes from "prop-types";
 
-export const AdaptiveButton = (props) => {
+export const ResponsiveButton = (props) => {
   if (props.showText) {
     return (
       <Button variant="adaptive-dark" onClick={props.onClick}>
@@ -24,7 +24,7 @@ export const AdaptiveButton = (props) => {
   }
 };
 
-AdaptiveButton.propTypes = {
+ResponsiveButton.propTypes = {
   buttonText: PropTypes.string,
   onClick: PropTypes.func,
   showText: PropTypes.bool,

package/src/elements/index.js

@@ -1,4 +1,4 @@
-export * from "./AdaptiveButton";
+export * from "./ResponsiveButton";
 export * from "./ActionButton";
 export * from "./HawaSnackbar";
 export * from "./HawaCheckbox";
@@ -20,4 +20,6 @@ export * from "./HawaSearchBar";
 export * from "./HawaAccordian";
 export * from "./DragDropImages";
 export * from "./DraggableCard";
-export * from "./HawaPhoneInput"
+export * from "./HawaPhoneInput";
+export * from "./HawaPhoneInput2";
+export * from "./HawaDrawerItem";

package/src/layout/HawaBottomAppBar.js

@@ -0,0 +1,76 @@
+import { AppBar, Paper, Box, IconButton, Typography } from "@mui/material";
+
+export function HawaBottomAppBar({ args }) {
+  return (
+    <AppBar
+      position="fixed"
+      sx={args.sx}
+      style={{
+        bottom: 0,
+        top: "auto",
+        padding: 10,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-evenly"
+      }}
+      color={args.color}
+    >
+      <BottomAppBar appBarContent={args.appBarContent} />
+    </AppBar>
+  );
+}
+
+export function BottomAppBar(props) {
+  return (
+    <Paper
+      elevation={3}
+      style={{
+        width: "100%",
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-evenly",
+        borderRadius: 10,
+        alignContent: "center",
+        padding: 10
+      }}
+      variant="outlined"
+    >
+      {props.appBarContent.map(({ label, icon, action }) => (
+        <SubAppBarContent label={label} icon={icon} action={action} />
+      ))}
+    </Paper>
+  );
+}
+
+function SubAppBarContent(props) {
+  return (
+    <Box
+      display="flex"
+      flexDirection="row"
+      justifyContent="center"
+      alignItems="center"
+      sx={{
+        "&:hover": {
+          cursor: "pointer",
+          color: "blue"
+        }
+      }}
+      onClick={props.action}
+    >
+      <IconButton
+        sx={{
+          ml: 1,
+          "&.MuiButtonBase-root:hover": {
+            color: "blue",
+            bgcolor: "transparent"
+          }
+        }}
+      >
+        {props.icon}
+      </IconButton>
+      <Typography sx={{ display: { xs: "none", sm: "none", md: "block" } }}>
+        {props.label}
+      </Typography>
+    </Box>
+  );
+}

package/src/layout/HawaDrawer.js

@@ -0,0 +1,109 @@
+import * as React from "react";
+import PropTypes from "prop-types";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import CssBaseline from "@mui/material/CssBaseline";
+import Divider from "@mui/material/Divider";
+import Drawer from "@mui/material/Drawer";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Toolbar from "@mui/material/Toolbar";
+import SplitscreenIcon from "@mui/icons-material/Splitscreen";
+import StyleIcon from "@mui/icons-material/Style";
+import SettingsIcon from "@mui/icons-material/Settings";
+
+export function HawaDrawer(props) {
+  const { window, children } = props;
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const [drawerMaxWidth, setDrawerMaxWidth] = React.useState(
+    props.drawerMaxWidth ?? 240
+  );
+
+  const handleDrawerToggle = () => {
+    props.handleDrawerToggle();
+    setMobileOpen(!mobileOpen);
+  };
+
+  const drawer = (
+    <div>
+      <Toolbar />
+      <Divider />
+      <List>
+        {props.drawerContent.map(({ label, icon, action }, index) => (
+          <ListItem key={label} disablePadding onClick={props.action}>
+            <ListItemButton>
+              <ListItemIcon>{icon}</ListItemIcon>
+              <ListItemText primary={label} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </div>
+  );
+
+  const container =
+    window !== undefined ? () => window().document.body : undefined;
+
+  return (
+    <Box sx={{ display: "flex" }}>
+      <CssBaseline />
+      <Box
+        component="nav"
+        sx={{ width: { sm: drawerMaxWidth }, flexShrink: { sm: 0 } }}
+        aria-label="mailbox folders"
+      >
+        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
+        <Drawer
+          container={container}
+          variant="temporary"
+          open={mobileOpen}
+          onClose={handleDrawerToggle}
+          ModalProps={{
+            keepMounted: true // Better open performance on mobile.
+          }}
+          sx={{
+            display: { xs: "block", sm: "none" },
+            "& .MuiDrawer-paper": {
+              boxSizing: "border-box",
+              width: drawerMaxWidth
+            }
+          }}
+        >
+          {drawer}
+        </Drawer>
+        <Drawer
+          variant="permanent"
+          sx={{
+            display: { xs: "none", sm: "block" },
+            "& .MuiDrawer-paper": {
+              boxSizing: "border-box",
+              width: drawerMaxWidth
+            }
+          }}
+          open
+        >
+          {drawer}
+        </Drawer>
+      </Box>
+
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          p: 3,
+          width: { sm: `calc(100% - ${drawerMaxWidth}px)` }
+        }}
+        // style={{
+        //   backgroundColor: "red",
+        //   height: "100%"
+        // }}
+      >
+        {/* <Toolbar /> */}
+        {children}
+      </Box>
+    </Box>
+  );
+}

package/src/layout/HawaLayout.js

@@ -0,0 +1,80 @@
+import React from "react";
+// import PropTypes from "prop-types";
+import "flowbite";
+import HawaDrawerItem from "../elements/HawaDrawerItem";
+export const HawaLayout = (props) => {
+  return (
+    <div>
+      <button
+        data-drawer-target="drawer-navigation"
+        data-drawer-show="drawer-navigation"
+        aria-controls="drawer-navigation"
+        type="button"
+        class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+      >
+        <span class="sr-only">Open main menu</span>
+        <svg
+          aria-hidden="true"
+          class="w-6 h-6"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+            clip-rule="evenodd"
+          ></path>
+        </svg>
+      </button>
+
+      <div
+        id="drawer-navigation"
+        class="fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800"
+        tabindex="-1"
+        aria-labelledby="drawer-navigation-label"
+      >
+        <h5
+          id="drawer-navigation-label"
+          class="text-base font-semibold text-gray-500 uppercase dark:text-gray-400"
+        >
+          {props.appTitle}
+        </h5>
+        <button
+          type="button"
+          data-drawer-dismiss="drawer-navigation"
+          aria-controls="drawer-navigation"
+          class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+        >
+          <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 menu</span>
+        </button>
+        <div class="py-4 overflow-y-auto">
+          <ul class="space-y-2">
+            {props.drawerItems.map((item, i) => {
+              return <HawaDrawerItem key={i} text={item.text} />;
+            })}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ResponsiveButton.propTypes = {
+//   buttonText: PropTypes.string,
+//   onClick: PropTypes.func,
+//   showText: PropTypes.bool,
+// };

package/src/layout/index.js

@@ -3,3 +3,6 @@ export * from "./HawaAppLayout";
 export * from "./HawaDialog";
 export * from "./HawaAppBar";
 export * from "./HawaPageControls";
+export * from "./HawaBottomAppBar";
+export * from "./HawaDrawer";
+export * from "./HawaLayout";