@sikka/hawa 0.0.5 → 0.0.8

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

@@ -5,7 +5,7 @@ import {
   SignInForm,
   SignUpForm
 } from "../../blocks/AuthForms";
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+import { HawaProvider } from "../../themes/HawaProvider";
 
 export default {
   title: "Blocks/AuthBlocks",
@@ -20,11 +20,11 @@ export default {
 
 const SignInTemplate = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <SignInForm
         {...args}
-        theme={args.theme}
-        handleSignIn={() => console.log("singing in via email")}
+        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")}
@@ -44,15 +44,16 @@ SignIn.args = {
   viaGoogle: true,
   viaGithub: true,
   viaTwitter: true,
+  showError: false,
   theme: "primary"
 };
 
 const SignUpTemplate = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <SignUpForm
         {...args}
-        theme={args.theme}
+        error={args.showError}
         handleSignUp={() => console.log("singing up via email")}
         viaGoogle={args.viaGoogle}
         googleButtonLabel={"Sign up with Google"}
@@ -72,28 +73,33 @@ SignUp.args = {
   viaGoogle: true,
   viaGithub: true,
   viaTwitter: true,
+  showError: false,
   theme: "primary"
 };
 
 const ResetPasswordTemplate = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <ResetPasswordForm theme={args.theme} {...args} />
+    <HawaProvider themeName={args.theme}>
+      <ResetPasswordForm error={args.showError} theme={args.theme} {...args} />
     </HawaProvider>
   );
 };
 export const ResetPassword = ResetPasswordTemplate.bind({});
 ResetPassword.args = {
-  theme: "primary"
+  theme: "primary",
+  showError: false,
+  sent: false
 };
 const NewPasswordTemplate = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <NewPasswordForm theme={args.theme} {...args} />
+    <HawaProvider themeName={args.theme}>
+      <NewPasswordForm error={args.showError} theme={args.theme} {...args} />
     </HawaProvider>
   );
 };
 export const NewPassword = NewPasswordTemplate.bind({});
 NewPassword.args = {
-  theme: "primary"
+  theme: "primary",
+  showError: false,
+  passwordChanged: false
 };

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

@@ -1,5 +1,10 @@
 import React from "react";
