@sikka/hawa 0.0.95 → 0.0.96

package/src/elements/HawaSettingsRow.js

@@ -1,34 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { HawaTypography } from "./HawaTypography";
-import { HawaTextField } from "./HawaTextField";
-import { HawaSwitch } from "./HawaSwitch";
-import { HawaColorPicker } from "./HawaColorPicker";
-import { HawaRange } from "./HawaRange";
-import { HawaCheckbox } from "./HawaCheckbox";
-import { HawaTabs } from "./HawaTabs";
-
-export const HawaSettingsRow = (props) => {
-  return (
-    <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" && <HawaCheckbox {...props} />}
-      {props.settingsType === "text" && <HawaTextField {...props} />}
-      {props.settingsType === "boolean" && <HawaSwitch {...props} />}
-      {props.settingsType === "range" && <HawaRange {...props} />}
-      {props.settingsType === "color" && <HawaColorPicker {...props} />}
-      {props.settingsType === "radio" && <HawaTabs {...props} />}
-    </div>
-  );
-};
-
-HawaSettingsRow.propTypes = {
-  settingsLabel: PropTypes.string,
-  settingsType: PropTypes.oneOf([
-    "checkbox",
-    "text",
-    "radio",
-    "boolean",
-    "color"
-  ])
-};

package/src/elements/HawaSnackbar.js

@@ -1,44 +0,0 @@
-import React from "react";
-
-export const HawaSnackbar = (props) => {
-  
-  let severities = {
-    info: "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-blue-700 bg-blue-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
-    warning:
-      "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-yellow-700 bg-yellow-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
-    error:
-      "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-red-700 bg-red-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
-    success:
-      "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-green-700 bg-green-100 rounded-lg shadow dark:text-gray-400 dark:bg-gray-800",
-    none: "bottom-4 fixed flex items-center p-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800"
-  };
-  return (
-    <div id="toast-default" role="alert" className={severities[props.severity]}>
-      <div>
-        <div className="ml-3 text-sm font-bold">{props.title}</div>
-        <div className="ml-3 text-sm font-normal">{props.text}</div>
-      </div>
-      <button
-        type="button"
-        className="ml-auto -mx-1.5 -my-1.5 text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
-        data-dismiss-target="#toast-default"
-        aria-label="Close"
-      >
-        <span className="sr-only">Close</span>
-        <svg
-          aria-hidden="true"
-          className="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>
-      </button>
-    </div>
-  );
-};

package/src/elements/HawaSwitch.js

@@ -1,21 +0,0 @@
-import React from "react";
-
-export const HawaSwitch = (props) => {
-  return (
-    <label
-    htmlFor="default-toggle"
-      className="inline-flex relative items-center cursor-pointer"
-    >
-      <input
-        type="checkbox"
-        value=""
-        id="default-toggle"
-        className="sr-only peer"
-      />
-      <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-      <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">
-        {props.text}
-      </span>
-    </label>
-  );
-};

package/src/elements/HawaTextField.js

