@sikka/hawa 0.0.10 → 0.0.11

package/src/layout/Box.js

@@ -1,38 +1,41 @@
-import React, { useContext } from "react";
-import { ThemeProvider } from "../themes/HawaProvider";
+import React from "react";
 
 export const Box = (props) => {
-  const { hawaTheme, themeName } = useContext(ThemeProvider);
-  let boxStyle = {};
+  // let boxStyle = {};
 
-  let currentTheme = Object.keys(hawaTheme.layout).find(
-    (tName) => tName.toLowerCase() === themeName?.toLowerCase()
-  );
-  if (currentTheme) {
-    boxStyle = {
-      display: "flex",
-      flexDirection: props.horizontal ? "row" : "column",
-      ...hawaTheme?.layout[currentTheme],
-      backgroundColor: props.noColor
-        ? "none"
-        : hawaTheme.layout[currentTheme].backgroundColor,
-      padding: props.noPadding ? 0 : hawaTheme?.layout[currentTheme].padding,
-      margin: props.noMargin ? 0 : hawaTheme?.layout[currentTheme].margin,
-      maxWidth: props.maxWidth
-    };
-  } else {
-    boxStyle = {
-      display: "flex",
-      flexDirection: props.horizontal ? "row" : "column",
-      color: "white",
-      marginTop: props.last ? 10 * 2 : 0,
-      backgroundColor: props.noColor ? "none" : "lightGrey",
-      padding: props.noPadding ? 0 : 10,
-      margin: props.noMargin ? 0 : 10,
-      maxWidth: props.maxWidth,
-      borderRadius: 0
-    };
-  }
+  // let currentTheme = Object.keys(hawaTheme.layout).find(
+  //   (tName) => tName.toLowerCase() === themeName?.toLowerCase()
+  // );
+  // if (currentTheme) {
+  //   boxStyle = {
+  //     display: "flex",
+  //     flexDirection: props.horizontal ? "row" : "column",
+  //     ...hawaTheme?.layout[currentTheme],
+  //     backgroundColor: props.noColor
+  //       ? "none"
+  //       : hawaTheme.layout[currentTheme].backgroundColor,
+  //     padding: props.noPadding ? 0 : hawaTheme?.layout[currentTheme].padding,
+  //     margin: props.noMargin ? 0 : hawaTheme?.layout[currentTheme].margin,
+  //     maxWidth: props.maxWidth
+  //   };
+  // } else {
+  //   boxStyle = {
+  //     display: "flex",
+  //     flexDirection: props.horizontal ? "row" : "column",
+  //     color: "white",
+  //     marginTop: props.last ? 10 * 2 : 0,
+  //     backgroundColor: props.noColor ? "none" : "lightGrey",
+  //     padding: props.noPadding ? 0 : 10,
+  //     margin: props.noMargin ? 0 : 10,
+  //     maxWidth: props.maxWidth,
+  //   };
+  // }
 
-  return <div style={boxStyle}>{props.children}</div>;
+  return (
+    <div
+    // style={boxStyle}
+    >
+      {props.children}
+    </div>
+  );
 };

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

@@ -1,3 +1,4 @@
+import { ThemeProvider } from "@mui/material";
 import React from "react";
 import {
   NewPasswordForm,
@@ -5,7 +6,6 @@ import {
   SignInForm,
   SignUpForm
 } from "../../blocks/AuthForms";
-import { HawaProvider } from "../../themes/HawaProvider";
 
 export default {
   title: "Blocks/AuthBlocks",
@@ -20,22 +20,35 @@ export default {
 
 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>
+    <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}
+    />
   );
 };
 
