@sikka/hawa 0.0.11 → 0.0.14

package/src/blocks/Payment/SelectPayment.js

@@ -1,12 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Box } from "../../layout";
-import { HawaTextField, HawaTypography, HawaLogoButton } from "../../ui";
+import { HawaTextField, HawaTypography, HawaLogoButton } from "../../elements";
 import { Container } from "@mui/material";
 
 export const SelectPayment = (props) => {
   return (
-    <Container maxWidth="xs" >
+    <Container maxWidth="xs">
       <HawaTypography align="center">Choose Payment Method</HawaTypography>
       {props.viaWallet && (
         <HawaLogoButton
@@ -19,42 +18,42 @@ export const SelectPayment = (props) => {
         <HawaLogoButton
           logo="visa/master"
           buttonText={props.visaMasterLabel}
-          handleClick={props.handleCreditCard}
+          onClick={props.handleCreditCard}
         />
       )}
       {props.viaMada && (
         <HawaLogoButton
           logo="mada"
           buttonText={props.madaLabel}
-          handleClick={props.handleMada}
+          onClick={props.handleMada}
         />
       )}
       {props.viaSTCPay && (
         <HawaLogoButton
           logo="stcpay"
           buttonText={props.stcPayLabel}
-          handleClick={props.handleSTCPay}
+          onClick={props.handleSTCPay}
         />
       )}
       {props.viaPayPal && (
         <HawaLogoButton
           logo="paypal"
           buttonText={props.paypalLabel}
-          handleClick={props.handlePayPal}
+          onClick={props.handlePayPal}
         />
       )}
       {props.viaGooglePay && (
         <HawaLogoButton
           logo="googlepay"
           buttonText={props.googlePayLabel}
-          handleClick={props.handleGooglePay}
+          onClick={props.handleGooglePay}
         />
       )}
       {props.viaApplePay && (
         <HawaLogoButton
           logo="applepay"
           buttonText={props.applePayLabel}
-          handleClick={props.handleApplePay}
+          onClick={props.handleApplePay}
         />
       )}
     </Container>

package/src/blocks/Pricing/PricingPlans.js

@@ -0,0 +1,47 @@
+import React from "react";
+import Container from "@mui/material/Container";
+import { HawaPricingCard, HawaRadio } from "../../elements";
+
+export const PricingPlans = (props) => {
+  return (
+    <Container style={{ width: "fit-content" }} variant="plain">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+
+          marginBottom: 10
+        }}
+      >
+        <HawaRadio
+          location="inPricing"
+          handleChange={(e) => console.log("changing to ", e)}
+          defaultValue="usd"
+          options={[
+            { label: `Monthly`, value: `usd` },
+            { label: `3 Months`, value: `3-months` },
+            { label: `6 Months`, value: `6-months` },
+            { label: `Annually`, value: `annual` }
+          ]}
+        />
+
+        <HawaRadio
+          location="inPricing"
+          handleChange={(e) => console.log("changing to ", e)}
+          defaultValue="usd"
+          options={[
+            { label: `USD`, value: `usd` },
+            { label: `SAR`, value: `sar` }
+          ]}
+        />
+      </div>
+
+      <Container variant="pricing">
+        {props.plans.map((plan) => {
+          return <HawaPricingCard lang={props.lang} {...plan} />;
+        })}
+      </Container>
+    </Container>
+  );
+};

package/src/elements/AdaptiveButton.js

@@ -0,0 +1,32 @@
+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) {
+    return (
+      <Button variant="adaptive-dark" onClick={props.onClick}>
+        {props.icon}
+        <div style={{ width: 10 }} />
+        {props.buttonText}
+      </Button>
+    );
+  } else {
+    //icon only
+    return (
+      <Tooltip title={props.buttonText} placement="top">
+        <Button variant="adaptive-dark" onClick={props.onClick}>
+          {props.icon}
+        </Button>
+      </Tooltip>
+    );
+  }
+};
+
+AdaptiveButton.propTypes = {
+  buttonText: PropTypes.string,
+  showText: PropTypes.bool
+};

package/src/elements/HawaPricingCard.js