-import { SelectPayment, CreditCardForm } from "../../blocks/Payment";
+import {
+  SelectPayment,
+  CreditCardForm,
+  ChargeWalletForm,
+  PayWithWallet
+} from "../../blocks/Payment";
 import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
 
 export default {
@@ -20,6 +25,7 @@ export default {
   args: {
     theme: "primary",
     viaWallet: true,
+    viaMada: true,
     viaApplePay: true,
     viaGooglePay: true,
     viaSTCPay: true,
@@ -30,10 +36,9 @@ export default {
 
 export const PaymentSelection = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <SelectPayment
         {...args}
-        theme={args.theme}
         walletLabel="Wallet Balance"
         handleWallet={() => console.log("paying via wallet")}
         visaMasterLabel="Credit Card"
@@ -56,24 +61,7 @@ export const PaymentSelection = (args) => {
 export const PayViaWallet = (args) => {
   return (
     <HawaProvider theme={{ ...defaultTheme }}>
-      <SelectPayment
-        {...args}
-        theme={args.theme}
-        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")}
-      />
+      <PayWithWallet theme={args.theme} />
     </HawaProvider>
   );
 };
@@ -87,25 +75,12 @@ export const PayViaCreditCard = (args) => {
 
 export const ChargeWallet = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <SelectPayment
-        {...args}
-        theme={args.theme}
-        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 themeName={args.theme}>
+      <ChargeWalletForm currency="SAR" />
     </HawaProvider>
   );
 };
+
+ChargeWallet.args = {
+  theme: "secondary"
+};

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

@@ -0,0 +1,41 @@
+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/{Introduction.stories.js → Introduction.stories.mdx}

@@ -1,14 +1,14 @@
-import { Meta } from '@storybook/addon-docs';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
-
-<Meta title="Example/Introduction" />
+import { Meta } from "@storybook/addon-docs"
+// import Code from './assets/code-brackets.svg';
+// import Colors from './assets/colors.svg';
+// import Comments from './assets/comments.svg';
+// import Direction from './assets/direction.svg';
+// import Flow from './assets/flow.svg';
+// import Plugin from './assets/plugin.svg';
+// import Repo from './assets/repo.svg';
+// import StackAlt from './assets/stackalt.svg';
+
+<Meta title="Introduction" />
 
 <style>{`
   .subheading {
@@ -54,6 +54,7 @@ import StackAlt from './assets/stackalt.svg';
     transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
     color: #333333;
     display: flex;
+    flex-direction:column;
     align-items: flex-start;
   }
 
@@ -114,16 +115,20 @@ import StackAlt from './assets/stackalt.svg';
   
 `}</style>
 
-# Welcome to Storybook
+# Welcome to Hawa
+
+<div className="tip-wrapper">
+  <span className="tip">Notice</span>This page is still in progress
+</div>
 
 Storybook helps you build UI components in isolation from your app's business logic, data, and context.
-That makes it easy to develop hard - to - reach states.Save these UI states as ** stories ** to revisit during development, testing, or QA.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
 
 Browse example stories now by navigating to them in the sidebar.
-View their code in the`src/stories` directory to learn how they work.
-We recommend building UIs with a[** component - driven **](https://componentdriven.org) process starting with atomic components and ending with pages.
+View their code in the `src/stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
 
-<div className="subheading">Configure</div>
+<div className="subheading">Structure</div>
 
 <div className="link-list">
   <a
@@ -131,7 +136,8 @@ We recommend building UIs with a[** component - driven **](https://componentdriv
     href="https://storybook.js.org/docs/react/addons/addon-types"
     target="_blank"
   >
-    <img src={Plugin} alt="plugin" />
+    {/* <img src={Plugin} alt="plugin" /> */}
+    <h3>Layout</h3>
     <span>
       <strong>Presets for popular tools</strong>
       Easy setup for TypeScript, SCSS and more.
@@ -142,18 +148,21 @@ We recommend building UIs with a[** component - driven **](https://componentdriv
     href="https://storybook.js.org/docs/react/configure/webpack"
     target="_blank"
   >
-    <img src={StackAlt} alt="Build" />
+    {/* <img src={StackAlt} alt="Build" /> */}
+    <h3>Blocks</h3>
     <span>
       <strong>Build configuration</strong>
       How to customize webpack and Babel
     </span>
+
   </a>
   <a
     className="link-item"
     href="https://storybook.js.org/docs/react/configure/styling-and-css"
     target="_blank"
   >
-    <img src={Colors} alt="colors" />
+    {/* <img src={Colors} alt="colors" /> */}
+    <h3>Elements</h3>
     <span>
       <strong>Styling</strong>
       How to load and configure CSS libraries
@@ -164,7 +173,8 @@ We recommend building UIs with a[** component - driven **](https://componentdriv
     href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
     target="_blank"
   >
-    <img src={Flow} alt="flow" />
+    {/* <img src={Flow} alt="flow" /> */}
+    <h3>UI</h3>
     <span>
       <strong>Data</strong>
       Providers and mocking for data libraries
@@ -176,28 +186,36 @@ We recommend building UIs with a[** component - driven **](https://componentdriv
 
 <div className="link-list">
   <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <img src={Repo} alt="repo" />
+    {/* <img src={Repo} alt="repo" /> */}
     <span>
       <strong>Storybook documentation</strong>
       Configure, customize, and extend
     </span>
   </a>
-  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
-    <img src={Direction} alt="direction" />
+  <a
+    className="link-item"
+    href="https://storybook.js.org/tutorials/"
+    target="_blank"
+  >
+    {/* <img src={Direction} alt="direction" /> */}
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
-  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
-    <img src={Code} alt="code" />
+  <a
+    className="link-item"
+    href="https://github.com/storybookjs/storybook"
+    target="_blank"
+  >
+    {/* <img src={Code} alt="code" /> */}
     <span>
       <strong>GitHub project</strong>
       View the source and add issues
     </span>
   </a>
   <a className="link-item" href="https://discord.gg/storybook" target="_blank">
-    <img src={Comments} alt="comments" />
+    {/* <img src={Comments} alt="comments" /> */}
     <span>
       <strong>Discord chat</strong>
       Chat with maintainers and the community
@@ -206,6 +224,6 @@ We recommend building UIs with a[** component - driven **](https://componentdriv
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
   <code>src/stories/Introduction.stories.mdx</code>
 </div>

package/src/stories/LayoutStories/Box.stories.js

@@ -7,14 +7,14 @@ const theme = {
 
 const Template = (args) => {
   return (
-    <HawaProvider size={args.size} theme={{ ...defaultTheme, ...args.theme }}>
-      <Box themeType="primary">Box 1</Box>
-      <Box themeType="secondary">
+    <HawaProvider size={args.size} themeName={"secondary"}>
+      <Box>Box 1</Box>
+      <Box>
         <div style={{ backgroundColor: "white", padding: 10, color: "black" }}>
           testing box in box
         </div>
       </Box>
-      <Box themeType="secondary">Box 3</Box>
+      <Box>Box 3</Box>
     </HawaProvider>
   );
 };

package/src/stories/{ActionButton.stories.js → UIStories/ActionButton.stories.js}

@@ -1,37 +1,24 @@
 import React from "react";
-
-import { defaultTheme, HawaProvider } from "../themes/HawaProvider";
-import { ActionButton } from "../ui";
-
-const Template = (args) => {
-  return (
-    <HawaProvider theme={{ ...defaultTheme }}>
-      <ActionButton themeType={args.theme} text={args.buttonLabel} />
-    </HawaProvider>
-  );
-};
-//types:
-//error (red)
-//warning (red)
-//notice (blue)
+import { HawaProvider } from "../../themes/HawaProvider";
+import { ActionButton } from "../../ui";
 
 export default {
-  title: "UI/ActionButton",
+  title: "Elements/Buttons/ActionButton",
   component: ActionButton,
   argTypes: {
     theme: {
-      description: "overwritten description",
-      table: {
-        type: {
-          summary: "something short"
-        },
-        defaultValue: { summary: "Hello" }
-      },
       options: ["primary", "secondary", "default"],
       control: { type: "select" }
     }
   }
 };
+const Template = (args) => {
+  return (
+    <HawaProvider themeName={args.theme}>
+      <ActionButton text={args.buttonLabel} />
+    </HawaProvider>
+  );
+};
 
 Template.args = {
   showText: true,
@@ -51,3 +38,9 @@ Secondary.args = {
   buttonLabel: "test",
   theme: "secondary"
 };
+export const Default = Template.bind({});
+Default.args = {
+  showText: true,
+  buttonLabel: "test",
+  theme: "default"
+};

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

@@ -0,0 +1,81 @@
+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/Alert.stories.js

@@ -0,0 +1,42 @@
+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"
+        severity="success"
+      />
+      <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:
+//error (red)
+//warning (red)
+//notice (blue)
+
+export default {
+  title: "UI/Alert",
+  component: HawaAlert,
+  argTypes: {
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
+  },
+  args: {
+    theme: "primary"
+  }
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  theme: "primary"
+};

package/src/stories/{CheckBox.stories.js → UIStories/CheckBox.stories.js}

@@ -1,14 +1,13 @@
 import React from "react";
-import { StyledCheckbox } from "../ui";
-import "../styles.css";
+import { HawaCheckbox } from "../../ui";
 
 const Template = (args) => {
-  return <StyledCheckbox {...args} />;
+  return <HawaCheckbox {...args} />;
 };
 
 export default {
   title: "UI/Checkbox",
-  component: Light,
+  component: HawaCheckbox,
   argsTypes: {
     defaultValue: {
       options: [true, false],

package/src/stories/UIStories/InputLabel.stories.js

@@ -0,0 +1,13 @@
+import { storiesOf } from "@storybook/react";
+import { HawaInputLabel } from "../../ui";
+
+export default {
+  title: "Components/InputLabel",
+  component: [HawaInputLabel],
+  argTypes: {
+    resize: {
+      options: ["vertical", "horizontal", "both"],
+      control: { type: "radio" }
+    }
+  }
+};