@sikka/hawa 0.0.52 → 0.0.54

package/package.json

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

package/src/elements/DragDropImages.js

@@ -1,11 +1,7 @@
 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",
@@ -33,7 +29,6 @@ export const DragDropImages = ({
     const [cmp, setCmp] = useState(0);
     const [max, setMax] = useState(0);
     //const [thumbs, setThumbs] = useState("");
-    const theme = useTheme();
     const {
       getRootProps,
       getInputProps,
@@ -95,26 +90,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 +138,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 +159,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 +173,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/HawaColorPicker.js

@@ -1,4 +1,3 @@
-import { useTheme } from "@mui/system";
 import React from "react";
 import styled from "@emotion/styled";
 import PropTypes from "prop-types";
@@ -36,13 +35,13 @@ const ColorText = styled.input`
   }
 `;
 export const HawaColorPicker = (props) => {
-  const theme = useTheme();
+  // const theme = useTheme();
   return (
     <div style={{ display: "flex", flexDirection: "row" }}>
       <ColorText
         type={"text"}
         value={props.color}
-        borderRadius={theme.allBorderRadius}
+        // borderRadius={theme.allBorderRadius}
         onChange={props.handleChange}
       />
       <div style={{ width: 10 }} />
@@ -50,7 +49,7 @@ export const HawaColorPicker = (props) => {
         type={"color"}
         value={props.color}
         onChange={props.handleChange}
-        borderRadius={theme.allBorderRadius}
+        // borderRadius={theme.allBorderRadius}
       />
     </div>
   );

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

package/src/elements/HawaTypography.js

@@ -1,6 +1,5 @@
 import React from "react";
-import Typography from "@mui/material/Typography";
 
 export const HawaTypography = (props) => {
-  return <Typography {...props}>{props.children}</Typography>;
+  return <div {...props}>{props.children}</div>;
 };

package/src/elements/PinInput.js

@@ -1,14 +1,4 @@
-import {
-  Input,
-  makeStyles,
-  TextField,
-  InputLabel,
-  Typography,
-  Stack
-} from "@mui/material";
-import { object } from "prop-types";
 import React, { useEffect, useState } from "react";
-import { replaceAt } from "../util";
 
 export const HawaPinInput = ({
   children,
@@ -86,24 +76,25 @@ export const HawaPinInput = ({
             alignItems: "center"
           }}
         >
-          {props.label && <InputLabel>{props.label}</InputLabel>}
+          {props.label && (
+            <label
+              for="first_name"
+              className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
+            >
+              {props.label}
+            </label>
+          )}
+
           {props.helperText && (
-            <Typography
+            <div
               style={{ marginBottom: !props.label && 10 }}
               variant="validation"
             >
               {props.helperText}
-            </Typography>
+            </div>
           )}
         </div>
-        <Stack
-          direction={"row"}
-          spacing={2}
-          justifyContent="center"
-          alignItems={"center"}
-        >
-          {childrenWithProps}
-        </Stack>
+        <div>{childrenWithProps}</div>
       </div>
     </div>
   );
@@ -111,7 +102,8 @@ export const HawaPinInput = ({
 
 export const HawaPinInputField = (props) => {
   return (
-    <Input
+    <input
+      className="w-12 rounded-lg mx-2"
       type={props.type && props.type == "alphanumeric" ? "text" : "number"}
       id={"pinInput" + props.index}
       defaultValue={props.defaultValue || ""}

package/src/elements/RadioBox.js

@@ -1,29 +1,29 @@
-import React from "react";
-import { Controller, useFormContext } from "react-hook-form";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Checkbox from "@mui/material/Checkbox";
+// import React from "react";
+// import { Controller, useFormContext } from "react-hook-form";
+// import FormControlLabel from "@mui/material/FormControlLabel";
+// import Checkbox from "@mui/material/Checkbox";
 
-export const StyledRadioBox = (props) => {
-  const { control } = useFormContext();
-  const { name, defaultValue, rules, shouldUnregister } = props;
+// export const StyledRadioBox = (props) => {
+//   const { control } = useFormContext();
+//   const { name, defaultValue, rules, shouldUnregister } = props;
 
-  return (
-    <React.Fragment>
-      <Controller
-        render={({ field }) => (
-          <FormControlLabel
-            control={<Checkbox />}
-            {...props}
-            {...field}
-            checked={field.value}
-          />
-        )}
-        name={name}
-        rules={rules}
-        control={control}
-        defaultValue={defaultValue}
-        shouldUnregister={shouldUnregister}
-      />
-    </React.Fragment>
-  );
-};
+//   return (
+//     <React.Fragment>
+//       <Controller
+//         render={({ field }) => (
+//           <FormControlLabel
+//             control={<Checkbox />}
+//             {...props}
+//             {...field}
+//             checked={field.value}
+//           />
+//         )}
+//         name={name}
+//         rules={rules}
+//         control={control}
+//         defaultValue={defaultValue}
+//         shouldUnregister={shouldUnregister}
+//       />
+//     </React.Fragment>
+//   );
+// };

package/src/elements/SelectedField.js

@@ -1,46 +1,46 @@
-import React from "react";
-import { Controller, useFormContext } from "react-hook-form";
-import FormHelperText from "@mui/material/FormHelperText";
-import FormControl from "@mui/material/FormControl";
-import MenuItem from "@mui/material/MenuItem";
-import Select from "@mui/material/Select";
+// import React from "react";
+// import { Controller, useFormContext } from "react-hook-form";
+// import FormHelperText from "@mui/material/FormHelperText";
+// import FormControl from "@mui/material/FormControl";
+// import MenuItem from "@mui/material/MenuItem";
+// import Select from "@mui/material/Select";
 
-const MuiSelect = (props) => {
-  const { name, options, required, error } = props;
-  let isError = false;
-  let errorMessage = "";
-  if (error && error.hasOwnProperty(name)) {
-    isError = true;
-    errorMessage = error[name].message;
-  }
+// const MuiSelect = (props) => {
+//   const { name, options, required, error } = props;
+//   let isError = false;
+//   let errorMessage = "";
+//   if (error && error.hasOwnProperty(name)) {
+//     isError = true;
+//     errorMessage = error[name].message;
+//   }
 
-  return (
-    <FormControl fullWidth={true} error={isError}>
-      {label} {required ? <span className="req-label">*</span> : null}
-      <Select id={name} {...props}>
-        <MenuItem value="">
-          <em>None</em>
-        </MenuItem>
-        {options.map((item) => (
-          <MenuItem key={item.id} value={item.id}>
-            {item.label}
-          </MenuItem>
-        ))}
-      </Select>
-      <FormHelperText>{errorMessage}</FormHelperText>
-    </FormControl>
-  );
-};
+//   return (
+//     <FormControl fullWidth={true} error={isError}>
+//       {label} {required ? <span className="req-label">*</span> : null}
+//       <Select id={name} {...props}>
+//         <MenuItem value="">
+//           <em>None</em>
+//         </MenuItem>
+//         {options.map((item) => (
+//           <MenuItem key={item.id} value={item.id}>
+//             {item.label}
+//           </MenuItem>
+//         ))}
+//       </Select>
+//       <FormHelperText>{errorMessage}</FormHelperText>
+//     </FormControl>
+//   );
+// };
 
-export const SelectField = (props) => {
-  const { control } = useFormContext();
-  return (
-    <React.Fragment>
-      <Controller
-        control={control}
-        render={(field) => <MuiSelect {...props} {...field} />}
-        {...props}
-      />
-    </React.Fragment>
-  );
-};
+// export const SelectField = (props) => {
+//   const { control } = useFormContext();
+//   return (
+//     <React.Fragment>
+//       <Controller
+//         control={control}
+//         render={(field) => <MuiSelect {...props} {...field} />}
+//         {...props}
+//       />
+//     </React.Fragment>
+//   );
+// };