@@ -1,34 +0,0 @@
-import React from "react";
-
-export const HawaTextField = (props) => {
-  return (
-    <div className="mb-3">
-      <label
-        htmlFor="first_name"
-        className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-      >
-        {props.label}
-      </label>
-      {props.multiline ? (
-        <textarea
-          id="message"
-          rows="4"
-          className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 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"
-          placeholder="Your message..."
-        ></textarea>
-      ) : (
-        <input
-          {...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"
-        />
-      )}
-
-      {props.helperText && (
-        <p className="mx-2 mt-1 text-xs text-red-600 dark:text-red-500">
-          {/* <span className="font-medium">Oh, snapp!</span> */}
-          {props.helperText}
-        </p>
-      )}
-    </div>
-  );
-};

package/src/elements/HawaTooltip.js

@@ -1,19 +0,0 @@
-import React from "react";
-
-export const HawaTooltip = (props) => {
-  return (
-    <div>
-      <div
-        id={props.tooltipID}
-        role="tooltip"
-        // className="inline-block absolute py-2 px-3"
-        className="inline-block opacity-0 absolute z-10 py-2 px-3 text-sm font-medium text-white bg-gray-900 rounded-lg shadow-sm transition-opacity duration-300 tooltip dark:bg-gray-700"
-      >
-        {props.content}
-        <div className="tooltip-arrow" data-popper-arrow></div>
-      </div>
-
-      <div onMouseEnter={() => console.log("hovering")}>{props.children}</div>
-    </div>
-  );
-};

package/src/elements/HawaTypography.js

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

package/src/elements/PinInput.js

@@ -1,141 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-export const HawaPinInput = ({
-  children,
-  type,
-  defaultValue,
-  onChange,
-  onComplete,
-  ...props
-}) => {
-  const [value, setValue] = useState(
-    defaultValue ? defaultValue.split("") : []
-  );
-  const [pinLength, setPinLength] = useState(0);
-
-  useEffect(() => {
-    let length = 0;
-    React.Children.map(children, (child) => {
-      if (
-        React.isValidElement(child) &&
-        child.type?.displayName &&
-        child.type?.displayName === "HawaPinInputField"
-      ) {
-        length++;
-      }
-    });
-    setPinLength(length);
-  }, []);
-
-  const childrenWithProps = React.Children.map(children, (child, index) => {
-    if (React.isValidElement(child)) {
-      if (
-        child.type?.displayName &&
-        child.type?.displayName === "HawaPinInputField" &&
-        defaultValue &&
-        defaultValue[index]
-      ) {
-        return React.cloneElement(child, {
-          type,
-          defaultValue: defaultValue[index],
-          index: index,
-          setValue: setValue,
-          value: value,
-          onChangeAction: (currentValue) => onChange(currentValue),
-          onCompleteAction: (finalValue) => onComplete(finalValue),
-          pinLength: pinLength
-        });
-      }
-      return React.cloneElement(child, {
-        type,
-        setValue: setValue,
-        value: value,
-        index: index,
-        onChangeAction: (currentValue) => onChange(currentValue),
-        onCompleteAction: (finalValue) => onComplete(finalValue),
-        pinLength: pinLength
-      });
-    }
-    return child;
-  });
-
-  useEffect(() => {
-    if (value.length === pinLength) {
-      onComplete(value);
-    }
-  }, [value]);
-
-  return (
-    <div style={props.inForm && { width: "100%" }}>
-      <div style={{ width: props.fullWidth ? "100%" : "fit-content" }}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "space-between",
-            alignItems: "center"
-          }}
-        >
-          {props.label && (
-            <label
-            htmlFor="first_name"
-              className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
-            >
-              {props.label}
-            </label>
-          )}
-
-          {props.helperText && (
-            <div
-              style={{ marginBottom: !props.label && 10 }}
-              variant="validation"
-            >
-              {props.helperText}
-            </div>
-          )}
-        </div>
-        <div>{childrenWithProps}</div>
-      </div>
-    </div>
-  );
-};
-
-export const HawaPinInputField = (props) => {
-  return (
-    <input
-      className="w-12 rounded-lg mx-2"
-      type={props.type && props.type == "alphanumeric" ? "text" : "number"}
-      id={"pinInput" + props.index}
-      defaultValue={props.defaultValue || ""}
-      variant="pin"
-      onKeyDown={(e) => {
-        if (e.key === "Backspace") {
-          let i = document.getElementById("pinInput" + (props.index - 1));
-          if (e) {
-            i.focus();
-          }
-        }
-      }}
-      disableUnderline
-      inputProps={{ maxLength: 1 }}
-      onChange={(e) => {
-        let newValue = props.value;
-        newValue[props.index] = e.target.value;
-        props.setValue(newValue);
-        props.onChangeAction(newValue.toString().replaceAll(",", ""));
-        if (
-          parseInt(e.target.attributes["maxlength"].value) >= 1 &&
-          e.target.value != ""
-        ) {
-          let i = document.getElementById("pinInput" + (props.index + 1));
-          if (i != null) {
-            i.focus();
-          }
-        }
-        if (props.value.length === props.pinLength) {
-          props.onCompleteAction(props.value.toString().replaceAll(",", ""));
-        }
-      }}
-    />
-  );
-};

package/src/elements/SelectedField.js

@@ -1,46 +0,0 @@
-// 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;
-//   }
-
-//   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>
-//   );
-// };

package/src/index.js

@@ -1,3 +0,0 @@
-export * from "./blocks";
-export * from "./elements";
-export * from "./layout";

package/src/layout/Box.js

@@ -1,5 +0,0 @@
-import React from "react";
-
-export const Box = (props) => {
-  return <div>{props.children}</div>;
-};

