@sikka/hawa 0.0.11 → 0.0.14

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/BlocksStories/Pricing/BillingPlans.stories.js

@@ -0,0 +1,46 @@
+import React from "react";
+import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
+
+export default {
+  title: "Blocks/Pricing/In Billing",
+  component: [PricingPlans],
+  argTypes: {}
+};
+
+export const InBilling = (args) => {
+  return (
+    <PricingPlans
+      {...args}
+      plans={[
+        {
+          title: "Free",
+          subtitle: "For everyone",
+          price: 0,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"]
+        },
+        {
+          title: "Intro",
+          subtitle: "For beginners",
+          selectedPlan: true,
+          price: 10,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Current Plan",
+          features: ["one", "two", "three"]
+        },
+        {
+          title: "Pro",
+          subtitle: "For professionals",
+          price: 30,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"]
+        }
+      ]}
+    />
+  );
+};

package/src/stories/BlocksStories/Pricing/LandingPlans.stories.js

@@ -0,0 +1,45 @@
+import React from "react";
+import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
+
+export default {
+  title: "Blocks/Pricing/In Landing",
+  component: [PricingPlans],
+  argTypes: {}
+};
+
+export const InLanding = (args) => {
+  return (
+    <PricingPlans
+      {...args}
+      plans={[
+        {
+          title: "Free",
+          subtitle: "For everyone",
+          price: 0,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"]
+        },
+        {
+          title: "Intro",
+          subtitle: "For beginners",
+          price: 10,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"]
+        },
+        {
+          title: "Pro",
+          subtitle: "For professionals",
+          price: 30,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"]
+        }
+      ]}
+    />
+  );
+};

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,6 +1,6 @@
 import React from "react";
 
-import { HawaAlert } from "../../ui";
+import { HawaAlert } from "../../elements";
 
 const Template = (args) => {
   return (

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,91 @@
+import React from "react";
+import { HawaPricingCard } from "../../elements";
+
+export default {
+  title: "Elements/Cards/Pricing",
+  component: [HawaPricingCard],
+  argTypes: {
+    title: {
+      control: "text",
+      description: "The title of the pricing package"
+    },
+    subtitle: {
+      control: "text",
+      description: "The subtitle of the pricing package"
+    },
+    price: {
+      control: "number",
+      description: "The price of the pricing package"
+    },
+    currency: {
+      control: "text",
+      description: "The currency of the price",
+      table: {
+        type: {
+          summary: "Examples",
+          detail: "$, SAR, ريال, دولار"
+        }
+      }
+    },
+    cycleText: {
+      control: "text",
+      description: "The cycle period of the payment",
+      table: {
+        type: {
+          summary: "Examples",
+          detail: "Monthly, Annually, Quarterly, Every 3 Months, Every 6 Months"
+        }
+      }
+    },
+    features: {
+      control: "array",
+      description: "An Array of strings for the package features"
+    },
+    lang: {
+      control: "text",
+      description: "The language of the card to change the direction",
+      table: {
+        type: {
+          summary: "Options",
+          detail: "ar, en"
+        }
+      }
+    },
+    buttonText: {
+      control: "text",
+      description: "The text of the button"
+    }
+  },
+  args: {
+    title: "Pro",
+    subtitle: "For small businesses",
+    price: 300,
+    currency: "$",
+    cycleText: "Monthly",
+    buttonText: "Select Plan"
+  }
+};
+
+export const LTR = (args) => {
+  return (
+    <HawaPricingCard
+      {...args}
+      features={["Unlimited Menus", "Unlimited Items", "Custom Handle"]}
+    />
+  );
+};
+
+export const RTL = (args) => {
+  return (
+    <HawaPricingCard
+      lang="ar"
+      title="الإحترافي"
+      subtitle="للمنشئات الصغيرة"
+      price="300"
+      currency="ريال"
+      cycleText="كل 6 أشهر"
+      buttonText="إختر الباقة"
+      features={["قوائم لا محدودة", "عناصر لا محدودة", "أسم مخصص"]}
+    />
+  );
+};

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