@sikka/hawa 0.0.19 → 0.0.20

package/src/blocks/Payment/CreditCardForm.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { HawaTextField, ActionButton } from "../../elements";
-import { Box } from "../../layout";
+import { HawaTextField } from "../../elements";
 import { FormProvider, useForm } from "react-hook-form";
-import { Button, Container } from "@mui/material";
+import Button from "@mui/material/Button";
+import Container from "@mui/material/Container";
 
 export const CreditCardForm = (props) => {
   const methods = useForm();

package/src/blocks/Payment/PayWithWallet.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { ActionButton } from "../../elements";
-import { Box } from "../../layout";
-import { Button, Container, Typography } from "@mui/material";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
+import Button from "@mui/material/Button";
 
 export const PayWithWallet = (props) => {
   return (

package/src/blocks/Payment/SelectPayment.js

@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { HawaTextField, HawaTypography, HawaLogoButton } from "../../elements";
-import { Container } from "@mui/material";
+import Container from "@mui/material/Container";
 
 export const SelectPayment = (props) => {
   return (

package/src/elements/AdaptiveButton.js

@@ -2,8 +2,6 @@ import React, { useState } from "react";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
 import PropTypes from "prop-types";
-import { StyledTooltip } from "./StyledTooltip";
-import { getTextColor } from "../util";
 
 export const AdaptiveButton = (props) => {
   if (props.showText) {

package/src/elements/HawaListItem.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { ListItemButton, ListItemText } from "@mui/material";
+import ListItemText from "@mui/material/ListItemButton";
+import ListItemButton from "@mui/material/ListItemText";
 import InboxIcon from "@mui/icons-material/MoveToInbox";
 
 export const HawaListItem = (props) => {

package/src/elements/HawaLogoButton.js

@@ -1,10 +1,9 @@
 import React from "react";
-// import { styled, darken } from "@mui/material/styles";
 import Button from "@mui/material/Button";
 import GitHubIcon from "@mui/icons-material/GitHub";
 import TwitterIcon from "@mui/icons-material/Twitter";
 import WalletIcon from "@mui/icons-material/AccountBalanceWallet";
-import { Typography } from "@mui/material";
+import Typography from "@mui/material/Typography";
 
 export const HawaLogoButton = (props) => {
   let logoElement = "";

package/src/elements/HawaPricingCard.js

@@ -1,6 +1,7 @@
 import React from "react";
 import Container from "@mui/material/Container";
-import { Button, Typography } from "@mui/material";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
 export const HawaPricingCard = (props) => {
   let isArabic = props.lang === "ar";

package/src/elements/HawaSelect.js

@@ -0,0 +1,26 @@
+import React from "react";
+import InputLabel from "@mui/material/InputLabel";
+import Select from "@mui/material/Select";
+import Typography from "@mui/material/Typography";
+
+export const HawaSelect = (props) => {
+  return (
+    <div style={{ width: "100%" }}>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center"
+        }}
+      >
+        <InputLabel>{props.label}</InputLabel>
+
+        {props.helperText && (
+          <Typography variant="validation">{props.helperText}</Typography>
+        )}
+      </div>
+      <Select {...props}>{props.children}</Select>
+    </div>
+  );
+};

package/src/elements/HawaSwitch.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Switch } from "@mui/material";
+import Switch from "@mui/material/Switch";
 
 export const HawaSwitch = (props) => {
   return <Switch {...props} />;

package/src/elements/HawaTable.js

@@ -7,15 +7,20 @@ import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 
 export const HawaTable = (props) => {
+  let isArabic = props.lang === "ar";
   return (
-    <TableContainer>
+    <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 || "bordered"}
+                variant={
+                  i > 0 ? (isArabic ? "borderedRight" : "borderedLeft") : "body"
+                }
               >
                 {col}
               </TableCell>
@@ -28,10 +33,17 @@ export const HawaTable = (props) => {
             <TableRow key={j}>
               {singleRow.map((r, i) => (
                 <TableCell
+                  align={isArabic ? "right" : "left"}
                   key={i}
                   component="th"
                   scope="row"
-                  variant={i == 0 || "bordered"}
+                  variant={
+                    i > 0
+                      ? isArabic
+                        ? "borderedRight"
+                        : "borderedLeft"
+                      : "body"
+                  }
                 >
                   {r}
                 </TableCell>
@@ -43,11 +55,14 @@ export const HawaTable = (props) => {
           <TableRow>
             {props.end.map((e, k) => (
               <TableCell
-                style={{ fontWeight: 700 ,}}
+                align={isArabic ? "right" : "left"}
+                style={{ fontWeight: 700 }}
                 key={k}
                 component="th"
                 scope="row"
-                variant={k == 0 || "bordered"}
+                variant={
+                  k > 0 ? (isArabic ? "borderedRight" : "borderedLeft") : "body"
+                }
               >
                 {e}
               </TableCell>

package/src/elements/HawaTextField.js

@@ -1,11 +1,17 @@
 import React from "react";
 import Input from "@mui/material/Input";
 import InputLabel from "@mui/material/InputLabel";
-import { Typography } from "@mui/material";
+import Typography from "@mui/material/Typography";
 
 export const HawaTextField = (props) => {
   return (
-    <>
+    <div
+      style={
+        props.inForm && {
+          width: "100%"
+        }
+      }
+    >
       <div
         style={{
           display: "flex",
@@ -14,13 +20,13 @@ export const HawaTextField = (props) => {
           alignItems: "center"
         }}
       >
-        <InputLabel>{props.label}</InputLabel>
+        {props.label && <InputLabel>{props.label}</InputLabel>}
 
         {props.helperText && (
           <Typography variant="validation">{props.helperText}</Typography>
         )}
       </div>
       <Input disableUnderline {...props} />
-    </>
+    </div>
   );
 };

package/src/elements/HawaTypography.js

@@ -1,5 +1,4 @@
 import React from "react";
-// import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 
 export const HawaTypography = (props) => {

package/src/elements/index.js

@@ -8,6 +8,7 @@ export * from "./HawaPricingCard";
 export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";
+export * from "./HawaSelect";
 export * from "./HawaTextField";
 export * from "./HawaInputLabel";
 export * from "./HawaTypography";

package/src/layout/HawaDialog.js

@@ -1,11 +1,9 @@
 import CloseIcon from "@mui/icons-material/Close";
-import {
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton
-} from "@mui/material";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import IconButton from "@mui/material/IconButton";
 import React, { useState } from "react";
 
 const BootstrapDialogTitle = (props) => {

package/storybook-static/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.708d7ac1.iframe.bundle.js"></script><script src="vendors~main.ae39b38c.iframe.bundle.js"></script><script src="main.894e2873.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.708d7ac1.iframe.bundle.js"></script><script src="vendors~main.4ff76500.iframe.bundle.js"></script><script src="main.13189777.iframe.bundle.js"></script></body></html>