@sikka/hawa 0.0.55 → 0.0.57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "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",

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/HawaLogoButton.js

@@ -1,7 +1,4 @@
 import React from "react";
-import GitHubIcon from "@mui/icons-material/GitHub";
-import TwitterIcon from "@mui/icons-material/Twitter";
-import WalletIcon from "@mui/icons-material/AccountBalanceWallet";
 import PropTypes from "prop-types";
 
 export const HawaLogoButton = (props) => {
@@ -18,10 +15,48 @@ export const HawaLogoButton = (props) => {
       );
       break;
     case "github":
-      logoElement = <GitHubIcon />;
+      logoElement = (
+        <svg
+          width="32px"
+          height="32px"
+          viewBox="0 0 32 32"
+          xmlns="http://www.w3.org/2000/svg"
+          className="w-7 h-7"
+        >
+          <path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z" />
+        </svg>
+      );
       break;
     case "twitter":
-      logoElement = <TwitterIcon />;
+      logoElement = (
+        <svg
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          // xmlns:xlink="http://www.w3.org/1999/xlink"
+          x="0px"
+          y="0px"
+          className="w-5 h-5"
+          viewBox="0 0 512.002 512.002"
+          // style="enable-background:new 0 0 512.002 512.002;"
+          // xml:space="preserve"
+        >
+          <path
+            // style="fill:#73A1FB;"
+            d="M500.398,94.784c-8.043,3.567-16.313,6.578-24.763,9.023c10.004-11.314,17.631-24.626,22.287-39.193
+     c1.044-3.265-0.038-6.839-2.722-8.975c-2.681-2.137-6.405-2.393-9.356-0.644c-17.945,10.643-37.305,18.292-57.605,22.764
+     c-20.449-19.981-48.222-31.353-76.934-31.353c-60.606,0-109.913,49.306-109.913,109.91c0,4.773,0.302,9.52,0.9,14.201
+     c-75.206-6.603-145.124-43.568-193.136-102.463c-1.711-2.099-4.347-3.231-7.046-3.014c-2.7,0.211-5.127,1.734-6.491,4.075
+     c-9.738,16.709-14.886,35.82-14.886,55.265c0,26.484,9.455,51.611,26.158,71.246c-5.079-1.759-10.007-3.957-14.711-6.568
+     c-2.525-1.406-5.607-1.384-8.116,0.054c-2.51,1.439-4.084,4.084-4.151,6.976c-0.012,0.487-0.012,0.974-0.012,1.468
+     c0,39.531,21.276,75.122,53.805,94.52c-2.795-0.279-5.587-0.684-8.362-1.214c-2.861-0.547-5.802,0.456-7.731,2.638
+     c-1.932,2.18-2.572,5.219-1.681,7.994c12.04,37.591,43.039,65.24,80.514,73.67c-31.082,19.468-66.626,29.665-103.939,29.665
+     c-7.786,0-15.616-0.457-23.279-1.364c-3.807-0.453-7.447,1.795-8.744,5.416c-1.297,3.622,0.078,7.66,3.316,9.736
+     c47.935,30.735,103.361,46.98,160.284,46.98c111.903,0,181.907-52.769,220.926-97.037c48.657-55.199,76.562-128.261,76.562-200.451
+     c0-3.016-0.046-6.061-0.139-9.097c19.197-14.463,35.724-31.967,49.173-52.085c2.043-3.055,1.822-7.094-0.545-9.906
+     C507.7,94.204,503.76,93.294,500.398,94.784z"
+          />
+        </svg>
+      );
       break;
     case "mada":
       logoElement = (
@@ -78,7 +113,26 @@ export const HawaLogoButton = (props) => {
       );
       break;
     case "wallet":
-      logoElement = <WalletIcon />;
+      logoElement = (
+        <svg
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 223 223"
+          className="h-6 w-6"
+        >
+          <g>
+            <path
+              d="M223,94.5c0-6.075-4.925-11-11-11h-63c-6.075,0-11,4.925-11,11v33c0,6.075,4.925,11,11,11h63c6.075,0,11-4.925,11-11V94.5z
+           M169.515,123.967c-7.082,0-12.823-5.741-12.823-12.823c0-7.082,5.741-12.823,12.823-12.823c7.082,0,12.823,5.741,12.823,12.823
+          C182.338,118.225,176.597,123.967,169.515,123.967z"
+            />
+            <path
+              d="M123.509,68.5H205v-33c0-8.271-6.395-15-14.667-15h-175C7.062,20.5,0,27.229,0,35.5v152c0,8.271,7.062,15,15.333,15h175
+          c8.271,0,14.667-6.729,14.667-15v-34h-81.342L123.509,68.5z"
+            />
+          </g>
+        </svg>
+      );
       break;
 
     default:
@@ -91,11 +145,11 @@ export const HawaLogoButton = (props) => {
       // variant="withLogo"
       className="bg-white rounded-xl my-2 h-11 flex max-w-sm w-full flex-row justify-center align-middle"
     >
-      <div className="h-full w-1/2 flex flex-row justify-end items-center">
+      <div className="h-full flex flex-row justify-end items-center">
         {logoElement}
       </div>
       <div style={{ width: 10 }} />
-      <div className="h-full w-1/2 flex flex-col justify-center items-start">
+      <div className="h-full flex flex-col justify-center items-start">
         {props.buttonText}
       </div>
     </button>

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"