@sikka/hawa 0.0.51 → 0.0.53

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

package/src/elements/TabPanel.js

@@ -1,33 +1,30 @@
 import React from "react";
-import { makeStyles } from "@mui/material/styles";
 
-const useStyles = makeStyles((theme) => ({
-  panelsContainer: {
-    height: "100%",
-    width: "100%"
-  },
-  panel: {
-    backgroundColor: "var(--lightGrey)",
-    height: "100%",
-    width: "100%",
-    padding: 10
-  }
-}));
+// const useStyles = makeStyles((theme) => ({
+//   panelsContainer: {
+//     height: "100%",
+//     width: "100%"
+//   },
+//   panel: {
+//     backgroundColor: "var(--lightGrey)",
+//     height: "100%",
+//     width: "100%",
+//     padding: 10
+//   }
+// }));
 
 export const TabPanel = (props) => {
-  const classes = useStyles();
   const { children, value, index, ...other } = props;
   return (
     <div
       role="tabpanel"
-      className={classes.panelsContainer}
       hidden={value !== index}
       id={`vertical-tabpanel-${index}`}
       aria-labelledby={`vertical-tab-${index}`}
       {...other}
     >
       {value === index && (
-        <div className={classes.panel}>
+        <div>
           <span>{children}</span>
         </div>
       )}