@sikka/hawa 0.0.3 → 0.0.6

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

@@ -0,0 +1,105 @@
+import React from "react";
+import {
+  NewPasswordForm,
+  ResetPasswordForm,
+  SignInForm,
+  SignUpForm
+} from "../../blocks/AuthForms";
+import { defaultTheme, 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 theme={{ ...defaultTheme }}>
+      <SignInForm
+        {...args}
+        error={args.showError}
+        theme={args.theme}
+        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 theme={{ ...defaultTheme }}>
+      <SignUpForm
+        {...args}
+        theme={args.theme}
+        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 theme={{ ...defaultTheme }}>
+      <ResetPasswordForm error={args.showError} theme={args.theme} {...args} />
+    </HawaProvider>
+  );
+};
+export const ResetPassword = ResetPasswordTemplate.bind({});
+ResetPassword.args = {
+  theme: "primary",
+  showError: false
+};
+const NewPasswordTemplate = (args) => {
+  return (
+    <HawaProvider theme={{ ...defaultTheme }}>
+      <NewPasswordForm error={args.showError} theme={args.theme} {...args} />
+    </HawaProvider>
+  );
+};
+export const NewPassword = NewPasswordTemplate.bind({});
+NewPassword.args = {
+  theme: "primary",
+  showError: false
+};

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

@@ -0,0 +1,82 @@
+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,
+    viaApplePay: true,
+    viaGooglePay: true,
+    viaSTCPay: true,
+    viaCreditCard: true,
+    viaPayPal: true
+  }
+};
+
+export const PaymentSelection = (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>
+  );
+};
+
+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 <ChargeWalletForm theme={args.theme} currency="SAR" />;
+};
+
+// ChargeWallet.args = {
+//   theme: "secondary"
+// };

package/src/stories/{UserAccount.stories.js → BlocksStories/UserAccount.stories.js}

