@sikka/hawa 0.0.56 → 0.0.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.56",
+  "version": "0.0.58",
   "description": "UI Kit",
   "main": "lib/index.js",
   "module": "es/index.es.js",
@@ -26,6 +26,7 @@
     "@storybook/addon-docs": "^6.5.8",
     "@storybook/addon-essentials": "^6.5.8",
     "@storybook/addon-links": "^6.5.8",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addons": "^6.5.8",
     "@storybook/react": "^6.5.8",
     "@storybook/storybook-deployer": "^2.8.11",
@@ -43,7 +44,6 @@
     "react-color": "^2.19.3",
     "react-dnd": "^15.1.2",
     "react-dom": "^17.0.1",
-    "react-dropzone": "^12.0.4",
     "react-hook-form": "^7.28.0",
     "react-phone-input-2": "^2.15.1",
     "react-select": "^5.3.2",

package/src/blocks/Payment/SelectPayment.js

@@ -4,7 +4,7 @@ import { HawaTypography, HawaLogoButton } from "../../elements";
 
 export const SelectPayment = (props) => {
   return (
-    <div className="flex flex-col bg-blue-300 rounded-xl p-4">
+    <div className="flex flex-col w-1/3 bg-blue-300 rounded-xl p-4">
       <HawaTypography align="center">Choose Payment Method</HawaTypography>
       {props.viaWallet && (
         <HawaLogoButton

package/src/elements/DraggableCard.js

@@ -4,8 +4,6 @@ export const DraggableCard = (props) => {
   return (
     <div className="flex flex-row bg-blue-300 rounded-xl p-4">
       <button
-        id="dropdownMenuIconButton"
-        data-dropdown-toggle="dropdownDots"
         class="inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none dark:text-white focus:ring-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
         type="button"
       >

package/src/elements/HawaColorPicker.js

@@ -34,13 +34,11 @@ import PropTypes from "prop-types";
 //   }
 // `;
 export const HawaColorPicker = (props) => {
-  // const theme = useTheme();
   return (
     <div style={{ display: "flex", flexDirection: "row" }}>
       {/* <ColorText
         type={"text"}
         value={props.color}
-        // borderRadius={theme.allBorderRadius}
         onChange={props.handleChange}
       />
       <div style={{ width: 10 }} />
@@ -48,7 +46,6 @@ export const HawaColorPicker = (props) => {
         type={"color"}
         value={props.color}
         onChange={props.handleChange}
-        // borderRadius={theme.allBorderRadius}
       /> */}
     </div>
   );

package/src/elements/HawaPhoneInput.js

@@ -1,5 +1,5 @@
-import PhoneInput from "react-phone-input-2";
-import "react-phone-input-2/lib/material.css";
+// import PhoneInput from "react-phone-input-2";
+// import "react-phone-input-2/lib/material.css";
 
 export default function HawaPhoneInput(props) {
   const {
@@ -31,7 +31,7 @@ export default function HawaPhoneInput(props) {
       />
 
       {/* {label && <InputLabel>{props.label}</InputLabel>} */}
-      <PhoneInput
+      {/* <PhoneInput
         country={country ?? null}
         onChange={(e) => onChange(e)}
         value={value ?? value}
@@ -55,7 +55,7 @@ export default function HawaPhoneInput(props) {
         // containerClass="bg-orange-900"
         // containerClass="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"
         {...rest}
-      />
+      /> */}
     </div>
   );
 }

package/src/elements/HawaPopMenu.js

@@ -76,7 +76,6 @@ export const HawaPopMenu = (props) => {
     //   PaperProps={{
     //     style: {
     //       boxShadow: "none",
-    //       borderRadius: theme.allBorderRadius,
     //       border: `1px solid ${theme.primaryActionColor}`
     //     }
     //   }}

package/src/elements/HawaTable.js

@@ -1,113 +1,189 @@
 import React from "react";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
 import PropTypes from "prop-types";
-import { Button } from "@mui/material";
+import { HawaButton } from "./HawaButton";
 
 export const HawaTable = (props) => {
   let isArabic = props.lang === "ar";
   return (
-    <TableContainer style={{ direction: isArabic ? "rtl" : "ltr" }}>
-      <Table aria-label="a dense table">
-        <TableHead>
-          <TableRow>
-            {props.columns.map((col, i) => (
-              <TableCell
-                align={isArabic ? "right" : "left"}
-                key={i}
-                style={{ fontWeight: 700 }}
-                variant={
-                  i > 0 ? (isArabic ? "borderedRight" : "borderedLeft") : "body"
-                }
-              >
-                {col}
-              </TableCell>
-            ))}
-            {props.actions && (
-              <TableCell
-                align={isArabic ? "right" : "left"}
-                style={{ fontWeight: 700 }}
-                variant={isArabic ? "borderedRight" : "borderedLeft"}
-              >
-                Actions
-              </TableCell>
-            )}
-          </TableRow>
-        </TableHead>
-
-        <TableBody>
-          {props.rows ? (
-            props.rows.map((singleRow, j) => (
-              <TableRow key={j}>
-                {singleRow.map((r, i) => (
-                  <TableCell
-                    align={isArabic ? "right" : "left"}
-                    key={i}
-                    component="th"
-                    scope="row"
-                    variant={
-                      i > 0
-                        ? isArabic
-                          ? "borderedRight"
-                          : "borderedLeft"
-                        : "body"
-                    }
-                  >
-                    {r}
-                  </TableCell>
+    <>
+      <div>
+        <div class="overflow-x-auto relative rounded-xl">
+          <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+            <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+              <tr>
+                {props.columns.map((col, i) => (
+                  <th key={i} scope="col" class="py-3 px-6">
+                    {col}
+                  </th>
                 ))}
                 {props.actions && (
-                  <TableCell
-                    align={isArabic ? "right" : "left"}
-                    style={{ fontWeight: 700 }}
-                    variant={isArabic ? "borderedRight" : "borderedLeft"}
+                  <th scope="col" class="py-3 px-6">
+                    actions
+                  </th>
+                )}
+              </tr>
+            </thead>
+            <tbody>
+              {props.rows ? (
+                props.rows.map((singleRow, j) => (
+                  <tr
+                    class="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
+                    key={j}
                   >
-                    {props.actions.map((act) => (
-                      <Button
-                        style={{ margin: 2 }}
-                        variant="outlined"
-                        size="small"
-                        onClick={() => props.handleActionClick(singleRow)}
+                    {singleRow.map((r, i) => {
+                      if (i === 0) {
+                        return (
+                          <th
+                            scope="row"
+                            class="py-4 px-6 font-medium text-gray-900 whitespace-nowrap dark:text-white"
+                          >
+                            {r}{" "}
+                          </th>
+                        );
+                      } else {
+                        return <td class="py-4 px-6">{r}</td>;
+                      }
+                    })}
+                    {props.actions && (
+                      <td
+                        align={isArabic ? "right" : "left"}
+                        style={{ fontWeight: 700 }}
+                        variant={isArabic ? "borderedRight" : "borderedLeft"}
                       >
-                        {act}
-                      </Button>
-                    ))}
-                  </TableCell>
-                )}
+                        {props.actions.map((act) => (
+                          <HawaButton
+                            style={{ margin: 2 }}
+                            variant="outlined"
+                            size="small"
+                            onClick={() => props.handleActionClick(singleRow)}
+                          >
+                            {act}
+                          </HawaButton>
+                        ))}
+                      </td>
+                    )}
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td colspan={props.columns.length}>
+                    <div className="w-full p-5 text-center bg-white">
+                      {props.noDataText}
+                    </div>
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* <TableContainer style={{ direction: isArabic ? "rtl" : "ltr" }}>
+        <Table aria-label="a dense table">
+          <TableHead>
+            <TableRow>
+              {props.columns.map((col, i) => (
+                <TableCell
+                  align={isArabic ? "right" : "left"}
+                  key={i}
+                  style={{ fontWeight: 700 }}
+                  variant={
+                    i > 0
+                      ? isArabic
+                        ? "borderedRight"
+                        : "borderedLeft"
+                      : "body"
+                  }
+                >
+                  {col}
+                </TableCell>
+              ))}
+              {props.actions && (
+                <TableCell
+                  align={isArabic ? "right" : "left"}
+                  style={{ fontWeight: 700 }}
+                  variant={isArabic ? "borderedRight" : "borderedLeft"}
+                >
+                  Actions
+                </TableCell>
+              )}
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            {props.rows ? (
+              props.rows.map((singleRow, j) => (
+                <TableRow key={j}>
+                  {singleRow.map((r, i) => (
+                    <TableCell
+                      align={isArabic ? "right" : "left"}
+                      key={i}
+                      component="th"
+                      scope="row"
+                      variant={
+                        i > 0
+                          ? isArabic
+                            ? "borderedRight"
+                            : "borderedLeft"
+                          : "body"
+                      }
+                    >
+                      {r}
+                    </TableCell>
+                  ))}
+                  {props.actions && (
+                    <TableCell
+                      align={isArabic ? "right" : "left"}
+                      style={{ fontWeight: 700 }}
+                      variant={isArabic ? "borderedRight" : "borderedLeft"}
+                    >
+                      {props.actions.map((act) => (
+                        <Button
+                          style={{ margin: 2 }}
+                          variant="outlined"
+                          size="small"
+                          onClick={() => props.handleActionClick(singleRow)}
+                        >
+                          {act}
+                        </Button>
+                      ))}
+                    </TableCell>
+                  )}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow align="center">
+                <TableCell align={"center"} component="th" colSpan={6}>
+                  {props.noDataText}
+                </TableCell>
               </TableRow>
-            ))
-          ) : (
-            <TableRow align="center">
-              <TableCell align={"center"} component="th" colSpan={6}>
-                {props.noDataText}
-              </TableCell>
+            )}
+          </TableBody>
+          {props.end && (
+            <TableRow>
+              {props.end.map((e, k) => (
+                <TableCell
+                  align={isArabic ? "right" : "left"}
+                  style={{ fontWeight: 700 }}
+                  key={k}
+                  component="th"
+                  scope="row"
+                  variant={
+                    k > 0
+                      ? isArabic
+                        ? "borderedRight"
+                        : "borderedLeft"
+                      : "body"
+                  }
+                >
+                  {e}
+                </TableCell>
+              ))}
             </TableRow>
           )}
-        </TableBody>
-        {props.end && (
-          <TableRow>
-            {props.end.map((e, k) => (
-              <TableCell
-                align={isArabic ? "right" : "left"}
-                style={{ fontWeight: 700 }}
-                key={k}
-                component="th"
-                scope="row"
-                variant={
-                  k > 0 ? (isArabic ? "borderedRight" : "borderedLeft") : "body"
-                }
-              >
-                {e}
-              </TableCell>
-            ))}
-          </TableRow>
-        )}
-      </Table>
-    </TableContainer>
+        </Table>
+      </TableContainer> */}
+    </>
   );
 };
 HawaTable.propTypes = {

package/src/index.js

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