@sikka/hawa 0.0.94 → 0.0.96

package/src/elements/HawaSettingsRow.tsx

@@ -0,0 +1,56 @@
+import React from "react"
+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"
+
+type SettingsRowTypes = {
+  settingsLabel: any
+  settingsType: any
+  // settingsType: PropTypes.oneOf([
+  //     "checkbox",
+  //     "text",
+  //     "radio",
+  //     "boolean",
+  //     "color",
+  //   ]),
+}
+
+export const HawaSettingsRow: React.FunctionComponent<SettingsRowTypes> = (
+  props
+) => {
+  return (
+    <div className="my-2 flex max-h-fit flex-row items-center justify-between rounded-xl bg-white px-4 py-2 pr-2 align-middle">
+      <HawaTypography>{props.settingsLabel}</HawaTypography>
+      {props.settingsType === "checkbox" && (
+        <HawaCheckbox centered {...props} />
+      )}
+      {props.settingsType === "text" && (
+        <HawaTextField margin="none" {...props} />
+      )}
+      {props.settingsType === "boolean" && (
+        <HawaSwitch
+        // {...props}
+        />
+      )}
+      {props.settingsType === "range" && (
+        <HawaRange
+        // {...props}
+        />
+      )}
+      {props.settingsType === "color" && (
+        <HawaColorPicker
+        //  {...props}
+        />
+      )}
+      {props.settingsType === "radio" && (
+        <HawaTabs
+        // {...props}
+        />
+      )}
+    </div>
+  )
+}

package/src/elements/HawaSnackbar.tsx

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

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

package/src/elements/{HawaTable.js → HawaTable.tsx}

@@ -1,17 +1,26 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { HawaButton } from "./HawaButton";
+import React from "react"
+import { HawaButton } from "./HawaButton"
 
