@sikka/hawa 0.0.10 → 0.0.13

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/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/ElementsStories/AdaptiveButton.stories.js

@@ -0,0 +1,51 @@
+import { Class } from "@mui/icons-material";
+import React from "react";
+import { AdaptiveButton } from "../../elements";
+
+export default {
+  title: "Elements/Buttons/AdaptiveButton",
+  component: AdaptiveButton,
+  argTypes: {
+    buttonText: {
+      control: "text",
+      description: "The button text",
+      table: {
+        defaultValue: { summary: "Click" }
+      }
+    },
+    showText: {
+      control: "boolean",
+      // default: true,
+      description: "Boolean to show or hide the text",
+      table: {
+        defaultValue: { summary: true },
+        type: {
+          summary: "Use Case",
+          detail:
+            "Set this property to true in large screen and false on mobile"
+        }
+      }
+    }
+  },
+  args: {
+    buttonText: "Click"
+  }
+};
+
+const Template = (args) => {
+  return <AdaptiveButton {...args} />;
+};
+
+export const FullButton = Template.bind({});
+FullButton.args = {
+  showText: true,
+  // buttonText: "Full Button",
+  icon: <Class />
+};
+
+export const IconOnly = Template.bind({});
+IconOnly.args = {
+  showText: false,
+  icon: <Class />,
+  buttonText: "test"
+};

package/src/stories/{UIStories → ElementsStories}/Alert.stories.js

@@ -1,11 +1,10 @@
 import React from "react";
 
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
-import { HawaAlert } from "../../ui";
+import { HawaAlert } from "../../elements";
 
 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 → ElementsStories}/InputLabel.stories.js

@@ -1,5 +1,5 @@
 import { storiesOf } from "@storybook/react";
-import { HawaInputLabel } from "../../ui";
+import { HawaInputLabel } from "../../elements";
 
 export default {
   title: "Components/InputLabel",

package/src/stories/ElementsStories/ItemCard.stories.js

@@ -0,0 +1,18 @@
+import { Container } from "@mui/material";
+import React from "react";
+import { HawaCard } from "../../elements";
+
+export default {
+  title: "Elements/Cards/Items",
+  component: [HawaCard],
+  argTypes: {
+    buttonLabel: {
+      control: "text",
+      description: "The text next to the logo"
+    }
+  }
+};
+
+export const Items = (args) => {
+  return <HawaCard />;
+};

package/src/stories/ElementsStories/LogoButtons.stories.js

@@ -0,0 +1,73 @@
+import { Container } from "@mui/material";
+import React from "react";
+import { ActionButton, HawaLogoButton } from "../../elements";
+
+export default {
+  title: "Elements/Buttons/LogoButtons",
+  component: HawaLogoButton,
+  argTypes: {
+    buttonLabel: {
+      control: "text",
+      description: "The text next to the logo"
+    },
+    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 (
+    <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" };
+
+export const Twitter = Template.bind({});
+Twitter.args = { buttonLabel: "Sign in via Twitter", logo: "twitter" };
+
+export const Github = Template.bind({});
+Github.args = { buttonLabel: "Sign in via Github", logo: "github" };
+
+export const WalletPay = Template.bind({});
+WalletPay.args = { buttonLabel: "Pay with Wallet", logo: "wallet" };
+
+export const GooglePay = Template.bind({});
+GooglePay.args = { buttonLabel: "Google Pay", logo: "googlepay" };
+
+export const ApplePay = Template.bind({});
+ApplePay.args = { buttonLabel: "Apple Pay", logo: "applepay" };
+
+export const STCPay = Template.bind({});
+STCPay.args = { buttonLabel: "STC Pay", logo: "stcpay" };
+
+export const VisaMasterPay = Template.bind({});
+VisaMasterPay.args = { buttonLabel: "Visa / Mastercard", logo: "visa/master" };
+
+export const PayPal = Template.bind({});
+PayPal.args = { buttonLabel: "PayPal", logo: "paypal" };
+
+export const Mada = Template.bind({});
+Mada.args = { buttonLabel: "Mada", logo: "mada" };

package/src/stories/ElementsStories/PricingCard.stories.js

@@ -0,0 +1,27 @@
+import { Container } from "@mui/material";
+import React from "react";
+import { HawaCard } from "../../elements";
+
+export default {
+  title: "Elements/Cards/Pricing",
+  component: [HawaCard],
+  argTypes: {
+    buttonLabel: {
+      control: "text",
+      description: "The text next to the logo"
+    }
+  }
+};
+
+export const Pricing = (args) => {
+  return (
+    <HawaCard
+      title="Pro"
+      subtitle="For small business"
+      price="300"
+      currency="SAR"
+      cycleText="Every 6 months"
+      features={["Unlimited Menus", "Unlimited Items", "Custom Handle"]}
+    />
+  );
+};

package/src/stories/ElementsStories/RadioSelector.stories.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { HawaRadio } from "../../elements";
+
+export default {
+  title: "Elements/Selections/Panel Tabs",
+  component: [HawaRadio],
+  argTypes: {
+    options: {
+      control: "array",
+      description: "An array of objects containing the option label and value",
+      table: {
+        type: {
+          summary: "Object Example",
+          detail: "{label: 'Option 1', value: 'option1'}"
+        }
+      }
+    }
+  },
+  args: {
+    options: 3
+  }
+};
+
+export const PanelTabs = (args) => {
+  let allOptions = Array.from({ length: args.options }, (v, i) => {
+    return { label: `Option ${i}`, value: `option${i}` };
+  });
+  return (
+    <HawaRadio
+      {...args}
+      handleChange={(e) => console.log("changing to ", e)}
+      defaultValue="option1"
+      options={allOptions}
+    />
+  );
+};

package/src/stories/ElementsStories/SettingsRow.stories.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { HawaSettingsRow } from "../../elements";
+
+export default {
+  title: "Elements/Settings/Row",
+  component: [HawaSettingsRow],
+  parameters: {
+    backgrounds: {
+      default: 'twitter',
+      values: [
+        {
+          name: 'light',
+          value: '#00aced',
+        },
+        {
+          name: 'dark',
+          value: '#3b5998',
+        },
+      ],
+    },
+  //   backgrounds: [{ name: "dark background", value: "#000", default: true }]
+  },
+  argTypes: {
+    settingsType: {
+      options: ["checkbox", "text", "radio"],
+      control: { type: "select" }
+    }
+  }
+};
+
+export const CheckboxSettings = (args) => <HawaSettingsRow {...args} />;
+CheckboxSettings.args = {
+  settingsType: "checkbox",
+  settingsLabel: "Text Settings"
+};
+export const TextSettings = (args) => (
+  <HawaSettingsRow placeholder="Text here" {...args} />
+);
+
+TextSettings.args = {
+  settingsType: "text",
+  settingsLabel: "Text Settings"
+};
+export const RadioSettings = (args) => {
+  let allOptions = Array.from({ length: args.options }, (v, i) => {
+    return { label: `Option ${i}`, value: `option${i}` };
+  });
+  return (
+    <HawaSettingsRow
+      settingsType={args.settingsType}
+      settingsLabel={args.settingsLabel}
+      handleChange={(e) => console.log("changing to ", e)}
+      defaultValue="option1"
+      options={allOptions}
+    />
+  );
+};
+
+RadioSettings.args = {
+  options: 3,
+  settingsType: "radio",
+  settingsLabel: "Radio Settings"
+};

package/src/stories/{UIStories → ElementsStories}/TextField.stories.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { HawaTextField } from "../../ui";
+import { HawaTextField } from "../../elements";
 
 const Template = (args) => {
   return <HawaTextField {...args} />;