@sikka/hawa 0.0.10 → 0.0.13

package/storybook-static/vendors~main.5eab66d3.iframe.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vendors~main.5eab66d3.iframe.bundle.js","sources":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;A","sourceRoot":""}

package/src/blocks/Account/UserProfile.js

@@ -1,65 +0,0 @@
-import React from "react";
-import { HawaInputLabel, ActionButton, HawaTextField } from "../../ui";
-import { Box } from "../../layout";
-import { FormProvider, useForm } from "react-hook-form";
-
-export const UserProfile = (props) => {
-  const methods = useForm();
-  const {
-    formState: { errors },
-    handleSubmit
-  } = methods;
-
-  return (
-    <Box maxWidth={400} noMargin>
-      <Box noMargin noColor>
-        <FormProvider {...methods}>
-          <form>
-            <HawaTextField
-              type="text"
-              name="fullName"
-              inputLabel="Full Name"
-              placeholder="Fulan AlFulani"
-              rules={{
-                required: "Email is required"
-              }}
-              helperText={errors.fullName?.message}
-            />
-            <HawaTextField
-              type="text"
-              name="email"
-              inputLabel="New Email"
-              placeholder="Enter your new email"
-              rules={{
-                required: "Email is required"
-              }}
-              helperText={errors.email?.message}
-            />
-            <HawaTextField
-              type="password"
-              name="password"
-              inputLabel="New password"
-              placeholder="Enter your new password"
-              rules={{
-                required: "Email is required"
-              }}
-              helperText={errors.password?.message}
-            />
-            <HawaTextField
-              type="password"
-              name="confirmPassword"
-              inputLabel="Confirm new password"
-              placeholder="Confirm new password"
-              rules={{
-                required: "Email is required"
-              }}
-              helperText={errors.confirmPassword?.message}
-            />
-
-            <ActionButton fullWidth last text="Update Account" />
-          </form>
-        </FormProvider>
-      </Box>
-    </Box>
-  );
-};

package/src/blocks/Account/UserSettings.js

@@ -1,15 +0,0 @@
-import React from "react";
-import { HawaTextField, ActionButton } from "../../ui";
-import { Box } from "../../layout";
-
-export const UserSettings = (props) => {
-  return (
-    <Box maxWidth={400}>
-      <HawaTextField type="text" inputLabel="First Name" />
-      <HawaTextField type="text" inputLabel="Last Name" />
-      <HawaTextField type="email" inputLabel="Email" />
-      <HawaTextField type="password" inputLabel="Password" />
-      <ActionButton last text="Update Account" />
-    </Box>
-  );
-};

package/src/stories/BlocksStories/AuthForm.stories.js

@@ -1,105 +0,0 @@
-import React from "react";
-import {
-  NewPasswordForm,
-  ResetPasswordForm,
-  SignInForm,
-  SignUpForm
-} from "../../blocks/AuthForms";
-import { HawaProvider } from "../../themes/HawaProvider";
-
-export default {
-  title: "Blocks/AuthBlocks",
-  component: [SignInForm, SignUpForm, NewPasswordForm, NewPasswordForm],
-  argTypes: {
-    theme: {
-      options: ["primary", "secondary", "default"],
-      control: { type: "select" }
-    }
-  }
-};
-
-const SignInTemplate = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <SignInForm
-        {...args}
-        error={args.showError}
-        handleSignIn={(e) => console.log("singing in via email", e)}
-        viaGoogle={args.viaGoogle}
-        googleButtonLabel={"Sign in with Google"}
-        handleGoogleSignIn={() => console.log("signing in via google")}
-        viaGithub={args.viaGithub}
-        githubButtonLabel={"Sign in with Github"}
-        handleGithubSignIn={() => console.log("signing in via github")}
-        viaTwitter={args.viaTwitter}
-        twitterButtonLabel={"Sign in with Twitter"}
-        handleTwitterSignIn={() => console.log("signing in via Twitter")}
-      />
-    </HawaProvider>
-  );
-};
-
-export const SignIn = SignInTemplate.bind({});
-SignIn.args = {
-  viaGoogle: true,
-  viaGithub: true,
-  viaTwitter: true,
-  showError: false,
-  theme: "primary"
-};
-
-const SignUpTemplate = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <SignUpForm
-        {...args}
-        error={args.showError}
-        handleSignUp={() => console.log("singing up via email")}
-        viaGoogle={args.viaGoogle}
-        googleButtonLabel={"Sign up with Google"}
-        handleGoogleSignUp={() => console.log("signing up via google")}
-        viaGithub={args.viaGithub}
-        githubButtonLabel={"Sign up with Github"}
-        handleGithubSignUp={() => console.log("signing up via github")}
-        viaTwitter={args.viaTwitter}
-        twitterButtonLabel={"Sign up with Twitter"}
-        handleTwitterSignUp={() => console.log("signing up via Twitter")}
-      />
-    </HawaProvider>
-  );
-};
-export const SignUp = SignUpTemplate.bind({});
-SignUp.args = {
-  viaGoogle: true,
-  viaGithub: true,
-  viaTwitter: true,
-  showError: false,
-  theme: "primary"
-};
-
-const ResetPasswordTemplate = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <ResetPasswordForm error={args.showError} theme={args.theme} {...args} />
-    </HawaProvider>
-  );
-};
-export const ResetPassword = ResetPasswordTemplate.bind({});
-ResetPassword.args = {
-  theme: "primary",
-  showError: false,
-  sent: false
-};
-const NewPasswordTemplate = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <NewPasswordForm error={args.showError} theme={args.theme} {...args} />
-    </HawaProvider>
-  );
-};
-export const NewPassword = NewPasswordTemplate.bind({});
-NewPassword.args = {
-  theme: "primary",
-  showError: false,
-  passwordChanged: false
-};