@@ -1,8 +1,8 @@
 import React from "react";
 import {
   UserProfile
-} from "../blocks/Account";
-import { defaultTheme, HawaProvider } from "../themes/HawaProvider";
+} from "../../blocks/Account";
+import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
 
 export default {
   title: "Blocks/UserProfile",

package/src/stories/GlobalVariables.stories.js

@@ -1,101 +1,44 @@
-import React, { useState } from "react";
-import { storiesOf } from "@storybook/react";
-
-import "../styles.css";
-
-const stories = storiesOf("Test", module);
-
-stories.add("Global Variables", () => {
-  return <div>test</div>;
-});
+import React from "react";
+import PropTypes from "prop-types";
 
 export const GlobalVariables = (args) => {
   //   const methods = useForm();
-  return <div>test</div>;
+  return <div>TESTING COMPONENT</div>;
+};
+export const AnotherComponent = (args) => {
+  //   const methods = useForm();
+  return <div>TESTING COMPONENT</div>;
+};
+AnotherComponent.propTypes = {
+  textLabel: PropTypes.string
 };
 export default {
-  title: "GlobalVariables",
-  component: [
-    StyledCheckBox,
-    StyledTextFieldT,
-    StyledTextAreaT,
-    StyledRadioSeletorT
-  ],
+  title: "TestTitle",
+  component: [GlobalVariables, AnotherComponent],
   argTypes: {
     resize: {
+      description: "overwritten description",
+      table: {
+        type: {
+          summary: "something short"
+        },
+        defaultValue: { summary: "Hello" }
+      },
       options: ["vertical", "horizontal", "both"],
-      control: { type: "radio" }
+      control: { type: "select" }
+    },
+    label: {
+      description: "overwritten description",
+      table: {
+        type: {
+          summary: "something short",
+          detail: "something really really long"
+        },
+        defaultValue: { summary: "Hello" }
+      },
+      control: {
+        type: null
+      }
     }
   }
 };
-
-/****************************/
-// STYLED CHECKBOX TEMPLATE
-// const StyledCheckBoxTemplate = (args) => {
-//   const methods = useForm();
-//   return (
-//     <FormProvider {...methods}>
-//       <StyledCheckbox {...args} />
-//     </FormProvider>
-//   );
-// };
-// export const StyledCheckBox = StyledCheckBoxTemplate.bind({});
-// StyledCheckBox.args = {
-//   name: "checkbox",
-//   label: "CheckBox",
-//   color: "blue",
-//   rules: { required: true },
-//   defaultValue: true
-// };
-/****************************/
-
-/****************************/
-// STYLED TextField TEMPLATE
-// const StyledTextFieldTemplate = (args) => {
-//   const methods = useForm();
-//   return (
-//     <FormProvider {...methods}>
-//       <StyledTextField {...args} />
-//     </FormProvider>
-//   );
-// };
-
-// export const StyledTextFieldT = StyledTextFieldTemplate.bind({});
-// StyledTextFieldT.args = {
-//   name: "styledtextfield",
-//   inputLabel: "Label",
-//   bdRadius: 12,
-//   bgColor: "lightgray",
-//   helperText: "This is HelperText",
-//   type: "text",
-//   placeholder: "exemple ..."
-// };
-
-/****************************/
-// Radio Selector Template
-// const styledRadioSelectorTempalte = (args) => {
-//   const methods = useForm();
-
-//   return (
-//     <FormProvider {...methods}>
-//       <StyledRadioSelector {...args} />
-//     </FormProvider>
-//   );
-// };
-
-// export const StyledRadioSeletorT = styledRadioSelectorTempalte.bind({});
-// StyledRadioSeletorT.args = {
-//   name: "Radio Selector",
-//   shouldUnregister: true,
-//   options: [
-//     { text: "Option 1", label: "option1" },
-//     { text: "Option 2", label: "option2" },
-//     { text: "Option 3", label: "option3" }
-//   ],
-//   selectedColor: "blue",
-//   bdRadius: 12,
-//   defaultValue: "option2",
-//   bgSelectedColor: "red",
-//   textSelectedColor: "black"
-// };
-/****************************/

package/src/stories/HawaProvider.stories.js

@@ -1,5 +1,4 @@
 import React from "react";
-import CastIcon from "@material-ui/icons/Cast";
 import { HawaProvider } from "../themes/HawaProvider";
 
 const Template = (args) => {

package/src/stories/Introduction.stories.js

@@ -1,16 +1,18 @@
-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" />
-
-<style>{`
+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" />;
+
+{
+  /* <style>
+{`
   .subheading {
     --mediumdark: '#999999';
     font-weight: 900;
@@ -112,100 +114,120 @@ import StackAlt from './assets/stackalt.svg';
   }
 
   
-`}</style>
-
-# Welcome to Storybook
-
-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.
-
-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.
-
-<div className="subheading">Configure</div>
-
-<div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
-    <img src={Plugin} alt="plugin" />
-    <span>
-      <strong>Presets for popular tools</strong>
-      Easy setup for TypeScript, SCSS and more.
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
-    <img src={StackAlt} alt="Build" />
-    <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" />
-    <span>
-      <strong>Styling</strong>
-      How to load and configure CSS libraries
-    </span>
-  </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
-    <img src={Flow} alt="flow" />
-    <span>
-      <strong>Data</strong>
-      Providers and mocking for data libraries
-    </span>
-  </a>
-</div>
-
-<div className="subheading">Learn</div>
-
-<div className="link-list">
-  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
-    <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" />
-    <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" />
-    <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" />
-    <span>
-      <strong>Discord chat</strong>
-      Chat with maintainers and the community
-    </span>
-  </a>
-</div>
-
-<div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>src/stories/Introduction.stories.mdx</code>
-</div>
+`}
+</style> */
+}
+
+// # Welcome to Storybook
+
+// 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.
+
+// 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.
+
+<>
+  <div className="subheading">Configure</div>
+
+  <div className="link-list">
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs/react/addons/addon-types"
+      target="_blank"
+    >
+      {/* <img src={Plugin} alt="plugin" /> */}
+      <span>
+        <strong>Presets for popular tools</strong>
+        Easy setup for TypeScript, SCSS and more.
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs/react/configure/webpack"
+      target="_blank"
+    >
+      {/* <img src={StackAlt} alt="Build" /> */}
+      <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" /> */}
+      <span>
+        <strong>Styling</strong>
+        How to load and configure CSS libraries
+      </span>
+    </a>
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+      target="_blank"
+    >
+      {/* <img src={Flow} alt="flow" /> */}
+      <span>
+        <strong>Data</strong>
+        Providers and mocking for data libraries
+      </span>
+    </a>
+  </div>
+
+  <div className="subheading">Learn</div>
+
+  <div className="link-list">
+    <a
+      className="link-item"
+      href="https://storybook.js.org/docs"
+      target="_blank"
+    >
+      {/* <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" /> */}
+      <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" /> */}
+      <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" /> */}
+      <span>
+        <strong>Discord chat</strong>
+        Chat with maintainers and the community
+      </span>
+    </a>
+  </div>
+
+  <div className="tip-wrapper">
+    <span className="tip">Tip</span>Edit the Markdown in{" "}
+    <code>src/stories/Introduction.stories.mdx</code>
+  </div>
+</>;

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

@@ -0,0 +1,56 @@
+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} theme={{ ...defaultTheme, ...args.theme }}>
+      <Box themeType="primary">Box 1</Box>
+      <Box themeType="secondary">
+        <div style={{ backgroundColor: "white", padding: 10, color: "black" }}>
+          testing box in box
+        </div>
+      </Box>
+      <Box themeType="secondary">Box 3</Box>
+    </HawaProvider>
+  );
+};
+export default {
+  title: "Layout/Box",
+  component: <Box />,
+  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",
+  borderRadius: 5,
+  padding: theme.paddings,
+  textColor: "#000000",
+  buttonColor: "#f9f9f9"
+};
+export const Compact = Template.bind({});
+Compact.args = {
+  size: "small",
+  showText: true,
+  buttonLabel: "test",
+  theme: {
+    borderRadius: 5,
+    paddings: theme.paddings / 2,
+    textColor: "#000000",
+    buttonColor: "#f9f9f9"
+  }
+};