@sikka/hawa 0.0.6 → 0.0.9

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,10 @@ export default {
 
 const SignInTemplate = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <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"}
@@ -51,10 +50,9 @@ SignIn.args = {
 
 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}
@@ -81,7 +79,7 @@ SignUp.args = {
 
 const ResetPasswordTemplate = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <ResetPasswordForm error={args.showError} theme={args.theme} {...args} />
     </HawaProvider>
   );
@@ -89,11 +87,12 @@ const ResetPasswordTemplate = (args) => {
 export const ResetPassword = ResetPasswordTemplate.bind({});
 ResetPassword.args = {
   theme: "primary",
-  showError: false
+  showError: false,
+  sent: false
 };
 const NewPasswordTemplate = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <NewPasswordForm error={args.showError} theme={args.theme} {...args} />
     </HawaProvider>
   );
@@ -101,5 +100,6 @@ const NewPasswordTemplate = (args) => {
 export const NewPassword = NewPasswordTemplate.bind({});
 NewPassword.args = {
   theme: "primary",
-  showError: false
+  showError: false,
+  passwordChanged: false
 };

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

@@ -25,6 +25,7 @@ export default {
   args: {
     theme: "primary",
     viaWallet: true,
+    viaMada: true,
     viaApplePay: true,
     viaGooglePay: true,
     viaSTCPay: true,
@@ -35,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"
@@ -74,9 +74,13 @@ export const PayViaCreditCard = (args) => {
 };
 
 export const ChargeWallet = (args) => {
-  return <ChargeWalletForm theme={args.theme} currency="SAR" />;
+  return (
+    <HawaProvider themeName={args.theme}>
+      <ChargeWalletForm currency="SAR" />
+    </HawaProvider>
+  );
 };
 
-// ChargeWallet.args = {
-//   theme: "secondary"
-// };
+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.mdx

@@ -0,0 +1,229 @@
+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 {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    flex-direction:column;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+  
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+  
+`}</style>
+
+# 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.
+
+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">Structure</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" /> */}
+    <h3>Layout</h3>
+    <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" /> */}
+    <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" /> */}
+    <h3>Elements</h3>
+    <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" /> */}
+    <h3>UI</h3>
+    <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

@@ -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/UIStories/ActionButton.stories.js

@@ -1,37 +1,24 @@
 import React from "react";
-
-import { defaultTheme, HawaProvider } from "../../themes/HawaProvider";
+import { 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)
-
 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

@@ -3,22 +3,8 @@ import CastIcon from "@mui/icons-material/Cast";
 import { HawaProvider } from "../../themes/HawaProvider";
 import { AdaptiveButton } from "../../ui";
 
-const Template = (args) => {
-  const theme = {
-    borderRadius: 10,
-    primaryColor: "#004fff",
-    secondaryColor: "red",
-    // margins: "10px",
-    paddings: 10
-  };
-  return (
-    <HawaProvider theme={theme}>
-      <AdaptiveButton {...args} />
-    </HawaProvider>
-  );
-};
 export default {
-  title: "UI/AdaptiveButton",
+  title: "Elements/Buttons/AdaptiveButton",
   component: AdaptiveButton,
   argsTypes: {
     buttonLabel: { control: "text" },
@@ -26,40 +12,53 @@ export default {
     buttonColor: { control: "color" },
     padding: { control: "number" },
     hintTitle: { control: "text" },
-    hintContent: { control: "text" }
+    hintContent: { control: "text" },
+    theme: {
+      options: ["primary", "secondary", "default"],
+      control: { type: "select" }
+    }
   },
   args: {
-    // type: "text",
-    // buttonLabel: "Test"
-    // borderRadius: 15,
     hintTitle: "test",
     hintContent: "more test",
-    buttonColor: "#f9f9f9"
+    buttonColor: "#f9f9f9",
+    theme: "primary"
   }
 };
 
-export const Light = Template.bind({});
-Light.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  icon: <CastIcon />,
-  textColor: "#000000",
-  buttonColor: "#f9f9f9"
+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 Dark = Template.bind({});
-Dark.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  buttonColor: "#878787",
-  textColor: "#ffffff",
-  icon: <CastIcon />
+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",
@@ -67,12 +66,14 @@ Dark.args = {
 };
 export const Danger = Template.bind({});
 Danger.args = {
-  showText: true,
-  buttonLabel: "test",
-  borderRadius: 5,
-  buttonColor: "#c0c0c0",
-  danger: true,
-  icon: <CastIcon />
+  // showText: true,
+  // buttonLabel: "test",
+  // borderRadius: 5,
+  // buttonColor: "#c0c0c0",
+  // danger: true,
+  // icon: <CastIcon />,
+  theme: "primary"
+
   // placeholder: "Exemple ...",
   // defaultValue: "This is default value",
   // inputLabel: "Text Field",

package/src/stories/UIStories/Alert.stories.js

@@ -5,28 +5,15 @@ import { HawaAlert } from "../../ui";
 
 const Template = (args) => {
   return (
-    <HawaProvider theme={{ ...defaultTheme }}>
+    <HawaProvider themeName={args.theme}>
       <HawaAlert
-        themeType={args.theme}
         title="What?"
         text="This is a success alert"
         severity="success"
       />
-      <HawaAlert
-        themeType={args.theme}
-        text="This is an info alert"
-        severity="info"
-      />
-      <HawaAlert
-        themeType={args.theme}
-        text="This is a warning alert"
-        severity="warning"
-      />
-      <HawaAlert
-        themeType={args.theme}
-        text="This is an error alert"
-        severity="error"
-      />
+      <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>
   );
 };

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

@@ -0,0 +1,90 @@
+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"
+};