package/src/stories/BlocksStories/PaymentForm.stories.js

@@ -1,86 +0,0 @@
-import React from "react";
-import {
-  SelectPayment,
-  CreditCardForm,
-  ChargeWalletForm,
-  PayWithWallet
-} from "../../blocks/Payment";
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
-
-export default {
-  title: "Blocks/PaymentBlocks",
-  component: [SelectPayment, 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 PaymentSelection = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <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")}
-      />
-    </HawaProvider>
-  );
-};
-
-export const PayViaWallet = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <PayWithWallet theme={args.theme} />
-    </HawaProvider>
-  );
-};
-export const PayViaCreditCard = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <CreditCardForm />
-    </HawaProvider>
-  );
-};
-
-export const ChargeWallet = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <ChargeWalletForm currency="SAR" />
-    </HawaProvider>
-  );
-};
-
-ChargeWallet.args = {
-  theme: "secondary"
-};

package/src/stories/BlocksStories/UserForm.stories.js

@@ -1,41 +0,0 @@
-import React from "react";
-import { UserProfile } from "../../blocks/Account";
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
-
-export default {
-  title: "Blocks/UserBlocks",
-  component: UserProfile,
-  argTypes: {
-    theme: {
-      options: ["primary", "secondary", "default"],
-      control: { type: "select" }
-    }
-  }
-};
-
-const theme = {
-  ...defaultTheme,
-  paddings: 20
-};
-
-export const UserAccount = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme, ...theme }}>
-      <UserProfile {...args} />
-    </HawaProvider>
-  );
-};
-
-UserAccount.args = {
-  theme: "primary"
-};
-export const UserSettings = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme, ...theme }}>
-      <UserProfile {...args} />
-    </HawaProvider>
-  );
-};
-UserSettings.args = {
-  theme: "primary"
-};

package/src/stories/HawaProvider.stories.js

@@ -1,22 +0,0 @@
-import React from "react";
-import { HawaProvider } from "../themes/HawaProvider";
-
-const Template = (args) => {
-  const theme = {
-    borderRadius: 20,
-    primaryColor: "green",
-    secondaryColor: "red",
-    // margins: "10px",
-    paddings: 10
-  };
-  return (
-    <HawaProvider theme={theme}>
-      <div>test</div>
-    </HawaProvider>
-  );
-};
-
-export default {
-  title: "Globals/HawaProvider",
-  component: HawaProvider
-};

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

@@ -1,46 +0,0 @@
-import React from "react";
-import { HawaProvider } from "../../themes/HawaProvider";
-import { ActionButton } from "../../ui";
-
-export default {
-  title: "Elements/Buttons/ActionButton",
-  component: ActionButton,
-  argTypes: {
-    theme: {
-      options: ["primary", "secondary", "default"],
-      control: { type: "select" }
-    }
-  }
-};
-const Template = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <ActionButton text={args.buttonLabel} />
-    </HawaProvider>
-  );
-};
-
-Template.args = {
-  showText: true,
-  buttonLabel: "test",
-  theme: "primary"
-};
-export const Primary = Template.bind({});
-Primary.args = {
-  showText: true,
-  buttonLabel: "test",
-  theme: "primary"
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  showText: true,
-  buttonLabel: "test",
-  theme: "secondary"
-};
-export const Default = Template.bind({});
-Default.args = {
-  showText: true,
-  buttonLabel: "test",
-  theme: "default"
-};

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