package/src/layout/HawaAppLayout.js

@@ -1,245 +0,0 @@
-// import * as React from "react";
-// import { styled, useTheme } from "@mui/material/styles";
-// import Box from "@mui/material/Box";
-// import Drawer from "@mui/material/Drawer";
-// import CssBaseline from "@mui/material/CssBaseline";
-// import MuiAppBar from "@mui/material/AppBar";
-// import Toolbar from "@mui/material/Toolbar";
-// import List from "@mui/material/List";
-// import Typography from "@mui/material/Typography";
-// import Divider from "@mui/material/Divider";
-// import IconButton from "@mui/material/IconButton";
-// import MenuIcon from "@mui/icons-material/Menu";
-// import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
-// import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-// import ListItem from "@mui/material/ListItem";
-// import ListItemIcon from "@mui/material/ListItemIcon";
-// import ListItemText from "@mui/material/ListItemText";
-// import InboxIcon from "@mui/icons-material/MoveToInbox";
-// import MailIcon from "@mui/icons-material/Mail";
-
-// const drawerWidth = 240;
-
-// const Main = styled("main", { shouldForwardProp: (prop) => prop !== "open" })(
-//   ({ theme, open, direction }) => ({
-//     flexGrow: 1,
-//     padding: theme.spacing(3),
-//     transition: theme.transitions.create("margin", {
-//       easing: theme.transitions.easing.sharp,
-//       duration: theme.transitions.duration.leavingScreen
-//     }),
-//     marginLeft: direction === "rtl" ? 0 : `-${drawerWidth}px`,
-//     marginRight: direction === "rtl" ? `-${drawerWidth}px` : 0,
-//     ...(open && {
-//       transition: theme.transitions.create("margin", {
-//         easing: theme.transitions.easing.easeOut,
-//         duration: theme.transitions.duration.enteringScreen
-//       }),
-//       marginLeft: direction === "ltr" && 0,
-//       marginRight: direction === "rtl" && 0
-//     })
-//   })
-// );
-
-// const AppBar = styled(MuiAppBar, {
-//   shouldForwardProp: (prop) => prop !== "open"
-// })(({ theme, open, direction }) => ({
-//   transition: theme.transitions.create(["margin", "width"], {
-//     easing: theme.transitions.easing.sharp,
-//     duration: theme.transitions.duration.leavingScreen
-//   }),
-//   ...(open && {
-//     width: `calc(100% - ${drawerWidth}px)`,
-//     marginLeft: direction === "rtl" ? 0 : `${drawerWidth}px`,
-//     marginRight: direction === "rtl" ? `${drawerWidth}px` : 0,
-//     // marginLeft: `${drawerWidth}px`,
-//     transition: theme.transitions.create(["margin", "width"], {
-//       easing: theme.transitions.easing.easeOut,
-//       duration: theme.transitions.duration.enteringScreen
-//     })
-//   })
-// }));
-
-// const DrawerHeader = styled("div")(({ theme }) => ({
-//   display: "flex",
-//   alignItems: "center",
-//   padding: theme.spacing(0, 1),
-//   // necessary for content to be below app bar
-//   ...theme.mixins.toolbar,
-//   justifyContent: "flex-end"
-// }));
-
-// export const HawaAppLayout = (props) => {
-//   const theme = useTheme();
-//   const [open, setOpen] = React.useState(false);
-//   const isArabic = props.lang === "ar";
-//   const handleDrawerOpen = () => {
-//     setOpen(true);
-//   };
-
-//   const handleDrawerClose = () => {
-//     setOpen(false);
-//   };
-
-//   return (
-//     <Box sx={{ display: "flex" }}>
-//       <CssBaseline />
-//       <AppBar
-//         position="fixed"
-//         open={open}
-//         direction={isArabic ? "rtl" : "ltr"}
-//         style={{
-//           alignItems: isArabic ? "flex-end" : "flex-start",
-//           justifyContent: "center"
-//         }}
-//       >
-//         <Toolbar>
-//           {isArabic ? (
-//             <>
-//               <Typography variant="h6" noWrap component="div">
-//                 Persistent drawer
-//               </Typography>
-//               <IconButton
-//                 color="inherit"
-//                 aria-label="open drawer"
-//                 onClick={handleDrawerOpen}
-//                 edge={isArabic ? "end" : "start"}
-//                 sx={{ mr: 2, ...(open && { display: "none" }) }}
-//               >
-//                 <MenuIcon />
-//               </IconButton>
-//             </>
-//           ) : (
-//             <>
-//               <IconButton
-//                 color="inherit"
-//                 aria-label="open drawer"
-//                 onClick={handleDrawerOpen}
-//                 edge={isArabic ? "end" : "start"}
-//                 sx={{
-//                   marginRight: isArabic ? 0 : 2,
-//                   marginLeft: isArabic ? 2 : 0,
-//                   ...(open && { display: "none" })
-//                 }}
-//               >
-//                 <MenuIcon />
-//               </IconButton>
-//               <Typography variant="h6" noWrap component="div">
-//                 Persistent drawer
-//               </Typography>
-//             </>
-//           )}
-//         </Toolbar>
-//       </AppBar>
-//       {!isArabic ? (
-//         <>
-//           <Drawer
-//             sx={{
-//               width: drawerWidth,
-//               flexShrink: 0,
-//               "& .MuiDrawer-paper": {
-//                 width: drawerWidth,
-//                 boxSizing: "border-box"
-//               }
-//             }}
-//             variant="persistent"
-//             anchor={isArabic ? "right" : "left"}
-//             open={open}
-//           >
-//             <DrawerHeader>
-//               <IconButton onClick={handleDrawerClose}>
-//                 {theme.direction === "ltr" ? (
-//                   <ChevronLeftIcon />
-//                 ) : (
-//                   <ChevronRightIcon />
-//                 )}
-//               </IconButton>
-//             </DrawerHeader>
-//             <Divider />
-//             <List>
-//               {["Inbox", "Starred", "Send email", "Drafts"].map(
-//                 (text, index) => (
-//                   <ListItem button key={text}>
-//                     <ListItemIcon>
-//                       {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-//                     </ListItemIcon>
-//                     <ListItemText primary={text} />
-//                   </ListItem>
-//                 )
-//               )}
-//             </List>
-//             <Divider />
-//             <List>
-//               {["All mail", "Trash", "Spam"].map((text, index) => (
-//                 <ListItem button key={text}>
-//                   <ListItemIcon>
-//                     {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-//                   </ListItemIcon>
-//                   <ListItemText primary={text} />
-//                 </ListItem>
-//               ))}
-//             </List>
-//           </Drawer>
-//           <Main open={open} direction={isArabic ? "rtl" : "ltr"}>
-//             <DrawerHeader />
-//             {props.children}
-//           </Main>
-//         </>
-//       ) : (
-//         <>
-//           <Main open={open} direction={isArabic ? "rtl" : "ltr"}>
-//             <DrawerHeader />
-//             {props.children}
-//           </Main>
-//           <Drawer
-//             sx={{
-//               width: drawerWidth,
-//               flexShrink: 0,
-//               "& .MuiDrawer-paper": {
-//                 width: drawerWidth,
-//                 boxSizing: "border-box"
-//               }
-//             }}
-//             variant="persistent"
-//             anchor={isArabic ? "right" : "left"}
-//             open={open}
-//           >
-//             <DrawerHeader>
-//               <IconButton onClick={handleDrawerClose}>
-//                 {theme.direction === "ltr" ? (
-//                   <ChevronLeftIcon />
-//                 ) : (
-//                   <ChevronRightIcon />
-//                 )}
-//               </IconButton>
-//             </DrawerHeader>
-//             <Divider />
-//             <List>
-//               {["Inbox", "Starred", "Send email", "Drafts"].map(
-//                 (text, index) => (
-//                   <ListItem button key={text}>
-//                     <ListItemIcon>
-//                       {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-//                     </ListItemIcon>
-//                     <ListItemText primary={text} />
-//                   </ListItem>
-//                 )
-//               )}
-//             </List>
-//             <Divider />
-//             <List>
-//               {["All mail", "Trash", "Spam"].map((text, index) => (
-//                 <ListItem button key={text}>
-//                   <ListItemIcon>
-//                     {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-//                   </ListItemIcon>
-//                   <ListItemText primary={text} />
-//                 </ListItem>
-//               ))}
-//             </List>
-//           </Drawer>
-//         </>
-//       )}
-//     </Box>
-//   );
-// };