@sikka/hawa 0.0.9 → 0.0.12

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/Payment/PaymentSelection.stories.js

@@ -0,0 +1,60 @@
+import React from "react";
+import { SelectPayment } from "../../../blocks/Payment";
+
+export default {
+  title: "Blocks/Payment/Payment Selection",
+  component: [SelectPayment],
+  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
+  }
+};
+
+const PaymentSelectionTemplate = (args) => {
+  return (
+    <SelectPayment
+      {...args}
+      walletLabel="Wallet Balance"
+      handleWallet={() => console.log("paying via wallet")}
+      visaMasterLabel="Credit Card"
+      handleCreditCard={() => console.log("paying via Credit Card")}
+      madaLabel="Mada"
+      handleMada={() => console.log("paying via Mada")}
+      paypalLabel="PayPal"
+      handlePayPal={() => console.log("paying via PayPal")}
+      applePayLabel="Apple Pay"
+      handleApplePay={() => console.log("paying via Apple Pay")}
+      googlePayLabel="Google Pay"
+      handleGooglePay={() => console.log("paying via Google Pay")}
+      stcPayLabel="STC Pay"
+      handleSTCPay={() => console.log("paying via STC Pay")}
+    />
+  );
+};
+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

@@ -1,13 +1,9 @@
 import React from "react";
 import { Box } from "../../layout";
-import { HawaProvider, defaultTheme } from "../../themes/HawaProvider";
-const theme = {
-  ...defaultTheme
-};
 
 const Template = (args) => {
   return (
-    <HawaProvider size={args.size} themeName={"secondary"}>
+    <>
       <Box>Box 1</Box>
       <Box>
         <div style={{ backgroundColor: "white", padding: 10, color: "black" }}>
@@ -15,7 +11,7 @@ const Template = (args) => {
         </div>
       </Box>
       <Box>Box 3</Box>
-    </HawaProvider>
+    </>
   );
 };
 export default {
@@ -23,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 }
+      // ]
     }
   }
 };
@@ -37,8 +33,7 @@ Normal.args = {
   size: "large",
   showText: true,
   buttonLabel: "test",
-  borderRadius: 5,
-  padding: theme.paddings,
+  // padding: theme.paddings,
   textColor: "#000000",
   buttonColor: "#f9f9f9"
 };
@@ -46,11 +41,5 @@ export const Compact = Template.bind({});
 Compact.args = {
   size: "small",
   showText: true,
-  buttonLabel: "test",
-  theme: {
-    borderRadius: 5,
-    paddings: theme.paddings / 2,
-    textColor: "#000000",
-    buttonColor: "#f9f9f9"
-  }
+  buttonLabel: "test"
 };

package/src/stories/UIStories/ActionButton.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import { HawaProvider } from "../../themes/HawaProvider";
 import { ActionButton } from "../../ui";
 
 export default {
@@ -13,11 +12,7 @@ export default {
   }
 };
 const Template = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <ActionButton text={args.buttonLabel} />
-    </HawaProvider>
-  );
+  return <ActionButton text={args.buttonLabel} />;
 };
 
 Template.args = {

package/src/stories/UIStories/AdaptiveButton.stories.js

@@ -1,6 +1,5 @@
 import React from "react";
 import CastIcon from "@mui/icons-material/Cast";
-import { HawaProvider } from "../../themes/HawaProvider";
 import { AdaptiveButton } from "../../ui";
 
 export default {
@@ -27,11 +26,7 @@ export default {
 };
 
 const Template = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <AdaptiveButton {...args} />
-    </HawaProvider>
-  );
+  return <AdaptiveButton {...args} />;
 };
 
 export const FullButton = Template.bind({});

package/src/stories/UIStories/Alert.stories.js

