@sikka/hawa 0.0.10 → 0.0.13

package/src/{ui → elements}/HawaLogoButton.js

@@ -1,50 +1,12 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
-import { styled, darken } from "@mui/material/styles";
+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";
 
 export const HawaLogoButton = (props) => {
-  const { hawaTheme, themeName } = useContext(ThemeProvider);
-  let buttonStyle = {};
-  let currentTheme = Object.keys(hawaTheme.logoButton).find(
-    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  );
-  if (currentTheme) {
-    buttonStyle = {
-      ...hawaTheme.logoButton[currentTheme],
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  } else {
-    // Default theme
-    buttonStyle = {
-      cursor: "pointer",
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      marginTop: 10,
-      height: 50,
-      padding: 30,
-      paddingTop: 0,
-      paddingBottom: 0,
-      border: "1px solid #ced4da",
-      backgroundColor: "white",
-      "&:hover": {
-        backgroundColor: darken("#ffffff", 0.1)
-      }
-    };
-  }
-  const StyledButton = styled(Button)(({ theme }) => {
-    return {
-      ...buttonStyle
-    };
-  });
   let logoElement = "";
   switch (props.logo?.toLowerCase()) {
     case "google":
@@ -118,10 +80,10 @@ export const HawaLogoButton = (props) => {
       break;
   }
   return (
-    <StyledButton {...props}>
+    <Button {...props} variant="withLogo">
       {logoElement}
       <div style={{ width: 10 }} />
-      <p
+      <Typography
         style={{
           color: "black",
           fontSize: 14,
@@ -132,7 +94,7 @@ export const HawaLogoButton = (props) => {
         }}
       >
         {props.buttonText}
-      </p>
-    </StyledButton>
+      </Typography>
+    </Button>
   );
 };

package/src/elements/HawaRadio.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import Button from "@mui/material/Button";
+import Container from "@mui/material/Container";
+
+export const HawaRadio = (props) => {
+  const [value, setValue] = useState(props.defaultValue);
+  return (
+    <Container
+      variant={props.location === "inSettings" ? "inSettings" : "panelTabs"}
+    >
+      {props.options.map((singleOption, i) => {
+        return (
+          <Button
+            key={i}
+            onClick={() => {
+              props.handleChange(singleOption.value);
+              setValue(singleOption.value);
+            }}
+            fullWidth
+            variant={
+              value?.toLowerCase() === singleOption.value?.toLowerCase()
+                ? "selected"
+                : "unselected"
+            }
+          >
+            {singleOption.label}
+          </Button>
+        );
+      })}
+    </Container>
+  );
+};

package/src/elements/HawaSettingsRow.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+import PropTypes from "prop-types";
+import Checkbox from "@mui/material/Checkbox";
+import { HawaTypography } from "./HawaTypography";
+import Container from "@mui/material/Container";
+import { HawaTextField } from "./HawaTextField";
+import { HawaRadio } from "./HawaRadio";
+import { HawaSwitch } from "./HawaSwitch";
+export const HawaSettingsRow = (props) => {
+  return (
+    <Container variant="settingsRow">
+      <HawaTypography>{props.settingsLabel}</HawaTypography>
+      {props.settingsType === "checkbox" && <Checkbox {...props} />}
+      {props.settingsType === "text" && <HawaTextField {...props} />}
+      {props.settingsType === "radio" && (
+        <HawaRadio location="inSettings" {...props} />
+      )}
+      {props.settingsType === "boolean" && <HawaSwitch {...props} />}
+    </Container>
+  );
+};
+
+HawaSettingsRow.propTypes = {
+  type: PropTypes.oneOf(["text", "number", "password"]),
+  helperText: PropTypes.string
+};

package/src/elements/HawaSwitch.js

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

package/src/{ui → elements}/HawaTextArea.js

@@ -15,7 +15,7 @@ export const HawaTextArea = (props) => {
             style={{
               color: "black",
               backgroundColor: props.bgColor || "white",
-              borderRadius: props.bdRadius || 10,
+              // borderRadius: props.bdRadius || 10,
               borderBottom: "none",
               border: "none",
               width: "100%",

package/src/elements/HawaTextField.js

@@ -0,0 +1,160 @@
+import React from "react";
+// import InputBase from "@mui/material/InputBase";
+// import Typography from "@mui/material/Typography";
+// import { styled } from "@mui/material/styles";
+// import PropTypes from "prop-types";
+// import { HawaInputLabel } from "./HawaInputLabel";
+// import { Controller, useFormContext } from "react-hook-form";
+import Input from "@mui/material/Input";
+import InputLabel from "@mui/material/InputLabel";
+
+export const HawaTextField = (props) => {
+  // const { control, register } = useFormContext();
+
+  // const currentTheme = Object.keys(hawaTheme.inputFields).find(
+  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  // );
+  // let textFieldStyle = {};
+
+  // if (currentTheme) {
+  //   textFieldStyle = {
+  //     ...hawaTheme.inputFields[currentTheme],
+  //     margin: props.last ? 0 : hawaTheme.inputFields[currentTheme].margin,
+  //     marginTop: props.last
+  //       ? hawaTheme.inputFields[currentTheme].margin * 2
+  //       : 0,
+  //   };
+  // } else {
+  //   textFieldStyle = {
+  //     backgroundColor: "white"
+  //   };
+  // }
+
+  // const StyledTextField = styled(InputBase)(({ theme }) => {
+  //   return {
+  //     // "& .MuiInputBase-input": {
+  //     //   // border: "1px solid #ced4da",
+  //     //   fontSize: 16,
+  //     //   // padding: "10px 12px",
+  //     //   marginBottom: props.helperText ? 5 : 0,
+  //     //   // paddingLeft: 10,
+  //     //   // paddingRight: 10,
+  //     //   ...textFieldStyle
+  //     // },
+  //     // "& .MuiInputBase-root": {
+  //     //   border: "1px solid #ced4da",
+  //     //   fontSize: 16,
+  //     //   // width: "auto",
+  //     //   // padding: "10px 12px",
+  //     //   marginBottom: props.helperText ? 5 : 0,
+  //     //   // paddingLeft: 10,
+  //     //   // paddingRight: 10,
+
+  //     //   // ...textFieldStyle,
+  //     //   backgroundColor: "blue"
+  //     //   // "&:focus": {
+  //     //   //   borderColor: "red",
+  //     //   //   borderWidth: 1,
+  //     //   //   outline: "1px solid black",
+  //     //   //   backgroundColor: "red"
+  //     //   // }
+  //     //   // "& input:valid + fieldset": {
+  //     //   //   borderColor: "green",
+  //     //   //   borderWidth: 2
+  //     //   // },
+  //     //   // "& input:invalid + fieldset": {
+  //     //   //   borderColor: "red",
+  //     //   //   borderWidth: 2
+  //     //   // },
+  //     //   // "& input:valid:focus + fieldset": {
+  //     //   //   borderLeftWidth: 6,
+  //     //   //   padding: "4px !important" // override inline-style
+  //     //   // }
+  //     // },
+
+  //     // "&:hover": {
+  //     //   borderColor: "red",
+  //     //   borderWidth: 1,
+  //     //   outline: "1px solid black"
+  //     // },
+
+  //     // paddingLeft: 10,
+  //     // paddingRight: 10,
+  //     // border: "none"
+
+  //     // position: "relative",
+  //     // backgroundColor: "green"
+  //     ...textFieldStyle
+  //   };
+  // });
+
+  return (
+    <>
+      <InputLabel>{props.label}</InputLabel>
+      <Input disableUnderline {...props} />
+    </>
+    // <FormControl variant="hawa" style={{ marginTop: 10 }}>
+
+    // </FormControl>
+    // <TextField
+    //   fullWidth
+    //   type="text"
+    //   // inputProps={{
+    //   //   shrink: true
+    //   // }}
+    //   // InputProps={{
+    //   //   disableUnderline: true,
+    //   //   shrink: true
+    //   // }}
+    //   InputLabelProps={{
+    //     shrink: true
+    //   }}
+    //   {...props}
+    // />
+    // <Controller
+    //   render={({ field }) => (
+    //     <>
+    //       {props.inputLabel && <InputLabel label={props.inputLabel} />}
+
+    //       <TextField
+    //         fullWidth={true}
+    //         // helperText={props.helperText}
+    //         type={props.type ?? "text"}
+    //         // placeholder={props.placeholder}
+    //         // inputProps={
+    //         //   props.type === "number"
+    //         //     ? {
+    //         //         inputMode: "numeric",
+    //         //         min: "0",
+    //         //         max: "9999999",
+    //         //         step: "0.01"
+    //         //       }
+    //         //     : {}
+    //         // }
+
+    //         defaultValue={props.defaultValue && ""}
+    //         value={props.value && ""}
+    //         {...props}
+    //         // {...field}
+    //         {...register(props.name)}
+    //       />
+    //       <Typography
+    //         variant="caption"
+    //         style={{ margin: 5, marginBottom: 0, color: "red" }}
+    //       >
+    //         {props.helperText}
+    //       </Typography>
+    //     </>
+    //   )}
+    //   name={props.name}
+    //   rules={props.rules}
+    //   control={control}
+    //   shouldUnregister={props.shouldUnregister}
+    // />
+  );
+};
+
+// HawaTextField.propTypes = {
+//   type: PropTypes.oneOf(["text", "number", "password"]),
+//   helperText: PropTypes.string
+// };

package/src/elements/HawaTypography.js

@@ -0,0 +1,26 @@
+import React from "react";
+// import { styled } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+
+export const HawaTypography = (props) => {
+  // const currentTheme = Object.keys(hawaTheme.typography).find(
+  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  // );
+  // let typographyStyle = {};
+
+  // if (currentTheme) {
+  //   typographyStyle = { ...hawaTheme.typography[currentTheme] };
+  // } else {
+  //   typographyStyle = {
+  //     color: "black"
+  //   };
+  // }
+
+  // const StyledTypography = styled(Typography)(({ theme }) => {
+  //   return {
+  //     ...typographyStyle
+  //   };
+  // });
+
+  return <Typography {...props}>{props.children}</Typography>;
+};

package/src/{ui → elements}/Row.js

@@ -3,7 +3,7 @@ export const Row = (props) => {
     <div
       style={{
         backgroundColor: "var(--light)",
-        borderRadius: "var(--borderR)",
+        // borderRadius: "var(--borderR)",
         display: "flex",
         flexDirection: "row",
         justifyContent: "space-between",

package/src/{ui → elements}/StyledTooltip.js

@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import React from "react";
 import Tooltip from "@mui/material/Tooltip";
 
 export const StyledTooltip = (props) => {

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

@@ -8,7 +8,7 @@ const useStyles = makeStyles((theme) => ({
   },
   panel: {
     backgroundColor: "var(--lightGrey)",
-    borderRadius: "var(--borderR)",
+    // borderRadius: "var(--borderR)",
     height: "100%",
     width: "100%",
     padding: 10

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

@@ -2,7 +2,7 @@ export * from "./AdaptiveButton";
 export * from "./ActionButton";
 export * from "./HawaCheckbox";
 export * from "./HawaRadio";
-
+export * from "./HawaCard";
 export * from "./HawaSettingsRow";
 export * from "./HawaLogoButton";
 export * from "./HawaButton";

package/src/index.js

@@ -1,5 +1,3 @@
 export * from "./blocks/Account";
 export * from "./blocks/AuthForms";
 export * from "./blocks/Payment";
-export { HawaProvider, defaultTheme } from "./themes/HawaProvider";
-//export * from "./components/Hawa";

package/src/layout/Box.js

@@ -1,38 +1,41 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
+import React from "react";
 
 export const Box = (props) => {
-  const { hawaTheme, themeName } = useContext(ThemeProvider);
-  let boxStyle = {};
+  // let boxStyle = {};
 
-  let currentTheme = Object.keys(hawaTheme.layout).find(
-    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  );
-  if (currentTheme) {
-    boxStyle = {
-      display: "flex",
-      flexDirection: props.horizontal ? "row" : "column",
-      ...hawaTheme?.layout[currentTheme],
-      backgroundColor: props.noColor
-        ? "none"
-        : hawaTheme.layout[currentTheme].backgroundColor,
-      padding: props.noPadding ? 0 : hawaTheme?.layout[currentTheme].padding,
-      margin: props.noMargin ? 0 : hawaTheme?.layout[currentTheme].margin,
-      maxWidth: props.maxWidth
-    };
-  } else {
-    boxStyle = {
-      display: "flex",
-      flexDirection: props.horizontal ? "row" : "column",
-      color: "white",
-      marginTop: props.last ? 10 * 2 : 0,
-      backgroundColor: props.noColor ? "none" : "lightGrey",
-      padding: props.noPadding ? 0 : 10,
-      margin: props.noMargin ? 0 : 10,
-      maxWidth: props.maxWidth,
-      borderRadius: 0
-    };
-  }
+  // let currentTheme = Object.keys(hawaTheme.layout).find(
+  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  // );
+  // if (currentTheme) {
+  //   boxStyle = {
+  //     display: "flex",
+  //     flexDirection: props.horizontal ? "row" : "column",
+  //     ...hawaTheme?.layout[currentTheme],
+  //     backgroundColor: props.noColor
+  //       ? "none"
+  //       : hawaTheme.layout[currentTheme].backgroundColor,
+  //     padding: props.noPadding ? 0 : hawaTheme?.layout[currentTheme].padding,
+  //     margin: props.noMargin ? 0 : hawaTheme?.layout[currentTheme].margin,
+  //     maxWidth: props.maxWidth
+  //   };
+  // } else {
+  //   boxStyle = {
+  //     display: "flex",
+  //     flexDirection: props.horizontal ? "row" : "column",
+  //     color: "white",
+  //     marginTop: props.last ? 10 * 2 : 0,
+  //     backgroundColor: props.noColor ? "none" : "lightGrey",
+  //     padding: props.noPadding ? 0 : 10,
+  //     margin: props.noMargin ? 0 : 10,
+  //     maxWidth: props.maxWidth,
+  //   };
+  // }
 
-  return <div style={boxStyle}>{props.children}</div>;
+  return (
+    <div
+    // style={boxStyle}
+    >
+      {props.children}
+    </div>
+  );
 };

package/src/stories/BlocksStories/Account/UserProfile.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { UserProfileForm } from "../../../blocks/Account";
+
+export default {
+  title: "Blocks/Account/User Profile",
+  component: [UserProfile],
+  argTypes: {}
+};
+
+const ProfileTemplate = (args) => {
+  return <UserProfileForm {...args} />;
+};
+export const UserProfile = ProfileTemplate.bind({});
+UserProfile.args = {
+  viaGoogle: true,
+  viaGithub: true,
+  viaTwitter: true,
+  showError: false,
+  errorTitle: "Error",
+  errorText: "Something went wrong"
+};

package/src/stories/BlocksStories/Account/UserSettings.stories.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { UserSettingsForm } from "../../../blocks/Account";
+import { HawaSettingsRow } from "../../../elements";
+
+export default {
+  title: "Blocks/Account/User Settings",
+  component: UserSettingsForm,
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
+  }
+};
+export const UserSettings = (args) => {
+  return (
+    <UserSettingsForm {...args}>
+      <HawaSettingsRow settingsType="checkbox" settingsLabel="Hide Watermark" />
+      <HawaSettingsRow
+        settingsType="text"
+        placeholder="Your handle"
+        settingsLabel="Custom Handle"
+      />
+      <HawaSettingsRow
+        handleChange={(e) => console.log("changing to ", e)}
+        settingsType="radio"
+        defaultValue="sar"
+        options={[
+          { value: "sar", label: "SAR" },
+          { value: "usd", label: "USD" }
+        ]}
+        settingsLabel="Currency"
+      />
+      <HawaSettingsRow
+        handleChange={(e) => console.log("changing to ", e)}
+        settingsType="radio"
+        defaultValue="en"
+        options={[
+          { value: "en", label: "English" },
+          { value: "ar", label: "Arabic" }
+        ]}
+        settingsLabel="Language"
+      />
+        <HawaSettingsRow
+        settingsType="boolean"
+        placeholder="Your handle"
+        settingsLabel="Show Analytics"
+      />
+    </UserSettingsForm>
+  );
+};
+UserSettings.args = {
+  theme: "primary",
+  title: "red"
+};

package/src/stories/BlocksStories/Auth/NewPassword.stories.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { NewPasswordForm } from "../../../blocks/AuthForms";
+
+export default {
+  title: "Blocks/Auth/New Password",
+  component: [NewPasswordForm],
+  argTypes: {
+  
+    showError: {
+      default: false,
+      control: "boolean",
+      description: "Display the error when auth fails",
+      table: { defaultValue: { summary: true } }
+    },
+    errorTitle: {
+      default: " ",
+      control: "text",
+      description: "The error text for the auth failure",
+      table: { defaultValue: { summary: "" } }
+    },
+    errorText: {
+      default: "Something went wrong",
+      control: "text",
+      description: "The error text for the auth failure",
+      table: { defaultValue: { summary: "Something went wrong" } }
+    }
+  }
+};
+
+const NewPasswordTemplate = (args) => {
+  return (
+    <NewPasswordForm
+      {...args}
+      texts={{
+        emailLabel: "Email",
+        emailPlaceholder: "Enter your email",
+        emailRequiredText: "Email is required",
+        passwordPlaceholder: "Enter password",
+        updatePassword: "Update Password",
+        passwordRequiredText: "Password is required",
+        passwordLabel: "Choose new password",
+        confirmPasswordPlaceholder: "Confirm password",
+        confirmPasswordLabel: "Confirm",
+        forgotPasswordText: "Forgot password?",
+        newUserText: "New user?",
+        signUpText: "Sign up",
+        signInText: "Sign in",
+        googleButtonLabel: "Sign in with Google",
+        githubButtonLabel: "Sign in with Github",
+        twitterButtonLabel: "Sign in with Twitter"
+      }}
+      error={args.showError}
+    />
+  );
+};
+export const NewPassword = NewPasswordTemplate.bind({});
+NewPassword.args = {
+  showError: false,
+  passwordChanged: false
+};

package/src/stories/BlocksStories/Auth/ResetPassword.stories.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { ResetPasswordForm } from "../../../blocks/AuthForms";
+
+export default {
+  title: "Blocks/Auth/Reset Password",
+  component: [ResetPasswordForm],
+  argTypes: {
+   
+    showError: {
+      default: false,
+      control: "boolean",
+      description: "Display the error when auth fails",
+      table: { defaultValue: { summary: true } }
+    },
+    errorTitle: {
+      default: " ",
+      control: "text",
+      description: "The error text for the auth failure",
+      table: { defaultValue: { summary: "" } }
+    },
+    errorText: {
+      default: "Something went wrong",
+      control: "text",
+      description: "The error text for the auth failure",
+      table: { defaultValue: { summary: "Something went wrong" } }
+    }
+  }
+};
+
+const ResetPasswordTemplate = (args) => {
+  return (
+    <ResetPasswordForm
+      error={args.showError}
+      texts={{
+        emailLabel: "Email",
+        emailPlaceholder: "Enter your email",
+        emailRequiredText: "Email is required",
+        emailInvalidText: "Invalid email address",
+        passwordLabel: "Password",
+        resetPassword: "Reset Password",
+        passwordRequiredText: "Password is required",
+        forgotPasswordText: "Forgot password?",
+        newUserText: "New user?",
+        signUpText: "Sign up",
+        signInText: "Sign in",
+        googleButtonLabel: "Sign in with Google",
+        githubButtonLabel: "Sign in with Github",
+        twitterButtonLabel: "Sign in with Twitter"
+      }}
+      {...args}
+      handleResetPassword={() => console.log("resetting password")}
+    />
+  );
+};
+export const ResetPassword = ResetPasswordTemplate.bind({});
+ResetPassword.args = {
+  showError: false,
+  sent: false
+};