@sikka/hawa 0.0.14 → 0.0.17

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

@@ -1,21 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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/BlocksStories/Pricing/BillingPlans.stories.js

@@ -1,46 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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"
-};