-export const HawaTable = (props) => {
-  let isArabic = props.lang === "ar";
+type TableTypes = {
+  lang?: any
+  columns?: any
+  actions?: any
+  rows?: any
+  noDataText?: any
+  handleActionClick?: any
+  end?: any
+}
+
+export const HawaTable: React.FunctionComponent<TableTypes> = (props) => {
+  let isArabic = props.lang === "ar"
   return (
     <>
       <div>
-        <div className="overflow-x-auto relative rounded-xl">
-          <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
-            <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <div className="relative overflow-x-auto rounded-xl">
+          <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400">
+            <thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
               <tr>
-                {props.columns.map((col, i) => (
+                {props.columns.map((col: any, i: any) => (
                   <th key={i} scope="col" className="py-3 px-6">
                     {col}
                   </th>
@@ -25,36 +34,37 @@ export const HawaTable = (props) => {
             </thead>
             <tbody>
               {props.rows ? (
-                props.rows.map((singleRow, j) => (
+                props.rows.map((singleRow: any, j: any) => (
                   <tr
-                    className="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                    className="border-b bg-white dark:border-gray-700 dark:bg-gray-800"
                     key={j}
                   >
-                    {singleRow.map((r, i) => {
+                    {singleRow.map((r: any, i: any) => {
                       if (i === 0) {
                         return (
                           <th
                             scope="row"
-                            className="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                            className="whitespace-nowrap py-4 px-6 font-medium text-gray-900 dark:text-white"
                           >
                             {r}{" "}
                           </th>
-                        );
+                        )
                       } else {
-                        return <td className="py-4 px-6">{r}</td>;
+                        return <td className="py-4 px-6">{r}</td>
                       }
                     })}
                     {props.actions && (
                       <td
                         align={isArabic ? "right" : "left"}
                         style={{ fontWeight: 700 }}
-                        variant={isArabic ? "borderedRight" : "borderedLeft"}
+                        // variant={isArabic ? "borderedRight" : "borderedLeft"}
                       >
-                        {props.actions.map((act) => (
+                        {props.actions.map((act: any) => (
                           <HawaButton
                             onClick={() => props.handleActionClick(singleRow)}
-                            text={act}
-                          />
+                          >
+                            {act}
+                          </HawaButton>
                         ))}
                       </td>
                     )}
@@ -62,8 +72,8 @@ export const HawaTable = (props) => {
                 ))
               ) : (
                 <tr>
-                  <td colspan={props.columns.length}>
-                    <div className="w-full p-5 text-center bg-white">
+                  <td colSpan={props.columns.length}>
+                    <div className="w-full bg-white p-5 text-center">
                       {props.noDataText}
                     </div>
                   </td>
@@ -180,13 +190,5 @@ export const HawaTable = (props) => {
         </Table>
       </TableContainer> */}
     </>
-  );
-};
-HawaTable.propTypes = {
-  handleActionClick: PropTypes.func,
-  noDataText: PropTypes.string,
-  lang: PropTypes.string,
-  columns: PropTypes.array,
-  rows: PropTypes.array,
-  end: PropTypes.array
-};
+  )
+}

package/src/elements/{HawaTabs.js → HawaTabs.tsx}

@@ -1,22 +1,27 @@
-import React, { useState } from "react";
+import React, { useState } from "react"
 
-export const HawaTabs = (props) => {
-  const [selectedOption, setSelectedOption] = useState(props.defaultValue);
+type TabsTypes = {
+  options?: any
+  onChangeTab?: any
+  defaultValue?: any
+}
+export const HawaTabs: React.FunctionComponent<TabsTypes> = (props) => {
+  const [selectedOption, setSelectedOption] = useState(props.defaultValue)
   let activeTabStyle =
-    "inline-block py-2 px-4 text-white bg-blue-600 rounded-lg active";
+    "inline-block py-2 px-4 text-white bg-blue-600 rounded-lg active"
   let inactiveTabStyle =
-    "inline-block py-2 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white";
+    "inline-block py-2 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
 
   return (
     <div>
-      <ul className="bg-gray-100 w-fit rounded-lg flex flex-wrap text-sm font-medium text-center text-gray-500 dark:text-gray-400">
-        {props.options.map((opt) => (
-          <li >
+      <ul className="flex w-fit flex-wrap rounded-lg bg-gray-100 text-center text-sm font-medium text-gray-500 dark:text-gray-400">
+        {props.options.map((opt: any) => (
+          <li>
             <button
               aria-current="page"
               onClick={() => {
-                setSelectedOption(opt.value);
-                props.onChangeTab(opt.value);
+                setSelectedOption(opt.value)
+                props.onChangeTab(opt.value)
               }}
               className={
                 selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
@@ -28,5 +33,5 @@ export const HawaTabs = (props) => {
         ))}
       </ul>
     </div>
-  );
-};
+  )
+}

package/src/elements/HawaTextField.tsx

@@ -0,0 +1,71 @@
+import React from "react"
+import clsx from "clsx"
+
+type TextFieldTypes = {
+  margin?: "none" | "normal" | "large"
+  width?: "small" | "normal" | "full"
+  label?: any
+  multiline?: any
+  helperText?: any
+  value?: any
+  props?: React.PropsWithRef<"input">
+  type?: any
+  placeholder?: any
+  defaultValue?: any
+  name?: any
+  inputProps?: any
+  onChange?: any
+}
+
+export const HawaTextField: React.FunctionComponent<TextFieldTypes> = ({
+  margin = "normal",
+  width = "full",
+  ...props
+}) => {
+  let marginStyles = {
+    none: "mb-0",
+    normal: "mb-3",
+    large: "mb-5",
+  }
+  let widthStyles = {
+    small: "",
+    normal: "",
+    full: "w-full",
+  }
+
+  let defaultStyle = "flex h-fit max-h-fit flex-col justify-center"
+  return (
+    <div
+      className={clsx(defaultStyle, marginStyles[margin], widthStyles[width])}
+    >
+      {props.label && (
+        <label
+          htmlFor="first_name"
+          className="mb-2 block text-sm font-medium text-gray-900 dark:text-gray-300"
+        >
+          {props.label}
+        </label>
+      )}
+      {props.multiline ? (
+        <textarea
+          id="message"
+          rows={4}
+          className="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+          placeholder="Your message..."
+        />
+      ) : (
+        <input
+          {...props}
+          className="mb-0 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+        />
+      )}
+
+      {props.helperText && (
+        <p className="mb-1 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.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+
+
+type THawaToolTip = {
+  children : React.ReactElement
+  content : string
+}
+
+export const HawaTooltip : React.FunctionComponent<THawaToolTip> = ({children, content}) => {
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+  return (
+    <div className="relative">
+      <div
+        className="w-fit"
+        onMouseEnter={() => {
+          setIsHovered(true);
+        }}
+        onMouseLeave={() => {
+          setIsHovered(false);
+        }}
+      >
+        {children}
+      </div>
+      <div
+        className={
+          isHovered
+            ? "absolute top-10 left-0 z-10 inline-block w-fit max-w-xs rounded-lg bg-gray-900 py-2 px-3 text-center text-sm font-medium text-white opacity-100 shadow-sm transition-opacity duration-300 dark:bg-gray-700"
+            : "absolute top-10 left-0 z-10 inline-block w-fit max-w-xs rounded-lg bg-gray-900 py-2 px-3 text-center text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700"
+        }
+      >
+        {content}
+      </div>
+    </div>
+  );
+};

package/src/elements/HawaTypography.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+
+type TypographyTypes = {
+  children: any
+  align?: any
+}
+export const HawaTypography: React.FunctionComponent<TypographyTypes> = (
+  props
+) => {
+  return <div>{props.children}</div>
+}

package/src/elements/{TabPanel.js → TabPanel.tsx}

@@ -1,4 +1,4 @@
-import React from "react";
+import React from "react"
 
 // const useStyles = makeStyles((theme) => ({
 //   panelsContainer: {
@@ -13,8 +13,13 @@ import React from "react";
 //   }
 // }));
 
-export const TabPanel = (props) => {
-  const { children, value, index, ...other } = props;
+type TabPanelTypes = {
+  children: any
+  value: any
+  index: any
+}
+export const TabPanel: React.FunctionComponent<TabPanelTypes> = (props) => {
+  const { children, value, index, ...other } = props
   return (
     <div
       role="tabpanel"
@@ -29,5 +34,5 @@ export const TabPanel = (props) => {
         </div>
       )}
     </div>
-  );
-};
+  )
+}

package/src/elements/{index.js → index.ts}

@@ -3,11 +3,7 @@ export * from "./HawaSwitch";
 export * from "./HawaCheckbox";
 export * from "./HawaPanelTabs";
 export * from "./HawaChip";
-export * from "./HawaItemCard";
-export * from "./HawaPricingCard";
 export * from "./HawaSettingsRow";
-export * from "./HawaLogoButton";
-export * from "./HawaButton";
 export * from "./HawaSelect";
 export * from "./HawaRange";
 export * from "./HawaTextField";
@@ -27,3 +23,10 @@ export * from "./HawaModal";
 export * from "./HawaMenu";
 export * from "./HawaDrawer";
 export * from "./HawaCopyrights";
+// Cards
+export * from "./HawaItemCard";
+export * from "./HawaPricingCard";
+export * from "./HawaAdCard";
+//Buttons
+export * from "./HawaButton";
+export * from "./HawaLogoButton";

package/src/index.ts

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

package/src/layout/Box.tsx

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

package/src/layout/HawaBottomAppBar.tsx

@@ -0,0 +1,54 @@
+import React from "react"
+
+type BottomAppBarTypes = {
+  sx: any
+  color: any
+  appBarContent: any
+}
+export const HawaBottomAppBar: React.FunctionComponent<BottomAppBarTypes> = (
+  props
+) => {
+  return (
+    <div className="fixed bottom-0 top-auto left-0 m-0 w-full max-w-full  p-1">
+      <div
+        //   elevation={3}
+        // style={{
+        //   width: "100%",
+        //   display: "flex",
+        //   flexDirection: "row",
+        //   justifyContent: "space-evenly",
+        //   borderRadius: 10,
+        //   alignContent: "center",
+        //   padding: 10,
+        // }}
+        className="flex w-full flex-row items-center justify-evenly rounded-lg bg-gray-200"
+        //   variant="outlined"
+      >
+        {props.appBarContent.map((singleContent: any) => (
+          <div
+            className="m-1 flex h-full w-full flex-col items-center justify-center rounded-lg p-2 transition-all hover:cursor-pointer hover:bg-primary-600 hover:text-white"
+            onClick={singleContent.action}
+          >
+            <div
+            //   sx={{
+            //     ml: 1,
+            //     "&.MuiButtonBase-root:hover": {
+            //       color: "blue",
+            //       bgcolor: "transparent",
+            //     },
+            //   }}
+            >
+              {singleContent.icon}
+            </div>
+            <div
+              // sx={{ display: { xs: "none", sm: "none", md: "block" } }}
+              className="mt-2 text-sm"
+            >
+              {singleContent.label}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

package/src/layout/HawaContainer.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import clsx from "clsx"
+
+type ContainerTypes = {
+  maxWidth?: "full" | "small" | "normal"
+  children: React.ReactNode
+}
+export const HawaContainer: React.FunctionComponent<ContainerTypes> = ({
+  maxWidth = "normal",
+  ...props
+}) => {
+  let defaultStyle =
+    "flex w-full max-w-sm flex-col rounded-xl bg-primary-300 p-4 dark:bg-gray-600"
+  let maxWidthStyles: any = {
+    full: "md:max-w-xl",
+    small: "md:max-w-sm",
+    normal: "md:max-w-md",
+  }
+  return (
+    <div className={clsx(defaultStyle, maxWidthStyles[maxWidth])}>
+      {props.children}
+    </div>
+  )
+}