@sikka/hawa 0.0.11 → 0.0.12

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { UserSettingsForm } from "../../../blocks/Account";
+
+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} />;
+};
+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"
+};

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

@@ -0,0 +1,90 @@
+import React from "react";
+import { SignUpForm } from "../../../blocks/AuthForms";
+
+export default {
+  title: "Blocks/Auth/Sign Up",
+  component: [SignUpForm],
+  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 SignUpTemplate = (args) => {
+  return (
+    <SignUpForm
+      {...args}
+      texts={{
+        fullNameLabel: "Full Name",
+        fullNamePlaceholder: "Fulan AlFulani",
+        emailLabel: "Email",
+        emailPlaceholder: "Enter your email",
+        emailRequiredText: "Email is required",
+        emailInvalidText: "Invalid email address",
+        passwordLabel: "Password",
+        passwordPlaceholder: "Minimum 8 characters",
+        passwordRequiredText: "Password is required",
+        passwordTooShortText: "Password too short",
+        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}
+      viaGoogle={args.viaGoogle}
+      viaGithub={args.viaGithub}
+      viaTwitter={args.viaTwitter}
+      handleSignUp={() => console.log("singing up via email")}
+      handleGoogleSignUp={() => console.log("signing up via google")}
+      handleGithubSignUp={() => console.log("signing up via github")}
+      handleTwitterSignUp={() => console.log("signing up via Twitter")}
+      handleRouteToSignIn={() => console.log("switching to sign in")}
+    />
+  );
+};
+export const SignUp = SignUpTemplate.bind({});
+SignUp.args = {
+  viaGoogle: true,
+  viaGithub: true,
+  viaTwitter: true,
+  showError: false,
+  errorTitle: "Error",
+  errorText: "Something went wrong"
+};

package/src/stories/BlocksStories/Payment/ChargeWallet.stories.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { ChargeWalletForm } from "../../../blocks/Payment";
+
+export default {
+  title: "Blocks/Payment/Charge Wallet",
+  component: [ChargeWalletForm],
+  argTypes: {
+    viaWallet: { control: "boolean" },
+    viaApplePay: { control: "boolean" },
+    viaGooglePay: { control: "boolean" },
+    viaSTCPay: { control: "boolean" },
+    viaCreditCard: { control: "boolean" },
+    viaPayPal: { control: "boolean" }
+  },
+  args: {
+    viaWallet: true,
+    viaMada: true,
+    viaApplePay: true,
+    viaGooglePay: true,
+    viaSTCPay: true,
+    viaCreditCard: true,
+    viaPayPal: true
+  }
+};
+
+export const ChargeWallet = (args) => {
+  return <ChargeWalletForm {...args} />;
+};
+
+ChargeWallet.args = { currency: "SAR" };

package/src/stories/BlocksStories/Payment/PayWithCreditCard.stories.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { CreditCardForm } from "../../../blocks/Payment";
+
+export default {
+  title: "Blocks/Payment/Pay Via Credit Card",
+  component: [CreditCardForm],
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    },
+    viaWallet: { control: "boolean" },
+    viaApplePay: { control: "boolean" },
+    viaGooglePay: { control: "boolean" },
+    viaSTCPay: { control: "boolean" },
+    viaCreditCard: { control: "boolean" },
+    viaPayPal: { control: "boolean" }
+  },
+  args: {
+    theme: "primary",
+    viaWallet: true,
+    viaMada: true,
+    viaApplePay: true,
+    viaGooglePay: true,
+    viaSTCPay: true,
+    viaCreditCard: true,
+    viaPayPal: true
+  }
+};
+
+export const PayViaCreditCard = (args) => {
+  return <CreditCardForm theme={args.theme} />;
+};
+
+PayViaCreditCard.args = {
+  theme: "secondary"
+};

package/src/stories/BlocksStories/Payment/PayWithWallet.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { PayWithWallet } from "../../../blocks/Payment";
+
+export default {
+  title: "Blocks/Payment/Pay Via Wallet",
+  component: [PayWithWallet],
+  argTypes: {
+    walletBalance: { control: "number" }
+  },
+  args: {
+    walletBalance: 20
+  }
+};
+
+export const PayViaWallet = (args) => {
+  return <PayWithWallet {...args} />;
+};

package/src/stories/BlocksStories/{PaymentForm.stories.js → Payment/PaymentSelection.stories.js}

@@ -1,14 +1,9 @@
 import React from "react";