@@ -1,11 +1,10 @@
 import React from "react";
 
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
 import { HawaAlert } from "../../ui";
 
 const Template = (args) => {
   return (
-    <HawaProvider themeName={args.theme}>
+    <>
       <HawaAlert
         title="What?"
         text="This is a success alert"
@@ -14,7 +13,7 @@ const Template = (args) => {
       <HawaAlert text="This is an info alert" severity="info" />
       <HawaAlert text="This is a warning alert" severity="warning" />
       <HawaAlert text="This is an error alert" severity="error" />
-    </HawaProvider>
+    </>
   );
 };
 //types:

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

@@ -1,90 +1,73 @@
+import { Container } from "@mui/material";
 import React from "react";
-import { HawaProvider } from "../../themes/HawaProvider";
 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 (
-    <HawaProvider themeName={args.theme}>
+    <Container maxWidth="xs" variant="plain">
       <HawaLogoButton logo={args.logo} buttonText={args.buttonLabel} />
-    </HawaProvider>
+    </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" };

package/src/stories/UIStories/RadioSelector.stories.js

@@ -1,53 +1,24 @@
 import React from "react";
-import { HawaProvider } from "../../themes/HawaProvider";
 import { HawaRadio } from "../../ui";
 
 export default {
-  title: "UI/RadioSelector",
-  component: HawaRadio,
-  argTypes: {
-    theme: {
-      options: ["primary", "secondary", "default"],
-      control: { type: "select" }
-    }
-  },
-  args: {
-    theme: "primary"
-  }
+  title: "Elements/Selections/Radio Selector",
+  component: [HawaRadio],
+  argTypes: {},
+  args: {}
 };
 
-const Template = (args) => {
+export const RadioSelector = (args) => {
   return (
-    <HawaProvider themeName={args.theme}>
-      <HawaRadio
-        defaultValue="option1"
-        options={[
-          { text: "Option 1", label: "option1" },
-          { text: "Option 2", label: "option2" },
-          { text: "Option 3", label: "option3" }
-        ]}
-      />
-    </HawaProvider>
+    <HawaRadio
+      {...args}
+      handleChange={(e) => console.log("changing to ", e)}
+      defaultValue="option1"
+      options={[
+        { label: "Option 1", value: "option1" },
+        { label: "Option 2", value: "option2" },
+        { label: "Option 3", value: "option3" }
+      ]}
+    />
   );
 };
-export const Light = Template.bind({});
-
-Light.args = {
-  theme: "primary",
-
-  handleChange: () => {
-    console.log("handleChange goes here");
-  }
-};
-export const Dark = Template.bind({});
-Dark.args = {
-  options: [
-    { text: "Option 1", label: "option1" },
-    { text: "Option 2", label: "option2" },
-    { text: "Option 3", label: "option3" }
-  ],
-  defaultValue: "option2",
-  handleChange: () => {
-    console.log("handleChange goes here");
-  }
-};

package/src/stories/UIStories/SettingsRow.stories.js

@@ -5,7 +5,6 @@ import {
   ChargeWalletForm,
   PayWithWallet
 } from "../../blocks/Payment";
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
 import { HawaSettingsRow } from "../../ui";
 
 export default {
@@ -28,11 +27,7 @@ export default {
 };
 
 const HawaSettingsRowTemplate = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <HawaSettingsRow settingsType={args.type} />
-    </HawaProvider>
-  );
+  return <HawaSettingsRow settingsType={args.type} />;
 };
 
 export const Checkbox = HawaSettingsRowTemplate.bind({});
@@ -41,22 +36,14 @@ Checkbox.args = {
   type: "checkbox"
 };
 export const Text = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <HawaSettingsRow settingsType={args.type} />
-    </HawaProvider>
-  );
+  return <HawaSettingsRow settingsType={args.type} />;
 };
 Text.args = {
   theme: "primary",
   type: "text"
 };
 export const Radio = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <HawaSettingsRow settingsType={args.type} />
-    </HawaProvider>
-  );
+  return <HawaSettingsRow settingsType={args.type} />;
 };
 Radio.args = {
   theme: "primary",