@sikka/hawa 0.0.13 → 0.0.16

package/src/stories/BlocksStories/Auth/SignUp.stories.js

@@ -5,6 +5,13 @@ export default {
   title: "Blocks/Auth/Sign Up",
   component: [SignUpForm],
   argTypes: {
+    lang: {
+      default: true,
+      control: "select",
+      options: ["ar", "en"],
+      description: "The language of the form",
+      table: { defaultValue: { summary: "en" } }
+    },
     viaGoogle: {
       default: true,
       control: "boolean",
@@ -51,6 +58,7 @@ const SignUpTemplate = (args) => {
       texts={{
         fullNameLabel: "Full Name",
         fullNamePlaceholder: "Fulan AlFulani",
+        fullNameRequiredText: "Full Name is required",
         emailLabel: "Email",
         emailPlaceholder: "Enter your email",
         emailRequiredText: "Email is required",

package/src/stories/BlocksStories/Payment/ChargeWallet.stories.js

@@ -24,7 +24,12 @@ export default {
 };
 
 export const ChargeWallet = (args) => {
-  return <ChargeWalletForm {...args} />;
+  return (
+    <ChargeWalletForm
+      handleChargeWallet={(e) => console.log("amount is ", e)}
+      {...args}
+    />
+  );
 };
 
 ChargeWallet.args = { currency: "SAR" };

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
+
+export default {
+  title: "Blocks/Pricing/In Billing",
+  component: [PricingPlans],
+  argTypes: {
+    lang: {
+      options: ["ar", "en"],
+      control: { type: "select" }
+    }
+  },
+  args: {
+    lang: "ar"
+  }
+};
+
+export const InBilling = (args) => {
+  return (
+    <PricingPlans
+      {...args}
+      plans={[
+        {
+          title: "Free",
+          title_ar: "تجريبي",
+          subtitle: "For everyone",
+          subtitle_ar: "للعرب",
+          price: 0,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
+        },
+        {
+          title: "Intro",
+          title_ar: "تجريبي",
+          subtitle: "For beginners",
+          subtitle_ar: "للعرب",
+          selectedPlan: true,
+          price: 10,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Current Plan",
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
+        },
+        {
+          title: "Pro",
+          title_ar: "تجريبي",
+          subtitle: "For professionals",
+          subtitle_ar: "للعرب",
+          price: 30,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
+        }
+      ]}
+    />
+  );
+};

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

@@ -0,0 +1,63 @@
+import React from "react";
+import { PricingPlans } from "../../../blocks/Pricing/PricingPlans";
+
+export default {
+  title: "Blocks/Pricing/In Landing",
+  component: [PricingPlans],
+  argTypes: {
+    lang: {
+      options: ["ar", "en"],
+      control: { type: "select" }
+    }
+  },
+  args: {
+    lang: "ar"
+  }
+};
+
+export const InLanding = (args) => {
+  return (
+    <PricingPlans
+      {...args}
+      plans={[
+        {
+          title: "Free",
+          title_ar: "تجريبي",
+          subtitle: "For everyone",
+          subtitle_ar: "للعرب",
+          price: 0,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
+        },
+        {
+          title: "Intro",
+          title_ar: "تجريبي",
+          subtitle: "For beginners",
+          subtitle_ar: "للعرب",
+          selectedPlan: false,
+          price: 10,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Current Plan",
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
+        },
+        {
+          title: "Pro",
+          title_ar: "تجريبي",
+          subtitle: "For professionals",
+          subtitle_ar: "للعرب",
+          price: 30,
+          currency: "SAR",
+          cycleText: "Monthly",
+          buttonText: "Select Plan",
+          features: ["one", "two", "three"],
+          features_ar: ["واحد", "اثنين", "ثلاثة"]
+        }
+      ]}
+    />
+  );
+};

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

@@ -1,27 +1,91 @@
-import { Container } from "@mui/material";
 import React from "react";
-import { HawaCard } from "../../elements";
+import { HawaPricingCard } from "../../elements";
 
 export default {
   title: "Elements/Cards/Pricing",
-  component: [HawaCard],
+  component: [HawaPricingCard],
   argTypes: {
-    buttonLabel: {
+    title: {
       control: "text",
-      description: "The text next to the logo"
+      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 Pricing = (args) => {
+export const LTR = (args) => {
   return (
-    <HawaCard
-      title="Pro"
-      subtitle="For small business"
-      price="300"
-      currency="SAR"
-      cycleText="Every 6 months"
+    <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/LayoutStories/AppBar.stories.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { HawaAppBar } from "../../elements";
+
+const Template = (args) => {
+  return <HawaAppBar />;
+};
+export default {
+  title: "Layout/AppBar",
+  component: [HawaAppBar],
+  parameters: {
+    backgrounds: {
+      default: "light"
+      // values: [
+      //   { name: "light", value: theme.lightBackground },
+      //   { name: "dark", value: theme.darkBackground }
+      // ]
+    }
+  }
+};
+
+export const Normal = Template.bind({});
+Normal.args = {
+  size: "large",
+  showText: true,
+  buttonLabel: "test",
+  // padding: theme.paddings,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+};

package/src/stories/LayoutStories/AppLayout.stories.js

@@ -0,0 +1,52 @@
+import React from "react";
+import { HawaAppLayout } from "../../layout";
+
+const Template = (args) => {
+  return (
+    <HawaAppLayout
+      pageName="page1"
+      pages={[
+        { text: "page1", icon: "fdd" },
+        { text: "page2", icon: "huhu" },
+        { text: "page3", icon: "test" }
+      ]}
+      //   pages={[
+      //     <HawaListItem text="dd" />,
+      //     <HawaListItem text="dd" />,
+      //     <HawaListItem text="dd" />
+      //   ]}
+      logo={
+        <img
+          height={40}
+          style={{ zIndex: 30, width: "100%" }}
+          src="https://xakher-images.s3.ap-southeast-1.amazonaws.com/sikka-logo.svg"
+        />
+      }
+    >
+      the rest of the app here
+    </HawaAppLayout>
+  );
+};
+export default {
+  title: "Layout/AppLayout",
+  component: [HawaAppLayout],
+  parameters: {
+    backgrounds: {
+      default: "light"
+      // values: [
+      //   { name: "light", value: theme.lightBackground },
+      //   { name: "dark", value: theme.darkBackground }
+      // ]
+    }
+  }
+};
+
+export const Normal = Template.bind({});
+Normal.args = {
+  size: "large",
+  showText: true,
+  buttonLabel: "test",
+  // padding: theme.paddings,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+};

package/src/styles.css

@@ -1,3 +1,4 @@
+
 .reset_password_root {
   display: flex;
   flex-direction: column;

package/storybook-static/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.f1ebae9b.iframe.bundle.js"></script><script src="vendors~main.5eab66d3.iframe.bundle.js"></script><script src="main.00b064cb.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.mdx","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.mdx)$"},{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];</script><script src="runtime~main.f1ebae9b.iframe.bundle.js"></script><script src="vendors~main.b4186832.iframe.bundle.js"></script><script src="main.66955578.iframe.bundle.js"></script></body></html>

package/storybook-static/index.html

@@ -37,7 +37,7 @@
         /* eslint-enable object-shorthand */
       })
     );
-  };</script><link rel="shortcut icon" href="/favicon.ico"/><link rel="icon" type="image/png" href="/hawa-icon.png" sizes="192x192"/><style>#root[hidden],
+  };</script><link rel="shortcut icon" href="/favicon.ico"/><link rel="icon" type="image/png" href="/hawa-icon.png" sizes="192x192"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet"/><style>#root[hidden],
       #docs-root[hidden] {
         display: none !important;
       }</style></head><body><div id="root"></div><div id="docs-root"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";