@@ -50,22 +63,37 @@ SignIn.args = {
 
 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>
+    <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({});
@@ -79,9 +107,27 @@ SignUp.args = {
 
 const ResetPasswordTemplate = (args) => {
   return (
-    <HawaProvider themeName={args.theme}>
-      <ResetPasswordForm error={args.showError} theme={args.theme} {...args} />
-    </HawaProvider>
+    <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({});
@@ -92,9 +138,29 @@ ResetPassword.args = {
 };
 const NewPasswordTemplate = (args) => {
   return (
-    <HawaProvider themeName={args.theme}>
-      <NewPasswordForm error={args.showError} theme={args.theme} {...args} />
-    </HawaProvider>
+    <NewPasswordForm
+      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}
+      theme={args.theme}
+      {...args}
+    />
   );
 };
 export const NewPassword = NewPasswordTemplate.bind({});

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

@@ -5,7 +5,6 @@ import {
   ChargeWalletForm,
   PayWithWallet
 } from "../../blocks/Payment";
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
 
 export default {
   title: "Blocks/PaymentBlocks",
@@ -36,49 +35,35 @@ export default {
 
 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>
+    <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 PayViaWallet = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <PayWithWallet theme={args.theme} />
-    </HawaProvider>
-  );
+  return <PayWithWallet theme={args.theme} />;
 };
 export const PayViaCreditCard = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <CreditCardForm />
-    </HawaProvider>
-  );
+  return <CreditCardForm />;
 };
 
 export const ChargeWallet = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <ChargeWalletForm currency="SAR" />
-    </HawaProvider>
-  );
+  return <ChargeWalletForm currency="SAR" />;
 };
 
 ChargeWallet.args = {

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { UserProfile } from "../../blocks/Account";
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
 
 export default {
   title: "Blocks/UserBlocks",
@@ -13,28 +12,15 @@ export default {
   }
 };
 
-const theme = {
-  ...defaultTheme,
-  paddings: 20
-};
-
 export const UserAccount = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme, ...theme }}>
-      <UserProfile {...args} />
-    </HawaProvider>
-  );
+  return <UserProfile {...args} />;
 };
 
 UserAccount.args = {
   theme: "primary"
 };
 export const UserSettings = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme, ...theme }}>
-      <UserProfile {...args} />
-    </HawaProvider>
-  );
+  return <UserProfile {...args} />;
 };
 UserSettings.args = {
   theme: "primary"

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 {
@@ -37,8 +33,7 @@ Normal.args = {
   size: "large",
   showText: true,
   buttonLabel: "test",
-  borderRadius: 5,
-  padding: theme.paddings,
+  // padding: theme.paddings,
   textColor: "#000000",
   buttonColor: "#f9f9f9"
 };
@@ -48,8 +43,7 @@ Compact.args = {
   showText: true,
   buttonLabel: "test",
   theme: {
-    borderRadius: 5,
-    paddings: theme.paddings / 2,
+    // paddings: theme.paddings / 2,
     textColor: "#000000",
     buttonColor: "#f9f9f9"
   }

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,5 +1,4 @@
 import React from "react";
-import { HawaProvider } from "../../themes/HawaProvider";
 import { ActionButton, HawaLogoButton } from "../../ui";
 
 export default {
@@ -19,12 +18,9 @@ export default {
     theme: "primary"
   }
 };
+
 const Template = (args) => {
-  return (
-    <HawaProvider themeName={args.theme}>
-      <HawaLogoButton logo={args.logo} buttonText={args.buttonLabel} />
-    </HawaProvider>
-  );
+  return <HawaLogoButton logo={args.logo} buttonText={args.buttonLabel} />;
 };
 
 export const Google = Template.bind({});

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { HawaProvider } from "../../themes/HawaProvider";
 import { HawaRadio } from "../../ui";
 
 export default {
@@ -18,7 +17,6 @@ export default {
 
 const Template = (args) => {
   return (
-    <HawaProvider themeName={args.theme}>
       <HawaRadio
         defaultValue="option1"
         options={[
@@ -27,7 +25,6 @@ const Template = (args) => {
           { text: "Option 3", label: "option3" }
         ]}
       />
-    </HawaProvider>
   );
 };
 export const Light = Template.bind({});

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",