@sikka/hawa 0.0.43 → 0.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.43",
+  "version": "0.0.45",
   "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/HawaAccordian.js

@@ -1,25 +1,111 @@
 import React from "react";
-import ExpandMore from "@mui/icons-material/ExpandMore";
-import Typography from "@mui/material/Typography";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
 import PropTypes from "prop-types";
+import "flowbite";
 
-export const HawaAccordian = (props) => {
+const AccordionItem = (props) => {
+  let noRounding =
+    "flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
+  let roundedTop =
+    "rounded-t-xl border-b-0 flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
+  let roundedBottom =
+    "rounded-b-xl border-t-0 flex items-center justify-between w-full p-5 font-medium text-left border border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white";
+  let accPaper =
+    "p-5 font-light border border-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900";
+  let accPaperRounded =
+    "p-5 font-light border border-b-xl rounded-b-xl border-gray-200 dark:border-gray-700 dark:bg-gray-900";
   return (
-    <Accordion elevation={0}>
-      <AccordionSummary
-        expandIcon={<ExpandMore />}
-        aria-controls="panel1a-content"
-        id="panel1a-header"
+    <div>
+      <h2 id={"accordion-collapse-heading-" + props.count}>
+        <button
+          type="button"
+          className={
+            props.count === 0 ? roundedTop : noRounding
+            // : props.count === -1
+            // ? roundedBottom
+            // : noRounding
+          }
+          data-accordion-target={"#accordion-collapse-body-" + props.count}
+          aria-expanded="true"
+          aria-controls={"accordion-collapse-body-" + props.count}
+        >
+          <span>What is Flowbite?</span>
+          <svg
+            data-accordion-icon=""
+            className="w-6 h-6 rotate-180 shrink-0"
+            fill="currentColor"
+            viewBox="0 0 20 20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </button>
+      </h2>
+      <div
+        id={"accordion-collapse-body-" + props.count}
+        className=""
+        aria-labelledby={"accordion-collapse-heading-" + props.count}
       >
-        <Typography>{props.title}</Typography>
-      </AccordionSummary>
-      <AccordionDetails>
-        <Typography>{props.content} </Typography>
-      </AccordionDetails>
-    </Accordion>
+        <div className={props.count === -1 ? accPaperRounded : accPaper}>
+          <p className="mb-2 text-gray-500 dark:text-gray-400">
+            Flowbite is an open-source library of interactive components built
+            on top of Tailwind CSS including buttons, dropdowns, modals,
+            navbars, and more.
+          </p>
+          <p className="text-gray-500 dark:text-gray-400">
+            Check out this guide to learn how to{" "}
+            <a
+              href="/docs/getting-started/introduction/"
+              class="text-blue-600 dark:text-blue-500 hover:underline"
+            >
+              get started
+            </a>{" "}
+            and start developing websites even faster with components on top of
+            Tailwind CSS.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+export const HawaAccordian = (props) => {
+  let accordionContent = [
+    { title: "etete", content: "teoite" },
+    { title: "etete", content: "teoite" },
+    { title: "etete", content: "teoite" },
+    { title: "etete", content: "teoite" }
+  ];
+  return (
+    <div id="accordion-collapse" data-accordion="collapse">
+      {accordionContent.map((acc, i) => {
+        return (
+          <AccordionItem
+            title={acc.title}
+            content={acc.content}
+            count={accordionContent.length - 1 === i ? -1 : i}
+          />
+        );
+      })}
+      {/* <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/HawaAlert.js

@@ -1,14 +1,27 @@
 import React from "react";
-import Alert from "@mui/material/Alert";
-import AlertTitle from "@mui/material/AlertTitle";
 import PropTypes from "prop-types";
 
 export const HawaAlert = (props) => {
+  let severities = {
+    info: "text-blue-700 bg-blue-100 dark:bg-blue-200 dark:text-blue-800",
+    warning:
+      "text-yellow-700 bg-yellow-100 dark:bg-yellow-200 dark:text-yellow-800",
+    error: "text-red-700 bg-red-100 dark:bg-red-200 dark:text-red-800",
+    success: "text-green-700 bg-green-100 dark:bg-green-200 dark:text-green-800"
+  };
+
   return (
-    <Alert severity={props.severity} icon={props.hideIcon}>
-      {props.title && <AlertTitle>{props.title}</AlertTitle>}
-      {props.text}
-    </Alert>
+    <div
+      class={
+        "flex flex-col p-4 mb-4 text-sm rounded-lg" +
+        " " +
+        severities[props.severity]
+      }
+      role="alert"
+    >
+      <span class="font-medium">{props.title}</span>
+      <span>{" " + props.text}</span>
+    </div>
   );
 };
 HawaAlert.propTypes = {

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

@@ -5,16 +5,31 @@ import Checkbox from "@mui/material/Checkbox";
 export const HawaCheckbox = (props) => {
   console.log("props : ", props);
   return (
-    <React.Fragment>
-      <FormControlLabel
-        label={props.label}
-        control={
-          <Checkbox
-            style={{ color: props.color || null }}
-            defaultChecked={props.defaultValue}
-          />
-        }
+    <div class="flex items-center mb-4">
+      <input
+        id="default-checkbox"
+        type="checkbox"
+        value=""
+        class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
       />
-    </React.Fragment>
+      <label
+        for="default-checkbox"
+        class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+      >
+        Default checkbox
+      </label>
+    </div>
+
+    // <React.Fragment>
+    //   <FormControlLabel
+    //     label={props.label}
+    //     control={
+    //       <Checkbox
+    //         style={{ color: props.color || null }}
+    //         defaultChecked={props.defaultValue}
+    //       />
+    //     }
+    //   />
+    // </React.Fragment>
   );
 };

package/src/elements/HawaChip.js

@@ -1,6 +1,9 @@
 import React from "react";
-import Chip from "@mui/material/Chip";
 
 export const HawaChip = (props) => {
-  return <Chip {...props} />;
+  return (
+    <span class="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800">
+      {props.label}
+    </span>
+  );
 };

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>
+  );
+}