-import {
-  SelectPayment,
-  CreditCardForm,
-  ChargeWalletForm,
-  PayWithWallet
-} from "../../blocks/Payment";
+import { SelectPayment } from "../../../blocks/Payment";
 
 export default {
-  title: "Blocks/PaymentBlocks",
-  component: [SelectPayment, CreditCardForm],
+  title: "Blocks/Payment/Payment Selection",
+  component: [SelectPayment],
   argTypes: {
     theme: {
       options: ["primary", "secondary", "default"],
@@ -33,7 +28,7 @@ export default {
   }
 };
 
-export const PaymentSelection = (args) => {
+const PaymentSelectionTemplate = (args) => {
   return (
     <SelectPayment
       {...args}
@@ -54,18 +49,12 @@ export const PaymentSelection = (args) => {
     />
   );
 };
-
-export const PayViaWallet = (args) => {
-  return <PayWithWallet theme={args.theme} />;
-};
-export const PayViaCreditCard = (args) => {
-  return <CreditCardForm />;
-};
-
-export const ChargeWallet = (args) => {
-  return <ChargeWalletForm currency="SAR" />;
-};
-
-ChargeWallet.args = {
-  theme: "secondary"
+export const PaymentSelection = PaymentSelectionTemplate.bind({});
+PaymentSelection.args = {
+  viaGoogle: true,
+  viaGithub: true,
+  viaTwitter: true,
+  showError: false,
+  errorTitle: "Error",
+  errorText: "Something went wrong"
 };

package/src/stories/LayoutStories/Box.stories.js

@@ -19,11 +19,11 @@ export default {
   component: <Box />,
   parameters: {
     backgrounds: {
-      default: "light",
-      values: [
-        { name: "light", value: theme.lightBackground },
-        { name: "dark", value: theme.darkBackground }
-      ]
+      default: "light"
+      // values: [
+      //   { name: "light", value: theme.lightBackground },
+      //   { name: "dark", value: theme.darkBackground }
+      // ]
     }
   }
 };
@@ -41,10 +41,5 @@ export const Compact = Template.bind({});
 Compact.args = {
   size: "small",
   showText: true,
-  buttonLabel: "test",
-  theme: {
-    // paddings: theme.paddings / 2,
-    textColor: "#000000",
-    buttonColor: "#f9f9f9"
-  }
+  buttonLabel: "test"
 };

package/src/stories/UIStories/LogoButtons.stories.js

@@ -1,86 +1,73 @@
+import { Container } from "@mui/material";
 import React from "react";
 import { ActionButton, HawaLogoButton } from "../../ui";
 
 export default {
   title: "Elements/Buttons/LogoButtons",
-  component: ActionButton,
+  component: HawaLogoButton,
   argTypes: {
-    theme: {
-      options: ["primary", "secondary", "default"],
-      control: { type: "select" }
+    buttonLabel: {
+      control: "text",
+      description: "The text next to the logo"
     },
-    buttonLabel: { control: "text" },
-    logo: { control: "text" }
-  },
-  args: {
-    buttonLabel: "test",
-    logo: "google",
-    theme: "primary"
+    logo: {
+      control: "select",
+      options: [
+        "google",
+        "twitter",
+        "github",
+        "paypal",
+        "applepay",
+        "googlepay",
+        "stcpay",
+        "mada",
+        "visa/master"
+      ],
+      description: "a brand name that will display the logo accordingly",
+      table: {
+        type: {
+          summary: "Examples",
+          detail: "google, twitter, github, paypal, applepay, googlepay"
+        }
+      }
+    }
   }
 };
 
 const Template = (args) => {
-  return <HawaLogoButton logo={args.logo} buttonText={args.buttonLabel} />;
+  return (
+    <Container maxWidth="xs" variant="plain">
+      <HawaLogoButton logo={args.logo} buttonText={args.buttonLabel} />
+    </Container>
+  );
 };
 
 export const Google = Template.bind({});
-Google.args = {
-  buttonLabel: "Sign in via Google",
-  logo: "google",
-  theme: "primary"
-};
+Google.args = { buttonLabel: "Sign in via Google", logo: "google" };
 
 export const Twitter = Template.bind({});
-Twitter.args = {
-  buttonLabel: "Sign in via Twitter",
-  logo: "twitter",
-  theme: "primary"
-};
+Twitter.args = { buttonLabel: "Sign in via Twitter", logo: "twitter" };
+
 export const Github = Template.bind({});
-Github.args = {
-  buttonLabel: "Sign in via Github",
-  logo: "github",
-  theme: "primary"
-};
+Github.args = { buttonLabel: "Sign in via Github", logo: "github" };
+
 export const WalletPay = Template.bind({});
-WalletPay.args = {
-  buttonLabel: "Pay with Wallet",
-  logo: "wallet",
-  theme: "primary"
-};
+WalletPay.args = { buttonLabel: "Pay with Wallet", logo: "wallet" };
+
 export const GooglePay = Template.bind({});
-GooglePay.args = {
-  buttonLabel: "Google Pay",
-  logo: "googlepay",
-  theme: "primary"
-};
+GooglePay.args = { buttonLabel: "Google Pay", logo: "googlepay" };
+
 export const ApplePay = Template.bind({});
-ApplePay.args = {
-  buttonLabel: "Apple Pay",
-  logo: "applepay",
-  theme: "primary"
-};
+ApplePay.args = { buttonLabel: "Apple Pay", logo: "applepay" };
+
 export const STCPay = Template.bind({});
-STCPay.args = {
-  buttonLabel: "STC Pay",
-  logo: "stcpay",
-  theme: "primary"
-};
+STCPay.args = { buttonLabel: "STC Pay", logo: "stcpay" };
+
 export const VisaMasterPay = Template.bind({});
-VisaMasterPay.args = {
-  buttonLabel: "Visa / Mastercard",
-  logo: "visa/master",
-  theme: "primary"
-};
+VisaMasterPay.args = { buttonLabel: "Visa / Mastercard", logo: "visa/master" };
+
 export const PayPal = Template.bind({});
-PayPal.args = {
-  buttonLabel: "PayPal",
-  logo: "paypal",
-  theme: "primary"
-};
+PayPal.args = { buttonLabel: "PayPal", logo: "paypal" };
+
 export const Mada = Template.bind({});
-Mada.args = {
-  buttonLabel: "Mada",
-  logo: "mada",
-  theme: "primary"
-};
+Mada.args = { buttonLabel: "Mada", logo: "mada" };