@@ -1,81 +0,0 @@
-import React from "react";
-import CastIcon from "@mui/icons-material/Cast";
-import { HawaProvider } from "../../themes/HawaProvider";
-import { AdaptiveButton } from "../../ui";
-
-export default {
-  title: "Elements/Buttons/AdaptiveButton",
-  component: AdaptiveButton,
-  argsTypes: {
-    buttonLabel: { control: "text" },
-    borderRadius: { control: "number" },
-    buttonColor: { control: "color" },
-    padding: { control: "number" },
-    hintTitle: { control: "text" },
-    hintContent: { control: "text" },
-    theme: {
-      options: ["primary", "secondary", "default"],
-      control: { type: "select" }
-    }
-  },
-  args: {
-    hintTitle: "test",
-    hintContent: "more test",
-    buttonColor: "#f9f9f9",
-    theme: "primary"
-  }
-};
-
-const Template = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <AdaptiveButton {...args} />
-    </HawaProvider>
-  );
-};
-
-export const FullButton = Template.bind({});
-FullButton.args = {
-  // showText: true,
-  // buttonLabel: "test",
-  // borderRadius: 5,
-  // icon: <CastIcon />,
-  // textColor: "#000000",
-  // buttonColor: "#f9f9f9",
-  theme: "primary"
-  // placeholder: "Example ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};
-
-export const IconOnly = Template.bind({});
-IconOnly.args = {
-  // showText: true,
-  // buttonLabel: "test",
-  // borderRadius: 5,
-  // buttonColor: "#878787",
-  // textColor: "#ffffff",
-  // icon: <CastIcon />,
-  theme: "primary"
-
-  // placeholder: "Exemple ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};
-export const Danger = Template.bind({});
-Danger.args = {
-  // showText: true,
-  // buttonLabel: "test",
-  // borderRadius: 5,
-  // buttonColor: "#c0c0c0",
-  // danger: true,
-  // icon: <CastIcon />,
-  theme: "primary"
-
-  // placeholder: "Exemple ...",
-  // defaultValue: "This is default value",
-  // inputLabel: "Text Field",
-  // padding: 10
-};

package/src/stories/UIStories/CheckBox.stories.js

@@ -1,34 +0,0 @@
-import React from "react";
-import { HawaCheckbox } from "../../ui";
-
-const Template = (args) => {
-  return <HawaCheckbox {...args} />;
-};
-
-export default {
-  title: "UI/Checkbox",
-  component: HawaCheckbox,
-  argsTypes: {
-    defaultValue: {
-      options: [true, false],
-      control: { type: "radio" }
-    }
-  },
-  args: {
-    defaultValue: true,
-    disabled: true
-  }
-};
-
-export const Light = Template.bind({});
-export const Dark = Template.bind({});
-
-Light.args = {
-  color: "red",
-  defaultValue: false,
-  label: "test"
-};
-Dark.args = {
-  color: "gray",
-  defaultValue: false
-};

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

@@ -1,90 +0,0 @@
-import React from "react";
-import { HawaProvider } from "../../themes/HawaProvider";
-import { ActionButton, HawaLogoButton } from "../../ui";
-
-export default {
-  title: "Elements/Buttons/LogoButtons",
-  component: ActionButton,
-  argTypes: {
-    theme: {
-      options: ["primary", "secondary", "default"],
-      control: { type: "select" }
-    },
-    buttonLabel: { control: "text" },
-    logo: { control: "text" }
-  },
-  args: {
-    buttonLabel: "test",
-    logo: "google",
-    theme: "primary"
-  }
-};
-const Template = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <HawaLogoButton logo={args.logo} buttonText={args.buttonLabel} />
-    </HawaProvider>
-  );
-};
-
-export const Google = Template.bind({});
-Google.args = {
-  buttonLabel: "Sign in via Google",
-  logo: "google",
-  theme: "primary"
-};
-
-export const Twitter = Template.bind({});
-Twitter.args = {
-  buttonLabel: "Sign in via Twitter",
-  logo: "twitter",
-  theme: "primary"
-};
-export const Github = Template.bind({});
-Github.args = {
-  buttonLabel: "Sign in via Github",
-  logo: "github",
-  theme: "primary"
-};
-export const WalletPay = Template.bind({});
-WalletPay.args = {
-  buttonLabel: "Pay with Wallet",
-  logo: "wallet",
-  theme: "primary"
-};
-export const GooglePay = Template.bind({});
-GooglePay.args = {
-  buttonLabel: "Google Pay",
-  logo: "googlepay",
-  theme: "primary"
-};
-export const ApplePay = Template.bind({});
-ApplePay.args = {
-  buttonLabel: "Apple Pay",
-  logo: "applepay",
-  theme: "primary"
-};
-export const STCPay = Template.bind({});
-STCPay.args = {
-  buttonLabel: "STC Pay",
-  logo: "stcpay",
-  theme: "primary"
-};
-export const VisaMasterPay = Template.bind({});
-VisaMasterPay.args = {
-  buttonLabel: "Visa / Mastercard",
-  logo: "visa/master",
-  theme: "primary"
-};
-export const PayPal = Template.bind({});
-PayPal.args = {
-  buttonLabel: "PayPal",
-  logo: "paypal",
-  theme: "primary"
-};
-export const Mada = Template.bind({});
-Mada.args = {
-  buttonLabel: "Mada",
-  logo: "mada",
-  theme: "primary"
-};

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

@@ -1,53 +0,0 @@
-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"
-  }
-};
-
-const Template = (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>
-  );
-};
-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");
-  }
-};