@@ -0,0 +1,115 @@
+import React from "react";
+import Container from "@mui/material/Container";
+import { Button, Typography } from "@mui/material";
+import CheckIcon from "@mui/icons-material/CheckCircleOutlined";
+export const HawaPricingCard = (props) => {
+  return (
+    <Container
+      maxWidth="xs"
+      variant={props.selectedPlan ? "selected-plan-card" : "plan-card"}
+      style={{ direction: props.lang === "ar" ? "rtl" : "ltr" }}
+    >
+      <Container variant="plan-header">
+        <Typography variant="h3" fontWeight={500}>
+          {props.title}
+        </Typography>
+        <Typography variant="caption">{props.subtitle}</Typography>
+        <br />
+        <Typography
+          variant="h4"
+          fontWeight={500}
+          style={{
+            display: "flex",
+            // flexDirection: "column",
+            alignItems: "center"
+            // justifyContent: props.lang === "ar" ? "" : "center"
+          }}
+        >
+          {props.lang === "ar" ? (
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center"
+                // alignItems: "center"
+              }}
+            >
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                {props.price}
+                <div style={{ width: 5 }} />
+                <Typography>{props.currency}</Typography>
+              </div>
+              <Typography style={{ fontSize: 14, margin: 5 }}>
+                {props.cycleText}
+              </Typography>
+            </div>
+          ) : (
+            <div
+              style={{
+                width: "100%",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center"
+                // alignItems: "center"
+              }}
+            >
+              <div style={{ display: "flex", flexDirection: "row" }}>
+                <Typography>{props.currency}</Typography>
+                <div style={{ width: 5 }} />
+                {props.price}
+              </div>
+              <Typography style={{ fontSize: 14, margin: 5 }}>
+                {props.cycleText}
+              </Typography>
+            </div>
+          )}
+          {/* {props.lang === "ar" ? null : (
+            <Typography style={{ fontSize: 14, margin: 5 }}>
+              {" / "}
+              {props.cycleText}
+            </Typography>
+          )} */}
+        </Typography>
+      </Container>
+
+      <div
+        style={{ padding: 20, color: props.selectedPlan ? "white" : "black" }}
+      >
+        {props.features?.map((feature) => {
+          return (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "flex-start",
+                marginTop: 10,
+                width: "100%"
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  justifyContent: "flex-end",
+                  width: "10%"
+                }}
+              >
+                <CheckIcon fontSize="small" />
+              </div>
+              <div style={{ width: 10 }} />
+              <Typography variant="subtitle2">{feature}</Typography>
+            </div>
+          );
+        })}
+      </div>
+      <Button
+        variant={props.selectedPlan ? "outlined" : "contained"}
+        style={{ margin: 20 }}
+      >
+        {props.buttonText}
+      </Button>
+    </Container>
+  );
+};

package/src/elements/HawaRadio.js

@@ -0,0 +1,30 @@
+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 || "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}/index.js

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

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
+};

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

@@ -0,0 +1,89 @@
+import React from "react";
+import { SignInForm } from "../../../blocks/AuthForms";
+
+export default {
+  title: "Blocks/Auth/Sign In",
+  component: [SignInForm],
+  argTypes: {
+    viaGoogle: {
+      default: true,
+      control: "boolean",
+      description: "Display the sign in via Google button",
+      table: { defaultValue: { summary: true } }
+    },
+    viaTwitter: {
+      default: true,
+      control: "boolean",
+      description: "Display the sign in via Twitter button",
+      table: { defaultValue: { summary: true } }
+    },
+    viaGithub: {
+      default: true,
+      control: "boolean",
+      description: "Display the sign in via Github button",
+      table: { defaultValue: { summary: true } }
+    },
+    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 SignInTemplate = (args) => {
+  return (
+    <SignInForm
+      {...args}
+      error={args.showError}
+      texts={{
+        emailLabel: "Email",
+        emailPlaceholder: "Enter your email",
+        emailRequiredText: "Email is required",
+        emailInvalidText: "Invalid email address",
+        passwordLabel: "Password",
+        passwordPlaceholder: "Enter 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"
+      }}
+      handleSignIn={(e) => console.log("singing in via email", e)}
+      handleForgotPassword={() => console.log("user forgot password")}
+      handleGoogleSignIn={() => console.log("signing in via google")}
+      handleGithubSignIn={() => console.log("signing in via github")}
+      handleTwitterSignIn={() => console.log("signing in via Twitter")}
+      handleRouteToSignUp={() => console.log("switching to sign up")}
+      viaGoogle={args.viaGoogle}
+      viaGithub={args.viaGithub}
+      viaTwitter={args.viaTwitter}
+    />
+  );
+};
+
+export const SignIn = SignInTemplate.bind({});
+SignIn.args = {
+  viaGoogle: true,
+  viaGithub: true,
+  viaTwitter: true,
+  showError: false,
+  errorTitle: "Error",
+  errorText: "Something went wrong"
+};